Flash i Java Script (cz. 2)

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

Artykuł opisuje inny przykład wykorzystania elementów Java Script we Flashu. Warto też zobaczyć pierwszą część tego artykułu.

Zaczynamy. Stwórz typowy film Flash-a i przy użyciu narzędzia 'Text' wpisz gdziekolwiek na scenie słowa 'Status Bar'. Przekształć je w przycisk wybierając i naciskając 'Convert to Symbol' z menu 'Insert'. Wpisz jakąś nazwę dla przycisku i zaznacz 'Button' w części okna opisanej jako 'Behavior'. Ja wybrałem 'statusBtn'.

Teraz kliknij dwa razy przycisk, aby go edytować. Na listwie czasu pojawią się definicje 4 klatek. Dodaj nową warstwę , narysuj na niej prostokąt tak, aby znajdował się pod tekstem 'Status Bar' i wróć do głownej listwy czasu. Prostokąt ten będzie spełniał rolę powierzchni przycisku. Zaznacz przycisk i z menu 'Window' wybierz 'Actions'. Powinno pojawić się okno edycji kodu Action script. Sprawdź jego ustawienia, ponieważ dla naszego przykładu najlepszym trybem pracy będzie 'Normal mode'. Z drzewa akcji po prawej stronie wybierz 'Actions' i następnie 'FSCommand'.

Tak powinien wyglądać kod, który stworzyłeś:


on (release) {
fscommand ();
}



Następnie zaznacz linijkę kodu z funkcją fscommand() i w dolnej części okna, tam gdzie jest pole tekstowe 'Command' wpisz 'my_status', a w polu 'Arguments' wstaw tekst, który chcesz wyświetlać na pasku statusu przeglądarki. Wybierz pierwszą linię skryptu akcji, tzn. 'on (release) {' i zmień rodzaj zdarzenia z 'Release' na 'Roll Over'. Kod, który stworzyłeś po najechaniu myszką na przycisk, wyświetli tekst na pasku statusu. Niestety po zabraniu kursora tekst nie zniknie. Zabrakło jeszcze jednej akcji:


on (rollOut) {
fscommand ("my_status", "");
}



Ten kawałek skryptu nie robi nic innego, jak czyszczenie paska statusu, gdy kursor jest poza obszarem przycisku. Twój cały kod powinien wyglądać następująco:

on (rollOver) {
fscommand ("my_status", "Tekst statusu przeglądarki wysłany z Flash-a!");
}
on (rollOut) {
fscommand ("my_status", "");
}


Jesteś już na dobrej drodze do wykonywania funkcji JavaScript z poziomu Flash-a.

Zapisz swój film pod dowolną nazwą i naciśnij 'Publish settings' z menu 'File'. Gdy pojawi się okno 'Publish Settings' sprawdź, czy w zakładce 'Format' zaznaczona jest publikacja jako 'HTML (.html)' i 'Flash (.swf)' (Te opcje muszą być wybrane). Otwórz teraz zakładkę 'HTML' z rozwijanej listy 'Template', zaznacz 'Flash with FSCommand' i naciśnij przycisk 'Publish', aby opublikować film jako stronę sieci web.

Zrób kopię pliku HTML. Gdy otworzysz ją w jakimś edytorze tekstowym, w górnej części kodu pokaże się skrypt języka JavaScript. Najbardziej interesującą nas częścią skryptu jest funkcja 'NazwaFilmu_DoFSCommand' gdzie 'NazwaFilmu' jest nazwą twojego pliku .swf. Pozostałej części strony nie musimy modyfikować, więc nie będę jej omawiał. Teraz przyjrzyj się funkcji 'NazwaFilmu_DoFSCommand'. Jest tam następujący fragment:


//
// Place your code here...
//



Jak się na pewno domyśliłeś jest to miejsce, które będziemy zmieniać. Usuń powyższy fragment z pliku i na jego miejsce wstaw:

if(command == "my_status") {
self.status=args;
}



To jest dobry moment, aby wytłumaczyć jak to wszystko działa. Funkcja FSCommand jest 'łącznikiem' pomiędzy filmem Flash-a a programem, który go odtwarza. W naszym przypadku tym programem jest przeglądarka internetowa. Przy pomocy FSCommand do funkcji 'NazwaFilmu_DoFSCommand' zostają przesłane dwa argumenty. Pierwszym z nich jest 'command', który zawiera wartość wpisaną przez Ciebie w polu 'Command' okna Action script-u, a drugim 'args' wraz z wartością z pola 'Arguments'. Co stanie się po wywołaniu 'NazwaFilmu_DoFSCommand' zależy już od samej zawartości funkcji. W naszym przypadku, sprawdzana jest zmienna 'command' i jeśli zawiera łańcuch znaków: 'my_status', pod zmienną 'status' JavaScript-u przypisywany tekst ze zmiennej 'args'. (Zmienna 'status' języka JavaScript przechowuje tekst, który ma się pojawić na pasku statusu. Przypisanie tej zmiennej jakiejś wartości automatycznie ją wyswietla.)

Na koniec zapisz tylko plik HTML, uruchom go w przeglądarce i sprawdź czy działa. Możesz przetestować stronę najeżdżając kursorem na tekst Flash-a i obserwując pasek statusu.

Jak pewnie zauważyłeś, integracja HTML, JavaScript i Action script-u Flash-a daje dużo nowych możliwości. Mam nadzieję, że informacje dostarczone w obydwu częściach mini kursu pozwolą Ci na jeszcze pełniejsze wykorzystanie możliwości jakie daje Flash.

Ocena 2.63/5 (52.66%) (436 głosów)

Komentarze:



    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.