· 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.
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.
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.
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.
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.
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!
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.
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.
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 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.
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.
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.
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!
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).
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.
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.
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.
Prawe okno edytora skryptu wyświetla edytowany skrypt, dlatego nazywamy je oknem skryptu. W trybie Normal Mode...
lukaszwalda