NA SKRÓTY
Piotr Peszko
+48 605 570 195
ppeszko@gmail.com

Jak zrobić fullscreen w Captivate

Jak zrobić fullscreen w Captivate

1 kwietnia 2015

Captivate daje możliwość wyświetlania treści na pełnym ekranie jedynie przy publikacji projektu w wersji Flash (SWF), ale ta traci na popularności, więc wypadałoby mieć taką samą funkcję dla wersji HTML5.

Co można ?

Niestety niewiele. Jedynym wyjściem, które daje Adobe Captivate (także w wersji 8) jest wybranie opcji Fullscreen w trakcie publikowania projektu.

Captivate-kurs-fullscreen

Niestety rezultat pozostawia wiele do życzenia. Osobiście nie chciałbym go nikomu pokazywać, bo po otwarciu projektu widzimy coś takiego:

Captivate-kurs-fullscreen-default

Po kliknięciu w link pojawia się nowe okno, które też nie do końca działa.

KALENDARZSzkoleń

Fullscreen w HTML5 

Jak widać domyślna opcja nie jest tym, czego oczekuje się od profesjonalnie wyglądającego materiału. Jesteśmy przecież przyzwyczajeni do tego, co oferuje youtube, czyli:

  • przycisku pełnego ekranu
  • maksymalizacji po podwójnym kliknięciu

Skoro youtube może i działa to w każdej przeglądarce, oznacza to, że technicznie jest to możliwe.

Skrypt JS w Captivate

Adobe Captivate 8 (poprzednie wersje również) daje możliwość wykorzystania JavaScriptu, który będzie komunikował się naszym szkoleniem i , albo będzie wywoływany z jego poziomu. Jeśli popatrzymy na to ideowo, wygląda to mniej więcej tak:

Nie musimy więc sterować zachowaniem przeglądarki z samego szkolenia, możemy stworzyć skrypt, który zostanie wywołany np. po wciśnięciu jakiegoś przycisku.

UWAGA: Java ma się do Javascriptu jak kot do kotary

WEBINARYRobię

Skrypt pełnego ekranu

Nie wchodząc w szczegóły tego na czym polega włączenie pełnego ekranu (dostępne np. tutaj) skupmy się jedynie na tym, żeby go wywołać.

 if (
 document.fullscreenEnabled ||
 document.webkitFullscreenEnabled ||
 document.mozFullScreenEnabled ||
 document.msFullscreenEnabled
 ) {
 var i = document.getElementById("main_container")
 if (
 document.fullscreenElement ||
 document.webkitFullscreenElement ||
 document.mozFullScreenElement ||
 document.msFullscreenElement
 ) {
 if (document.exitFullscreen) {
 document.exitFullscreen();
 } else if (document.webkitExitFullscreen) {
 document.webkitExitFullscreen();
 } else if (document.mozCancelFullScreen) {
 document.mozCancelFullScreen();
 } else if (document.msExitFullscreen) {
 document.msExitFullscreen();
 }
 }else{
 if (i.requestFullscreen) {
 i.requestFullscreen();
 } else if (i.webkitRequestFullscreen) {
 i.webkitRequestFullscreen();
 } else if (i.mozRequestFullScreen) {
 i.mozRequestFullScreen();
 } else if (i.msRequestFullscreen) {
 i.msRequestFullscreen();
 }
 }
 }

Jak to zrobić?

Jeśli nasz projekt ma działać tak samo jak youtube, czyli włączać pełny ekran po wciśnięciu przycisku, ale także po podwójnym kliknięciu musimy skupić się na tych akcjach osobno, pomimo tego, że są bardzo podobne.

A. Przycisk pełnego ekranu. 

  1. Tworzymy w projekcie obiekt: Button (przycisk). Przypisujemy do niego akcję On Success: Execute Javascript
    Captivate-kurs-fullscreen-przycisk
  2. Klikamy Script_Window.
    Captivate-kurs-fullscreen-przycisk-script
  3. Wklejamy powyższy skrypt i klikamy OK.
  4. Publikujemy projekt i sprawdzamy, czy działa.
PREZENTACJERobię

B. Podwójne kliknięcie dla pełnego ekranu. 

  1. Tworzymy pusty slajd, który zajmie możliwie mało czasu na początku projektu (minimalny czas to 0.1s).
    Captivate-kurs-fullscreen-shape-script
  2. Tworzymy Shape. 
  3. Zmieniamy go w przycisk. (w moim przypadku btn_2click). 
  4. Przypisujemy do niego akcję On Success: Execute Javascript
  5. Klikamy Script_Window. 
  6. Wklejamy powyższy skrypt i klikamy OK.
  7. Publikujemy projekt i sprawdzamy, czy działa.

Pliki demo i źródłowe

Szkolenie-Captivate-Warsztaty

""
1
Previous
Next
o-autorze
Piotr PESZKO

Urodziłem się w małym mieście na Podkarpaciu, tam po raz pierwszy zmuszono mnie tego, żeby zdobyć formalne wykształcenie, chociaż wolałem social learning, zbieranie puszek po napojach i przesiadywanie godzinami przed komputerem w poszukiwaniu szybszej metody na wczytanie gry z kasety do swojego Commodore 64.