Komunikacja z filmami Flash za pomocą JavaScript i dHTML

Autor: Tomasz Sieniek, dodano: 26-07-2003
Kategoria: Programowanie i tworzenie

Nowe funkcje języka ActionScript we Flashu 5 znacznie podniosły możliwości w zakresie tworzenia dynamicznych i interaktywnych stron sieciowych. Artykuł prezentuje możliwości komunikowania się flasha z java scriptem i dynamicznym html.

Obecnie filmy Flasha mogą bezpośrednio wymieniać wszelkie rodzaje danych ze skryptami CGI działającymi po stronie serwera.

Jeśli jednak chcesz komunikować się z przeglądarką internetową lub dokumentem HTML, musisz wykorzystać akcje z grupy FSCommand lub akcję getURL z deklaracją javascript.

Ponieważ część przeglądarek nie obsługuje wszystkich metod komunikacji Flasha z językiem JavaScript, ograniczymy się tylko do omówienia niektórych akcji FSCommand oraz właściwości filmu Flasha, które można kontrolować z poziomu języka JavaScript.

Współpraca z JavaScript

Jak wspomniano wcześniej, język ActionScript Flasha oferuje akcję o nazwie fscommand. Służy ona do wysyłania poleceń (lub innych ciągów znaków) z filmu Flasha do otoczenia, w którym film Flasha jest wyświetlany (na przykład do przeglądarki internetowej lub niezależnego odtwarzacza filmów Flasha).
Dzięki temu rozwiązaniu możliwe jest wykonanie określonego kodu JavaScript w oparciu o zdarzenie wykryte we Flashu (na przykład kliknięcie przycisku, akcję onClipEvent lub akcję umieszczoną w ujęciu filmu). Chociaż może nie brzmi to zbyt ekscytująco, możesz skorzystać z akcji FSCommand do uruchomienia dowolnej operacji, którą język JavaScript jest w stanie wykonać, w tym na przykład uaktualnienia tekstowego formularza HTML, wyświetlenia bądź ukrycia elementów strony lub zmiany koloru tła dokumentu HTML. Większość interakcji między Flashem a JavaScript najlepiej działa w przeglądarkach obsługujących dynamiczną wersję HTML, czyli język DHTML - na przykład w przeglądarkach Netscape 4 i Internet Explorer 4 lub wyższych wersjach tych przeglądarek.

Komunikacja Flasha z JavaScriptem nie jest jednokierunkowa. Przy użyciu funkcji JavaScript możesz na przykład śledzić odtwarzanie filmu Flasha i sterować nim. Język JavaScript traktuje dokument HTML jako obiekt, a wszystkie jego elementy jako właściwości tego obiektu - film Flasha jest dla JavaScriptu tylko jednym z wielu różnych elementów zamieszczonych na stronie internetowej. Można więc stosować funkcje JavaScript i odsyłacze HTML do sterowania wyświetlaniem filmu.

Uwaga
Aby skrypt JavaScript mógł odbierać komunikaty wysyłane z filmu Flasha za pomocą akcji FSCommand, musimy upewnić się, że atrybut swLiveConnect w znaczniku EMBED posiada wartość true. Domyślnie większość szablonów HTML Flasha ustawia tę wartość na false.

Zmiana atrybutów HTML

Pokażemy teraz, jak przy użyciu akcji FSCommand można dynamicznie zmieniać atrybut BGCOLOR w znaczniku podczas wyświetlania filmu Flasha w oknie przeglądarki.

Dodawanie akcji FSCommand do filmu Flasha

Naszym celem w tej części rozdziału jest wstawienie akcji FSCommand do odpowiednich ujęć kluczowych w przykładowym pliku . Gdy player Flasha wyświetla klatki zawierające akcję FSCommand, do interpretera JavaScript wysyłane jest polecenie oraz ciąg znaków z odpowiadającym poleceniu argumentem. Skrypt JavaScript ma teraz za zadanie wywołać funkcję, która zmieni kolor tła zgodnie z wartością argumentu wysłanego akcją FSCommand.

Mówiąc prościej, dodamy akcję FSCommand do tych klatek, w których kolor tła ma zmienić się na biały, czerwony i z powrotem na biały. W czasie gdy w filmie Flasha następują takie zmiany kolorów, powinny one zajść także w dokumencie HTML.

Akcja FSCommand zmieniająca kolor tła (polecenie changeBgColor) na wartość #FFFFFF .Oto kolejne kroki, które należy wykonać.

1. W klatce 1 wstawiamy klatkę kluczową. Zaznaczamy tą klatkę i otwieramy panel Actions. Upewnij się, że panel wyświetlany jest w trybie Normal Mode. Dodaj akcję FSCommand z listy dostępnych akcji po lewej stronie okna (możesz to zrobić albo podwójnym kliknięciem nazwy akcji, albo wybierając tę nazwę i klikając ikonę + w lewym górnym rogu okna). W polu Command wpisz polecenie changeBgColor. W polu Arguments wpisz #FFFFFF. Polecenie changeBgColor jest mapowane na funkcję JavaScript o takiej samej nazwie, którą opiszemy nieco dalej w tym artykule. Argument #FFFFFF zostanie przekazany do tej funkcji i na jego podstawie kolor tła strony HTML zmieni się na biały.

2. W klatce 5 wstawiamy kolejną klatkę kluczową i akcję jak powyżej zmieniając tylko kolor na #FF0000

3. Podobnie postępujemy w klatce 10 - kolor zmieniamy na #FFFFFF

4. Po dodaniu wszystkich wymienionych wyżej akcji FSCommand ,zapisujemy film w pliku przykład.fla i otwieramy okno Publish Settings . W panelu HTML okna Publish Settings wybierz szablon Flash with FSCommand. Eksportujemy plik .SWF i związany z nim dokument HTML.

Następnym etapem naszej pracy będzie przeanalizowanie kodu wygenerowanego automatycznie przez szablon HTML.
Konieczne będzie wprowadzenie w nim pewnych modyfikacji, które sprawią, że akcje FSCommand zaczną współdziałać ze skryptem JavaScript zgodnie z naszymi oczekiwaniami.

Uruchamianie skryptu JavaScript w filmie Flasha

Chociaż szablon Flash with FSCommand utworzył większość kodu JavaScript za Ciebie, nie wykonał automatycznego mapowania poleceń i argumentów na odpowiednie funkcje JavaScript. Zmodyfikujemy kod JavaScript w taki sposób, że będzie działał w przeglądarce internetowej. Poniżej znajduje się listing kodu wygenerowanego przez Flasha 5 wraz ze wspomnianymi modyfikacjami(kolor czerwony)

1. <SCRIPT LANGUAGE=JavaScript>
2. <!--
3. var InternetExplorer = navigator.appName.indexOf("Microsoft") != -1;
4. var zmiennaFlash = "";
5. // Handle all the the FSCommand messages in a Flash movie
6. function przyklad_DoFSCommand(command, args) {
7. var przykladnObj = InternetExplorer? przyklad : document.przyklad;
8. zmiennaFlash = zmiennaFlash + args;
9. if(command=="changeBgColor"){
changeBgColor();
}
}
10. function changeBgColor(){
11. document.bgColor = zmiennaFlash;
12. zmiennaFlash = "";
}
13. // Hook for Internet Explorer
if (navigator.appName && navigator.appName.indexOf("Microsoft") != -1 && navigator.userAgent.indexOf("Windows") != -1 && navigator.userAgent.indexOf("Windows 3.1")== -1)
{
document.write('\<SCRIPT LANGUAGE=VBScript\> \n');
document.write('on error resume next \n');
document.write('Sub przyklad_FSCommand(ByVal command, ByVal args)\n');
document.write(' call przyklad_DoFSCommand(command, args)\n');
document.write('end sub\n');
document.write('\<\/SCRIPT\> \n');
}
//-->
14. </SCRIPT>




Poniżej objaśniamy, linia po linii, kod zawarty w skrypcie.

1. Ten znacznik HTML inicjalizuje skrypt napisany w języku JavaScript.

2. Ten ciąg znaków oznacza standardowo zapisany komentarz HTML. Wprowadzając go po znaczniku SCRIPT, sprawisz, że przeglądarki nieobsługujące JavaScript zignorują ten kod. Jeśli nie umieścisz tego ciągu, przeglądarki tekstowe, takie jak na przykład Lynx, wyświetlą kod JavaScript jako zwykły tekst.

3. Zmienna odpowiadająca wykryciu w systemie przeglądarki Internet Explorer - stąd jej nazwa.

4. Dodaliśmy tę linię kodu, aby zadeklarować zmienną o nazwie zmiennaFlash. Jej wartość jest obecnie pusta, co zostało określone parą cudzysłowów nieotaczających żadnego tekstu. Zmienna ta jest potrzebna, aby argumenty akcji FSCommand mogły zostać przekazane funkcjom JavaScript w przeglądarkach Netscape i Internet Explorer.

5. Komentarz, który informuje o tym, że następujący po nim kod JavaScript opracowano w celu pobrania poleceń z akcji FSCommand filmu Flasha.

6. Pierwsza funkcja skryptu - nawiązuje komunikację z filmem Flasha. W nazwie funkcji zawierana jest wartość atrybutu NAME w znaczniku EMBED (lub wartość atrybutu ID ze znacznika OBJECT), po której następuje znak podkreślenia i ciąg DoFSCommand(command, args) .
W naszym przypadku nazwa filmu (i wartość atrybutu NAME) to przyklad. Zwróćmy uwagę na to, że polecenia i argumenty zdefiniowane we Flashu są przekazywane do tej funkcji zgodnie z deklaracją (command,args), czyli najpierw polecenia, później argumenty.

7. Jest to przydatna, opcjonalna zmienna, którą tworzy szablon Flash with FSCommand. Co ciekawe, nie jest potrzebna, dopóki nie odwołujesz się do modeli dokumentów różniących się w przeglądarkach Internet Explorer i Netscape. Zamiast testować i jedną, i drugą przeglądarkę, możesz wstawić zmienną przykladObj w kodzie JavaScript. W tym przykładzie nie jest to jednak wymagane.

8. Kod definiujący wartość zmiennej zmiennaFlash, która została zadeklarowana w linii 4. Wartość ta odpowiada argumentom (args) określonym w akcji FSCommand. Ponieważ początkowo ciąg znaków zmiennaFlash był pusty (""), obecnie jest on identyczny jak argument akcji Flasha. W przypadku Internet Explorera kod ten nie jest niezbędny, jednak Netscape nie potrafi pobierać argumentów bezpośrednio z Flasha bez tej linii kodu.

9. Porównanie polecenia (command) z Flasha i ciągu znaków changeBgColor. Jeśli są one identyczne, JavaScript wykona kod zapisany po instrukcji warunkowej if.
Ponieważ we Flashu zdefiniowaliśmy tylko jedno polecenie, wystarczy, że wykonamy teraz mapowanie polecenia changeBgColor z Flasha na funkcję changeBgColor() JavaScriptu.

10. Definicja funkcji changeBgColor(). Pamiętamy, że linia 9. mapuje polecenie changeBgColor z akcji FSCommand Flasha na tę funkcję.

11. Linia przekazująca zmienną zmiennaFlash do właściwości document.bgColor, określającej kolor tła dokumentu HTML. Gdy akcja FSCommand z Flasha wyśle polecenie changeBgColor, wywołana zostanie funkcja JavaScript changeBgColor(), która przekaże wartość argumentu z akcji Flasha do właściwości document.bgColor.

12. W tej lini zmiennej zmiennaFlash przypisywany jest z powrotem pusty ciąg znaków, więc następne wywołanie akcji FSCommand nie użyje już argumentu z poprzedniego wywołania.

13. W tym fragmencie kodu wykrywamy obecność przeglądarki Internet Explorer dla Windows i mapujemy funkcje JavaScript w odpowiednim skrypcie VBScript (język ten używany jest wyłącznie w wersji Internet Explorera dla Windows).

14. Znacznik /SCRIPT kończący kod skryptu JavaScript.

UWAGA
Z pewnych powodów akcja FSCommand pomija atrybut NAME w znaczniku EMBED. Upewnij się, że wstawiłeś ten atrybut do znacznika. Wartość atrybutu powinna odpowiadać nazwie filmu .SWF, bez rozszerzenia .SWF. W przykładzie omawianym w tym podrozdziale wartością tego atrybutu będzie więc ciąg znaków "przyklad".

I to wszystko! Po ręcznym wstawieniu wymienionych linii JavaScript możesz załadować dokument HTML do przeglądarki Internet Explorer lub Netscape . Gdy player Flasha dojdzie do ujęć z akcjami FSCommand, tło HTML zmieni kolor razem z tłem filmu.

Podsumowanie

Sposób wyświetlania filmu Flasha w przeglądarce możesz modyfikować, określając atrybuty znaczników OBJECT i EMBED w dokumencie HTML. Skalowanie, zmiana rozmiarów, jakości wyświetlania, koloru tła to tylko niektóre z właściwości filmu, które mogą być zmieniane bez ingerowania w zawartość pliku .SWF.

Nawet mimo ustawienia rozmiarów filmu (WIDTH i HEIGHT) na 100%, w przeglądarce widoczna będzie niewielka szczelina oddzielająca film od krawędzi okna przeglądarki. Aby zminimalizować ten efekt, umieść film Flasha w pojedynczej ramce (frame) przy użyciu znacznika FRAMESET.
Obecność pluginu lub kontrolki ActiveX odtwarzających filmy Flasha można wykrywać na różne sposoby: używając osobno znaczników OBJECT i EMBED, korzystając z odpowiednich skryptów JavaScript i VBScript lub wstawiając plik swiffer wygenerowany we Flashu do dokumentu HTML, używając przy tym specjalnego znacznika META.

Filmy Flasha mogą wchodzić w interakcję z obiektami JavaScript i DHTML na stronie internetowej. Możliwe jest to jednak tylko dla wersji 3.0 lub nowszych przeglądarek Internet Explorer (pod Windows) i Netscape (pod Windows i na Macu).

Pliki .SWF Flasha mogą wysyłać polecenia do skryptów JavaScript za pomocą akcji FSCommand Flasha. Akcja ta przekazuje do przeglądarki zdefiniowane przez użytkownika polecenia i ich argumenty.
Chociaż szablon HTML Flash with FSCommand generuje skrypt JavaScript obsługujący akcję FSCommand, nie wykonuje on automatycznego mapowania akcji z Flasha na odpowiednie funkcje JavaScript. Zadanie to musisz wykonywać ręcznie.

Akcje FSCommand można wykorzystywać do modyfikowania atrybutów i styli w dokumencie HTML.

Specjalne metody JavaScript mogą być wykorzystywane w komunikacji pluginu Flasha z przeglądarką - na przykład możliwe jest wysłanie do filmu zapytania, jak duża jego część została już załadowana.

Artykuł napisany na podstawie informacji zawartych w książce "Flash 5 - Biblia".

Ocena 2.56/5 (51.23%) (513 głosów)

Komentarze:

  • ładowanie dynamiczne zdjęć z bazy do flash
    Dodał: kamil data: 2011-02-03
    Chętnie bym zobaczył jakiś torial do ładowania zdjęć dynamicznie wczytywanych przez JavaScript do obiektu flash.
  • No ładnie opisane :)
    Dodał: Gość data: 2011-05-26
    ale szkoda, że brak komunikacji w drugą stronę, czyli Java->Flash.


Dodaj komentarz:


Temat:
Twój nick:
Komentarz:
 

Prosimy o kulturę wypowiedzi. Komentarze zawierające niecenzuralne zwroty, bądź obrażające inne osoby będą usuwane. Kod HTML w wypowiedziach jest niedozwolony. Wydawca nie odpowiada za treść komentarzy.