r01_t.pdf

Rozdział 1

Dynamiczne dane dla Flasha

W niniejszym rozdziale omówimy następujące tematy:

• Wprowadzanie zewnętrznych danych do Flasha

• Wczytywanie zmiennych za pomocą ActionScript

• Sterowanie wprowadzaniem danych i uchwytów zdarzeń dla klipów filmowych

• Wysyłanie danych z Flasha

• Pierwszy rzut oka na powiązania Flasha z PHP – aplikacja rejestracyjna

Zanim przystąpimy do zgłębiania tajników PHP, jeden rozdział poświęcimy omówieniu możliwości, jakie tkwią

w filmach Flasha i umożliwiają interakcję z serwerem oraz pobieranie danych dynamicznych. Choć rozdział

niniejszy będzie się skupiał przede wszystkim na tematach związanych z Flashem, znajdziemy tu również

przykłady kodu PHP, zaś na końcu, interesujące ćwiczenie.

Aby móc dokładnie śledzić opisywane przykłady i kontrolować poprawność utworzonych plików, będziemy

musieli odwiedzić witrynę www.phpforflash.com (dotyczy to oryginalnego wydania książki – przyp. red.) i

pobrać stamtąd zestaw plików zawierających kody źródłowe.

Przed pobraniem plików konieczne będzie zarejestrowanie się, polegające na podaniu nazwiska oraz adresu

email. Cała procedura zajmuje jedynie dwie sekundy, zaś wpisane dane posłużą do utworzenia profilu

użytkownika na forum PHP for Flash. Jeśli spodoba się nam ten rodzaj funkcji PHP i będziemy chcieli

zastosować ją na własnej witrynie, pod koniec niniejszego rozdziału znajdziemy szczegółowy opis. Przekonamy

się wówczas, jak sprawnie PHP i Flash współpracują ze sobą oraz jak łatwe jest wykorzystanie mocy PHP we

własnych filmach Flasha, na witrynach i w aplikacjach.

Pod koniec rozdziału zejdziemy niżej, w głębiny zagadnienia, nie ma jednak powodu do obaw. Integrację Flasha

i PHP będziemy poznawać krok po kroku, omawiając poszczególne funkcje oraz wskazując rozdziały, w

których będziemy mogli poznać je dokładnie – dowiemy się także, czego możemy oczekiwać od PHP i czego

nauczyć nas może niniejsza książka.

Jeśli słowo „głębiny” wydaje się nam nieco zbyt mocne... no cóż, każdy wie, czym może skończyć się

nurkowanie na płyciźnie (bardzo łatwo uderzyć głową w dno!). Bez obaw, wkrótce wszystko stanie się jasne.

Jesteśmy użytkownikami Flasha (lub uczącymi się jego obsługi), a naszą uwagę przyciągnęło słowo

„dynamiczne”. Pomówmy więc o tym, jak zaaplikować zastrzyk energii naszym plikom FLA. Gdy się z tym

uporamy, będziemy mogli przejść dalej i zająć się tworzeniem prawdziwie dynamicznych aplikacji Flasha.

Wczytywanie danych zewnętrznych

Pierwszą umiejętnością, którą musimy posiąść, jest dynamiczne wczytywanie danych do filmów Flasha. Kiedy

opanujemy to zagadnienie, wszystko stanie się możliwe, a jedynym ograniczeniem rodzaju danych, które

będziemy mogli wprowadzać do Flasha, będzie nasza wyobraźnia – danymi tymi mogą być najświeższe

wiadomości, komentarze użytkowników, wypowiedzi na forum, dane osób odwiedzających, cokolwiek!

Główną metodą, którą będziemy posługiwać się do wprowadzania danych do filmów Flasha, jest polecenie

języka ActionScript, loadVariables() .

Rys. str. 15

NAPISY

Film Flasha

Wywołanie loadVariables()

Plik danych

Zwracane dane

Składnia polecenia wygląda następująco:

loadVariables( url , target [, variables ])

gdzie:

• url jest bezwzględnym lub względnym adresem URL, pod którym znajdują się zmienne, na przykład

www.phpforflash.com/variables.txt (lub jedynie variables.txt , jeśli plik znajduje się w tym samym

katalogu).

• target stanowi wskazanie poziomu lub klipu filmowego, do którego zmienne mają zostać

wprowadzone, na przykład _root.movieclip .

• variables (czasami zastępowane wyrażeniem method ) jest opcjonalnym argumentem,

określającym metodę przesyłania zmiennych; istnieją dwie metody: POST oraz GET, które omówimy

później.

Po wywołaniu polecenia loadVariables() , plik identyfikowany za pomocą argumentu url jest otwierany

przez moduł Flasha, a zmienne są wprowadzane do filmu. Aby operacja zakończyła się powodzeniem, zmienne

oraz ich wartości muszą być określone w otwieranym pliku, w następującym formacie:

&var1name=value&var2name=value&var3name=value...

Jeśli podzielimy powyższe wyrażenie, przekonamy się, że stanowi ono serię par nazw i wartości zmiennych:

Zmienna 1 Zmienna 2 Zmienna 3

&var1name=value &var2name=value &var3name=value

Zmienne związane z poszczególnymi parami nazw i wartości są definiowane na listwie czasowej, za pomocą

argumentu target . Zmienne te mogą być wykorzystane w filmie Flasha, podobnie jak wykorzystuje się

zmienne tworzone przy użyciu ActionScript.

Kilka takich definicji może posłużyć do sterowania przebiegiem filmu, w oparciu o wartości zmiennych, albo do

wyświetlania informacji w polu tekstowym.

Zanim przejdziemy dalej, utwórzmy krótki film demonstracyjny, który zilustruje nam działanie polecenia

loadVariables() , przy wykorzystaniu prostego pliku tekstowego.

Zrzuty ekranu z początku i końca filmu demonstrują cel, który zamierzamy osiągnąć:

Rys. str. 16

NAPISY

Przed

W ćwiczeniu tym chodzi o wczytanie tekstu z pliku i wprowadzenie go do filmu Flasha za pomocą polecenia

loadVariables() , a następnie wyświetlenie go w polu tekstowym.

Użycie polecenia loadVariables()

Po pierwsze, należy utworzyć film Flasha...

1. Utwórz nowy film Flasha, a następnie zapisz go pod nazwą lvtest.fla .

2. Utwórz strukturę warstw, jak na rysunku poniżej.

3. Warstwa Window BG (Tło okna) posłuży do stylizacji. Nie jest to element niezbędny, jeśli więc spieszy

Ci się, możesz ten etap pominąć. Jednakże, zawsze warto cieszyć się atrakcyjnym wyglądem swego

dzieła. Możesz tu wykorzystać opisane wskazówki lub utworzyć własny projekt stylizacyjny.

4. Na warstwie „Text” Textbox (Pole tekstowe) utwórz wieloliniowe, pole tekstowe dynamicznego, o

wymiarach zapewniających wyświetlenie całego wczytywanego tekstu. Zmiennej tej nadaj nazwę

Text . To, jaką treść umieścisz w polu, zależy od Ciebie. Może to być komunikat oznajmiający o

wczytywaniu danych.

5. Na warstwie Button (Przycisk) utwórz prosty przycisk i przypisz do niego następujący kod

ActionScript:

on (release) {

loadVariable(„lvtest.txt”, this);

}

W przykładzie tym nie ma konieczności stosowania opcjonalnych zmiennych, ponieważ „ lvtest . txt ”

stanowi odwołanie do pliku zawierającego zmienne, zaś argument this wskazuje na film bieżący, nakazując

Flashowi pobranie zmiennych i umieszczenie na bieżącej listwie czasowej.

W ten sposób powstał film Flasha, a zatem wszystko, co pozostało do zrobienia, to przygotowanie pliku

tekstowego zawierającego dane. W tym celu najlepiej będzie posłużyć się prostym edytorem

tekstowym, takim jak Notatnik lub SimpleText , niemniej jednak zastosować możesz każdy program

zdolny do wygenerowania prostego tekstu.

6. Jeśli wrócisz do punktu 4, znajdziesz tam nazwę zmiennej, której należy użyć, czyli Text . Dzięki

temu, przypisanie do owej zmiennej tekstu, który ma się pojawiać w polu tekstowym, jest bardzo

proste. Treść pliku tekstowego powinna mieć następującą formę:

7. Zapisz utworzony plik pod nazwą lvtest.txt , umieszczając go w tym samym katalogu, w którym

znajduje się plik filmu Flasha i to już jest koniec zadania. Wróć do edytora Flash, opublikuj film i

odtwórz go, czemu towarzyszyć będzie obawa i ciekawość... no cóż, być może efekt nie będzie zbyt

imponujący, ale weź pod uwagę, że to dopiero pierwszy krok w kierunku pełnego poznania zasad

tworzenia dynamicznych filmów Flasha. Nie miej sobie niczego za złe i nie przeceniaj wagi opisanego,

niewielkiego skryptu. Skoro już wiesz jak wprowadzać zmienne, w filmach Flasha możesz

wykorzystać dane dowolnego rodzaju.

Porady dotyczące polecenia loadVariables

Choć w powyższym przykładzie jedynie wprowadzaliśmy dane do Flasha, możliwe jest również wysyłanie

informacji z filmów do skryptów działających po stronie serwera. Sposób, w jaki owe informacje są

przetwarzane przez skrypt serwerowy zależy od języka, w jakim ów skrypt został napisany. I choć nieco później

będziemy omawiać to zagadnienie szczegółowo, warto abyśmy dowiedzieli się już teraz, że dla każdej zmiennej

ActionScript przekazywanej skryptowi PHP w ten sposób, automatycznie tworzona jest identyczna zmienna

PHP.

Inną istotną i wartą zauważenia rzeczą jest to, że dane wczytywane przy użyciu prostego polecenia

loadVariables , co widzieliśmy w poprzednim podrozdziale, są często zapisywane przez przeglądarkę, w jej

pamięci podręcznej cache . Oznacza to, że dopóki przeglądarka dysponuje poprawną kopią danych, nie zadaje

sobie trudu sprawdzania obecności nowej wersji.

Istnieje wiele metod, z których możemy skorzystać, by ominąć ten problem, ale najprostsza z nich polega na

wprowadzeniu elementu losowego do nazwy wczytywanego pliku, podczas jego wczytywania:

loadVariables(„lvtest.txt?” + int(Math.random * 100000), this);

Polecenie Math.random tworzy losową liczbę z przedziału od 0 do 1, po czym mnoży ją przez 100.000,

uzyskując tym sposobem liczbę z przedziału od 0 do 99.999. int natomiast daje nam pewność, że będzie to

liczba całkowita!

Zwróćmy jednak uwagę, że próba przetestowania omawianego filmu, przy użyciu polecenia Control/Test Movie

(Sterowanie/Testuj film) spowoduje pojawienie się komunikatu o błędzie. Jest to spowodowane tym, że żądanie

otwarcia pliku zostaje skierowane do systemu operacyjnego, a nie do przeglądarki. Ponieważ system operacyjny

nie rozpoznaje dodatkowych argumentów, dołączanych do nazwy pliku jako dane, stwierdza błąd, wyświetlając

komunikat typu...

Error opening URL file:///<PATH>lvtest.txt?13

…gdzie argument < PATH > (Ścieżka) określa katalog, w którym przechowywany jest plik filmu Flasha.

Ważnym jest także, aby zrozumieć, że wczytywanie danych po wywołaniu loadVariables może trwać

nieco czasu, zaś film nie przechodzi automatycznie w stan oczekiwania na wczytanie wszystkich danych, zanim

przejdzie do wykonywania dalszych czynności. W związku z tym, często zachodzi potrzeba zastosowania

metody wykrywającej moment wprowadzenia kompletu danych do filmu Flasha.

Istnieją dwie metody detekcji wczytania danych, których możemy użyć w naszych filmach Flasha, a którymi

zajmiemy się właśnie teraz.

Detektory zdarzeń klipów filmowych

Pierwsza metoda detekcji momentu zakończenia wprowadzania danych do filmu Flasha polega na

wykorzystaniu w tym celu nowego detektora onClipEvent . Został on wprowadzony w wersji 5 Flasha, a

można go dołączyć do każdego, pojedynczego klonu, w celu detekcji określonych zdarzeń.

Składnia onClipEvent jest prosta:

onClipEvent ( event ) {

statements

}

Widoczny tu argument event może być jednym z wielu różnych zdarzeń, które onClipEvent potrafi

wykrywać, a ich listę, wraz ze szczegółami inicjalizacji, znajdziemy w wykazie poniżej.

Zdarzenie

Inicjalizacja

load

W momencie pojawienia się klonu klipu filmowego na listwie czasowej.

enterFrame

Podczas odtwarzania kolejnych ujęć klipu. Akcje wykonywane są przed

uruchomieniem akcji przypisanych do ujęć.

unload

W pierwszym ujęciu następującym po usunięciu klonu klipu z listwy czasowej.

Akcje wykonywane są przed akcjami przypisanymi do tego ujęcia.

mouseDown

W chwili wciśnięcia lewego klawisza myszy.

mouseUp

W chwili zwolnienia lewego klawisza myszy.

mouseMove

Po każdym poruszeniu myszą.

keyDown

W momencie naciśnięcia klawisza.

keyUp

W chwili zwolnienia wciśniętego klawisza.

Data

W momencie odebrania danych, na skutek wywołania polecenia

loadVariables lub loadMovie . W przypadku polecenia loadVariables ,

zdarzenie to jest generowane tylko raz, po wczytaniu ostatniej zmiennej. Jeśli

użyjemy tego polecenia w połączeniu z loadMovie , wówczas zdarzenie będzie

generowane po wczytaniu każdej, kolejnej części filmu.

Opisywany detektor onClipEvent można przysposobić do wykrywania jednego z powyższych zdarzeń,

aczkolwiek każdemu klonowi klipu filmowego możemy przypisać tyle detektorów onClipEvent , ile uznamy

za stosowne. W chwili pojawienia się zdarzenia wskazanego przez argument event , wykonywane jest

wyrażenie ActionScript statements , wskazane w kodzie detektora.

Warto zwrócić uwagę, że wszystkie wyrażenia zdefiniowane w detektorze onClipEvent pozostają w relacji z

klonem klipu filmowego, do którego zostały przypisane. Oznacza to, że każda zmienna zdefiniowana jako

element detektora odwołuje się do zmiennych na listwie czasowej klonu, do którego została przypisana, zaś

wszystkie wywoływane funkcje działają w obrębie tej samej listwy czasowej. Na przykład, jeśli za pomocą

detektora zdarzenia wywołamy funkcję gotoAndPlay(1) , klip filmowy, do którego została ona przypisana,

wykona akcję gotoAndPlay , przechodząc do ujęcia 1. Oczywiście, jeśli zechcemy utworzyć w tej funkcji

odwołanie do innej listwy czasowej, musimy ją wskazać w wyrażeniu... _root.gotoAndPlay(1) oraz

_root.myVariable = 15 ...albo użyć bloku with .

Dla przykładu, detektor onClipEvent w formie zaprezentowanej poniżej powoduje inkrementację zmiennej

count , po każdym naciśnięciu klawisza:

onClipEvent (keyUp) {

count++;

}

Wszystkie z wymienionych wyżej zdarzeń są użyteczne i prawdopodobnie, prędzej czy później, zrobimy użytek

z każdego z nich, jednak szczególnie interesującym z naszego punktu widzenia jest zdarzenie data. Jak można

dowiedzieć się z tabeli, detektor onClipEvent , w którym zdefiniowane zostało zdarzenie data, uruchamiany

jest po załadowaniu ostatniej zmiennej, w wyniku wywołania loadVariables .

Aby zademonstrować użycie onClipEvent , zmodyfikujemy nasz film lvtest.fla , tworzać funkcję

inteligentnego wczytywania danych. Będzie ona powodowała wyświetlanie informacji loading... please wait

(Ładowanie... proszę czekać) podczas wczytywania danych, a po zakończeniu tego procesu, umożliwiała

przejście do ujęcia, w którym wprowadzone dane będą wyświetlane.

Zwróćmy uwagę, że jeżeli test wykonamy na komputerze lokalnym, czas wyświetlania ujęcia informacyjnego

będzie bardzo krótki, gdyż dane będą wczytywane bardzo szybko. Aby poradzić sobie z tym problemem,

prawdopodobnie konieczne będzie przeniesienie plików na serwer sieciowy i wykonanie testu z serwera. Jeśli

okaże się to niemożliwe, możemy zamienić tekst z poprzedniego ćwiczenia pełnym tekstem powieści „Wojna i

pokój” – to powinno wystarczyć.

Ładowanie... Proszę czekać

Metoda z użyciem onClipEvent

1. Pierwszym krokiem jest konwersja wszystkich elementów, jakie obecnie znajdują się w obrębie sceny

głównej, do postaci klipu filmowego, ponieważ onClipEvent można przypisywać jedynie do klipów

filmowych. Dokonaj tego, selekcjonując wszystkie obiekty widoczne na scenie, a następnie naciskając

klawisz F8 lub wybierając polecenie Convert to Symbol (Konwertuj w symbol) z menu Insert (Wstaw).

Na karcie Behavior (Zachowanie) wybierz opcję Movie Clip (Klip filmowy), po czym nadaj klipowi

odpowiednią nazwę.

2. Teraz musisz poddać edycji nowo powstały klip, dodając ujęcie Loading (Ładowanie), które będzie

wyświetlane w trakcie wczytywania danych. Zduplikuj strukturę warstw i ujęć z rysunku poniżej.

3. Przejdź do ujęcia kluczowego Loading i usuń przycisk oraz pole tekstowe, gdyż elementy te nie mają

być widoczne podczas oczekiwania na wczytanie danych. W ich miejsce wstaw odpowiedni napis,

informujący użytkownika o trwającej operacji pobierania danych (jego treść możesz zredagować

dowolnie).

4. W pierwszym ujęciu warstwy Actions należy umieścić akcję stop, zatrzymującą odtwarzanie klipu

filmowego na ujęciu Display , po wczytaniu filmu.

5. Po przejściu do ujęcia Display możesz poddać edycji również kod dla przycisku Load Data , który

uzupełniając wywołanie loadVariables , będzie wydawał klipowi filmowego polecenie goto czyli

przejścia do ujęcia Loading , a następnie wykonanie polecenia stop . Wprowadź kod pokazany poniżej:

on (release) {

loadVariables(„lvtest.txt”, this);

gotoAndStop(“Loading”);

}

Jedyne, co pozostało do zrobienia w tej chwili, to przypisanie detektora onClipEvent do klonu pliku

filmowego, znajdującego się na głównej listwie czasowej.

6. Wróć na główną listwę czasową i wyselekcjonuj klon klipu filmowego. Jeśli okno Actions nie jest

wyświetlone, wywołaj je, klikając prawym klawiszem myszy klip filmowy i wybierając polecenie

Actions . Na koniec, wprowadź poniższy kod i wykonaj test filmu ( Ctrl+Enter ).

Metoda z użyciem zapętlenia ujęcia

Jeśli nie zechcemy korzystać z detektora onClipEvent lub jego użycie wyda się nam niepraktyczne, wówczas

w trakcie oczekiwania na wczytanie danych możemy zastosować zapętlenie ujęcia. Zaimplementować je można

za pomocą prostych wyrażeń AtionScript, wstrzymujących odtwarzanie filmu do czasu osiągnięcia wskazanej

wartości przez określoną zmienną. Niektórym sposób ten może wydać się „staroświecki”, gdyż we Flashu 4 była

to jedyna metoda, odpowiednia do wykonania takiej akcji. Jednakże, ma ona jedną, istotną zaletę w stosunku do

opisanej wcześniej metody onClipEvent : mianowicie, można ją wykorzystać w przypadku wczytywania

danych do rdzenia _root filmu, a nie tylko do klipu filmowego.

Powyższy przykład możemy bardzo łatwo przystosować do metody zapętlenia ujęcia, zastępując nią detektor

onClipEvent .

7. W tym celu, zwyczajnie usuń kod onClipEvent z klipu filmowego (czyli anulując punkt 6) i poddaj

klip edycji, dopasowując go do diagramu widocznego poniżej:

Jak widać, polega to na zaprogramowaniu funkcji sprawdzającej czy zmienna Loaded ma wartość

true , a jeśli tak, przerywającej działanie pętli ujęcia i powodującej przejście do ujęcia Display .

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: