Rozdział 24.
Wyprowadzanie i pobieranie danych we Flashu

W tym rozdziale:

• Dane w polach tekstowych

• Przetwarzanie danych we Flashu

• Tworzenie formularza

• Wczytywanie danych XML do filmu

Ogromną zaletą Flasha 5 jest możliwość przetwarzania danych w samym filmie. Możesz do niego wczytywać zewnętrzne dane tekstowe, co sprawia, że zawartość filmu oglądana w Internecie zawsze może być aktualna.

Używanie pól tekstowych do pobierania i wyświetlania danych

Zanim omówimy wysyłanie i pobieranie danych w filmie, musimy poznać podstawowe mechanizmy wejścia-wyjścia. Większość danych, o ile nie używasz szablonów programu Macromedia Generator, będzie typu tekstowego. Oznacza to, że pobierasz od użytkownika i wyświetlasz na obrazie różne teksty. Korzystając z wejściowego pola tekstowego, możesz pobierać informacje od użytkownika, natomiast dynamiczne pole tekstowe służy do wyprowadzania tekstów na ekran.

Wejściowe pola tekstowe (Input Text)

Wejściowe pola tekstowe tworzysz za pomocą narzędzia Text. Z rozwijanej listy z panelu Text Options musisz wówczas wybrać opcję Input Text. Jak zapewne pamiętasz z rozdziału 21., „Planowanie struktury kodu”, dla wejściowego pola tekstowego ustalana jest nazwa zmiennej i od tej chwili pole tekstowe jest ściśle z nią związane. Tekst wpisany w wejściowe pole tekstowe jest wartością tej zmiennej. Na przykład, jeśli utworzysz wejściowe pole tekstowe i przypiszesz mu zmienną o nazwie visitorInput, to wszystko, co zostanie wpisane w to pole w trakcie odtwarzania filmu, stanie się wartością zmiennej visitorInput. Utwórzmy proste wejściowe pole tekstowe, aby to przetestować.

1. Za pomocą narzędzia Text utwórz pole tekstowe na głównym obrazie filmu. Niech będzie dostatecznie długie, aby mogło pomieścić 20 znaków. Możesz sobie pomóc i wpisać coś w to pole, aby oszacować prawidłową długość. Skasuj jednak ten napis przed przejściem do następnego punktu.

2. Z rozwijanej listy panelu Text Options wybierz opcję Input Text. W pole Variable wpisz nazwę zmiennej visitorInput. Zaznacz opcję Border/Bg.

3. Zapisz film w pliku inputText.fla i przetestuj go (klawisze Ctrl+Enter lub Command+Enter). Teraz kliknij pole tekstowe i wpisz w nim swoje imię.

4. Z menu wybierz polecenie Debug/List Variables. W oknie powinieneś zobaczyć, że zmienna visitorInput ma taką wartość, jaką wpisałeś w 3. kroku. My wpisaliśmy w pole imię „Jan”. Z tego też powodu w oknie Output zobaczyliśmy:

Level #0:

Variable _level0.$version = "MAC 5,0,30,0"

Variable _level0.visitorInput = "Jan"

Uwaga! Polecenie List Variables zawsze pokazuje zmienną $version oraz jej wartość, która zależy od wersji odtwarzacza pokazującego film.

5. Jeśli zmienisz tekst znajdujący się w polu tekstowym, wartość zmiennej visitorInput zostanie automatycznie zaktualizowana. Musisz ponownie wybrać Debug/List Variable, aby zobaczyć nową wartość zmiennej.

Wejściowe pola tekstowe nie służą wyłącznie do pobierania danych od użytkownika. Mogą mieć także wartość początkową lub być modyfikowane przez skrypty. Teraz przetestujemy takie zastosowanie pola.

6. Jeśli nadal odtwarzasz film z 5. kroku, zamknij go i powróć do środowiska edycyjnego. Utwórz nową warstwę i nazwij ją actions. Kliknij dwukrotnie pierwsze ujęcie tej warstwy, aby otworzyć edytor skryptów. Wpisz w edytorze następującą linię:

visitorinput = "tutaj wpisz swoje imie";

7. Zapisz ponownie film i przetestuj go. Powinieneś w polu tekstowym zobaczyć napis „tutaj wpisz swoje imie”.

Jak mogłeś się przekonać, wejściowe pola tekstowe pobierają dane od użytkownika, podobnie jak formularze HTML. W dalszej części tego rozdziału użyjemy wejściowego pola tekstowego do utworzenia formularza, który może wysyłać i pobierać dane ze skryptu CGI (Common Gateway Interface).

Dynamiczne pola tekstowe (Dynamic Text)

Jeśli chcesz wyświetlać informacje tekstowe dla osób oglądających film, możesz tego dokonać na dwa sposoby: utworzyć statyczne pola tekstowe, których zawartość nie może być aktualizowana przez skrypty lub wykreować dynamiczne pola tekstowe, w których możesz wyświetlić informacje pochodzące z wewnętrznego lub zewnętrznego źródła.

Ostrzeżenie! Nie używaj dynamicznych ani wejściowych pól tekstowych, jeśli nie zamierzasz zmieniać znajdującego się w nich tekstu w czasie odtwarzania filmu. W takim wypadku wystarczą statyczne pola tekstowe.

Dynamiczne pola tekstowe także są ściśle związane ze zmiennymi, podobnie jak wejściowe pola tekstowe. Jedyna różnica między nimi polega na tym, że zawartość dynamicznych pól tekstowych nie może być edytowana przez użytkownika. Są więc używane tylko do wyświetlania informacji zmieniających się w czasie odtwarzania filmu. Za ich pomocą możesz wyświetlać artykuły, które zmieniają się każdego dnia (lub co godzinę), wyniki w czasie gry, aktualną datę i godzinę, itp.

Nowość! W dynamicznym oraz wejściowym polu tekstowym możesz używać znaczników HTML do formatowania tekstu. Ten temat omawiamy w rozdziale 25., „Formatowanie tekstu w polach tekstowych Flasha”.

W następnych krokach utworzymy dynamiczne pole tekstowe, którego zawartość będzie ustalana w skrypcie. Do dynamicznych pól możesz także wczytywać zewnętrzne zmienne; omawiamy to w następnej sekcji. Aby wstawić tekst do dynamicznego pola tekstowego, wykonaj poniższe czynności.

1. Utwórz za pomocą narzędzia Text pole tekstowe na głównej listwie czasowej. Niech pole będzie wystarczająco duże, aby pomieścić kilka linii tekstu.

2. W panelu Text Options z pierwszej rozwijanej listy wybierz opcję Dynamic Text, a z drugiej Multiline. W pola Variable wpisz textOutput. Zaznacz opcje Border/Bg oraz Word wrap.

3. Dodaj nową warstwę i nazwij ją actions. Kliknij dwukrotnie na pierwszym ujęciu tej warstwy i w edytorze skryptów wpisz następujący skrypt (pamiętaj, że znak ¬ oznacza kontynuację tej samej linii; nie umieszczaj go we wpisywanym kodzie):

textOutput = "WANTED: Flash Input & Output"+newline+¬

"A start-up Dot com company is looking for a qualified web ¬

technology that will present text input and output to web ¬

visitors in a more compelling animated and visually stunning ¬

environment than that possible with HTML. Please ¬

call:"+newline+newline+"1-800-555-CODE";

W tej linii określiliśmy zmienne tekstowe (w cudzysłowach), aby utworzyć rzeczywisty tekst, który pojawi się w dynamicznym polu tekstowym. Stała newline powoduje wstawienie znaku powrotu karetki (przejścia do następnej linii). Została ona umieszczona pomiędzy ciągami znaków.

4. Zapisz film w pliku dynamicText_internal.fla.

5. Przetestuj film (klawisze Ctrl+Enter lub Command+Enter). W dynamicznym polu tekstowym pojawił się tekst przypisany w skrypcie do zmiennej textOutput.

Możesz także wczytywać dane do wejściowych oraz dynamicznych pól tekstowych. Wczytywane dane mogą zostać pobrane z prostego pliku tekstowego (pliku .TXT) lub skryptu uruchomionego na serwerze.

Stany przetwarzania danych

Gdy modyfikujesz pola tekstowe za pomocą wewnętrznych zmiennych Flasha, dane dla pól są natychmiast dostępne. Chodzi o to, że po zadeklarowaniu zmiennej i jej wartości, wartość może być od razu przekazana do pola tekstowego. Gdy wczytujesz zewnętrzne dane do filmu, musisz utworzyć odpowiednie kroki lub „stany,” aby upewnić się, że danych tych będzie można użyć w filmie Flasha. Powiedzmy, że chcemy pobrać artykuł z serwera WWW, a tekst artykułu znajduje się w zmiennej o nazwie article_1. Nie możesz użyć ani przypisać wartości zmiennej article_1 do innych elementów filmu, dopóki artykuł nie zostanie w całości pobrany.

W jaki sposób sprawdzić, że dane są już dostępne? Każdy film, który wymienia dane z serwerem WWW powinien zawierać cztery osobne kroki nazywane stanami:

• stan wejściowy, w którym dane mają zostać pobrane od użytkownika lub filmu,

• stan wysyłania, w którym dane są wyprowadzane z filmu,

• stan oczekiwania, w którym trwa proces pobierania danych przez film,

• stan wyjściowy, w którym dane mogą już być używane przez pola tekstowe lub skrypty.

Stan wejściowy

Pierwszy krok przy wymianie danych polega na zbieraniu danych, które zostaną wyprowadzone. Może to być na przykład formularz wypełniany przez użytkownika, ale i zmienne środowiskowe, takie jak aktualna data lub wersja odtwarzacza filmów. Krok ten może być bardziej złożony i zawierać kilka formularzy lub obliczać wynik gry, który będzie wysłany do serwera.

Stan wysyłania

Kiedy dane zostały już ustalone, jesteś gotowy do ich wysłania do innego komputera, na przykład do skryptu uruchomionego na serwerze WWW. Do wysyłania danych możesz wykorzystać następujące akcje:

• getURL,

• loadVariables,

• loadMovie.

Jedna z tych akcji, getURL, pozwala tylko na wysyłanie danych — za jej pomocą nie możesz ich pobierać. Akcja getURL musi zawierać adres URL otwierany w aktualnym lub nowym oknie przeglądarki (lub ramce). W wielu przypadkach chcesz tylko wysłać dane i nie potrzebujesz niczego pobierać. Aby wysłać informacje, używając klienta pocztowego, możesz wykorzystać adresu mailto w akcji getURL przypisanej do klonu przycisku:

on(release) {

email = "[e-mail]";

temat = escape("Uwagi odwiedzajacego");

tresc = escape("Powiedz nam, czy podoba Ci się ta witryna.");

getURL("mailto:"+email+"?subject="+temat+"&body="+tresc);

}

W powyższym skrypcie zmienne email, temat oraz tresc wstawiane są do akcji getURL. Zauważ, że samodzielnie możesz określić temat oraz treść wysyłanego listu e-mail! Przy dodawaniu zmiennych do adresu URL powinieneś używać funkcji escape(), która konwertuje niedozwolone znaki, na przykład spacje i znaki ? na odpowiednie kody URL (na przykład spacja jest konwertowana na kod %20).

Stan oczekiwania

Jeśli wysyłasz dane, korzystając z akcji loadVariable lub loadMovie, musisz wiedzieć, kiedy pobierane dane dotarły. Najczęściej w takim przypadku korzysta się ze znacznika zamykającego — pary nazwa-wartość, której pobranie oznacza, że wszystkie dane zostały już przesłane. Zmienna textOutput z poprzedniej sekcji, umieszczona w pliku .TXT (jako tekst zakodowany w kodzie URL), będzie wyglądała następująco (przekonwertowane znaki zostały pogrubione, a znacznik podkreślony):

textOutput=WANTED%3A%20Flash%20Input%20%26%20Output%0D%0DA%20start%2Dup%20Dot%20com%20company%20is%20looking%20for%20a%20qualified%20web%20technology%20that%20will%20present%20text%20input%20and%20output%20to%20web%20visitors%20in%20a%20more%20compelling%20animated%20and%20visually%20stunning%20environment%20than%20that%20possible%20with%20HTML%2E%20Please%20call%3A%0D%0D1%2D800%2D555%2DCODE&success=1

Na samym końcu linii (definicji zmiennej) umieściliśmy znacznik zamykający success=1. Teraz możemy utworzyć pętlę z udziałem dwóch ujęć, która sprawdzi, czy zmienna będąca znacznikiem zamykającym została już wczytana. Po załadowaniu znacznika zamykającego film przejdzie do stanu wyjściowego.

Uwaga! Możesz używać metod GET i POST do wysyłania zmiennych do innego pliku .SWF.

Wszystkie stany oczekiwania powinny mieć określony horyzont czasu oczekiwania. Jeśli dane nie zostaną pobrane w określonym czasie, stwierdzimy, że serwer (lub skrypt) nie działa prawidłowo. Jeśli horyzont czasu zostanie przekroczony, przejdziemy do odpowiedniego stanu wyjściowego. Stan oczekiwania zdefiniujemy we flashowym formularzu w następnej sekcji.

Nowość! Teraz nie musisz już korzystać ze znaczników zamykających. Ich zadanie przejęło zdarzenie klipu filmowego data wykrywane przez detektor zdarzeń onClipEvent. Użycie tego zdarzenia zostanie przedstawione w sekcji „Tworzenie formularza.”

Stan wyjściowy

Ostatnim etapem jest zamiana aktualnie wyświetlanych danych na nowe wczytane informacje. Jednak, jak wspomniano przy poprzednim stanie, istnieją dwa stany wyjściowe: dla poprawnie przesłanych danych oraz po wystąpieniu błędu. Jeśli dane zostały bez problemów wczytane w stanie oczekiwania, Flash przejdzie do stanu wyjściowego dotyczącego prawidłowego przesłania. Jeśli z serwera nie zostały dostarczone żadne informacje, przejdziemy do stanu informującego o błędzie przy pobieraniu informacji.

Tworzenie formularza

W tej sekcji utworzymy we Flashu formularz, który wpisane informacje prześle do skryptu CGI, a ten wyśle wiadomość e-mail pod adres wskazany przez użytkownika. Ponieważ korzystamy z zewnętrznej wymiany informacji, utworzymy pięć stanów wymiany danych: wejściowy, wysyłania, oczekiwania, wyjściowy oraz błędu. Dowiesz się, jak przekazać serwerowi pary zmienna-wartość i jak za pomocą kilku zapętlonych ujęć sprawdzić, czy dane zostały odebrane przez skrypt CGI. Skorzystamy także z detektora onClipEvent(data), aby wykryć wczytanie zewnętrznych zmiennych.

Na CD-ROM-ie! Skrypt Perla (sendmail.cgi) oraz pozostałe pliki dla tego podrozdziału znajdziesz w katalogu ch24 na CD-ROM-ie. Na serwerze WWW musi być zainstalowany język skryptowy Perl w wersji 5, aby wykorzystać skrypt sendmail.cgi.

Flashowe formularze (podobnie jak formularze HTML) są tworzone z udziałem wejściowych pól tekstowych. Po wpisaniu informacji do pól tekstowych są one przechowywane w zmiennych. Następnie wartości tych zmiennych są przesyłane do serwera przy użyciu standardowej komunikacji GET lub POST. Zmienne dostępne na serwerze mogą być przetworzone przez skrypt CGI. Programy CGI są używane do wysyłania wiadomości e-mail, przetwarzania i przechowywania informacji w bazie danych lub innych zadań. Ten sam skrypt może później przekazać dane do Flasha, by zostały wyświetlone w filmie lub użyte do załadowania innego filmu.

W tym ćwiczeniu utworzymy formularz, przy użyciu którego użytkownicy będą mogli przesłać komentarze, uwagi, sugestie bądź informacje o znalezionych błędach. Po naciśnięciu przycisku Submit informacje zostaną wysłane pod wskazany w filmie adres e-mail.

1. Utwórz nowy film Flasha (klawisze Ctrl+N lub Command+N).

2. Zmień nazwę istniejącej warstwy na labels. Utwórz ujęcia kluczowe w klatkach numer 5, 15, 25 i 35. Oznacz dodane ujęcia etykietami input, wait, output oraz error. (Nie nadawaj etykiety pierwszemu ujęciu). Zaznacz ujęcie 45. i naciśnij klawisz F5, aby dodać kilka pustych ujęć na końcu warstwy.

3. Dodaj nową warstwę i nazwij ją actions. W 5. ujęciu tej warstwy wstaw ujęcie kluczowe (klawisz F6) i kliknij je dwukrotnie. W edytorze skryptów dodaj akcję stop(). W panelu Frame w polu testowym Label wpisz komentarz //stop.

4. Utwórz jeszcze jedną warstwę i nazwij ją text fields. Dodaj ujęcia kluczowe w klatkach numer 5, 15, 25 i 35.

5. W 5. ujęciu tej warstwy wstaw trzy wejściowe pola tekstowe. Ustaw jedno pole nad drugim i, idąc od góry, przypisz polom następujące zmienne (używając panelu Text Options): name, from oraz comments. Pola tekstowe name oraz from powinny mieścić się w jednej linii, natomiast pole comments musi mieć zaznaczone opcje Multiline oraz Word wrap, aby możliwe było wpisanie kilku linii tekstu. Dla wszystkich pól uaktywnij opcję Border/Bg, jeśli nie zamierzasz tworzyć żadnej dodatkowej grafiki oraz ustal ich szerokość tak, aby pomieścić około 45 znaków. Pole comments powinno dodatkowo umożliwiać wyświetlenie od pięciu do dziesięciu linii tekstu (rysunek 24.1).

Rysunek 24.1. Te pola tekstowe będą wypełniali odwiedzający, aby ocenić Twoją witrynę

6. Utwórz nową warstwę i nazwij ją static text. Wstaw ujęcia kluczowe w klatkach numer 5, 15, 25 i 35. W piątym ujęciu wstaw statyczne pola tekstowe, które będą wskazywały, czego dotyczą wejściowe pola tekstowe.

7. W 15. ujęciu warstwy static text (poniżej etykiety wait) wstaw statyczne pole tekstowe informujące o tym, że dane zostały wysłane i czekamy na odpowiedź serwera. My użyliśmy tekstu „Checking the server...” (Sprawdzanie serwera...).

8. W 25. ujęciu tej samej warstwy (poniżej etykiety output) wstaw statyczne pole tekstowe informujące, że dane zostały bez problemów wysłane. My w przykładzie użyliśmy tekstu „Thank you. Your feedback was received at:” (Dziękujemy. Twoją wiadomość otrzymaliśmy o:).

9. Możesz zauważyć, że w stanie wyjściowym dodaliśmy wyświetlanie godziny, o której serwer otrzymał dane (rysunek 24.2). Skrypt CGI zwraca godzinę oraz datę otrzymania danych do głównej listwy czasowej filmu. W 25. ujęciu warstwy text fields utwórz dynamiczne pole tekstowe o nazwie serverTime i umieść je poniżej napisu opracowanego w poprzednim kroku.

Rysunek 24.2. Pole serverTime wyświetla czas otrzymania danych przez serwer

10. W 35. ujęciu warstwy static text (poniżej etykiety error) wstaw statyczne pole tekstowe, które będzie informowało o niepowodzeniu przy wysyłaniu danych. My użyliśmy tekstu „Sorry, the server is down” (Przepraszamy. Serwer jest wyłączony).

11. Zapisz film w pliku sendReceive.fla.

Utworzyliśmy już grafikę dla wszystkich stanów. Jeśli chcesz, możesz dodać jakieś dodatkowe elementy graficzne do filmu. Teraz nadszedł czas na dodanie następujących instrukcji:

• akcji określającej adres e-mail administratora witryny (lub Twój adres e-mail),

• akcji wysyłającej dane z wejściowych pól tekstowych (oraz zmienne dotyczące adresu e-mail),

• akcji, która będzie czekała na potwierdzenie otrzymania danych od serwera.

Akcje te muszą się znaleźć w odpowiednich detektorach zdarzeń. Zaczniemy od zainicjalizowania zmiennej przechowującej adres e-mail, a później umieścimy klon przycisku w stanie wejściowym. W klonie umieścimy akcję loadVariables, aby wysłać dane z filmu do skryptu uruchamianego na serwerze. Następnie w stanie oczekiwania użyjemy warunku if...else do sprawdzania, czy serwer otrzymał dane.

12. Utwórz nową warstwę. Nazwij ją buttons. Wstaw ujęcia kluczowe w klatkach numer 5 i 15. W ujęciu 5. umieść prosty klon przycisku z biblioteki przycisków (Window/Common Libraries/Buttons) lub utwórz własny. My użyliśmy przycisku Pill z biblioteki. Klon przycisku zlokalizuj poniżej pól tekstowych. Umieść także na przycisku jakiś napis, na przykład „Submit” (Wyślij).

13. Zaznacz utworzony klon przycisku i otwórz edytor skryptów. Wpisz w nim następujące linie (pamiętaj, że znak ¬ oznacza kontynuację tej samej linii; nie umieszczaj tego znaku w rzeczywistym kodzie):

on (release){

mailto = "[e-mail]";

subject = "Formularz Flash 5. Biblia";

loadVariables("http://www.themakers.com/cgi-bin/books/¬

sendmail.cgi", _root, "POST");

sendTime = getTimer();

gotoAndPlay ("wait");

}

W tym skrypcie określamy adres odbiorcy (twój adres e-mail — zmienna mailto) oraz temat wiadomości (zmienna subject). Następnie akcja loadVariables wysyła zmienne mailto, name, email, comments oraz subject do skryptu sendmail.cgi znajdującego się na serwerze. _root oznacza, że wszystko, co było przesłane przez serwer do filmu zostanie umieszczone na głównej listwie czasowej. W zależności od tego, do jakich odbiorców jest skierowana witryna, możesz użyć metody GET dla akcji loadVariables, ponieważ Internet Explorer 4.5 (i wcześniejsze) dla MacOS nie obsługuje metody POST w modułach rozszerzających (plugin).

Po wywołaniu akcji loadVariables utworzona zostanie zmienna sendTime, w której znajdzie się czas wykonywania akcji loadVariables. Funkcja getTimer() jest wewnętrzną funkcją Flasha zwracająca aktualny czas odtwarzania filmu (w milisekundach). Jeśli użytkownik przed naciśnięciem przycisku przez dwie minuty wypełniał formularz, funkcja getTimer() zwróci wartość wynoszącą około 120 000 (milisekund). Na końcu akcja gotoAndPlay powoduje przejście wskaźnika czasu do ujęcia opatrzonego etykietą wait.

14. W 16. klatce warstwy actions wstaw puste ujęcie kluczowe. W panelu Frame oznacz to ujęcie etykietą (komentarzem) //loop. Umieścimy w nim skrypt, który będzie sprawdzał, czy nadeszła wiadomość z serwera. Otwórz edytor skryptów i wpisz następujące linie:

if (success == "1") {

gotoAndStop ("output");

} else {

if( getTimer() > sendTime+25000 ) {

gotoAndStop ("error");

} else {

gotoAndPlay ("wait");

}

}

Najpierw sprawdzamy, czy zmienna success została przesłana do filmu (przez skrypt CGI). Jeśli zmienna istnieje i jest równa wartości tekstowej „1” (patrz poniższa uwaga), wtedy główna listwa czasowa przejdzie do ujęcia oznaczonego etykieta output. Jeśli zmienna jeszcze nie dotarła, sprawdzany będzie drugi warunek if...else. Jeśli aktualny czas trwania filmu jest dłuższy o 25 sekund od wartości zmiennej sendTime, wskaźnik czasu przejdzie do ujęcia opatrzonego etykietą error. W przeciwnym wypadku nadal pozostanie w tej samej części głównej listwy czasowej.

Uwaga! Wszystkie zmienne otrzymywane z zewnętrznych źródeł za pomocą akcji loadVariable są typu string (tekst). Dlatego też wokół „1” musimy użyć cudzysłowów. Więcej informacji na temat typów danych znajdziesz w rozdziale 22., „Funkcje i tablice”.

15. Na końcu dodaj ujęcie kluczowe w 25. klatce warstwy actions. Przy zaznaczonym ujęciu otwórz edytor skryptów i dodaj następującą akcję:

serverTime = timeDate;

Przekazuje ona wartość zmiennej zwróconej przez serwer (timeDate) do zmiennej serverTime. Spowoduje to aktualizację dynamicznego pola tekstowego w tym stanie.

16. Ponownie zapisz i przetestuj film (klawisze Ctrl+Enter lub Command+Enter). Wpisz teraz coś w pola tekstowe i naciśnij przycisk Submit. Jeśli skrypt będzie dostępny (i jesteś aktualnie połączony z Internetem), powinieneś zobaczyć stan wyjściowy oraz czas otrzymania danych przez serwer.

Nowość! Flash 5 obsługuje akcje loadVariables dotyczące zewnętrznych źródeł także w środowisku testowym!

Możesz zmodyfikować ten film według własnych potrzeb. Skrypt CGI obsługuje zarówno metodę GET, jak i POST. Pamiętaj, że przy każdej zewnętrznej wymianie danych powinieneś używać stanów: wejściowego, oczekiwania, wyjściowego oraz błędu. Nawet jeśli ładujesz zmienne z niewielkiego pliku .TXT, powinieneś sprawdzać ukończenie pobierania danych za pomocą znacznika zamykającego.

Na CD-ROM-ie! Skryptu sendmail.cgi dostępnego na witrynie www.theMakers.com używaj tylko podczas testowania. Nie próbuj go używać w większych często odwiedzanych witrynach. Ten sam skrypt znajdziesz na CD-ROM-ie w katalogu ch24.

Szare tło!

Korzystanie z detektora onClipEvent(data) przy pobieraniu danych z serwera

Do wykrywania pobrania wszystkich danych możesz także używać detektora zdarzeń onclipEvent. Aby omówiony w poprzedniej sekcji przykład korzystał z detektora zdarzeń, zmodyfikuj go w następujący sposób.

1. Dodaj nową warstwę o nazwie data.

2. Utwórz nowy symbol (klawisze Ctrl+F8 lub Command+F8). Nazwij go dataDetect i pozostaw domyślną opcję Movie Clip. Po kliknięciu przycisku OK Flash automatycznie przejdzie do trybu edycji symbolu. Wróć na główną listwę czasową.

3. Przeciągnij klon utworzonego symbolu z biblioteki na warstwę data. Za pomocą panelu Instance nadaj klonowi nazwę data.

4. Przy zaznaczonym klonie otwórz edytor skryptów i wpisz poniższy skrypt:

onclipEvent(data){

_root.gotoAndStop("output");

}

Gdy program załaduje ostatnią zmienną przesyłaną ze skryptu CGI, wykona akcje zawarte w nawiasach klamrowych detektora zdarzeń onclipEvent(data).

5. Musimy teraz odrobinę zmodyfikować skrypt stanu wejściowego. Zaznacz klon przycisku, otwórz edytor skryptów i zmień kod skryptu na następujący (pamiętaj, że znak ¬ oznacza kontynuację tej samej linii; nie umieszczaj tego znaku w rzeczywistym kodzie):

on (release){

mailto = "[e-mail]";

subject = "Formularz Flash 5. Biblia";

loadVariables("http://www.themakers.com/cgi-bin/books/¬

sendmail.cgi", _root.data, "POST");

sendTime = getTimer();

gotoAndPlay ("wait");

}

Teraz zmienne wczytujemy do klonu klipu filmowego (_root.data), a nie do głównej listwy czasowej (_root). Klon data został utworzony w krokach od 2. do 4.

6. Musimy także zmodyfikować skrypt znajdujący się w ujęciu o etykiecie //loop. Zaznacz to ujęcie, otwórz edytor skryptów i zmień skrypt na następujący:

if( getTimer() > sendTime+25000 ) {

gotoAndStop ("error");

} else {

gotoAndPlay ("wait");

}

Pominęliśmy pierwszy warunek if...else, ponieważ sprawdzanie załadowania zostało przeniesione do klonu data. Musimy więc tylko sprawdzać, ile czasu upłynęło od wywołania akcji loadVariable.

7. Ostatnia poprawka dotyczy 25. ujęcia warstwy actions. Musimy zmodyfikować ścieżkę daty oraz godziny zwracanej przez serwer:

serverTime = _root.data.timeData;

Po zapisaniu filmu (pod nową nazwą pliku), przetestuj go. Gdy naciśniesz przycisk Submit, dane zostaną wysłane do skryptu sendmail.cgi. Flash kieruje dane nadchodzące ze skryptu do klonu data, a detektor zdarzenia onclipEvent(data) jest wykonywany po zakończeniu pobierania danych.

Pamiętaj, że ten sposób działa tylko w odtwarzaczu filmów Flasha 5. Aby zachować kompatybilność z poprzednią wersją odtwarzacza (4), używaj wcześniejszego sposobu.

Koniec szarego tła!

Używanie danych XML w filmie Flasha

Filmy mogą pobierać i wysyłać dane XML. Jest to duża zaleta, ponieważ język XML szybko staje się standardem, w dziedzinie struktury danych wykorzystywanych w sprzedaży elektronicznej oraz portalach internetowych; ułatwia też sterowanie formatowaniem HTML (zestawy styli) w przeglądarkach internetowych. Możesz w prosty sposób organizować dane, korzystając z formatowania XML i używać danych XML w polach tekstowych oraz kodzie ActionScript.

Uwaga! Dokładne omówienie języka XML wykracza poza ramy tej książki. Przedstawimy tylko podstawową strukturę danych oraz wykorzystanie języka XML w filmach. Jeśli szukasz dodatkowych informacji o języku XML, przeczytaj książkę XML. Księga eksperta autorstwa Elliotte'a Rusty Harolda, wydaną przez Wydawnictwo Helion.

Podstawy XML

XML to akronim od eXtensible Markup Language. W języku tym możesz tworzyć własne znaczniki i atrybuty. Chociaż obowiązuje w nim kilka dodatkowych zasad, to składnia jest bardzo podobna do języka HTML:

<otwierająca nazwa znacznika>Informacja</zamykająca nazwa znacznika>

Gdy korzystasz z języka XML we Flashu, dokument XML musi zawierać jeden znacznik, w którym są zagnieżdżone pozostałe znaczniki. Każdy zestaw znaczników (otwierającego i zamykającego) nazywany jest węzłem. W poniższym przykładzie znacznik <section> jest głównym znacznikiem, a znaczniki <article> są jego węzłami:

<section>

<article>Pierwszy węzeł article</article>

<article>Drugi węzeł article</article>

</section>

Możesz tworzyć tyle potomnych węzłów, ile potrzebujesz. W powyższym przykładzie znacznik <section> dwa potomne węzły — jest to pierwsza i druga para znaczników <article></article>. W poniższym przykładzie pierwszy węzeł <article> zawiera dwa potomne węzły:

<section>

<article>

<title>WANTED: New Computer</title>

<description>Insert description here</description>

</article>

<article>Drugi węzeł article</article>

</section>

<title> jest pierwszym potomnym węzłem pierwszego węzła <article>. Wartość <title> również jest traktowana jako potomek węzła <title>. W powyższym przykładzie „WANTED: New Computer” jest potomkiem węzła <title>.

Ostrzeżenie! Odtwarzacz filmów Flasha 5 nie ignoruje „białych” odstępów w dokumentach XML. Z tego powodu nie powinieneś formatować dokumentów XML za pomocą znaków tabulacji oraz przejść do następnych linii pomiędzy znacznikami.

Wczytywanie dokumentów XML do filmu

Gdy utworzyłeś już dokument XML, możesz użyć jego drzewa (struktury) w filmie Flasha. Po wczytaniu dokumentu XML do filmu, struktura węzłów jest zachowywana w odtwarzaczu filmów.

Obiekt typu XML

Zanim wczytasz dokument XML do filmu, musisz utworzyć obiekt, który będzie przechowywał dane tego dokumentu. Aby to zrobić, użyj konstruktora obiektu XML:

myXML = new XML();

Podobnie jak w przypadku innych obiektów, możesz tworzyć tyle klonów obiektu typu XML, ile będziesz potrzebował. Możesz także używać tego obiektu do przechowywania struktur XML utworzonych we Flashu i wysyłania ich do serwera w celu dalszej obróbki.

Metoda load() obiektu typu XML

Po utworzeniu klonu, na przykład myXML, możesz używać metod obiektu typu XML. Metoda load pozwala określić zewnętrzne źródło (adres URL lub nazwę pliku), które zawiera dane XML. Jeśli utworzyłeś wcześniej dokument XML o nazwie articles.xml i znajduje się on w tym samym katalogu co plik .SWF, do wczytania dokumentu możesz użyć następującego kodu:

myXML = new XML("articles.xml");

lub

myXML = new XML();

myXML.load("articles.xml");

Metoda onLoad() obiektu typu XML

Po wczytaniu dokumentu do filmu możesz zlecić wykonanie funkcji (lub akcji), używając metody onLoad obiektu typu XML. Metoda onLoad pozwala określić funkcję, która zostanie wykonana po zakończeniu wczytywania dokumentu. Funkcja nie jest wykonywana przy wstępnym przetwarzaniu skryptu, lecz dopiero po wczytaniu dokumentu. W poniższym przykładzie funkcja loadArticles jest wykonywana po pobraniu dokumentu XML o nazwie articles.xml:

myXML = new XML();

myXML.load("articles.xml");

myXML.onLoad = loadArticles;

function loadArticles(success){

if(success){

//wykonywanie metod obiektu typu XML na danych XML

} else {

// informacja, że dokument XML nie został wczytany

}

}

W tym przykładzie funkcja loadArticle posiada jeden argument, success. Metoda onLoad zwraca wartość logiczną true lub false. Z tego też powodu nasza funkcja otrzyma tę wartość. Jeśli ładowanie dokumentu articles.xml powiodło się, metoda onLoad zostanie wykonana i zwróci wartość true. Zostanie ona przekazana do funkcji loadArticle i użyta w warunku if. Jeśli success będzie równe true, wtedy akcje zagnieżdżone w warunku if zostaną wykonane. W przeciwnym wypadku zostanie wykonana akcja else.

Na CD-ROM-ie! Parę przykładów wczytywania dokumentów XML znajdziesz na CD-ROM-ie w katalogu ch24. Dzięki nim dowiesz się, jak manipulować węzłami za pomocą tablic. Możesz też przejrzeć rozdział 22., aby dokładniej poznać obiekt typu Array używany w tym przykładzie.

Szare tło!

Ćwiczenie eksperta
Wprowadzenie do języka XML we Flashu
Autor: Christian Honselaar

Pliki źródłowe do tego ćwiczenia oraz inne materiały znajdziesz na CD-ROM-ie w katalogu ch24\christian_honselaar.

Język XML coraz częściej jest używany w aplikacjach klient-serwer oraz do tworzenia oprogramowania — i są ku temu powody. Zdolność do wczytywania i wysyłania we Flashu dowolnego dokumentu XML pozwala na elastyczną wymianę danych pomiędzy aplikacjami. Rozszerzając te metody, film Flasha może być używany jako szablon korzystający z danych XML, dlatego przy prostszych zadaniach aplikacja Generator nie będzie w zasadzie potrzebna.

Dodanie obsługi XML we Flashu 5 może się okazać jedną z najważniejszych nowości w tej wersji, ponieważ było to niejako brakującym ogniwem pomiędzy Flashem i resztą Internetu. Jeśli nie znasz języka XML, witryna www.xml.com będzie dobrym miejscem do rozpoczęcia nauki.

Nawet jeśli jest to Twój pierwszy kontakt z językiem XML, nie martw się. W tym ćwiczeniu pokażę możliwości tego języka na przykładzie prostej aplikacji. Dowiesz się, jak używać filmu Flasha jako szablonu dla tomiku wierszy, który korzysta z danych zawartych w pliku XML.

Uruchom Flasha 5 i użyj narzędzia Text do utworzenia dwóch pól tekstowych, w których znajdzie się tytuł wiersza oraz jego treść. Zaznacz pierwsze pole tekstowe i otwórz panel Text Options (Window/Panel/Text Options). Z rozwijanej listy wybierz opcję Dynamic Text. Następnie w pole Variable wpisz nazwę zmiennej titletext. Podobnie postąp z drugim polem tekstowym, ale teraz w pole Variable wpisz nazwę zmiennej poemtext. Dla drugiego pola tekstowego z drugiej rozwijanej listy wybierz opcję Multiline i zaznacz opcję Word wrap.

Uwaga autora. Więcej informacji na temat pracy z tekstem i polami tekstowymi znajdziesz w rozdziałach 7., „Tekst” i 25., „Formatowanie tekstu w polach tekstowych Flasha”.

Aby wszystko było w miarę proste, dodamy jeden przycisk, który będzie powodował wyświetlenie następnego wiersza. W tym przykładzie użyłem przycisku Oval-Play znajdującego się w bibliotece przycisków wywoływanej poleceniem Window/Common Libraries/Buttons. Dodaj nową warstwę do głównej listwy czasowej. Nazwij ją Button. Umieść na niej klon przycisku w miejscu, które Ci odpowiada. Kliknij teraz prawym klawiszem myszy (Ctrl+kliknięcie na komputerze Macintosh) klon przycisku i z rozwijanego menu wybierz polecenie Actions. W edytorze skryptów wpisz następujący kod:

on (release){

displayNextPoem();

}

Teraz, aby rozwiać Twoje wyobrażenia o egzotycznych metodach użycia języka XML, dodamy klip filmowy, który spowoduje przejście do następnego wiersza i będzie sterowany przez XML! Utwórz nową warstwę i nadaj jej nazwę Movie Clip. Przenieś tę warstwę na sam dół stosu, aby klip filmowy był odtwarzany poniżej tekstu.

Teraz utwórz pusty klip filmowy, wybierając z menu Insert polecenie New Symbol/Movie Clip. W oknie właściwości symbolu (Symbol Properties) nadaj klipowi odpowiednią nazwę; ja użyłem nazwy Background Placeholder. Pozostaw aktywną opcję Movie Clip i kliknij przycisk OK. Znajdziesz się w trybie edycji symbolu. Nie chcemy tutaj nic robić, więc wyjdź z niego, używając polecenia Edit/Edit Movie.

Przeciągnij klon utworzonego przed chwilą symbolu do lewego górnego narożnika obrazu. Użyj panelu Instance (Window/Panels/Instance) do nadania klonowi nazwy placeholder.

Wspaniale! Interfejs już ukończyliśmy. Musimy się teraz przyjrzeć dokumentowi XML, który przechowuje wiersze. (Jak już wcześniej wspomniano, możesz go znaleźć na CD-ROM-ie w katalogu ch24\christian_honselaar). Możesz go edytować, posługując się prostym edytorem tekstów, na przykład Notatnikiem (w systemie Windows) lub innym edytorem potrafiącym zapisywać pliki w formacie .TXT. Możesz także zdecydować się na utworzenie całkiem nowego dokumentu XML. Ale najpierw wyjaśnię podstawy struktury dokumentu XML. Oto dokument XML („białe” odstępy pomiędzy znacznikami pomijamy, ponieważ Flash interpretuje je w nietypowy sposób):

<poems>

<poem title="Kahlil Gibran" clip="poemclip2.swf">

Work is love made visible.

And if you cannot work with love but only with distaste, it is better that you should leave your work and sit at the gate of the temple and take alms of those who work with joy.

</poem>

<poem title="unix haiku" clip="poemclip1.swf">

wind catches lily

scatt'ring petals to the wind

segmentation fault

</poem>

</poems>

Nawet jeśli nigdy nie używałeś języka XML, terminy „znacznik” oraz „atrybut” powinny być Ci znane z języka HTML, gdzie ich działanie jest podobne. Głównymi znacznikami są znaczniki <poems></poems>. Każdy dokument XML powinien zawierać jedną parę znaczników, w których zostały zagnieżdżone pozostałe znaczniki. Znaczników <poem></poem> możesz mieć tyle, ile zechcesz. Znaczniki <poem> są węzłami głównego znacznika.

Uwaga autora. Więcej informacji na temat struktury znaczników XML znajdziesz przed tym ćwiczeniem.

Znaczniki <poem> posiadają dwa atrybuty:

1. title="Kahlil Gibran" oznaczający, że pierwszy wiersz nosi tytuł „Kahlil Gibran”.

2. clip="poemclip2.swf" oznacza, że ten wiersz powinien być wyświetlany wraz z klipem poemclip2.swf — klip ten pojawi się w utworzonym wcześniej pustym klipie filmowym.

Zauważ, że właściwy wiersz znajduje się pomiędzy znacznikami <poem> i </poem>.

Oto jak każemy Flashowi wczytać tytuł, treść wiersza oraz klip filmowy dla każdego znacznika <poem>: powróć do filmu, dodaj nową warstwę na szczycie stosu, nazwij ją actions i kliknij dwukrotnie jej pierwsze ujęcie, aby wyświetlić edytor skryptów. Wpisz w nim następujący skrypt:

poems = new XML();

poems.onload = poemsLoaded;

poems.load("poems.xml");

function poemsLoaded () {

currentPoem = poems.firstChild.firstChild;

}

function displayNextPoem () {

titletext = currentPoem.attributes.title;

loadMovie (currentPoem.attributes.clip, placeholder);

poemtext = currentPoem.firstChild.toString();

currentPoem = currentPoem.nextSibling;

}

Pierwsze trzy linie powodują utworzenie obiektu, wczytanie dokumentu XML i sprawdzenie jego poprawności. Przypisują go także do obiektu poems.

Następne dwie linie definiują funkcję poemsLoaded. Po wywołaniu funkcja inicjalizuje zmienną currentPoem, która jest wskaźnikiem do aktualnie wyświetlanej części dokumentu XML.

Później zdefiniowana jest jeszcze jedna funkcja, displayNextPoem, która wydobywa tytuł, wiersz oraz nazwę klipu z dokumentu XML i ustala zmienne dotyczące wyświetlania danych, a następnie ustawia wskaźnik na następny wiersz.

Flash interpretuje dokumenty XML, stosując obiektowy model dokumentu. Oznacza to, że dokument XML jest widziany jako obiekt, a każdy znacznik jako podobiekt (potomek), który może zawierać dalsze podobiekty. Atrybuty widziane są jako właściwości obiektu-znacznika.

Aby wyświetlić wszystkie wiersze, tworzymy zmienną currentPoem. Na początku wskazuje na pierwszego potomka (pierwszy wiersz) pierwszego potomka (węzeł z wierszami) dokumentu. Zachodzi więc proste dziedziczenie. Metody toString() oraz nextSibling dotyczą odpowiednio tekstu znajdującego się między znacznikami i następnego obiektu z określonego węzła. Skrypt nie jest długi, ale zawiera wiele treści. Jeśli go nie rozumiesz (szczególnie końca), przeczytaj rozdziały dotyczące programowania zorientowanego obiektowo i ponownie przyjrzyj się skryptowi i dokumentowi XML.

Uwagi końcowe

Aby ukończyć to ćwiczenie, musisz mieć dostęp do plików .SWF, do których odwołuje się dokument XML. Muszą się one znaleźć w tym samym katalogu co pliki .FLA i .XML. Możesz utworzyć własne pliki, ale pamiętaj, by zachować nazwy podane w pliku .XML. Do testów możesz użyć plików .SWF z tego ćwiczenia, znajdujących się na CD-ROM-ie.

Przypis do szarego tła!

Christian Honselaar mieszka w Goninghen w Holandii i twierdzi, że „lubi niebezpieczeństwo”. Uwielbia czytać powieści S-F i wędrować po górach w Azji. Zapewne z tego powodu z ostatniego roku szkoły średniej najbardziej pamięta film „Park Jurajski”. Chris poznał Flasha, jak twierdzi, „gdy eksperymentowałem z nakładaniem cyfrowych filmów. Próbowałem tego we Flashu i QuickTime i zaraz znalazłem parę błędów. Program pokochałem od pierwszego wejrzenia. Chociaż nie skończyłem narzekać na firmę Macromedia, związałem się z Flashem”. W dzień uczy na uniwersytecie programowania i tworzenia aplikacji multimedialnych w C++ oraz dla platform internetowych. W nocy zaś pracuje nad ulubionym projektem: htmlwell.com, firmą, która tworzy oprogramowanie oraz witryny internetowe. Jego prace możesz znaleźć na witrynach www.htmlwell.com oraz www.liemo.nl.

Koniec szarego tła!

Aplikacja Flash Exchange

Parę miesięcy po ukazaniu się Flasha 5, Macromedia wydała aplikację Flash Exchange. Podobnie jak Dreamweaver Exchange, pozwala ona na pobieranie z Internetu obiektów oraz bibliotek (skryptów, obiektów typu Smart Clip, elementów interfejsu, itp.), które mogą być używane w środowisku edycyjnym Flasha 5.

Aby użyć programu Flash Exchange, musisz odwiedzić witrynę www.macromedia.com/exchange i posiadać identyfikator oraz hasło użytkownika produktów firmy Macromedia. Kliknij przycisk Membership na stronie Exchange, aby za darmo uzyskać członkostwo. Po uzyskaniu członkostwa powróć na stronę Exchange i przejdź do części Flash Exchange. Stamtąd będziesz mógł pobrać (i później zainstalować) aplikację Extension Manager (zajmuje około 2 MB).

Uwaga! Aplikacja Extension Manager współpracuje z wszystkimi produktami firmy Macromedia korzystającymi z Exchange, włączając w to programy Dreamweaver oraz Flash.

Po zainstalowaniu tej aplikacji możesz pobierać dodatki do Flasha, korzystając z programu Flash Exchange. Aby wykonać następne ćwiczenie autorstwa Branden'a Hall'a, będziesz musiał pobrać i zainstalować dodatek WDDX Serializer/Deserializer. Aby go pobrać, musisz wykonac poniższe czynności.

1. Na stronie Flash Exchange wybrać z menu Find more extensions polecenie App Servers.

2. Na nowej stronie kliknij łącze WDDX Serializer/Deserializer.

3. Na stronie Extension Detail Page kliknij odpowiednią ikonę (PC lub MAC, w zależności od używanego systemu) po prawej stronie ekranu. Zapamiętaj, gdzie na dysku zostanie umieszczony pobrany plik.

4. Po ukończeniu pobierania pliku (rozszerzenie .MXP) uruchom Flasha 5. Wybierz polecenie Help/Manage Exchange Items. Spowoduje to uruchomienie aplikacji Exchange Manager.

5. W programie tym wybierz polecenie File/Install Extension (Ctrl+O lub Command+O). Przejdź do katalogu, w którym znajduje się pobrane rozszerzenie .MXP. Zaznacz plik i kliknij przycisk Otwórz lub OK. Pojawi się okno z informacją prawną dotyczącą użytkowania programu. Kliknij przycisk Accept, a rozszerzenie zainstaluje się w katalogu Libraries.

6. Większość rozszerzeń Exchange znajduje się w bibliotece rozszerzeń dostępnej w menu Window/Common Libraries. Jednak dla rozszerzenia WDDX Serializer/Deserializer tworzony jest plik .AS (plik tekstowy ze skryptami ActionScript) definiujący funkcje oraz metody tego rozszerzenia; jest on kopiowany do nowego katalogu ActionScript tworzonego wewnątrz katalogu Flasha 5.

W następnym ćwiczeniu Branden Hall omówi rozszerzenie WDDX Serializer/Deserializer.

Początek szarego tła!

Ćwiczenie eksperta
WDDX i Flash
Autor: Branden J. Hall

To ćwiczenie opisuje rozszerzenie WDDX Serializer/Deserializer dla obiektów typu XML w filmach Flasha 5. Jeśli jeszcze nie zainstalowałeś programu Extension Manager oraz rozszerzenia, przeczytaj poprzednią sekcję, aby dowiedzieć się więcej o programie Flash Exchange.

WDDX jest skrótem od Web Distributed Data eXchange (wymiana danych przez Internet). Firma Allaire Corporation utworzyła tę odmianę języka XML w 1998, aby opisać różne typy struktur danych. Poza samą specyfikacją WDDX firma ta opracowała zestaw narzędzi umożliwiających współpracę WDDX z językiem programowania dla serwerów , Cold Fusion, również opracowanym przez tę firmę. Wśród tych narzędzi znajduje się funkcja, która konwertuje strukturę danych z Cold Fusion do pakietu WDDX; proces ten nazywany jest serializacją. Istnieje także funkcja działająca w drugą stronę, czyli konwertująca pakiet WDDX na strukturę danych języka Cold Fusion; proces ten zwany jest deserializacją. Narzędzia te same w sobie nie są zbytnio użyteczne. Jednak firma Allaire utworzyła podobny zestaw narzędzi dla języka JavaScript. W ten sposób twórcy oprogramowania mogą przesyłać całe struktury danych pomiędzy serwerem i klientem, korzystając jedynie z języka XML.

Od tej pory także parę innych języków programowania obsługuje WDDX, między innymi Java, PHP i Perl. Razem z Dave'em Gallerizzo, wiceprezesem firmy Fig Leaf Software, utworzyłem narzędzie WDDX Serializer/Deserializer dla Flasha 5. Teraz, zamiast wysyłać proste pary nazwa-wartość pomiędzy Flashem i skryptami serwerowymi, możesz przesyłać całe struktury danych. Poza standardowymi typami danych, takimi jak tekst i liczby, możesz używać tablic, struktur, daty i godziny oraz rekordów.

Serializator-deserializator jest samowystarczalny, a jego użycie w filmach wyjątkowo proste. Wszystkie narzędzia znajdują się w jednym pliku, wddx.as. Plik ten musisz dołączyć do filmu bądź to poleceniem importu w edytorze skryptów, bądź też akcją include (#include "wddx.as").

Uwaga autora. Jeśli chcesz używać akcji include, jak pokazano to powyżej, musisz skopiować plik wddx.as do katalogu z filmem (plik ten jest instalowany w katalogu ActionScript wewnątrz katalogu aplikacji Flash 5). Jeśli chcesz zaimportować plik, kliknij strzałkę w prawym górnym narożniku edytora skryptów i wybierz polecenie Import From File (klawisze Ctrl+I lub Command+I, gdy aktywne jest okno edytora skryptów).

Weźmy prostą tablicę, zserializujmy ją i wyślijmy wyniki tej operacji. Skrypt jest następujący:

// Dołączanie klasy WDDX

#include "wddx.as"

// Tworzenie klonu klasy WDDX

myWDDX = new WDDX();

// Tworzenie obiektu XML przechowującego zserializowane dane

myXML = new XML();

// Tworzenie tablicy

studenci = new Array();

studenci[] = "Ryszard";

studenci[] = "Maria";

studenci[] = "Jan";

studenci[] = "Zuzanna";

// Serializowanie tablicy i wyświetlanie wyniku

myXML = myWDDX.serialize(studenci);

trace(myXML.ToString());

Po uruchomieniu skryptu w oknie Output pojawi się treść dokumentu XML:

<wddxPacket version="1.0">

<header />

<data>

<array length="4">

<string>Ryszard</string>

<string>Maria</string>

<string>Jan</string>

<string>Zuzanna</string>

</array>

</data>

</wddxPacket>

Teraz tablica została tak przekształcona, że można ją przesłać do każdego programu „rozumiejącego” WDDX, a program ten dostosuje tablicę do własnego formatu danych. Nie musimy się już martwić o pary nazwa-wartość, gdzie zmienne były numerowane (na przykład to1, to2, to3, itd.), ponieważ wszystko załatwi za nas WDDX.

Powiedzmy, że mamy pakiet WDDX i chcemy go zamienić na rzeczywistą strukturę danych. Poniższy skrypt zamienia pewne dane przechowywane w XML i zwraca tablicę. Później sprawdzamy wartość jednego z elementów tablicy:

// Zdeserializuj XML i zamień go na tablicę o nazwie bar

bar = myWDDX.deserialize(myXML);

// Sprawdzamy wartość trzeciego elementu tablicy

trace(bar[2]);

Prawie zawsze obiekt tworzony przy deserializacji pakietu WDDX jest jednym z podstawowych obiektów Flasha 5: tablicą, tekstem, strukturą, liczbą lub czymś innym. Jednak typ rekordowy obsługiwany przez WDDX nie ma swojego odpowiednika we Flashu 5. Rekordy używane są do przechowywania zapytań do baz danych i są bardzo ważne, jeżeli chcesz wymieniać dane z programem serwerowym korzystającym z bazy danych. Dlatego też w pliku wddx.as znalazła się definicja jeszcze jednej klasy, WDDXrecordset. Pozwala ona na manipulowanie wierszami, kolumnami oraz polami rekordu za pomocą zestawu metod. Klasa WDDXrecordset oraz wszystkie jej metody opisane są w pliku wddx.as.

Przypis do szarego tła!

Branden Hall dorastał w Hyattsville w Maryland. Aktualnie jest członkiem ActionScript Flasheratti oraz starszym projektantem-instruktorem do spraw interaktywności w Fig Leaf Software w Waszyngtonie. Branden twierdzi, że Chrissy Rey, wspólnik i przyjaciel, pokazał mu Flasha. Poza stroną figleaf.com wspomina, że pracował także nad stroną randinteractive.com. Gdy kończył szkołę średnią, pamięta, że słuchał piosenki „Before these Crowded Streets” śpiewanej przez zespół Dave'a Matchewsa. Teraz Branden najbardziej uwielbia „leniuchować w łóżku ze [swoją] narzeczoną.”

Koniec szarego tła!

Jeśli dobrze programujesz w innych obiektowych językach programowania, może Cię zainteresować użycie obiektu typu XMLSocket Flasha 5 wraz z innymi technologiami serwerowymi. Następne ćwiczenie eksperta autorstwa Shane'a Elliott'a pokaże, jak używać serwera Java do komunikacji z filmem Flasha.

Szare tło!

Ćwiczenie eksperta
Używanie obiektów XMLSocket w filmach Flasha
Autor: Shane Elliot

W tym ćwiczeniu dowiesz się, jak używać obiektów XMLSocket w filmach Flasha. Wszystkie związane z tym ćwiczeniem pliki znajdziesz na CD-ROM-ie w katalogu ch24\shane_elliott. Ten przykład korzysta z serwera Javy, więc wymaga zestawu Java SDK, aby można było wszystko wypróbować.

Nową i długo oczekiwaną funkcją Flasha 5 jest możliwość otworzenia połączenia z bazą danych lub serwerem i utrzymywania komunikacji pomiędzy filmem Flasha i serwerem. Wcześniej, jeśli chcieliśmy wysyłać i pobierać dane pomiędzy serwerem i filmem Flasha, musieliśmy użyć akcji loadVariables do połączenia się z programem uruchomionym na serwerze, na przykład skryptem Perl, JavaServlet lub innym. We wcześniejszym systemie przesyłania informacji używane były pary nazwa-wartość, co umożliwiało dynamiczną aktualizację danych. Wysyłanie mogło być uruchamiane przez użytkownika lub jedno ze zdarzeń systemowych (na przykład licznik czasu lub wykonanie określonych zadań). Za pomocą obiektów typu XMLSocket możemy nie tylko otworzyć bezpośredni kanał przepływu danych pomiędzy filmem i serwerem, ale także możemy otrzymywać te dane w formacie XML. Taką strukturę informacji łatwiej przetworzyć i uporządkować. Obiekt XMLSocket nie wymusza jednak stosowania języka XML przy wysyłaniu i pobieraniu danych. Chociaż obiekt i metody XMLSocket przystosowane są do obsługi elementów XML, masz możliwość wysyłania informacji jako tekst, dzięki czemu połączenia z bazą danych są znacznie elastyczniejsze.

Możesz teraz zapytać: „Kiedy mam używać obiektów XMLSocket, a co najważniejsze, jak go używać?” Chociaż we Flashu 5 nadal możesz korzystać z akcji loadVariables, musisz użyć zapytania, dzięki któremu film będzie mógł otrzymać dane od serwera. Gdy korzystasz z obiektu XMLSocket, połączenie jest stale aktywne. Możesz polecić Flashowi, aby wykonywał określone akcje, gdy wykryte zostanie przesyłanie danych. Jest to bardzo przydatne przy tworzeniu aplikacji wymagających minimalnych opóźnień, na przykład pokojów pogawędek, gdzie chcesz, aby komunikaty były wysyłane natychmiast, lub przy logowaniu, które za chwilę omówię. Użytkownik nie musi już wypełniać standardowego formularza i korzystać ze skryptu CGI, gdy chce zalogować się na witrynę lub skorzystać z innych zasobów internetowych. Dużo lepsze wrażenie wywrzesz, umożliwiając logowanie bezpośrednio w filmie Flasha.

Zanim zaczniemy, musisz umieścić na obrazie kilka elementów graficznych. Utworzyłem prostą stronę do logowania; skupiłem się tylko na jej funkcjonalności — estetyka będzie wskazana, gdy zaczniesz używać tego przykładu w komercyjnych produktach. Musisz utworzyć dwa wejściowe pola tekstowe: jedno dla nazwy użytkownika, a drugie dla hasła. Korzystając z pola Variable panelu Text Options, nazwij pola tekstowe odpowiednio userid oraz password. Ponadto opisz te pola za pomocą statycznego tekstu, aby użytkownik wiedział, czego dotyczą. Będziesz jeszcze potrzebował dynamicznego pola tekstowego o nazwie fromServer do wyświetlania odpowiedzi serwera. W tym przypadku także dodaj opis pola. Oprócz pól tekstowych umieść na obrazie przycisk logowania. Ja użyłem jednego z biblioteki przycisków (Window/Common Libraries/Buttons), ale Ty możesz utworzyć własny, jeśli chcesz. Wszystkie elementy możesz umieścić na jednej bądź na kilku warstwach. Po utworzeniu elementów graficznych, opracuj nową warstwę dla skryptu. Ja nadałem jej nazwę action script.

W tym momencie na głównej listwie czasowej powinno znajdować się tylko jedno ujęcie. Teraz zaznacz pierwsze ujęcie warstwy przeznaczonej na skrypty i otwórz edytor skryptów (polecenie Window/Actions). W ujęciu tym zdefiniujemy połączenie i podamy, jak Flash ma obsługiwać dotyczące go zdarzenia.

Skrypt jest następujący:

function myOnConnect(success) {

if (success)

fromServer += newline+"Connected...";

else

fromServer += newline+"Unable to Connect...";

}

function myOnXML(doc) {

trace("Jestem tutaj");

e = doc.firstChild;

if(e!=null && e.nodeName == "MESSAGE") {

fromServer += newline + e.attributes.response;

// Kod powodujący przejście do zastrzeżonego obszaru

}

else {

fromServer += newline + e.attributes.response;

// Kod powodujący przejście do ekranu kończącego logowanie...

}

}

myXML = new XML();

loginTag = myXML.createElement("login");

loginSocket = new XMLSocket();

loginSocket.onConnect = myOnConnect;

loginSocket.onXML = myOnXML;

loginSocket.connect("localhost",8080);

Przyjrzymy się teraz, co robi każda z linii. Na razie pominiemy definicje funkcji i przejdziemy do następujących linii:

myXML = new XML();

loginTag = myXML.createElement("login");

Pierwsza linia powoduje utworzenie obiektu XML na głównej listwie czasowej. Informacje dotyczące logowania (username i password) będziemy wysyłać do serwera Javy w formacie XML. Druga linia tworzy nowy element XML o nazwie login, który w formacie XML będzie wyglądał następująco:

<login />

Teraz musimy utworzyć połączenie komunikacyjne z serwerem. Czyni to poniższa linia:

loginSocket = new XMLSocket();

Gdy tworzysz nowy obiekt typu XMLSocket, konstruktor nie przyjmuje żadnych argumentów. Nie są one w tym miejscu potrzebne. Nie określamy żadnych parametrów, zanim w rzeczywistości nie połączymy się z serwerem. W tym momencie mamy już utworzony obiekt typu XMLSocket i możemy przejść do następnego kroku. Musimy zdefiniować kilka funkcji zwrotnych, które są częścią języka ActionScript.

Obiekty typu XMLSocket posiadają trzy metody wykrywające zdarzenia. Filmy wywołują te metody w określonym wewnętrznie czasie lub po zajściu określonego zdarzenia niezależnie od tego, czy je zdefiniowałeś, czy nie, jednak Ty nie jesteś powiadamiany o wystąpieniu zdarzenia. Jeśli nie zdefiniujesz, jakie akcje mają być wykonywane po wystąpieniu zdarzenia, metody te nie wpłyną na działanie filmu Flasha. Jednak cały czas są dostępne, więc możesz je definiować (nawet kilkukrotnie za pomocą zastępowania). Oto omawiane metody.

Metoda	Opis
onConnect(success)	Wykonywana, gdy inicjalizowane jest połączenie przy użyciu dzięki metody XMLSocket.connect niezależnie od tego, czy się powiedzie, czy nie (zmienna success zwracająca true lub false pozwala stwierdzić, czy nastąpiło połączenie).
onXML(object)	Wywoływana, gdy obiekt typu XML zawierający dokument XML dotrze poprzez połączenie XMLSocket do filmu. object jest klonem obiektu typu XML zawierającego dokument otrzymany z serwera.
onClose()	Wykonywana, gdy aktywne połączenie jest zamykane przez serwer.

Uwaga autora. Podobnie jak używamy detektora zdarzeń on(release) w klonach przycisków, inne obiekty także posiadają predefiniowane detektory oraz zdarzenia. W przypadku obiektów i metod dotyczących danych zdarzenia te zachodzą wtedy, gdy dane są wysyłane lub pobierane przez film Flasha.

W tym przykładzie używamy tylko dwóch metod: onConnect oraz onXML. Chociaż Flash wie, kiedy należy wywołać metody, na początku nie są z nimi związane żadne operacje. Z tego też powodu musimy je zdefiniować, by metoda wykonywała wymagane przez nas operacje:

loginSocket.onConnect = myOnConnect;

loginSocket.onXML = myOnXML;

Powyższe linie przypisują zdefiniowane wcześniej funkcje metodom wykrywającym zdarzenia. Funkcje myOnConnect oraz myOnXML opisują, co ma robić film, gdy nastąpi (lub się nie powiedzie) połączenie (onConnect) oraz jakie operacje należy przeprowadzić, gdy dane zostaną przysłane z serwera za pomocą tego połączenia (onXML).

Teraz powróćmy do definicji funkcji, których jeszcze nie omówiliśmy. W pierwszym ujęciu głównej listwy czasowej zdefiniowaliśmy funkcję myOnConnect, aby wykonać odpowiednie akcje w zależności od tego, czy połączenie doszło do skutku, czy też nie. Flash przekazuje funkcji argument success, który jest wartością logiczną (true lub false), w zależności od stanu nawiązania połączenia. Następnie pojawia się warunek if...else, który obsługuje każdą z możliwości. Funkcja wysyła komunikat użytkownikowi, ustalając wartości zmiennej fromServer (zmienna ta jest powiązana z utworzonym wcześniej dynamicznym polem tekstowym); dzięki tej informacji użytkownik zna stan połączenia. Możesz dodać więcej akcji do tej funkcji, w zależności od tego, jakie zadania ma realizować Twój film.

Funkcja myOnXML jest bardziej skomplikowana. Oczekuje ona danych od serwera w formacie XML i po ich otrzymaniu (przesłaniu do filmu poprzez aktywne łącze) umieszcza je w dokumencie lub innym argumencie, którego użyjesz. Ja użyłem nazwy dokumentu doc. Jakąkolwiek nazwę wybierzesz, musisz wiedzieć, że zostanie ona użyta do przechowywania dokumentu XML otrzymanego z serwera. Z tego też powodu musi być traktowana jako jedno ze źródeł informacji dla funkcji. Otrzymane dane możesz skonwertować do obiektu typu String lub odczytywać w taki sposób, jak ja to zrobiłem w funkcji myOnXML. Po przypisaniu do zmiennej e wartości doc.firstChild mam dostęp do elementów i nazw tego węzła, zgodnie z zasadami stosowania obiektu typu XML, które poznałeś we wcześniejszej części tego rozdziału.

Na tym etapie ważna jest znajomość struktury danych przesyłanych przez serwer. Jeśli samemu nie tworzysz programu serwerowego, musisz dowiedzieć się wszystkiego o wysyłanych danych od programisty tworzącego skrypty serwera.

Skąd wiem, że mam szukać węzła o nazwie MESSAGE (za pomocą metody nodeName)? Stąd, że sam napisałem w języku Java aplikację serwerową, która współpracuje z filmem. Zawarłem także warunek if, dzięki czemu wykonywane akcje zależą od odpowiedzi serwera. Możesz w tym miejscu dodać także inne akcje.

Przyjrzyjmy się teraz ostatniej linii skryptu, która (jak dotąd) jest najważniejsza, ponieważ to ona realizuje połączenie filmu z serwerem.

loginSocket.connect("localhost",8080);

Do uzyskania połączenia użyłem metody connect(nazwa komputera, port). Jak możesz zauważyć, posiada ona dwa argumenty. Pierwszy z nich może być następującej postaci:

• pełna nazwa komputera (DNS), na przykład http://www.flash5bible.com,

• adres IP, na przykład 205.94.288.213,

• nazwa komputera w lokalnej sieci (LAN), na przykład Zeus lub Atlas,

• null, co powoduje połączenie z serwerem, na którym znajduje się odtwarzany film.

Jako nazwy komputera użyłem wartości localhost, ponieważ (podobnie jak null) odnosi się ona do komputera, na którym uruchamiam film, i gdzie działa uruchomiony serwer Javy. Jakąkolwiek z tych nazw wybierzesz, pamiętaj, że musi ona wskazywać serwer, z którym będziesz nawiązywał połączenie.

Następnym argumentem jest port, który dotyczy numeru portu TCP używanego do nawiązania połączenia. Ze względów bezpieczeństwa numer ten nie może być liczbą poniżej 1024. Wybrałem port numer 8080, ponieważ wiem, że mój komputer nie używa tego portu do żadnych ważnych celów. Oto parę przykładów najczęściej używanych portów TCP:

• FTP = 21,

• HTTP = 80,

• Telnet = 23,

• POP3 = 110.

Jakikolwiek numer wybierzesz, pamiętaj, by upewnić się, że żadna inna aplikacja na Twoim komputerze nie korzysta z tego portu. Ostatnia linia skryptu automatycznie łączy film Flasha z moim serwerem przy rozpoczęciu odtwarzania. Teraz, kiedy utworzyliśmy grafikę filmu, a skrypt powoduje nawiązanie połączenia i reaguje na zdarzenia z nim związane, musimy dodać skrypt do przycisku, aby użytkownik mógł się zalogować. Skrypt ten wygląda następująco:

on (release, keyPress "<Enter>") {

loginTag.attributes.username = userid;

loginTag.attributes.password = password;

myXML.appendChild(loginTag);

loginSocket.send(myXML);

}

W powyższym skrypcie sprawdzamy, czy użytkownik kliknął przycisk lub nacisnął klawisz Enter na klawiaturze. Po wykryciu tego zdarzenia dane username oraz password przesyłane są do serwera w celu weryfikacji. Przyjrzyjmy się teraz dokładniej akcjom zagnieżdżonym w detektorze zdarzeń myszy on.

Pamiętasz element loginTag (typu XML) utworzony wcześniej? Teraz dodajemy do węzła dwa atrybuty, które odpowiadają zmiennym userid oraz password, czyli danym wpisanym przez użytkownika w wejściowych polach tekstowych. Następnie element loginTag dołączany jest do obiektu myXML jako potomek. Na końcu cały obiekt typu XML przesyłany jest do serwera za pomocą obiektu typu XMLSocket o nazwie loginSocket.

Gdy używamy metody send, nie musimy podawać obiektu typu XML jako argumentu. W tym przykładzie tak robimy (jest to obiekt myXML), ale możesz w tym miejscu użyć wartości tekstowej. Jeśli serwer został odpowiednio zaprogramowany, możesz używać dowolnego typu danych lub struktury. Jeśli oczekuje on danych w formacie XML, a ty poślesz tekst "cześć", wtedy nie zareaguje na Twoje polecenie. Jednak niezależnie od tego, co dokładnie przesyłasz, metoda send konwertuje wszystko do ciągu znaków i dopiero wtedy go wysyła. Powiedzmy, że odwiedzający, jako nazwę użytkownika wpisał shane, a jako hasło flash i spowodował przesłanie danych do serwera. Mój serwer otrzyma od filmu następujący ciąg znaków:

<login password="flash" username="shane" />

Mogę przetworzyć ciąg znaków i porównać otrzymane wartości w programie na serwerze, ale w tym momencie, gdy informacja opuściła już film Flasha, nie mam wpływu na to, co się z nią stanie, aż do otrzymania odpowiedzi od serwera. Gdy serwer odeśle odpowiedź, przechwyci ją funkcja myOnXML, która przekaże użytkownikowi, czy logowanie się powiodło, czy też nie.

Ukończony przykład możesz znaleźć na CD-ROM-ie w katalogu ch24\shane_elliot w pliku XMLsignIn.fla. Aby przetestować logowanie, musisz uruchomić program w języku Java o nazwie flashlogin.jar, a następnie uruchomić utworzony film. Utwórz plik data.txt, który będzie zawierał pary nazwa-wartość (dla zmiennej username i password) stanowiące prawidłowe dane dla logowania. Dla obydwu parametrów logowania musisz użyć następującej składni:

nazwaZmiennej=wartość;

gdzie nazwaZmiennej to username lub password, a wartość to odpowiednio nazwa użytkownika lub hasło.

Uwagi dla zaawansowanych

Gdy Flash używa metody send, na końcu przesyłanego ciągu znaków umieszcza znacznik końca łańcucha: u\0000. Przy wysyłaniu danych z powrotem do Flasha musisz użyć tego samego znacznika (znaku), aby funkcja onXML() wykryła koniec przesyłania danych. Jeśli go nie dodasz, napotkasz na pewne problemy!

Przypis do szarego tła!

Shane Elliot był starszym dyrektorem technicznym działu kreatywności w Rampt.com. Utworzył tam architekturę ActionScript, na której są oparte późniejsze wersje interfejsu wyszukiwarki Rampt. Projektował także we Flashu i HTML elementy witryn bebellis.com, apcadillac.com oraz timberfish.com. Aktualnie zajmuje się tworzeniem zintegrowanych rozwiązań XML, Flash oraz Java, pracując w Los Angeles. Najbardziej lubi pisać scenariusze i powieści. Shane chce pracować jako aktor, lubi też malować, programować oraz podróżować. Zaznaczmy też, że Shane jest jednym z redaktorów technicznych książki, którą trzymasz w ręce.

Koniec --> szarego tła![Author:RJ]

Podsumowanie

• Wejściowe pola tekstowe mogą przyjmować dane od osoby odtwarzającej film za pomocą odtwarzacza Flash Player 4 lub 5. Wejściowe pola tekstowe są powiązane ze zmiennymi, którymi możemy operować w skryptach.

• Dynamiczne pola tekstowe mogą wyświetlać wartości zmiennych w filmie.

• Każda wymiana danych pomiędzy filmem i inną aplikacją lub skryptem uruchomionym na serwerze powinna odbywać się w czterech krokach (lub stanach): wejściowym, wysyłania, oczekiwania i wyjściowym.

• Tworząc formularz we Flashu, możesz uzyskiwać komentarze od użytkowników witryny. Dane z formularza mogą być wysłane do odpowiedniego skryptu CGI w celu dalszego przetworzenia, na przykład wysłania ich pocztą elektroniczną do administratora witryny.

• Funkcja getTimer() zwraca aktualny czas odtwarzania filmu. Czas ten liczony jest od chwili wczytania filmu do odtwarzacza — nie jest on zależny od liczby odtworzonych klatek ani szybkości ich wyświetlania. Możesz używać tej funkcji do sprawdzania upływu czasu, korzystając z dodatkowej zmiennej i porównywania jej z aktualnym czasem.

• Format XML szybko staje się standardem stosowanym przy wymianie danych w Internecie. Teraz także Flash może korzystać ze struktur danych zdefiniowanych w języku XML, wysyłając i pobierając dane z serwera WWW.

Spacje, znaki tabulacji oraz przejścia do następnej linii, które nie są bezpośrednio związane z formatowaniem danych, a służą jedynie czytelności dokumentu XML (przyp. tłum.).

Autor specjalnie podaje tutaj nieprawidłowy adres IP (przyp. tłum.)

Przykładowy plik data.txt również znajduje się na CD-ROM-ie w podanym katalogu (przyp. tłum.).

2 Część I ♦ Podstawy obsługi systemu WhizBang (Nagłówek strony)

2 C:\0-praca\Flash 5. Biblia\r24-3.doc

Do korekty technicznej: następny akapit z oryginału znajduje się przed tym ćwiczeniem eksperta.

---