Single Blog Title

This is a single blog caption
1
Kwi

Jak zrobić fullscreen w Captivate

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.

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

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.

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

Podobało Ci się? Chcesz więcej?

Zostaw swój e-mail, bardzo chętnie przypomnę Ci o nowych treściach, a przy okazji dostaniesz e-booka o elearningu.

Poprzednie newslettery możesz znaleźć na stronie archiwum.

* indicates required