Animacje komputerowe we Flashu

PAŃSTWOWA WYŻSZA SZKOŁA ZAWODOWA W CHEŁMIE Instytut Matematyki i Informatyki Kierunek: Matematyka Specjalność: Matematyka z informatyką Sylwia Załużna Nr albumu 2965 Animacje komputerowe we Flashu Praca dyplomowa napisana pod kierunkiem prof. dr hab. Krzysztofa Murawskiego Chełm 2008

Oświadczenie o autorstwie pracy Oświadczam, że niniejszą pracę przygotowałem/przygotowałam * samodzielnie. Wszystkie dane, definicje, wzory i sformułowania pochodzące z literatury są opatrzone odpowiednimi odsyłaczami. Praca przedłożona do oceny nie była dotychczas publikowana w żadnej formie. Imię i nazwisko autora pracy (data i podpis autora pracy) * niepotrzebne skreśli 2

Spis treści Wstęp...4 Cel i zakres pracy...4 1. Historia Flasha...6 2. Środowisko Flasha...7 2.1 Menu...8 2.2 Narzędzia...8 2.3 Pole pracy...9 2.4 Panele...10 3. Symbole i klony...15 4. Animacje...17 4.1 Klatka po klatce...18 4.2 Automatyczne...18 4.3 Za pomocą listwy czasowej...19 4.4 Praca na warstwach...20 4.5 Animacje postaci...21 4.6 Eksport animacji...22 5. Język Action Script...24 6. Projekty animacji różnego typu...29 7. Podsumowanie i wnioski...41 Literatura...43

Wstęp Na wstępie zacznę od wyjaśnienia terminu Flash. Jest on bardo ważnym narzędziem każdego projektanta interaktywnych treści. Jego rozbudowane i użyteczne, a zarazem proste środowisko przeznaczone jest do tworzenia interesujących wizualnie i szybko pobieranych aplikacji. Które często bywają wykorzystywane do produkcji bannerów, gier itp. Ta technologia opracowana przez firmę Macromedia służy ponadto do tworzenia filmów. Ponieważ pozwala ona łączyć elementy z grafiki wektorowej (czyli bardzo małe pliki; na zasadzie klatek kluczowych), która jest skalowana i poprawnie wyświetlana nie zależnie od wielkości oraz bitmapy (bardzo dokładne odwzorowania szczegółów). Do animowanych jak i statycznych elementów można także dodać dźwięk. Jednak Flash to nie tylko prezentacje multimedialne. Aktualnie coraz więcej projektantów i programistów tworzy interfejsy do baz danych we Flashu. Czy wysoce interaktywne witryny, łącząc w jedna całość dźwięk, wideo, tekst i HTML. Jego robocze dokumenty opatrzone są rozszerzeniami *.fla, natomiast dokumenty wyeksportowane do sieci *.swf; można je oglądać po zainstalowaniu odpowiedniej wtyczki jak np. Adobe Flash Player. A zatem Flash może spokojnie uzyskać miano wielozadaniowej aplikacji- jest to program ilustracyjny, edytor obrazów i dźwięków, służących do tworzenia animacji i pisania skryptów, a zatem- wszystko w jednym. Cel i zakres pracy Celem mojej pracy jest przedstawienie programu Flash, ze zwróceniem szczególnej uwagi na zastosowanie go przy tworzeniu animacji. Niestety, ze względu na ograniczenia stronicowe nie mogłam zamieścić tu pełnych i wyczerpujących opisów tego programu. Wybrałam zatem, moim zdaniem, najistotniejsze aspekty związane z danym programem. Mam nadzieje, że stopniowe wprowadzenie w jego środowisko, poprzez zapoznanie się z narzędziami rysunkowymi czy tekstowymi, pomoże Czytelnikowi zrobić jak najlepszy użytek z twórczych możliwości Flasha. Pragnę także zwrócić uwagę na strategie tworzenia animacji i wprowadzanie grafiki w ruch. Ponadto chciałam przyjrzeć się podstawom pisania skryptów czyli językowi programowania ActionScript, który stał się kluczem do popularności Flasha. Niniejsza praca wprowadza w poszczególne aspekty tworzenia elementów we Flashu jak i pomaga szybko oraz sprawnie stworzyć animacje w danym programie. Początkowe

rozdziały odkrywają podstawy tworzenia elementów graficznych z wykorzystaniem unikalnego zbioru narzędzi rysowniczych i paneli programu Flash. Następnie czytelnik uczy się przekształcać elementy graficzne w animację i ją eksportować. Potem poznaje sposoby tworzenia elementów interfejsu użytkownika, na przykład przycisków i ich obsługi przy pomocy języka ActionScript. Posłużyłam się wersją Macromedia Flash MX 2004, która bez problemu można pobrać w postaci testowej, czyli 30-to dniowej z internetowej witryny. W niektórych fragmentach mojej pracy można także, znaleźć odniesienie do Flasha 5 1, który zawiera parę dodatkowych, przydatnych opcji. Mam nadzieję, że niniejsza praca ułatwi korzystanie z ww. programów i pomoże w tworzeniu interesujących projektów. A zatem zapraszam do zagłębiania się w świat Flasha- narzędzia hybrydowego, łączącego w sobie cechy kilku programów, który tworzy harmonijna całość o niespotykanych możliwościach. 1 London S., Flash 5. Visual Insight, Mikom 2001 5

1. Historia Flasha Historia tego programu sięga roku 1995 2. Pierwotnie utworzony jak i rozwijany był przez firmę FutureWave pod patronatem Jonathana Gay a, który obecnie zajmuje jedno z ważniejszych stanowisk w Macromedii. W danym roku program przybierał różnorodne nazwy, począwszy na SmartSketch, poprzez CelAnimator, a kończąc na FutureSplash Animator. Ta ostatnia aplikacje wprowadziła na rynek, we wrześniu 1996 roku amerykańska firma FutureWave. Wykorzystała ona grafikę wektorową, aby przy jej udziale prezentować dane w sieci. Narzędzie dzięki któremu projektowano witryny sieciowe cechowało się dobra jakością generowanych obrazów, które znajdowały się w plikach o małych rozmiarach- co stanowiło duży atut. W 1996 roku po nieudanej próbie sprzedaży programu dla Adobe, FutureWave została wykupiona przez Macromedia, które wydały program pod nazwą Macromedia Flash 1.0 co wiązało się również z jego gwałtownym rozwojem. Dodano możliwość dołączania bitmap i dźwięków. Istotna była także możliwość pisania komend w języku ActionScript, który ewoluował do bardzo zaawansowanego skryptowego języka programowania. Od tamtej pory Flash cieszy się coraz większą popularnością. Co zawdzięcza szerokim możliwościom w świecie projektów grafiki użytkowej, jak i interaktywnemu samouczkowi, który z pewnością w dużej mierze ułatwia pierwszy kroki w programie. Obecnie Flash jest wiodącą technologią do tworzenia animacji na potrzeby internetu. Zmiany jakie zostały wprowadzone w ostatniej wersji Flash MX 2004 (w szczególności dotyczące ActionScript 2) tworzą z niego także rozbudowane środowisko programistyczne. Program, który z założenia miał służyć do tworzenia animacji z elementami programowania, w swoich kolejnych wersjach przekonuje jednak, że służy do programowania z elementami animacji. Firma Macromedia cały czas odpowiada na rosnące wymagania swoich klientów. Ewolucja komponentów, a także narzędzi, efektów i zachowań, owocuje wprowadzaniem całkiem nowych funkcji, przeznaczonych dla użytkowników na wszystkich poziomach zaawansowania. 2 Dowd S., Reinhardt R., Macromedia Flash MX 2004 Bible, Wydawnictwo Helion, Gliwice 2004. 6

2. Środowisko Flasha W tym miejscu zajmę się omówieniem programu jakim jest Macromedia Flash MX 2004. Kiedy uruchomimy program zauważymy wiele różnorodnych ustawień i pól 3. Cały ekran da się podzielić na kilka sekcji. Miejsce centralne zajmuje formatka, na której będziemy tworzyć nasze animacje. Rys. 1. Macromedia Flash MX 2004 W górnej jego części znajduje się Menu, a według standardowych ustawień, lewa strona jest zarezerwowana dla przybornika. Z prawej natomiast znajdują się panele jak na przykład: Color Mixer, Components itp. Można je w każdym momencie włączyć lub wyłączyć jak również aktywować dodatkowe opcje (typu: Window/Design Panels, Window/Development Panels, Window/Other Panels). W dolnej zaś części mamy panele pomocy (Help), panel Action Scrypt'u oraz właściwości (Properties). Podsumowując użytkownik ma bezpośredni dostęp do zróżnicowanych palet, okien narzędziowych oraz Library (biblioteki) gotowych elementów, co zdecydowania ułatwia i uprzyjemnia pracę. W kolejnych rozdziałach (teoretycznych) omówię wybrane elementy interfejsu, po to, by móc sprawnie posługiwać się nimi tworząc swój końcowy projekt. 3 Urlich K., Flash MX 2004 Visual Quickstart Guide, Wydawnictwo Helion, Gliwice 2004 7

2.1 Menu Zacznę od menu główne, które w swoim standardzie składa się z 10 elementów. Patrząc od strony prawej będą to po kolei: help- czyli pomoc, w wersji angielskiej; window- przy pomocy którego możemy włączać i wyłączać dowolnie wybrane panele; control- dzięki niemu można przetestować animacje, uruchomić ją bądź zatrzymać; commands- zawiera różnorodne polecenia jak na przykład uruchamianie makropolecenia lub opcję Delete usuwającą je; text- przy jego użyciu wybieramy czcionkę, jej rozmiar, a także styl; modyfy- modyfikuje warstwy, sceny lub cały dokument; pozwala na zmianę kształtu obiektów oraz ich kształtu i położenia; insert- dodaje obiekty, warstwy oraz klatki animacji; view- tu włączamy linijki, powiększamy bądź zmniejszamy widok naszego pola pracy; edit- czyli edycja elementów i klatek; file- dzięki niemu otwieramy plik, zapisujemy, importujemy bądź eksportujemy obiekty, a także publikujemy wykonane animacje- czyli najprościej- opcje i ustawienia plików. 2.2 Narzędzia Pasek zawiera mnóstwo przyborów, które służą użytkownikowi do rysowania, modyfikacji jak i manipulacji stworzonymi obiektami. Niektóre z opcji przybornika zawierają listę z dużą liczba możliwości, a pozostałe to tylko przełączniki. Przy czym są one bardzo czytelne. Poza podstawowymi narzędziami graficznymi można znaleźć tutaj, także takie, które pozwalają w bardziej zadowalającym stopniu kontrolować jakość, stworzonych przez nas animacji. Rys. 2. Widok okna przybornika. 8

Nie będę przytaczać tu opisu wyżej pokazanych narzędzi ponieważ znane są one z Windowsowskiego Painta. Nadmienię jedynie iż nr 19. przypisany jest kolor obwiedni obiektu a nr 21. to przyciąganie. I ostatni 22., czyli opcja zakończenia obwiedni. 2.3 Pole pracy Czyli przestrzeń w której wszystko się dzieje. Tu tworzymy nasze obiekty, zmieniamy ich kształty i odpowiednio ustawiamy. Ich tworzenie jest niezwykle proste i odbywa się na podobnej zasadzie jak w Paincie Windowsa. Właściwości pola pracy 4 możemy także określić wybierając opcje Movie z menu Modify. Rys. 3. Okno z właściwościami pola pracy Oferuje ono następujące zmiany: Frame Rate czyli jak wskazuje nazwa ilość klatek wyświetlanych na sekundę. Im wyższa podana wartość tym film staję się bardziej płynny, a co za tym idzie i szybszy. Wskazana wartość (12) jest wartością domyślną. Dimension określamy rozmiar pola, szerokość i wysokość. Wartością domyślną są pixele, ale jednostki możemy zmienić w okienku Ruler Units. Background Color - definiujemy kolor tła. Grid Spacing i Show Grid -w Grid Spacing ustalamy wielkość siatki a samą siatkę wstawiamy zaznaczając opcję Show Grid. Default - z tą opcją często spotykamy się np. w grach komputerowych, gdzie nasze ustawienia zmieniamy na domyślne. Tak i w naszym programie niczym się nie różni. 4 Bhangal S., dehaan J., Flash MX 2004 at Your Fingertips, Mikom 2004 9

2.4 Panele Panele 5 czyli nie modalne okna dialogowe, które tym się różnią od standardowych, iż nie trzeba ich zamykać. Kiedy dokonujemy jakichś zmian przy ich użyciu zostają one automatycznie wprowadzone. Panele Flasha są niezwykle użyteczne, o ile wiemy, którego należy użyć w celu wykonania określonego zadania. Gdy otwieramy panel ukazują się znajome obiekty, takie jak pola tekstowe, listowe oraz przyciski opcji. Korzystamy z nich przy pomocy myszki. Wszystkie funkcjonują prawie że identycznie jak ich odpowiedniki w zwykłych oknach dialogowych. Duża zaletą jaką zaoferowała nam firma Macromedia jest dopasowywania paneli. Czyli ustawienie zbioru paneli w taki sposób, jaki nam najbardziej odpowiada. Przyjrzyjmy się im bliżej. Panel Library (Rys. 4) jest zbiorem wszystkich powtarzających się w projekcie elementów, czyli miejscem gdzie są segregowane i przechowywane symbole, zaimportowane grafiki i dźwięki, mapy bitowe, klipy video oraz inne obiekty. Aby dany element z biblioteki umieścić na scenie (naszej animacji) wystarczy gdy przeciągniemy go kursorem myszy na pole pracy. Symbole przechowywane w bibliotece można wielokrotnie używać w projekcie. Panel Library pozwala na organizowanie elementów w foldery, oraz sprawdzanie jak często dany element został użyty w filmie oraz sortowanie ich według typów. Każdy symbol w bibliotece ma przyporządkowaną małą ikonę, by można było szybko zorientować się czy jest to grafika, przycisk czy movie clip. Rys. 4. Panel Library programu Macromedia Flash MX 5 Pazdur W., Sander B., Flash 5 f/x and Design, Wydawnictwo Helion, Gliwice 2001 10

Panel Properties 6 zmienia się w zależności od tego jaki obiekt zaznaczymy. Co jest z pewnością sporym atutem, ponieważ nie musimy otwierać kilku paneli, tego typu dla różnych obiektów w naszej animacji. Integruje on większość opcji różnych narzędzi. Dla pola pracy, dany panel został przeze mnie przedstawiony już powyżej, dlatego przejdę do kolejnego, czyli dla pola tekstowego. Z lewej strony panelu, gdzie ustalamy min. własności naszego napisu mamy do wyboru opcje: Static Text - zwykły tekst, który nie bierze udziału w żadnych operacjach; Dynamic Text po wybraniu tej opcji ukazują nam się dwie kolejne, czyli Instancje Name oraz Var (nazwa zmiennej). Właśnie dzięki tym opcjom można się odwoływać do tekstu za pomocą języka skryptowego; Input Text opcja wejścia, umożliwia wpisanie tekstu podczas trwania naszej animki; Ponadto występują opcje praktyczne, typowych dla zwykłych edytorów tekstu, jak na przykład: wielkość czy kolor czcionki bądź pogrubienie czy indeksy. Natomiast dla symbolu Movie Clip, Button oraz Graphic mamy: Instance Name nazwa instancji, przez którą odwołujemy się do obiektu przy pisaniu skryptów. Color, czyli nasze efekty, definiowane z reguły w procentach, takie jak: 1. Brightness, rozjaśnianie obiektu; 2. Tint, płynne przejście jednego koloru obiektu w drugi (np. w klatce nr 1 ustawiamy kolor fioletowy a w klatce 15 na czarny i ustawiamy efekt na Tint); 3. Alpha, prawdopodobnie najczęściej używana, sprawia, że obiekt staje się przezroczysty. 4. Advanced stosowany do bardzo szczegółowego definiowania efektu. Properities dla symbolu Shape zmienia nam kolor, kształt i rodzaj linii. Z kolei dla Frame mamy opcje, w których ustawiamy animację ruchu bądź obrót obiektu, czy także wstawiamy wcześniej importowany dźwięk Panel Color Mixer umożliwia wybór rodzaju koloru, jakim ma być wypełnione wnętrze lub obwiednia rysowanego obiektu. Możemy w nim stworzyć swój własny kolor, który automatycznie staje się bieżącym dla wypełnień jak i kresek. Przy użyciu 6 Bhangal S., dehaan J., Flash MX 2004 at Your Fingertips, Mikom 2004. 11

odpowiednich opcji jak Liner możemy pokolorować dowolnie wybrany obiekt na przykład na wzór tęczy. Rys. 7. Panel Color Mixer w programie Macromedia Flash MX Panel Components zawiera wiele elementów interfejsu użytkownika. Można je dodać do filmów i kontrolować przy pomocy ActionScript. Każdy składnik posiada określoną liczbę wbudowanych i złożonych możliwości ułatwiających procesy tworzenia filmów, które są wysoce interaktywne. Bibliotekę komponentów zaimplementowanych w programie Flash możemy podzielić na trzy działy: Data Components- służą one do pracy z danymi; Media Components (gotowe odtwarzacze plików audio i wideo) oraz UI Components odpowiedzialny za wygląd programów. Dostępne komponenty ( takie, jak buttony, paski przewijania, czy ComboBoxy) są bardzo funkcjonalne. Dodatkową zaletą jest ich liczba (kategoryzuje się je w biblioteki). Inne obiekty pobieramy zazwyczaj z Internetu. Istnieje też opcja utworzenia własnego komponentu i udostępnienia go na stronach WWW innym użytkownikom sieci. Rys. 5. Panel Components programu Macromedia Flash MX 12

Panel Tools (czyli narzędzia) jak i obszar roboczy ( obszar w którym dokonujemy edycji klatek dla bieżących warstw) zostały przedstawiony powyżej, a zatem przejdę do następnego panelu - Actions 7. Tutaj odbywa się definiowanie akcji przypisanych do interaktywnych programów tworzonych we Flashu i wpisywanie skryptów. Panel Actions składa się z czterech pól głównych. Najważniejszym polem jest okno skryptu, którego nie można zwinąć. Pozostałe pola są tylko udogodnieniami i nie trzeba z nich korzystać. Okno skryptu zawiera kompletny kod ActionScript. Po jego lewej stronie znajduje się pasek z numeracją linii, a na górze kilka przycisków. Dodatkowo na dole znajduje się pasek z zakładkami i przyciskiem Pin, który umożliwia szybki dostęp do napisanych fragmentów kodu. Nad oknem znajduje się pole Scrip Assist. Z lewej jest lista akcji zawierająca wszystkie akcje, posegregowane tematycznie, a także ich alfabetyczny indeks. Gdy znajdziemy akcję na liście, po dwukrotnym kliknięciu, możemy wstawić ją do okna skryptu. Pod nią znajduje się lista obiektów z przypisanymi akcjami, która w szybki sposób umożliwia nam ich wyświetlenie. Panel akcji posiada dwa tryby pracy. Kiedy zaznaczamy kluczowa klatkę, która znajduje się na ścieżce czasowej, włączony tryb nosi nazwę Frame. Natomiast zaznaczając obiekt, który posiada swój własny kod ActionScript nazwa panelu zmienia się na Action Object. Aby zapobiec umieszczenia kodu w złym miejscu istotne jest sprawdzenie, który tryb jest aktualnie włączony. Rys. 6. Panel Actions z rozwiniętą grupą akcji Timeline Control 7 Franklin D., Makar J., Macromedia Flash MX 2004 ActionScript: Training from the Source, Wydawnictwo Helion, Gliwice 2004; 13

Panel Timeline 8 składa się z dwóch części: z leżących po lewej warstw i listwy czasowej, która pozwala nam widzieć i edytować kolejne klatki filmu. Zacznijmy od warstw (layers) - jednego z najważniejszych elementów animacji. To właśnie w nich umieszczamy elementy, które potem będziemy wyświetlać. Każda warstwa zawiera swoje klatki, pozwalające nam rozdzielić poszczególne obiekty i oddzielnie je animować. Możemy im także nadawać określone właściwości, co znacznie ułatwia i przyspiesza pracę. Na obrazku poniżej (Rys. 8.) widać dwie warstwy: Layer 1 i Layer 2. Nazwy te można zmienić w ten sam sposób, jak to się robi zmieniając nazwę np. pliku w Windows ie. Nad warstwami widać symbole. Oko oznacza czy dana warstwa ma być widoczna. Aby ją zablokować należy kliknąć na kropkę pod okiem, pojawia się wtedy czerwony X i warstwa staje się niewidoczna. Kłódka blokuje modyfikację, używamy jej, wtedy gdy skończyliśmy już prace w danej warstwie i nie chcemy przez przypadek zmienić. Natomiast kosz na śmieci kasuje warstwę. Dwa symbole w lewym dolnym rogu dodają warstwy. Należy także uwzględnić, iż można je dowolnie pozycjonować względem siebie (klikając na jakąś i przeciągając ją w górę lub w dół). To bardzo przydatny element przy tworzeniu animacji, gdyż warstwy mają tę właściwość, że wyższe w hierarchii przykrywają niższe. Wróćmy do listwy czasowej, która zawiera informacje o animacji i od grywa kluczową rolę przy tworzeniu scenariusza filmów. Dokładne zrozumienie jej działania jest podstawą do efektywnego wykorzystania Flasha. Czytelnie przedstawione ujęcia, przypisane konkretnym warstwom, rozłożone w kolejnych klatkach filmu znajdują się jedno nad drugim, w jednej kolumnie Timeline. Można podzielić je na dwie grupy. Do pierwszej zaliczymy ujęcia kluczowe - (tzw. klucze) które zawierają wszystkie dane o obecnie wyświetlanym obrazku. Tworzymy je wtedy, kiedy w zawartości warstwy ma zajść jakaś zmiana. Drugie to ujęcia zwykłe (tzw. przedłużenia kluczy ) wyświetlają zawartość najbliższego ww. ujęcia po swojej lewej stronie. W wyjątkowych przypadkach podczas odtwarzania pewnego zbioru ujęć zwykłych może zajść płynne przejście pomiędzy zawartością dwóch kolejnych ujęć kluczowych (tzw. tweening). W ujęciach bez tweeningu możemy wydłużyć segment przesuwając biały prostokącik równocześnie wciskając klawiszem Ctrl. Czyli w prosty i czytelny sposób skracać bądź wydłużać czas trwania poszczególnych zdarzeń. Ujęcia, widoczne w panelu można zaznaczać pojedynczo lub wiele naraz. Po zaznaczeniu podświetlają się na czarno. Pusta biała klatka oznacza, że nic w niej nie ma. 8 Urlich K., Flash MX 2004 Visual Quickstart Guide, Wydawnictwo Helion, Gliwice 2004 14

Jeśli w danej warstwie trwa animacja ruchu, ukazuje się strzałka i klatka podświetla się na niebiesko. Kiedy świeci na zielono sygnalizuje zmianę kształtu. Zaznaczenie ujęcia kluczowego powoduje zaznaczenie, w scenie wszystkich obiektów, umieszczonych w danym ujęciu. Na tej samej zasadzie zaznaczenie przycisku warstwy powoduje zaznaczenie jej całej zawartości. A ujęcia zwykłego, zaznaczenie zawartości ostatniego klucza. Dzięki temu można je edytować, przemieszczać wzdłuż listwy, wklejać lub kopiować. Po kliknieciu na klatkę prawym przyciskiem myszy ukazuje się nam menu, które zawiera szereg opcji i ułatwia ww. edycje. Rys. 8. Ujęcia kluczowe i zwykłe w panelu Timeline. Czerwona linia w piętnastej klatce to wskaźnik bieżącego ujęcia. 3. Symbole i klony Symbole 9 pomagają nam zaoszczędzić czas, ograniczyć wielkość pliku (ponieważ dany element zapisany jest on tylko raz), i zwiększyć elastyczność pracy. Ich niewątpliwą zaleta jest wielokrotne wykorzystanie w projekcie. Dzielimy je na trzy grupy: klipów filmowych; graficzne; przycisków. Aby odpowiednio wybrać grupę, najpierw trzeba dobrze poznać zalety i ograniczenia poszczególnych typów symboli, ponieważ posiadają one specyficzne cechy. Ich wspólna cecha jest możliwość wielokrotnego wykorzystania na scenie (klony). Pierwsza grupa to jakby filmy w filmie. Wykorzystywane są do tworzenia animacji które działają niezależnie od listwy czasowej filmu głównego. Mogą zawierać akcje, dźwięki oraz inne symbole. Poszczególne klipy (nieocenione w przypadku tworzenia 9 Underdahl B., Macromedia Flash MX: The Complete Reference, Wydawnictwo Helion, Gliwice 2002 15

interaktywnych elementów interfejsu) można umieszczać w innych klipach filmowych. Do pełnego odtworzenia jest im potrzebne tylko jedno ujęcie na listwie głównej. Domyślna listwa jest powtarzana wielokrotnie, o ile klip jest widoczny na scenie. Klip odtwarzany jest niezależnie. Symbole graficzne stosuje się przede wszystkim dla obrazów statycznych, wielokrotnie wykorzystywanych w różnych miejscach filmu. Akcja i dźwięk znajdujące się wewnątrz nich są ignorowane. Dane symbole wymagają umieszczenia w klatkach (aby były widoczne), ponieważ nie są odtwarzane niezależnie od głównej listwy. Jeżeli chcemy by symbol powtarzał się bądź zapętlał, wraz z kolejnymi klatkami listwy czasowej, to należy na niej umieścić dużo ujęć, odpowiadających długości listwy symbolu. Trzecia grupa służy do wykonywania interaktywnych przycisków 10. Ich listwa czasowa ograniczone jest do czterech ujęć, tzw. stanów. Odpowiadają one interakcjom z użytkownikiem. I tak po kolei: Up mysz poza obszarem symbolu, Over - mysz nad symbolem, Down klikniecie przycisku oraz Hit obszar obsługi kiknięcia. Gdy już utworzymy przycisk, poszczególnym stanom możemy przypisać różnorodne akcje. Podobnie jak klipy dane symbole potrzebują zaledwie jednego ujęcia, aby móc otworzyć trzy stany. Biblioteka Flasha 11 zawiera także wiele importowanych elementów, ich klony także umieszczamy na scenie. Możliwa jest konwersja tych elementów do symboli. Należą do nich: mapy bitowe- aby jej użyć wystarczy tylko przeciągnąć ją z biblioteki nas scenę; dźwięki importowane i eksportowane w różnych formatach; elementy wideo; symbole czcionek wykorzystuje się je w dynamicznych polach tekstowych. Symbole można edytować. Mamy tu kilka trybów: edycja w nowym oknie, w głównym obszarze roboczym ( zaletą jest tu możliwość modyfikacji podczas, której nie tracimy z oczu całej sceny otaczającej symbol) czy z poziomu biblioteki. Wszystkie zmiany wprowadzone w symbolu zostaną odzwierciedlone w każdym z jego klonów, ponieważ każdy klon odnosi się do swego oryginału. 10 Więcej informacji na temat danych przycisków można uzyskać z książki: Evans J., Flash, Fireworks i FreeHand f/x, Wydawnictwo Helion, Gliwice 2002. 11 Pazdur W., Sander B., Flash 5 f/x and Design, Wydawnictwo Helion, Gliwice 2001. 16

Także klony posiada swoiste parametry, które również możemy modyfikować. Definiowane są one wyłącznie dla klonu i nie maja najmniejszego wpływu na początkowy symbol. Właściwości takie jak: stopień przezroczystości, typ symbolu, jasność czy tez kolor można zmienić w stopniu całkowitym w stosunku do pierwowzoru. Można je ponadto skalować, pochylać i obracać. Ponadto dostępna jest opcja podmiany. Zdarzają się sytuacje, kiedy trzeba zamienić jeden klon na inny. Na szczęście nie trzeba tworzyć animacji od początku wystarczy użyć funkcji podmiany symbolu. Wybrany klon zostaje zastąpiony nowym, ale zachowuje wcześniej przypisane mu modyfikacje. 4. Animacje Tworzenie animacji 12 we Flashu zaczynamy od ustawienia podstawowych parametrów klipu. Należą do nich np. wielkość okna lub prędkość odtwarzania mierzona w klatkach na sekundę. Zapisujemy je do pliku o rozszerzeniu.fla. Zawiera on wszystkie składowe jej elementy, umożliwia dokonywanie poprawek. Obiekty możemy grupować na poszczególnych warstwach, które układamy w kolejności od najwyższej do najniższej (definiujemy w ten sposób hierarchię ich wyświetlania). Na nich dokonujemy wszystkich podstawowych operacji. Rysujemy oraz umieszczamy symbole i komponenty - wcześniej wykonane klipy filmowe. Zawierają one swoje własne polecenia ActionScript 13, które zapewniają ustawienia opcji w trakcie odtwarzania filmu. Warstwy grupujemy w foldery. Do podstawowych technik animacji zaliczamy: Animacje klatka po klatce. Animacje automatyczna. Efekty listwy czasowej. Nie zależnie od przeznaczenia i stylu naszej animacji zanim zabierzemy się za jej wykonanie, należy poczynić stosowne założenia. Przemyślana struktura to wyróżnik dobrych filmów. W animacji coś porusza się wolniej, coś szybciej, coś wiruje, odbija się, podskakuje bądź toczy. Na kształt animacji wpływa wiele czynników począwszy od stylu w jakim ma być utrzymany projekt strony, a skończywszy na budowaniu nastroju przy użyciu dźwięku. Istotne jest także środowisko użytkownik nie powinien mieć problemów z odnalezieniem się w nim. Oraz dodanie odpowiedniego ruchu, który będzie wyglądał 12 Bargiel D., Flash MX. Ćwiczenia praktyczne, Wydawnictwo Helion, Gliwice 2002. 13 ActionScript - wewnętrzny język programowania. 17

naturalnie i, podobnie jak nakładanie akcji, nada obiektowi osobowość. Stała obserwacja ruchu w codziennym życiu pozwala budować bibliotekę odniesień, ułatwiających wykonanie ciekawych i przekonujących animacji. Oryginalna interpretacja jak i przesada to podstawy w tworzeniu własnego stylu. 4.1 Klatka po klatce 14 Jest podstawowa formą imitowania ruchu. Wymaga tworzenia oddzielnych rysunków, dlatego jest idealna metoda przygotowywania złożonych animacji wymagających delikatnych zmian- jak na przykład mimiki twarzy. Jest to jednak żmudne i pracochłonne. A konieczność umieszczania w pliku oddzielnych rysunków powoduje znaczny wzrost jego rozmiarów. Każdy niezależny rysunek to nasze ujęcie kluczowe. W zachowaniu płynności animacji pomaga nam umieszczenie większej ilości ujęć pośrednich pomiędzy wyżej wymienionymi. Dzięki trybowi przenikania możemy oglądać zawartość wielu ujęć w tym samym czasie, ponieważ są one wyświetlane jako półprzezroczyste. I tu mamy do wybory dwie opcje: podgląd całych obiektów, bądź tylko ich krawędzi. Kolejna przydatna funkcja jest jednoczesna edycja grupy ujęć. Przy jej użyciu możemy w dowolny sposób zaznaczać poszczególne elementy animowanego obiektu i dokonywać ich modyfikacji. Warto z tego korzystać, kiedy zależy nam na zachowaniu zgodności miedzy poszczególnymi ujęciami podczas zmiany położenia obiektu na scenie. 4.2 Automatyczne 14 Przydaje się ona praktycznie w każdej sytuacji. Wystarczy że zaplanujemy przebieg animacji i utworzymy początkowy zestaw grafik, będących zawartością ujęć kluczowych. Resztę wykona Flash, gdyż interpoluje zawartość pozostałych ujęć, czyli generuje w nich obraz zmian. Ponadto oszczędzamy miejsce w pliku, ponieważ przechowuje on jedynie dane ujęć głównych, pozostałe wyliczane są w trakcie odtwarzania. Inną zaleta jest prostota wprowadzania zmian - wszystko sprowadza się do modyfikacji punktu początkowego i końcowego. Reszta zostanie automatycznie uaktualniona. A zatem dana animacja jest znacznie bardziej wydajna od wyżej opisanej. We Flashu mamy dwa rodzaje odmian ww. animacji, które możemy wybrać przy użyciu poleceń dostępnych a menu Tween inspektora właściwości. Dzielimy je na: 14 Więcej zagadnień dotyczących danych animacji można odnaleźć w rozdziale 15 książki: Evans J., Flash, Fireworks i FreeHand f/x, Wydawnictwo Helion, Gliwice 2002. 1 18

Animacje kształtu (Shape Tweening) umożliwia tworzenie efektu metamorfozy, czyli zmianę kształtu pomiędzy ujęciami kluczowymi. Jest zaprogramowana w taki sposób, aby tworzyć możliwie najkrótsze przejścia z jednej formy do drugiej. Możemy animować jedynie kształt prostych elementów graficznych a nie grup czy klonów symboli. Można automatycznie przeprowadzić animację kilku kształtów na tej samej warstwie, ale pewniej jest umieścić każdy z nich na oddzielnej. Animacje ruchu (Motion Tweening) dotyczy grup, symboli i tekstu w polach tekstowych. Nie stosuje się jej do prostych kształtów. Za jej pomocą można animować skalę, pochylenie obiektu, jego obrót, kolor bądź przezroczystość klonu symbolu. Animowany obiekt możemy dowolnie puszczać w ruch i zatrzymywać w filmie dowolnie często. Poza tym na każdym etapie mamy możliwość zmiany rodzaju ruchu. 4.3 Za pomocą efektów listwy czasowej Można je stosować do uzyskania efektów 15 na statycznej grafice, a także do dodania wieloklatkowej animacji. Pewne efekty można dodać tylko do symboli, aczkolwiek większość z nich zarówno do kształtów jak i do symboli. Domyślnie efekty listwy prezentują się jako symbole graficzne, jednak po ich zastosowaniu dla symboli klipu filmowego, dziedziczą jego zachowanie. Główna ich zaleta jest możliwość uzyskania złożonej animacji nawet przez osoby nie potrafiące napisać złożonego kodu. Zawdzięczamy to temu, iż wystarczy mała zmiana w parametrach efektu, aby zmienić jego zachowanie. Reszta zajmuje się kod JavaScript-Flash 16. Gdy już wybierzemy odpowiednie ustawienia Flash zastosuje je i zamieni zaznaczony element na symbol graficzny i zagnieżdżony. W rezultacie umożliwiając uzyskanie właściwego efektu na scenie. Problem może nam przynieść tworzenie sekwencji animacji wyłącznie w obrębie głównej listwy czasowej. Niesie to ze sobą ryzyko przypadkowego zaburzenia ich prawidłowej struktury. Najlepszym rozwiązaniem jest umieszczenie poszczególnych sekwencji animacji na oddzielnych listwach czasowych. W ten sposób prościej jest dokonać modyfikacji jednej, wybranej sekwencji i nie wpływać na inne. Ponadto jeżeli potraktujemy ją jak symbol, to możliwe będzie kontrolowanie jej za pomocą polecenia ActionScript. Sposób rozmieszczenia poszczególnych sekcji zależy do złożoności projektu 15 Blake B., Sahlin D., Macromedia Flash MX 2004, Edition 2000, Kraków 2004. 16 Danemu językowi programowania poświecone są trzy pierwsze rozdziały w książce Woods a P. S., Macromedia Flash MX Developers Guide, Wydawnictwo Helion, Gliwice 2002. 19

oraz od tego jak często będziemy korzystać z tych samych elementów. Możemy ustalić, iż elementy zależne od siebie podczas odtwarzania przypiszemy do tego samego symbolu. Jeżeli jednak niektóre obiekty wymagają indywidualnego traktowania, to należy umieszczać je w oddzielnych symbolach. Symbole stanowią ważna i integralną część zoptymalizowanego filmu Flasha. Ponieważ animację kształtów i innych obiektów graficznych musi zawsze poprzedzać, ich wcześniejsza konwersja na symbole. Zagnieżdżenie elementów graficznych i sekwencji animacji w symbolach pozwala tworzyć bardzo zaawansowane projekty. Zachowujące przy tym przejrzysta strukturę i łatwe w dokonywaniu późniejszych modyfikacji. Główna listwa czasowa powinna spełniać rolę nie tyle co pojemnika na poszczególne elementy filmu, aczkolwiek miejsca, w którym to, dane elementy są ze sobą łączone we właściwy sposób. 4.4 Praca na warstwach W autorskim środowisku Flasha mamy do dyspozycji cztery typy warstw 17 : 1. Zwykłe (Normal). 2. Maskujące (Mask) - maski służą tu do selektywnego odsłaniania zawartości warstw leżących pod nimi. Ich rola sprowadza się jedynie do wyświetlania zawartości warstw maskowanych. Niemal wszystkie elementy graficzne (grupy, klon symbolu, teks) we Flashu mogą być maskowane lub służyć jako maska. Do zdefiniowania jej obszaru możemy posłużyć się dowolnym kształtem czy symbolem, ale te elementy nie będą widocznie w końcowej postaci filmu. Zawartość warstwy można animować bezpośrednio z poziomu głównej listwy czasowej, używając w tym celu automatycznej animacji ruchu bądź kształtu. Nie można tu jednak zastosować ścieżki ruchu. Jeśli chcemy jej użyć, musimy dodatkowo sięgnąć do klipu filmowego i zawrzeć go w naszej warstwie. Natomiast w czasowej listwie klipu mamy już możliwość tworzenia ścieżek ruchu i pełnej kontroli nad nimi. 3. Wzorcowe (Guide) stosowane do przechowywania zawartości potrzebnej tylko do roli wzorca (punktu odniesienia) lub w celu przyśpieszenia testowania filmu, gdy pozostajemy na etapie edycji. Wtedy zawartość projektu zostaje przeniesiona 17 Urlich K., Flash MX 2004 Visual Quickstart Guide, Wydawnictwo Helion, Gliwice 2004. 20

do specjalnych warstw (odniesienie), które nie są eksportowane do końcowego pliku.swf 18. 4. Ze ścieżkami ruchu - posiadają one ścieżkę wzdłuż której realizowana jest animacja obiektu, znajdującego się w innej warstwie. Istnieje kilka sposobów modyfikacji poruszania się elementu. Pierwsza opcja to Orient to path, z inspektora właściwości, która powoduje obracanie obiektu zgodnie z kierunkiem krzywej, tak aby jego przód zawsze wskazywał kolejny odcinek ścieżki. Drugi bardzo ważny czynnik to umiejscowienie punktu środka. I tu, aby zmodyfikować tryb wyrównania obiektu do ścieżki, możemy zmienić punkt środka symbolu albo zmienić położenie grafiki. Zależność, w jakiej pozostają ze sobą poszczególne warstwy, może być zawsze zmodyfikowana przez odpowiednia zmianę ich hierarchii w stosie. 4.5 Animacje postaci Flash jest coraz popularniejszym narzędziem do tworzenia kreskówek o wysokiej jakości. Można w nim szkicować za pomocą tabletu, a także tworzyć kolaże używając materiałów ze zdjęć bądź wideo. Dla animatora najtrudniejszym zadaniem jest ruch i emocje. Opanowanie poprawne wykonywania tego zadania pozwala się wybić ponad przeciętność. Weźmy przykładowo rozmycie - narzędzie dzięki, któremu animator może podkreślić ruch szybszy niż dopuszcza to częstotliwość wyświetlanych kratek W kreskówkach oznaczane jest jako linie. Stanowią one tak jakby aproksymacje ruchu obiektu za pomocą jednego pociągnięcia pędzla, w kierunku, z którego ów obiekt przybywa. Gorzej jeżeli mamy zastosować pętle chodu. W kolejnych klatkach listwy czasowej klipu filmowego rysujemy kilka pozycji postaci z zachowaniem jednolitego punktu odniesienia. Uruchamiamy wbudowana pętle po czym dodajemy ruch w poziomie, wykorzystując automatyczną animacje ruchu. Musi ona odpowiadać chodowi. Jeżeli animacja będzie na przykład zbyt wolna zobaczymy postać idącą w miejscu. Zatem odpowiednio do chodu należy dobrać szybkość klipu filmowego. W tradycyjnej animacji najpierw powstawał szkic, a dopiero później był on kolorowany i cieniowany. Dziś posiadamy Flasha i Paint Bucket, który potrafi nawet odpowiednio zinterpretować przerwy w liniach. W trakcie wypełniania najbardziej wydajne okazuje się wybranie jednego koloru, przejście przez cały cykl i wypełnienie wszystkich miejsc w 18 Więcej o dynamicznych plikach SWF można przeczytać w 14. rozdziale książki Woodsa P. S., Macromedia Flash MX Developers Guide, Wydawnictwo Helion, Gliwice 2002. 21

którym miał się on pojawić. I tak z następnymi. Kolorowanie grafiki to bardzo ważny element, zapewniający odpowiednia jakość kreskówki. Arkusz modelu, szybkie kolorowanie bądź stosowanie tymczasowego tła znacznie ułatwia pracę. Aby wydajnie tworzyć scenografię i tło stosuje się mapy bitowe (obraz rastrowy), warstwy, animacje wielopoziomową, rozmycie w celu symulacji głębi bądź różne połączenia wymienionych technik. Aby zapewnić wrażenie trójwymiarowości w trakcie przesuwania się tła warto pamiętać o tym, iż im dalej obiekt się znajduje tym wolniej powinien się poruszać. Wymaga to oczywiście praktyki. Przykładowo w tle przesuwanym przez 100 klatek animacji: niebo porusza się powolutku, w sumie o 100pikseli; woda o 125; przykładowa postać na plaży o 150; a kwiatek rosnący bardzo blisko miejsca przesuwu kamery, porusza się najszybciej, łącznie o 250 pikseli. Aby tchnąć w postać życie należy także wykonać poprawna synchronizację ruchu warg. Zatem rysujemy położenie warg dla różnych głosek podstawowych dla wymawianych wyrazów. Potem łączymy je razem, przez co możemy uzyskać wrażenie mówiącej postaci. W kreskówce liczbę różnych pozycji ust można ograniczyć do 10. Warto również stosować ekspresję. Szczęśliwy bądź smutny wyraz ust pomaga urealnić postać. Jednak synchronizacja ruchu warg i ekspresji nie jest zadaniem prostym. Dlatego często stosuje się tu swoistego rodzaju sztuczki, jak na przykład zakrycie ust bujnymi wąsami. Wystarczy kilka drobnych połączeń z dźwiękiem aby animacja wyglądała bardziej realistycznie. Głos czyni postać wiarygodną. Aby pobrać głos wystarczy podłączyć mikrofon i powiedzieć kilka słów. Odpowiednia mieszanka głosu i emocji często powstaje w programach takich jak Sound Forge 19, a potem modyfikowana jest odpowiednimi pluginami 20. Kolejnym bardzo ważnym aspektem jest zastosowanie efektów dźwiękowych. Wiele dobrych zbiorów można znaleźć w internecie lub na płytach CD-ROM. Po doświadczeniach z synchronizacja mowy dźwięk nie powinien przysporzyć nam problemów. Wystarczy w odpowiednich momentach podmienić tylko kopie postaci. Po przyjrzeniu się pikom i zmianom fal dźwiękowych powinniśmy wiedzieć, gdzie umieścić 19 Jeden z najbardziej cenionych, wręcz można by powiedzieć legendarnych, profesjonalnych programów do przechwytywania, cyfrowej edycji i obróbki dźwięku. 20 Miniprogramy, które poszerzają funkcje oryginalnego programu. 22

podmiany. Warto pamiętać, iż poza osobna warstwą dla głosu należy zarezerwować jedną lub dwie dla efektów dźwiękowych. Po zakończeniu tworzenia scen należy obejrzeć je w pełnej prędkości. Dla tego trzeba ograniczyć rozmiar wynikowy pliku video do 320x240 pikseli przy zastosowaniu kodeka do AVI. Takie rozwiązanie pozwoli nam wykryć błędy, związane z niespodziewanymi zmianami prędkości, kolorów bądź synchronizacją ruchu. Po ewentualnych poprawkach możemy renderować 21 ostateczna wersje pliku. 4.6 Eksport animacji Flasha można zastosować do utworzenia na przykład obracającego się logo firmy. Możliwy jest także eksport 22 zmieniających się kształtów (na warstwie powyżej zawartości warstwy video). Jednak klatki (30 lub 60 na sekundę), znajdujące się w klipach filmowych nie będą eksportowane. Należy je więc pozamieniać na symbole graficzne, bądź inne elementy. Konieczne tutaj, będzie także dostosowanie wysokości i szerokości filmu (najlepiej 640x480 lub większe), w zależności od rodzaju programu do edycji wideo, jak i wykorzystywanego sprzętu. Pamiętać należy ponadto o tym, iż obraz telewizyjny bywa często przez telewizory obcinany. Dlatego nie należy umieszczać istotnych informacji na krawędziach ekranu, bo mogą pozostać nie widoczne. Odnośnie koloru i grafiki ważne są poniższe zasady: unikanie poziomych linii o szerokości 1 piksela, bo będzie migotała; nie stosowanie drobnego tekstu, bo będzie się rozmywać; unikanie kolorów o maksymalnej intensywności oraz pełnej bieli i czerwieni, gdyż nie będą wyglądać dobrze; utrzymywanie wartości RGB w przedziale od 16 do 235; stosowanie kolorów NTSC 23. Flash umożliwia eksport sceny lub filmu jako ciągu obrazów w różnych formatach. Takim ciągiem statycznych, ponumerowanych obrazów, (które w trakcie szybkiej podmiany na kolejne symulują odtwarzanie pliku wideo) jest sekwencja. Grafikę można eksportować do podstawowych formatów wektorowych (EPS 3.0 czy EMF) - używanych 21 Od ang. rendering przedstawianie. 22 Evans J., Flash, Fireworks i FreeHand f/x, Wydawnictwo Helion, Gliwice 2002. 23 Amerykański system kodowania obrazu telewizji analogowej. 23

wtedy, gdy zależy nam na przeniesieniu grafiki o możliwie najwyższej jakości do programu Adobe After Effects; automatycznie usuwają one kolor tła Flasha; lub rastrowych (BMP, GIF czy JPEG) eksport (podczas którego można skalować film Flasha) ze zmienna wysokością, szerokością lub rozdzielczością pikseli; oszczędzają one czas podczas renderowania w aplikacjach do edycji wideo. Po wykonaniu odpowiednich zaleceń oraz integracji scen i klipów filmowych, bez żadnych problemów możemy eksportować dokument (pod postacią zbioru obrazów nieruchomych, które później łączymy w jedną całość). Jeżeli chcemy szybko wykonać rastrową wersje filmu i mamy do dyspozycji Flasha zainstalowanego pod Windowsem, możemy dokonać eksportu do formatu AVI. Format ten służy głównie do otrzymywania cyfrowego wideo na komputerze. Skalowanie filmów w nim umożliwiają parametry Dimensions. Możliwe jest także wybranie głębi barw (zalecane jest stosowanie koloru 24-bitowego) oraz kodeka (oczywiście kompatybilnego ze sprzętem wideo), który wygeneruje nieskompresowane klatki. A włączona opcja Smooth powoduje zastosowanie wygładzenia, co sprawia, iż plik wygląda dużo ładniej. W aplikacji do obróbki wideo możemy połączyć obraz z dźwiękiem, a potem przejrzeć efekty w programie Windows Media Player bądź innym. 5. Język Action Script ActionScript 24 jest to wewnętrzny język programowania, który daje możliwość kontrolowania zachowania animacji oraz zawartych w niej obiektów. Za jego pomocą można stworzyć proste skrypty nawigacyjne, rozbudowane mechanizmy obsługi danych, elementy interfejsu użytkownika itp. Skrypty są stosowane do przycisków i klatek kluczowych animacji. Zawierają zmienne, które są elementami programistycznymi. Umożliwiają nam przechowywanie wartości właściwych, tekstów, wyrażeń czy ścieżek. Zmniejszając tym samym ilość pisanego kodu i upraszczając proces obliczeń. Można je deklarować za pomocą akcji. Podstawowe akcje 25 to: 24 Franklin D., Makar J., Macromedia Flash MX 2004 ActionScript: Training from the Source, Wydawnictwo Helion, Gliwice 2004. 25 Dowd S., Reinhardt R., Macromedia Flash MX 2004 Bible, Wydawnictwo Helion, Gliwice 2004. 24

gotoandplay - przeskakuje do ujęcia docelowego, po czym wykonuje akcję play odtwarzając dalszy ciąg animacji. Jest chętnie stosowana w animacjach przygodowych, gdzie użytkownik kieruje bohaterem; gotoandstop - podobnie jak powyższa przeskakuje do ujęcia docelowego, i tu zatrzymuje odtwarzanie. Jest często używana w interfejsach, jak np. paski narzędziowe. Dzięki pierwszym dwóm akcjom (i ich parametrom), w każdej chwili jesteśmy w stanie przejść do wybranej części filmu; play ; stop ; geturl - daje nam możliwość komunikowania się filmu z przeglądarką jako hiperłącze i pozwala na przesyłanie elementów formularzy. Posiada trzy ważne parametry: URL, window, method. 26 Pierwsze cztery akcje można znaleźć w kategorii Action Script u Timeline Control. Wprowadza się je na trzy sposoby: Przeciągając akcję z przybornika akcji do okna skryptu. Po kliknięciu znaku plus wybierając z odpowiedniego menu. Klikając dwukrotnie nazwę wybranej akcji w przyborniku akcji. Po dodaniu akcji należy określić jej parametry, które są domyślnie podświetlane przez Flash a. Podczas pisania skryptu należy również pamiętać o sprawdzaniu poprawności napisanego kodu, do tego służy niebieski przycisk Check Syntax (w kształcie ptaszka ). Chcąc przejść do ujęcia znajdującego się na innej scenie trzeba użyć parametru Scene. Mamy tu do wyboru dwie opcje: 1. nextscene powoduje przejście do pierwszego ujęcia nowej sceny. Można jej używać do wykonywania zaawansowanych pokazów slajdów lub wyrafinowanych animacji; 2. prevscene powoduje przejście do sceny wcześniejszej. Kolejność scen jest sprecyzowana w panelu Scene. Nazwy scen oraz etykiet 27 należy umieszczać wewnątrz cudzysłowów. Trzeba także podać nr klatki docelowej. Poniższe przykłady ukazuje użycie poszczególnych parametrów. W pierwszym przypadku jest to przejście filmu do sceny 2, do klatki o numerze 10. Drugi 26 Więcej informacji na temat parametrów można znaleźć w rozdziale 18 książki Reinthardta R., Flash MX 2004 27 Od ang. label. Punkt docelowy dla odnośników. Jest on całkowicie niewidoczny, podczas przeglądania strony internetowej. W trakcie eksportu etykiety stają się częścią pliku SWF. 25

przykład pozwala na przejście do klatki kluczowej oznaczonej etykietą menu na scenie o numerze 3: gotoandplay( Scene2,10); gotoandplay( Scene3, menu ); Jeśli w akcji wpiszemy tylko jeden parametr jest on interpretowany jedynie na obecnej listwie czasowej jako numer klatki bądź nazwa etykiety. Poniższy kod powoduje przejście do etykiety menu na bieżącej listwie czasowej oraz zatrzymanie odtwarzanego filmu: gotoandstop( menu ); Akcje: play i stop, co nie trudno się domyślić, są jednymi z podstawowych funkcji we Flash u. Po wywołaniu pierwszej z wymienionych kolejno wyświetlają się klatki, aż do momentu, gdy jakaś akcja przerwie bieg wyświetlanych ujęć lub zostanie osiągnięty koniec listwy czasowej. Druga z nich, powoduje zatrzymanie dotychczas odtwarzanego klipu filmowego, co wskazuje sama nazwa. Akcja stop na zasadzie podobnej do play, nie spowoduje zatrzymania odtwarzania filmu na głównej listwie czasowej, gdy zostanie wywołana wewnątrz klipu filmowego. Detektory zdarzeń 28 określają warunki, jakie muszą być spełnione, by została wykonana akcja. Co znajdzie zastosowanie w moim późniejszym projekcie zawierającym interaktywne przyciski. We flashu można wyróżnić trzy detektory. Wykrywają one oddziaływania myszy na przycisk (manipulowanie przyciskami), wciśnięcia klawisza na klawiaturze, jak również przejścia do określonego ujęcia kluczowego na listwie czasowej. Pierwszy detektor bada położenie i ruch myszy, gdy kursor znajduje się w polu "Hit" przycisku symbol strzałki zmienia się na symbol rączki, a przycisk przyjmuje stan "Over". Warto tu zaznaczyć, iż dla klonu przycisku można przypisać kilka zdarzeń. Kod: on (release, releaseoutside)( stop(); } przedstawia zdarzenie wywołujące akcje "stop", gdy użytkownik zwolni przycisk myszy, w jego obrębie i poza nim. Kolejne zdarzenia, rozdzielane są przecinkami, a w nawiasie można napisać dowolną liczbę zdarzeń, obsługiwanych przez detektor. 28 Więcej informacji o detektorach znajduje się w pierwszym rozdziale książki Webstera S., Foundation PHP for Flash, Wydawnictwo Helion, Gliwice 2002; oraz w książce Dowd a S., Reinhardt a R., Macromedia Flash MX 2004 Bible, Wydawnictwo Helion, Gliwice 2004 26

Tab. 1. Przedstawia zdarzenia adekwatne do konkretnego przycisku. Nazwa press release releaseoutside rollover rollout dragover dragout keypress Zachodzi wówczas, gdy... kursor znajduje się nad obszarem Hit przycisku oraz zostaje wykryte wciśnięcie klawisza myszy; jest przydatne przy przełącznikach. kursor znajduje się nad obszarem Hit przycisku oraz zostaje wykryte wciśniecie jak i zwolnienie klawisza myszy. kursor znajduje się nad obszarem Hit przycisku oraz zostaje wykryte wciśnięcie klawisza myszy, a następnie jego zwolnienie poza obszarem Hit przycisku. kursor znajduje się nad obszarem Hit przycisku bez wciskania klawisza myszy kursor znajdujący się nad obszarem Hit przycisku zostaje przesunięty poza jego obszar bez wciskania klawisza myszy 1. klawisz myszy jest wciśnięty, gdy kursor znajduje się poza obszarem Hit, 2. kursor zostaje przeciągnięty na obszar hit bez jego zwalniania (klawisz myszy jest wciśnięty) 1. klawisz myszy zostaje wciśnięty nad obszarem Hit, 2. kursor zostaje przeciągnięty poza obszar Hit bez jego zwalniania (klawisz myszy jest wciśnięty) zostanie wciśnięty określony klawisz z klawiatury; aby wykryć to zdarzenie, należy umieścić na obrazie przycisk w ujęciu, w którym chcemy wykryć wciśniecie klawisza. Potem przypisujemy przyciskowi skrypt z detektorem on, a w roli parametru występuje keypress. Jak już wspominałam na listwie czasowej można umieszczać klipy filmowe, a w nich mogą być umieszczone (zagnieżdżone 29 ) kolejne klipy. Ponieważ odtworzenie każdego z nich jest niezależne od pozostałych listew czasowych, nastaje konieczność adresowania poszczególnych listew, aby odwołać się do konkretnych klipów. We Flash u 4 sterowanie listwami czasowymi za pomocą innych było realizowane za pomocą akcji telltarget, która zawierała adres docelowej listwy czasowej, do której wysyłała określone akcje np. play() lub stop(). Od wersji Flash 5 zaprzestano używać tej metody 30. Aktualnie jest ona wycofywana na rzecz notacji kropkowej. Powód tego jest zrozumiały - ActionScript stał się językiem zorientowanym obiektowo, przez co znacznie ułatwił nam ww. zadanie. Ścieżka adresowa opisuje, w jaki sposób dotrzeć do odpowiedniego klonu klipu filmowego. Poniższe przykłady przedstawiają definicję notacji: 29 Aleo T., Bhangal S., Diogo J., Tucker M., Flash. Filmy i dźwięk. Techniki zaawansowane, Wydawnictwo Helion, Gliwice 2002. 30 London S., Flash 5. Visual Insight, Mikom 2001. 27

Obiekt.wlasciwosc=wartość; lub Obiekt.metoda(); Obiekt to każdy element programu, którego właściwości są dostępne, aby je zmodyfikować np. obiekt typu MovieClip. Każdy obiekt posiada swoje indywidualne cechy. Przykładem właściwości klipu filmowego może być stopień obrotu bądź jego skala (definiowana poprzez kod _xscale (skala osi X) oraz _yscale (skala osi Y)), która posiada wartość 100 %. Dla klonu filmowego o nazwie Anim_mc można to zapisać następująco: Anim_mc.xscale = 100; Absolutna ścieżka adresowa podaje pełną informację o usytuowaniu określonego klonu klipu filmowego w hierarchii; odniesioną do głównej listwy czasowej, którą opisuje kod: _root., np.: _root.anim_mc, gdzie Anim_mc jest nazwa. Jeżeli w klonie Anim_mc jest umieszczony kolejny klon klipu filmowego, do którego chce się odwołać kod będzie wyglądał następująco: _root.anim_mc.menu_mc, gdzie menu_mc jest zagnieżdżonym klonem klipu w Anim_mc. Jeżeli do projektu Flasha zostanie dołączony gotowy plik.swf należy użyć nowej wersji Flasha MX 2004 i właściwości obiektu Movie Clip 31 noszącej nazwę _lockroot. Odnosi się ona bezpośrednio do głównej listwy czasowej filmu bez względu na umieszczone gotowe pliki.swf. Drugi rodzaj ścieżki relatywna, określa położenie klonu w hierarchii klipów filmowych w odniesieniu do aktualnego miejsca w tej hierarchii. Są one przydatne w klipach filmowych, wewnątrz których występuje kilka innych klipów. W notacji kropkowej dana ścieżka macierzystej listwy jest określana słowem kluczowym _parent, np.: this._parent, gdzie this to aktualna listwa czasowa klipu filmowego. Słowa kluczowego _parent można wielokrotnie używać aby przemieszczać się pomiędzy poszczególnymi listwami czasowymi. Na przykład kod this._parent._parent powoduje przejście do listwy czasowej dwa poziomy wyżej nad obecną. 31 Danym obiektom poświecony jest cały 5. rozdział książki Woods a P. S., Macromedia Flash MX Developers Guide, Wydawnictwo Helion, Gliwice 2002. 28

W języku ActionScript wyróżniono kilka typów danych. Do tej pory przedstawiłam trzy z nich: ciąg znaków (string) za każdym razem, gdy coś jest zawarte w cudzysłowach mamy do czynienia z wartością tekstową, np. var nazwisko = Nowak ; ciąg liczb (typ number) tego typu daną jest każda liczba. Wszelkie operacje matematyczne przeprowadzane są na wartościach liczbowych; i ciąg obiektów typu movieclip. Kolejne typy to: boolean - zmienna może przyjmować tylko dwie wartości, true lub false; object dotyczy każdego obiektu utworzonego w skrypcie; function w skryptach można definiować funkcje. Funkcje powodują oznaczenie pewnego fragmentu kodu tak, aby wywoływać go, po umieszczenie w skrypcie tylko jego nazwy. Mogą one powodować także, wykonanie kilku akcji i przekazywać do nich parametry. Powinny mieć różne nazwy, aby nie myliły się użytkownikowi. Ponadto funkcje mogą posłużyć do definiowania własnych, dodatkowych komend języka skryptowego. We Flashu, tworzymy funkcje na ściśle określonej listwie czasowej i wykonujemy wpisując ścieżkę adresową wraz z nazwą. Należy pamiętać tu, o tym, iż ujęcie zawierające deklarację naszej funkcji musi być otwarte, nim stanie się ona dostępna. W przeciwnym wypadku funkcja może nie zostać rozpoznana. Ważnym elementem są także operatory 32, mające szerokie zastosowanie w programie jakim jest Flash. Poniżej przedstawione, wybrane trzy, mają za zadanie: undefined sprawdzać typ nieistniejącej w skrypcie zmiennej lub obiektu; typeof - sprawdzać typ określonych informacji. Operator ten przyjmuje tylko jeden parametr, nazwę elementu skryptu, który chcemy przetestować. I w oknie Output wyświetla rezultat. Można go używać także w pętlach, dzięki czemu zagnieżdżone akcje będą wykonywane, tylko dla określonego typu danych. Instancof - umożliwiać sprawdzenie klasy, do której przynależy dany obiekt. 32 Głebsze informacje na temat operatorów można odnaleźć w pozycji: Dowd S., Reinhardt R., Macromedia Flash MX 2004 Bible, Wydawnictwo Helion, Gliwice 2004. 29

6. Projekty animacji różnego typu Czas zabrać się do pracy. Na początek stworzę najprostszą animacje. Zaczynam od sporządzenia nowego pliku, z menu File wybieram New i dostosowuję dokument. Potem ustalam rozmiary pola pracy na 500 pikseli szerokości i 100 px wysokości. Kolor tła wybieram dowolnie. Ustalam także liczbę klatek na sekundę. Ja wybrałam 20. Dalej biorę narzędzie do rysowania koła i ustawiam wypełnienie na czerwone radialne kółko, obramowanie koła ustawiam na brak i rysuję kółko na naszym polu pracy z jego lewej strony. Wypełnienie koła mogę dostosować przy pomocy panelu Color Mixer. Należy zauważyć, że w warstwie pierwszej Layer 1 i jej pierwszej klatce pojawiła się klatka kluczowa, która oznacza, że jest w niej kółko. Klikam prawym klawiszem na ta klatkę. Z menu wybieramy Create Motion Tween. Klatka stała się niebieska. Dalej należy zaznaczyć kursorem klatkę nr 40 i wcisnąć klawisz F6. Animacja będzie trwała od klatki nr 1 do 40 co będzie widać w warstwie Layer 1. Będąc w klatce 40 przesuwam kółko na drugi koniec pola pracy. Animacja jest prawie gotowa i po naciśnięciu Enter powinna ruszyć. Kropka przesuwa się od lewej do prawej. Dodałam jeszcze jedną i ustawiłam ją niżej w stosunku do Layer 1. Tu narysowałam owal, który umieściłam pod pierwszą kropką. W mikserze kolorów ustawiłam wypełnienie na szare z widocznością Alpha na 50%. Sprawia to wrażenie cienia. Moją pierwszą kropkę w klatce nr 1 obniżyłem do krawędzi pola pracy, a w klatce nr 40 ustawiłem pod górna krawędzią. Kropka będzie szła po przekątnej. Teraz jej cień w warstwie Layer 2 tak samo animowałam jak naszą kropkę, z tym wyjątkiem, że jej cień jest duży, kiedy rozpoczyna się animacja a mały gdy się kończy. By zmienić wielkość cienia w ostatniej klatce klikamy na niego prawym klawiszem i wybieramy z listy opcję Scale. Pojawiają się punkty dzięki którym możemy przeskalować obiekt. Można jednak zrobić to dokładniej zaznaczając cień i z menu głównego wybierając opcje Modify/Transform/Scale and Rotate.... Tu ustalam skalę na 30% i zatwierdzam. Teraz wszystko jest prawie gotowe. Należy ustalić jeszcze publikacje naszej animki, wchodząc w menu File/Publish Settings... i do zakładki Flash. Protect from import ustalamy hasło zabezpieczenia. Następnie przechodzimy do zakładki HTML gdzie możemy ustalić Window Mode na Transparent Windowless. I kolejno klikamy na przycisk Publish i OK. Teraz możemy obejrzeć efekt naszej pracy. Otwieramy wygenerowany plik HTML. I naszym oczom ukazuje się czerwona kuleczka tocząca się na prawo, a pod nią również przesuwający i zmniejszający się cień. 30

Rys. 9. Zdjęcia animacji wykonane w odstępie około 1 sekundy. Animacja tekstu 33 Wiemy już na czym polega tworzenie animacji. Teraz wykonam taką, która jest podobna do wyżej opisanej, ale wymaga większej pracy. Tworzę nowy plik i ustalam wymiary, liczbę klatek i kolor tła. Gdy wszystko jest już gotowe do pracy wybieram narzędzie do tworzenia tekstów (symbol A) i tworzę napis. Jeśli mam otwarty panel Properties to zaraz po wybraniu tego narzędzia ustawi się on na właściwości tekstu, gdzie określam jego wygląd. Mój napis powstał czcionką HandelGotDLig rozmiar 40 pogrubiona. Teraz, gdy mam już napis klikam CTRL+B. Każda litera (jest oddzielnym obiektem), powinna zostać rozseparowana i być w oddzielnym niebieskim prostokąciku. Teraz należy umieścić każdą w oddzielnej warstwie. Z menu Modify wybieram opcję ostatnią Distribute to Layers (Ctrl +Shift+D). Powstały teraz nowe warstwy każda zawiera jakąś literę lub znak. Warstwa w której powstał tekst usuwam. Mając nadal zaznaczone wszystkie litery, klikam na klatkę nr 1 w dowolnej warstwie prawym klawiszem i wybieram Create Motion Tween. W klatce nr 90 wstawiam klatki kluczowe kończące animację. Wybieram najwyższą warstwę i jej klatkę 90 trzymając lewy klawisz myszki zaznaczam ciągnąc w dół wszystkie klatki nr 90 potem wystarczy wcisnąć F6 i gotowe. Po czym przechodzę do klatki nr 1 i zaznaczam wszystkie litery w taki sposób jak zaznacza się pliki lub foldery w Windowsie. Zaznaczone litery powiększam (Modify/Transform/Scale and Rotate...) by wyszły poza pole pracy i zsuwam. Napis powinien na szerokość zmieścić się w polu pracy. Dodaję 33 Teoretyczne zagadnienia dotyczące animacji tekstu, jak i innych rodzajów animacji, zastosowanych w rozdziale 6, można odszukać w książkach: Blake a B., Sahlin a D., Macromedia Flash MX 2004, Edition 2000, Kraków 2004 oraz Underdahl a B., Macromedia Flash MX: The Complete Reference, Wydawnictwo Helion, Gliwice 2002 31

opóźnienie. Litery będą się zmniejszać jedna po drugiej i na końcu animacji utworzą napis. Pierwsza litera tekstu zaczyna się animować od klatki nr 1 drugą muszę opóźnić o jakiś okres czasu w stosunku do litery pierwszej (np. o 5 klatek). Przesuwam klatkę kluczową w warstwie z literą drugą z klatki nr 1 do 5. Teraz klatkę kluczową litery trzeciej przesuwam do klatki nr 10. Postępuję tak do końca swojego wyrazu zwiększając opóźnienie o 5 klatek. Ostatnia klatkę przesuwam do klatki nr 85. Otrzymałam litery, które zmniejszają się startując w odstępach czasu i powoli układają napis. Dla większego efektu można dodać efekt Alpha pojawiania się liter z jednoczesnym pomniejszeniem. W tym celu należy zaznaczyć pierwszą literę wyrazu w jej pierwszej klatce. Powinna zmienić się zawartość panelu Properties na właściwości obiektu graficznego. Potem ustawiam w nim Color na Alpha 0%. I kolejno według schematu z każdą następną literą. Otrzymamy napis, w którym literki będą się pojawiać stopniowo. Maskowanie obiektu W tej części postaram się zaprezentować dwie rzeczy. Po pierwsze jak się tworzy efekt maski, po drugie w jaki sposób posługiwać się różnymi obiektami. Na początku tworzę nowy Movie Clip. W menu Insert wybieram New Symbol, a następnie ustalam jego nazwę i zachowanie na Movie Clip. Zatwierdzam. I w ten sposób mam już pierwszy klip filmowy. Potem buduję dwie warstwy. Górna nazwę maska, a dolną słowo. Przechodząc do 1 klatki napisu wpisuję do niej tekst, który ma być wyświetlany (np. pieseczek). W panelu Character ustawiam biały kolor tekstu. W tej warstwie wstawiam 35 pustych klatek W drugiej warstwie rysuję wąski prostokąt (będzie on odsłaniał napis), wyższy od wpisanego tekstu i szerokości około 30px. Jego kolor nie jest ważny, ponieważ nie będzie go widać na animacji. Stosując opcję Rotate możemy go pochylić. Prostokąt stawiam oczywiście przed tekstem i animujemy od prawej strony do lewej. Koniec animacji ma znajdować się w 35 klatce. Rys. 10. Tekst z prostokątem, który ma odsłaniać słowo podczas animacji. 32

Teraz klikam na warstwę "maska" prawym przyciskiem myszy i wybieram opcję Mask. Właściwości niższej warstwy zostaną automatycznie ustawione na Masked. Już teraz jeśli naciśniemy Enter zobaczymy ciekawy efekt. Ja jednak chcę zrobić coś troszkę innego, tak żeby napis był cały czas widoczny. W tym celu tworzę nową warstwę, nazywamy ją "tło" i umiejscawiam najniżej. Do warstwy tło kopiuję pierwszą klatkę z warstwy słowo, a następnie wstawiamy ją do 1 klatki warstwy "tło". Wybieram narzędzie Text Tool i zmieniam kolor naszego tekstu na szary. Wstawiam pustą klatkę do klatki 35 animacji. Pracea nad Movie Clipem jest skończona, teraz wystarczy go tylko umiejscowić na głównym polu pracy. Klikam na scene1, aby powrócić do głównej części animacji. Otwieram bibliotekę i przeciągam klip. Znajdzie się on automatycznie w pierwszej klatce pierwszej warstwy. Oprócz klipu w bibliotece mam także obiekt Graphic, w którym znajduje się prostokąt. Klikając dwukrotnie na tym obiekcie przeniosę się do okna, w którym mogę go edytować ale nie muszę. Animacja jest już gotowa. Animacja po torze Kolejny projekt, który stworze, będzie zawierał obiekt posiadający ściśle określona trajektorię. Użyję tu przewodnika ruchu czyli Motion Guide. Warstwa ta nie jest wyświetlana podczas animacji; by ją dodać klikam w polu warstw na ikonę z symbolem. Moja animacja będzie składać się z dwóch warstw: toru i warstwy z obiektem (znajdującej się nad pierwszą). Aby uzależnić je od siebie, klikam na nazwę drugiej prawym klawiszem myszki, z rozwiniętej listy wybieram opcję Properties i zmieniam typ na Guided. Kiedy obie są już połączone, to w warstwie toru przy pomocy ołówka rysuję dowolny tor ruchu (wybrałam spiralę). A w warstwie poniższej rysuję obiekt (np. strzałkę), który po owym torze będzie się poruszał i dodaję do niego animację. Oczywiste jest, iż ruch będzie rozpoczynał się od początku narysowanego toru do końca. Środek obiektu wstawiam na linię toru (powinien się on przykleić). Po czym klikam prawym klawiszem na klatkę nr 1 w warstwie z obiektem i wybieram Create Motion Tween. I w tym momencie tworzenia swojej animacji określam jej długość na 200 klatek. W ostatniej klatce wstawiam klatkę kluczową (F6). Trzeba zwrócić tu uwagę, iż tor także musi trwać tyle co animacja więc w klatce nr 200 i warstwie z torem wciskam klawisz F5. Będąc w ww. klatce warstwy z obiektem przenoszę go na koniec toru. I tu również powinien on przyciągnąć się do linii toru. Dobrze było by, gdyby zastosowany obiekt, obracała się podczas poruszania po torze. Aby to zrealizować klikam na dowolną klatkę w warstwie z obiektem, powiedzmy 40-tą. Po czym w panelu Properties określam 33

ustawienia trwającej animacji - ustawiam ilość obrotów obiektu; np. Rotate: CW 5 times oznacza 5 obrotów według wskazówek zegara lub Rotate: CCW 2 times 2 obroty przeciwnie do wskazówek zegara. Aby moja strzałka obracała się w zależności od toru animacji, powinnam wybrać Auto i zaznaczyć opcję Orient to path. Mogę także dodać powrót obiektu do stanu początkowego. Wystarczy, że kliknę prawym klawiszem na klatkę nr 1 i w warstwie z obiektem wybiorę opcję Copy Frames. Teraz klatkę tą powinnam wkleić w klatkę ostatnią. Da nam to efekt taki, że animacja powrotu będzie trwała tyle samo co animacja początkowa; z ta różnicą, iż moja strzałka nie będzie się teraz obracać. Należy pamiętać tu o przedłużeniu trwania warstwy z torem. Gdyż jej brak spowoduje ruch obiektu po linii prostej. Na koniec całość zapisujemy i możemy oglądać. Zmiana kształtu obiektu Dokonam tutaj płynnego przejścia jednego obiektu w drugi, oraz powrotu do obiektu początkowego. Cała animacja będzie zawierać się w jednej warstwie i trwać 40 klatek. Tworzę nowy dokument flasha i ustalam właściwości pola pracy. Szerokość na 300 px, wysokość na 200px i ilość klatek na 20 fps. Na scenie rysuję za pomocą narzędzia Oval Tool dowolnej wielkości koło. Przy pomocy panelu Align ustawiam obiekt na środku sceny. Zaznaczam klatkę 1 i z panelu Properties z pola Tween wybieramy opcje Shape. W klatce 20 wstawiamy klatkę kluczowa, następnie usuwam obiekt ze sceny i w jego miejsce wstawiamy dowolnej wielkości kwadrat. Zaznaczam klatkę 1 i przy użyciu kombinacji klawiszy Ctrl+Shift+H wstawiam cztery Shape Hints (są to punkty, które wstawiam w pierwszym obiekcie, a następnie w drugim określam ich położenie na końcu zmiany kształtu). Na środku sceny pojawia się czerwone kółeczka z literami a, b, c oraz d. Przechodzę do klatki 20, gdzie punkty a-d rozmieszczam w kolejnych wierzchołkach kwadratu. Jeżeli zostaną one rozmieszczone poprawnie to zmienią swój kolor na zielony, a w klatce pierwszej na żółty. Podczas trwania animacji każdy punkt, będzie się przemieszczał po linii prostej, ciągnąc za sobą róg obiektu. Dalej klikam prawym przyciskiem myszy w klatce nr 1, wybieramy opcje Copy i wklejamy ją w klatce nr 40. Potem zapisuję projekt. Gdy wykonamy już wszelkie zadania, powinno się zawsze przetestować poprawność wykonanej animacji. Możemy w tym celu użyć kombinacji klawiszy Ctrl+Enter lub wybrać opcje swf. Ostatnia czynnością jest publikacja animacji. I już możemy oglądać nasze dzieło. 34

Rys.11. Zdjęcia wykonane w odstępach około 1 sekundy ukazujące zmianę kształtu figury. Interaktywne przyciski obsługujące animację stworzone przy użyciu ActionScript W niniejszym projekcie postaram się zastosować kilka technik animacji i wykorzystać przy tym (czego nie było we wcześniejszych projektach) kod ActionScript. Zacznę od stworzenia sceny, na jakiej przyjdzie mi pracować przez najbliższy czas. Szerokość ustawiam na 320 pikseli, a wysokość na 120. Natomiast klatki będą się wyświetlać z prędkością 25 na sekundę. Następnie powinnam podzielić scenę na dwie części. Po jej lewej stronie będzie znajdował się klip filmowy z dowolnym obrazkiem, a z prawej animacja obsługiwana z poziomu języka skryptowego. Postaram się także sprawić, aby obrazek stał się niewidoczny, a w jego miejscu powstaną przyciski kontrolujące moje animacje. Po wybraniu rysunku ściągam go na scenę i umieszczam w lewym górnym rogu pola pracy. Po czym zamieniam go na klip filmowy, o nazwie container1 i ustawiam przezroczystość na zero. Teraz przejdę do tworzenia przycisków. Będą 4 o nazwach: piksele, zoomout, papierki oraz czyść. Trzy początkowe uruchamiać będą różne animacje, ostatni z kolei będzie służył do restartu. Z biblioteki przeciągam przycisk Button na scenę i kopiuje go trzy razy. Każdy z nich zaznaczam i przy użyciu panelu Properties wpisuje stosowne, wyżej wymienione nazwy. Mogę także nadać im etykietki. Zaznaczając wybrany przycisk i korzystając z zakładki Parameters. 35

Rys. 12. Schemat mojego projektu Mam już więc obrazek w klipie filmowym i przyciski sterujące. Pozostała strona prawa, która będzie tworzona tylko i wyłącznie z poziomu kodu. W tym celu wracam na wierzch sceny i klikam w Scene1. Po czym wchodzę do opisywanego już w części teoretycznej panelu Action. I tu powstanie mój kod, który będzie służył do klonowania klipu z obrazkiem znajdującego się z lewej strony na prawo. I równocześnie będzie odpowiedzialny za jego podział na małe elementy, do których będę mieć indywidualny dostęp. Nie pozostaje nam już nic innego, jak analiza kodu i omówienie jego działania. Moja zmienna określa na ile części ma być podzielony obrazek. ilosc=10; Dwie poniższe zmienne przechowują dane o wymiarach części obrazka: szerpuzla=container1._width/ilosc; wyspuzla=container1._height/ilosc; Tworzę klip o nazwie pojemnik, w którym znajdą się kwadraciki. _root.createemptymovieclip("pojemnik",120); Funkcja wycinająca: function puzle() { Inicjalizuję zmienną z numerem odtwarzanej animacji. nr_animacji=0; Pętla pozioma i pionowa, które rozkładają i dopasowują do siebie kwadraciki: for (i=1;i<=ilosc;i++) { 36