Adobe Flash CS3

Professional. Oficjalny
podrcznik
Autor: Adobe Creative Team
Tumaczenie: ukasz Schmidt
ISBN: 978-83-246-1230-7
Tytu oryginau: Adobe Flash CS3
Professional Classroom in a Book
Format: B5, stron: 352
Zawiera CD-ROM
Aktualne rdo wiedzy o Flashu CS3
Tworzenie plikw interaktywnych
Praca z ActionScript 3.0
Importowanie plikw audio i wideo
Publikowanie dokumentw Flasha
Adobe Flash CS3 Professional. Oficjalny podrcznik to kolejna ksika
w bestsellerowej serii podrcznikw z wiczeniami na temat oprogramowania. Program
Adobe Flash CS3 wykorzystywany jest przez profesjonalistw do tworzenia
interaktywnych stron WWW bogatych w materiay audio, wideo, grafik i animacje.
Podrcznik, oprcz opisu podstawowych koncepcji i funkcji programu, zawiera rwnie
nowoci, takie jak metody pracy z Action Script 3.0, wykorzystanie nowych
komponentw do usprawnienia projektw, importowanie symboli z warstw programu
Adobe Ilustrator oraz doczanie materiaw wideo programu Adobe After Effects i wiele
innych ciekawych moliwoci.
Adobe Flash CS3 Professional. Oficjalny podrcznik jest nie tylko doskonaym
kompendium dla pocztkujcych, ktrzy wykonujc kolejne lekcje poznaj krok
po kroku moliwoci programu, ale take dla zaawansowanych projektantw, chccych
wzbogaci swj warsztat, zdoby dodatkowe umiejtnoci i poszerzy wiedz. Ksika
zawiera opis wielu zaawansowanych funkcji, w tym wskazwki i techniki dotyczce
posugiwania si najnowsz wersj aplikacji.

Wydawnictwo Helion
ul. Kociuszki 1c
44-100 Gliwice
tel. 032 230 98 63
e-mail: helion@helion.pl

Podstawowe wiadomoci o Flashu

Tworzenie i edytowanie symboli
Praca z tekstem statycznym i dynamicznym, grafik, wideo i audio
Tworzenie animacji
Tworzenie plikw interaktywnych
Metody pracy z ActionScript
Korzystanie z komponentw
adowanie i optymalizacja zawartoci Flasha
Alternatywne opcje publikacji

Twrz wyjtkowe i oryginalne aplikacje we Flashu!

Doczona pyta CD dla Windows oraz Mac OS zawiera dodatkowe materiay
szkoleniowe dla programu Flash CS3 Basic oraz Professional, w tym 16 przewodnikw
w formie filmw!

Spis treci
Wstp
Seria Oficjalny podrcznik.................................................................11
Co na pycie CD ? .............................................................................12
Wymagania wstpne .........................................................................13
Instalowanie programu Flash .............................................................13
Optymalizacja dziaania .....................................................................13
Kopiowanie plikw lekcji ...................................................................13
Jak korzysta z lekcji? .........................................................................15
Dodatkowe zasoby ............................................................................15
Certyfikaty firmy Adobe....................................................................16

Wprowadzenie
Zawarto lekcji ................................................................................19
Uruchamianie Flasha i otwieranie pliku .............................................19
Obszar roboczy .................................................................................20
Panel Library ......................................................................................26
Korzystanie z panelu Property inspector ..........................................29
Korzystanie z panelu Tools ................................................................35
Wycofywanie dziaa we Flashu ........................................................40
Podgld projektu................................................................................41
Publikowanie projektu .......................................................................42
Korzystanie z pomocy Flasha ............................................................43
Korzystanie z usug online firmy Adobe ............................................47
Podsumowanie ..................................................................................49

6 SPIS TRECI

Praca z grafik
Zawarto lekcji ................................................................................51
Rozpoczcie ......................................................................................52
Rysowanie prostoktw....................................................................52
Stosowanie wypenie gradientowych ..............................................59
Tworzenie zaznacze ........................................................................63
Rysowanie owali ................................................................................68
Tworzenie prostej animacji ...............................................................71
Rysowanie linii ...................................................................................76
Modyfikowanie obiektw ..................................................................79
Maskowanie obiektw .......................................................................83
Testowanie filmu Flasha .....................................................................85
Podsumowanie ..................................................................................86

Tworzenie i edytowanie symboli

Zawarto lekcji ................................................................................89
Rozpoczcie ......................................................................................89
Importowanie plikw programu Illustrator ......................................90
Symbole .............................................................................................95
Konwertowanie obiektw na symbole..............................................96
Importowanie obrazw bitmapowych ..............................................97
Dodawanie bitmap do symbolu klipu filmowego ........................... 100
Praca z przyciskami......................................................................... 102
Dodawanie przezroczystoci ......................................................... 111
Podsumowanie ............................................................................... 116

ADOBE FLASH CS3 PROFESSIONAL 7

Oficjalny podrcznik

Praca z tekstem
Zawarto lekcji ............................................................................. 119
Rozpoczcie ....................................................................................120
Ukadanie warstw na listwie czasowej ............................................121
Umieszczanie zasobw w warstwach .............................................124
Animowanie za pomoc automatycznych cieek...........................127
Tworzenie tekstu............................................................................ 130
Animowanie tekstu za pomoc masek ........................................... 136
Tworzenie animacji wstrzsw za pomoc cieek ....................... 145
Podsumowanie ............................................................................... 150

Tworzenie animacji
Zawarto lekcji ............................................................................. 153
Rozpoczcie ................................................................................... 154
Zasady tworzenia animacji ............................................................. 155
Przygotowanie pliku projektu......................................................... 155
Animowanie symbolu klipu filmowego ........................................... 159
Praca z symbolami zagniedonymi ................................................ 162
Animowanie symbolu za pomoc maski......................................... 166
Przesuwanie obiektw na scenie.................................................... 172
Dodawanie dwiku ....................................................................... 175
Dodawanie akcji stop()................................................................... 175
Animowanie tekstu tytuowego ..................................................... 176
Przeksztacanie obiektw ............................................................... 178
Animacja pojawiajcych si obiektw ............................................ 183
Animowanie ruchu po ciece........................................................ 184
Podsumowanie ............................................................................... 189

8 SPIS TRECI

Tworzenie plikw interaktywnych

Zawarto lekcji ............................................................................. 191
Rozpoczcie ................................................................................... 192
Pliki interaktywne ........................................................................... 192
Projektowanie ukadu ..................................................................... 193
Tworzenie przyciskw ................................................................... 199
Uaktywnianie przyciskw............................................................... 215
Podsumowanie ............................................................................... 222

Podstawy jzyka ActionScript

Zawarto lekcji ............................................................................. 225
Rozpoczcie ................................................................................... 225
Praca z ActionScript 3.0 ................................................................. 226
Praca z instrukcjami warunkowymi ................................................ 231
Dodawanie akcji stop ..................................................................... 235
Stosowanie zmiennych ................................................................... 236
Wczytywanie danych z adresu URL ............................................... 239
Praca ze zdarzeniami ...................................................................... 240
Dodawanie skryptu obsugi zdarze do przyciskw ...................... 242
Podsumowanie ............................................................................... 246

Komponenty
Zawarto lekcji ............................................................................. 249
Rozpoczcie ................................................................................... 249
Komponenty ................................................................................... 250
Dodawanie komponentu tekstowego ............................................ 251
Wykorzystanie komponentw do tworzenia interaktywnoci ...... 258
Podsumowanie ............................................................................... 268

ADOBE FLASH CS3 PROFESSIONAL 9

Oficjalny podrcznik

Praca z dwikiem i wideo

Zawarto lekcji ............................................................................. 271
Rozpoczcie ................................................................................... 271
Przygotowanie pliku projektu......................................................... 273
Tworzenie przyciskw dwikowych............................................. 275
Tworzenie przyciskw miniatur filmw ......................................... 283
Przeduanie listwy czasowej.......................................................... 288
Przygotowanie zawartoci Flash Video .......................................... 290
Praca z materiaem wideo zawierajcym kanay alfa ...................... 297
Podsumowanie ............................................................................... 305

10

adowanie i optymalizacja zawartoci Flasha

Zawarto lekcji ............................................................................. 307
Rozpoczcie ................................................................................... 307
Przygotowanie elementw programu adujcego .......................... 308
adowanie filmu .............................................................................. 313
Tworzenie animacji dla programu adujcego ................................ 314
Zmiana widocznoci klipw filmowych .......................................... 317
Buforowanie bitmap ....................................................................... 319
Podsumowanie ............................................................................... 321

11

Publikowanie dokumentw Flasha

Zawarto lekcji ............................................................................. 323
Rozpoczcie ................................................................................... 323
Testowanie dokumentu Flasha ....................................................... 324
Dodawanie metadanych ................................................................. 325
Publikowanie filmu dla sieci WWW ............................................... 326
Alternatywne opcje publikacji ........................................................ 329
Podsumowanie ............................................................................... 335
Szesnastkowe kody kolorw .......................................................... 337
Skorowidz ....................................................................................... 339

5 Tworzenie animacji
Zawarto lekcji
W tej lekcji nauczymy si:

Animowa obiekty za pomoc cieek ruchu.

Przeksztaca obiekty za pomoc cieek zmiany ksztatu.

Uwzgldnia rnice midzy ciekami ruchu i ksztatu.

Zagnieda symbole.

Tworzy animacje wzdu cieki.

Animowa obiekty za pomoc masek.

Animowa poziom przezroczystoci.

Praca zajmie nam okoo dwch godzin. Moesz usun z dysku twardego plik poprzedniego
rozdziau i skopiowa folder Lekcja05.

154 LEKCJA 5
Tworzenie animacji

Rozpoczcie
Na pocztku obejrzymy gotowy projekt, ktry wykonamy w tym rozdziale. Bdzie to animowana
strona tytuowa.
1. Kliknij dwukrotnie plik 05End.swf znajdujcy si w folderze Lekcja05/05End i obejrzyj gotow
animacj.

Nasz projekt to animowana czowka kreskwki opowiadajcej o przygodach kosmity. W tym

rozdziale wykonamy animacj rk kosmity, za pomoc maski sprawimy, e oczy bd mruga,
wykorzystamy cieki ruchu do umieszczenia postaci w odpowiednim miejscu sceny, uyjemy
prowadnicy do poruszenia statku kosmicznego na scenie, a na zakoczenie za pomoc cieek
ksztatu zamienimy obok dymu w liter O.
2. Zamknij plik 05End.swf.
3. Kliknij dwukrotnie plik 05Start.fla znajdujcy si w folderze Lekcja05/05Start, aby otworzy
startowy plik projektu we Flashu.
4. Z rozwijanego menu View (widok) powyej sceny wybierz Fit In Window (dopasuj do
okna), w ten sposb bdziesz mg zobaczy posta kosmity znajdujc si jeszcze na obszarze
montaowym.
5. Wybierz File/Save As (plik/zapisz jako). Nazwij plik 05_workingcopy.fla i zapisz w folderze
Lekcja05/05Start. Zapisanie kopii roboczej da Ci pewno, i plik startowy bdzie cigle dostpny
na wypadek, jeli bdziesz chcia zacz od nowa.

ADOBE FLASH CS3 PROFESSIONAL 155

Oficjalny podrcznik

Zasady tworzenia animacji

Animacja to ruch lub inna zmiana waciwoci obiektu zachodzca wraz z upywem czasu. Moe
by bardzo prosta np. przesunicie kwadratu po scenie w poszczeglnych klatkach. Oczywicie
animacje mog by duo bardziej skomplikowane. Jak zobaczymy w tym rozdziale, moliwe jest
animowanie postaci w bardzo rnych aspektach: poruszanie rk i ng, oczu, uszu czy jzyka.
Obiekty mona przemieszcza w przestrzeni, zmienia ich kolor i przezroczysto, wielko, a nawet zamienia w zupenie inny ksztat.
Aby animowa obiekty we Flashu, musimy tworzy klatki kluczowe. Robilimy to ju w poprzednich rozdziaach. W kadej klatce kluczowej Flash zapisuje aktualny stan sceny, czyli pooenie
obiektu, jego kolor, wielko i ksztat oraz inne atrybuty. Tworzc tradycyjn (rczn) animacj,
umieszczamy klatk kluczow w kadej klatce i w kadej z nich zmieniamy stopniowo wygld
obiektu. Duo atwiej jest jednak korzysta z automatycznych cieek animacji ruchu i ksztatu
w takim przypadku tworzymy tylko pierwsz i ostatni klatk kluczow, a Flash sam dodaje
wszystkie stany porednie.
Automatyczna cieka ruchu (ang. motion tween) suy do szybkiego tworzenia animacji
zmiany pooenia na scenie, a take zmian wielkoci, koloru lub innych atrybutw. Ze cieek
tego rodzaju korzystalimy ju w poprzednich rozdziaach w celu animacji ruchu i poziomu
jasnoci obiektw na scenie. Automatyczna cieka ksztatu (ang. shape tween) tworzy klatki
animacji zmieniajce jeden ksztat w inny. W tym rozdziale uyjemy jej do zmiany chmury dymu
w literO. Animacji tego rodzaju nie da si wykona poprzez zdefiniowanie zmiany atrybutw
obiektu, poniewa ksztat pocztkowy i kocowy s cakowicie rne. cieka ksztatu stworzy
w tym przypadku pynn transformacj.
Flash udostpnia take szybki sposb animacji ruchu, ktrego droga bdzie bardziej skomplikowana ni linia prosta. Prowadnica ruchu (ang. motion guide) pozwala na stworzenie dowolnie
skomplikowanej trasy ruchu, przyczenie do niej obiektu, a nastpnie zastosowanie automatycznej cieki ruchu. Flash sam zadba o to, aby obiekt animowany w ten sposb nie opuci wyznaczonej trasy.

Przygotowanie pliku projektu

Plik 05Start.fla zawiera pojedyncz warstw o nazwie Alien. Posta kosmity znajduje si obok
sceny, a skadajce si na ni symbole umieszczone s w panelu Library (biblioteka). Inne obiekty,
jakimi si posuymy, zostay utworzone w programie Illustrator. S to m.in. tekst tytuowy, statek
kosmiczny, planeta i chmura dymu. Zanim rozpoczniemy tworzenie animacji, zaimportujemy
warstwy i symbole z pliku Illustratora i przygotujemy listw czasow.

156 LEKCJA 5
Tworzenie animacji

Importowanie warstw z pliku Illustratora

Wielu projektantw woli rysowa obiekty w programie Illustrator, a nastpnie importowa je do
Flasha. Tak jak robilimy to ju w poprzednich rozdziaach, zaimportujemy warstwy Illustratora
jako warstwy listwy czasowej Flasha. Obiekty zaimportujemy bezporednio na scen (poka si
obok postaci kosmity). Na pocztku zdefiniujemy ustawienia importu plikw Illustratora,
aby symbole byy importowane z centralnie umieszczonym punktem rejestracji.
1. Wybierz Edit/Preferences (edycja/ustawienia Windows) lub Flash/Preferences (Flash/ustawienia Mac OS). Na licie po lewej stronie okna kliknij AI File Importer (importer plikw AI).
2. W czci Movie clip registration (punkt rejestracji klipw filmowych) zaznacz centralny punkt
rejestracji i kliknij OK, aby zamkn okno dialogowe.

ADOBE FLASH CS3 PROFESSIONAL 157

Oficjalny podrcznik

3. Wybierz File/Import/Import To Stage (plik/importuj/importuj na scen).

4. Wyszukaj i zaznacz plik Assets.ai znajdujcy si w folderze Lekcja05/05Start, kliknij Open
(otwrz Windows) lub Import (importuj Mac OS).
5. W oknie dialogowym Import To Stage (importuj na scen) zaznacz wszystkie warstwy i symbole. Grafiki w poszczeglnych warstwach s symbolami klipw filmowych (s oznaczone ikon
klipu).
6. Z menu Convert Layers To (konwertuj warstwy na) wybierz Flash Layers (warstwy Flasha).
7. Zaznacz pole place objects at original position (umie obiekty w oryginalnym pooeniu).
8. Kliknij OK.

Flash zaimportuje wskazane warstwy na listw czasow. Symbole zostan dodane do biblioteki,
a instancje umieszczone na scenie obok postaci kosmity w tych samych miejscach, w ktrych
znajdoway si w pliku Illustratora. atwo je odszuka, a sama scena jest cigle pusta.

158 LEKCJA 5
Tworzenie animacji

Organizowanie listwy czasowej

Warstwy pojawiaj si na listwie czasowej w takiej kolejnoci, w jakiej znajdoway si w pliku
Illustratora. Dodamy warstwy dla akcji i dwiku oraz przesuniemy warstw Alien pomidzy dwie
inne, a nastpnie powikszymy wszystkie warstwy tak, aby skaday si ze 150 klatek.
1. Zaznacz warstw Cloud Morph i kliknij dwukrotnie ikon Insert Layer (wstaw warstw), aby
doda dwie nowe warstwy.
2. Pierwszej warstwie nadaj nazw Actions, a drugiej Audio.
3. Przesu warstw Alien pomidzy warstwy Title:Spaced oraz Spaceship. Porzdek warstw
na listwie czasowej powinien by teraz nastpujcy:

Actions

Audio

Cloud Morph

Title: O

Title: U

Title: T

Title: Spaced

Alien

Spaceship

Planets

4. Zaznacz klatk 150. warstwy Actions, nacinij Shift i zaznacz klatk 150. warstwy Planets
w ten sposb zostanie zaznaczona klatka 150. wszystkich warstw.
5. Nacinij F5, aby doda klatki do klatki 150.
Zawarto klatki 1. znajduje si teraz w kadej klatce a do klatki 150.

ADOBE FLASH CS3 PROFESSIONAL 159

Oficjalny podrcznik

Animowanie symbolu klipu filmowego

Symbole klipw filmowych maj wasne listwy czasowe, co daje moliwoci wszechstronnej animacji. Symbole tego rodzaju mona take zagnieda (nest) w innych symbolach klipw filmowych. W naszym projekcie symbol kosmity jest takim wanie nadrzdnym symbolem znajduj
si w nim zagniedone symbole gowy, rk itd.

Edytowanie symboli
Aby edytowa symbol, naley go dwukrotnie klikn na scenie lub w panelu Library (biblioteka).
Jeli dwukrotnie klikniemy go na scenie, przechodzimy do trybu edycji w miejscu. W tym trybie
Flash oznaczy kolorem szarym pozostae obiekty na scenie, ale pozostan one cigle widoczne.
Po dwukrotnym klikniciu symbolu w panelu Library w czasie edycji widoczny bdzie tylko
biecy symbol.
Edytujc symbol klipu filmowego, moemy dodawa warstwy i klatki kluczowe do jego listwy
czasowej. Na listwie czasowej symbolu mona wykona niemal wszystkie operacje dostpne dla
gwnej listwy czasowej.
Na pocztku przesuniemy i zmienimy wielko grafiki planety za pomoc automatycznej cieki
ruchu.
1. Wybierz View/Magnification/50% (widok/powikszenie/50%), aby zobaczy wszystko,
co znajduje si na obszarze montaowym.
2. Zaznacz grafik planety na obszarze montaowym. W panelu Property inspector (inspektor
waciwoci) wpisz 0 jako wartoci X i Y. Planeta przesunie si na scen.
3. Kliknij dwukrotnie planet na scenie. Flash otworzy listw czasow symbolu planety, ktra
zawiera pojedyncz warstw Layer 1.
4. Zaznacz klatk 280. warstwy Layer 1 i nacinij F6, aby wstawi klatk kluczow.
5. Zaznacz klatk 140. i wstaw kolejn klatk kluczow.
6. Majc cigle zaznaczon klatk 140., zaznacz planet na scenie.
7. W panelu Property inspector wpisz 100 jako wartoci X i Y. Nacinij Enter lub Return,
aby zastosowa warto. Planeta przesunie si w d i na prawo.
8. Zaznacz dowoln klatk pomidzy klatk 1. a 140. i wybierz Motion (ruch) z menu Tween
(klatki porednie) w panelu Property inspector.

160 LEKCJA 5
Tworzenie animacji

9. Zaznacz dowoln klatk pomidzy klatk 140. a 280. i wybierz Motion z menu Tween w panelu Property inspector.
Utworzylimy dwie automatyczne cieki ruchu: pierwsza animuje ruch od klatki 1. do 140.
(planeta przesuwa si w jednym kierunku i staje si coraz mniejsza), druga animuje ruch od klatki
140. do 280. (planeta przesuwa si w przeciwnym kierunku i staje si coraz wiksza).

10. Zaznacz klatk 140., a nastpnie zaznacz instancj planety na scenie.

11. Wybierz Window/Transform (okno/przeksztacenia), aby otworzy panel Transform
(przeksztacenia).
12. W panelu Transform zmie warto szerokoci i wysoko na 50% aktualnej, nacinij Enter lub
Return, aby zastosowa zmiany.

Jeeli chcesz zmieni wysoko i szeroko o identyczn warto, kliknij pole Constrain
(ogranicz) w panelu Transform bdziesz musia wpisa warto tylko jeden raz,
druga warto zmieni si automatycznie.

Tworzenie duplikatu animowanego symbolu

Edytujc symbol planety, utworzylimy animacj przesuwajc planet i zmieniajc jej wielko.
Teraz utworzymy dodatkowe instancje symbolu planety, a nastpnie zmodyfikujemy kad z nich,
aby zmieni wielko innych planet.
1. Kliknij przycisk Scene 1 na pasku edycji, aby powrci do gwnej listwy czasowej.
2. Zaznacz planet na obszarze montaowym.
3. Nacinij Alt (Windows) lub Option (Mac OS) i przecignij kopi instancji w inne miejsce sceny.
4. Powtrz krok 3. dwukrotnie dla dwch kolejnych instancji symbolu.
5. Zaznacz pierwsz z nowych instancji i zmie jej szeroko i wysoko na 30 pikseli za pomoc panelu Property inspector (inspektor waciwoci).

ADOBE FLASH CS3 PROFESSIONAL 161

Oficjalny podrcznik

6. Zmie szeroko i wysoko drugiej nowej instancji na 20 pikseli, a trzeciej na 10.

Na scenie znajduj si teraz cztery planety, kada innej wielkoci.

7. Nacinij Alt (Windows) lub Option (Mac OS) i przecignij kilka kopii kadej z instancji na
scen. Powiniene uzyska po pi planet kadej wielkoci.
8. Rozmie planety tak, aby sprawiay wraenie uoonych losowo (podobnie jak na poniszym
rysunku).

9. Wybierz Control/Test Movie (sterowanie/testuj film) i obejrzyj animacj. Planety malej

i przesuwaj si w jednym kierunku, a nastpnie rosn do swojej pierwotnej wielkoci i przesuwaj si w przeciwnym kierunku. Jeeli planety s zbyt blisko siebie lub s zbyt regularnie poukadane, dopasuj ich pooenie i przetestuj film ponownie.

162 LEKCJA 5
Tworzenie animacji

Praca z symbolami zagniedonymi

Symbol moe zawiera w sobie inne symbole. Moemy zagnieda symbole wewntrz innych
nawet na kilka warstw gbokoci. Kady zagniedony symbol moe by oddzielnie animowany,
co daje w efekcie zoon animacj. W tym projekcie wykonamy animacje rk i oczu kosmity jako
symboli zagniedonych, a nastpnie animacj caego ciaa.
Aby edytowa symbol, naley klikn go dwukrotnie na scenie lub w bibliotece. Jeeli natomiast
chcemy edytowa zagniedony symbol na scenie, na pocztku edytujemy symbol, ktry go zawiera, a nastpnie klikamy dwukrotnie symbol zagniedony.

Dodawanie warstw do listwy czasowej symbolu

Zaczniemy od edycji symbolu tuowia i gowy kosmity, ktry jest zagniedony w symbolu caej
postaci, dodamy warstwy na mrugajce oczy.
1. Zaznacz warstw Alien, a nastpnie zaznacz instancj alien_mc znajdujc si na obszarze
montaowym.

Uwaga: Nazwa symbolu to alien, ale nazwa instancji na scenie to alien_mc. Kadej instancji
symbolu mona nada unikaln nazw. Jest to niezbdne, jeeli chcemy kontrolowa instancje
za pomoc kodu ActionScript.
2. W panelu Property inspector (inspektor waciwoci) wpisz 145 jako warto X, a 255 jako
warto Y, aby ustawi posta kosmity na scenie. Nacinij Enter lub Return.
3. Kliknij dwukrotnie instancj alien_mc znajdujc si na scenie. Flash przejdzie do trybu
edycji i wywietli listw czasow symbolu.
4. Zaznacz warstw Body na listwie czasowej i kliknij dwukrotnie ikon Insert Layer (wstaw
warstw).
5. Grnej warstwie nadaj nazw Left Blink, a dolnej Right Blink.
6. Zaznacz klatk 100. warstwy Left Blink, nacinij Shift i zaznacz klatk 100. warstwy Right Arm.
W ten sposb zaznaczysz klatk 100. na wszystkich warstwach.

ADOBE FLASH CS3 PROFESSIONAL 163

Oficjalny podrcznik

7. Nacinij F5, aby rozcign zawarto wszystkich warstw do klatki 100.

Animowanie symboli zagniedonych

Symbol kosmity zawiera kilka zagniedonych symboli, w tym symbole rk. Za pomoc automatycznych cieek ruchu wykonamy animacj, w ktrej rce bd poruszay si w gr i w d.
1. Zaznacz klatk 100. warstwy Left Arm oraz Right Arm i nacinij F6, aby doda klatki kluczowe
do obu warstw.
2. Zaznacz klatk 50. warstwy Left Arm oraz Right Arm i nacinij F6, aby doda klatki kluczowe
do obu warstw.
3. Zaznacz dowoln klatk pomidzy klatk 1. a 50. warstwy Left Arm i wybierz Motion (ruch)
z menu Tween (klatki porednie) w panelu Property inspector (inspektor waciwoci).
4. Powtrz krok 3. i utwrz automatyczn ciek ruchu dla warstwy Right Arm.
5. Zaznacz dowoln klatk pomidzy klatk 50. a 100. warstwy Left Arm i wybierz Motion
z menu Tween w panelu Property inspector.
6. Powtrz krok 5. i utwrz automatyczn ciek ruchu dla warstwy Right Arm.
7. Zaznacz klatk 50. warstwy Left Arm, a nastpnie zaznacz lew rk na scenie.
8. W panelu Transform (przeksztacenia) wpisz -9 w polu Rotate (obrt) i nacinij Enter
lub Return.

Uwaga: Jeli panel Transform nie jest widoczny, wybierz Window/Transform (okno/przeksztacenia).
9. Zaznacz klatk 50. warstwy Right Arm, a nastpnie zaznacz praw rk na scenie.

164 LEKCJA 5
Tworzenie animacji

10. W panelu Transform kliknij pole Skew (pochyl) i wpisz 10 dla pochylenia poziomego i -170
dla pochylenia pionowego. Nacinij Enter lub Return, aby zastosowa warto.

Obiekty mona pochyla i obraca na scenie take za pomoc narzdzia Free Transform,
ale opcje Rotate i Skew w panelu Transform daj dokadn kontrol nad przeksztaceniem.

Tworzenie symboli zagniedonych

Wewntrz symbolu alien znajduje si symbol alien_body, a w nim symbol alien_head, ktry
zawiera symbol alien_head_eye. Na podstawie symbolu alien_head_eye utworzymy nowe symbole, ktre wykorzystamy przy animacji mrugania.

ADOBE FLASH CS3 PROFESSIONAL 165

Oficjalny podrcznik

1. Za pomoc narzdzia Zoom (powikszenie) powiksz gow kosmity tak, aby oko byo dobrze
widoczne. Widok sceny mona przesun naciskajc spacj w czasie przecigania wskanikiem
myszy.
2. Kliknij dwukrotnie ciao kosmity na scenie przejd do trybu edycji symbolu alien_body.
3. Kliknij dwukrotnie gow kosmity na scenie przejd do trybu edycji symbolu alien_head.
Flash wywietli listw czasow symbolu alien_head, ktra zawiera pi warstw.
4. Zaznacz warstw Left Eye, a nastpnie zaznacz lewe oko na scenie.
5. Wybierz Edit/Copy (edycja/kopiuj) w celu skopiowania oka.
6. Kliknij przycisk alien na pasku edycji powyej sceny, aby przej do listwy czasowej symbolu
alien.
7. Zaznacz klatk 18. warstwy Left Blink i nacinij F7, aby doda now pust klatk kluczow.
To samo wykonaj dla warstwy Right Blink.
8. Zaznacz pust klatk kluczow w klatce 18. warstwy Left Blink i wybierz Edit/Paste In Center
(edycja/wklej w centrum). Skopiowane lewe oko pojawi si na scenie.

9. Za pomoc narzdzia Selection (zaznaczenie) przesu kopi oka dokadnie nad oko, ktre
cigle jest czci gowy. Pooenie moesz dopasowa za pomoc klawiszy strzaek.
10. Zablokuj warstwy Body, Right Arm oraz Left Arm, aby unikn wprowadzenia w nich przypadkowych zmian.
11. Zaznacz grafik oka, ktr umiecie na scenie, i skonwertuj j na symbol, naciskajc F8.
12. Wybierz Graphic (grafika) jako typ symbolu i nadaj mu nazw alien_eyeblink. Kliknij OK.

166 LEKCJA 5
Tworzenie animacji

Animowanie symbolu za pomoc maski

W poprzednich rozdziaach wykorzystalimy maski w celu stopniowego pokazania czci warstwy. Tym razem uyjemy jej do pokazania i ukrycia znajdujcego si niej oka, co da efekt mrugania. Kiedy oko bdzie zamknite, pokaemy powiek majc taki sam kolor jak twarz; w chwili,
kiedy bdzie otwarte, pokaemy je w caoci.

Rozbijanie symboli
Utworzylimy ju symbol. Teraz musimy go rozbi. Pozwoli to na prac z oddzielonym wypenieniem, renic i obrysem.
1. Kliknij dwukrotnie instancj symbolu alien_eyeblink na scenie, aby przej do trybu edycji.
2. Zaznacz lewe oko na scenie.
3. Wybierz Modify/Break Apart (modyfikuj/rozbij). Oko zostanie rozbite na edytowalne piksele.
4. Kliknij pusty obszar sceny, aby oko przestao by zaznaczone.

Przygotowanie warstw do maskowania

Narysujemy powiek, ktra bdzie widoczna w czasie mrugnicia.
1. Zaznacz renic oka i usu j.
2. Zaznacz biae wypenienie oka i usu je. W podgldzie w panelu Library (biblioteka) powiniene widzie teraz tylko obrys oka.
3. Wybierz narzdzie Paint Bucket (wiadro z farb

) z panelu Tools (narzdzia).

4. Kliknij ikon Fill color (kolor wypenienia) w obszarze opcji panelu Tools, wpisz #619AD2 jako
warto koloru i nacinij Enter lub Return.
Kolor nadany powiece jest taki sam, jak kolor gowy kosmity.

ADOBE FLASH CS3 PROFESSIONAL 167

Oficjalny podrcznik

5. Za pomoc narzdzia Paint Bucket (wiadro z farb) kliknij w dowolnym miejscu wewntrz
obrysu oka na scenie. Ksztat zostanie wypeniony kolorem niebieskim.

6. Za pomoc narzdzia Selection (zaznaczenie) zaznacz wypenienie.

7. Wybierz Edit/Cut (edycja/wytnij).
8. Kliknij ikon Insert Layer (wstaw warstw), nowej warstwie nadaj nazw Inner Eye.
9. Zaznacz pust klatk kluczow w klatce 1. warstwy Inner Eye i wybierz Edit/Paste In Place
(edycja/wklej w miejscu).
10. Zmie nazw warstwy Layer 1 na Outer Eye.
11. Przesu warstw Outer Eye ponad warstw Inner Eye na listwie czasowej.
12. Zaznacz warstw Inner Eye, a nastpnie zaznacz wntrze oka na scenie.
13. Kliknij ikon Stroke Color (kolor linii) w obszarze opcji panelu Tools i wpisz kod koloru
#619AD2, ktry odpowiada kolorowi gowy kosmity.

Tworzenie maski
Dodamy teraz warstw maski, a nastpnie narysujemy dwa ksztaty maski.
1. Zaznacz warstw Inner Eye i kliknij ikon Insert Layer.
2. Nowej warstwie nadaj nazw Mask.
3. Zaznacz warstw Inner Eye, a nastpnie znajdujcy si na niej ksztat.
4. Wybierz Edit/Copy (edycja/kopiuj).
5. Zaznacz klatk 1. warstwy Mask i wybierz Edit/Paste In Place.

168 LEKCJA 5
Tworzenie animacji

6. Zmie kolor wypenienia na warstwie Mask na jasny zielony i kliknij poza grafik oka,
aby przestaa by zaznaczona.

Uwaga: Kolor wypenienia maski moe by dowolny. W tym przypadku kolor zielony bdzie
odpowiedni, poniewa wyrnia si od elementw ta.
7. Zaznacz klatk 3. warstwy Outer Eye, nacinij Shift i wybierz klatk 3. warstwy Inner Eye
zostanie zaznaczona klatka 3. kadej z trzech warstw listwy czasowej.
8. Nacinij F5, aby rozszerzy wszystkie trzy warstwy do klatki 3.
9. Nacinij Alt (Windows) lub Option (Mac OS) i przecignij pierwsz klatk warstwy Mask
do klatki 3., aby utworzy duplikat klatki.

10. Zaznacz klatk 3. warstwy Mask, nacinij Alt lub Option i przecignij j o jedn klatk w ty,
aby utworzy duplikat. Klatki 1., 2., i 3. warstwy Mask powinny by oznaczone kropkami znajduj si w nich klatki kluczowe.
11. Zablokuj warstwy Inner Eye oraz Outer Eye.
12. Usu zaznaczenie maski, klikajc poza ni.
13. Wybierz narzdzie Lasso (lasso ) i kliknij ikon Polygon Mode (tryb wieloktw ) w obszarze opcji panelu Tools (narzdzia). W trybie Polygon Mode narzdzie Lasso bdzie rysowa tylko
proste linie.
14. Za pomoc narzdzia Lasso utwrz wskie, lekko pochylone zaznaczenie przebiegajce
przez oko. Kliknicie narzdziem Lasso w kadym rogu wielokta pozwoli na zmian kierunku
rysowania.

ADOBE FLASH CS3 PROFESSIONAL 169

Oficjalny podrcznik

15. Nacinij Delete, aby usun z maski zaznaczenie, ktre narysowae.

16. Zaznacz warstw Mask i wybierz Modify/Timeline/Layer Properties (modyfikuj/listwa czasowa/waciwoci warstwy).
17. Wybierz Mask and Lock (maskuj i zablokuj) i kliknij OK.
18. Przecignij warstw Inner Eye na warstw Mask na listwie czasowej. Nazwa warstwy Inner Eye
zostanie przesunita pod warstw Mask, co oznacza, e warstwa jest zamaskowana.
Podgld projektu powinien wyglda podobnie, jak na poniszym rysunku.

170 LEKCJA 5
Tworzenie animacji

19. Odblokuj warstw Mask.

20. Nacinij Alt lub Option i przecignij drug klatk kluczow do pierwszej klatki warstwy Mask,
aby utworzy duplikat klatki.
21. Za pomoc narzdzia Lasso zaznacz ukony obszar odrobin wikszy od poprzedniego i usu go.
22. Uaktywnij mask poprzez zablokowanie warstwy Mask.

23. Odblokuj warstw Outer Eye.

24. Zaznacz klatk 5. warstwy Outer Layer i nacinij F6, aby doda klatk kluczow.
25. Za pomoc narzdzia Selection (zaznaczenie) zaznacz owal znajdujcy si w klatce 5.
Za pomoc panelu Property inspector (inspektor waciwoci) zmie grubo linii na 5.

ADOBE FLASH CS3 PROFESSIONAL 171

Oficjalny podrcznik

Tworzenie duplikatu symbolu maskowanego

Narysowalimy mrugajce oko, teraz wykonamy jego duplikat, ktry posuy jako prawe oko.
Maska bdzie automatycznie doczona do grafiki.
1. Kliknij przycisk alien na pasku edycji, aby powrci do listwy czasowej symbolu alien.
2. Zaznacz instancj alien_eyeblink, ktr niedawno edytowae, i wybierz Edit/Copy
(edycja/kopiuj).
3. Zaznacz pust klatk kluczow w klatce 18. warstwy Right Blink i wybierz Edit/Paste In Place
(edycja/wklej w miejscu).
4. Majc cigle zaznaczone oko, wybierz Modify/Transform/Flip Horizontal (modyfikuj/przekszta/odwr w poziomie).
5. Za pomoc narzdzia Selection (zaznaczenie) przesu grafik bezporednio nad prawe oko
w symbolu body Moesz dopasowa pooenie grafiki za pomoc klawiszy strzaek.

Animowanie maski
W czasie trwania animacji kosmita trzykrotnie zamruga oczami, kade mrugnicie powinno
trwa trzy klatki. Dodamy klatki kluczowe, a nastpnie utworzymy dwa duplikaty animowanych
klatek, aby rozcign efekt na dalsz cz listwy czasowej.
1. Zaznacz klatk 21. warstw Left Blink oraz Right Blink (nacinij Shift, aby zaznaczy klatki
jednoczenie w kilku warstwach).
2. Nacinij F7 w celu wstawienia klatek kluczowych. Efekt mrugania zacznie si w klatce 18.,
a skoczy po przesuniciu czterech klatek, czyli w klatce 21.

3. Zaznacz klatk 18. warstwy Left Blink, nacinij Shift i zaznacz klatk 21. warstwy Right Blink
zostan zaznaczone klatki od 18. do 21. na obu warstwach.
4. Nacinij Alt (Windows) lub Option (Mac OS) i przecignij grup klatek tak, aby pierwsza klatka kluczowa znalaza si w klatce 50.

172 LEKCJA 5
Tworzenie animacji

5. Ponownie zaznacz grup klatek od klatki 18. do 21. na obu warstwach, nacinij Alt lub Option
i przecignij do klatki 90.
Animacja jest teraz odtwarzana w klatce 18., 50. oraz 90. Mona j obejrze, wybierajc Control/
Test Movie (sterowanie/testuj film).

Przesuwanie obiektw na scenie

Wykonalimy animacj zagniedonych symboli: rce ruszaj si, a oczy mrugaj. Teraz oywimy
kosmit, aby przesuwa si po scenie. Posta bdzie si rwnie powiksza w miar zbliania si
do ostatecznego pooenia.
1. Kliknij przycisk Scene 1, aby powrci do gwnej listwy czasowej.
2. Zaznacz klatk 145. warstwy Alien i nacinij F6 w celu dodania klatki kluczowej.
3. Zaznacz dowoln klatk pomidzy klatk 1. a 145. i wybierz Motion (ruch) z menu Tween
(klatki porednie) w panelu Property inspector (inspektor waciwoci).
4. Zaznacz klatk 145 warstwy Alien, a nastpnie zaznacz grafik kosmity na scenie.
5. W panelu Transform (przeksztacenia) zmie szeroko i wysoko na 160% i nacinij Enter
lub Return.

ADOBE FLASH CS3 PROFESSIONAL 173

Oficjalny podrcznik

6. W panelu Property inspector wpisz 180 jako warto X i 380 jako warto Y, nacinij Enter
lub Return.

174 LEKCJA 5
Tworzenie animacji

7. Nacinij F6 i wstaw klatki kluczowe w nastpujcych klatkach warstwy Alien: 29., 50., 63., 85.,
110., 122. oraz 146.
8. Za pomoc panelu Property inspector i panelu Transform ustaw nastpujce wartoci w kolejnych klatkach (za kadym razem pamitaj o zaznaczeniu kosmity na scenie):

Klatka 1.: X = 42, Y = 176, szeroko i wysoko = 20%, obrt = 34 stopnie.

Klatka 29.: X = 150, Y = 260, szeroko i wysoko = 100%, obrt = 0 stopni.

Klatka 50.: X = 170, Y = 260, szeroko i wysoko = 130%, obrt = -5 stopni.

Klatka 63.: X = 260, Y = 305, szeroko i wysoko = 145%, obrt = 5 stopni.

Klatka 85.: X = 165, Y = 345, szeroko i wysoko = 160%, obrt = 0 stopni.

Klatka 110.: X = 185, Y = 330, szeroko i wysoko = 160%, obrt = 0 stopni.

Klatka 122.: X = 180, Y = 375, szeroko i wysoko = 160%, obrt = 0 stopni.

ADOBE FLASH CS3 PROFESSIONAL 175

Oficjalny podrcznik

Dodawanie dwiku
Do animacji dodamy elektryczn, futurystyczn ciek dwikow, ktra bdzie odtwarzana
w ptli.
1. Zaznacz pust klatk kluczow w klatce 1. warstwy Audio.
2. W panelu Property inspector wybierz z menu Sound plik Blipsong.wav.
3. Z menu Sync (synchronizacja) wybierz Start (od pocztku), a z rozwijanego menu obok wybierz Loop (ptla).

Dodawanie akcji stop()

W klatce 150. umiecimy akcj stop(), co spowoduje, i animacja nie bdzie odtwarzana w ptli.
Po tym, jak kosmita i tytu znajd si w ostatecznym pooeniu, nie bd si ju przesuwa.
1. Zaznacz klatk 150. warstwy Actions i nacinij F7, aby wstawi pust klatk kluczow.
2. Zaznacz pust klatk kluczow, ktr wanie utworzye.
3. Wybierz Window/Actions (okno/akcje) otworzy si panel Actions (akcje).
4. W panelu Actions wpisz:
stop();

176 LEKCJA 5
Tworzenie animacji

Animowanie tekstu tytuowego

Za pomoc automatycznych cieek ruchu wykonamy animacj pierwszego sowa tytuu,
a nastpnie poszczeglnych liter sowa drugiego.

Animowanie tekstu jako obiektu

W tej chwili sowo Spaced znajduje si w klatce 1. w pooeniu obok sceny. Przesuniemy je
do klatki 54., a nastpnie wykonamy jego animacj, tak e przesunie si w ostateczne pooenie
w klatce 139.
1. Zaznacz warstw Title: Spaced.
2. Zaznacz symbol title_spaced znajdujcy si na obszarze montaowym i wybierz Edit/Cut
(edycja/wytnij).
3. Zaznacz klatk 54. warstwy Title: Spaced i nacinij F7, aby wstawi pust klatk kluczow.
4. Majc zaznaczon now klatk kluczow, wybierz Edit/Paste in Place (edycja/wklej
wmiejscu).
5. Zaznacz klatk 139. warstwy Title: Spaced i nacinij F6, aby wstawi klatk kluczow.

6. Zaznacz dowoln klatk pomidzy klatk 54. a 139. warstwy Title: Spaced i wybierz Motion
(ruch) z menu Tween (klatki porednie) w panelu Property inspector (inspektor waciwoci).
7. Wstaw klatki kluczowe (nacinij F6) w klatkach 70. i 133. warstwy Title: Spaced.

ADOBE FLASH CS3 PROFESSIONAL 177

Oficjalny podrcznik

8. Za pomoc panelu Property inspector oraz Transform (przeksztacenia) wpisz nastpujce

wartoci dla sowa title w kadej z klatek:

Klatka 54: X = 824, Y = 108, szeroko = 70%, wysoko = 100%.

Klatka 70.: X = 324, Y = 108, szeroko = 70%, wysoko = 100%.

Klatka 133.: X = 324, Y = 108, szeroko = 100%, wysoko = 100%.

Klatka 139.: X = 324, Y = 108, szeroko = 92%, wysoko = 95%.

Animowanie pojedynczych liter

Wykonamy teraz animacj kadej z liter w sowie Out. Litery bd pojawia si kolejno w rnych
klatkach.
1. Zaznacz warstw Title: O, a nastpnie liter O na obszarze montaowym.
2. Wybierz Edit/Cut (edycja/wytnij).
3. Zaznacz klatk 141. warstwy Title: O i nacinij F7, aby wstawi pust klatk kluczow.
4. Wybierz Edit/Paste in Place (edycja wklej w miejscu).
5. Zaznacz liter O na obszarze montaowym. W panelu Property inspector wpisz 448 jako warto X i 233 jako warto Y. Nacinij Enter lub Return, aby zastosowa wartoci.
6. Zaznacz warstw Title: U, a nastpnie liter U na obszarze montaowym.
7. Wybierz Edit/Cut.
8. Zaznacz klatk 142. warstwy Title: U i nacinij F7, aby wstawi pust klatk kluczow.
9. Wybierz Edit/Paste in Place.
10. Zaznacz liter U na obszarze montaowym i przesu j tak, aby znalaza si po prawej stronie
litery O. Wyrwnaj do dolnej krawdzi litery O.
11. Zaznacz warstw Title: T, liter T na obszarze montaowym i wybierz Edit/Cut.
12. Zaznacz klatk 145. warstwy Title: T i nacinij F7, aby wstawi pust klatk kluczow.

178 LEKCJA 5
Tworzenie animacji

13. Wybierz Edit/Paste in Place.

14. Zaznacz liter T na obszarze montaowym i przesu j tak, aby znalaza si po prawej stronie
litery U. Wyrwnaj do dolnej krawdzi litery O.

Przeksztacanie obiektw
Automatyczne cieki ksztatu pozwalaj na pynne przeksztacenie jednego obiektu w inny, nawet
zupenie inny. Wykorzystamy ciek tego rodzaju do przeksztacenia oboku dymu w liter O
w sowie Out.
Aby zastosowa automatyczne animacje ruchu do grup, instancji lub obrazw bitmapowych,
naley je najpierw rozbi.

ADOBE FLASH CS3 PROFESSIONAL 179

Oficjalny podrcznik

Przygotowanie obiektu pocztkowego

Na pocztku utworzymy obok dymu i przesuniemy go w pooenie, w ktrym zamieni si potem
w liter O.
1. Zaznacz warstw Cloud Morph, a nastpnie grafik oboku na obszarze montaowym.
2. Wybierz Edit/Cut (edycja/wytnij).
3. Zaznacz klatk 136. warstwy Cloud Morph i nacinij F7, aby wstawi pust klatk kluczow.
4. Wybierz Edit/Paste in Place (edycja wklej w miejscu).
5. Zaznacz ikon Show As Outlines (poka jako obrysy ) dla warstwy Cloud Morph.
Obok zostanie pokazany jako obrys, tak i widoczne bd obiekty znajdujce si za nim.

6. Zaznacz klatk 141., litera O bdzie widoczna na scenie.

7. Zaznacz grafik oboku na obszarze montaowym i przesu j tak, aby znajdowaa si dokadnie nad liter O w sowie Out. Chcc przesun obiekt pokazany jako obrys, musisz klikn lini
obrysu.

180 LEKCJA 5
Tworzenie animacji

8. Usu zaznaczenie ikony Show As Outlines dla warstwy Cloud Morph.

9. Zaznacz klatk 136. warstwy Cloud Morph, nacinij Alt (Windows) lub Option (Mac OS)
i przecignij j do klatki 132., aby utworzy duplikat klatki kluczowej.
10. Zaznacz klatk 132., a nastpnie grafik oboku. W panelu Transform (przeksztacenia) ustaw
wartoci szerokoci i wysokoci jako 20% i nacinij Enter lub Return. W panelu Property inspector
(inspektor waciwoci) wybierz Brightness (jasno) z menu Color (kolor) i ustaw 100%. Nacinij
Enter lub Return, aby zastosowa warto.
11. Zaznacz dowoln klatk pomidzy klatk 132. a 136. i wybierz Motion (ruch) z menu Tween
(klatki porednie) w panelu Property inspector.

ADOBE FLASH CS3 PROFESSIONAL 181

Oficjalny podrcznik

12. Zaznacz klatk 137. warstwy Cloud Morph, nacinij F6, aby wstawi klatk kluczow.
13. Zaznacz now klatk kluczow, a nastpnie grafik oboku.
14. Wybierz Modify/Break Apart (modyfikuj/rozbij), a nastpnie jeszcze dwukrotnie to samo
polecenie, obok stanie si edytowalnym ksztatem.

Uwaga: Symbol zaimportowany z Illustratora moe by zgrupowany wielokrotnie. Przy kadym

wybraniu polecenia Modify/Break Apart wydzielana jest jedna grupa lub rozbijany jeden obiekt.

Przeksztacanie obiektu za pomoc automatycznej cieki ksztatu

Za pomoc automatycznej cieki ksztatu przeksztacimy obok w liter O.
1. Zaznacz klatk 140. warstwy Cloud Morph i nacinij F7, aby doda now pust klatk
kluczow.
2. Zaznacz klatk 141. warstwy Title: O, a nastpnie liter O na scenie.
3. Wybierz Edit/Copy (edycja/wytnij). Zablokuj warstw Title: O, aby unikn dokonania na niej
przypadkowych zmian.
4. Zaznacz pust klatk kluczow w klatce 140. warstwy Cloud Morph.
5. Wybierz Edit/Paste In Place (edycja wklej w miejscu).

182 LEKCJA 5
Tworzenie animacji

6. Zaznacz liter O, ktr wkleie na scen, i wybierz trzykrotnie Modify/Break Apart (modyfikuj/rozbij) wypenienie stanie si ksztatem, a linie obiektami rysunkowymi. Usu zaznaczenie
litery O, klikajc poza ni.

7. Zaznacz wewntrzn lini i usu j, podobnie usu zewntrzn lini. Powinien pozosta
tylko pomaraczowy ksztat.

8. Zaznacz dowoln klatk warstwy Cloud Morph pomidzy klatk 137. a 140. i wybierz Shape
(ksztat) z menu Tween (klatki porednie) w panelu Property inspector (inspektor waciwoci).

ADOBE FLASH CS3 PROFESSIONAL 183

Oficjalny podrcznik

9. Zaznacz klatk 141. warstwy Cloud Morph i nacinij F7, aby doda now pust klatk
kluczow.
Przesu gowic odtwarzajc po listwie czasowej i obejrzyj przejcie oboku w liter O.

Animacja pojawiajcych si obiektw

We Flashu warto alfa okrela przezroczysto (lub poziom krycia) obiektu. Wykonamy animacj
wartoci alfa dla liter U i T na pocztku bd cakowicie przezroczyste stopniowo zmieni
si w wypenione.
1. Zaznacz klatk 145. warstwy Title: U i nacinij F6, aby doda klatk kluczow.
2. Zaznacz dowoln klatk pomidzy klatk 142. a 145. warstwy Title: U i wybierz Motion (ruch)
z menu Tween (klatki porednie) w panelu Property inspector (inspektor waciwoci).
3. Zaznacz klatk 142. warstwy Title: U, a nastpnie liter U na scenie.
4. W panelu Property inspector wybierz Alpha (alfa) z menu Color (kolor) i wpisz 25 jako warto procentow.
5. Zaznacz klatk 148. warstwy Title: T i nacinij F6, aby doda klatk kluczow.
6. Zaznacz dowoln klatk pomidzy klatk 145. a 148. warstwy Title: T i wybierz Motion
z menu Tween w panelu Property inspector.
7. Zaznacz klatk 145. warstwy Title: T, a nastpnie liter T na scenie.

184 LEKCJA 5
Tworzenie animacji

8. W panelu Property inspector wybierz Alpha z menu Color i wpisz 25 jako warto procentow.

Animowanie ruchu po ciece

Aby animowa ruch obiektu po ciece, naley na pocztku utworzy prowadnic ruchu (motion
guide), dla ktrej Flash dodaje oddzieln warstw. W dalszej kolejnoci rysujemy prowadnic
na scenie, a nastpnie przycigamy do niej obiekt. W naszym projekcie uyjemy prowadnicy do
przemieszczenia statku kosmicznego na scenie. Pooenie statku dopasujemy tak, aby stworzy
wraenie, e obok dymu, ktry zamienia si w liter O, wydobywa si wanie z silnika statku.

Tworzenie prowadnicy ruchu

Za pomoc prowadnicy ruchu moemy narysowa niemale dowoln ciek, ktr pody obiekt
na scenie. Nasza prowadnica bdzie tworzy ptl, przebiegnie przez liter O i wyjdzie poza scen.
1. Zaznacz warstw Spaceship, a nastpnie statek kosmiczny na obszarze montaowym.
2. Wybierz Edit/Cut (edycja/wytnij).
3. Zaznacz klatk 92. warstwy Spaceship, nacinij F7, aby doda pust klatk kluczow i wybierz
Edit/Paste In Place (edycja wklej w miejscu).

ADOBE FLASH CS3 PROFESSIONAL 185

Oficjalny podrcznik

4. Kliknij prawym przyciskiem myszy (Windows) lub kliknij z klawiszem Control (Mac OS)
warstw Spaceship i wybierz Add Motion Guide (dodaj prowadnic ruchu). Flash doda warstw
Guide: Spaceship ponad warstw Spaceship.
5. Zaznacz klatk 92. warstwy Guide: Spaceship, nacinij F7, aby doda pust klatk kluczow

6. Wybierz narzdzie Pencil (owek ) i czarny kolor linii. Zaznacz opcj Smooth (wygadzaj)
w obszarze opcji panelu Tools (narzdzia ).

186 LEKCJA 5
Tworzenie animacji

7. Za pomoc narzdzia Pencil (owek) narysuj na scenie lini, ktra bdzie zawiera przynajmniej jedn ptl i bdzie przechodzi przez rodek litery O w sowie Out. cieka powinna
wyglda podobnie, jak na poniszym rysunku.

Przypisywanie obiektu do prowadnicy ruchu

Po narysowaniu prowadnicy ruchu musimy utworzy automatyczne cieki animacji oraz umieci obiekt na pocztku i na kocu prowadnicy.
1. Zaznacz klatk 140. warstwy Spaceship, nacinij F6, aby doda klatk kluczow.
2. Zaznacz dowoln klatk pomidzy klatk 92. a 140. i wybierz Motion (ruch) z menu Tween
(klatki porednie) w panelu Property inspector (inspektor waciwoci).
3. W panelu Property inspector zaznacz opcje: Orient To Path (zorientuj do cieki), Sync (synchronizuj) oraz Snap (przycigaj).

ADOBE FLASH CS3 PROFESSIONAL 187

Oficjalny podrcznik

4. Zaznacz klatk 140. warstwy Spaceship, a nastpnie za pomoc narzdzia Selection (zaznaczenie)
zaznacz statek kosmiczny na obszarze montaowym. Przesu statek na koniec cieki poza scen.

Uwaga: Punkt transformacji obiektu, oznaczony biaym punktem, zostanie przycignity

do cieki ruchu.

5. Zaznacz klatk 92. warstwy Spaceship, a nastpnie za pomoc narzdzia Selection zaznacz
statek kosmiczny na obszarze montaowym.
6. Przesu statek kosmiczny na pocztek prowadnicy ruchu po lewej stronie sceny.
7. Przesu gowic odtwarzajc po listwie czasowej, odszukaj klatk, w ktrej statek kosmiczny
znajduje si tu przed obnieniem na prowadnicy ruchu (okoo klatki 125.), i nacinij F6,
aby doda klatk kluczow.
8. Zaznacz dowoln klatk pomidzy now klatk kluczow a klatk 140., usu zaznaczenie
ikony Orient to Path w panelu Property inspector.
Opcja Orient To Path przesuwa obiekt tak, e poda on za nachyleniem cieki. W naszym przypadku dzib statku kosmicznego bdzie skierowany w gr w czasie wznoszenia po ptli i w d
w czasie opadania. Jeeli nie chcemy ju, aby obiekt zmienia kt nachylenia, moemy usun
zaznaczenie opcji Orient To Path.

188 LEKCJA 5
Tworzenie animacji

9. Wybierz Control/Test Movie (sterowanie/testuj film) i obejrzyj animacj. By moe okae

si konieczne wprowadzenie drobnych poprawek do prowadnicy ruchu. Obok dymu powinien
wydobywa si ze statku, a nastpnie przej w liter O w sowie Out.
Strona tytuowa naszej kreskwki jest gotowa. Udao si wykona animacje zarwno tekstu,
jak i obiektw, w tym przeksztacenie dymu w liter O. Cao stanowi ciekaw czowk
dla opowieci o miesznym kosmicie.