· 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.
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 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).
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.
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.
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.
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 = "administrator@serwer.com";
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).
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.”
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.
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....
lukaszwalda