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

Flash 8. Techniki zaawansowane.

Klatka po klatce
Autorzy: Russell Chun, H. Paul Robertson
Tumaczenie: Aleksander Lama (wstp, rozdz. 1 7),
Rafa Joca (rozdz. 8 13, dod. A, B)
ISBN: 83-246-0369-7
Tytu oryginau: Macromedia Flash 8 Advanced
for Windows and Macintosh: Visual QuickPro Guide
Format: B5, stron: 672
Wykorzystaj wszystko, co oferuje Ci Flash
Stwrz zoone animacje
Kontroluj obiekty za pomoc jzyka ActionScript
Pocz film wykonany we Flashu z baz danych
Macromedia Flash 8 nie jest po prostu programem do tworzenia animacji wektorowej.
Zawiera on rwnie a moe przede wszystkim potny jzyk programowania
ActionScript, wykorzystywany do wielu zada zwizanych z tworzeniem interaktywnych
prezentacji multimedialnych i witryn WWW. Dopiero uycie ActionScriptu ujawnia
prawdziw potg Flasha. Dziki temu w peni obiektowemu jzykowi mona uzyska
efekty niemoliwe do osignicia za pomoc narzdzi rysunkowych i animacyjnych Flasha.
W ksice Flash 8. Techniki zaawansowane. Klatka po klatce znajdziesz omwienie
technik zwizanych ze stosowaniem jzyka ActionScript. Poznasz podstawy tego
jzyka, a take dowiesz si, w jaki sposb pisa skrypty i do jakich obiektw je
docza. Nauczysz si kontrolowa za jego pomoc elementy graficzne, dwikowe,
tekstowe i nawigacyjne umieszczone w prezentacji. Zdobdziesz wiedz na temat
moliwoci poczenia witryn WWW tworzonych we Flashu z zewntrznymi plikami,
przegldark internetow i serwerem, na ktrym s one publikowane. Znajdziesz tu
take informacje o wykrywaniu i usuwaniu bdw w skryptach.
W ksice poruszone zostay nastpujce tematy:

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

zaawansowane narzdzia animacyjne,

korzystanie z cyfrowego wideo w filmach Flasha,
elementy jzyka ActionScript,
panel Actions,
tworzenie i uywanie obiektw,
zarzdzanie listwami czasowymi,
obsuga klawiatury i myszy,
komunikacja z serwerem i przegldark,
pobieranie danych z zewntrz,
sterowanie elementami graficznymi i dwikiem.
Odkryj niesamowite moliwoci Flasha i ActionScriptu!

Spis treci

Spis treci
Wstp

11

Zaawansowane animacje

17

Rozdzia 1.

Tworzenie zoonych projektw

19
Sposoby automatycznego tworzenia animacji ruchu .............................. 20
Sposoby automatycznego tworzenia animacji ksztatu ........................... 31
Tworzenie efektw specjalnych (tylko w wersji Professional) ............... 38
Animowane i zoone maski ................................................................... 42

Rozdzia 2.

Praca z wideo
55
Importowanie wideo do Flasha ............................................................... 56
Uaktualnianie i podmienianie filmw ..................................................... 68
Dodawanie elementw Flasha do wideo ................................................. 70
Rotoskopia ............................................................................................... 74

Cz II

Podstawy jzyka ActionScript

Rozdzia 3.

Posugiwanie si jzykiem ActionScript

79
Obiekty i klasy ........................................................................................ 80
Metody i waciwoci .............................................................................. 81
Uywanie notacji kropkowej ................................................................... 82
Wicej na temat interpunkcji ................................................................... 84
Panel Actions ........................................................................................... 85
Edytowanie kodu ActionScript ............................................................... 96
Uywanie obiektw ................................................................................. 99
Funkcje .................................................................................................. 113
Stosowanie komentarzy ......................................................................... 114

Cz III

Zarzdzanie listwami czasowymi i komunikacja 115

Rozdzia 4.

Wicej o przyciskach i detektorach zdarze

117
Zdarzenia i detektory zdarze ............................................................... 118
Klasa Button .......................................................................................... 118

77

Spis treci

Cz I

Spis treci

Niewidoczne przyciski ..........................................................................

Automatycznie animowane przyciski ...................................................
Animowane przyciski i symbole klipw filmowych .............................
Zoone przyciski ..................................................................................
Moliwoci ledzenia przyciskw .........................................................
Waciwoci przycisku ..........................................................................
Klip filmowy jako przycisk ...................................................................
Obsuga klawiatury ...............................................................................
Obsuga myszy ......................................................................................
Menu podrczne ....................................................................................
Tworzenie powtarzajcych si akcji z wykorzystaniem zdarzenia
onEnterFrame ........................................................................................
Tworzenie powtarzajcych si akcji z wykorzystaniem setInterval() ...
Podsumowanie zdarzenia i detektory zdarze ..................................

123
125
126
130
135
138
144
151
158
166
173
175
180

Praca z wieloma listwami czasowymi

181
Nawigowanie listwami czasowymi klipw filmowych ......................... 182
cieki adresowe ................................................................................... 183
Bezwzgldne i wzgldne cieki adresowe ........................................... 187
Uywanie akcji with do adresowania klipw filmowych ...................... 195
Zasig .................................................................................................... 197
Klipy filmowe jako kontenery ............................................................... 202

Rozdzia 6.

Zarzdzanie komunikacj zewntrzn

207
Komunikowanie si przez przegldark internetow ............................ 208
adowanie zewntrznych filmw Flasha .............................................. 232
adowanie zewntrznych obrazkw ..................................................... 246
Komunikacja z zewntrznym wideo ..................................................... 249
Stosowanie projektorw i akcji fscommand .......................................... 258
Komunikowanie si z drukark ............................................................. 262
Wykrywanie rodowiska odtwarzania filmu ......................................... 269
Wykrywanie postpu pobierania programy adujce ....................... 275

Cz IV

Przeksztacanie grafiki i dwiku

Rozdzia 7.

Sterowanie klipem filmowym

289
Przeciganie klipu filmowego ............................................................... 290
Ustawianie waciwoci klipu filmowego ............................................. 294
Pobieranie waciwoci klipu filmowego .............................................. 297

Spis treci

Rozdzia 5.

287

Spis treci

Zmiana koloru klipu filmowego ............................................................

Tworzenie oddziaywania kolorw .......................................................
Stosowanie filtrw do klipu filmowego ................................................
Kontrolowanie kolejnoci klipw filmowych na stosie ........................
Wykrywanie kolizji klipw filmowych .................................................
Wyznaczanie krawdzi klipu filmowego ..............................................
Dynamiczne generowanie klipw filmowych .......................................
Dynamiczne usuwanie klipw filmowych ............................................
Pobieranie poziomu gbokoci klipu filmowego .................................
Dynamiczne tworzenie ksztatw ..........................................................
Skalowanie i znieksztacanie klipw filmowych ..................................
Uywanie dynamicznych masek ...........................................................
Dostosowanie wygldu wskanika myszy ............................................
Podstawy animacji za pomoc jzyka ActionScript ..............................

298
304
307
311
315
320
322
329
330
334
353
357
361
364

Sterowanie grafik rastrow

371
Tworzenie obrazw i dostp do nich ..................................................... 372
Rysowanie na obiekcie BitmapData ...................................................... 380
Uywanie filtrw do modyfikacji obrazw ........................................... 394
Animowanie obrazw rastrowych ......................................................... 401

Rozdzia 9.

Sterowanie dwikiem
415
Korzystanie z klasy Sound .................................................................... 416
Doczanie dwikw ............................................................................ 417
Odtwarzanie dwikw ......................................................................... 419
Modyfikacja dwikw ......................................................................... 422
Modyfikacja niezalenych dwikw ................................................... 424
Przeksztacanie dwikw ..................................................................... 427
Tworzenie dynamicznego sterowania dwikiem ................................. 430
Wczytywanie zewntrznych dwikw ................................................ 436
Odczyt waciwoci dwiku ................................................................ 438
Wykrywanie zdarze dwiku .............................................................. 441
Wykorzystanie znacznikw informacyjnych plikw MP3 .................... 443

Cz V

Praca z informacjami

447

Rozdzia 10. Sterowanie przepywem informacji

449
Zmienne i wyraenia ............................................................................. 450
Wczytywanie zewntrznych zmiennych ............................................... 455
7

Spis treci

Rozdzia 8.

Spis treci

Spis treci

Przechowywanie i wspdzielenie informacji .......................................

Modyfikacja zmiennych ........................................................................
czenie zmiennych i dynamiczne referencje .......................................
Testowanie informacji za pomoc instrukcji warunkowych .................
Zapewnianie alternatyw dla warunkw .................................................
Wiele instrukcji warunkowych tworzenie rozgazie .....................
czenie warunkw z operatorami logicznymi .....................................
Ptle .......................................................................................................

463
469
472
475
480
482
488
490

Rozdzia 11. Sterowanie tekstem

495
Wejciowe pole tekstowe ...................................................................... 496
Dynamiczne pole tekstowe .................................................................... 498
Opcje pl tekstowych ............................................................................ 500
czenie tekstu ...................................................................................... 503
Wywietlanie tekstu w formacie HTML ............................................... 507
Animacja pl tekstowych ...................................................................... 512
Waciwoci klasy TextField ................................................................. 515
Dynamiczne generowanie pl tekstowych ............................................ 526
Modyfikacja tekstu w polach tekstowych ............................................. 530
Formatowanie pl tekstowych z wykorzystaniem zewntrznych
arkuszy stylw ....................................................................................... 541
Modyfikacja zawartoci pola tekstowego ............................................. 544
Klasa Selection ...................................................................................... 544
Sterowanie aktywnoci pl tekstowych ............................................... 545
Sterowanie zaznaczeniem w polach tekstowych ................................... 548
Wykrywanie zmian w polu tekstowym ................................................. 552
Klasa String ........................................................................................... 555
Analiza cigw znakw ......................................................................... 556
Aranacja tekstw ................................................................................. 562
Modyfikacja tekstw ............................................................................. 567
Rozdzia 12. Modyfikacja informacji
569
Obliczenia przy uyciu klasy Math ....................................................... 570
Wyliczanie ktw za pomoc klasy Math ............................................. 571
Wykorzystanie funkcji sinus i cosinus do ruchu pod ktem ................. 579
Obliczanie odlegoci za pomoc klasy Math ....................................... 583
Generowanie liczb losowych ................................................................. 588
Organizacja informacji przy uyciu tablic ............................................ 591

Spis treci

Przechowywanie listy klipw filmowych w tablicy .............................. 598

Data i czas ............................................................................................. 603
Tworzenie kodu wielokrotnego uytku ................................................. 611
Rozdzia 13. Zarzdzanie zawartoci i usuwanie bdw
621
Wspdzielenie symboli z biblioteki ..................................................... 622
Wspdzielenie czcionek ....................................................................... 628
Wykorzystanie komponentw ............................................................... 631
Doczanie zewntrznego kodu ActionScript ....................................... 634
Panel Movie Explorer ............................................................................ 636
Wywietlanie wartoci zmiennych i obiektw w trakcie odtwarzania .. 641
ledzenie zmiennych w panelu Output ................................................. 644
Okrelanie typu zmiennej ...................................................................... 646
rodowisko uruchomieniowe ................................................................ 648
Optymalizacja filmu .............................................................................. 656
Unikanie typowych bdw ................................................................... 660

661

Dodatek A

Przyrostki okrelajce typ obiektu

663

Dodatek B

Klawisze i odpowiadajce im kody

665

Skorowidz

667

Spis treci

Dodatki

Tworzenie
zoonych projektw

Tworzenie zoonych projektw

Rozdzia 1. Tworzenie zoonych projektw

Wemy na przykad animacj gowy odwracajcej

si do kamery. Przede wszystkim naley si
zastanowi, czy nie da si uproci tej animacji,
tworzc pojedyncze ruchy. Animowanie caej
sekwencji w tym samym czasie moe by trudne,
jeeli nie niemoliwe, poniewa ruch
poszczeglnych elementw, skadajcych si na
ruch caej gowy, zmienia si w rny sposb.
Kontur gowy moe by animowany klatka po
klatce, obrazujc przejcie z widoku profilu do
widoku od przodu. Niektre elementy twarzy
mog by egzemplarzami symboli, ktre bd
odpowiednio ciskane i rozcigane w automatycznej
animacji ruchu, tak aby zgadzay si z obrotem
gowy. Wosy mog by animowanym ksztatem,
dziki czemu mona odda ich opadanie, falowanie,
a nawet delikatny efekt zarzucenia w chwili,
gdy gowa przestaje si obraca.
Poznanie metod czenia rnych technik i rozbijania
animacji na prostsze elementy pozwala nie tylko
rozwiza trudne problemy z animacj, ale rwnie
przekona Ci do wykorzystywania wielu warstw
i tworzenia symboli poszczeglnych elementw.
Dziki temu zarzdzanie tworzon animacj i jej
poprawianie bdzie znacznie prostsze.
W tym rozdziale opisane zostay rne podejcia
do tworzenia skomplikowanych animacji poprzez
podzia na warstwy oraz czenie i rozszerzanie
podstawowych moliwoci Flasha.
19

Tworzenie zoonych projektw

Kluczem do tworzenia zoonych animacji we

Flashu jest skadanie ich z prostszych czci. Tak
samo jak ruch biegacza mona przedstawi jako
cig ruchw jego koczyn, analogicznie projekt we
Flashu powiniene traktowa jak zbir mniejszych
elementw. Dziki rozbiciu jednej skomplikowanej
animacji na czci, w kadej z nich moesz
zastosowa odpowiedni technik. Takie podejcie
upraszcza proces tworzenia animacji, daje Ci
wiksz kontrol nad caym projektem i doskonalsze
wyniki pracy.

Rozdzia 1.

Sposoby tworzenia animacji ruchu

Sposoby automatycznego
tworzenia animacji ruchu
Proces automatycznego tworzenia animacji
ruchu (ang. motion tweening) daje moliwo
zmiany zarwno dowolnych waciwoci
egzemplarza symbolu, takich jak: pooenie,
rozmiar, obrt, kolor, przezroczysto, jak rwnie
filtrw zastosowanych do egzemplarza.
Ze wzgldu na swoj wszechstronno omawiana
technika moe by zastosowana do rnorodnych
zada zwizanych z animacj i jest podstaw
wikszoci projektw we Flashu. Poniewa
automatyczna animacja ruchu w gruncie rzeczy
bazuje na waciwociach egzemplarza, mona
j traktowa jako animacj egzemplarza. Zmiana
egzemplarzy midzy kolejnymi klatkami
kluczowymi wymaga zastosowania automatycznej
animacji ruchu niezalenie od tego, czy jest
wymagane dokonanie faktycznego ruchu na
scenie. Traktowanie tej operacji jako animacji
egzemplarza pomoe Ci zadecydowa, kiedy
uy automatycznej animacji, kiedy animacji
ksztatu, a kiedy animacji klatka po klatce.

Tworzenie pynnie zaptlonych

animacji
Zaptlone animacje s istotne z tego wzgldu,
e umoliwiaj tworzenie efektu cigego ruchu
poprzez zdefiniowanie jedynie kilku klatek
kluczowych. S one wykorzystywane jako
elementy interfejsu uytkownika, takie jak
obracajce si przyciski, przewijane menu, jak
rwnie w cyklicznych ruchach chodzcych
postaciach, trzepoczcych skrzydach motyla czy
wirujcej planecie. Wan spraw przy tworzeniu
pynnych animacji jest upewnienie si,
czy pierwsza klatka kluczowa jest taka sama
(lub prawie taka sama) jak ostatnia klatka.
Dziki temu mona uzyska efekt cigoci ruchu.
W niniejszym rozdziale omwiony zostanie
sposb tworzenia dwch najczciej stosowanych
typw zaptlonych animacji przewijanej grafiki
i grafiki animowanej po zamknitej ciece ruchu.
Przewijana grafika jest typowym efektem
stosowanym w elementach interfejsu uytkownika,
20

Rysunek 1.1. Pi obiektw umieszczonych na scenie

tak, jak mogyby wyglda na pocztku przewijania
z prawej do lewej strony. Obiektami mog by
przyciski lub proste grafiki

Rysunek 1.2. Zgrupuj obiekty poprzez wybranie

pozycji Group z menu Modify

takich jak np. pozycje menu przewijane na

ekranie. Tej techniki mona rwnie uy
do tworzenia animacji umieszczanych w tle
i odtwarzanych bez koca, jak na przykad
gwiedziste niebo za statkiem kosmicznym.

Tworzenie zoonych projektw

cieka ruchu w warstwie wzorcowej daje
moliwo tworzenia pynnego ruchu wzdu tej
cieki, od punktu pocztkowego do kocowego.
Jeeli punkt kocowy pokrywa si z punktem
pocztkowym, mona uzyska efekt pynnej ptli
i faktycznie zamkn ciek ruchu.
Rysunek 1.3. Utwrz wzr poprzez kopiowanie
i wklejanie grupy

Aby utworzy przewijan grafik

1. Utwrz elementy, ktre bd przewijane po

scenie i umie je tak, jak mogyby wyglda

w dowolnym momencie przewijania
(rysunek 1.1).
2. Zaznacz wszystkie elementy i z menu Modify

wybierz pozycj Group (rysunek 1.2).

oryginalnej grupy, tak aby utworzy pasek
powtarzajcych si elementw.
Rysunek 1.4. Ta grupa skada si tylko z dwch
obiektw. Umie tyle jej kopii, aby rozszerzya si
poza scen

Rysunek 1.5. Utwrz symbol graficzny

z caego wzoru

Jeeli elementy s przewijane na przykad

z prawej do lewej strony, drug grup umie
na prawo od pierwszej (rysunek 1.3).
Przewijane elementy s zwykle szersze ni
scena, ale jeli pierwotna grupa elementw
jest wsza ni scena, bdziesz musia
powieli j wicej ni raz, tak aby utworzy
powtarzajcy si wzr rozcigajcy si poza
scen (rysunek 1.4).
4. Zaznacz wszystkie grupy i zamie je na

symbol graficzny (rysunek 1.5).

Na scenie pozosta egzemplarz symbolu,
ktry mona bdzie podda animacji ruchu.
5. Utwrz klatk kluczow w dalszym punkcie

cieki czasowej.
6. Zaznacz egzemplarz na ostatniej klatce
Rysunek 1.6. Druga powtrzona grupa
jest przesuwana do miejsca, gdzie oryginalnie
znajdowaa si pierwsza grupa

kluczowej i przesu go tak, eby druga

grupa elementw pokrya si z pierwsz.
Aby podczas przesuwania egzemplarza
dopasowa jego pooenie do poprzedniej
pozycji, posu si jego obramowaniem
(rysunek 1.6).

21

Sposoby tworzenia animacji ruchu

3. Skopiuj grup i wklej jej kopi obok

Rozdzia 1.
7. Utwrz automatyczn animacj ruchu midzy

klatkami kluczowymi.
8. Wstaw now klatk kluczow dokadnie

przed ostatni, a nastpnie usu t ostatni

(rysunek 1.7).
Dziki zastosowaniu tej techniki uzyskasz
pynn zaptlon animacj, a nie jedynie
efekt naprzemiennego odtwarzania dwch
identycznych klatek pierwszej i ostatniej.
Aby utworzy zamknit ciek ruchu

Rysunek 1.7. Utwrz now klatk kluczow

(na grze) i usu ostatni klatk (na dole)

1. Utwrz symbol graficzny i umie jego

egzemplarz na scenie (rysunek 1.8).

Sposoby tworzenia animacji ruchu

2. Kliknij ikon Add Motion Guide (dodaj ciek

ruchu) pod list warstw utworzysz w ten

sposb warstw wzorcow.
Nad pierwsz warstw pojawi si nowa
warstwa wzorcowa, a pierwsza stanie si
warstw podporzdkowan (rysunek 1.9).
3. We wzorcowej (grnej) warstwie narysuj

niewypenion elips.
4. Wybierz narzdzie zaznaczania (Selection)

z wczonym przyciganiem do obiektw

(Snap to Object), zap za punkt zaczepienia
egzemplarza i umie go na ciece
w ksztacie elipsy (rysunek 1.10).

Rysunek 1.9. Warstwa wzorcowa nad warstw

Layer 1 bdzie zawieraa ciek ruchu

22

Rysunek 1.8. Egzemplarz symbolu graficznego

jest umieszczany na scenie w celu utworzenia
automatycznej animacji ruchu po ciece

Rysunek 1.10. Punkt zaczepienia egzemplarza

przedstawiajcego kul ziemsk ley na ciece
ruchu

Tworzenie zoonych projektw

5. Do obu warstw dodaj klatki i utwrz

now klatk kluczow w ostatniej klatce

podporzdkowanej (dolnej) warstwy.
Rysunek 1.11. Pooenie kuli ziemskiej w 1. i 18.
klatce kluczowej jest takie samo

Aby otrzyma zaptlon animacj, pierwsza

i ostatnia klatka kluczowa musz by
jednakowe (rysunek 1.11).
6. Zaznacz rodkow klatk w podporzdkowanej

(dolnej) warstwie i wstaw now klatk

kluczow. W tym miejscu egzemplarz
powinien znajdowa si po przeciwnej
stronie elipsy (rysunek 1.12).
7. Zaznacz wszystkie klatki pomidzy klatkami

kluczowymi. W panelu Properties wybierz

Motion Tween.

8. Chwy egzemplarz w ostatniej klatce

Rysunek 1.12. Punkt zaczepienia kuli ziemskiej
w rodkowej klatce kluczowej jest pooony
po przeciwnej stronie elipsy

Rysunek 1.13. Kula ziemska odbija si tam

i z powrotem po tym samym odcinku elipsy

podporzdkowanej (dolnej) warstwy i przesu

go w poblie egzemplarza ze rodkowej klatki
kluczowej, uwaajc, aby punkt zaczepienia
znajdowa si na ciece (rysunek 1.14).

Rysunek 1.14. Trzy klatki kluczowe kuli ziemskiej.

Pierwszy egzemplarz jest ustawiony bliej rodkowego
egzemplarza na grnym odcinku elipsy, natomiast
ostatni jest umieszczony bliej rodkowego egzemplarza
na dolnym odcinku elipsy

23

Sposoby tworzenia animacji ruchu

Egzemplarz przemieszcza si teraz wzdu

eliptycznej cieki, ale zamiast wykonywa
peny obrt, powraca tym samym odcinkiem
elipsy (rysunek 1.13).

Rozdzia 1.
Flash automatycznie animuje dwa
egzemplarze, wybierajc najkrtsz ciek.
Skracajc odlego midzy dwiema ostatnimi
klatkami na dolnym odcinku elipsy, zmuszasz
program do uycia wanie tego odcinka.
Teraz egzemplarz przemieszcza si wzdu
obu stron elipsy (rysunek 1.15).
Wskazwka
Ten sam efekt zaptlenia mona uzyska

Sposoby tworzenia animacji ruchu

poprzez usunicie niewielkiego fragmentu

cieki. Tworzc przerw, w rzeczywistoci
uzyskujesz otwart ciek z punktem
pocztkowym i kocowym, ktre definiuj
ruch egzemplarza (rysunek 1.16).

Rysunek 1.15. Kula ziemska porusza si wok

zamknitej cieki

Stosowanie wielu warstw

podporzdkowanych
Jedna warstwa wzorcowa moe oddziaywa
na wicej ni jedn warstw podporzdkowan,
pozwalajc na tworzenie wielu animacji ruchu
korzystajcych z tej samej cieki. Takie
podejcie jest dobre wszdzie tam, gdzie
konieczne jest tworzenie skomplikowanych
animacji wymagajcych wielu obiektw
przemieszczajcych si w tym samym kierunku.
Przykadem moe by ruch maszerujcych
onierzy, krwinki przepywajce ttnic,
wystrzeliwane kule czy uciekajce stado byda.
Mimo e poszczeglne egzemplarze mog si
rni, dziki zastosowaniu jednej warstwy
wzorcowej masz kontrol nad gwnym
kierunkiem ich ruchu.
Dla przykadu kilka powiewajcych lici moe
by animowanych z wykorzystaniem jednej
warstwy wzorcowej. Warstwa ta okrela oglny
kierunek wiatru, natomiast ruch poszczeglnych
lici moe si rni poprzez wprowadzenie
przesuni w osobnych warstwach
podporzdkowanych. Aby zmieni zachowanie
wszystkich lici, wystarczy zmodyfikowa ciek
w warstwie wzorcowej. Takie stosowanie
pojedynczej cieki do sterowania wieloma
warstwami jest przykadem na to, e mona
budowa skomplikowane animacje (w tym
24

Rysunek 1.16. Maa przerwa tworzy pocztkowy

i kocowy punkt cieki ruchu

Rysunek 1.17. Zaznaczenie warstwy

podporzdkowanej (Layer 1) oraz wstawienie
nowej warstwy automatycznie przeksztaca now
warstw w warstw podporzdkowan (Layer 3)

Tworzenie zoonych projektw

przypadku s to wirujce licie) z bardzo
prostych czci (jedna warstwa wzorcowa
i jeden symbol licia).

Rysunek 1.18. Zwyka warstwa (Layer 3) moe

zosta przeksztacona w warstw podporzdkowan
poprzez przecignicie pod warstw wzorcow

Mona zwikszy zoono projektu poprzez

zastosowanie egzemplarzy animowanych symboli
graficznych poruszajcych si po ciece
w warstwie wzorcowej. Zaptlona animacja
wewntrz symbolu graficznego powoduje
lokalny ruch, ktry wci poda za ciek
w warstwie wzorcowej na gwnej listwie
czasowej.
Aby przypisa drug warstw
podporzdkowan do warstwy wzorcowej
1. Wybierz pierwsz warstw podporzdkowan

Nad pierwsz warstw podporzdkowan

pojawi si druga warstwa (rysunek 1.17).
lub
1. Istniejc zwyk warstw przecignij

poniej warstwy wzorcowej.

Zwyka warstwa stanie si warstw
podporzdkowan (rysunek 1.18).
Aby wprowadzi przesunicie w drugiej
warstwie podporzdkowanej
Rysunek 1.19. Egzemplarz umieszczony na scenie
w warstwie leaf 2

1. Utwrz drug warstw podporzdkowan,

jak opisano w poprzednim wiczeniu,

i przecignij na scen egzemplarz, ktry
chcesz animowa (rysunek 1.19).
2. Zaznacz egzemplarz w drugiej warstwie

podporzdkowanej i z przybornika wybierz

narzdzie Free Transform (dowolne
przeksztacenie).
Wok egzemplarza pojawi si uchwyty,
a w rodku ukae si biae kko symbolizujce
biece pooenie punktu zaczepienia
(rysunek 1.20).
Rysunek 1.20. Zaznacz egzemplarz w drugiej
warstwie podporzdkowanej i z przybornika
wybierz narzdzie Free Transform

25

Sposoby tworzenia animacji ruchu

i kliknij ikon Insert Layer (wstaw warstw).

Rozdzia 1.
3. Przecignij punkt zaczepienia w nowe

miejsce.
Punkt zaczepiania egzemplarza moe by
umieszczony w dowolnym miejscu, nawet
poza granicami uchwytw narzdzia Free
Transform.
Nowy punkt zaczepienia jest ustawiony
w miejscu, w ktrym go umiecie
(rysunek 1.21).
4. Aby zakoczy prac z narzdziem Free

Transform, wybierz narzdzie zaznaczania

(Selection) i upewnij si, e jest wczone
przyciganie do obiektw (Snap to Objects).

Rysunek 1.21. Zmie pooenie punktu zaczepienia

egzemplarza poprzez przesunicie biaego kka

Sposoby tworzenia animacji ruchu

5. Chwy egzemplarz za jego nowy punkt

zaczepienia i umie go w pocztkowym

punkcie cieki w warstwie wzorcowej
(rysunek 1.22).
6. Wstaw now klatk kluczow do ostatniej

klatki.
Nowo utworzony egzemplarz w ostatniej
klatce kluczowej ma tak samo umieszczony
punkt zaczepienia jak edytowany egzemplarz.
7. Przypisz egzemplarz w ostatniej klatce

Rysunek 1.22. Punkt zaczepienia licia

(zaznaczony na rysunku) jest przypisany do cieki

kluczowej do kocowego punktu cieki

w warstwie wzorcowej i utwrz automatyczn
animacj ruchu pomidzy dwiema klatkami
kluczowymi.
Automatyczna animacja w drugiej warstwie
podporzdkowanej poda t sam ciek
co animacja w pierwszej warstwie. Jednak
nowy punkt zaczepienia egzemplarza
w drugiej warstwie wprowadza przesunicie
ruchu (rysunek 1.23).
Rysunek 1.23. Dwie automatyczne animacje
poruszaj si po tej samej ciece ruchu. Drugi li
jest przesunity dziki przemieszczeniu jego punktu
zaczepienia

26

Tworzenie zoonych projektw

Aby zmieni zgranie w czasie
w drugiej warstwie podporzdkowanej
1. Wykorzystaj przykad z poprzedniego

wiczenia. Pierwsz klatk kluczow drugiej

warstwy podporzdkowanej przenie w prawo
na listwie czasowej, czyli do pniejszego
punktu w czasie.
Automatyczna animacja dla tej warstwy
podporzdkowanej zacznie si pniej ni
dla pierwszej warstwy, ale obie animacje
zakocz si w tym samym czasie
(rysunek 1.24).
2. Ostatni klatk kluczow pierwszej warstwy

Rysunek 1.24. Li umieszczony w warstwie leaf 2

zacznie si przemieszcza dopiero wtedy, gdy li
w warstwie leaf 1 bdzie ju w ruchu

Animacje poruszajce si po ciece z warstwy

wzorcowej s rozoone w czasie, tak e nie
nakadaj si na siebie (rysunek 1.25).
3. Popraw zgranie w czasie animacji ruchu

poprzez przesuwanie pierwszej i ostatniej

klatki kluczowej w obu warstwach
podporzdkowanych.
Wskazwka
Moesz urozmaica animacj w drugiej

warstwie podporzdkowanej poprzez

umieszczanie egzemplarzy w dowolnym
miejscu wzdu cieki z warstwy wzorcowej.
Animacja bdzie dziaaa nawet wtedy,
gdy egzemplarz nie bdzie lea dokadnie
na pocztku lub na kocu cieki.

Rysunek 1.25. Ostatni klatk kluczow w warstwie

leaf 1 przesu bliej pierwszej klatki kluczowej

27

Sposoby tworzenia animacji ruchu

podporzdkowanej przesu w lewo na listwie

czasowej, czyli do wczeniejszego punktu
w czasie.

Rozdzia 1.
Aby doda lokalne zrnicowania
do animacji z wieloma warstwami
podporzdkowanymi
1. Przejd do trybu edycji symbolu graficznego,

ktry wykorzystujesz w animacji po ciece

ruchu.
2. Zaznacz zawarto symbolu i przekszta go

w symbol graficzny.

Sposoby tworzenia animacji ruchu

W ten sposb utworzye symbol graficzny

wewntrz innego symbolu graficznego,
dziki czemu moesz tworzy automatyczne
animacje ruchu w obrbie pierwotnego
symbolu.
3. Utwrz zaptlon automatyczn animacj

ruchu (rysunek 1.26).

W tym typie animacji koniec jest rwnowany
z pocztkiem.

Rysunek 1.26. Animowany graficzny symbol licia

poruszajcy si w gr i w d

4. Wyjd z trybu edycji symbolu i odtwrz film.

Zwr uwag na to, w jaki sposb animacja

symbolu graficznego poczya si z animacj
ruchu na gwnej scenie (rysunek 1.27).
Wskazwki
Aby zrnicowa sposb odtwarzania animacji

egzemplarzy w panelu Properties, przestaw

opcj animacji i parametr First (pierwsza
klatka) (rysunek 1.28). Jeeli poszczeglne
ptle animacji rozpoczynaj si w rnych
klatkach, moesz unikn w ten sposb
ich wzajemnego zsynchronizowania
(rysunek 1.29).

Rysunek 1.27. Odtwrz film i zobacz, w jaki sposb

licie podaj wzdu cieki ruchu, wykonujc
jednoczenie wasn animacj

Jeeli na tym etapie obrcisz egzemplarze,

moesz uzyska bardziej zoone, ciekawsze

i pozornie losowe ruchy. Poeksperymentuj
z obracaniem egzemplarzy poruszajcych si
po ciece.
Rysunek 1.28. Parametr First jest ustawiony na 10,
co oznacza, e ptla animacji licia rozpocznie si
od klatki 10. W menu rozwijanym opcji animacji s
jeszcze pozycje Play Ones (odtwrz jeden raz) i Single
Frame (jedna klatka)

28

Tworzenie zoonych projektw

Animowanie tytuw

Rysunek 1.29. Trzy egzemplarze tego samego

symbolu graficznego z ustawionymi rnymi klatkami
pocztku animacji. Ptla animacji motyla z lewej
strony rozpoczyna si w 1. klatce jego skrzyda
zaczynaj si zamyka. rodkowy motyl zaczyna by
animowany w 4. klatce jego skrzyda zamykaj si.
Ptla animacji motyla z prawej strony rozpoczyna
si w 10. klatce jego skrzyda otwieraj si.

Rozpoczynajc prac z automatycznymi

animacjami pojedynczych liter lub sw, dobrze
jest zacz tworzy te animacje od koca, czyli
od finalnego efektu. Utwrz ostatni klatk
kluczow, na ktrej wszystkie znaki bd si
znajdoway w docelowym pooeniu. Nastpnie
w pierwszej klatce moesz zmieni pooenie
znakw i zastosowa dowolne przeksztacenia,
bdc pewnym, e na kocu animacji wszystkie
znaki znajd si na waciwym miejscu.
Aby animowa litery tytuu
1. Zaznacz narzdzie Text i upewnij si,

e w panelu Properties jest ustawiony

statyczny tekst (Static Text).
2. Na scenie wpisz tekst tytuu, ktry chcesz

animowa.
3. Z menu Modify wybierz Break Apart

(Ctrl+B w Windows, Cmd+B w Mac OS).

Rysunek 1.30. Wynikiem rozbicia bloku tekstu
(na grze) s obiekty z poszczeglnymi literami
(na dole)

Statyczny tekst tytuu jest zamieniany

na pojedyncze znaki (rysunek 1.30).

29

Sposoby tworzenia animacji ruchu

Na stronach internetowych wykonanych we

Flashu bardzo czsto mona si spotka
z animowanymi tytuami i innymi elementami
tekstowymi, ktre zanim trafi na waciwe
miejsce, krc si, spadaj i obracaj. Tego typu
efekty mona uzyska przez zastosowanie kilku
technik. Na przykad polecenie Break Apart
(rozbij) wykonane na bloku tekstowym rozbija
tekst na pojedyncze znaki, zachowujc przy tym
moliwo jego edytowania. Polecenie to daje
moliwo utworzenia w prosty sposb odrbnych
pl tekstowych z liter skadajcych si na sowo
lub tytu. Nastpnie moesz uy polecenia
Distribute to Layers (rozmie w warstwach), ktre
umieci kady znak w osobnej warstwie. Pozostaje
tylko doda automatyczn animacj ruchu.

Rozdzia 1.
4. Z menu Modify/Timeline wybierz Distribute

to Layers (Ctrl+Shift+D w Windows,

Cmd+Shift+D w Mac OS).
Kady zaznaczony element na scenie jest
umieszczany w osobnej warstwie poniej
biecej warstwy. W tym przypadku nowo
tworzone warstwy s automatycznie nazywane
poszczeglnymi literami (rysunek 1.31).
5. Dla kadej warstwy utwrz klatki kluczowe

w dalszym punkcie listwy czasowej.

6. W pierwszej klatce kluczowej kadej warstwy

dowolnie poprzestawiaj i poprzeksztacaj

litery.
7. Zaznacz wszystkie klatki na listwie czasowej

Sposoby tworzenia animacji ruchu

i utwrz automatyczn animacj ruchu.

Animowane s wszystkie elementy tekstu,
czc si na kocu animacji we waciwy
tytu (rysunek 1.32).
Rysunek 1.31. Polecenie Distribute to Layers
rozmieszcza zaznaczone elementy w osobnych
warstwach

Rysunek 1.32. Spadajce litery ukadaj si

na swoich miejscach w ostatniej klatce kluczowej

30

Tworzenie zoonych projektw

Sposoby automatycznego
tworzenia animacji ksztatu
Automatyczna animacja ksztatu (ang. shape
tweening) jest technik umoliwiajc
przeprowadzanie amorficznych zmian wygldu,
niemoliwych do osignicia przeksztaceniami
egzemplarza, takimi jak: obrt, skalowanie czy
wykrzywianie. Automatycznej animacji ksztatu
mog podlega takie cechy egzemplarza jak:
wypenienie, zarys krawdzi, gradient
i przezroczysto.

Podobnie jak w przypadku animacji ruchu,

tutaj rwnie lepsze wyniki uzyska si dziki
uproszczeniu skomplikowanych animacji
ksztatu przez rozbicie ich na prostsze czci
umieszczone w osobnych warstwach. Wskaniki
zmiany ksztatu (ang. shape hints) umoliwiaj
okrelenie odpowiadajcych sobie punktw
dwch ksztatw. Skomplikowan animacj
mona usprawni poprzez wprowadzenie
porednich klatek kluczowych. Dodaje si w ten
sposb stany przejciowe, dziki ktrym atwiej
jest zarzdza kolejnymi etapami animacji.

Uywanie wskanikw
zmiany ksztatu
Wskaniki zmiany ksztatu pozwalaj
przyporzdkowa punkty jednego ksztatu do
odpowiadajcych im punktw drugiego ksztatu.
Dziki umieszczeniu wielu takich wskanikw
zyskujesz wiksz kontrol nad sposobem
animacji ksztatw.

31

Sposoby tworzenia animacji ksztatu

Rysunek 1.33. Wynik prby przeksztacenia sowa

flash w sowo shape za jednym razem w jednej
warstwie. Zwr uwag na rozpad litery midzy s
i p oraz na dziur, ktra pojawia si midzy
literami h i e

Flash tworzy animacj ksztatu w najbardziej

wydajny i bezporedni sposb. Niekiedy jednak
wyniki dziaania tej metody s nieprzewidywalne
tworzone s pokrywajce si ksztaty lub
w niektrych miejscach pojawiaj si dziury,
ktre nastpnie si cz (rysunek 1.33). Takie
niepodane efekty pojawiaj si zwykle w efekcie
zastosowania klatek kluczowych zawierajcych
zbyt skomplikowane ksztaty, ktre nie mog
by rwnoczenie prawidowo animowane.

Rozdzia 1.
Aby doda wskanik zmiany ksztatu
1. Zaznacz pierwsz klatk kluczow

automatycznej animacji ksztatu i z menu

Modify/Shape wybierz polecenie Add Shape
Hint (dodaj wskanik zmiany ksztatu)
(Ctrl+Shift+H w Windows, Cmd+Shift+H
w Mac OS) (rysunek 1.34).
W rodku ksztatu pojawi si czerwone kko
z liter (rysunek 1.35).
2. Przesu pierwszy wskanik zmiany ksztatu

Sposoby tworzenia animacji ksztatu

do wybranego punktu w obrbie ksztatu.

Upewnij si, e dla narzdzia zaznaczania
(Selection) wczone jest przyciganie do
obiektw (Snap to Objects). Jest to konieczne,
aby zaznaczenie byo przycigane
do wierzchokw i krawdzi.

Rysunek 1.34. Zaznacz pierwsz klatk kluczow

automatycznej animacji ksztatu i z menu Modify/Shape
wybierz polecenie Add Shape Hint

3. Zaznacz ostatni klatk kluczow

automatycznej animacji ksztatu i przesu

pasujc liter w kku do odpowiedniego
punktu kocowego ksztatu.
Przeniesiony wskanik zmiany ksztatu
zmieni kolor na zielony, natomiast wskanik
na pierwszym ksztacie na ty, co oznacza,
e zostay prawidowo umieszczone
(rysunek 1.36).
4. Dodaj wicej wskanikw zmiany ksztatu,

a uzyskasz zadowalajcy wynik animacji

ksztatu (rysunek 1.37). Maksymalnie moesz
umieci 26 wskanikw.

Rysunek 1.35. Pierwszy wskanik zmiany ksztatu

pojawia si w rodku sceny w pierwszej klatce
kluczowej

Wskazwki
Wskaniki zmiany ksztatu umieszczaj zgodnie

z ruchem wskazwek zegara lub w odwrotnym

kierunku. Flash atwiej interpretuje
rozmieszczenie sekwencyjne ni chaotyczne.
Wskaniki zmiany ksztatu musz by

umieszczane na krawdziach albo w rogach

ksztatu. Jeli umiecisz wskanik wewntrz
lub na zewntrz ksztatu, oryginalny
i odpowiadajcy mu wskanik zmiany ksztatu
pozostan podwietlone na czerwono,
a program je zignoruje.

32

Rysunek 1.36. Pierwszy wskanik zmiany ksztatu

w pierwszej klatce kluczowej (na grze)
i odpowiadajcy mu wskanik w ostatniej klatce
(na dole)

Tworzenie zoonych projektw

Aby obejrze animacj bez wskanikw

zmiany ksztatu, z menu View wybierz Show

Shape Hints (wywietl wskaniki zmiany
ksztatu) (Ctrl+Alt+H w Windows,
Cmd+Option+H w Mac OS). Zaznaczenie
opcji Show Shape Hints zostanie usunite,
a wskaniki zmiany ksztatu zostan ukryte.
Jeli przesuniesz ca animacj ksztatu

Aby usun wskanik zmiany ksztatu

1. Przecignij wskanik zmiany ksztatu poza

scen.
Odpowiadajcy mu wskanik w drugiej klatce
kluczowej zostanie automatycznie usunity.
Aby usun wszystkie wskaniki
zmiany ksztatu
1. Z menu Modify/Shape wybierz polecenie

Remove All Hints (usu wszystkie wskaniki

zmiany ksztatu).

Stosowanie porednich klatek

kluczowych

Rysunek 1.38. Skomplikowane animacje ruchu

wymagaj zastosowania kilku porednich klatek
kluczowych

Dodanie porednich klatek kluczowych moe

pomc przy skomplikowanych animacjach
ksztatu przez wprowadzenie stanw
przejciowych tworzcych mniejsze zmiany,
ktrymi atwiej jest zarzdza. Pomyl o tym
procesie jak o automatycznej animacji ruchu.
Wyobra sobie, e masz wykona animacj piki
rozpoczynajcej swj ruch w lewym grnym
rogu sceny. Nastpnie pika ma przelecie do
prawego grnego rogu, dalej do lewego dolnego
i ostatecznie ma trafi do prawego dolnego rogu
(rysunek 1.38). Nie moesz si spodziewa, e
Flash prawidowo wykona t animacj, jeeli
utworzysz tylko dwie klatki kluczowe pierwsz
z pik w lewym grnym rogu sceny, drug z pik
w prawym dolnym rogu. Musisz wstawi
33

Sposoby tworzenia animacji ksztatu

Rysunek 1.37. Zmiana litery T w I

z zastosowaniem wskanikw zmiany ksztatu
(z lewej) i bez ich zastosowania (po prawej)

za pomoc polecenia Edit Multiple Frames

(edytuj wiele klatek), bdziesz musia
na nowo rozmieci wszystkie wskaniki
zmiany ksztatu. Niestety, nie ma moliwoci
jednoczesnego przesunicia wszystkich
wskanikw zmiany ksztatu.

Rozdzia 1.
porednie klatki, tak aby program mg wykona
ten ruch w kilku etapach. Takie same zasady
dotycz automatycznej animacji ksztatu.
Gwatown zmian midzy dwoma ksztatami
lepiej jest zrealizowa, uywajc prostszych
porednich klatek kluczowych.

Sposoby tworzenia animacji ksztatu

Czasami dodanie porednich klatek kluczowych

nie wystarcza i aby polepszy efekt animacji,
musisz uy wskanikw zmiany ksztatu.
W wiczeniu Aby uy wskanikw zmiany
ksztatu w wielu klatkach kluczowych opisano
trzy sposoby na dodanie tych wskanikw do
animacji ksztatu przeprowadzanej
z wykorzystaniem klatek porednich.

Rysunek 1.39. Przeksztacenie litery Z w S

w jednym podejciu powoduje odwracanie
i krzyowanie si ze sob ksztatw

Rysunek 1.40. Poredni ksztat

Aby utworzy poredni klatk kluczow

1. Zobacz, jak nieadnie wyglda standardowa

animacja ksztatu przy przejciu litery Z

w liter S (rysunek 1.39).
2. Umie klatk kluczow w porednim punkcie

Rysunek 1.41. Przejcie litery Z w ksztat poredni

jest proste, a pniejsza zmiana w S jest pynna

animacji.
3. W nowo utworzonej klatce kluczowej wstaw

ksztat, ktry bdzie peni rol pomostu

do docelowego ksztatu (rysunek 1.40).
Teraz zmiany ksztatu w animacji s mniejsze,
dziki czemu jej wynik jest bardziej pynny
(rysunek 1.41).
Aby uy wskanikw zmiany ksztatu
w wielu klatkach kluczowych
1. Zaznacz poredni klatk kluczow i dodaj

wskaniki zmiany ksztatu, tak jakby to bya

pierwsza klatka kluczowa.
Zwr uwag na przyporzdkowanie
wskanikw zmiany ksztatu do animacji,
obserwujc odpowiadajce im kolory. Na
to zaznaczone s wskaniki pocztkowej
klatki kluczowej, na zielono ostatniej
(rysunek 1.42).
lub
1. Umie now klatk kluczow tak, by

przylegaa do drugiej klatki, i rozpocznij

dodawanie wskanikw zmiany ksztatu.
34

Rysunek 1.42. Ta porednia klatka kluczowa zawiera

dwie grupy wskanikw zmiany ksztatu. Niektre s
kocowymi wskanikami pierwszej animacji, a inne
s pocztkowymi wskanikami drugiej animacji

Nowa klatka kluczowa pozwoli dodawa

wskaniki zmiany ksztatu bez obawy
o nakadanie si wskanikw z poprzedniej
animacji (rysunek 1.43).

Tworzenie zoonych projektw

lub
1. Utwrz now warstw, ktra powiela poredni

i ostatni klatk kluczow animacji ksztatu

i rozpocznij dodawanie animacji ksztatw
w tej warstwie.
Powielajc poredni klatk kluczow,
zachowujesz wskaniki zmiany ksztatu
w osobnych warstwach, co rwnie zapobiega
nakadaniu si wskanikw (rysunek 1.44).

Wykorzystanie warstw
do uproszczenia zmian ksztatu

W animacji przedstawiajcej na przykad zmian

litery F w D na krawdziach pierwszego
ksztatu pojawia si dziura pochodzca
z ostatniego ksztatu (rysunek 1.45). Oddzielajc
dziur w literze D i traktujc j jako biay
ksztat, mona kontrolowa moment i sposb jej
pojawienia si. Wstaw now warstw i utwrz
drug animacj dla dziury. Poczenie tych dwch
animacji da doskonalsze efekty (rysunek 1.46).

Rysunek 1.44. Warstwa Layer 2 przechowuje

oddzielnie pocztkowe wskaniki zmiany ksztatu dla
klatek 7 15 oraz kocowe wskaniki dla klatek 1 7

Rysunek 1.45. W trakcie zmiany

litery F w D na obrzeach
pierwszego ksztatu pojawia si
dziura

Rysunek 1.46. Dziur

oraz wypeniony ksztat umieszczono
w osobnych warstwach

35

Sposoby tworzenia animacji ksztatu

Rysunek 1.43.Wskanik zmiany ksztatu w nowej

klatce kluczowej

Technika automatycznej animacji ksztatu pozwala

na tworzenie nawet bardzo skomplikowanych
animacji z wykorzystaniem tylko jednej warstwy.
Takie podejcie moe jednak prowadzi do
nieprzewidywalnych efektw. Lepiej jest uywa
wielu warstw, by oddzieli od siebie zoone
ksztaty, i tworzy wiele prostszych animacji
ksztatu.

Rozdzia 1.

Sposoby tworzenia animacji ksztatu

Stosowanie automatycznych animacji

ksztatu na przejciach gradientu
Automatyczn animacj ksztatu naley traktowa
jako technik majc wiksze moliwoci ni tylko
przeprowadzajc morfing czy przeksztacajc
amorficzne ksztaty. Przecie tego typu animacja
moe by stosowana na dowolnych cechach
ksztatu, takich jak np.: grubo obramowania,
kolor linii i wypenienia, wczajc w to
przezroczysto i gradient. Dziki wykorzystaniu
animacji koloru gradientu moesz tworzy
interesujce efekty. Uywajc na przykad
narzdzia Gradient Transform (przeksztacenie
gradientu), moesz zmienia sposb zastosowania
gradientu na danym wypenieniu, czego rezultatem
moe by przemieszczanie gradientu wzdu
sceny. Przez poczenie tej funkcji ze zmian
konturw mona uzyska efekty przypominajce
chmury lub kby dymu.

Rysunek 1.47. Uyj narzdzia Gradient Transform

z przybornika, by przesun rodkowy punkt
wypenienia gradientem do lewej strony prostokta

Aby utworzy przejcie gradientu

z wykorzystaniem automatycznej
animacji ksztatu
1. Wybierz narzdzie Rectangle (prostokt)

i narysuj duy prostokt na scenie.

2. Wypenij ksztat radialnym lub liniowym

gradientem.
3. Wybierz narzdzie Gradient Transform

i kliknij prostokt znajdujcy si na scenie.

Na gradiencie pojawi si uchwyty
narzdzia Gradient Transform.
4. Na potrzeby tego wiczenia przesu uchwyt

zmiany rodkowego punktu gradientu w lew

stron prostokta (rysunek 1.47).

Rysunek 1.48. W ostatniej klatce kluczowej uyj

narzdzia Gradient Transform, aby zmieni sposb
wypenienia prostokta liniowym gradientem. W tym
przykadzie gradient liniowy jest przesunity w prawo,
pochylony i zwony

36

Tworzenie zoonych projektw

5. Utwrz now klatk kluczow w dalszym

punkcie listwy czasowej.

6. Wybierz ostatni klatk kluczow i kliknij

prostokt z wczonym narzdziem Gradient

Transform.
Na gradiencie w ostatniej klatce kluczowej
pojawi si uchwyty narzdzia Gradient
Transform.
7. Uchwyt zmiany rodkowego punktu gradientu

przesu na praw stron prostokta oraz

dowolnie zmie obrt, skal i kt gradientu.

8. Zaznacz pierwsz klatk kluczow i w panelu

Properties wybierz opcj Shape Tween.

Rysunek 1.49. Ostateczna animacja ksztatu
powoduje przekrcenie, rozszerzenie i przemieszczenie
gradientu wzdu prostokta

Flash animuje przeksztacenie gradientu

z pierwszej do ostatniej klatki kluczowej.
Rzeczywisty kontur prostokta pozostaje
bez zmian.
9. Usu obramowanie prostokta.

Gradient przemieszcza si od lewej do prawej

strony (rysunek 1.49).
Wskazwka
Nie jest moliwe zastosowanie automatycznej

animacji ksztatu pomidzy dwoma typami

gradientw. Oznacza to, e nie mona
utworzy animacji przechodzcej z gradientu
radialnego na liniowy i na odwrt.

37

Sposoby tworzenia animacji ksztatu

Obie klatki kluczowe zawieraj ten sam

prostoktny ksztat, ale rni si sposobem
wypenienia gradientem (rysunek 1.48).

Rozdzia 1.

Tworzenie efektw
specjalnych
(tylko w wersji Professional)

Tworzenie efektw specjalnych

Poniewa narzdzia rysujce we Flashu s oparte

na wektorach, nie mona tu mwi o klasycznych
efektach specjalnych, takich jak poruszenie, ktre
s kojarzone z aplikacjami pracujcymi z grafik
bitmapow, np. Adobe Photoshop i Macromedia
Fireworks. Ale dziki nowym filtrom dostpnym
w wersji Professional tego typu efekty specjalne
mona tworzy bezporednio we Flashu. Dziki
tej technice tworzone filmy mog by znacznie
bogatsze, wychodzc poza proste paskie ksztaty
i gradienty rysunkw wektorowych.
Ponisze wiczenia demonstruj efekt przejcia
od rozmycia do penej ostroci i efekt poruszenia.
Efekt rozmycia (ang. blur) pojawia si wtedy,
gdy obiektyw kamery ma le ustawion ostro.
Efekt ten jest przydatny szczeglnie przy
tworzeniu przej moesz animowa
przejcie midzy obrazem rozmytym i ostrym.
Efekt poruszenia (ang. motion blur) jest
artefaktem kamery, ktry powstaje wtedy, gdy
prdko filmowanego obiektu jest wiksza ni
szybko przechwytywania obrazu przez kamer.
Poruszony obraz zobaczysz tam, gdzie powinien
znajdowa si poruszajcy si obiekt. Czsto takie
obrazy si nakadaj, tworzc w ten sposb smug,
ktra cignie si za szybko poruszajcym si
obiektem. W kamerach ten efekt powstaje
automatycznie i niejako niechccy, natomiast we
Flashu sam musisz go doda.
Aby utworzy efekt przejcia od rozmycia
do penej ostroci
1. Za pomoc narzdzi rysujcych lub poprzez

zaimportowanie obrazu na scen utwrz obraz,

ktry chcesz rozmy.
2. Przekszta obraz w symbol klipu filmowego.

We Flashu filtry mog by dodawane jedynie

do symbolu klipu filmowego, symbolu
przycisku lub tekstu.

38

Rysunek 1.50. Panel Filters moe by wykorzystany

do dodania specjalnych efektw graficznych do klipw
filmowych, przyciskw i tekstu

Rysunek 1.51.
W rozwijanym menu
Add Filter wybierz
filtr Blur

Tworzenie zoonych projektw

3. Utwrz now klatk kluczow w dalszym

punkcie listwy czasowej.

Bdzie to egzemplarz zawierajcy ostry
obraz, bdcy zakoczeniem animacji.
4. Zaznacz egzemplarz w pierwszej klatce.
5. Otwrz panel Filters (filtry) (rysunek 1.50).
6. Kliknij przycisk Add Filter (dodaj filtr) (+)

i wybierz filtr Blur (rozmycie) (rysunek 1.51).

7. Stwrz podany efekt rozmycia przez

ustawienie waciwoci Blur X, Blur Y

i Quality (rysunek 1.52).

8. Zaznacz klatk kluczow w pierwszej klatce

i w panelu Properties wybierz opcj Motion

Tween.
Program stworzy animacj, ktra wywietli
przejcie od rozmytego do ostrego obrazu
(rysunek 1.53).
Wskazwki
Sprbuj troch powikszy pocztkowy
Rysunek 1.53. Efektem jest przejcie od rozmycia
do ostroci

rozmiar rozmywanego obrazu, co da delikatny

efekt najazdu kamery. Uwydatni to dodatkowo
efekt przejcia od rozmycia do ostroci.
W celu utworzenia efektu przejcia w ten

sam sposb moesz wykorzysta dowolny

filtr. Poeksperymentuj z licznymi dostpnymi
filtrami, dopasowujc efekt do filmu.

39

Tworzenie efektw specjalnych

Rysunek 1.52. Waciwoci filtra umoliwiaj

dopasowanie stylu filtra do Twojego projektu. Kady
filtr posiada specyficzne waciwoci, ktre moesz
dowolnie zmienia

Waciwo Blur X wskazuje, w jakim stopniu

obiekt powinien by rozmyty w osi X
(poziomej). Waciwo Blur Y suy do tego
samego, ale odnosi si do osi Y (pionowej).
Powysze wartoci s niezalene, tak wic
mona tworzy rozmycia tylko w jednym
kierunku. Waciwo Quality (jako)
reguluje stopie wygadzenia rozmycia.
Wysze wartoci tego parametru powoduj
wiksze wygadzenie, co przyblia efekt
do wyniku dziaania filtru rozmywajcego
w Photoshopie. Niestety, jest to due
obcienie dla Flash Playera, wic film moe
si odtwarza wolniej.

Rozdzia 1.
Aby stworzy efekt poruszenia
1. Podobnie jak w poprzednim wiczeniu utwrz

obraz, do ktrego chcesz doda poruszenie

i przekszta go w symbol klipu filmowego
(rysunek 1.54).
2. Otwrz panel Filters i dodaj filtr rozmycia

do egzemplarza symbolu na scenie.

3. Zmie waciwoci rozmycia Blur X i Blur Y,

aby ustali kierunek, w ktrym obraz bdzie

si porusza.

Tworzenie efektw specjalnych

Warto rozmycia w kierunku ruchu ustaw na

okoo jedn dziesit cakowitej szerokoci
obrazu, natomiast wartoci dla drugiego
kierunku przypisz 0. Waciwo Quality
ustaw na High (wysoka) (rysunek 1.55).

Rysunek 1.54. Utwrz symbol graficzny. Ten

snowboardzista bdzie porusza si wystarczajco
szybko, aby spowodowa efekt poruszenia

Obraz ulegnie rozmyciu jedynie w jednym

kierunku, symulujc efekt smugi rejestrowany
przez kamer.

Rysunek 1.55. Ustawienie tylko jednej wartoci

rozmycia (X lub Y) powoduje rozmycie obrazu tylko
w jednym kierunku

40

Tworzenie zoonych projektw

4. Utwrz now warstw nad rozmytym

egzemplarzem i dodaj do nowej warstwy

kolejny egzemplarz symbolu klipu
filmowego z okna Library (biblioteka)
(rysunek 1.56).
5. Utwrz klatki kluczowe dla obu warstw

w dalszym punkcie listwy czasowej,

a nastpnie przesu oba egzemplarze
wzdu sceny i do obu warstw dodaj
automatyczn animacj ruchu.
Zarwno oryginalny, jak i rozmyty obraz
bd porusza si razem, ale uzyskany efekt
nie jest jeszcze przekonujcy.
6. Wyreguluj zgranie w czasie klatek

kluczowych, tak aby rozmyty obraz zaczyna

ruch kilka klatek pniej, a oryginalny obraz
koczy animacj kilka klatek wczeniej.
W ostatniej klatce rozmytego obrazu dodaj
pust klatk kluczow (rysunek 1.57).
Dziki wprowadzeniu opnienia midzy
rozmytym i oryginalnym obrazem uzyskano
efekt wierniej oddajcy rzeczywisto.

Rysunek 1.57. Wyprbuj rne ustawienia zgrania

animacji w czasie, tak aby rozmycie pojawiao si,
gdy snowboardzista jedzie, natomiast znikao, gdy
si zatrzymuje

41

Tworzenie efektw specjalnych

Rysunek 1.56. Efekt poruszenia jest ustawiony

za obrazem snowboardzisty. Oba egzemplarze
znajduj si w osobnych warstwach i mona
na nich zastosowa animacj ruchu

Rozdzia 1.

Animowane i zoone maski

Animowane i zoone maski

Maskowanie jest prostym sposobem na

odsanianie fragmentw warstwy lub warstw
lecych poniej. Ta technika wymaga wybrania
jednej warstwy jako warstwy maski, natomiast
warstwy lece pod ni staj si warstwami
maskowanymi.
Dodajc animacj do warstwy maski, warstw
maskowanych albo do wszystkich naraz, moesz
uzyska wyniki wykraczajce poza prosty efekt
podgldania obrazu przez wizjer. Moesz
tworzy maski, ktre si poruszaj, zmieniaj
ksztat i odsaniaj poruszajce si obrazy.
Animowane maski pozwalaj osign tak
zoone efekty, jak ruchome reflektory, soczewki
powikszajce obrazy czy efekt promieni
rentgenowskich, ktry w polu maski pokazuje
wicej szczegw obrazu. Moliwe jest rwnie
uzyskanie kinowych efektw, takich jak
zakrywanie poprzedniej sceny nastpn czy
efekt przesony, w ktrym jedna scena znika
w kurczcym si kku, pozostawiajc na ekranie
kolejn scen.
Mona uzyska jeszcze wiksz zoono,
wstawiajc warstwy nad i pod warstw maski.
Na przykad ksztat wypeniony gradientem
przezroczystoci moe da efekt powolnego
ciemniania ostrych krawdzi maski
w delikatnym wietle reflektora.
W warstwie maski wszystkie wypenienia s
traktowane jako ksztaty kryjce, nawet jeli
zastosuje si przezroczyste wypenienie lub
gradient. W zwizku z tym wszystkie maski
maj ostre krawdzie. Aby utworzy delikatniejsze
krawdzie, naley ukry krawdzie maski,
umieszczajc gradient z przezroczystym rodkiem
nad lub pod t mask. Tworzenie rozmytych
krawdzi za pomoc radialnych gradientw
przezroczystoci dobrze si sprawdza przy
okrgych maskach. Jeeli jednak ksztat maski
jest bardziej skomplikowany, trzeba si uciec
do dostosowania przyciemniania krawdzi.

42

Rysunek 1.58. Warstwa Layer 2 jest warstw

maski, a Layer 1 maskowan warstw

Tworzenie zoonych projektw

Uywanie klipw filmowych w warstwach
maski daje wicej moliwoci, wczajc w to
zastosowanie wielu masek, maski poruszajce
si po ciece ruchu, a nawet dynamicznie
tworzone maski, ktre reaguj na dziaanie
uytkownika. Poniewa dynamiczne maski
opieraj si na jzyku ActionScript, bd
szczegowo omwione pniej (w rozdziale 7.)
po podaniu podstawowych informacji o jzyku
skryptowym.
Aby animowa warstw maski
1. W warstwie Layer 1 utwrz obrazek ta lub

zaimportuj bitmap.
2. Wstaw now warstw nad pierwsz warstw.
3. Zaznacz grn warstw i z menu Modify/

lub
Dwukrotnie kliknij ikon warstwy w grnej
warstwie.
Pojawi si okno dialogowe Layer Properties.
Rysunek 1.59. Automatyczna animacja ksztatu
ruchomej pionowej wstgi znajduje si w warstwie
maski. Obraz ze skoczkiem znajduje si w maskowanej
warstwie

4. W polu Layer Type: zaznacz Mask.

5. Zaznacz doln warstw i z menu Modify/

Timeline wybierz pozycj Layer Properties.

6. W polu Layer Type: zaznacz Masked.

Grna warstwa stanie si warstw maski,

a dolna maskowan warstw (warstw,
na ktr dziaa maska) (rysunek 1.58).
7. Utwrz animacj ksztatu lub animacj

ruchu w warstwie maski (grna warstwa)

(rysunek 1.59).
8. Do maskowanej warstwy (dolna warstwa)

wstaw tak sam liczb klatek, jaka jest

przeznaczona na animacj w warstwie maski.
9. Zablokuj obie warstwy, aby zobaczy efekt

dziaania animowanej maski na obrazie

z maskowanej warstwy (rysunek 1.60).
Rysunek 1.60. Animacja ksztatu odkrywa obraz
ze skoczkiem. Odsonita jest jedynie ta cz
fotografii, ktra znajduje si pod mask

43

Animowane i zoone maski

Timeline wybierz pozycj Layer Properties.

Rozdzia 1.
Wskazwki
Uyj dwch niewiele si rnicych obrazkw.

Jeden z nich umie w maskowanej warstwie,

drugi w zwykej warstwie pod maskowan
warstw. W tej technice animowana maska
dziaa jak pewnego rodzaju filtr odsaniajcy
lecy pod spodem obraz. Moesz na przykad
wstawi jasny obraz do maskowanej warstwy,
a jego ciemn wersj do zwykej warstwy
lecej pod ni. Maska stworzy efekt reflektora
owietlajcego obraz (rysunek 1.61).
Wyprbuj inne moliwoci czenia

Animowane i zoone maski

powielonych obrazw, takie jak ostry

i rozmyty obraz, obraz w odcieniach szaroci
i jego kolorowa wersja lub wzajemnie
przesunite obrazy (rysunek 1.62).
W warstwie maski umie animacj

rozszerzajcego si prostokta, ktry zakrywa

scen, symulujc w ten sposb kinowy efekt
nakadania si obrazw (rysunek 1.63).

Rysunek 1.62. Poruszajce si pionowe ksztaty

w warstwie maski (venetianblinds) odkrywaj zdjcie
kolarzy umieszczone w maskowanej warstwie (bikers).
Kopia zdjcia znajdujca si w dolnej zwykej warstwie
(bikers offset) jest lekko przesunita, co daje efekt
falowania

44

Rysunek 1.61. Poruszajcy si reflektor umieszczony

w warstwie maski (spotlight) odkrywa obraz witrau
z warstwy maskowanej (bitmap). Ciemniejsza kopia
zdjcia zostaa umieszczona w zwykej warstwie
lecej na samym dole (dark bitmap)

Rysunek 1.63. Warstwa maski zawiera du animacj

ksztatu, ktra zakrywa ca scen. Ta technika
umoliwia tworzenie kinowego efektu nakadania
obrazw z maskowanej warstwy (obraz 1.) i z dolnej
zwykej warstwy (obraz 2.)

Tworzenie zoonych projektw

Aby animowa maskowan warstw
1. Majc dwie warstwy, grn przekszta

w warstw maski, a doln w warstw

maskowan.
2. W warstwie maski (grna warstwa)

narysuj wypeniony ksztat bd ksztaty

(rysunek 1.64).
Ten ksztat stanie si obszarem, przez
ktry bdziesz mg zobaczy animacj
w zamaskowanej warstwie.
3. Utwrz animacj ksztatu lub animacj ruchu

4. Zablokuj obie warstwy, aby zobaczy

Rysunek 1.64. Ksztaty przedniej szyby
s umieszczone w warstwie windshield. Wntrze
samochodu tworz rysunki znajdujce si w zwykej
warstwie lecej nad warstw windshield

Rysunek 1.65. Kilka animacji ruchu

w zamaskowanych warstwach (drzewo, krowa,
ziemia i niebo) poruszajcych si pod ksztatami
definiujcymi przedni szyb w warstwie maski

efekt dziaania animowanych maskowanych

warstw pojawiajcych si zza warstwy maski
(rysunek 1.66).

Rysunek 1.66. Obrazki drzewa, krowy, ziemi i nieba

poruszaj si pod mask, tworzc wraenie ruchu
samochodu

45

Animowane i zoone maski

w zamaskowanych warstwach (grne

warstwy), ktra przechodzi pod ksztatami
z warstwy maski. Pod jedn warstw maski
moesz umieci dowoln liczb maskowanych
warstw (rysunek 1.65).

Rozdzia 1.
Wskazwka

Animowane i zoone maski

To podejcie jest uyteczn alternatyw dla

stosowania automatycznej animacji ksztatu

w celu animowania krawdzi i podobnych
typw obiektw, ktre rosn, kurcz si
i wypeniaj. Wyobra sobie na przykad
animacj przedstawiajc dopalajcy si lont
bomby (rysunek 1.67). Utwrz mask lontu,
a nastpnie animuj maskowan warstw, tak
aby stopniowo malaa, co wyglda, jakby lont
si skraca (rysunek 1.68). Inne przykady,
w ktrych mona skorzysta z tej techniki,
to rosnce drzewa, rury lub naczynia
krwionone z przepywajc ciecz i tekst
wypeniajcy si kolorem. Pamitaj jednak,
e Flash nie rozpoznaje konturw w warstwie
maski. Jeeli chcesz w tej warstwie utworzy
cienkie linie, uywaj tylko wypenie.

Rysunek 1.67. Zapalnik bomby ulega skrceniu

Aby utworzy mask

z mikkimi krawdziami
1. Utwrz warstw maski i maskowan

warstw.
2. Umie lub narysuj obraz ta w maskowanej

warstwie (dolna warstwa).

3. Narysuj elips w warstwie maski (grna

warstwa).
4. Skopiuj elips.
5. Umie now warstw pomidzy warstw

maski a maskowan warstw.

Nowa warstwa stanie si maskowan warstw.
6. Z menu Edit wybierz polecenie Paste in Place

(wklej w miejscu) (Ctrl+Shift+V w Windows,

Cmd+Shift+V w Mac OS).
Elipsa pojawi si w nowej maskowanej
warstwie, tu pod elips w grnej warstwie
maski (rysunek 1.69).
Rysunek 1.69. Zarwno w warstwie maski (ellipse 1),
jak i w grnej maskowanej warstwie (ellipse 2)
pojawia si ta sama elipsa. Obraz z postaci
windsurfera znajduje si w dolnej maskowanej
warstwie (background)

46

Rysunek 1.68. Zapalnik bomby to cienki ksztat

w warstwie maski. Animowany prostokt
w maskowanej warstwie kurczy si, dziki czemu
wydaje si, e lont si skraca

Tworzenie zoonych projektw

7. Wklejon elips wypenij radialnym

gradientem w tym samym kolorze co scena,

definiujc jego rodek jako przezroczysty,
a obrzea jako kryjce (rysunek 1.70).
8. Zablokuj wszystkie trzy warstwy, aby zobaczy

efekt zastosowania maski (rysunek 1.71).

Warstwa maski pozwala patrze na obraz
przez eliptyczny obszar. Grna maskowana
warstwa zakrywa krawdzie elipsy poprzez
utworzenie stopniowego zaciemnienia
w kierunku rodka. Dolna maskowana warstwa
zawiera obraz ta (rysunek 1.72).
Rysunek 1.70. W grnej maskowanej warstwie
znajduje si radialny gradient z przezroczystym
rodkiem

Aby utworzy mask o nieregularnym

ksztacie z mikkimi krawdziami
1. Utwrz warstw maski i maskowan

Animowane i zoone maski

warstw.
2. Umie lub narysuj obraz w maskowanej

warstwie (dolna warstwa).

3. Narysuj nieregularny ksztat w warstwie

maski (grna warstwa).

Rysunek 1.71. Efekt naoenia maski z mikkimi

krawdziami

Rysunek 1.72. Maska z mikkimi krawdziami jest

poczeniem maski z grnej warstwy (warstwa maski),
radialnego gradientu ze rodkowej warstwy (grna
maskowana warstwa) i obrazu ta z dolnej warstwy
(dolna maskowana warstwa)

47

Rozdzia 1.
4. Skopiuj ksztat.
5. Umie now maskowan warstw

pomidzy warstw maski a pierwsz

maskowan warstw.
6. Z menu Edit wybierz Paste in Place

(Ctrl+Shift+V w Windows, Cmd+Shift+V

w Mac OS).
Nieregularny ksztat pojawi si w nowej
maskowanej warstwie, tu pod oryginalnym
ksztatem w grnej warstwie maski
(rysunek 1.73).
7. Za pomoc narzdzia Oval (owal) lub

Rectangle (prostokt) narysuj obrys wok

ksztatu (rysunek 1.74).
8. Obszar midzy ksztatem a obrysem wypenij

Animowane i zoone maski

kolorem ta i usu wypenienie oryginalnego

ksztatu.
Nieregularny ksztat jest teraz dziur
w wikszym ksztacie (rysunek 1.75).

Rysunek 1.74. Pusty prostokt narysowany

wok nieregularnego ksztatu

48

Rysunek 1.73. Nieregularny ksztat

w grnej maskowanej warstwie znajduje
si ponad obrazem w dolnej maskowanej
warstwie

Rysunek 1.75. Wypeniajc przestrze

midzy ksztatem a prostoktem, a potem
usuwajc ksztat, tworzysz dziur

Tworzenie zoonych projektw

9. Zaznacz cay ksztat i z menu Modify/Shape

wybierz Soften Fill Edges (zmikcz krawdzie

wypenienia) (rysunek 1.76).
Pojawi si okno dialogowe Soften Fill Edges
(rysunek 1.77). Pole Distance (szeroko)
okrela szeroko mikkiej krawdzi. Warto
w polu Number of steps (liczba krokw)
wpywa na stopniowanie przejcia od krycia
do przezroczystoci. Z kolei opcja Direction
(kierunek) okrela sposb zmikczania
krawdzi.
Rysunek 1.76. Z menu Modify/Shape
wybierz polecenie Soften Fill Edges

10. Wpisz szeroko zmikczenia (w pikselach)

oraz liczb krokw, a jako kierunek wybierz

Expand.

11. Zablokuj wszystkie trzy warstwy, aby zobaczy

efekty dziaania maski (rysunek 1.79).

Rysunek 1.77. Okno dialogowe Soften Fill Edges

Rysunek 1.78. Zmikczone krawdzie

rozszerzaj si w stron dziury,
przez ktr widoczny jest obraz

Rysunek 1.79. Mikkie krawdzie nieregularnej

maski utworzone za pomoc polecenia Soften Fill
Edges z menu Modify/Shape

49

Animowane i zoone maski

Wszystkie krawdzie dookoa ksztatu ulegn

zmikczeniu. Ze wzgldu na to, e cay ksztat
si zwiksza, dziura si kurczy (rysunek 1.78).

Rozdzia 1.

Tworzenie wielu masek

Animowane i zoone maski

Mimo e Flash umoliwia tworzenie wielu

warstw maskowanych pod pojedyncz warstw
maski, nie jest moliwe posiadanie wielu warstw
maski oddziaujcych na dowoln ilo warstw
maskowanych (rysunek 1.80). Aby utworzy
wicej ni jedn mask, trzeba uy klipw
filmowych. Pojawia si pytanie, po co waciwie
tworzy wiele masek? Wyobra sobie animacj,
w ktrej po obrazie niezalenie poruszaj si dwa
reflektory (rysunek 1.81). Poniewa oba reflektory
s animacjami, musz si znale w osobnych
warstwach. Rozwizaniem jest poczenie w klipie
filmowym dwch poruszajcych si reflektorw,
a nastpnie umieszczenie tego klipu w warstwie
maski.
Umieszczanie egzemplarza klipu filmowego
w warstwie maski umoliwia nie tylko tworzenie
wielu masek, ale rwnie daje moliwo
stworzenia maski poruszajcej si po ciece
ruchu. Wewntrz klipu filmowego skonstruuj
animacj, ktra bdzie si poruszaa wzdu
cieki ruchu, nastpnie umie taki klip
w warstwie maski na gwnej scenie i gotowe
masz ju mask, ktra porusza si po ciece.

Rysunek 1.80. Zarwno Layer 1, jak i Layer 2

s zdefiniowane jako warstwy maski, ale tylko
Layer 2 wpywa na Layer 3 maskowan warstw

Rysunek 1.81. Dwa niezalenie poruszajce si

reflektory, kady odkrywajcy cz obrazu

Na temat klipw filmowych znacznie wicej

moesz si dowiedzie w rozdziaach 4. i 7.
Jeeli chcesz, moesz teraz przej do lektury
tych rozdziaw i wrci tu, kiedy bdziesz ju
wicej wiedzia o klipach filmowych.
Aby utworzy wielokrotn mask
1. Utwrz warstw maski i maskowan warstw.
2. Umie obraz w maskowanej warstwie

(dolna warstwa).
3. Z menu Insert wybierz New Symbol (nowy

symbol) (Ctrl+F8 w Windows, Cmd+F8

w Mac OS).
Pojawi si okno dialogowe Create New
Symbol (utwrz nowy symbol).
4. Wpisz opisow nazw i wybierz opcj

Movie Clip (klip filmowy) (rysunek 1.82),

a nastpnie kliknij przycisk OK.
50

Rysunek 1.82. Aby utworzy nowy symbol klipu

filmowego wybierz opcj Movie Clip

Tworzenie zoonych projektw

Program utworzy symbol klipu filmowego.
Wejd do trybu edycji dla tego symbolu.
5. Na listwie czasowej symbolu klipu filmowego

utwrz dwie animacje ruchu reflektorw

przemieszczajcych si w rnych kierunkach
(rysunek 1.83).
6. Powr na gwn scen i przecignij

egzemplarz symbolu klipu filmowego

na warstw maski (grna warstwa)
(rysunek 1.84).
7. Aby zobaczy efekty dziaania maski

w klipie filmowym, z menu Control

wybierz Test Movie.

Animowane i zoone maski

Obie animacje ruchu wewntrz klipu

filmowego maskuj obraz z maskowanej
warstwy.
Rysunek 1.83. Dwa poruszajce si reflektory
s animacjami ruchu wewntrz klipu filmowego

Rysunek 1.84. Egzemplarz klipu filmowego

znajduje si w grnej warstwie (warstwa maski),
za obraz przedstawiajcy kolarzy w dolnej
(maskowanej) warstwie

51

Rozdzia 1.
Wskazwki
Aby zobaczy, co odkrywaj maski, zastosuj

przezroczyste wypenienie lub w oknie Layer

Properties warstwy wybierz opcj View Layer
as Outlines (poka warstwy jako kontury)
(rysunek 1.85).
Aby zabezpieczy si przed zaptleniem

animacji wewntrz klipu filmowego,

do ostatniej klatki wstaw klatk kluczow
i dodaj w niej akcj stop.
Aby umieci mask na ciece ruchu
1. Utwrz warstw maski i maskowan warstw.
2. Umie obraz w maskowanej warstwie

Animowane i zoone maski

(dolna warstwa) (rysunek 1.86).

3. Utwrz nowy symbol klipu filmowego.

Rysunek 1.85. Ogldajc maski jako kontury,

mona zobaczy, co si pod nimi znajduje. W oknie
Layer Properties wybierz opcj View Layer as
Outlines albo kliknij ikon Show as Outlines przy
danej warstwie

Rysunek 1.86. Sowa skadajce si na ciekawe

pytanie i wypenienie ta znajduj si w dolnej
(maskowanej) warstwie

52

Tworzenie zoonych projektw

4. Wewntrz symbolu klipu filmowego utwrz

animacj ruchu, ktra bdzie si porusza

po ciece ruchu (rysunek 1.87).
5. Powr na gwn scen i przecignij

egzemplarz klipu filmowego na warstw

maski (grna warstwa) (rysunek 1.88).

Animowane i zoone maski

Rysunek 1.87. Egzemplarz przedstawiajcy kwiatek

poda ciek ruchu wewntrz klipu filmowego

Rysunek 1.88. Klip filmowy zawierajcy

poruszajcy si kwiatek jest umieszczony
w warstwie maski nad sowami

53

Rozdzia 1.
6. Dostosuj ksztat cieki ruchu do swoich

wymaga i do rozmieszczenia obiektw

na scenie poprzez wybranie polecenia Edit
in Place (edytuj w miejscu) z menu Edit
albo dwukrotnie klikajc na egzemplarzu
(rysunek 1.89).
Flash zaciemni ca grafik z wyjtkiem
edytowanego egzemplarza.
7. Z menu Control wybierz polecenie Test Movie,

aby zobaczy efekty odtwarzania klipu

filmowego w warstwie maski.

Animowane i zoone maski

Animacja pody swoj ciek zdefiniowan

w ciece ruchu, jednoczenie maskujc obraz
maskowanej warstwy na gwnej scenie
(rysunek 1.90).

Rysunek 1.89. Funkcja Edit in Place pozwala

zmienia symbol klipu filmowego, z moliwoci
jednoczesnego obserwowania grafiki na gwnej
scenie

Rysunek 1.90. Poruszajcy si kwiatek,

podajc po ciece ruchu, odsania pytanie

54