IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG

TWJ KOSZYK
DODAJ DO KOSZYKA

CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK

CZYTELNIA
FRAGMENTY KSIEK ONLINE

Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl

Macromedia Flash MX 2004.

Oficjalny podrcznik
Autor: Jen Dehaan
Tumaczenie: Rafa Joca (rozdz. 1 7, 13, dod. A C),
Konrad Mantorski (rozdz. 8 12)
ISBN: 83-7361-534-2
Tytu oryginau: Macromedia Flash MX 2004:
Training from the Source
Format: B5, stron: 416
Macromedia Flash MX 2004 i Macromedia Flash MX 2004 Professional to aplikacje
suce do tworzenia publikacji multimedialnych opartych na grafice wektorowej.
Mnogo narzdzi graficznych, moliwoci tworzenia animacji, stosowania plikw
graficznych i dwikowych w rnych formatach oraz rozbudowany obiektowy jzyk
programowania ActionScript daj projektantom nieograniczon swobod twrcz.
Za pomoc Flasha mona stworzy zarwno proste przyciski nawigacyjne, jak
i interaktywn witryn WWW korzystajc z baz danych i jzyka XML.
Macromedia Flash MX 2004. Oficjalny podrcznik to zbir wicze i przykadw
przygotowanych przy wsppracy z firm Macromedia producentem Flasha.
Dziki przykadom przedstawianym w kolejnych lekcjach poznasz poszczeglne funkcje
i narzdzia aplikacji Flash MX 2004. Dowiesz si midzy innymi, jak tworzy przyciski
i cza, rysowa i animowa, formatowa tekst, wczytywa zewntrzne dane
do aplikacji i pisa skrypty ActionScript.
Podstawy korzystania z Flasha
Narzdzia graficzne
Wprowadzanie i formatowanie tekstu
Tworzenie i edycja symboli
Animacja automatyczna i poklatkowa
Elementy interaktywne
Korzystanie z plikw dwikowych i cyfrowego wideo
Stosowanie komponentw do tworzenia interaktywnych formularzy
Wczytywanie danych z plikw
Podstawy jzyka ActionScript
Publikowanie gotowej prezentacji

Poznaj moliwoci Flasha MX 2004 w praktyce,

wykorzystujc podrcznik polecany przez firm Macromedia.

Spis treci
O Autorce ................................................................................................................................................................................................. 9
Wprowadzenie ..................................................................................................................................................................................... 11
Lekcja 1. Podstawy programu...................................................................................................................................................... 17
Wprowadzenie do programu Macromedia Flash MX 2004................................................................................. 18
Przestrze robocza Flasha .........................................................................................................................................20
Tworzenie pierwszego dokumentu ..........................................................................................................................22
Korzystanie z paneli................................................................................................................................................... 26
Listwa czasowa i klatki............................................................................................................................................... 30
Warstwy ....................................................................................................................................................................... 34
Modyfikacja ustawie programu ............................................................................................................................. 38
Testowanie pliku FLA................................................................................................................................................ 41
Szukanie pomocy ....................................................................................................................................................... 43
Projekt.......................................................................................................................................................................... 45

Lekcja 2. Tworzenie grafiki............................................................................................................................................................ 47

Przybornik...................................................................................................................................................................49
Tworzenie grafiki przy uyciu narzdzi rysowania ............................................................................................... 53
Korzystanie z prowadnic, siatek, wsprzdnych i przycigania......................................................................... 56
Tworzenie nowej grafiki ............................................................................................................................................ 57
Tworzenie i korzystanie z masek.............................................................................................................................. 62
Dodawanie pocigni pdzla (konturw) ............................................................................................................. 63
Biblioteka .................................................................................................................................................................... 64
Import i optymalizacja grafiki ................................................................................................................................. 67
Import grafiki wektorowej ........................................................................................................................................70
Wypenienia i gradienty ............................................................................................................................................ 73
Modyfikacja grafiki....................................................................................................................................................77

Lekcja 3. Korzystanie z tekstu ..................................................................................................................................................... 81

Narzdzie Text ............................................................................................................................................................82
Dodawanie tekstu do dokumentu ...........................................................................................................................84
Korzystanie z osadzonych czcionek ........................................................................................................................90

Waciwoci czcionek................................................................................................................................................. 91
Dodawanie efektw listwy czasowej do pola tekstowego...................................................................................... 96
Sprawdzanie pisowni dokumentu ...........................................................................................................................98
Korzystanie z komponentw tekstowych ...............................................................................................................99
Istota dziaania dynamicznych pl tekstowych ................................................................................................... 100

Lekcja 4. Tworzenie i edycja symboli...................................................................................................................................101

Omwienie symboli................................................................................................................................................. 102
Symbole graficzne .................................................................................................................................................... 106
Tworzenie przyciskw ............................................................................................................................................. 107
Rozmieszczanie przyciskw na scenie....................................................................................................................110
Tworzenie przyciskw tekstowych..........................................................................................................................112
Tworzenie niewidzialnego przycisku .....................................................................................................................113
Tworzenie klipw filmowych i korzystanie z nich ...............................................................................................117
Tworzenie menu....................................................................................................................................................... 120
Tworzenie przyciskw klipw filmowych ............................................................................................................ 123
Duplikowanie symboli i dodawanie ich do sceny ............................................................................................... 126

Lekcja 5. Tworzenie animacji ....................................................................................................................................................129

Rodzaje animacji .......................................................................................................................................................131
Tworzenie automatycznej animacji ruchu ............................................................................................................131
Dodawanie automatycznej animacji ruchu.......................................................................................................... 135
Animacja poziomw przezroczystoci i wielkoci .............................................................................................. 138
Animacja przycisku klipu filmowego ................................................................................................................... 140
Tworzenie automatycznej animacji ksztatu .........................................................................................................141
Tworzenie animacji klatka po klatce ................................................................................................................. 143
Animacja wzdu cieki ......................................................................................................................................... 147
Efekty listwy czasowej w animacji .......................................................................................................................... 153

Lekcja 6. Dodawanie prostej interaktywnoci..................................................................................................................157

Dodawanie interaktywnoci do dokumentw Flasha.............................................................................................. 159
Wprowadzenie do behawiorw .............................................................................................................................. 159
Wykorzystywanie behawiora do wczytania obrazu JPEG .................................................................................. 160
Wykorzystywanie behawiora do otwarcia strony WWW ........................................................................................ 163
Przegldanie kodu behawiorw ............................................................................................................................. 165
Implementacja prostej interakcji z serwerem przy uyciu komponentu ......................................................... 166
Wprowadzenie do jzyka ActionScript ................................................................................................................. 169
Korzystanie z akcji sterujcych odtwarzaniem listwy czasowej ......................................................................... 175
Tworzenie przycisku powrotu do klatki home .................................................................................................... 176

MACROMEDIA FLASH MX 2004

Oficjalny podrcznik

Usuwanie kursora rki............................................................................................................................................. 178

Koczenie przycisku klipu filmowego.................................................................................................................. 179
Korzystanie z nawigatora skryptw i pinesek .......................................................................................................181

Lekcja 7. Dwik i wideo .............................................................................................................................................................185

Korzystanie z dwiku i filmw wideo.................................................................................................................. 187
Dostarczanie mediw w Internecie........................................................................................................................ 189
Dodanie dwiku do przycisku.............................................................................................................................. 189
Import dwiku do dokumentu............................................................................................................................. 192
Dostosowanie dwiku do wasnych potrzeb....................................................................................................... 195
Import wideo do Flasha........................................................................................................................................... 197
Eksport do formatu FLV .........................................................................................................................................208

Lekcja 8. Ekrany ...............................................................................................................................................................................211

Ekrany wprowadzenie ........................................................................................................................................ 213
Tworzenie nowej prezentacji ekranowej................................................................................................................ 214
Dodawanie do prezentacji dwiku i wideo ......................................................................................................... 217
Sterowanie dwikiem ............................................................................................................................................. 221
Przemieszczanie si midzy ekranami...................................................................................................................223
Wstawianie efektw przejcia i maski....................................................................................................................224
Tworzenie przewodnika w programie Flash MX 2004........................................................................................226
adowanie przewodnika do witryny Tech Bookstore..............................................................................................234

Lekcja 9. Tworzenie formularzy za pomoc komponentw ......................................................................................237

Formularze i dane wprowadzenie.....................................................................................................................238
Komponenty Flasha wprowadzenie .................................................................................................................240
Tworzenie formularza zwrotnego..........................................................................................................................243
Korzystanie z komponentu Button.......................................................................................................................247
Tworzenie kwestionariusza .....................................................................................................................................250
Korzystanie z klasy FocusManager........................................................................................................................257

Lekcja 10. Zamieszczanie danych dynamicznych ..........................................................................................................261

Dane dynamiczne wprowadzenie .....................................................................................................................262
Definiowanie usug internetowych w programie Flash MX Professional........................................................264
Wywoywanie usugi sieci WWW w programie Flash MX Professional ........................................................... 266
Tworzenie formularza zwrotnego w programie Flash MX 2004 .......................................................................270
Tworzenie kwestionariusza w programie Flash MX Professional .....................................................................273
Tworzenie kwestionariusza w programie Flash MX 2004 ..................................................................................276
Tworzenie strony ksiki rekomendowanej w programie Flash MX Professional..........................................278
Tworzenie strony ksiki rekomendowanej w programie Flash MX 2004.......................................................282
SPIS TRECI

Lekcja 11. Podstawy ActionScript .........................................................................................................................................287

ActionScript 1.0 i ActionScript 2.0 wprowadzenie ........................................................................................289
cisa kontrola typw i uzupenianie kodu ..........................................................................................................290
Klasy, metody i waciwoci ....................................................................................................................................293
Funkcje i instrukcje warunkowe.............................................................................................................................294
Zakres.........................................................................................................................................................................296
Klasa LoadVars .........................................................................................................................................................299
Tworzenie strony recenzji ....................................................................................................................................... 301
Korzystanie ze zdarze, uchwytw zdarze i sond.............................................................................................. 306
Formatowanie recenzji przy uyciu kaskadowych arkuszy stylw....................................................................309
Tworzenie stron katalogu.........................................................................................................................................311
Tworzenie gwnej strony katalogu ....................................................................................................................... 316
Tworzenie strony wiadomoci................................................................................................................................ 319
Tworzenie strony gwnej ....................................................................................................................................... 321
Dodawanie animacji do menu ...............................................................................................................................324
Sterowanie przyciskami menu................................................................................................................................ 330

Lekcja 12. Optymalizacja zawartoci ...................................................................................................................................333

Optymalizacja dokumentw .................................................................................................................................. 334
O organizowaniu aplikacji i dobrych nawykach ................................................................................................. 336
adowanie nowej zawartoci................................................................................................................................... 337
Dodawanie komponentu ProgressBar ..................................................................................................................344
adowanie witryny Tech Bookstore ......................................................................................................................347
Testowanie i usuwanie bdw z kodu witryny Tech Bookstore........................................................................ 351

Lekcja 13. Publikacja dokumentw Flasha........................................................................................................................357

Publikacja plikw SWF............................................................................................................................................ 358
Wykrywanie odtwarzacza Flash Player.................................................................................................................. 364
Osadzanie pliku SWF na stronie HTML .............................................................................................................. 367
Umieszczenie przykadowej witryny na serwerze WWW ...................................................................................370
Na zakoczenie ........................................................................................................................................................ 373

Dodatek A Instalacja rozszerze .............................................................................................................................................375

Dodatek B Zasoby...........................................................................................................................................................................381
Dodatek C Skrty klawiaturowe..............................................................................................................................................391
Skorowidz ..........................................................................................................................................................................................397

MACROMEDIA FLASH MX 2004

Oficjalny podrcznik

Tworzenie animacji

Flash ju od wielu lat jest dobrze znanym programem do tworzenia animacji. Gwnie dlatego, i
bardzo dobrze spenia zadanie animacji grafiki. Dziki niewielkim rozmiarom plikw SWF i doskonaej jakoci grafiki Flash sta si doskonaym narzdziem do tworzenia animacji dostpnych w Internecie. W ostatnich latach Flash jest nawet wykorzystywany do tworzenia animacji na potrzeby telewizji
(gwnie reklam telewizyjnych i kreskwek). Flash znalaz tak wiele zastosowa nie przez przypadek:
jest doskonaym narzdziem do tworzenia i animacji grafiki wektorowej.
Animacja
na tworzonej
witrynie.

Firma Macromedia dooya stara, by animacja obiektw na scenie bya bardzo prosta zarwno dla
pocztkujcych, jak i ekspertw. Bardzo atwo mona doda ruch do dokumentu, uywajc efektw
listwy czasowej, kreujcych animacj za nas. Wystarczy tylko kilka klikni i ju mona uzyska
efekty takie jak rozmycie, wybuch, rozszerzenie, transformacja i przejcie. Oczywicie mona take
tworzy wasne animacje, uywajc animacji automatycznej i animacji klatka po klatce. W niniejszej lekcji poznasz wszystkie te techniki.

Czego si nauczysz
Po tej lekcji bdziesz potrafi:

Opisa rne rodzaje animacji

Doda ruch do systemu menu

Wykorzysta efekt agodzenia do spowolnienia lub przyspieszenia automatycznej

animacji ruchu

Zmieni jasno i przezroczysto dziki automatycznej animacji ruchu

Doda automatyczn animacj ksztatu

Wykona animacj klatka po klatce

Wykorzysta warstw cieki ruchu, by porusza symbol po wektorowej ciece

Uy efektw listwy czasowej do animacji klonw

Czas trwania
Lekcja zajmie okoo 2 godzin.

Materiay do lekcji
Pliki multimedialne:
brak
Pliki startowe:
Lekcja05/bookstore9.fla
Lekcja05/map_starter.fla
Gotowy projekt:
Lekcja05/bookstore9_complete.fla
Lekcja05/map.fla

130

MACROMEDIA FLASH MX 2004

Oficjalny podrcznik

Rodzaje animacji
Animacja jest sekwencj obrazw tworzcych iluzj ruchu, jeeli kolejne obrazy s wywietlane wystarczajco szybko. We Flashu obrazem jest grafika znajdujca si w klatce listwy czasowej. Do uzyskania
animacji i ruchu w plikach FLA mona wykorzysta rysunki, zdjcia, a nawet kod ActionScript.
Istnieje kilka sposobw tworzenia animacji we Flashu. Mona kreowa automatyczn animacj
ruchu, automatyczn animacj ksztatu lub animacj klatka po klatce. Animacja automatyczna dotyczy oblicze (na przykad zmiany waciwoci lub ksztatu obiektu) wykonywanych przez
Flasha midzy ustalonymi stanami obiektu (klatkami kluczowymi). Gdy na przykad stosuje si
automatyczn animacj ruchu midzy zbiorem klatek kluczowych, Flash sam tworzy ruch, wypeniajc przestrze midzy klatkami kluczowymi odpowiednimi przejciami. Automatyczna animacja
ksztatu suy do modyfikacji wektorowych linii lub krzywych (na przykad do zamiany kwadratu
w okrg). Automatyczna animacja ruchu zmienia waciwoci obiektu, na przykad moe przesuwa obiekt po scenie. W tej lekcji wykonamy oba rodzaje ruchu.
Animacja klatka po klatce jest bardziej tradycyjnym sposobem tworzenia animacji. W tym przypadku to nie Flash wypenia przejcia midzy klatkami kluczowymi, ale my sami rysujemy poszczeglne klatki animacji. Tego rodzaju animacja potrzebna jest wtedy, gdy chce si uzyska pewne efekty
specjalne niemoliwe do wykonania innymi technikami. Oczywicie wykonanie animacji klatka po
klatce jest zdecydowanie bardziej pracochonne i zajmuje wicej miejsca w wynikowym pliku SWF.
Moliwe jest take tworzenie animacji na podstawie skryptw ActionScript. Dodatkowo istnieje
oddzielny interfejs programistyczny jzyka ActionScript powicony rysowaniu linii i ksztatw na
scenie Drawing API. Mona z niego korzysta na wiele rnych sposobw. Cho zagadnienie to
wykracza poza ramy niniejszej ksiki, warto zapozna si z tymi technikami, gdy ju opanuje si
podstawy skryptw ActionScript.

Tworzenie automatycznej animacji ruchu

Jak si przed chwil dowiedziae, automatyczna animacja ruchu suy do zmiany waciwoci obiektw w pewnym obszarze klatek. Mona zmienia waciwoci takie jak pooenie, rozmiar, przezroczysto, zabarwienie i obrt, a nawet przemieszcza obiekt wzdu cieki. Zawsze warto zamieni
obiekt na symbol przed przystpieniem do tworzenia automatycznej animacji ruchu, gdy pomaga
to utrzyma niewielkie rozmiary pliku SWF. Rozmiar pliku moe by niewielki, gdy Flash wielokrotnie korzysta z tego samego elementu z biblioteki, zamiast za kadym razem tworzy go od podstaw.
Moliwa jest automatyczna animacja ksztatu surowych obiektw wektorowych, ale nie mona w ten
sposb animowa bitmap ani klonw. Aby dokona takiej animacji, trzeba rozbi bitmap lub klon
na elementy skadkowe, uywajc polecenia Modify/Break Apart. W dalszej czci omwimy ten
rodzaj animacji automatycznej na podstawie grafiki wektorowej.

LEKCJA 5.
Tworzenie animacji

131

Istnieje kilka rnych sposobw dodawania automatycznej animacji ruchu do plikw FLA. Omwimy je w tej lekcji. W tym wiczeniu dodamy automatyczn animacj ruchu do menu witryny
wykonanego w poprzedniej lekcji, aby uzyska efekt wysuwania si i zamykania menu. Dodamy
take akcj stop, aby zatrzyma animacj (nie chcemy mie zaptlonej animacji w pliku SWF).
1. Otwrz plik bookstore8_complete.fla utworzony w poprzedniej lekcji. Znajdziesz go take

w katalogu Lekcja04. Zapisz now wersj dokumentu w pliku bookstore9.fla.

W lekcji 4. wykonalimy wikszo symboli, ktrych animacj zajmiemy si w niniejszej
lekcji. Zapisujemy dokument pod now nazw, poniewa dodajemy wiele nowych informacji
do tego pliku. Zapisujc now wersj, zawsze mona powrci do starszej wersji, gdy co
poszo nie tak i zacz wszystko od pocztku.
2. Znajd klon symbolu products_btn na scenie, nacinij klawisz F8, aby skonwertowa go

do klipu filmowego. Nadaj klipowi nazw productsMenu_mc.

Ten proces moe si niektrym osobom wydawa nieco dziwny. Powodem, dla ktrego
umieszcza si grafik, przyciski i linie wewntrz klipu filmowego, jest moliwo jednoczesnej
animacji caoci. Prba osobnej animacji poszczeglnych elementw jest zbyt pracochonna.
Poza tym przy aktualnych ustawieniach dokumentu bezporednia animacji products_mc nie
byaby moliwa. Umieszczenie wszystkiego w klipie filmowym zapewnia animacj wszystkiego
jako jednej caoci i dodatkowo umoliwia sterowanie animacj z poziomu kodu ActionScript.
Jeeli masz problemy z zaznaczeniem menu, poniewa przyciski uoone s jeden nad drugim, zablokuj
warstw buttons i dodatkowo ukryj j, klikajc kropk pod ikon kdki.
3. Dwukrotnie kliknij klon productsMenu_mc, aby rozpocz jego edycj na scenie. Powiksz

menu, jeeli jest to konieczne.

Po dwukrotnym klikniciu klonu productsMenu_mc pozostaa cz sceny stanie si wyszarzona,
aby mona si byo skoncentrowa na edycji symbolu. Edycja symbolu na scenie umoliwi
animacj menu wzgldem innych obiektw.
Aby powikszy menu, wybierz narzdzie Zoom z przybornika. Narzdzie jest ustawione na powikszanie, jeli na narzdziu wida znak plus. Jeeli nie wida tego znaku, wybierz opcj Enlarge z dziau
opcji przybornika.
Kliknij menu na scenie, uywajc narzdzia Zoom. Scena powikszy si, zachowujc menu
na rodku. Powtrz ten krok kilka razy, ale upewnij si, i przy powikszeniu nadal
wida przycisk products_btn powyej menu. Wybierz narzdzie Selection z przybornika
po zakoczeniu powikszania.
4. Zaznacz warstw Layer 1 i zmie jej nazw na menu tween. Wstaw now warstw i nadaj jej

nazw actions. Dodaj klatki kluczowe do warstwy actions w klatkach 11. i 20.
Zaznacz warstw menu tween i kliknij przycisk Insert Layer. Zmie nazw nowej warstwy
na actions. Utwrz nowe klatki kluczowe w klatkach 11. i 20. nowej warstwy, zaznaczajc
kad z klatek i naciskajc klawisz F6. Zmienimy pooenie klipu filmowego w kadej
132

MACROMEDIA FLASH MX 2004

Oficjalny podrcznik

klatce kluczowej. Zmiana pooenia klipu filmowego utworzy animacj po dodaniu

automatycznego przejcia midzy klatkami kluczowymi. Automatyczn animacj dodamy
w nastpnym wiczeniu.
Jeeli pozostawisz na scenie klip filmowy zawierajcy wicej ni jedn klatk, bdzie on
odtwarzany w ptli a do zatrzymania go za pomoc odpowiedniego kodu ActionScript.
W nastpnym kroku dodamy akcj stop, aby wyczy zaptlenie klipu filmowego.
5. Dodaj akcj stop do listwy czasowej sterujcej animacj.

Otwrz panel Actions, wybierajc polecenie Window/Development Panels/Actions z gwnego menu.

Panel ten pojawi si zadokowany na dole sceny w systemie Windows lub bdzie panelem
swobodnym w systemie Mac OS. Okno skryptu to duy obszar tekstowy po prawej stronie
panelu. Po lewej stronie panelu znajduje si nawigator skryptw i pasek narzdziowy akcji.

Dodamy teraz troch kodu ActionScript do panelu Actions. Zaznacz klatk kluczow
z pierwszej klatki listwy czasowej i wpisz w oknie skryptu tekst stop();. Nastpnie zaznacz
klatk kluczow w klatce 11. i wpisz ten sam tekst. Powtrz to samo dla klatki 20. Akcja stop
zatrzyma odtwarzanie aktualnego klipu filmowego w tych klatkach. W lekcji 11. dodamy kod,
ktry spowoduje odpowiednie animowanie menu. Powodem, dla ktrego umieszczamy akcj
stop przed klatk kluczow z klatki 12. (wykonamy to w nastpnym kroku), jest potrzeba
zatrzymania animacji po rozwiniciu menu. Gdyby brako tej akcji, zaczaby by odtwarzana
animacja zamykania menu. Podobnie po zakoczeniu animacji zamykania menu istnieje
odpowiednia akcja stop wyczajca ponowne rozwinicie menu.
Gdy zakoczysz dodawanie kodu ActionScript, zablokuj warstw actions, klikajc kropk pod
ikon kdki. W ten sposb zabezpieczymy si przed dodaniem czegokolwiek do tej warstwy.
Zaleca si nieumieszczanie adnej surowej grafiki, klonw symboli, komponentw i innych
elementw na warstwach kodu ActionScript. Jeeli umiecisz kod na tej samej warstwie
co inne obiekty, na przykad komponenty, po eksporcie dokumentu do formatu SWF
mog si pojawi pewne problemy. Poza tym takie rozwizanie moe znacznie utrudni
testowanie plikw FLA (patrz pierwszy rysunek na nastpnej stronie).
6. Wstaw now warstw o nazwie labels. Dodaj do nowej warstwy dwie klatki kluczowe

w klatkach 2. i 12., a nastpnie zablokuj t warstw.

Utwrz now warstw bezporednio pod warstw actions i nadaj jej nazw labels. Utwrz nowe
klatki kluczowe w klatkach 2. i 12., zaznaczajc kad z nich i naciskajc klawisz F6.

LEKCJA 5.
Tworzenie animacji

133

Zaznacz drug klatk warstwy labels i wpisz nazw etykiety slidedown w polu tekstowym
<Frame Label> z inspektora Properties. Nastpnie zaznacz klatk 12. i w tym samym polu
wpisz tekst slideup. Na kocu zablokuj warstw labels w sposb opisany w poprzednim kroku,
aby uniemoliwi przypadkow modyfikacj zawartoci warstwy.

7. Wstaw nowe klatki kluczowe w klatkach 12. i 20. warstwy menu tween.

Te klatki zdefiniuj sposb animacji menu. Klatka 12. jest kocem animacji otwierania
menu i pocztkiem animacji zamykania menu.
8. Zmie pooenie klipu filmowego product_mc w klatce 12.

Zaznacz klon product_mc na scenie w klatce 12. Przemie klip dokadnie w d, przytrzymujc
klawisz Shift i naciskajc klawisz strzaki w d a do momentu znalezienia si klipu
dokadnie poniej paska bar_gr (patrz rysunek na nastpnej stronie).
9. Powr do gwnej sceny i powtrz te same kroki dla dwch pozostaych menu.

Kliknij cze Scene 1 na pasku edycji, aby powrci na gwn scen. Powtrz kroki od 2. do 8.
dla symboli contact_mc i company_mc. Gdy skoczysz ten krok, wszystkie trzy menu bd
gotowe do wykonania w nich animacji automatycznej.
10. Pamitaj o zapisaniu do pliku zmian w dokumencie FLA.

Mamy ju ustawione klipy filmowe menu w taki sposb, i bardzo atwo bdzie mona
doda do nich automatyczn animacj ruchu. Zamiast wstawia automatyczn animacj,
a nastpnie dodawa zawarto, najpierw rozmiecilimy zawarto, a dopiero pniej
dodamy animacj automatyczn. Flash jest elastyczny i umoliwia zastosowanie wielu
rnych podej do tworzenia animacji: mona najpierw doda automatyczn animacj
ruchu, a nastpnie przesun klon lub te najpierw przesun klon, a dopiero pniej
utworzy animacj automatyczn. W nastpnym podrozdziale dodamy animacj
automatyczn, aby oywi wykonane symbole.

134

MACROMEDIA FLASH MX 2004

Oficjalny podrcznik

Na danej warstwie mona utworzy tylko jedn animacj automatyczn ruchu. Jeeli chce si wykona
animacj wielu symboli, trzeba umieci kady z symboli na osobnej warstwie. Aby przenie kilka
symboli znajdujcych si na jednej warstwie do wielu warstw, wystarczy zaznaczy symbole i uy
polecenia rozdzielania na warstwy (Modify/Timeline/Distribute to Layers).
Rozdzielanie na warstwy przydaje si na przykad wtedy, gdy trzeba wykona animacj poszczeglnych znakw bloku tekstu (po wczeniejszym rozbiciu tekstu na litery) lub te po zaimportowaniu
grupy elementw w czasie tworzenia pliku FLA. Flash zmieni nazwy kadej warstwy, uywajc
nazwy zaimportowanego pliku. Rozdzielenie na warstwy przyspiesza proces tworzenia filmw
Flasha, gdy zapewnia lepsz organizacj dokumentu.

Dodawanie automatycznej animacji ruchu

Automatyczna animacja ruchu suy midzy innymi do zmiany pooenia, jasnoci, przezroczystoci i zabarwienia klonu na scenie. W inspektorze Properties znajduje si rozwijana lista o nazwie Color,
ktra suy do zmiany jasnoci, przezroczystoci i zabarwienia klonu. Opcja Advanced umoliwia
LEKCJA 5.
Tworzenie animacji

135

jednoczesn zmian kolorw i przezroczystoci. Jeeli posiadasz klon z automatyczn animacj

ruchu, wybranie odpowiednich wartoci z listy w klatce kluczowej powoduje przejcie do wprowadzonych wanie ustawie lub rezygnacj z nich w trakcie trwania animacji.
Po ustawieniu klatek kluczowych w klipie filmowym, a take ustaleniu pooenia pocztkowego i kocowego klipu filmowego mona rozpocz wstawianie automatycznej animacji ruchu. Dodatkowo
wykonamy take animacj jasnoci menu, uywajc wartoci ustawionych w inspektorze Properties.
1. W dokumencie bookstore9.fla otwrz klon productsMenu_mc, jeeli nie jest on otwarty.

Zaznacz warstw menu tween.

Bdziemy pracowa z tym samym klipem filmowym i zawartoci, co w poprzednim wiczeniu.
2. Utwrz automatyczn animacj ruchu midzy klatk 1. i 12. dla animacji otwierania menu.

Kliknij prawym klawiszem myszy (Control+kliknicie w Mac OS) klatki od 1. do 12. z warstwy
menu tween i wybierz polecenie Create Motion Tween z menu kontekstowego. Zauwaysz, i kolor
ta cigu klatek zmieni kolor na purpurowy oraz e pojawia si strzaka przecinajca cay
cig klatek. Ta zmiana wygldu wskazuje, i powstaa automatyczna animacja ruchu.
Rysunek dla kroku 3. przedstawia listw czasow zawierajc dwie animacje.
3. Dodaj drug automatyczn animacj ruchu, aby zapewni animacj zamykania menu.

Nastpnie przetestuj animacj, przecigajc znacznik odtwarzania po listwie czasowej.

Powtrz krok 2., aby doda animacj automatyczn midzy klatkami 12. i 20. Zaznacz dowoln
z klatek z podanego przedziau i kliknij prawym klawiszem myszy (Control+kliknicie w Mac
OS), a nastpnie z menu kontekstowego wybierz polecenie Create Motion Tween. Gdy wykonasz
te kroki, menu bdzie si otwierao midzy klatkami numer 1 i 12 oraz zamykao midzy
klatkami numer 12 i 20. Przecignij znacznik odtwarzania, aby si o tym przekona.

Po wykonaniu animacji automatycznej zawsze mona zmieni czas jej trwania, dodajc lub usuwajc klatki znajdujce si midzy klatkami kluczowymi. Klatki mona doda, zaznaczajc jedn
z klatek wewntrz animacji i naciskajc klawisz F5. Klatki mona usun poleceniem Remove
Frames z menu kontekstowego. Flash automatycznie dostosuje animacj do wprowadzonych zmian.

4. Dodaj agodzenie ruchu do automatycznej animacji, uywajc inspektora Properties.

Suwak Ease znajduje si w inspektorze Properties, gdy zaznaczona jest automatyczna animacja
ruchu. Mona agodzi animacj na pocztku lub na kocu, aby uzyska efekt przyspieszania
lub spowalniania. Domylnie agodzenie (parametr Ease) jest ustawione na 0, co oznacza brak
efektu. Wprowadzenie wartoci domylnych w granicach od 1 do 100 powoduje spowolnienie
136

MACROMEDIA FLASH MX 2004

Oficjalny podrcznik

animacji na jej kocu. Wpisanie wartoci ujemnych od 1 do 100 powoduje pocztkow

powolno animacji, a nastpnie jej przyspieszenie. Pierwszy rodzaj animacji nazywany jest
animacj spowalniajc, a drugi animacj przyspieszajc.
Zaznacz pierwsz klatk i rozwi panel inspektora Properties. Ustaw suwak Ease na warto 100,
a wykonasz animacj spowalniajc (menu na kocu animacji bdzie si przesuwao wolniej
ni na jej pocztku). Nastpnie zaznacz klatk 12. i ustaw suwak Ease na warto 100,
co oznacza animacj przyspieszajc. Menu bdzie powoli przyspieszao w trakcie zamykania.

5. Dodaj animacj jasnoci do menu, a nastpnie przetestuj animacj, przecigajc znacznik

odtwarzania po listwie czasowej.

Zaznacz klon productsMenu_mc z pierwszej klatki warstwy menu tween. Musisz zaznaczy klon,
a nie klatk, aby dosta si do waciwoci jasnoci. Wybierz opcj Brightness z rozwijanej listy
Color z inspektora Properties. Zmie warto na 85%. Zaznacz productsMenu_mc z klatki 12.
i upewnij si, i jasno jest nadal ustawiona na 0%. Przecignij znacznik odtwarzania,
aby zobaczy animacj. Przyjrzyj si dokadnie rodzajowi uzyskanej animacji.
Powiniene stosowa animacj jasno zamiast animacji przezroczystoci wszdzie tam, gdzie jest to
moliwe, poniewa animacja przezroczystoci, szczeglne nad zoonymi bitmapami, znacznie bardziej
obcia procesor ni animacja jasnoci. Po prostu Flash musi wykona w tym pierwszym przypadku znacznie wicej oblicze ni dla animacji jasnoci.

6. Powtrz kroki od 2. do 5. dla dwch pozostaych menu z pliku FLA. Sprawd animacje,

przecigajc znacznik odtwarzania listwy czasowej.

Powtrz kroki od 2. do 5. dla dwch pozostaych menu dokumentu, aby wszystkie menu
posiaday stosowne animacje. Po dodaniu animacji dla kadego z menu, uyj znacznika
odtwarzania, aby sprawdzi poprawno dziaania animacji. Moliwe jest take nacinicie
klawisza Enter do sprawdzenia animacji. W tym przypadku animacja bdzie odtwarzania
w rodowisku autorskim a do osignicia koca listwy czasowej.
7. Powr na gwn scen. Wyczy bibliotek i zapisz dokument FLA.

Kliknij cze Scene 1, aby powrci do gwnej listwy czasowej. Wyczy bibliotek, umieszczajc
symbole productsMenu_mc, companyMenu_mc i contactMenu_mc w bibliotece. Zapisz zmiany
dokonane w pliku FLA.

LEKCJA 5.
Tworzenie animacji

137

Gdy stosuje si automatyczn animacj ruchu, istnieje moliwo okrelenia kierunku i stopnia obrotu
zaznaczonego symbolu. Istniej cztery opcje obrotu: None (brak), Auto (automatyczny), CW (zgodnie
z ruchem wskazwek zegara), CCW (przeciwnie do ruchu wskazwek zegara). Jeeli wybrae opcj
Auto, obrt przeprowadzany jest w tym kierunku, ktry wymaga najmniejszego kta. Dwie ostatnie opcje obracaj obiekt w zadanym kierunku podan liczb razy.

Animacja poziomw przezroczystoci i wielkoci

Zmiana przezroczystoci klonu nie rni si zbytnio od przesuwania klonu na scenie. W zasadzie
wykonuje si j identycznie jak zmian jasnoci (patrz poprzednie wiczenie). W obu przypadkach
potrzebny jest cig klatek z automatyczn animacj, dla ktrych mona zastosowa przejcie. Jak
ju wczeniej wspominaam, warto alpha odpowiada kryciu (przezroczystoci) obiektu. Jeeli warto alpha jest ustawiona na 0, obiekt nie jest widoczny na ekranie. Jeeli warto alpha jest ustawiona na 100%, obiekt jest nieprzezroczysty.
W tym wiczeniu zastosujemy automatyczn animacj ruchu, aby uzyska efekt przyciemniania
powiaty animowanej za logo, a take efekt zmiany rozmiaru. Nadal pracuj na pliku bookstore9.fla
z poprzedniego wiczenia.
1. Zaznacz symbol glow_gr i skonwertuj go do klipu filmowego o nazwie bookglow_mc.

Zmie nazw warstwy Layer 1 na glow animation.

Upewnij si, i znajdujesz si na gwnej scenie, klikajc cze Scene 1 na pasku edycji.
Znajd klon symbolu glow_gr wewntrz symbolu logo_mc. Zaznacz go i nacinij klawisz F8,
aby skonwertowa go do klipu filmowego o nazwie bookglow_mc. Musisz zmieni symbol
graficzny na klip filmowy, poniewa animacja ma by stale odtwarzana na scenie. Upewnij
si, i warstwy pageTurn i logo s zablokowane, aby mc bez przeszkd zaznaczy klon glow_gr.
Dwukrotnie kliknij utworzony klip filmowy bookglow_mc i zmie nazw domylnej warstwy
Layer 1 na glow animation.
2. Utwrz klatk kluczow w klatce 35. i 70. na warstwie glow animation.

Zaznacz klatk 35. warstwy glow animation i dodaj now klatk kluczow. Spowoduje to
skopiowanie zawartoci klatki 1. do nowej klatki kluczowego.
Podobnie postp w przypadku klatki 70. W dalszej czci wiczenia zmodyfikujemy
przezroczysto i rozmiar klonu symbolu.
3. Zmie rozmiar glow_gr, uywajc narzdzia Free Transform.

Zaznacz ujcie 35. warstwy glow animation. Wcz narzdzie Free Transform z przybornika
i przecignij jeden z uchwytw naronikowych do rodka symbolu, aby zmniejszy klon.
Aby zachowa odpowiednie skalowanie, w trakcie przecigania przytrzymaj klawisz Shift.
Tak zmie rozmiar klonu, aby ukry si on za grafik logo (patrz rysunek z punktu 4.).
4. Zmie przezroczysto klonu glow_gr, uywajc inspektora Properties i automatycznej

animacji ruchu.

138

MACROMEDIA FLASH MX 2004

Oficjalny podrcznik

Zmienie rozmiar grafiki w klatce 35. Teraz zmie przezroczysto klonu. Zaznacz klon
w klatce 35., uywajc narzdzia Selection. Wybierz opcj Alpha z rozwijanej listy Color
z inspektora Properties. Przesu suwak Alpha z wartoci 100% na 80%.

Jeeli wydaje Ci si, i ta warto nie wyglda najlepiej, metod prb i bdw ustal inn warto.

Pamitaj o tym, i modyfikacje wykonywane na scenie dla klonu w aden sposb nie wpywaj na
symbol w bibliotece. Jeeli teraz przecignby nowy klon symbolu na scen, wygldaby on tak samo,
jak klon glow_gr sprzed modyfikacji.
5. Dodaj automatyczn animacj ruchu, aby skalowa grafik, a nastpnie przecignij znacznik

odtwarzania po listwie czasowej.

LEKCJA 5.
Tworzenie animacji

139

Kliknij dowoln kratk od 1. do 35. i otwrz panel inspektora waciwoci. Zmie opcj
z rozwijanej listy Tween z None na Motion. Podobnie postp dla klatek w przedziale od 35.
do 70. Klip filmowy powinien teraz skalowa powiat i bardziej j tonowa przed powrotem
do oryginalnego ksztatu. Mona przetestowa poszczeglne klipy filmowe, zaznaczajc
pierwsz klatk klipu i wybierajc polecenie Control/Play z gwnego menu. W ten sposb
nie trzeba eksportowa caego filmu SWF, aby sprawdzi jeden klip filmowy.
6. Przenie klip filmowy bookglow_mc do folderu movie clips w bibliotece. Zapisz dokument FLA

przed przejciem do nastpnego wiczenia.

Animacja przycisku klipu filmowego

W lekcji 4. utworzylimy dwa przyciski klipw filmowych: jeden dla spisu treci i jeden dla przykadowego rozdziau. W tym wiczeniu zamierzamy doda animacj do tych przyciskw, aby wypenienie posiadao janiejszy kolor, gdy odwiedzajcy stron najedzie kursorem na przycisk (rozjanienie
bdzie animowane). Przyciski klipw filmowych wykorzystaj animacj rozjanienia w podobny
sposb, jak wczeniejsze animacje menu. Przycisk bdzie animowany wtedy, gdy uytkownik umieci
kursor nad przyciskiem, oraz wtedy, gdy zsunie kursor myszy z przycisku. Przycisk klipu filmowego posiada specjalne etykiety klatek, wic Flash wie, ktre klatek odpowiadaj danym stanom przycisku. W tym przykadzie wykorzystamy etykiety _over i _down odpowiadajce stanom Over i Down
rzeczywistych przyciskw.
Nadaj pracujemy z plikiem bookstore9.fla.
1. Znajd symbol samplechapter_mc w bibliotece i kliknij go dwukrotnie.

Po dwukrotnym klikniciu symbolu zostanie on otwarty w trybie edycji. Odblokuj warstw

fill i upewnij si, i pozostae warstwy s odblokowane przed przejciem do nastpnego
kroku, gdy w ten sposb uniemoliwi si modyfikacj warstw text i stroke.
2. Zaznacz warstw fill i wstaw klatk kluczow dla etykiety _over (klatka 14.), a take w ostatniej

klatce klipu filmowego (klatka 25.).

Kliknij, aby zaznaczy klatk i nacinij klawisz F6, by wstawi klatk kluczow. Powtrz ten
krok dla klatek 14. i 25. Bd istniay dwie animacje: jedna dla stanu _over i jedna dla stanu
_down. Chcemy utworzy animacj dla stanu _over jako odwrcon animacj dla stanu
_down. Z tego powodu pocztek animacji _over bdzie taki sam, jak koniec animacji _down.

140

MACROMEDIA FLASH MX 2004

Oficjalny podrcznik

3. Dodaj animacj jasnoci do klonu fill_gr i wstaw klatk kluczow w klatce 15.

Zaznacz klatk kluczow w etykiecie _over i rozwi panel inspektora Properties. Wybierz opcj
Motion z menu Tween, aby wstawi automatyczn animacj ruchu. Zaznacz klon fill_gr z ujcia
14. i wybierz opcj Brightness z listy Color z inspektora Properties. Zmie warto na 85%.
Gdy skoczysz, zaznacz klatk 15. i wstaw klatk kluczow (klawisz F6). Zmie opcj z listy Tween
na Motion. Przecignij znacznik odtwarzania, aby sprawdzi poprawno wykonanej animacji.

Jeli w tym momencie przetestujesz przycisk, nie bdziesz widzia animacji rozjaniania. Jest to
spowodowane tym, e przycisk klipu filmowego musi zawiera specjalny kod ActionScript, aby by
traktowany przez Flasha jako przycisk. Kod ten dodamy w kolejnej lekcji.
4. Powtrz kroki od 1. do 3. dla klonu toc_mc.

Klip filmowy toc_mc take powinien znajdowa si w bibliotece. Kliknij go dwukrotnie,

aby wej do trybu jego edycji. Wykonaj te same kroki, co w przypadku symbolu
samplechapter_mc. Chcemy, by oba przyciski byy animowane w ten sam sposb.
5. Zablokuj warstw fill na listwie czasowej, zapisz zmiany i powr do gwnej listwy czasowej.

Tworzenie automatycznej animacji ksztatu

Automatyczna animacja ksztatu umoliwia stworzenie efektu zmiany ksztatu odbywajcej si
w okrelonej liczbie klatek. Tego rodzaju animacja zapewnia moliwo zmiany dugo linii, wyginanie linii itp. Innymi sowy, zapewnia modyfikacj ksztatu, co pozwala uzyska bardzo interesujce efekty. Zamiast rcznie tworzy wszystkie ksztaty w kolejnych klatkach animacji, wystarczy
tylko ustali pocztek i koniec animacji, a Flash wykona za nas odpowiednie obliczenia. Na jednej
warstwie moe si znajdowa jedna lub wicej animacji ksztatu, cho w pewnych sytuacjach poszczeglne ksztaty mog sobie nawzajem przeszkadza. Kreowane efekty mog by zarwno bardzo
proste, jak i bardzo zoone.
Automatyczna animacja ksztatu moe by stosowana dla surowej grafiki wektorowej (oznaczanej
przez wzorzec krzyykowy po jej zaznaczeniu) lub bitmap, dla ktrych wczeniej wykonano polecenie
Modify/Break Apart lub Trace Bitmap. Jest to bardzo elastyczny sposb animacji, ale by uzyska
podane efekty przy wikszych zmianach ksztatu, trzeba stosowa ksztaty pomocnicze.

LEKCJA 5.
Tworzenie animacji

141

Automatyczna animacja ksztatu czsto daje nieoczekiwane wyniki. Wynikaj one przede wszystkim z tego, i Flash dokonuje jak najprostszego przejcia midzy dwoma ksztatami. Aby wskaza
inny sposb przejcia, mona zastosowa ksztaty pomocnicze. Ksztaty te wskazuj miejsca, przez ktre
ma przej punkt w trakcie swojej drogi od pooenia pocztkowego do kocowego. Kady ksztat
pomocniczy posiada oznaczenie literowe. Z tego powodu, jeli ksztat pomocniczy a jest umieszczony na pocztku animacji, animacja ta najpierw przejdzie do tego ksztatu, a dopiero pniej do
ksztatu kocowego.
Na przykad moesz mie animacj zamieniajc ksztat kota w ksztat psa. Jeeli posiadasz trjkt
reprezentujcy ucho kota z ksztatem pomocniczym a znajdujcym si na szczycie ucha kota,
a taki sam ksztat pomocniczy znajduje si na szczycie ucha psa, wtedy ucho kota od razu zamieni
si w ucho psa bez adnych porednich drg.
Istniej dwa sposoby mieszania dla automatycznych animacji ksztatu: rozkadowa (Distribute) i naronikowa (Angular). Pierwszy sposb mieszania tworzy pynne przejcia, ktre wydaj si nieco nieregularne.
Drugi sposb mieszania zachowuje naroniki i linie w trakcie przejcia. Mieszanie naronikowe
dostpne jest tylko dla ksztatw z prostymi liniami i ostrymi naronikami.
W tym wiczeniu opracujemy subtelny efekt przewracania kartek ksiki znajdujcej si w logo
witryny. Nadal pracujemy z plikiem bookstore9.fla.
1. Znajd klon pageTurn_mc wewntrz symbolu logo_mc. Kliknij go dwukrotnie, aby otworzy go

w trybie edycji. Wcz znaczne powikszenie strony, przynajmniej 800%.

Utworzye klip filmowy obracania strony w poprzedniej lekcji. Na razie klip ten po prostu
zawiera jedn lini. Animacja obracania strony skada si z dwch czci. Pierwsza cz
polega na utworzeniu automatycznej animacji ksztatu. Wanie tym zagadnieniem
zajmiemy si w niniejszym wiczeniu.
2. Zmie nazw warstwy Layer 1 na animation. Dodaj klatk kluczow w klatce 10., a nastpnie

zmodyfikuj now klatk kluczow.

Po zmianie nazwy warstwy na animation i dodaniu klatki kluczowej moesz zmodyfikowa
klatk 10. Zaznacz t klatk i upewnij si, i linia nie jest zaznaczona. Przesu kursor myszy
nad lini a do pojawienia si kursora przedstawionego na rysunku poniej.

Kliknij i przecignij lini, aby j wygi. Wygnij lini w sposb przedstawiony na pierwszym
rysunku na nastpnej stronie.
142

MACROMEDIA FLASH MX 2004

Oficjalny podrcznik

Przecignij mysz nad grn krawd linii a do pojawienia si kursora przedstawionego

na rysunku poniej. Kliknij i przecignij koniec linii lekko na prawo (patrz rysunek).

3. Wstaw automatyczn animacj ksztatu, uywajc inspektora Properties, a nastpnie

sprawd animacj.
Zaznacz pierwsze ujcie i otwrz panel inspektora Properties. Wybierz opcj Shape z rozwijanej
listy Tween. Pojawi si zielona strzaka na klatkach z warstwy animation. Oznacza to, i w tych
klatkach wystpuje animacja ksztatu.
Kliknij i przecignij znacznik odtwarzania midzy klatkami, aby podejrze animacj dodan
do logo. Dolny punkt krzywej powinien pozosta w tym samym miejscu (na czeniu ksiki).
Animacj dokoczymy w nastpnym wiczeniu.
4. Gdy zakoczysz tworzenie automatycznej animacji ksztatu, zapisz zmiany dokonane

w dokumencie, wybierajc polecenie File/Save.

W nastpnym wiczeniu dodamy animacj klatka po klatce, ktra dokoczy efekt przewracania
strony.

LEKCJA 5.
Tworzenie animacji

143