Rozdział 21.
Planowanie struktury kodu

W tym rozdziale:

• Omówienie problemów związanych z interaktywnością

• Składnia języka ActionScript

• Wartości zmiennych

• Omówienie projektowania zorientowanego obiektowo

• Panel Debugger

Dla wielu profesjonalnych twórców witryn zwiększenie możliwości programowania we Flashu 5 jest jedną z najważniejszych nowych funkcji tego programu. Teraz, bardziej niż kiedykolwiek, elementy filmów mogą zmieniać się dynamicznie, posiadać obliczane przez komputer właściwości oraz reagować na polecenia użytkownika. Filmy mogą się także komunikować z aplikacjami lub skryptami serwerowymi przesyłając i pobierając przetworzone lub nieprzetworzone dane. Co to znaczy dla twoich filmów? Oznacza to, że posiadasz teraz narzędzia, dzięki którym możesz tworzyć naprawdę zaawansowane filmy (na przykład grę typu asteroids, grę RPG dla wielu graczy lub interfejs, który pamięta poprzednie polecenia użytkownika). Oznacza także to, że możesz użyć Flasha do tworzenia internetowych aplikacji (na przykład katalogu produktów współpracującego z bazą danych) bez potrzeby angażowania programu Macromedia Generator. W tym rozdziale poznasz nowe struktury języka ActionScript i dowiesz się, jak używać kodu w filmach Flasha.

Podział interaktywnego procesu na podstawowe elementy

Zanim staniesz się profesjonalistą tworzącym skrypty w języku ActionScript, musisz zdać sobie sprawę, że zajmie Ci to trochę czasu — jeśli chcesz być najlepszym w tworzeniu skryptów, musisz poświęcić mnóstwo czasu i energii, aby do czegoś dojść. Nie myśl sobie, że zrozumiesz programowanie po przeczytaniu tego rozdziału (lub nawet całej książki). Samodzielnie musisz tworzyć skrypty, aby utrwalić wiedzę zdobytą w książce i zastosować różne techniki rozwiązywania problemów.

Możesz sobie pomyśleć: „No nie, twierdzisz, że jest to podobne do geometrii, gdzie pojawia się pewien problem i muszę użyć twierdzeń i postulatów, aby coś udowodnić?” Nie całkiem o to chodzi, ale programowanie, podobnie jak geometria, wymaga logicznego myślenia i zdolności operowania ścisłymi pojęciami. Będziesz musiał zrozumieć, jak określane są wartości (na przykład wysokość klonu klipu filmowego), jakiego rodzaju zmiany możesz przeprowadzić na tych wartościach oraz jak zmiany jednych wartości wpływają na inne. Pogmatwane? Nie martw się, każdym z tych problemów zajmiemy się z osobna.

Odsyłacz! Zajrzyj do rozdziału 38., „Planowanie z użyciem specjalistycznych aplikacji”, aby znaleźć dokładniejsze informacje dotyczące planowania projektu i zarządzania nim.

Określanie problemu

Niezależnie od tego, jakiego narzędzia do tworzenia interaktywności używasz (DHTML, JavaScript, Flash, Director itd.), nie możesz rozpocząć prac nad projektem, dopóki nie będziesz miał dokładnego pomysłu na produkt. Co więc powinieneś zrobić? W tym momencie musisz użyć normalnego języka do opisania problemu; to znaczy, sformułować cel (lub problem) w sposób dla Ciebie zrozumiały. Powiedzmy na przykład, że chcesz utworzyć quiz. Musisz się przyjrzeć liście celów.

• Czy jest to test typu prawda-fałsz?

• Czy raczej test wielokrotnego wyboru?

• Lub może rodzaj formularza z pustymi polami?

• Może działa na zasadzie pisania odpowiedzi?

• Z ilu pytań będzie się składał?

• Czy będzie ograniczony czas na każdą odpowiedź?

• Czy będziesz powiadamiał o nieprawidłowych odpowiedziach?

• Ile będzie prób podania prawidłowej odpowiedzi?

Oczywiście takich pytań dotyczących produktu możesz wymyślić znacznie więcej. Nie próbuj zaczynać filmu Flasha, dopóki nie ustalisz przynajmniej niektórych elementów projektu.

Szukanie rozwiązania

Po określeniu projektu w ogólnym zarysie możesz określić przebieg filmu. W poniższych punktach opracujemy procedurę działania produktu (innymi słowy, jak użytkownicy będą korzystać z utworzonego produktu). Przy quizie rozwiązanie może być następujące:

1. Użytkownik uruchamia film i wpisuje swoje imię.

2. Po wpisaniu imienia zostanie powiadomiony, że ma 10 minut na rozwiązanie testu składającego się z pytań prawda-fałsz oraz wielokrotnego wyboru.

3. Po potwierdzeniu przeczytania instrukcji (przez naciśnięcie klawisza lub kliknięcie przycisku myszy), włącza się stoper, a użytkownik widzi pierwsze pytanie.

4. Odliczany czas jest widoczny.

5. Pierwsze pytanie jest pytaniem typu prawda-fałsz i prawidłową odpowiedzią jest fałsz.

6. Jeśli użytkownik wybrał prawdę, pojawi się czerwona grafika i zostanie zagrany dźwięk brzęczka, użytkownik zostanie zapytany, czy chce zobaczyć następne pytanie.

7. Jeśli użytkownik wybrał fałsz, pojawi się zielona grafika i zostanie zagrany dźwięk aplauzu. Użytkownik zostanie zapytany, czy chce zobaczyć następne pytanie.

8. Cały proces będzie się powtarzał aż do ostatniego pytania, po którym wyniki quizu zostaną pokazane użytkownikowi.

Powyższe kroki są bardzo podobne do diagramu programu omówionego w rozdziale 38., „Planowanie z użyciem specjalistycznych aplikacji”. W trakcie rzeczywistej produkcji będziesz chciał zapewne dokładniej opisać 8. punkt, podobnie jak zostały opisane punkty od 5. do 7. Jak możesz się przekonać, dobre zaplanowanie interaktywnego projektu znacznie pomaga w późniejszym pisaniu skryptów. Zauważ, że w punktach 6. i 7. użyliśmy już wyrażenia warunkowego if (jeśli). W kroku 4. opisaliśmy także właściwość _visible (widzialność) pewnego obiektu. Chociaż możemy nie znać wszystkich akcji dotyczących załączenia stopera, wiemy, że będziemy musieli się dowiedzieć, jak mierzyć czas w filmie Flasha.

Przekład rozwiązania na algorytm programu

Po zaplanowaniu przebiegu filmu możesz przejść do konwersji poszczególnych kroków do formatu, który może zostać użyty we Flashu. To zadanie zajmie Ci najwięcej czasu, ponieważ będziesz musiał szukać wielu informacji w pomocy ActionScript Reference Guide. Raczej nie znajdziesz żadnego filmu, który mógłby Ci posłużyć za przykład albo znajdziesz taki, który będzie wymagał modyfikacji, aby sprostać potrzebom Twojego projektu. W przykładzie z quizem algorytm rozwiązania może być taki, jak pokazujemy poniżej.

1. Ujęcie 1. — zatrzymanie filmu. Użytkownik wpisuje imię w pole tekstowe.

2. (a) Ujęcie 1. — użytkownik klika klon przycisku rozpoczynającego quiz (pojawiają się instrukcje). Instrukcje znajdują się w drugim ujęciu. Z tego też powodu do przycisku przypisana jest akcja gotoAndStop(2), która powoduje przejście do klatki numer 2.

2. (b) Ujęcie 2. — program wyświetla statyczne pole tekstowe z instrukcjami dotyczącymi quizu.

3. Ujęcie 2. — użytkownik klika klon przycisku, który powoduje rozpoczęcie właściwego quizu. Skrypt tego przycisku powoduje załączenie stopera i przejście do klatki numer 3.

4. Ujęcie 3. — aktualny czas liczony przez stoper wyświetlany jest w polu tekstowym, które znajduje się w prawym górnym narożniku obrazu.

5. Ujęcie 3. — na środku obrazu pojawia się pierwsze pytanie. Poniżej pytania znajdują się przyciski z napisem „Prawda” oraz „Fałsz”. Prawidłowa odpowiedź na to pytanie ukryta jest w zmiennej o określonej nazwie i wartości. Nazwa zmiennej to odpowiedz, a jej wartością jest false (fałsz). Deklaracja zmiennej umieszczona jest w skrypcie ujęcia numer 3. Tworzymy także zmienną wynik, która zlicza liczbę poprawnych odpowiedzi. Jej wartością początkową jest 0.

6. (a) Ujęcie 3. — jeśli użytkownik kliknie przycisk Prawda, wtedy akcja if…else sprawdzi, czy wartość zmiennej odpowiedz równa jest true. Jeśli tak, to właściwość _visible klonu klipu filmowego z zielonym światłem zostanie ustawiona na true i program odtworzy dźwięk aplauz.wav z biblioteki za pomocą obiektu Sound. Ponadto wartość zmiennej wynik zwiększy się o 1. Jeśli wartość zmiennej odpowiedz nie jest równa true, właściwość _visible klonu klipu filmowego z czerwonym światłem zostanie ustawiona na true, a z biblioteki zostanie odtworzony dźwięk błąd.wav za pomocą obiektu Sound. Wynik pozostanie niezmieniony.

6. (b) Ujęcie 3. — pojawi się klon przycisku, po kliknięciu którego program przejdzie do klatki numer 4.

7. (a) Ujęcie 3. — jeśli użytkownik kliknie przycisk Fałsz, wtedy akcja if…else sprawdzi, czy wartość zmiennej odpowiedz równa jest false. Jeśli tak, to właściwość _visible klonu klipu filmowego z zielonym światłem zostanie ustawiona na true, a z biblioteki zostanie odtworzony dźwięk aplauz.wav za pomocą obiektu Sound. Także o 1 zostanie zwiększona zmienna wynik. Jeśli wartość zmiennej odpowiedz nie jest równa false, właściwość _visible klonu klipu filmowego z czerwonym światłem zostanie ustawiona na true, a z biblioteki zostanie odtworzony dźwięk błąd.wav za pomocą obiektu Sound. Wynik pozostanie niezmieniony.

7. (b) Ujęcie 3. — pojawi się klon przycisku, po kliknięciu którego program przejdzie do klatki numer 4.

Istnieje parę sposobów na przeniesienie tego algorytmu do składni języka ActionScript. Zwróć uwagę, że parę podstawowych koncepcji pojawiło się już w algorytmie — określiliśmy, gdzie występują zdarzenia (dotyczące ujęć lub przycisków) oraz jakie elementy powinny zostać użyte (na przykład przyciski lub klony klipów filmowych).

Powinieneś także bez trudu zauważyć, że użyliśmy praktycznie takich samych procedur dla przycisków Prawda oraz Fałsz. Moglibyśmy umieścić odpowiedzi bezpośrednio w skryptach przycisków, ale wtedy dla każdego pytania musielibyśmy zmieniać akcje zawarte w przyciskach. Dzięki umieszczeniu bardzo podobnych skryptów w każdym klonie przycisku, musimy zmieniać tylko wartości zmiennej odpowiedz w zależności od pytania.

Ten przykład został już skonwertowany na algorytm, a 90% problemów pojawia się właśnie w tym procesie — jeszcze zanim utworzysz testową wersję filmu Flasha. Musisz się nauczyć podstawowej terminologii oraz składni języka ActionScript, zanim zaczniesz pisać skrypty opisane w punktach od 1. do 7. O tym właśnie będzie dalsza część tego rozdziału (a w zasadzie nawet cała część V).

Szare tło!

Ćwiczenie eksperta
Projektowanie zorientowane obiektowo — podstawy
Autor: Philip Fierlinger

Gdy zaczniesz tworzyć coraz to bardziej skomplikowane projekty, będziesz zapewne chciał ułatwić sobie proces kreacji. Musisz znaleźć metodę optymalizacji projektu, aby był efektywniejszy, elastyczniejszy, łatwiejszy w tworzeniu i modyfikowaniu. Jedną z najlepszych technik, z jakich możesz skorzystać, jest projektowanie zorientowane obiektowo.

Podstawowa zasada działania

W projektowaniu zorientowanym obiektowo dzielisz swój projekt na samodzielne moduły, zwane po prostu obiektami. W programie każdy obiekt może być w nieskończoność duplikowany bez zwiększania rozmiaru pliku zajmowanego przez projekt. Każdy zduplikowany obiekt może działać i być zmieniany niezależnie od obiektu, z którego powstał. Jednak zmiany poczynione w źródłowym obiekcie są automatycznie przenoszone na zduplikowane obiekty. W projektowaniu zorientowanym obiektowo możesz łatwo dodawać lub usuwać obiekty z projektu lub modyfikować obiekt bez konieczności wprowadzania poprawek w całym projekcie. Obiekty mogą wymieniać dane bezpośrednio ze sobą oraz tworzyć rozbudowane współzależności.

Samo jądro Flasha jest zorientowane obiektowo. Możesz sobie nawet z tego nie zdawać sprawy, ale za każdym razem, kiedy umieszczasz symbol z biblioteki na obrazie, używasz metody projektowania obiektowego. Symbole są definicjami obiektów, co oznacza, że możesz tworzyć niezliczone ilości klonów symbolu, nie zwiększając przy tym ilości miejsca zajmowanego przez film w pliku. Dodatkowo możesz niezależnie zmieniać właściwości każdego klonu.

Pomyśl o obiekcie jak o pracowniku. Wyobraź sobie, że nieskończenie wiele razy możesz sklonować jednego pracownika, ale płacisz tylko temu pierwszemu, a reszta pracuje za darmo. Potem wyobraź sobie, że każdemu pracownikowi możesz zlecić inne zadanie tak, aby wszyscy wykonywali inne zadania. Każdy chciałby mieć tak efektywnego i elastycznego pracownika.

Wszystkie trzy rodzaje symboli — grafika, przycisk oraz klip filmowy — pozwalają na niezależną zmianę właściwości każdego z ich klonów we Flashu. Do własności tych należy położenie, skala, obrót oraz krycie. Jednak właściwości klonów symboli graficznych oraz przycisków po eksporcie filmu do pliku .SWF są już określone na stałe. Nie można ich już zmienić w skryptach na podstawie danych pobranych od użytkownika, załadowanych danych lub stanu innych właściwości filmu.

Obiekty dynamiczne

Z drugiej strony klony klipu filmowego mogą być dynamicznie modyfikowane w czasie odtwarzania filmu. Klipy filmowe są obiektami, których używamy najczęściej. Właściwości klipów filmowych mogą być odczytane i zmienione w każdej chwili. A co najważniejsze, możesz odczytywać i ustawiać zmienne wewnątrz jakiegokolwiek klipu filmowego.

Ponieważ klipy filmowe mogą być zmieniane dynamicznie, można z nich tworzyć szablony, które są dostosowywane do potrzeb w czasie odtwarzania filmu. Na przykład możesz utworzyć obiektowy szablon menu używający klipów filmowych, którego przyciski nie posiadają predefiniowanych nazw. Zamiast tego nazwy przycisków tworzone są jako klipy filmowe zawierające puste pola tekstowe, które są uzupełniane w trakcie odtwarzania i odwzorowują aktualny stan filmu. Możesz nawet zduplikować całe menu (liczba danych praktycznie się nie zwiększy) i za każdym razem przypisywać całkowicie inne wartości napisom w przyciskach.

Użycie klipów filmowych w ten sposób pozwala tworzyć wyjątkowo elastyczne, modyfikowalne i wydajne projekty. Ponieważ menu jest zorientowane obiektowo, możesz go bez problemu używać wielokrotnie nie zwiększając wielkości pliku zajmowanego przez projekt. Mniej się także natrudzisz przy jego tworzeniu. Musisz przecież tylko przetestować i ewentualnie poprawić jeden obiekt — szablon menu — zamiast sprawdzania kolejnych elementów menu z osobna. Poza tym zmiany dokonane w podstawowym obiekcie automatycznie dotyczą także wszystkich klonów, wiec nawet fundamentalne zmiany w systemie są łatwe do wprowadzenia.

W dużych flashowych projektach powtarzające się elementy interfejsu, takie jak animacje wstępne, menu, okna oraz suwaki, są przeważnie tworzone z zachowaniem reguł projektowania zorientowanego obiektowo. We Flashu 5 wprowadzono nawet nowe obiekty o nazwie Smart Clip. Umożliwiają one ustawianie wartości właściwości klipów filmowych za pomocą wygodnego panelu zamiast modyfikacji źródłowego kodu ActionScript klipu filmowego. Ułatwia to zarządzanie projektem. Dzięki temu twórcy otrzymali proste narzędzie umożliwiające tworzenie, wielokrotne używanie i współdzielenie obiektów typu Smart Clip, które można nie tylko wielokrotnie używać w tym samym filmie, ale także współdzielić z innymi projektami korzystającymi z tych samych bibliotek.

Dziedziczenie — związek rodzic-potomek

Dziedziczenie jest jeszcze jedną bardzo użyteczna cechą projektowania zorientowanego obiektowo. Kiedy umieszczasz jeden obiekt wewnątrz innego, łączysz je w zależność, nazywaną związkiem rodzic-potomek. Główny obiekt nazywany jest rodzicem, natomiast zagnieżdżony potomkiem. Związek rodzic-potomek posiada duże możliwości, ponieważ obiekty potomne dziedziczą właściwości od rodzica. Jednak obiekty potomne zawierają także odrębne właściwości niezależne od rodzica.

Aby zademonstrować zasadę dziedziczenia, użyjemy przykładu z animowaną postacią. Powiedzmy, że zagnieździliśmy obiekt palca wewnątrz obiektu ręki, który jest zagnieżdżony wewnątrz obiektu ramienia, a ten wewnątrz obiektu tułowia. Wszystkie wymienione obiekty będą dziedziczyć właściwości, które zmienimy dla obiektu rodzicielskiego. Powiększenie tułowia spowoduje także powiększenie ramienia, dłoni oraz palca. Ruch tułowia spowoduje także ruch ramienia, ręki oraz palca. Jednak ruch ręki wpłynie już tylko na palec, a nie na tułów, ani ramię, ponieważ potomek może być zmieniany niezależnie od swoich rodziców (pamiętaj, że ramię oraz tułów są rodzicami ręki). Nasze ciało działa przecież dokładnie tak samo: palce muszą przemieszczać się tam, gdzie zabierze je tułów, ale mogą się także poruszać niezależnie od niego.

Architektura flashowej witryny zorientowana obiektowo

Te same zasady projektowania zorientowanego obiektowo dotyczą także całych witryn. Tworząc witrynę ze zorientowanych obiektowo modułów, możesz znacznie zwiększyć jej wydajność i możliwości modyfikowania.

Flashowa witryna powinna być podzielona na niewielkie, samodzielne filmy Flasha, które są traktowane jako niezależne obiekty w ogólnej strukturze witryny. Te niezależne filmy są ładowane i umieszczane na obrazie za pomocą akcji loadMovie.

Przy ładowaniu nowego filmu musisz określić i zastąpić istniejący klip filmowy. Przeważnie zastępowany klip filmowy jest pusty i służy tylko do umieszczania w nim ładowanych filmów.

Podobnie jak wszystkie inne zagnieżdżone obiekty, także zagnieżdżone filmy zostaną połączone związkiem rodzic-potomek. Trzeba pamiętać, że zagnieżdżony film dziedziczy położenie, wielkość, kolory oraz krycie od pierwotnego klipu filmowego.

Podstawową zaletą wynikającą z podziału witryny na niezależne obiekty jest możliwość ładowania zawartości tylko wtedy, gdy jest to konieczne, zamiast zmuszania użytkowników do pobierania całej witryny naraz. Mała rada — dla optymalnego działania witryny pierwszy pobierany film powinien zawierać tylko grafikę i skrypty, które są naprawdę niezbędne do nawigacji w witrynie.

Jeśli chodzi o tworzenie strony, podział jej na niezależne obiekty pozwala na edycję, testowanie i poprawianie tylko tego niewielkiego pliku, który wymaga poprawek, zamiast mozolnej edycji jednego ogromnego pliku. Ułatwia to modyfikowanie poszczególnych części witryny, umożliwia dodawanie nowych części i usuwanie tych, które nie są już potrzebne, za pomocą dodawania i usuwania poszczególnych filmów. Jeśli witrynę tworzy zespół ludzi, dużo łatwiej jest podzielić pracę pomiędzy członków zespołu.

Pisanie skryptów zorientowanych obiektowo

Przy większości tworzonych programów projektowanie zorientowane obiektowo (OOP — Object-Oriented Programming) jest podstawą. Chociaż OOP mogło być symulowane we Flashu 4, to jednak dopiero język ActionScript Flasha 5 jest naprawdę językiem zorientowanym obiektowo.

Składnia, zasady i strategia zorientowanego obiektowo pisania skryptów może być we Flashu bardzo skomplikowana. Dokładniejsze omówienie tego tematu znajdziesz w innej części książki. W tej sekcji omówimy tylko podstawowe zasady.

Zasadniczo pisanie skryptów opartych na obiektach umożliwia stosowanie tych samych technik obiektowych, które zostały omówione wcześniej — pozwala tworzyć projekty bardziej efektywne, elastyczne, o większych możliwościach i umożliwia ich modyfikowanie.

Podstawowa zasada tworzenia skryptów zorientowanych obiektowo mówi o tym, by unikać tworzenia kodu użytecznego tylko w konkretnym zastosowaniu, którego użycie w innym miejscu filmu wymaga mnóstwa poprawek. Dlatego lepiej podzielić kod na ogólne zadania, które mogą być użyte wielokrotnie, do różnych celów, w różnych kombinacjach.

We Flashu skrypty, które możemy traktować jako samodzielne obiekty, nazywamy funkcjami. Funkcja zawiera instrukcje, które zostaną wykonane po jej wywołaniu. Celem programowania obiektowego jest tworzenie takich funkcji, które wykonują określone zadanie, a dane, którymi operują, są zależne od aktualnych warunków filmu. Dzięki temu, że dane w funkcji mogą się zmieniać w zależności od przebiegu filmu, funkcja jest elastyczna — może działać w różnych warunkach dając wyniki, które bazują na aktualnych zasadach. Dodatkowo możesz łączyć i zagnieżdżać funkcje, aby uzyskiwać jeszcze bardziej skomplikowane rezultaty.

Weźmy na przykład zorientowane obiektowo menu, które rozpatrywaliśmy już wcześniej. Poszczególne operacje związane z menu powinny być zrealizowane jako oddzielne funkcje. Jedna z nich będzie umieszczała klip filmowy menu na obrazie i przesuwała go w odpowiednie miejsce. Inna będzie wypełniała pola tekstowe na przyciskach. Jeszcze inna będzie wywoływała akcje, które mają zostać wykonane po naciśnięciu określonego przycisku.

Dzieląc różne funkcje na specjalizowane obiekty, możesz ponownie użyć tych samych funkcji w innych zadaniach. Na przykład funkcja, która umieszczała menu w określonym miejscu sceny, może posłużyć do umieszczenia innego elementu w określonym miejscu. Dobrze napisane funkcje wykonują szczegółowe zadania, ale przetwarzają dane w relatywny sposób, więc są elastyczne, modyfikowalne, efektywne i praktyczne.

Uwagi końcowe

Flash przez lata rozwinął się z niewielkiego narzędzia do animacji w jeden ze standardów Internetu. Jego kluczem do sukcesu okazała się zdolność do dostarczania dynamicznych materiałów w formacie zajmującym wyjątkowo mało miejsca w pliku. Chociaż to grafika wektorowa zbiera laury za tak wspaniałe osiągnięcia i niewielkie rozmiary plików, powodzenie produktu ukryte jest dużo głębiej i ma znacznie większe możliwości.

Flash posiada wspaniałe środowisko zorientowane obiektowo. Mam nadzieję, że rozumiesz teraz, iż dzięki technikom projektowania zorientowanego obiektowo możesz znacznie poprawić wydajność własnej witryny — może ona być bardziej dynamiczna i efektywna. Jednocześnie ulepszasz także własny warsztat, co pozwoli Ci tworzyć bardziej elastyczne i modyfikowalne witryny.

Przypis do szarego tła!

Philip Fierlinger urodził się i dorastał w Penn Wayne w Pensylwanii. Jego ulubionym zajęciem jest spędzanie czasu z żoną i dziećmi. Philip pracuje w Turntable (www.turntable.com), firmie multimedialnej z San Francisco, gdzie tworzył flashowe witryny dla De La Soul oraz The Beastie Boys (dla www.shockwave.com), interaktywne prezentacje produktu Palm III firmy Palm Computing, elementy iTV dla Disney'a, oraz inne interesujące projekty. Z ostatniego roku szkoły średniej pamięta, że obejrzał Robocopa oraz występ U2 w Meadowlands na trasie koncertowej „Joshua Tree”. Przyznaje, że to, co dla niego najważniejsze, to „pośmiać się z przyjaciółmi, zjeść coś dobrego, zobaczyć wspaniałe miejsca, słuchać wspaniałej muzyki, obejrzeć dobry film, zostać zainspirowanym przez wspaniały projekt i zawrzeć to wszystko we wspaniałej pracy”.

Koniec szarego tła!

Podstawy pisania skryptów we Flashu

W nowym edytorze skryptów we Flashu 5 możesz tworzyć skrypty na dwa sposoby: wybierając odpowiednie polecenia ze specjalnego przybornika (tryb Normal Mode) lub wpisując wszystkie polecenia skryptu bezpośrednio z klawiatury (tryb Expert Mode).

Tryb Normal Mode

Ten tryb opiera się na przypisywaniu akcji do ujęć oraz przycisków, wybierając ich z menu (lub z przybornika akcji) i ustalając ich parametry przy użyciu pól tekstowych i opcji. Chociaż ta metoda programowania może się wydawać trochę dziwna dla tradycyjnych programistów, skrypt za jego pomocą uzyskany wygląda i działa dokładnie tak samo, jak po napisaniu go w trybie Expert Mode.

Tryb Expert Mode

W tym trybie ręcznie wpisujesz akcje, ale nadal możesz sobie pomagać przybornikiem akcji. Jeśli chodzi o składnię, to język ActionScript bardzo przypomina język JavaScript. Firma Macromedia zrobiła wiele, aby uczynić język ActionScript kompatybilnym z ECMA-262 (czyli ze standardem, z którego wywodzi się język JavaScript). Podobnie jak inne języki zorientowane obiektowo, ActionScript składa się z wielu dobrze znanych części: zmiennych, operatorów, warunków, pętli, wyrażeń, wbudowanych właściwości, podprogramów oraz funkcji.

Dostęp do poleceń języka ActionScript

Wszystkie polecenia ActionScript możesz znaleźć w przyborniku akcji lub po naciśnięciu przycisku z plusem (+) w edytorze skryptów. Jednak odpowiednie połączenie akcji w działający kod nie jest już zadaniem Flasha. Chociaż ten rozdział jest za krótki na omówienie podstawowych zasad programowania, podamy krótki opis całego języka ActionScript wraz z omówieniem każdej jego części.

Wskazówka! Jeśli używasz menu rozwijanego po naciśnięciu przycisku z plusem (+), aby dostać się od poleceń ActionScript, to zapewne zauważyłeś, że po prawej stronie każdego polecenia podany jest skrót klawiszowy do niego. Możesz tych skrótów używać w obydwu trybach. Na przykład akcja loadMovie ma następujący skrót klawiszowy — Esc+lm. Jeśli uaktywnisz edytor skryptów i naciśniesz Esc+lm, wtedy do skryptu zostanie dodana akcja loadMovie wraz z miejscem na argumenty.

Okno skryptu

Prawe okno edytora skryptu wyświetla edytowany skrypt, dlatego nazywamy je oknem skryptu. W trybie Normal Mode możesz dodać w nim nową linię kodu poniżej istniejącej, zaznaczając istniejącą linię w skrypcie i wybierając nową akcję. Jeśli przypadkowo umieściłeś akcję w złym miejscu lub po prostu chcesz przenieść ją w inne, zaznacz tą akcję i przeciągnij myszą w nowe miejsce. Możesz także wycinać, kopiować oraz wklejać kod skryptu w tym samym oknie edytora lub przenosić go pomiędzy innymi oknami, używając odpowiednio następujących skrótów klawiszowych Ctrl+X (Command+X) — wycięcie zaznaczonej linii, Ctrl+C (Command+C) — skopiowanie zaznaczonej linii oraz Ctrl+V (Command+V) — wklejenie skopiowanej lub wyciętej linii.

W trybie Expert Mode mechanizm zaznaczania akcji jest inny. Zaznaczasz część linii kodu i edytujesz go, jak tylko Ci się podoba. Możesz nawet edytować go w swoim ulubionym edytorze tekstu! Wolno Ci tworzyć skrypty w innych środowiskach programistycznych. Gotowy skrypt możesz wkleić do prawego okna edytora skryptów.

Wskazówka! Aby upewnić się, że kod nie zawiera żadnych błędów składniowych, gdy pracowałeś w trybie Expert Mode, na chwilę przełącz się do trybu Normal Mode. Jeśli Flash znajdzie jakieś błędy, poinformuje Cię o tym i nie pozwoli przejść do trybu Normal Mode, zanim ich nie poprawisz.

Szare tło!

Nowa akcja #include

Język ActionSctipt Flasha 5 zawiera akcję, która umożliwia dołączanie zewnętrznych plików tekstowych (z rozszerzeniem .AS). Dzięki temu możesz pisać skrypty w jakimkolwiek edytorze i zapisywać je niezależnie od filmu Flasha (pliku .FLA). W czasie publikacji filmu .SWF Flash pobierze plik .AS i wstawi zawarte w nim akcje w miejsce akcji #include. Na przykład poniższy kod, który dotyczy danych personalnych, mógłby zostać zapisany w pliku contact.as:

contactName = "Joseph Farnsworth";

contactStreet = "675 Locust Street";

contactCity = "Chicago";

contactState = "IL";

contactPhone = "312-555-1342";

contactEmail = "[e-mail]";

W filmie Flasha możesz dodać ten kod do ujęcia głównej listwy czasowej (lub listwy czasowej klipu filmowego) za pomocą akcji #include (możesz używać tej akcji wewnątrz każdego detektora zdarzeń, włączając w to detektory ujęć, zdarzeń przycisków, zdarzeń klipów filmowych, itd.):

#include "contact.as"

Pamiętaj, aby nie umieszczać średnika na końcu linii zawierającej akcję #include. Pomyśl o tej akcji, jak o specjalnym znaczniku dla Flasha 5, który każe mu to miejsce zastąpić tekstem zawartym w pliku wymienionym po słowie #include. Poniższa linia spowoduje błąd „malformed” przy testowaniu lub publikacji filmu:

#include "contact.as";

Do czego może się przydać akcja #include? Doświadczonym programistom pozwala pisać skrypty w jakimkolwiek edytorze tekstu. Możesz tworzyć całe biblioteki z własnymi funkcjami. Takie biblioteki, znajdujące się w plikach .AS, mogą być używane w wielu filmach.

Pamiętaj jednak, że akcja #include wykonywana jest tylko podczas publikacji lub testowaniu filmu. Nie możesz używać plików .AS na serwerze, aby dynamicznie dodawać je do skryptów filmu. Przy każdej zmianie pliku .AS musisz ponownie opublikować film.

Koniec szarego tła!

Część obliczeń: zmienne ActionScript

Kiedy wiesz już, jak działają klony klipów filmowych oraz jak sterować ich odtwarzaniem i właściwościami, możesz zacząć uczyć się podstaw tworzenia bardziej skomplikowanych skryptów we Flashu. Jeśli znasz już język JavaScript lub Director Lingo, Twoje przejście do pisania skryptów dla Flasha będzie bardziej płynne.

Odsyłacz! Jeśli dopiero zaczynasz pisać skrypty, zalecamy Ci przejrzenie części V, „Programowanie w języku ActionScript”, zanim zaczniesz czytać ten rozdział.

W każdym języku programowania potrzebujesz czegoś, co będzie stanowiło „pamięć” — będzie zapamiętywało wartości oraz właściwości obiektów lub innych danych. Element pełniący taką funkcję nazywamy zmienną.

Zmienne są elementami posiadającymi nazwę, które mogą przechowywać zmieniające się wartości (liczby lub litery). Jedną z pierwszych przeszkód pojawiających się przy nauce programowania jest zrozumienie tego, że nazwy zmiennych nie mają dla komputera żadnego znaczenia (w sensie treści samej nazwy). Pamiętaj, że komputer niczego nie zrobi, dopóki nie otrzyma polecenia. Chociaż większość języków programowania posiada zestaw „wbudowanych” właściwości oraz funkcji, dzięki zmiennym możemy sobie zmniejszyć ilość pracy, tworząc skróty do innych elementów języka. Jednym z podstawowych skrótów jest umieszczanie ścieżki adresowej do głęboko zagnieżdżonego klonu klipu filmowego w zmiennej, na przykład:

_root.birdAnim.birdHouse.birdHest.birdEgg

zostaje umieszczone w zmiennej o nazwie pathtoEgg:

pathToegg = _root.birdAnim.birdHouse.birdHest.birdEgg

Kiedy zmienna pathToEgg jest już zadeklarowana i ma nadaną wartość, możemy jej używać zamiast długiej ścieżki adresowej:

with(pathToEgg){

gotoAndPlay("start");

}

Ważne jest to, że zmienna pathToEgg może mieć inną nazwę, na przykład myPath lub robPath, lub jakąkolwiek inną. Jeśli składnia oraz format wyrażenia jest prawidłowy, nie masz się o co martwić.

Nowość! Zmienne w języku ActionScript mogą przechowywać wartości różnych typów, takich jak ciąg znaków (tekst), liczba, wartość logiczna czy obiekt. Z tego też powodu podczas pracy ze zmiennymi musisz sam pamiętać, jakiego są typu. Typy danych omawiamy w następnym rozdziale.

Zmienne we Flashu przypisywane są do listwy czasowej filmu lub klonu klipu filmowego, na jakiej są tworzone. Jeśli utworzysz zmienną x na głównej listwie czasowej, jest ona dostępna dla wszystkich akcji z tej listwy czasowej. Jednak z listew czasowych klipów filmowych nie masz bezpośredniego dostępu do tej zmiennej. Aby dostać się do zmiennej znajdującej się na innej listwie czasowej (na przykład w klonie klipu filmowego), musisz podać ścieżkę adresową do klonu klipu, w którym znajduje się zmienna, następnie dodać kropkę (.) a dopiero potem nazwę zmiennej. Na przykład poniższa instrukcja powoduje wpisanie do zmiennej x wartości zmiennej y znajdującej się w klonie klipu filmowego o nazwie ball:

x = _root.ball.y;

Natomiast ta instrukcja powoduje wpisanie do zmiennej y wartości zmiennej x z głównej listwy czasowej:

y = _root.x

Wskazówka! Zmienne w ActionScript nie mogą zaczynać się od cyfry. Nie ma natomiast znaczenia, czy są pisane małymi, czy wielkimi literami.

Ciągi znaków (wartości tekstowe)

W języku programistów ciąg znaków oznacza dowolną kombinację znaków, które dla samego programu są niezrozumiałe. Tylko od Ciebie zależy, czy przypiszesz im coś ważnego. Na przykład, nadanie zmiennej nazwy imie niewiele oznacza. Aby zmienna ta miała jakieś znaczenie, musimy coś z nią zrobić. Jeśli imie = "Zuzia", wtedy tę zmienną do czegoś możemy wykorzystać.

Możemy także tworzyć dużo prostsze pary nazwa-wartość, na przykład i = 0, aby zliczać liczbę iteracji pętli. Jeśli chcesz, aby określona animacja z klipu filmowego była powtórzona tylko trzy razy, możesz ją zwiększać o 1 (na przykład, i = i + 1, i += 1 oraz i++ robią dokładnie to samo) przy każdej iteracji pętli. Zatrzyma się, gdy i będzie równe 3.

Wyrażenia

Flash używa terminu wyrażenie, aby określić dwa różne elementy kodu ActionScript. Wyrażeniem jest zarówno fragment kodu porównujący wartości w warunku lub pętli (są to wtedy wyrażenia warunkowe) jak i fragment kodu, który jest interpretowany w czasie odtwarzania filmu (tzw. wyrażenia liczbowe oraz tekstowe). Wyrażenia warunkowe omówimy w dalszej części tego rozdziału.

Wyrażenia liczbowe oraz tekstowe są po prostu fragmentami kodu, których wartość jest dynamicznie obliczana w czasie wykonywania filmu. Przypuśćmy, że do zmiennej y została wpisana liczba 3. W wyrażeniu x = y + 1, y + 1 po prawej stronie znaku równości jest właśnie wyrażeniem liczbowym. W związku z tym w czasie odtwarzania filmu wyrażenie x = y + 1 zostanie zamienione na x = 4, ponieważ wartość y (czyli 3) zostanie wstawiona do wyrażenia, a dodawanie 3 + 1 daje wynik 4. Takie wyrażenia mają duże znaczenie w języku ActionScript, ponieważ pozwalają na ustalanie parametrów przekazywanych do akcji na podstawie obliczeń matematycznych, a nie na stałe przypisanych wartości. Rozważ dwa przypadki:

• --> parametr akcji Go [Author:MB] to może być wyrażeniem, które zwraca losową liczbę z określonego przedziału, co powoduje przejście filmu do losowego ujęcia,

• parametr URL akcji getURL może natomiast zostać ustalony za pomocą zmiennej, która określa nazwę serwera, oraz tekstu, który będzie ścieżką dostępu do pliku.

Aby zmienić wszystkie adresy URL w filmie z lokalnego serwera, na którym przygotowujesz witrynę, na serwer docelowy, będziesz musiał tylko zmienić wartość zmiennej przechowującej adres serwera. Wszędzie, gdzie po wybraniu akcji zobaczysz słowo Expression, możesz użyć wyrażenia do określenia wartości tego parametru. Wpisz po prostu odpowiedni kod i uaktywnij opcję Expression.

Aby użyć wartości tekstowej wewnątrz wyrażenia, musisz ją zawrzeć w cudzysłowach. Wszystko, co znajduje się w cudzysłowach uważane jest za tekst. Na przykład warunek if (stan == gotowy) nieprawidłowo sprawdza, czy wartość zmiennej stan jest równa (nieistniejącej) zmiennej gotowy. Prawidłowy warunek powinien sprawdzać, czy wartość zmiennej stan jest równa tekstowi „gotowy.” Należałoby wiec napisać if (stan == "gotowy").

Możesz nawet wykorzystywać wyrażenie, które pośrednio odnoszą się do wcześniej ustalonych zmiennych. We Flashu 5 możesz użyć nowej notacji kropkowej (oraz nawiasów kwadratowych) do pośredniego odniesienia się do zmiennej. Możesz także skorzystać z funkcji eval() z Flasha 4 (aby zapewnić kompatybilność wstecz).

Nawiasy kwadratowe

Jeśli masz zmienną o nazwie nazwa_1, możesz napisać wyrażenie _root["nazwa_" + "1"], które spowoduje odniesienie się do wartości zmiennej nazwa_1. Do czego może się to przydać? Gdy posiadasz więcej niż jedną zmienną o takim samym początku (nazwa_1, nazwa_2, nazwa_3, itd.), możesz napisać ogólną instrukcję z wyrażeniem dotyczącym wybranej zmiennej o takim początku: _root["nazwa_" + i], gdzie i będzie zmienną określającą, którego obiektu dotyczy wyrażenie.

Funkcja eval() oraz akcja Set Variable z Flasha 4

Jeśli chcesz używać starego ActionScript do pośredniego odwoływania się do nazw zmiennych i ich wartości, możesz użyć dwóch metod.

• --> Użyj akcji Set Variable, gdzie [Author:MB] nazwę zmiennej podajesz w notacji ukośnikowej:

set(/"name_" add i, "Robert Reinholdt");

• Użyj funkcji eval(), określając zmienną jako wyrażenie:

eval("_root.name_" add i) = "Robert Reinholdt";

Deklaracje zmiennych

W większości języków skryptowych nie ma potrzeby deklarowania zmiennych przed podawaniem ich wartości; chodzi o to, że nie musisz najpierw tworzyć zmiennej nazwa, a dopiero później przypisywać jej wartość. We Flashu nie musisz wcześniej deklarować zmiennej, aby się do niej odwołać. Możesz nawet utworzyć zmienną na głównej listwie czasowej z poziomu klipu filmowego. Większość używanych przez Ciebie zmiennych będzie deklarowana w ujęciach listew czasowych.

Zmienne związane z polami tekstowymi

Od Flasha 4 tekst może zostać określony jako pole tekstowe. Pola tekstowego używamy jako „pojemnika” na dynamiczny tekst, którego zawartość może być uaktualniana za pomocą skryptów w języku ActionScript lub skryptu serwera (we Flashu 5 jest to dynamiczne pole tekstowe), lub jako pole pobierające dane od użytkownika (we Flashu 5 jest to wejściowe pole tekstowe).

Do właściwości pola tekstowego masz dostęp po jego zaznaczeniu i otwarciu panela Text Options. W panelu tym możesz określić parametry pola — w tym nazwę zmiennej z nim związanej.

Wejściowe pole tekstowe (Input Text) można edytować w trakcie odtwarzania filmu Flasha; użytkownik może wtedy w pole wpisać tekst, który staje się wartością zmiennej związanej z polem tekstowym. Na ekranie logowania możesz utworzyć pole tekstowe i związać je ze zmienną o nazwie login. Użytkownik wpisuje swoje imię, na przykład „Jaś”, którą to czynność skrypt odbiera jako przypisanie login = "Jaś". Jakikolwiek tekst wpisany w pole tekstowe w środowisku edycyjnym będzie stanowił początkową wartość zmiennej.

Deklarowanie zmiennych

Istnieje parę sposobów na określenie lub zadeklarowanie zmiennych w filmie Flasha. Możesz je tworzyć bezpośrednio w skryptach (lub wiążąc je z polami tekstowymi, jak mogłeś się przekonać w poprzedniej sekcji), ładować z pliku tekstowego lub skryptów CGI (Common Gateway Interface) lub umieszczać je w znacznikach HTML.

Używanie akcji do definiowania zmiennych

Najbardziej popularnym sposobem tworzenia zmiennej jest wpisanie jej nazwy oraz wartości do skryptu w edytorze skryptów. Skrypt taki jest przypisany do ujęcia kluczowego lub klonu klipu filmowego bądź przycisku. Wartością większości podstawowych zmiennych jest ciąg znaków lub wartość liczbowa.

Do deklarowania zmiennych we Flashu służy akcja var. Gdy pracujesz w trybie Normal Mode w edytorze skryptów, wtedy akcja var posiada tylko jeden parametr — Variables. Pamiętaj, że akcja var służy do deklarowania zmiennych lokalnych, które istnieją tylko w czasie wykonywania funkcji.

Odsyłacz! Zmienne lokalne omawiamy w następnym rozdziale.

Ładowanie zmiennych z określonego źródła

Możesz także tworzyć zmienne, ładując je z zewnętrznego źródła, na przykład pliku tekstowego znajdującego się na serwerze lub nawet przy użyciu zapytania kierowanego do bazy danych. Do tego celu służy akcja loadVariables. Istnieją trzy podstawowe parametry akcji loadVariables: URL, Location oraz Variables (rysunek 21.1).

Rysunek 21.1. Parametry akcji loadVariables

Parametr URL określa źródło, z którego będą pobierane zmienne. Może to być relatywny odnośnik do źródła danych (nie musisz wpisywać absolutnej ścieżki adresowej, lecz możesz to zrobić). Adres ten może być wartością tekstową ("http://www.theMakers.com/cgi-bin/search.pl") lub wyrażeniem używającym zmiennej lub kilku zmiennych (adresSerwera + sciezka + skrypt). Jeśli chcesz wskazać określony plik, wpisz relatywną ścieżkę dostępu oraz jego nazwę. Jeśli chcesz mieć dostęp do bazy danych zwracającej dynamiczne dane, wpisz ścieżkę do skryptu, na przykład "www.adres.com.pl/cgi-bin/search.pl".

Parametr Location określa miejsce, do którego zostaną załadowane zmienne. Za jego pomocą możesz umieścić zmienne w filmie na określonym poziomie lub na wskazanej listwie czasowej. Jeśli chcesz, aby zmienne były dostępne na głównej listwie czasowej, użyj _root lub _level0. Możesz także określić docelowy klip filmowy, używając relatywnej lub absolutnej ścieżki adresowej. Aby załadować zmienne do aktualnego klipu filmowego (wywołującego akcję loadVariable), użyj obiektu docelowego this.

Ostatnim parametrem jest Variables, przy użyciu którego możesz określić, czy wysyłasz, czy ładujesz (czyli pobierasz) zmienne. Jeśli chcesz załadować zmienne ze stałego źródła, jakim jest plik tekstowy, powinieneś wybrać opcję Don't Send. Jeśli posyłasz zapytanie do bazy danych, musisz wybrać albo opcję GET, albo POST. Pamiętaj, że użycie loadVariables z opcją GET lub POST oznacza wysłanie zmiennych zadeklarowanych dla aktywnej listwy czasowej pod określony adres URL, który następnie prześle pary nazwa-wartość z powrotem do filmu Flasha.

Pary nazwa-wartość kodowane są w standardowym formacie URL. Jeśli chcesz je zakodować w pliku tekstowym (lub bazie danych), musisz użyć następującego formatu:

zmienna=wartość&zmienna=wartość...

Po prostu w tekście zakodowanym w formacie URL pary nazwa-wartość połączone są znakiem &. Aby połączyć kilka części wartości jednej zmiennej, użyj znaku plusa (+), na przykład:

dane1=Jan+Kowalski&dane2=Beata+Mazurkiewicz

Przesyłanie zmiennych do adresów URL

Możesz także przesyłać zmienne do adresów URL za pomocą akcji getURL. Wszystkie zmienne zadeklarowane na aktywnej listwie czasowej zostaną wysłane, jeśli parametrem akcji getURL będzie metoda wysyłająca zmienne (GET lub POST). Pamiętaj, że polecenie getURL używane jest tylko do wysyłania zmiennych poza film Flasha — nie powoduje pobierania żadnych par nazwa-wartość. Jeśli użyjesz akcji getURL na listwie czasowej klipu filmowego w następujący sposób:

imie = "Robert";

getURL(/cgi-bin/gorm.cgi", "_blank", "GET");

to film wyśle następujące „zapytanie” do serwera:

http://www.serwer.com/cgi-bin/form.cgi?imie=Robert;

Wynik wykonania skryptu form.cgi zostanie wyświetlony w nowym oknie przeglądarki ("_blank").

Deklarowanie zmiennych w HTML

Możesz także przesyłać zmienne do filmów Flasha w znacznikach <EMBED> oraz <OBJECT>, które powodują odtworzenie filmu w przeglądarce. Parametr SRC znacznika <EMBED> lub znacznik PARAM NAME=movie istniejący wewnątrz znaczników <OBJECT> pozwala na dodawanie par nazwa-wartość na końcu nazwy filmu Flasha po znaku zapytania (?).

<OBJECT...>

<PARAM NAME=movie VALUE="flash.swf?imie=Robert">

<EMBED SRC="flash.swf?imie=Robert">

Odsyłacz! Wysyłanie i pobieranie danych omawiamy dokładnie w rozdziale 24., „Wyprowadzanie i pobieranie danych we Flashu”

Tworzenie wyrażeń w języku ActionScript

Wyrażenie możesz tworzyć, wpisując je ręcznie w odpowiednie pola parametrów instrukcji ActionScript lub przeciągając je z przybornika akcji w edytorze skryptów. Flash 5 nie posiada kreatorów, które automatycznie tworzyłyby wyrażenia w skryptach. Przybornik akcji zawiera jednak wszystkie operatory i funkcje dostępne we Flashu 5.

Operatory

Operatory używane są do wykonywania połączeń, obliczeń matematycznych i porównywania wartości.

Operatory ogólne i matematyczne

Te operatory używane są w podstawowych operacjach matematycznych, czyli dodawaniu, odejmowaniu, mnożeniu i dzieleniu. Używasz ich także do porównywania wartości, na przykład operatorów > lub <.

if (wynik > 1)

imie = "Robert";

_root["nazwa_" + i] = nowaNazwa;

Operatory tekstowe

Te operatory z Flasha 4 używane są do deklarowania, łączenia lub porównywania ciągów znaków z innymi wyrażeniami lub ciągami znaków. Jeśli chcesz użyć dwóch zmiennych do utworzenia nowej zmiennej, użyj operatorów na ciągach znaków.

set ("imieiNazwisko", "imię" & " " & "nazwisko");

Operatory logiczne

Te operatory łączą wyrażenia, aby tworzyć warunki. Omawiamy to w sekcji „Sprawdzanie warunków: akcje If...else” w dalszej części tego rozdziału.

// Składnia z Flasha 5

if (wynik > 1 && nowyWynik < 10){

// zrób coś...

}

//Składnia z Flasha 4

if (wynik > number("1" AND nowyWynik < number("10")){

// zrób coś...

}

W tabeli 21.1 znajdziesz opis operatorów języka ActionScript wraz z podaniem ich zapisu we Flashu 4 oraz 5.

Tabela 21.1. Operatory języka ActionScript

Flash 5	Flash 4	Opis
+	+	Dodaje dwie wartości lub łączy ciągi znaków we Flashu 5
-	-	Odejmuje dwie wartości
*	*	Mnoży dwie wartości
/	/	Dzieli dwie wartości
=	=	Równość; we Flashu 5 używany do przypisywania wartości do zmiennych, właściwości, metod, itd.; we Flashu 4 może być używany do porównywania
==	=	Równość; używana do porównywania w warunkach (wyrażeniach logicznych)
!=	<>	Brak równości
<	<	Mniejsze od
>	>	Większe od
<=	<=	Mniejsze lub równe
>=	>=	Większe lub równe
()	()	Łączenie wyrażeń, na przykład x = (x+y) * 3;
""	""	Oznacza, że wartość zawarta w cudzysłowach ma być traktowana jako ciąg znaków, a nie wyrażenie
==	eq	Jest równe; na przykład if ( imie == "Daniel"){ lub if (imie eq "Daniel"){
!=	ne	Nie jest równe
<	lt	Przed według alfabetu; jeśli porównywane ciągi znaków zawierają więcej niż jeden znak, wtedy pierwszy znak określa położenie w alfabecie
>	gt	Po według alfabetu
<=	le	Przed lub taki sam według alfabetu
>=	ge	Po lub taki sam według alfabetu
+	add	Łączy dwa ciągi znaków lub dodaje ciąg znaków do zmiennej
&&	and	Iloczyn logiczny; w wyniku da prawdę, jeśli obydwa warunki z nim związane będą prawdziwe
||	or	Suma logiczna; w wyniku da prawdę, jeśli przynajmniej jeden z warunków z nim związany będzie prawdziwy
!	not	Negacja logiczna; odwraca wartość warunku (z prawdy na fałsz i na odwrót)

Sprawdzanie warunków: akcje If...else

Warunki to fundament logiki. Aby utworzyć „inteligentną” maszynę (lub program), musimy opracować mechanizm sprawdzający określone warunki. Mechanizm ten (nazywany wyrażeniami warunkowymi) działa na dosyć prostych zasadach. Pamiętasz może testy prawda-fałsz, które wypełniałeś w szkole? Instrukcja if...else działa na podobnej zasadzie: gdy warunek będzie prawdziwy, wykonany zostanie podany zestaw akcji. Jeśli będzie fałszywy, wtedy akcje te zostają pominięte i skrypt przechodzi do następnego warunku lub akcji.

Możesz używać instrukcji if, po których nie będzie znajdowała się instrukcja else (lub then). Wtedy, jeśli warunek będzie fałszywy, akcje zagnieżdżone w instrukcji zostaną po prostu pominięte. Instrukcja else używana jest po to, aby umożliwić wykonanie pewnych akcji, gdy warunek nie będzie prawdziwy. Instrukcja else if powoduje sprawdzenie warunku, kiedy poprzedni warunek (zawarty w if lub else if) okazał się fałszywy. Przyjrzyj się poniższym przykładom, aby zrozumieć o co chodzi.

• Pojedynczy warunek if: Kod wewnątrz nawiasów klamrowych jest ignorowany, jeśli warunek jest fałszywy.

if (jeśli warunek jest prawdziwy){

wtedy wykonywany jest ten kod

}

• Struktura warunkowa if…else if…else: Jeśli pierwszy warunek jest prawdziwy, wtedy wykonywany jest kod znajdujący się zaraz za pierwszym warunkiem, a następne instrukcje else if oraz else są pomijane. Jeśli jednak pierwszy warunek nie jest prawdziwy, wtedy sprawdzany jest drugi. Gdy ten okaże się prawdziwy, wykonywany jest przypisany mu kod, a wszystkie instrukcje z tej struktury decyzyjnej są zignorowane. Jeśli wszystkie warunki okażą się fałszywe, wtedy jest wykonywany kod zawarty wewnątrz nawiasów klamrowych przypisany do ostatniej instrukcji else.

if (jeśli pierwszy warunek jest prawdziwy){

wtedy wykonywane jest ten kod

} else if (jeśli drugi warunek jest prawdziwy){

wtedy wykonywany jest ten kod

} else {

w pozostałych przypadkach wykonywany jest ten kod

}

Często zdarza się, że używasz struktury decyzyjnej if…else do przypisania pewnej wartości jednej zmiennej na podstawie innej zmiennej, na przykład:

if (x == 1){

imie = "Marysia";

} else if (x == 2){

imie = "Jan";

} else {

imie = "brak";

}

Ostrzeżenie! Nie używaj pojedynczego znaku = w warunkach, ponieważ spowoduje to przypisanie wartości zmiennej. Na przykład, jeśli napiszesz if (x = 1){}, to w rzeczywistości Flash wpisze do zmiennej x jedynkę zamiast sprawdzić, czy wartością zmiennej x jest 1.

W trybie Normal Mode możesz dodać instrukcję if wybierając akcji if z podręcznego menu wywoływanego przyciskiem z plusem (+) w lewym górnym narożniku edytora skryptów lub z przybornika akcji. W polu tekstowym Condition wpisz warunek, którego spełnienie będzie powodowało wykonanie akcji zagnieżdżonych w instrukcji if. Pamiętaj, że w wyrażeniu ciągi znaków muszą być zawarte w cudzysłowach, a operator == użyty do porównywania tekstów lub liczb. Aby dodać klauzulę else, zaznacz pierwszą linię instrukcji if i kliknij dwukrotnie akcję else lub else if w przyborniku akcji.

Możesz połączyć dwa warunki, używając operatorów logicznych and (&&), or (||) lub not (!), na przykład:

if (wynik > 1 && nowyWynik < 10){

gotoAndPlay ("koniec");

} else if (wynik > 1 && !(nowyWynik < 10)){

gotoAndPlay ("jeszcze_raz");

}

Pętle

Pętla zawiera instrukcję lub zestaw instrukcji, które są powtarzane tak długo, jak długo jest spełniony warunek pętli. Podstawowa pętla składa się z trzech części: warunku pętli, zestawu powtarzanych instrukcji oraz aktualizacji licznika (choć nie zawsze). W języku ActionScript Flasha 5 istnieją cztery rodzaje pętli:

• while

• do...while

• for

• for...in

Każdej z tych pętli używa się w różnych sytuacjach. W zależności od akcji, które chcesz powtarzać, wybierasz najbardziej odpowiedni rodzaj pętli.

while(warunek){ akcje }

Pętla ta we Flashu 4 nazywała się LoopWhile. W niej najpierw obliczany jest warunek i tylko, jeśli jest prawdziwy, zostaną wykonane akcje zawarte w nawiasach klamrowych. Akcje zawarte w pętli będą powtarzane w nieskończoność (przeważnie powodując błąd), jeśli nie zaktualizujesz elementu odpowiedzialnego za wyjście z pętli — zwykle jest to licznik iteracji. Licznik iteracji zwiększa (lub zmniejsza) swoją wartość, sprawdzaną w warunku pętli while. Poniżej znajduje się dokładnie opisana typowa pętla. Zauważ, że zmienna używana w warunku jest przeważnie deklarowana tuż przed wykonaniem akcji while.

Inicjowanie licznika	licznik = 1;
Warunek	while (licznik <= 10){
Powtarzane instrukcje	_root["klip_"+licznik]._xscale = 100/licznik;
Aktualizacja licznika	licznik = licznik + 1;
Koniec pętli	}

W powyższym przykładzie zmienna o nazwie licznik początkowo ma wartość 1. W pierwszej iteracji pętli while wartość licznika jest mniejsza od 10. Dlatego też akcje zawarte w nawiasach klamrowych zostaną wykonane. Pierwsza akcja z pętli używa zmiennej licznik do ustalenia nazwy klonu klipu filmowego, „klip_1”, i zmiany właściwości dotyczącej skali na osi X na 100/1 (co jest równe 100). Następnie zmienna licznik jest zwiększana o 1, czyli jej nową wartością jest 2. Ponownie sprawdzany jest warunek pętli.

W drugiej iteracji pętli while wartość zmiennej licznik wynosi 2, czyli nadal jest mniejsza od 10. Z tego też powodu zostaną wykonane akcje zawarte w nawiasach klamrowych. Tym razem jednak pierwsza akcja z pętli dotyczyć będzie właściwości skali klonu o nazwie „klip_2” i spowoduje ustalenie jej wartości na 50 (100/2 = 50). Zmienna licznik ponownie jest zwiększana o 1, czyli teraz jest już równa 3. Ponownie liczony jest warunek pętli.

Warunek while będzie powodował wykonywanie zagnieżdżonych akcji, dopóki wartość zmiennej licznik nie będzie większa od 10. Dzięki tej pętli klony od „klip_1” do „klip_10” będą coraz mniejsze na osi X.

do { akcje } while(warunek);

Ten typ pętli jest bardzo podobny do wcześniej omówionej pętli while, ale posiada jedną ważną różnicę: akcje zawarte wewnątrz nawiasów klamrowych zostaną wykonane przynajmniej raz. W tej pętli warunek pętli sprawdzany jest dopiero po wykonaniu wszystkich akcji. Jeśli będzie prawdziwy, wtedy akcje zagnieżdżone w pętli do {} zostaną wykonane ponownie. Jeśli będzie fałszywy, pętla nie będzie już wykonywana.

Inicjowanie zmiennej	licznik = 1;
Początek pętli	do {
Powtarzane instrukcje	_root["klip_"+licznik]._xscale = 100/licznik;
Aktualizacja licznika	licznik = licznik + 1;
Warunek pętli	} while (licznik <= 1)

W powyższym przykładzie akcje wewnątrz pętli do {} zostaną wykonane automatycznie bez sprawdzania jakichkolwiek warunków. Dzięki temu skala dla osi X klonu „klip_1” zostanie ustawiona na 100, a wartość zmiennej licznik zwiększona o 1, czyli teraz będzie równa 2. Po wykonaniu tych akcji zostanie sprawdzony warunek. Ponieważ wartość zmiennej licznik nie jest mniejsza od 1 (ani równa tej wartości), pętla nie zostanie powtórzona.

for (inicjalizacja; warunek; aktualizacja){ akcje }

Pętla for jest „skondensowaną” wersją pętli while. Zamiast przypisywać, sprawdzać i aktualizować zmienną za pomocą trzech różnych akcji, pętla for pozwala na zdefiniowanie, sprawdzanie i aktualizację zmiennej zliczającej przejścia pętli w jednym miejscu.

Deklarowanie zmiennej, warunek oraz aktualizacja	for(i=1; i <= 10; i++){
Powtarzane instrukcje	_root["klip_"+i]._xscale = 100/i;
Koniec pętli	}

Ta pętla for robi dokładnie to samo, co pętla while używana wcześniej. Na początku pętli zmiennej i nadawana jest wartość początkowa, w tym wypadku 1. Następnie podawany jest warunek, dla którego będzie wykonywana pętla, i <= 10. Chcemy powtarzać zagnieżdżone akcje, dopóki wartość parametru nie przekroczy 10. Trzeci parametr pętli for, i++, powoduje zwiększenie zmiennej i o 1 po każdym wykonaniu pętli. Pamiętaj, że możesz używać nie tylko operatorów ++ (aby zwiększać o 1) lub -- (aby zmniejszać o 1) do modyfikacji zmiennej, ale także wyrażeń, na przykład i = i*2.

for (zmiennaZastępcza in obiekt){ akcje }

Ostatni typ pętli, for...in, posiada najbardziej skomplikowany mechanizm. W tej pętli nie występuje warunek. Pętla działa na zasadzie wyszukiwania i zamieniania słów kluczowych. Deklarowana jest zmiennaZastępcza, która zastępuje właściwość obiektu lub indeks tablicy. Dla każdego wystąpienia zmiennej zastępczej wykonywane są akcje zawarte w nawiasach klamrowych. Pętla for...in może być używana tylko dla obiektów oraz tablic, a nawet wtedy nie wszystkie właściwości mogą zostać wyliczone.

Zmienna zastępcza oraz obiekt	for(nazwa in _root){
Powtarzane instrukcje	_root[nazwa]._xscale = 50;
Koniec pętli	}

W powyższym kodzie słowo nazwa zawiera nazwy obiektów na głównej listwie czasowej _root. W tym wypadku chcemy wszystkim klonom klipów filmowych z głównej listwy czasowej zmienić wartość skali dla osi X na 50%. Nie musimy określać ścieżki adresowej dla każdego klonu — pętla for...in wyszuka wszystkie klony na głównej listwie czasowej, wprowadzi zmiany i wyjdzie z pętli.

Chociaż może się to wydawać nieco dziwaczne, to jednak prawie zawsze jest bardziej pożyteczne niż sobie możesz wyobrazić. Czy musiałeś kiedykolwiek rozpocząć odtwarzanie dużej liczby klonów klipów filmowych w tym samym czasie? We Flashu 4 musiałbyś użyć kilku akcji tellTarget(){} dla każdego klonu z osobna. Mógłbyś także użyć pętli while do skrócenia kodu, ale musiałbyś wszystkie klony bardzo podobnie nazwać. Kod mógłby być następujący:

licznik = 1;

while(licznik <= 10){

sciezka = eval("_root.klip_" + licznik);

tellTarget(sciezka){

play();

}

licznik++;

}

Powyższy kod spowoduje rozpoczęcie odtwarzania klipów od „klip_1” do „klip_10”. A co, jeśli nie znasz (lub nie chcesz znać) wszystkich ścieżek do różnie nazwanych klonów klipów filmowych? Na przykład, jeśli masz klon klipu filmowego o nazwie nestAnim, w którym znajdują się klony klipów o różnych nazwach (na przykład squareAnim, triangleAnim, circleAnim), czy będziesz musiał wpisywać ścieżki każdego z nich? We Flashu 5 pętla for...in pozwala sterować wszystkimi klonami klipów filmowych naraz:

for(nazwa in nestAnim){

nestAnim[nazwa].play();

}

Za pomocą tylko trzech linii kodu wszystkie klony klipów filmowych wewnątrz klonu nestAnim zaczną być odtwarzane. Jak? Pamiętaj, że zmienna zastępcza nazwa jest miejscem, w którym przechowuje się właściwości lub elementy obiektu nestAnim. Pętla for...in znajdzie wszystkie klony wewnątrz nestAnim. Zapamiętaj też, że nazwa zmiennej zastępczej nie ma żadnego znaczenia. Moglibyśmy użyć zmiennej mojeImie i też by wszystko działało. Pomyśl o zmiennej zastępczej jak o znaku wieloznaczności przy szukaniu lub wyświetlaniu plików w systemach MS-DOS lub UNIX:

nestAnim[*].play();

Chociaż powyższa składnia jest nieprawidłowa, pokazuje zasadę działania pętli for...in. Wszystko, co na listwie czasowej nestAnim może być odtworzone, zostanie odtworzone.

Na CD-ROM-ie! Zajrzyj do plików mcPlay.fla oraz forInLoop.fla znajdujących się na CD-ROM-ie w katalogu ch21.

Akcja break

Akcja break nie jest kolejnym rodzajem pętli — pozwala szybko opuścić pętlę, gdy zostaną spełnione jakieś dodatkowe warunki. Przypuśćmy, że chcesz utworzyć pętlę zawierającą akcję, która ukrywa klipy od „klip_1” do „klip_10” (łącznie jest 20 klonów klipów filmowych), ale chcesz mieć zmienną sterującą ogólną liczbą iteracji pętli, w poniższym kodzie nazwaną gornaGranica. Może ona wpływać na zachowanie się innych części filmu, ale nie chcemy, aby powodowała ukrycie więcej niż 10 klipów. Możemy użyć akcji break zagnieżdżonej w warunku if, aby do tego nie dopuścić:

licznik = 1;

while(licznik <=gornaGranica){

if(licznik > 10){

break;

}

_root["klip_" + licznik]._visible = false;

licznik++;

}

Instrukcje break powinny być najczęściej używane do wyłapywania błędów (w czasie usuwania błędów z filmu) lub, gdy trzeba natychmiast opuścić pętlę.

Akcja continue

Podobnie jak break akcja continue powoduje zakończenie wykonywania akcji wewnątrz pętli. Nie powoduje jednak wyjścia z pętli, ale wymusza rozpoczęcie następnej iteracji pętli i sprawdzenie warunku. Przeważnie akcję continue zagnieżdżasz wewnątrz warunku if — w przeciwnym wypadku zawsze powodowałaby przerwanie wykonywania akcji zawartych w pętli. Jeśli dla jakiejś wartości nie będziesz chciał wykonywać akcji znajdujących się w pętli, możesz użyć akcji continue, która spowoduje „pominięcie” tej wartości. W poniższym skrypcie ukryjemy klipy od „klip_1” do „klip_10”, ale pominiemy „klip_5”:

licznik = 1;

while (licznik <= 10){

if(licznik == 5){

licznik++;

continue;

}

_root["klip_" + licznik++]._visible = false;

}

Dodawanie pętli do skryptu

Aby utworzyć pętlę w skrypcie, dodaj jeden z typów pętli w edytorze skryptów, używając przycisku z plusem (+) w lewym górnym narożniku edytora (lub wybierając odpowiednią akcję z przybornika akcji). W polu Condition wpisz warunek powtórzenia pętli. Pamiętaj, aby upewnić się, że warunek pętli kiedyś stanie się niespełniony; najczęściej stosuje się licznik, który jest aktualizowany po każdym przejściu pętli (nie możesz zapomnieć go dodać na końcu pętli). Jeśli zapomnisz o aktualizacji licznika, utworzysz pętle nieskończoną. W takim wypadku po chwili Flash zapyta, czy chcesz przerwać wykonywanie tego skryptu.

Pętle we Flashu nie nadają się do wykonywania procesów w tle, które sprawdzają warunki zachodzące w innej części filmu. W czasie wykonywania pętli ekran nie jest uaktualniany, a zdarzenia myszy przechwytywane, więc większość operacji Flasha nie jest wykonywana w trakcie działania pętli. Pętle bardzo dobrze nadają się do operacji przeszukiwania, na przykład ciągów znaków (dzięki nim możesz sprawdzić każdą literę tekstu w poszukiwaniu znaku @) oraz dynamicznego nadawania wartości wielu zmiennym.

Pętle, które wykonują powtarzające się akcje wpływające na namacalne obiekty w filmie, powinny być implementowane nie jako pętle pojedynczych skryptów, lecz jako zapętlone ujęcia na listwie czasowej. Aby utworzyć stale wykonywaną operację, wykreuj klip filmowy zawierający dwa ujęcia. W pierwszym wywołuj podprogram lub umieść instrukcje, które chcesz wykonywać; w drugim ujęciu umieść akcję gotoAndPlay(1);, która spowoduje powrót do pierwszego ujęcia. Możesz także skorzystać z nowego detektora onClipEvent(enterFrame) Flasha 5, aby ciągle powtarzać te same akcje.

Odsyłacz! Detektor zdarzeń onClipEvent omawiany jest w rozdziale 19., „Sterowanie klipami filmowymi.”

Właściwości

Właściwości to inaczej cechy (na przykład szerokość i wysokość) filmów oraz klipów filmowych, które można odczytywać lub zmieniać. Możesz używać zmiennych do przechowywania aktualnej wartości właściwości określonego klipu filmowego, na przykład:

xPoz = _root._xmouse;

która przechowuje w zmiennej xPoz aktualne położenie kursora myszy na osi X (w układzie współrzędnych głównej listwy czasowej).

Odsyłacz! W rozdziale 19., „Sterowanie klipami filmowymi”, znajdziesz szczegółowe tabele dotyczące właściwości klipów filmowych (oraz filmów) wraz z ich omówieniem.

Wbudowane funkcje

ActionScript Flasha 5 zawiera pewną liczbę wbudowanych poleceń nazywanych funkcjami. Między innymi są to funkcje: getTimer, getVersion, parseFloat, parseInt, int, string, substring, escape oraz unescape. W tym rozdziale (ani w całej książce) nie jesteśmy w stanie dokładnie omówić użycia każdej nowej funkcji ani elementu ActonScript Flasha 5. Jednak omówienia większości funkcji rozsiane są po tej części książki.

Tworzenie i wywoływanie podprogramów

Chociaż raz są nazywane funkcjami, a innym razem podprogramami, używane są w większości języków programowania jako samowystarczalne moduły, które mogą być wykonywane z każdego miejsca programu. W języku ActionScript Flasha 5 definiujesz funkcje za pomocą nowej akcji function. Możesz je tworzyć na każdej listwie czasowej i, podobnie jak w przypadku klonów klipów filmowych, do ich wywoływania musisz użyć absolutnych lub relatywnych ścieżek adresowych. Na przykład, jeśli posiadasz następującą funkcję na listwie czasowej klipu filmowego o nazwie Funkcje:

function utworzKopie (cel, ilosc){

for(i=1;i<=ilosc;i++){

_root[cel].duplicateMovieClip(cel+"_"+i, i);

}

}

to, będąc na innej listwie czasowej, możesz ją wywołać poleceniem:

_root.Funkcje.utworzKopie("klip",5);

Wykonanie tej linii spowoduje utworzenie pięciu kopii klonu klipu filmowego klon o nazwach klip_1, klip_2, klip_3, klip_4 oraz klip_5.

Szare tło!

Podprogramy we Flashu 4

Aby tworzyć podprogramy w filmach kompatybilnych z Flashem 4, musisz najpierw przypisać skrypt do ujęcia kluczowego. Następnie opatrz to ujęcie etykietą. To wystarczy do użycia tego skryptu jako podprogramu. Aby wywołać ten podprogram z innego ujęcia lub przycisku, po prostu dodaj akcję Call, a następnie wpisz nazwę podprogramu w pole Frame używając następującej składni: zacznij od ścieżki adresowej do listwy czasowej, na której znajduje się ujecie, następnie dodaj dwukropek (:), a potem nazwę podprogramu (na przykład, Call ("/kosta:losowanie)). Po wywołaniu podprogramu wszystkie akcje znajdujące się w podanym ujęciu zostaną wykonane. Podprogram musi się znajdować na listwie czasowej filmu (w ujęciu lub osadzonym klonie klipu filmowego).

Podprogramy we Flashu 4 nie przyjmują parametrów, ani nie zwracają żadnych wartości. Aby symulować przekazywanie i otrzymywanie wartości zmiennych, określ wartości odpowiednich zmiennych w skrypcie, który wywołuje podprogram (oczywiście przed wywołaniem samego podprogramu), a wewnątrz niego ustal wartości zmiennych, które mają być zwrócone i odczytane przez inne skrypty.

Koniec szarego tła!

Odsyłacz! W następnym rozdziale dokładniej omawiamy zagadnienia związane z funkcjami.

Procedura logowania z użyciem zmiennych

W tej sekcji pokażemy, jak używać zmiennych do tworzenia interaktywnych formularzy we Flashu, które przyjmują lub odrzucają wpisane dane. Utworzysz dwa wejściowe pola tekstowe, w których odwiedzający Twoją witrynę będą musieli wpisać nazwę użytkownika oraz hasło. Za pomocą skryptu będziemy porównywać wpisane dane z predefiniowanymi wartościami zmiennych.

Ostrzeżenie! Nie używaj tego przykładu do zabezpieczania danych na stronach WWW. Możesz użyć tej procedury logowania w jakiejś grze lub zmodyfikować tak, aby można jej było użyć w quizie. Informacje dotyczące logowania nie są zabezpieczane w ramach filmu w pliku .SWF.

1. Utwórz nowy film Flasha. Ustaw prędkość odtwarzania klatek na 20. Zachowaj domyślne wymiary obrazu. Użyj koloru tła, jaki Ci odpowiada.

2. Utwórz dwa pola tekstowe na jednej warstwie nazwanej Text Fields. Niech każde pole będzie dostatecznie szerokie, aby pomieścić imię lub hasło. Aby wszystko było dobrze widoczne, użyj stosunkowo dużego rozmiaru czcionki, około 36 punktów. Upewnij się, że tekst nie będzie pisany na biało.

3. Aby ustawić właściwości pól tekstowych, zaznacz pole tekstowe (użyj narzędzia Arrow Tool) i otwórz panel Text Options, pokazany na rysunku 21.2. Z górnej listy wybierz opcję Input Text dla każdego z pól tekstowych. Górne pole powiąż ze zmienną userEnter, zaś dolne ze zmienną passwordEnter. Ponadto dla drugiego pola tekstowego wybierz z drugiej listy opcję Password oraz ogranicz długość wpisywanego tekstu do ośmiu znaków.

Rysunek 21.2. Zmienna passwordEnter powiązana z wejściowym polem tekstowym z załączoną opcją Password i ograniczeniem liczby wpisywanych znaków do 8

4. Na osobnej warstwie głównej listwy czasowej umieść teksty opisujące obydwa pola tekstowe, (rysunek 21.3). Na przykład dodaj dwa napisy „Login:” oraz „Password:”. Umieść je po lewej stronie pól tekstowych. Do utworzenia napisów użyj statycznych pól tekstowych.

Rysunek 21.3. Mamy teraz cztery pola z napisami: dwa pola statyczne po lewej oraz dwa pola wejściowe po prawej. Statyczne pola tekstowe nie mogą być modyfikowane ani odczytywane przez skrypty

5. Utwórz nowy symbol klipu filmowego (klawisze Ctrl+F8 lub Command+F8) o nazwie errorMessage, który będzie wyświetlał komunikaty o błędzie, na przykład NIEPRAWIDŁOWE lub BŁĄD PRZY LOGOWANIU. Zmień nazwę pierwszej warstwy na actions. Na tej warstwie w pierwszym ujęciu powinieneś umieścić akcję stop().

6. Utwórz nową warstwę i nazwij ją labels. W 5. klatce tej warstwy utwórz ujecie kluczowe i za pomocą panelu Frame opatrz je etykietą start.

7. Następnie utwórz nową warstwę, nazwij ją artwork i przenieś poniżej warstwy actions. Na tej warstwie utwórz automatyczną animację ze stopniowo pojawiającym się, a następnie zanikającym komunikatem (możesz też zastosować efekt stopniowego powiększenia i pomniejszenia). Animację rozpocznij od klatki numer 5 warstwy artwork, poniżej etykiety start znajdującej się na warstwie actions. Komunikat musi być symbolem graficznym, abyś mógł opracować animację polegającą na jego pojawieniu się i zniknięciu. Dodaj tyle ujęć kluczowych, aby komunikat powoli pojawił się i po jakimś czasie zniknął. W ostatniej klatce animacji w ujęciu warstwy actions powinna się znaleźć akcja gotoAndStop(1);. Gdy skończysz, listwa czasowa klipu filmowego powinna wyglądać tak, jak na rysunku 21.4.

Rysunek 21.4. Symbol klipu filmowego errorMessage zawiera puste pierwsze ujęcie oraz animację rozpoczynającą się od etykiety start. Animacja zostanie odtworzona tylko wtedy, gdy użytkownik wpisze nieprawidłowe hasło

8. Na głównej listwie czasowej filmu (Scene 1) utwórz nową warstwę o nazwie errorMessage. Przeciągnij symbol klipu filmowego z biblioteki na obraz. Umieść go poniżej pól tekstowych. Zaznacz klon klipu filmowego i otwórz panel Instance. Klon nazwij errorMessage.

9. Utwórz nową warstwę na głównej listwie czasowej, nazwij ją button i umieść na niej klon przycisku. Możesz zrobić własny przycisk lub przeciągnąć jakiś z biblioteki przycisków (Window/Common Libraries/Buttons). Umieść go poniżej pól tekstowych po prawej stronie. Zaznacz klon przycisku i otwórz edytor skryptów. Dodaj do przycisku poniższy skrypt:

on(release){

if(userEnter == "Sandra" && passwordEnter == "colorall"){

gotoAndStop("success");

} else {

_root.errorMessage.gotoAndPlay("start");

}

}

Zamiast słów „Sandra” i „colorall”, które są odpowiednio nazwą użytkownika i hasłem dostępu, możesz wpisać w powyższym skrypcie dowolną inną nazwę użytkownika i hasło. Program porówna wartości zmiennych userEnter i passwordEnter z wpisanymi wartościami.

10. Na głównej listwie czasowej filmu utwórz nową warstwę, nazwij ją actions i umieść powyżej wszystkich innych warstw. W pierwszym ujęciu dodaj akcję stop().

11. Utwórz jeszcze jedną warstwę i nazwij ją labels. Pierwsze ujęcie tej warstwy opatrz etykietą start. Dodaj ujęcie kluczowe w klatce numer 2 i oznacz je etykietą success. Upewnij się, że na wszystkich pozostałych warstwach w 2. klatce nie ma żadnych ujęć kluczowych.

12. Dodaj nową warstwę o nazwie success i umieść w niej tekst lub grafikę, która będzie się pojawiała po prawidłowym zalogowaniu. Powinna ukazywać się tylko w 2. ujęciu, wiec jeśli to konieczne, przenieś jej początkowe ujęcie kluczowe do tejże klatki. Gdy skończysz ten krok, scena oraz główna listwa czasowa powinny wyglądać, jak na rysunku 21.5.

Rysunek 21.5. Główna listwa czasowa powinna zawierać trzy „stany”: logowanie, komunikat o błędzie oraz stronę pojawiającą się po udanym zalogowaniu

13. Przetestuj teraz film, wybierając polecenie Control/Test Movie.

W większości takich formularzy po wpisaniu danych należy nacisnąć klawisz Enter. Jednak ten klawisz ma przypisaną funkcję w środowisku testowym, więc sprawdzanie naciśnięcia tego klawisza dodaj do klonu przycisku dopiero po przetestowaniu filmu.

Poprawianie błędów w kodzie

Gdy zaczniesz w swoich filmach umieszczać rozbudowane skrypty, z pewnością natkniesz się na jakiś błąd lub coś z niewiadomych powodów nie będzie działało tak, jak Ci się wydaje, że powinno. Błędów w kodzie możesz poszukiwać na trzy sposoby.

• Panel Debugger — w środowisku edycyjnym Flasha 5 pojawiło się nowe narzędzie umożliwiające śledzenie procesu odtwarzania filmu. Panel Debugger może zostać uaktywniony na dwa sposoby.

• Polecenie Debug Movie — polecenie Control/Debug Movie powoduje otwarcie panelu Debugger dla testowanego pliku .SWF.

• Zdalne usuwanie błędów — możesz teraz szukać błędów w filmie Flasha przy użyciu modułu odtwarzacza (lub modułu kontroli ActiveX), gdy film jest odtwarzany w przeglądarce. Musisz jednak przedsięwziąć pewne kroki, aby uaktywnić tę funkcję.

• Okno Output — jest ono automatycznie otwierane, gdy używasz polecenia Test Movie (lub Debug Movie) i program trafi w skrypcie na akcję trace lub zostanie wykryty błąd składniowy w kodzie skryptu. Błędy składniowe pojawiają się w oknie Output zaraz po zakończeniu eksportu filmu do pliku .SWF. Możesz także ręcznie aktualizować zawartość okna Output, wyświetlając w nim użyteczne informacje za pomocą poleceń List Objects oraz List Variables.

• Lista obiektów. W trybie testowym filmu użyj polecenia Debug/List Objects, aby uzyskać listę elementów aktualnie znajdujących się na obrazie, włączając w to klony klipów filmowych, przyciski, grafikę, kształty oraz teksty. Polecenie to powoduje wyświetlenie ścieżek adresowych i nazw wszystkich klonów klipów filmowych oraz załadowanych filmów. Przydaje się do sprawdzania nazw docelowych obiektów.

• Lista zmiennych. W trybie testowym filmu, użyj polecenia Debug/List Variables, aby uzyskać listę aktualnie zainicjalizowanych zmiennych, dowiedzieć się, gdzie się znajdują oraz jakie przechowują wartości. Jest to bardzo pomocne przy sprawdzaniu, jakie zmienne występują w określonym miejscu listwy czasowej lub do poznania nazwy listwy czasowej, na której są przechowywane.

• trace(wyrażenie). Umieść w skrypcie filmu akcję trace, aby wysłać tekst lub wartość jakiegoś wyrażenia do okna Output w trybie testowym. Wartość wysyłana jest po wykonaniu akcji trace w odtwarzanym filmie. Jako narzędzie służące do wyszukiwania błędów, akcja trace jest podobna do polecenia alert()języka JavaScript.

• Własne interfejsy testowe — możesz także tworzyć własne okna pomagające testowaniu wewnątrz samego filmu. W tym celu możesz na przykład użyć przeciągalnych klipów filmowych (zajrzyj do pliku propInspector.fla z rozdziału 19., „Sterowanie klipami filmowymi”). Przeważnie flashowi programiści tworzą tymczasowe pola tekstowe, które wyświetlają pewne wartości w czasie testowania filmu podczas produkcji. Umieść wszystkie tymczasowe pola tekstowe na osobnej warstwie. W czasie publikacji ostatecznej wersji z warstwy tej zrób warstwę wzorcową, by program jej nie wyeksportował.

Ostrzeżenie! Jeśli wydaje Ci się, że cały skrypt jest pomijany, możesz mieć prosty błąd składniowy w jednej z jego linii. Jeśli w jakimś skrypcie (zawartym w ujęciu, klonie przycisku lub detektorze zdarzeń OnClipEvent) zostanie znaleziony błąd składniowy, to cały skrypt jest pomijany. Po poprawieniu błędu i ponownym przetestowaniu (lub publikacji) akcje z tego skryptu znowu zaczną działać.

Panel Debugger

Po wybraniu polecenia Control/Debug Movie Flash 5 na podstawie pliku edycyjnego .FLA tworzy plik filmowy .SWF i otwiera panel Debugger. Panel ten (rysunek 21.6) umożliwia śledzenie wielu interesujących informacji w czasie odtwarzania pliku .SWF.

Rysunek 21.6. Gdy przystępujesz do poszukiwania błędów w skryptach, panel Debugger staje się bardzo pomocny

Oto opis elementów panelu Debugger.

• Pasek stanu — znajdujący się na górze panelu pasek stanu określa, gdzie znajduje się plik .SWF. Jeśli użyłeś polecenia Test Movie (lub Debug Movie) we Flashu 5, wtedy na pasku znajdzie się napis „Test Movie”. Jeśli testujesz film w przeglądarce, pasek stanu pokaże absolutną ścieżkę dostępu (lub adres URL) pliku .SWF.

• Drzewo struktury filmu — w oknie znajdującym się na górze panelu Debugger znajdziesz listę absolutnych ścieżek adresowych (ułożonych hierarchicznie) do wszystkich aktualnie odtwarzanych listew czasowych filmu Flasha, włączając w to zwykłe klony klipów filmowych, załadowane pliki .SWF (zarówno do poziomów, jak i klipów filmowych) oraz zduplikowane lub dodane klipy filmowe (utworzone za pomocą skryptów).

• Zakładka Properties — pierwsza zakładka, wyświetlana w dolnej części panelu Debugger pozwala obejrzeć wszystkie właściwości listwy czasowej zaznaczonej w drzewie struktury filmu. Możesz nawet zmienić wartość właściwości, wpisując ciąg znaków, liczbę lub wartość logiczną. Nie możesz jednak wpisać wyrażenia (na przykład x + 50), jako wartości właściwości.

• Zakładka Variables — środkowa zakładka panelu pozwala obejrzeć wszystkie zmienne listwy czasowej zaznaczonej w drzewie struktury filmu. Podobnie jak w przypadku właściwości, także tutaj możesz zmienić wartość zmiennej (obowiązują te same ograniczenia dotyczące wpisywanych danych).

• Zakładka Watch — ostatnia zakładka z dolnej części panelu pozwala śledzić określone zmienne na dowolnej listwie czasowej. Istnieją dwa sposoby dodawania zmiennych do listy:

• k --> liknięcie prawym klawiszem myszy (Ctrl+kliknięcie na Macu) nazwę zmiennej z zakładki Variables i wybranie z podręcznego menu polecenia Watch,

• kliknięcie [Author:MB] prawym klawiszem myszy (Ctrl+kliknięcie na Macu) pusty obszar listy Watch i wybranie z podręcznego menu polecenia Add.

Możesz usunąć zmienną z listy Watch, klikając ją prawym klawiszem myszy (Ctrl+kliknięcie na Macu) i wybierając z podręcznego menu polecenie Remove.

Umożliwienie zdalnego usuwania błędów

Jak już wcześniej wspomniano, możesz teraz usuwać błędy z filmów Flasha 5 (pobieranych z Internetu lub znajdujących się na lokalnym dysku), kiedy są odtwarzane w przeglądarce. Aby umożliwić takie usuwanie błędów, musisz zrobić dwie rzeczy.

1. Umożliwić śledzenie odtwarzania w ustawieniach publikacji. Otwórz okno dialogowe ustawień publikacji (File/Publish Settings) i kliknij zakładkę Flash. Zaznacz opcję Debugging Permited i wpisz hasło, jeśli umieszczasz potem ten plik na serwerze WWW. Hasło nie jest wymagane, ale zalecamy je ustalić ze względów bezpieczeństwa.

2. Zainstalować odtwarzacz filmów Flasha (wersję Debug) dla używanej przeglądarki. Instalator modułu odtwarzacza (lub modułu kontroli ActiveX) znajdziesz w katalogu Players\Debug znajdującym się w katalogu Flasha 5. Przed instalacją wersji Debug wycofaj instalację poprzedniego modułu.

Po wykonaniu tych dwóch operacji możesz wpisać adres pliku .SWF w Internecie (lub na lokalnym dysku) w oknie przeglądarki. Ewentualnie możesz użyć polecenia podglądu publikacji (File/Publish Preview/HTML), aby załadować plik .SWF (oraz plik HTML) do domyślnej przeglądarki. Po załadowaniu filmu kliknij prawym klawiszem myszy (Ctrl+kliknięcie na Macu) obraz filmu i z rozwijanego menu wybierz polecenie Debugger. Odtwarzacz załaduje aplikację Flash 5 i zapyta o hasło, jakie wprowadziłeś w zakładce Flash okna dialogowego Publish Settings. Jeśli pole hasła pozostawiłeś puste, po prostu kliknij przycisk OK. Otworzy się panel Debugger, dzięki czemu będziesz miał dostęp do informacji o listwach czasowych filmu, właściwościach oraz zmiennych!

Ostrzeżenie! Musisz mieć zainstalowaną aplikację Flash 5 na każdym komputerze, na którym chcesz śledzić wykonywanie filmów Flasha. Panel Debugger może zostać wyświetlony tylko w środowisku edycyjnym Flasha 5.

Pamiętaj, by wyłączyć możliwość śledzenia (lub przynajmniej ustal hasło), zanim opublikujesz film i umieścisz go na ogólnodostępnym serwerze WWW. W przeciwnym wypadku inni także będą mieli dostęp do „wnętrza” filmu.

Podsumowanie

• Zanim zaczniesz dodawać skomplikowaną interaktywność do filmu Flasha, musisz zaplanować film, opisując jego działanie w potocznym języku.

• Kiedy wiesz już dobrze, co ma robić film, możesz zaplanować dokładny algorytm jego działania. Na tej podstawie utwórz skrypty zrozumiałe dla Flasha.

• Kod ActionScript dodajesz do filmów za pomocą edytora skryptów. Działa on w dwóch trybach: Normal Mode oraz Expert Mode. Jeśli chcesz widzieć opcje i wszelkie parametry akcji, użyj trybu Normal Mode. Jeśli chcesz mieć większą swobodę w pisaniu kodu, użyj trybu Expert Mode.

• Zmienne są elementami, które pozwalają na przechowywanie wartości właściwości, ciągów znaków, ścieżek lub wyrażeń. Dzięki nim możesz zmniejszyć ilość wpisywanego kodu oraz uprościć proces przetwarzania informacji.

• Zmienne mogą być deklarowane w skrypcie, wejściowych lub dynamicznych polach tekstowych, mogą być ładowanie z zewnętrznego źródła danych (na przykład skryptu CGI lub pliku tekstowego) lub definiowane w postaci zapytań HTML.

• Wyrażenia służą do wykonywania operacji matematycznych, przetwarzania ciągów znaków oraz istniejących obiektów (takich jak zmienne czy właściwości).

• Możesz użyć akcji if…else if…else do dodania inteligencji do interaktywnych skryptów. Akcje te sprawdzają warunek i wykonują określone akcje, jeśli jest on spełniony.

• Pętle umożliwiają wielokrotne wykonywanie tych samych akcji, dopóki określony warunek pętli jest prawdziwy.

• Możesz śledzić wykonywanie kodu ActionScript w nowym panelu Debugger, oknie Output lub dzięki własnym interfejsom (na przykład, tymczasowym polom tekstowym, które wyświetlają określone dane).

Lecz możesz to robić (przyp. red.).

Niestety to nie koniec efektów ubocznych takiej pomyłki. Jeśli porównywałbyś x z liczbą różną od 0 i zamiast == napisałbyś =, to poza wpisaniem tej liczby do x wykonałyby się instrukcje zagnieżdżone w warunku if. Jeśli tą liczbą byłoby 0, wtedy instrukcje nie zostałyby wykonane (przyp. tłum.).

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

2 H:\Książki\!Kudlaty\Flash 5. Biblia\7 do skladu\r21-06.doc

[Author ID1: at Thu Jul 26 13:04:00 2001 ][Author ID1: at Thu Jul 26 13:04:00 2001 ][Author ID1: at Thu Jul 26 13:04:00 2001 ]Strona:
[Author ID1: at Thu Jul 26 13:04:00 2001 ]DO składu> Zmiana numeracji na wypunktowanie (te punkty nie mają ze sobą nic wspólnego; nie jest też ważna ich kolejność — to jest tylko wymienianie przykładów)

[Author ID1: at Thu Jul 26 13:15:00 2001 ][Author ID1: at Thu Jul 26 13:15:00 2001 ][Author ID1: at Thu Jul 26 13:15:00 2001 ][Author ID1: at Thu Jul 26 13:15:00 2001 ]Strona:
[Author ID1: at Thu Jul 26 13:15:00 2001 ]DO składu> Zmiana numeracji na wypunktowanie — to jest wymienianie nie związanych ze sobą elementów.

[Author ID1: at Thu Jul 26 23:53:00 2001 ][Author ID1: at Thu Jul 26 23:53:00 2001 ][Author ID1: at Thu Jul 26 23:53:00 2001 ]Strona:
[Author ID1: at Thu Jul 26 23:53:00 2001 ]DO składu> Zmiana numeracji na wypunktowanie (to są dwie odrębne metody, a nie kolejne czynności)

---