IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRE
CI

KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG

100 sposobw na Flash

Autor: Sham Bhangal
Tumaczenie: Piotr Cie
lak (rozdz. 7 12),
Konrad Mantorski (wstp, rozdz. 1 6)
ISBN: 83-7361-629-2
Tytu oryginau: Flash Hacks
Format: B5, stron: 480

TWJ KOSZYK
DODAJ DO KOSZYKA

CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWO
CIACH
ZAMW CENNIK

CZYTELNIA
FRAGMENTY KSIEK ONLINE

100 sposobw na Flash to ksika zawierajca opisy technik pracy z Flashem,

wykorzystywanych przez najbardziej znanych projektantw. Wykorzystanie zawartych
w ksice sztuczek pozwoli Ci nie tylko na poszerzenie horyzontw twrczych,
ale take na zmian podej
cia do projektowania. Dziki nim stworzysz oryginalniejsze
i bardziej wydajne aplikacji i jednocze
nie zmniejszysz nakad pracy potrzebny
do ich opracowania.
Wizualne efekty specjalne oparte na elementach graficznych
Maski i rysowanie
Animacja postaci
Zaawansowane techniki animacyjne
Uwzgldnianie fizyki w animacjach
Formatowanie tekstu za pomoc stylw CSS
Efekty specjalne tworzone w oparciu o tekst
Dwik
Tworzenie elementw interfejsw uytkownika
Optymalizacja projektw
Sztuczki z jzykiem ActionScript
Integracja z przegldark internetow
Zabezpieczanie prezentacji Flash

Wykorzystaj w swojej pracy sztuczki ekspertw.

Przekonasz si, jak wielu rzeczy jeszcze nie wiedziae
o Flashu

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

Spis treci
O Autorach....................................................................................................................................... 7
Sowo wstpne .............................................................................................................................. 11
Wstp.............................................................................................................................................. 15
Rozdzia 1. Efekty wizualne .......................................................................................................... 23
1.
2.
3.
4.
5.
6.
7.

Markowane przeksztacenia pikselowe ....................................................................... 24

Pikselowe efekty tekstowe ............................................................................................. 31
Efekt starego filmu .......................................................................................................... 34
Tworzenie plikw SWF z animowanych obrazkw GIF........................................... 40
Animowanie plikw PSD we Flashu............................................................................ 44
Drzewko na Brooklynie.................................................................................................. 50
Gazie koysane wiatrem: imitacja ruchu drzewa..................................................... 54

Rozdzia 2. Efekty kolorystyczne ................................................................................................. 57

8.
9.
10.
11.
12.
13.

Kolorystyczne efekty wideo........................................................................................... 58

ciemnienie rozjanienie............................................................................................ 63
Transformacje niestandardowe ..................................................................................... 67
Tworzenie i organizowanie niestandardowych palet barw...................................... 71
Wykorzystanie naturalnych schematw kolorystycznych........................................ 74
Efekt sepii ......................................................................................................................... 77

Rozdzia 3. Rysowanie i maski..................................................................................................... 83

14.
15.
16.
17.
18.
19.
20.
21.
22.

Szybkie tworzenie k w czasie rzeczywistym ........................................................... 84

Tworzenie syntetycznej grafiki...................................................................................... 89
Tworzenie elementw mozaiki ..................................................................................... 91
Pokrywanie obszaru wzorem ........................................................................................ 94
Efekt la Escher ............................................................................................................... 98
Redukcja niedokadnoci waciwoci alfa ................................................................ 102
Wykorzystanie skomplikowanych ksztatw jako masek....................................... 107
Wzory interferencyjne i efekt falowania .................................................................... 112
Postrzpione krawdzie bitmap.................................................................................. 113

Spis treci

23. Dodawanie do bitmapy krawdzi wektorowych ..................................................... 116

24. Rozwizanie problemu z przesuniciem bitmapy ................................................... 119
25. Efekt odwracanej strony symetria i maskowanie ................................................ 123

Rozdzia 4. Animacja................................................................................................................... 129

26.
27.
28.
29.
30.
31.
32.
33.
34.

Pynna animacja skryptowa......................................................................................... 130

Animacja ograniczona czasowo .................................................................................. 133
Szybkie i wydajne animowanie postaci ..................................................................... 137
Alternatywne narzdzia do tworzenia animacji....................................................... 141
Animacyjne dj vu....................................................................................................... 144
Matrix bez tajemnic ....................................................................................................... 146
Generowana komputerowo animacja postaci ........................................................... 149
Efekty czsteczkowe ..................................................................................................... 155
Animowanie skomplikowanych ksztatw ............................................................... 158

Rozdzia 5. Efekty trjwymiarowe i fizyka ................................................................................. 163

35.
36.
37.
38.
39.
40.
41.

Imitacja efektu trjwymiarowego ............................................................................... 164

Obrazy panoramiczne................................................................................................... 169
Wydajny ploter 3D ........................................................................................................ 176
Wykorzystanie przyspieszenia do imitowania efektu grawitacji i tarcia ............. 180
Symulacja rzutu ............................................................................................................. 183
Wykrywanie kolizji ....................................................................................................... 186
Obracanie obiektu w okrelonym kierunku.............................................................. 192

Rozdzia 6. Tekst ......................................................................................................................... 197

42.
43.
44.
45.
46.
47.
48.
49.
50.
51.

Wyrany tekst ................................................................................................................ 199

Autouzupenianie.......................................................................................................... 201
Tworzenie listy wszystkich wpisanych sw ............................................................ 208
Importowanie do Flasha zoonego formatowania tekstu...................................... 212
HTML i CSS we Flashu ................................................................................................ 218
Wykorzystanie funkcji uatwie dostpu do utworzenia pola pomocy tekstowej...225
Modelowanie efektw tekstowych ............................................................................. 231
Efekt pisma maszynowego .......................................................................................... 235
Czasowe efekty tekstowe ............................................................................................. 237
Efekty tekstowe na listwie czasowej........................................................................... 241

Rozdzia 7. Dwik....................................................................................................................... 245

52.
53.
54.
55.

Syntezator mowy w programie Flash ........................................................................ 246

Synchronizacja mowy i ruchu ust animowanej postaci........................................... 253
Wymuszenie synchronizacji dwiku ........................................................................ 257
Jak z prostych dwikw mono zrobi dwiki stereo ........................................... 260

Spis treci

56.
57.
58.
59.
60.

Efekty dwikowe w czasie rzeczywistym ............................................................... 263

Jak szybko przygotowa dwiki do interfejsu aplikacji ........................................ 264
Optymalizacja dwiku ................................................................................................ 270
Dodatkowe informacje o dwiku (punkty kontrolne) ........................................... 278
Wasna klasa obiektw umoliwiajca przeksztacanie dwiku.......................... 282

Rozdzia 8. Elementy interfejsu uytkownika ........................................................................... 285

61.
62.
63.
64.

Pokrta Amita, czyli testowanie na gorco .............................................................. 287

Prawy i rodkowy przycisk myszy............................................................................. 292
Klipy filmowe jako przyciski....................................................................................... 294
Hej, a gdzie jest mj pasek przewijania?.................................................................... 299

Rozdzia 9. Wydajno i optymalizacja ..................................................................................... 303

65.
66.
67.
68.
69.
70.
71.
72.
73.

Opanowa pczniejce projekty .................................................................................. 306

Pomiar szybkoci wczytywania zoonych witryn internetowych........................ 308
Tuszowanie efektw wczenia trybu niskiej jakoci .............................................. 311
Zwikszanie wydajnoci poprzez optymalizacj grafiki......................................... 316
Pomiar wydajnoci dziaania projektu....................................................................... 318
Dynamiczna zmiana stopnia skomplikowania animacji ......................................... 320
Budet zasobw systemowych.................................................................................... 326
Zastpujemy wektory bitmap.................................................................................... 331
Optymalizacja pobierania i zastosowania komponentw....................................... 334

Rozdzia 10. ActionScript ........................................................................................................... 337

74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.

Zewntrzne edytory skryptw .................................................................................... 341

Jawne deklaracje typw zmiennych dla kadego .................................................... 347
Podpowiedzi .................................................................................................................. 351
Klonowanie obiektu ...................................................................................................... 352
Licznik oczekujcy (detektor bezczynnoci) ............................................................. 358
Szybkie wyszukiwanie w ActionScript...................................................................... 361
Blokowanie warstwy ze skryptem.............................................................................. 364
Usuwanie bdw za pomoc polecenia trace()........................................................ 366
Nieudokumentowane polecenia ActionScript .......................................................... 370
Tylnym wejciem: metoda ASnative()........................................................................ 375
Tajemnicze operatory.................................................................................................... 376
Importowanie plikw ASC w postaci XML .............................................................. 381

Rozdzia 11. Integracja z przegldarkami.................................................................................. 389

86. Strony przyjazne dla przegldarki.............................................................................. 391
87. Uniwersalny wykrywacz odtwarzacza Flash............................................................ 395
88. Testowanie projektu w rnych wersjach odtwarzacza.......................................... 401

Spis treci

89.
90.
91.
92.
93.
94.
95.
96.

Preferencje i standardowe opcje publikowania ........................................................ 404

Wyrodkowanie pliku SWF bez skalowania............................................................. 407
Wyrodkowanie pliku SWF za pomoc CSS............................................................. 408
Dynamiczne skalowanie zawartoci........................................................................... 415
cza HTML we Flashu................................................................................................ 418
Implementacja przycisku Wstecz we Flashu............................................................. 420
Aktywna klawiatura w filmie SWF ............................................................................ 427
Skrty klawiaturowe..................................................................................................... 428

Rozdzia 12. Bezpieczestwo ..................................................................................................... 435

97.
98.
99.
100.

Odzyskiwanie zasobw z pliku SWF ......................................................................... 443

Utrudnianie dostpu do filmw Flash ....................................................................... 449
Film SWF melduje si posusznie ............................................................................... 452
Przegldamy skompilowany ActionScript ................................................................ 456

Skorowidz .................................................................................................................................... 463

Spis treci

Markowane przeksztacenia pikselowe

ROZDZIA PIERWSZY

Efekty wizualne
Sposoby 1. 7.
W ksice przyjto zaoenie, e czytelnik zna ju podstawy Flasha w zakresie tworzenia
efektw wizualnych i animacji za pomoc listwy czasowej. Jeli jednak nie posuguje si
on sprawnie programem, przedstawione w tym rozdziale techniki na pewno oka si
interesujce. Po poznaniu podstaw Flasha z internetowego lub ksikowego podrcznika mona wrci do sposobw, ktre wyday si szczeglnie interesujce. Na pocztku
mylaem o tym, eby ksika zaczynaa si od wskazwek dotyczcych optymalizacji,
zabezpiecze itp. Uznaem jednak, e lepiej bdzie z tym poczeka. Miaem te nadziej,
e rozwizania przedstawione w tym rozdziale rozpal ciekawo czytelnikw, poszerz
ich horyzonty chciaem take pozosta wierny hakerskiej zasadzie zaczynania od
najciekawszych rzeczy.
Dlatego te zamieciem tu sposoby, ktre umoliwi osignicie nieznanych wczeniej
efektw lub efektw, ktre gdzie si widziao, ale trudno wykona je samodzielnie. Jak
w przypadku wszystkich sposobw zawartych w tej ksice, mam nadziej, e bd one nie
tylko uczy, ale rwnie inspirowa. Licz, e czytelnikom starczy motywacji, eby wyprbowa przedstawione tu sposoby, i e zaryzykuj opracowanie wasnych sztuczek.
Wszystkie sposoby zaprezentowane w tym rozdziale s w pewnym stopniu zwizane
z efektami wizualnymi. Omwione zostan efekty pikselowe oraz przeksztacenie plikw
wykonanych w programie Photoshop i plikw GIF we flashowe pliki .fla i .swf (pierwszy
format oznacza plik rdowy, drugi dystrybucj tego pliku). Na koniec przedstawi
sposb utworzenia drzewa koyszcego gaziami na wietrze. W nastpnych rozdziaach zajmiemy si dodatkowymi efektami wizualnymi wykorzystujcymi przeksztacenia,
zmiany barw, techniki 3D, maskowanie oraz interfejs programistyczny API Drawing.
Chocia maski s dokadniej omwione w rozdziale 3., to s tak wanym elementem Flasha
[Sposb 1.], e mona si z nimi zetkn take w innych miejscach ksiki. Pocztkujcym
uytkownikom przyda si wic krtkie wprowadzenie.
Animacje we Flashu s tworzone poprzez nakadanie na siebie warstw animacji (s to
takie same warstwy, z jakimi mona zetkn si w Photoshopie i innych programach do
obrbki grafiki). W panelu Timeline znajduje si gwna listwa czasowa, na ktrej uporzdkowane s wszystkie warstwy i na ktrej odtwarzane s poszczeglne klatki. Maski

Efekty wizualne

23

SPOSB

1.

SPOSB

1.

Markowane przeksztacenia pikselowe

s czsto uywane do tworzenia efektw wizualnych, takich jak na przykad reflektor

jedna z warstw jest widoczna przez otwr w warstwie maskujcej. Innymi sowy,
warstwa maskujca okrela obszar podrzdnej warstwy maskowanej, ktry jest widoczny (reszta zostaje zamaskowana i jest niewidoczna). Aby utworzy tak warstw w rodowisku roboczym, naley wstawi na listwie czasowej now warstw (klikajc Insert/
Timeline/Layer) ponad warstw, ktra ma zosta zamaskowana. Nastpnie w oknie dialogowym waciwoci (Modify/Timeline/Layer Properties) trzeba zmieni typ warstwy na
Mask. Nastpnie na tej warstwie naley utworzy ksztat, ktry bdzie mask. We Flashu,
te obszary warstwy maskujcej, ktre zawieraj piksele (s zamalowane), uwidoczniaj
warstw lec poniej, za te, ktre s puste, przesaniaj maskowan warstw. Na
przykad aby utworzy efekt reflektora, w ktrym maskowana warstwa bdzie widoczna
w okrgu, mona skorzysta z narzdzi do rysowania (Window/Tools) i narysowa czarne
koo, ktre bdzie mask.
We Flashu MX wprowadzono moliwo tworzenia masek skryptowych, w ktrych maska
zdefiniowana przez jeden klip filmowy jest uywana do zamaskowania zawartoci innego klipu filmowego. Maska skryptowa jak wskazuje nazwa jest mask uywan
dynamicznie w czasie rzeczywistym, utworzon przy wykorzystaniu jzyka ActionScript
i metody MovieClip.setMask(). Stosowanie dynamicznej maski waciwie niczym si nie
rni od tworzenia warstwy maski w rodowisku roboczym, poza tym e metoda ta jest
duo bardziej elastyczna. Cho moliwe jest animowanie warstwy maski za pomoc narzdzi dostpnych w programie, to mona uzyska bardziej wyrafinowane animacje, animujc mask w czasie rzeczywistym przy wykorzystaniu skryptw.
Mam nadziej, e to krtkie wprowadzenie umoliwi czytelnikom peniejsze skorzystanie
z rnych sposobw zawartych w tej ksice, ktre wykorzystuj maski tworzone w rodowisku roboczym i w czasie rzeczywistym. Wicej informacji o maskach mona znale
w pomocy online, w temacie How do I/Basic Flash/Work with Layers/Add a mask Layer (jak
to zrobi/podstawy Flasha/warstwy/dodawanie maski) lub wpisa w indeksie pomocy
haso mask.
Teraz moemy zabra si za naprawd ciekawe rzeczy.
SPOSB

1.

Markowane przeksztacenia pikselowe

Tworzenie pikselowych efektw zanikania i cierania, przypominajcych efekty wykonane w programie
Macromedia Director.

Silnik renderujcy we Flashu bazuje na wektorach i przeksztaceniach wektorowych, nie

zapewnia wic bezporedniego dostpu do pojedynczych pikseli na ekranie. Zatem si
rzeczy Flash nie obsuguje przeksztace pikselowych. Stosujc markowane przeksztacenia pikselowe, wykorzystujemy fakt, e piksele s niewielkie, a kada maa rzecz przypomina inn ma rzecz. Markowane przeksztacanie pikselowe mona czy z innymi
sztuczkami wideo [Sposb 8.], aby nieco urozmaici statyczne bitmapy [Sposb 3.].
Efekt przeksztacenia pikselowego przedstawiono na rysunku 1.1.

24

Efekty wizualne

Markowane przeksztacenia pikselowe

Rysunek 1.1. Przeksztacenie pikselowe, etapy 1 4

W miar upywu czasu piksele pierwszego obrazu s ukrywane (maskowane) obrazek

znika piksel po pikselu. Usunicie maski z pierwszego obrazka ujawnia drugi rysunek
umieszczony poniej. Std wanie bierze si efekt przejcia jednego obrazka w drugi.
Maski wykorzystane do utworzenia poprzedniego efektu pokazano na rysunku 1.2. Naley zauway, e w przypadku czarnych pikseli efekt maski wywietla pierwszy (grny)
obrazek; w przypadku biaych pikseli (brak maski) wywietlany jest obrazek spod spodu.

Rysunek 1.2. Maski przeksztacenia pikselowego, etapy 1 4

Efekty wizualne

25

SPOSB

1.

SPOSB

1.

Markowane przeksztacenia pikselowe

Jak si za chwil przekonamy, po wprowadzeniu drobnych zmian mona utworzy znacznie bardziej skomplikowane przeksztacenia.
Efekt zostanie wykonany w trzech etapach:
1. Utworzenie pseudopiksela. W tym wiczeniu utworzymy may kwadrat o wymiarach
44 piksele.
2. Znalezienie sposobu na tworzenie wielu pseudopikseli. Mona to atwo zrobi,
wykorzystujc metod MovieClip.attachMovie().
3. Utworzenie przeksztacenia poprzez napisanie skryptu, dziki ktremu kady punkt
(pseudopiksel) bdzie znika po okrelonym czasie. Wykorzystujc wszystkie punkty
jako du mask, utworzymy efekt przejcia z jednego obrazka (lub klipu wideo)
na drugi tak jak na rysunku 1.1.
Pojawia si jednak pewien problem. Bdziemy pracowa z tysicami pseudopikseli, ale
nie jest wskazane wykorzystanie metody tak obciajcej procesor, jak tysice skryptw
onEnterFrame() uruchamianych w kadej klatce podczas trwania efektu. Zamiast tego posuymy si funkcj setInterval(), ktra nie wymaga duej mocy obliczeniowej, poniewa
kod bdzie wykonywany tylko raz na jeden pseudopiksel w czasie efektu.

Tworzenie maski pikselowej

Utworzenie maski pikselowej jest tak atwe, jak narysowanie kwadratu.
1. Otwrz nowy dokument Flash (File/New/Flash Document).
2. Kliknij polecenie Document w menu Modify, aby okreli wymiary sceny wiksze
ni 200200 pikseli i wybra biae to (dziki temu widoczny bdzie czarny kwadrat
utworzony w nastpnym punkcie).
3. Narysuj czarny kwadrat bez konturu (kontur nie byby co prawda widoczny,
ale spowolniby efekt).
4. Posugujc si panelem waciwoci (Window/Properties), okrel warto wysokoci
i szerokoci kwadratu na 4 piksele, a wsprzdnych X i Y na 0. Ustawienia powinny
wyglda tak, jak w oknie po prawej stronie punktu zaczepienia na rysunku 1.3.

Rysunek 1.3. Maska pikselowa o wymiarach 44 i jej punkt zaczepienia

26

Efekty wizualne

Markowane przeksztacenia pikselowe

Wielbiciele jzyka ActionScipt mog narysowa mask, wykorzystujc
interfejs API Drawing. Jednak dynamiczne krelenie wszystkich kwadratw,
ktre bd nam potrzebne, potrwaoby zbyt dugo.

5. Przekszta kwadrat w klip filmowy zaznacz go (za pomoc narzdzia Selection)

i nacinij klawisz F8 (lub kliknij Modify/Convert to Symbol), aby wywietli okno
waciwoci symbolu. Zmie nazw symbolu na dot i sprawd, czy opcje eksportu
s tak ustawione, jak na rysunku 1.4 (kliknij przycisk Advanced, jeli opcje Linkage
s niewidoczne).

Rysunek 1.4. Okno dialogowe waciwoci symbolu

Klip filmowy mona usun ze sceny, poniewa wykorzystamy metod MovieClip.attachMovie() do dynamicznego powizania symbolu w bibliotece z gwn listw czasow. Aby
unikn tworzenia klipu, a nastpnie usuwania go ze sceny, mona klikn polecenie New
Symbol (nowy symbol) w menu Insert (wstaw) lub nacisn klawisze Ctrl+F8 (Windows) bd a+F8 (Mac) aby utworzy nowy symbol od razu w bibliotece.
Efekt wykorzystuje du mask zbudowan z kwadratw o wymiarach 44. Maska jest naoona na pierwszy obrazek, efekt dziaa w taki sposb, e w miar upywu czasu ukrywane s kolejne kwadraciki, w wyniku czego w wolnych miejscach zaczyna pojawia si
drugi obrazek (umieszczony poniej pierwszego).

Efekty wizualne

27

SPOSB

1.

SPOSB

1.

Markowane przeksztacenia pikselowe

Jeszcze wicej pikseli

Na listwie czasowej wstaw now warstw o nazwie actions [Sposb 80.]. Na warstwie actions
zaznacz klatk 1. i osad w niej nastpujcy kod, posugujc si panelem akcji (F9):
function drawGrid (theWidth:Number, theHeight:Number):Void {
var initDot:Object = new Object();
var k:Number = 0;
for (var i:Number = 0; i < theWidth; i += 4) {
for (var j:Number = 0; j < theHeight; j +=4){
var dotName:String = "dot" + i + "_" +j;
initDot._x = i;
initDot._y = j;
this.attachMovie("dot", dotName, k, initDot);
k++;
}
}
}
drawGrid(200, 200);

Za pomoc tego kodu utworzony zostaje kwadrat o rozmiarach 200200 pikseli, ktry
skada si z klipw filmowych o rozmiarach 44 piksele (w funkcji drawGrid() mona
okreli rne rozmiary, aby utworzy siatk innej wielkoci). Kady pseudopiksel znajduje si w okrelonym miejscu (i, j) i na okrelonym poziomie na scenie oraz ma nazw instancji doti_j. Nazwa pierwszej instancji (umieszczonej w grnym lewym rogu
kwadratu) to dot0_0, a ostatniej (prawy dolny rg) to dot199_199. Aby wywietli
klipy filmowe, mona uruchomi kod w trybie debugowania (Control/Debug Movie). Naley jednak pamita, e programowi uruchomieniowemu (debugerowi) zajmie troch
czasu wywietlenie wszystkich klipw (program moe nawet przez chwil przesta odpowiada trzeba da mu par sekund na wykonanie oblicze!).
Efekt generuje wiele klipw filmowych: (200/4)2 = 2500. Flash zaczyna dziaa
wolniej, kiedy w tym samym czasie na ekranie wywietlane s 3 4 tysice
klipw filmowych (nawet jeli nie s one ruchome), dlatego te nie zaleca si
przekraczania granicy 2500 klipw. Jeli konieczne jest zastosowanie maski
wikszej ni ta, nad ktr obecnie pracujemy (200200 pikseli), lepiej jest
wykorzysta wiksze kwadraty, ni zwiksza ich liczb.

Sterowanie pikselami
Naleaoby teraz zatroszczy si o to, by punkty znikay na danie. Mona zastosowa
do tego metod setInterval(object, "method", timer), ktra wywouje funkcj
object.method() co okrelon liczb (timer) milisekund. Do napisanego wczeniej kodu
dopisz nastpujcy skrypt:
initDot.timer = 1000 + Math.ceil(Math.random()*800);

Skrypt tworzy waciwo timer, ktra dla kadego klipu pseudopiksela przechowuje
liczb cakowit w zakresie od 1000 do 1800. Liczba 1000 okrela moment pauzy przed
uruchomieniem efektu, a 800 to czas trwania efektu. Obydwie wartoci s podane w milisekundach, jednostce standardowo uywanej w kodach ActionScript.
28

Efekty wizualne

Markowane przeksztacenia pikselowe

Ten sposb bazuje na efekcie maski, ale we Flashu mona stosowa tylko jedn mask
dla jednego klipu filmowego. atwo mona obej to ograniczenie, umieszczajc wszystkie
klipy filmowe pseudopikseli wewntrz innego klipu, ktry posuy za mask. Nazw klipu,
ktry ma by zamaskowany, wpisujemy jako parametr do funkcji drawGrid() (zmiany
w kodzie s wyrnione):
function drawGrid (theWidth:Number, theHeight:Number,
imageClip:MovieClip):Void {
var initDot:Object = new Object();
var k:Number = 0;
//Utwrz klip maski, w ktrym znajd si wszystkie punkty.
this.createEmptyMovieClip("mask", 1)
//Przypisz go jako klip maskujcy.
imageClip.setMask(mask);
for (var i:Number = 0; i < theWidth; i += 4) {
for (var j:Number = 0; j < theHeight; j +=4){
var dotName:String = "dot" + i + "_" +j;
initDot._x = i;
initDot._y = j;
initDot.timer = 1000 + Math.ceil(Math.random()*800);
//Umie maskujce punkty w klipie-kontenerze.
mask.attachMovie("dot", dotName, k, initDot);
k++;
}
}
}
drawGrid(200, 200, image1_mc);

Teraz wszystkie klipy punktw znajduj si ju wewntrz innego klipu o nazwie mask,
ktrego uyjemy jako maski klipu filmowego o nazwie okrelonej w parametrze funkcji
drawGrid(). W tym przypadku uyjemy pliku o nazwie image1_mc, ktry utworzymy
pniej w punkcie Uywanie efektu. Najpierw jednak musimy skoczy prac nad klipami filmowymi punktw.

Tworzenie licznikw
Utworzylimy ju waciwo timer dla wszystkich punktowych klipw. Zabierzmy si
teraz do napisania kodu odpowiedzialnego za znikanie punktw.
Przejd w tryb edycji symbolu klipu dot i dodaj do niego now warstw o nazwie actions
(pierwsza warstwa na listwie czasowej ma zazwyczaj nazw scripts lub actions i suy
wycznie do przechowywania skryptw). W pierwszej klatce na tej warstwie osad nastpujcy kod:
removeMe = function () {
clearInterval(countDown);
this.removeMovieClip();
};
var countDown = setInterval(this, "removeMe", timer)

W ostatnim wierszu kodu wykorzystana zostaa funkcja setInterval() w celu utworzenia

dla kadego punktu licznika (timer) o nazwie countDown. Wywouje ona funkcj removeMe(), gdy minie okrelony czas. Funkcja removeMe() czyci interwa, a nastpnie usuwa
biecy klip punktu, co tworzy efekt znikajcych pikseli.
Efekty wizualne

29

SPOSB

1.

SPOSB

1.

Markowane przeksztacenia pikselowe

Jeli referencja do funkcji zostanie przekazana funkcji setInterval() jako pierwszy
parametr, na przykad setInterval(removeMe, timer), warto sowa kluczowego
this pozostanie niezdefiniowana (undefined) w funkcji removeMe(). Dlatego
wanie uywamy alternatywnej formy wywoania funkcji setInterval(this,
"removeMe", timer), w ktrej jako dwa pierwsze parametry przekazywane
s obiekt i nazwa metody. W tym przypadku sowo kluczowe this
jest obiektem przesyanym jako pierwszy argument. Po wywoaniu
funkcji removeMe sowo kluczowe this jest zdefiniowane i moliwe
jest wywoanie funkcji this.removeMovieClip() w celu usunicia klipu.

Uywanie efektu
Do korzystania z efektu potrzebne s dwa obiekty, midzy ktrymi ma by zastosowane
przejcie i ktre naley umieci na oddzielnych warstwach pierwszy obrazek lub klip
filmowy na warstwie grnej (jak na rysunku 1.5). Posugujc si panelem waciwoci,
nadaj pierwszemu klipowi nazw instancji image1_mc. Drugi obrazek moe mie dowoln nazw, poniewa i tak nie bdzie ona uywana w kodzie.

Rysunek 1.5. Tworzenie przejcia na dwch warstwach

Dziaanie efektu mona przeledzi w pliku pixelMask.fla, ktry mona pobra ze strony
internetowej powiconej ksice.

Wzbogacanie efektu
Zmieniajc interwa czasowy midzy momentami zniknicia kadego punktu, mona osign rne efekty przejcia. Na przykad zmiana wartoci licznika na podstawie pooenia
punktw moe by punktem wyjciowym wielu czsto spotykanych przeksztace pikselowych:
// Zanikanie z lewej do prawej
initDot.timer = 1000 + (Math.random()*(initDot._x)*10);
// Zanikanie poprzeczne
initDot.timer = 1000 + (Math.random()*(initDot._x + initDot._y)*5);

30

Efekty wizualne

Pikselowe efekty tekstowe

Uwagi kocowe
Maskowanie jest niedocenian funkcj dostpn we Flashu. To jedna z tych opcji, ktre
nie wydaj si zbyt przydatne, dopki nie pozna si ich lepiej. Nic zatem dziwnego, e
wiele najbardziej interesujcych efektw [Sposb 21.] tak obficie wykorzystuje maski!
SPOSB

2.

Pikselowe efekty tekstowe

Tworzenie zaawansowanych efektw i przeksztace tekstowych dziaajcych na poziomie piksela.

Ze stosowaniem efektw pikselowych we Flashu zwizany jest pewien problem aby

animacja nie absorbowaa zbyt wiele mocy obliczeniowej procesora, konieczne jest ograniczenie liczby pseudopikseli. Problem ten mona rozwiza na dwa sposoby: uy maych
obrazkw (jak w poprzednim wiczeniu [Sposb 1.]) lub zastosowa efekt na obrazku,
ktry ma wiele pikseli ta (mona je zignorowa, aby zmniejszy liczb potrzebnych pseudopikseli).
Sporo czasu zabrao mi kiedy uwiadomienie sobie, e tekst mona podcign pod
kryterium wiele pikseli ta. Szybka wycieczka po internecie udowadnia jednak, e nie
jest to a tak oczywiste, poniewa chyba nikt inny nie uywa tego sposobu.
Tym razem bdziemy pracowa nad tekstem, ktry zostanie utworzony przez czce si
piksele rozrzucone po caym ekranie. Oczywicie mona uzyska rne efekty, zmieniajc wartoci pooenia pikseli maski.
Sposb skada si z dwch etapw:
przeksztacenie ksztatu bloku tekstu w kwadraty o wymiarach 11
(czyli w pseudopiksele),
animowanie pseudopikseli.
Oto kolejno dziaa:
1. Utwrz pole tekstowe i wpisz dowolny tekst.
2. Nacinij dwukrotnie klawisze Ctrl+B (Windows) lub a+B (Mac) lub kliknij
dwukrotnie polecenie Break Apart w menu Modify, aby zmieni tekst w prosty ksztat.
3. Tekst powinien by ju zaznaczony; nacinij wic klawisz F8, przeksztacajc w ten
sposb napis w klip filmowy o nazwie text. Upewnij si, e zaznaczone jest pole
wyboru Export for ActionScript, i okrel identyfikator cza jako text. Usu instancj
klipu ze sceny, poniewa klip bdzie adowany w czasie rzeczywistym z biblioteki
za pomoc metody MovieClip.attachMovie().
4. Aby efekt poprawnie dziaa, punkt zaczepienia klipu filmowego musi znajdowa si
w grnym lewym rogu tekstu. Kliknij dwukrotnie klip filmowy, aby przej w tryb
Edit in Place (edycja w miejscu), a nastpnie zaznacz cay tekst, klikajc Edit/Select All
(edycja/zaznacz wszystko). W panelu waciwoci wpisz 0 jako warto wsprzdnych
X i Y, tak jak na rysunku 1.6.

Efekty wizualne

31

SPOSB

2.

SPOSB

2.

Pikselowe efekty tekstowe

Rysunek 1.6. Ustawianie pooenia punktu zaczepienia zaznaczonego symbolu tekstowego

Aby wszystko dziaao, konieczne jest przeksztacenie tekstu w prosty ksztat za pomoc
polecenia Modify/Break Apart (za chwil przekonamy si dlaczego). Ma to jednak wpyw
na plik w przypadku duej iloci tekstu powiksza do znacznie wielko dokumentu.
Jednym ze sposobw przezwycienia tej niedogodnoci jest przeksztacenie kadej litery
czcionki w oddzielny klip zawierajcy prosty ksztat i dynamiczne formowanie liter w napisy. Chocia moe si wydawa, e w ten sposb do pliku dodane zostan dodatkowe
bajty, trzeba pamita, e Flash wydajnie robi to samo, gdy w pliku SWF zapisywane s
kontury czcionek (jest to konieczne, gdy litery maj by traktowane jak elementy graficzne).
Naley take utworzy drugi klip filmowy z identyfikatorem cza o nazwie dot. Klip dot
powinien by kwadratem o wymiarach 11 piksel, a wsprzdne X i Y jak na rysunku 1.7 powinny by ustawione na 0. Do okrelenia wsprzdnych uyj panelu
waciwoci, poniewa punkt bdzie prawie niewidoczny.

Rysunek 1.7. Maska pikselowa o wymiarach 11

Poniszy kod replikuje efekt zoom z bokw z rozmyciem, ale tym razem tekst jest naprawd rozmywany (zwykle efekt ten symulowany jest przy uyciu kanau alfa) jak
na rysunku 1.8 poniewa tekst zosta rozbity na piksele.

Rysunek 1.8. Pikselowy efekt tekstowy, etapy 1 4

32

Efekty wizualne

Pikselowe efekty tekstowe

function mover() {
this._x -= (this._x - this.x) /4;
this._y -= (this._y - this.y) /4;
}
function lastMover() {
this._x -= (this._x this.x) /4;
this._y -= (this._y - this.y) /4;
if ((this._x this.x) < 0.1) {
dotHolder.removeMovieClip();
textClip._visible = true;
}
}
//Umie tekst na scenie i ukryj go.
textClip = this.attachMovie("text", "textClip", 0);
textClip._x = 200;
textClip._y = 100;
textClip._visible = false;
//Zainicjuj zmienne, cznie z wysokoci i szerokoci.
var dots = 1;
var distance = 10000;
var stopDot = true;
var height = textClip._y + textClip._height;
var width = textClip._x + textClip._width;
//Utwrz klip punktowy dla kadego piksela tekstu.
var dotHolder = this.createEmptyMovieClip("holder", 1);
for (var j = textClip._y; j < height; j++) {
for (var i = textClip._x; i < width; i++) {
if (textClip.hitTest(i, j, true)) {
var clip = dotHolder.attachMovie("dot", "dot" + dots, dots);
if (stopDot) {
clip._x = distance;
clip.onEnterFrame = lastMover;
stopDot = false;
} else {
clip._x = Math.random() * distance distance/2;
clip.onEnterFrame = mover;
}
//Zapisz pozycj, do ktrej ma dotrze klip punktowy
//(clip.x, clip.y) i przenie go poza ekran.
clip.x = i;
clip.y = j;
clip._y = j;
dots++;
}
}
}

Pomimy na razie omwienie funkcji mover() i lastMover(). Pozostay kod jest odpowiedzialny za umieszczenie tekstu na scenie i ukrycie go. Nastpnie inicjowanych jest kilka
zmiennych, m.in. te, ktre okrelaj wysoko i szeroko tekstu.
Ptla for korzysta z metody MovieClip.hitTest(), aby znale inne ni puste piksele tekstu
i utworzy dla kadego z nich klipy filmowe dot. Kademu punktowi przypisywany jest
uchwyt zdarzenia onEnterFrame() w celu dodania animacji do caego efektu (zamiast tego
mona by uy funkcji setInterval(), aby efekt by animowany [Sposb 1.]).

Efekty wizualne

33

SPOSB

2.

SPOSB

3.

Efekt starego filmu

W tym kodzie ptli zostay wykorzystane dwa sposoby.

Pierwszy wykorzystanie hitTest() powoduje, e konieczne jest rozbicie tekstu na elementy. Metoda hitTest() zawsze zwraca warto false, gdy zostanie uyta w poczeniu
z dynamicznym polem tekstowym (uznaje wtedy piksele za puste).
Drugi sposb jest zwizany z metod sprawdzania, czy pseudopiksele osigny swoje
docelowe pozycje. Punkty, rozmieszczone losowo na ekranie, s w wikszoci sterowane
uchwytem zdarzenia mover(). Jednak z pierwszym pseudopikselem, umieszczonym najdalej, jest skojarzony nieco bardziej zoony uchwyt lastMover(). Zdarzenie zatrzymuje efekt, gdy w pseudopiksel osignie swoje docelowe pooenie do tego czasu pozostae pseudopiksele powinny ju znale si we wskazanych pozycjach (pod warunkiem,
e maj do pokonania mniejsz odlego).
Chocia sposb ten nie jest zbyt elegancki, to waniejsza jest w nim poprawa
wydajnoci ni kontrolowanie dziaania kadego pseudopiksela.

Uwagi kocowe
W internecie mona znale mnstwo efektw tekstowych wykonanych we Flashu, ale
nie widziaem nigdy, eby w ktrym z nich wykorzystano przeksztacenia pikselowe.
W wykorzystaniu pseudopikseli najciekawsze jest to, e mona wtedy zastosowa dowolny
efekt czsteczkowy (np. nieg, wodospad lub efekt gwiezdnej szybkoci [Sposb 33.]).
SPOSB

3.

Efekt starego filmu

Wykonanie efektu starej tamy filmowej za pomoc programw Photoshop i Flash.

Wektorowy silnik graficzny Flasha ma mnstwo zalet, ale czasem chciaoby si, eby grafiki nie miay a tak rwnych krawdzi. Efekt starego filmu jest jednym z najatwiejszych
i najszybszych sposobw nadania zwykemu klipowi niepowtarzalnej atmosfery i surowego
wygldu. Efekt ten mona dodatkowo wzbogaci o zmian kolorw wideo [Sposb 8.]
lub zmian koloru na sepi [Sposb 13.] projekt bdzie wtedy bardziej intrygujcy
i atrakcyjny.
Najoczywistszym sposobem zastosowania znieksztace charakterystycznych dla starych
filmw jest dodanie wywietlanych losowo linii i kropek. Efekt jest mniej wicej taki
sam, ale atmosfera starego filmu jest jednak zupenie inna (nie tak gadka). W tym
wiczeniu wykorzystamy map bitow, ktra umoliwia uniknicie wyrazistoci grafiki
wektorowej.
Najpierw utworzymy bitmap z zakceniami w programie Photoshop, a nastpnie zaimportujemy j do Flasha i poddamy dalszej obrbce. Oczywicie zamiast Photoshopa
mona uy programu Fireworks zasady pracy s podobne w obu aplikacjach.

34

Efekty wizualne

Efekt starego filmu

Tworzenie bitmapy
Zabrudzenia, zadrapania i biae plamy nadaj fotografii nieco bardziej autentyczny wygld. Kurz, brud, wos lub nitka, gdy trafi na klisz lub negatyw, wygldaj jak ciemne
pasma i linie. Zadrapania s widoczne jako biae linie.
Aby przystpi do przystosowania obrazka w programie Photoshop, naley wykona
nastpujce czynnoci:
1. Otwrz program Photoshop.
2. Nacinij klawisz D, aby ustawi domylne kolory ta i pierwszego planu.
3. Nacinij klawisz X, aby zamieni kolory kolor ta bdzie czarny, a pierwszego
planu biay.
4. Utwrz nowy plik o nazwie grain.psd, klikajc polecenie Nowy w menu Plik.
Okrel wymiary mapy bitowej, aby obrazek by duszy ni szerszy. W przykadzie
wybraem 800400 pikseli, ale obrazek moe by oczywicie mniejszy (zazwyczaj
bdzie to 400200 pikseli).
5. W oknie dialogowym tworzenia nowego dokumentu sprawd, czy w polu
Wypenienie zaznaczona zostaa opcja Kolor ta (jak na rysunku 1.9).
Utworzony zostanie pusty czarny kwadrat.

Rysunek 1.9. Photoshop: zaznaczanie opcji koloru ta

6. Dodaj now warstw, klikajc ikon tworzenia nowej warstwy na zakadce Warstwy.
Bdziemy rysowa tylko na jednej warstwie, naley wic upewni si, e Warstwa 1
jest zawsze zaznaczona na zakadce warstw jak na rysunku 1.10.
Zabierzmy si do rysowania efektw. Na starych filmach mona zobaczy trzy rodzaje
znieksztace: kreski, kropki i atki oraz rysy.
Efekty wizualne

35

SPOSB

3.

SPOSB

3.

Efekt starego filmu

Rysunek 1.10. Photoshop: nowo utworzona warstwa

Kreski
Powstaj, gdy na filmie znajd si ciemnie, dugie pasma (np. wosy).
Kropki i atki
Ciemnie kropki powstaj wskutek zabrudzenia przez kurz lub inny materia,
a biae po zarysowaniu lub uszkodzeniu filmu.
Rysy
Powstaj wskutek zarysowania filmu, czyli mechanicznego usunicia fragmentu obrazu.
Za pomoc narzdzi dostpnych w programie Photoshop (najlepiej owka i pdzla) dodaj
trzy typy znieksztace do obrazka na Warstwie 1. Jak wida na rysunku 1.11, po lewej
stronie narysowaem mae kropki, w rodku due aty, a po prawej rysy. Narysowaem te
na dole i na grze kreski imitujce wosy na kliszy.

Rysunek 1.11. Photoshop: podrabiane uszkodzenia

Posugujc si narzdziem Gumka o redniej gruboci, mona strawi kolor pikseli. W prawdziwych filmach gbokie zadrapania i inne uszkodzenia s widoczne na biao, ale wiele
znieksztace ma na powierzchni kliszy filmowej jedynie czciowy wpyw ten wanie
efekt postaramy si osign (rysunek 1.12).

36

Efekty wizualne

Efekt starego filmu

Rysunek 1.12. Pytkie zadrapania

Chocia uylimy tylko koloru biaego, wiele efektw na starych filmach jest czarnych i je
rwnie naleaoby zastosowa.
1. Zaznacz niektre obszary biaych pikseli za pomoc narzdzia Zaznaczenie.
2. Odwr kolory zaznaczenia, klikajc Obrazek/Dostosuj/Odwrotno. Moe si wydawa,
e zaznaczone piksele znikny dzieje si tak, poniewa utworzylimy wanie
czarne piksele, ktre znajduj si na czarnym tle (wic nie znikny, a s tylko
niewidoczne).
3. Usu warstw ta (przecignij j z zakadki Warstwy nad ikon kosza w dolnej czci
zakadki).
Obraz powinien wyglda mniej wicej tak, jak na rysunku 1.13 (to w postaci szachownicy oznacza w Photoshopie kana zero alfa, czyli brak pikseli).

Rysunek 1.13. Udawane dziury

Zapisz obrazek jako plik PNG. Nie jest konieczne dokonywanie jego optymalizacji.
Na tym etapie wielu projektantw optymalizuje grafiki, o ile maj one zosta zaadowane
na stron WWW wykonan we Flashu. W naszym przypadku nie ma jednak takiej potrzeby.
Poczekanie z optymalizacj do momentu utworzenia pliku SWF pozwala zachowa wiksz elastyczno.

Efekty wizualne

37

SPOSB

3.

SPOSB

3.

Efekt starego filmu

Jeli na przykad klient zechce, aby przygotowa wersj witryny dla czy o duej przepustowoci, wystarczy zmieni w programie Flash ustawienia eksportu map bitowych.
Jeli bitmapy zostayby zoptymalizowane przed zaimportowaniem do programu, konieczne
byoby ponowne otwarcie Photoshopa i wyeksportowanie obrazkw z nowymi ustawieniami. Nastpnie naleaoby zamieni nowymi obrazkami wszystkie instancje starych
grafik na listwie czasowej Flasha. Jasno wic wida, e zaimportowanie do Flasha grafik
penej jakoci i pniejsze ich zoptymalizowanie pozwala zaoszczdzi troch czasu. Uytkownicy, ktrzy wol pracowa w programie Fireworks, mog wycign wiele korzyci
ze sposobu, w jaki ten program integruje si z Flashem (tzn. z funkcji adowania i edycji).

Obrbka animacji we Flashu

Po wyeksportowaniu z Photoshopa bitmapy w formacie PNG nadszed czas na uycie Flasha.
1. Zaimportuj plik PNG, klikajc File/Import/Import to Library (plik/importuj/importuj
do biblioteki).
2. Wybierz bitmap z biblioteki.
3. W panelu Library (biblioteka) kliknij t bitmap prawym przyciskiem myszy (Windows)
lub przytrzymujc klawisz a (Mac), a nastpnie na wywietlonym menu kontekstowym
(zwanym take wysuwanym menu opcji) kliknij polecenie Properties (waciwoci).
4. Zmie waciwoci mapy bitowej, tak jak na rysunku 1.14 wybierz niski wspczynnik
kompresji JPEG i wycz opcj wygadzania (Flash szybciej przetwarza grafik,
jeli ta opcja jest wyczona).

Rysunek 1.14. Waciwoci bitmapy w bibliotece Flasha

Utworzylimy wanie obrazek, ktry ma zarwno kompresj JPEG, jak i kana alfa!
Zazwyczaj nie jest moliwa praca nad grafik w formacie JPEG ze skojarzonym
kanaem alfa, ale Flashowi zdaje si to nie robi rnicy fakt ten okazuje
si bardzo przydatny, gdy zachodzi potrzeba zastpienia grafiki wektorowej
map bitow.

38

Efekty wizualne

Efekt starego filmu

Przecignij obrazek na scen, nacinij klawisz F8 (Modify/Convert to Symbol) i przekszta

bitmap w symbol klipu filmowego o nazwie grain.
Pozostaje tylko naoy szybko si poruszajc wersj naszego klipu na film wideo, bitmap
lub animacj wektorow. Ja naoyem grafik na statyczny obraz, dziki czemu wyglda
on, jakby by wycity z tamy filmowej (rysunek 1.15).

Rysunek 1.15. Efekt starego filmu, etapy 1 3

Wykorzystaem take mask, aby ukry te elementy stylizowanego klipu, ktre nie s
widoczne na obrazku. Efekt jest widoczny na rysunku 1.16 (mona rwnie zapozna si
z plikiem grain.fla, ktry mona pobra ze strony powiconej ksice).

Rysunek 1.16. Uycie maski do wykoczenia efektu

Efekty wizualne

39

SPOSB

3.

SPOSB

4.

Tworzenie plikw SWF z animowanych obrazkw GIF

Uwagi kocowe
Zaprezentowana technika moe nie tylko urozmaici krtki klip, ktry nie ma duego
znaczenia, ale take:
zamaskowa niedoskonaoci wideo (np. pikselacj spowodowan wysok kompresj),
oywi statyczne obrazki, dziki czemu bd one wydawa si ruchome,
ukry ewentualne przerwy. Jeli czone s pliki wideo lub nieruchome grafiki
(np gwna sekcja filmu i wektorowy wstp lub napisy kocowe), mona
zatuszowa poczenia, dodajc do caoci ten efekt.
SPOSB

4.

Tworzenie plikw SWF z animowanych obrazkw GIF

Szybkie przeksztacanie animacji GIF i wykorzystanie ich we Flashu.

Czytelnikw na pewno zainteresuje rozszerzenie moliwoci plikw GIF poprzez zaimportowanie ich do Flasha. Udaem si wic na stron wydawnictwa OReilly (http://www.oreilly.com),
na ktrej powitaa mnie maa futrzana istota powiedziano mi, e jest to wyrak1 (rysunek 1.17). Nazwa pliku, oreilly_header1.gif, jest typowa dla obrazkw umieszczanych w tabelach HTML. Miaem wic plik GIF, nad ktrym mogem popracowa. Wyrak wyglda
tak sympatycznie, e przygldaem mu si przez jaki czas. Nagle mrugnem powiekami,
a po chwili futrzak zrobi to samo. Zdziwiem si i poczekaem chwil, eby zobaczy to
jeszcze raz miaem wic do czynienia z animowanym obrazkiem GIF.

Rysunek 1.17. Maskotka wydawnictwa OReilly

Pomylaem, e zrobienie flashowej wersji animowanego futrzaka byoby dobrym sposobem przedstawienia rnic midzy Flashem a standardowym HTML-em. Ta sztuczka pokazuje, jak zredukowa wielko pliku, uywajc Flasha zamiast animowanych obrazkw
GIF. Gdy dwuwymiarowa animacja zostanie ju zaimportowana do Flasha, mona przeksztaci j w symulacj trjwymiarowego mrugajcego powiekami wyraka [Sposb 35.].

Zwany take tarsjuszem lub tarsjuszem wyrakiem (ac. Tarsius syrichta). Maa nadrzewna
mapiatka prowadzca nocny tryb ycia i yjca na wyspach poudniowo-wschodniej Azji.
Gatunek objty cakowit ochron przyp. tum.

40

Efekty wizualne

Tworzenie plikw SWF z animowanych obrazkw GIF

Animowany obrazek GIF

Kopi naszego animowanego przyjaciela moemy uzyska, wykorzystujc opcj Zapisz
przegldarki. Na przykad w windowsowym programie Internet Explorer wystarczy klikn wyraka prawym przyciskiem myszy i z menu kontekstowego wybra polecenie Zapisz
obraz jako, aby pobra obrazek na dysk twardy komputera.
Kolejn zalet animacji wykonanych we Flashu jest zabezpieczenie pliku przed kradzie
nie jest on wtedy tak atwo dostpny, jak plik GIF. Robi si to poprzez ukrycie pliku SWF
[Sposb 98.] w pamici podrcznej przegldarki, gdzie uytkownicy najczciej szukaj
pobranych z internetu plikw wykonanych we Flashu.
Po otwarciu pliku GIF zamieszczonego w witrynie wydawnictwa OReilly w programie
do edycji grafiki (Fireworks, Photoshop/ImageReady) mona przekona si, e animacja
mrugnicia jest uruchamiana co 12,5 sekundy (czas trwania pierwszej klatki bez mrugnicia wynosi 12 sekund, za sama animacja mrugnicia trwa p sekundy), a cakowity
czas jej trwania to rwnie 12,5 sekundy. Warte uwagi jest take to, e wikszo pikseli
skadajcych si na obrazek poza oczami nie zmienia si w poszczeglnych klatkach animacji. Dlatego te przeksztacenie obrazka do formatu Flash powinno natychmiast zaowocowa znacznym ograniczeniem wielkoci pliku.
Trzeba te zauway, e animacja nie jest interaktywna. W tym przypadku podejcie takie
jest ze wszech miar odpowiednie animacja nie powinna rozprasza czytelnikw witryny.
My jednak (dla zabawy) dodamy do niej funkcje interaktywne, a przy okazji przekonamy
si, e mimo to plik SWF jest mniejszy ni plik GIF.

Tworzenie elementw animacji

Najlepszym sposobem zaimportowania wszystkich elementw pliku GIF jest pobranie
ich jako serii obrazkw PNG, poniewa nie spowoduje to pogorszenia jakoci oryginau
(zwaszcza jeli zostanie wykorzystany format PNG-24) i atwe bdzie dodanie kanau
alfa. Chocia pliki GIF obsuguj przezroczysto, w rzeczywistoci zawieraj jedynie mask, okrelajc, ktre piksele s widoczne, a ktre nie. Format PNG-24 obsuguje prawdziwy kana alfa (ang. true alpha), gdzie przezroczysto jest okrelana w procentach. Na
rysunku 1.18 pokazano obrazki PNG (w programie Photoshop) gotowe do wyeksportowania do Flasha.
Dla osignicia efektu skorzystaem z kilku ciekawych sposobw:
przyciem obrazek, aby oddzieli animowan cz (tzn. oczy) od reszty;
chocia oryginalna animacja trwa sze klatek, trzy spord nich s powtarzane
(sekwencja zamykania oka jest po prostu odwrotn powtrk sekwencji otwierania)
mona wic znacznie zmniejszy liczb pojedynczych klatek, ktre bdzie trzeba
odtworzy we Flashu (tym samym zmniejszajc wielko pliku);

Efekty wizualne

41

SPOSB

4.

SPOSB

4.

Tworzenie plikw SWF z animowanych obrazkw GIF

Rysunek 1.18. Animacja GIF w postaci plikw PNG

animacj mona wyeksportowa w formacie PNG-24 i z kanaem true alpha, co umoliwi

wygadzenie konturw obrazka. Jeli futrzak zostanie umieszczony na tle dungli
(poczuby si jak w domu), jego kontur wtopi si w to, nie tworzc nierwnych
krawdzi lub powiaty, co ma zwykle miejsce przy standardowych plikach GIF.
Co zrobi, eby zaimportowany do Photoshopa obrazek by przezroczysty?
1. Skopiuj warstw Background na zakadce Layers.
2. Usu oryginaln warstw ta. Powinna pozosta jedna warstwa o nazwie Background
Layer Copy.
3. Przy uyciu narzdzia Eraser (gumka) mona utworzy na tej warstwie kana alfa.
Warstwa Background jest ju usunita i po wymazaniu pikseli nie istnieje to,
ktre mogoby przewitywa przez wytarte miejsca. Zamiast tego w programie
powstaje efekt przezroczystoci.
Jeli obrazki PNG zostan zaimportowane do Flasha (za pomoc polecenia Import w menu
File), moliwe bdzie odbudowanie obrazka maskotki w zwyczajowy sposb poczwszy od najniszej warstwy, a skoczywszy na najwyszej: po kolei gaki oczne, renice,
powieki i wreszcie ciao (rysunek 1.19).

Rysunek 1.19. Gaki, renice, powieki i ciao

42

Efekty wizualne

Tworzenie plikw SWF z animowanych obrazkw GIF

Prosz zwrci uwag, e w tej wersji pliku gaki oczne s grafik wektorow. Sekwencja
mrugania oczami jest klipem filmowym skadajcym si z trzech map bitowych z oczami
zamykajcymi si stopniowo i trzech bitmap, na ktrych sytuacja jest odwrcona i oczy
si otwieraj. renice to dwa punkty o nazwach leftEye_mc i righEye_mc. Po zastosowaniu poniszego skryptu renice maskotki bd poda za wskanikiem myszy (rysunek 1.20). Kod ten mona standardowo osadzi w pierwszej klatce warstwy actions na
gwnej listwie czasowej.

Rysunek 1.20. ledzenie kursora

followMouse = function () {
this.startX = this._x;
this.startY = this._y;
this.onEnterFrame = animateEye;
};
animate eye = funtion () {
var distX = (_xmouse this._x) / 50;
var distY = (_ymouse this._y) / 50;
if (Math.abs(distX) < 5) {
this._x = this.startX+distX;
}
}:
leftEye_mc.onEnterFrame = followMouse;
rightEye_mc.onEnterFrame = followMouse;

Funkcja followMouse() zostaa okrelona dla obydwu oczu jako uchwyt zdarzenia onEnterFrame. Po wywoaniu wczytuje pozycj startow renic i zmienia uchwyt zdarzenia
onEnterFrame na animateEye() w celu wywietlenia nastpnych klatek. Funkcja porusza
renicami o okrelon odlego od pozycji wyjciowej, opierajc si na pooeniu kursora
myszy dziki temu maskotka zdaje si ledzi wzrokiem kursor myszy.
Oczywicie maskotka moe by duo bardziej wyrazista ni animowany obrazek GIF
(jak na rysunku 1.21). Nie jest to jednak adna sztuczka na tym wanie polega Flash.

Rysunek 1.21. Wyrak melancholik i wyrak alkoholik

Efekty wizualne

43

SPOSB

4.

SPOSB

5.

Animowanie plikw PSD we Flashu

Uwagi kocowe
Cho jest to raczej standardowa animacja, szybko, z jak zostaa przeniesiona z istniejcego pliku GIF, pokazuje, jak atwe jest tworzenie we Flashu ciekawych animacji. Bitmapy z przezroczystoci mona nakada na siebie w celu utworzenia wielowarstwowych
animacji przy wykorzystaniu animowanych obrazkw GIF. Jest to take dobry sposb
eksportowania plikw PSD wykonanych w Photoshopie do Flasha wystarczy wyeksportowa kad warstw jako oddzielny plik PNG-24, w ktry bdzie wbudowana przezroczysto. Nastpnie mona uoy pliki PNG w okrelonej kolejnoci, posugujc si
warstwami Flasha. Jedyna (oczywista) rnica polega na tym, e mona potem przystpi
do animowania warstw!
SPOSB

5.

Animowanie plikw PSD we Flashu

Import plikw wykonanych w programie Photoshop i animowanie ich we Flashu.

Tym razem zajmiemy si odtwarzaniem we Flashu wielowarstwowych plikw wykonanych w programie Photoshop. Omwimy dokadnie wszystkie szczegy, poniewa s
one bardzo pouczajce (i nic nas to nie kosztuje!). Spraw uatwi znacznie dodatek do
Photoshopa o nazwie PSD2FLA (http://www.medialab.com/psd2fla) opracowany przez firm
Media Lab. Programici pracujcy z programem Director znaj firm Media Lab jako twrc
PhotoCastera, cenionego i popularnego narzdzia umoliwiajcego importowanie plikw
PSD do programu Director.
Jeli w systemie zainstalowany jest program QuickTime 4.0 lub nowszy, moliwe jest zaimportowanie pliku PSD bezporednio do Flasha. Flash najprawdopodobniej wywietli
informacj, e nie moe zaimportowa pliku, ale umoliwi wybr opcji importu za porednictwem programu QuickTime. Po klikniciu przycisku potwierdzenia obrazek zostanie zaimportowany do programu.
Narzdzie importu plikw w programie Flash rozpozna plik .psd jako dokument
programu Photoshop w wersji 2.5 lub 3. Jednak przy wykorzystaniu QuickTimea
Flash moe obsugiwa pliki wykonane w nowszych wersjach Photoshopa.

Z importowaniem plikw za pomoc programu QuickTime zwizany jest pewien problem

plik zostaje spaszczony, uniemoliwiajc dostp do oddzielnych warstw (rysunek 1.22).
Zakadamy, e jedynym powodem zaimportowania pliku PSD (w przeciwiestwie do takich
formatw wykorzystywanych na stronach WWW, jak JPEG) jest uzyskanie dokadnych
informacji o jego warstwach, co powoduje, e QuickTime poprzez swoje ograniczenie nie
jest narzdziem do koca idealnym.
W tym wiczeniu zajmiemy si zaimportowaniem pliku PSD wraz ze wszystkimi istotnymi
informacjami o warstwach, aby moliwe byo edytowanie go i animowanie we Flashu.
Zacznijmy od przycicia obrazka PSD lub zmiany jego wymiarw w Photoshopie, aby
mia on wymiary odpowiednie do umieszczenia na stronie WWW (czyli nie by wikszy
ni 500500 pikseli).

44

Efekty wizualne

Animowanie plikw PSD we Flashu

Rysunek 1.22. Photoshop: obrazek z warstwami

Lepsze efekty uzyska si, zmniejszajc rozmiary pliku Photoshopa stopniowo. Na przykad dziki krokowym zmianom z 10001000 do 900900, 800800 a do 500500 pikseli
obrazek bdzie mia lepsz jako i dostpnych bdzie wicej opcji podczas pniejszej
kompresji.
Kolejnym powodem zmniejszenia rozmiarw obrazka jest to, e Flash nie zosta zaprojektowany do obsugi bitmap w taki sposb, w jaki zamierzamy ich uy jest przede wszystkim narzdziem do obrbki grafiki wektorowej. Mona oczywicie obej to ograniczenie,
jeli ograniczymy rozmiary map bitowych, a Flash nie bdzie musia dokonywa zbyt
wielu zmian na ekranie w kadej klatce.
Nastpnie naley poczy (spaszczy) moliwie wiele warstw, aby maksymalnie zredukowa ich liczb. Flash bdzie dziaa naprawd sprawnie, jeli uda si uzyska maksymalnie 5 6 warstw. Naley take zastanowi si nad usuniciem warstw tekstu lub
innych warstw, ktre mona wykona we Flashu (napisy mona odtworzy za pomoc
narzdzi do rysowania i pisania).
Zdecydowaem si usun wszystkie napisy poza gwnym nagwkiem (grny lewy rg).
Usunity tekst mona zastpi wyraniejszym tekstem wektorowym podczas obrabiania obrazka we Flashu. Postanowiem zachowa gwny nagwek bez zmian, poniewa

Efekty wizualne

45

SPOSB

5.

SPOSB

5.

Animowanie plikw PSD we Flashu

zastosowano w nim efekty dostpne w programie Photoshop, ktrych nie uda si atwo odtworzy narzdziem do tworzenia grafiki wektorowej. Rysunek 1.23 przedstawia uproszczon wersj grafiki z usunitymi napisami.

Rysunek 1.23. Obrazek wykonany w programie Photoshop bez warstw, ktre mona odtworzy we Flashu

Nastpnym etapem jest wyeksportowanie kadej warstwy jako pliku PNG. Pracujc w Photoshopie, naley:
1. Ukry wszystkie warstwy poza t, ktra ma zosta wyeksportowana.
2. Zapisa plik w formacie PNG, klikajc polecenie Zapisz jako w menu Plik.
3. Po wyeksportowaniu wszystkich warstw ponownie zaadowa pliki PNG,
na ktrych jest duo wolnego miejsca na przykad jak wok licia na rysunku 1.24
i przyci je, aby pozby si zbdnych pikseli alfa (rysunek 1.25).
Wrmy teraz do oryginalnego pliku PSD, nie zamykajc Photoshopa mona wykona
zrzut obrazka, jeli nie dysponuje si wystarczajc iloci pamici RAM, umoliwiajc
jednoczesne dziaanie obydwu programw. Obrazek bdzie jeszcze potrzebny.
We Flashu okrel takie same rozmiary sceny, jakie ma grafika PSD, i zaimportuj wszystkie
pliki PNG do biblioteki, klikajc File/Import/Import to Library (Flash MX 2004) lub File/
Import to Library (Flash MX).

46

Efekty wizualne

Animowanie plikw PSD we Flashu

Rysunek 1.24. Warstwa, ktra a si prosi o przycicie

Rysunek 1.25. Przycity obrazek

Efekty wizualne

47

SPOSB

5.

SPOSB

5.

Animowanie plikw PSD we Flashu

Aby animowanie bitmap byo wygodne, zalecane jest przeksztacenie ich w klipy filmowe
(tzn. umieszczenie ich w klipach filmowych, poniewa mona pniej korzysta z metod
i efektw animacyjnych dostpnych dla klipw):
1. Przecignij po kolei kad bitmap z biblioteki na scen.
2. Zaznacz bitmap.
3. Nacinij klawisz F8, aby utworzy symbol klipu filmowego. Dla wygody dobrze jest
zachowa nazwy obrazkw, ale doda do nich przyrostek _mc.
Mamy wic teraz kilka bitmap o przezroczystych tach, ktre mona umieszcza na scenie
Flasha tak samo, jak warstwy w oryginalnych obrazkach PSD. Na rysunku 1.26 pokazano
mapy bitowe w bibliotece Flasha.

Rysunek 1.26. Import map bitowych do biblioteki

Umie rcznie klipy filmowe na listwie czasowej (lub w innym klipie w zalenoci
od tego, jak bd prezentowane) w tym samym porzdku i pooeniu, co w oryginalnym
pliku PSD. Efekty dostpne w programie Photoshop (np. rozjanienie, ciemnienie itp.)
mona emulowa we Flashu, posugujc si efektami kolorystycznymi. Oczywicie mona
wprowadzi zmiany, aby flashowa wersja przeznaczona na stron WWW (rysunek 1.27)
rnia si od wersji drukowanej wykonanej w Photoshopie.

48

Efekty wizualne

Animowanie plikw PSD we Flashu

Rysunek 1.27. Odtwarzanie kompozycji we Flashu

Na koniec naley jeszcze zoptymalizowa kad bitmap z osobna, klikajc j prawym

przyciskiem myszy (Windows) lub przytrzymujc klawisz a (Mac) w bibliotece i okrelajc odpowiednie ustawienia eksportu. Ustawienia zapewniajce najwiksz rwnowag
midzy wielkoci pliku a jakoci obrazu to zazwyczaj:
fotografia (JPEG),
bez wygadzania,
jako w granicach 30 50%.
Okrelajc jako kadej bitmapy, trzeba mie na uwadze to, e obrazki stanowi cz wielowarstwowej kompozycji i wiele niedoskonaoci spowodowanych przez wysoki wspczynnik kompresji zostanie zamaskowanych przez warstwy i przezroczysto. Dlatego
te naley przyjrze si caoci i oceni, jaka jako jest zadowalajca. Grafiki na niszych
warstwach skompresowane na poziomie 20% mog wyglda cakiem dobrze.
We Flashu moliwe jest wyeksportowanie bitmapy z kanaem alfa w momencie
zastosowania kompresji JPEG!

Efekty wizualne

49

SPOSB

5.

SPOSB

6.

Drzewko na Brooklynie

Wszystko jest ju przygotowane do tworzenia animacji. Kady element kompozycji mona

teraz:
animowa przy wykorzystaniu animacji uzupenianej (okrelenie wartoci Motion
dla opcji Tween w panelu waciwoci),
animowa dynamicznie za pomoc kodw ActionScript po uprzednim nadaniu
nazwy instancji.
Mona take doda napisy i obrazki wektorowe analogiczne do tych, ktre istniay w pierwotnej wersji (lub wzbogaci projekt o nowe elementy wektorowe).
Jak ju wspominaem wczeniej, Flash moe dziaa nieco ociale podczas animowania map bitowych, cho dowiadczenie pokazuje, e mona osign dobre efekty, jeli
w okrelonym czasie animowana jest tylko jedna warstwa lub jeli rozmiary elementw
s niewielkie i niewiele zmienia si w kadej klatce.

Uwagi kocowe
Pki planowane animacje nie wpywaj znaczco na wydajno procesora lub nie wymagaj zastosowania duych grafik (naleaoby wtedy pomyle o uyciu programu Director),
mona skorzysta z przedstawionego w tym rozdziale sposobu przeksztacenia plikw
PSD w obrazki PNG i zaimportowania ich do Flasha. Sposb ten okae si take pomocny,
jeli witryna ma zosta urozmaicona o wykonane w Photoshopie wizualizacje lub dokumenty przygotowane do druku. Mona wtedy posuy si narzdziem autorw PSD2FLA
programem PhotoWebber (http://www.photowebber.com).
Bazujc na swoim dowiadczeniu, mog powiedzie, e wielko ostatecznego pliku SWF
moe by znacznie mniejsza zwaszcza w porwnaniu z oryginalnym plikiem PSD. Zazwyczaj plik SWF ma tak sam wielko, jak statyczny obrazek JPEG redniej lub wysokiej jakoci.
SPOSB

6.

Drzewko na Brooklynie2
Tworzenie generatora drzew.

W tym wiczeniu za pomoc standardowych metod (fraktali, rekurencji, algorytmu powtarzania i skalowania) utworzymy wygldajce naturalnie drzewo. Nastpna sztuczka
bdzie polega na utworzeniu animacji przy wykorzystaniu wbudowanej hierarchii klipw
filmowych. Mwic po ludzku: chodzi o to, e zasadzimy drzewko, ktre bdzie koysa
gaziami na wietrze [Sposb 7.]. Zrobimy to, naladujc w kodzie zjawiska natury.
Na pierwszej konferencji Flash Forward (http://www.flashforward2004.com), w ktrej uczestniczyem, Josh Davis opowiada o swoich inspiracjach. Wykad trwa 45 minut, ale jego
sens zawiera si w jednym zdaniu: Przyjrzyjcie si naturze zobaczcie, czym was obdarowuje i jak mona to wykorzysta.
2

Tytu ksiki Betty Smith (A Tree Grows in Brooklyn, 1943) przeniesionej na duy ekran
przez Eli Kazana w 1945 roku przyp. tum.

50

Efekty wizualne

Drzewko na Brooklynie

W internecie mona znale wiele tego rodzaju eksperymentw, a w ksice takiej, jak ta
nie moemy przej obok nich obojtnie.

Fraktale
Aby zdoby potrzebne informacje przyrodnicze, przeprowadziem krtk rozmow z moj
dziewczyn, Karen. Obowizuje nas jasny podzia obowizkw: ona zajmuje si ogrodem,
ja komputerem.
Oto, czego si dowiedziaem, nie wystawiajc nosa za drzwi. Drzewa rosn wedug prostego, zazwyczaj regularnego wzorca. Ga jest prosta do okrelonego punktu, pniej
odczaj si od niej inne gazie. Grubo gwnej gazi jest zazwyczaj proporcjonalna
do gruboci gazi, ktre z niej wyrosy zazwyczaj obwd jest porwnywalny (cakowita grubo pnia odpowiada w takim samym lub zblionym stopniu gruboci gazi,
wypuszczonych z tego pnia). Oznacza to, e moda gazka ronie i rozwija si zupenie
tak samo, jak gwna ga: wymiary s porwnywalne. Wiadomo, e istnieje zaleno
midzy drzewem a gazi, poniewa jeli zasadzi si sadzonk (a raczej: jeli Karen to
zrobi; moje zawsze usychaj), to wyronie drzewo.
Uzbrojony w t wiedz, zabraem si do opracowania generatora drzew. Dwa przykadowe wyniki moich prac mona zobaczy na rysunku 1.28.

Rysunek 1.28. Chyba nigdy nie zobacz adniejszego zrzutu ekranu

Efekty wizualne

51

SPOSB

6.

SPOSB

6.

Drzewko na Brooklynie

Obydwa drzewa zostay utworzone przy wykorzystaniu tego samego kodu. Oto kod
z pliku treeGen.fla, ktry mona pobra ze strony powiconej ksice:
function counter() {
if (branchCounter == undefined) {
branchCounter = 0;
}
return (branchCounter++);
}
function grow() {
//Wypu ga
this.lineStyle(trunkThickness, 00, 100);
this.moveTo(0.0);
this.lineTo(0, trunkLenth);
//Jeli to nie jest pie, zmie kt i grubo gazi.
if (this._name ! = "trunk") {
this._rotation = (Math.random()*angle angle/2;
this._xscale *= branchSize;
this._yscale *= branchSize;
}
//Pu pdy
var seed = math.ceil(Math.random()*branch);
for (var i = 0; i < seed; i++) {
if (counter() < 3000) {
var segment = this.createEmptyMovieClip("segment" + i, i);
segment.onEnterFrame = grow;
segment._y = trunkLength;
}
}
delete (this.onEnterFrame);
}
//Zdefiniuj pooenie pnia i ustaw uchwyt onEnterFrame na grow().
this.createEmptyMovieClip("trunk", 0);
trunk._x = 200;
trunk._y = 400;
trunk.onEnterFrame = grow;
//Parametry drzewa
var angle = 100;
var branch = 5;
var trunkThickness = 8;
var trunkLength = -100;
var branchSize = 0,7;

Podstawowy ksztat drzewa jest zdefiniowany przez parametry w ostatnich kilku liniach kodu:
Angle (kt)
Maksymalny kt tworzony przez ma i du ga.
Branch (ga)
Maksymalna liczba pdw (modych gazek), jakie moe mie jedna ga.
TrunkThickness (grubo pnia)
Grubo pnia drzewa.

52

Efekty wizualne

Drzewko na Brooklynie

TrunkLength (dugo pnia)

Dugo pnia drzewa.
BranchSize (rozmiar gazi)
Stosunek gazi-crki do gazi-matki (im dalej od pnia, tym mniejsze staj si gazie).
Najpierw zostaje utworzony pie i okrelane jest jego pooenie. Nastpnie podczana jest
do niego funkcja grow() jako uchwyt zdarzenia onEnterFrame. Jak wskazuje nazwa, funkcja grow() ronij sprawia, e klip filmowy ronie z dwch powodw. Po pierwsze
tworzona jest ga poprzez narysowanie pionowej linii o dugoci trunkLength i gruboci trunkThickness. Jeli rysowana ga jest pniem drzewa, zostawiamy j bez
zmian, i efekt bdzie taki, jak w scenie 1. Jeli nie rysujemy pnia, obracamy ga o kt
+/- angle jak w scenie 2. i skalujemy o rozmiar branchSize jak w scenie 3.
(wszystkie etapy uwidoczniono na rysunku 1.29).

Rysunek 1.29. Ronij malekie, ronij

Nastpnie utworzone zostaj nowe gazki midzy 1 a branch. Najciekawsze jest to, e
do pdw przypisany jest ten sam uchwyt zdarzenia onEnterFrame, co do biecej gazi
grow() i w nastpnej klatce pdy wypuszcz kolejne pdy, i tak dalej, i tak dalej.
Oto fragment funkcji grow(), ktry tworzy nowy klip filmowy dla kadego pdu i przypisuje do niego uchwyt zdarzenia onEnterFrame. Drzewo mogoby wypuszcza nowe
gazie bez koca, ale musimy przecie ustali jaki koniec. W przeciwnym razie Flash
bdzie pracowa coraz wolniej, a w kocu przestanie odpowiada. Do tego wanie suy
funkcja counter() ogranicza ona cakowit liczb gazi do 3000.
var seed = Math.ceil(Math.random()*branch);
for (var i = 0; i < seed; i++) {
if (counter() < 3000) {
var segment = this.createEmptyMovieClip("segment" + i, i);
segment.onEnterFrame = grow;
segment._y = trunkLength; }
}

Na koniec funkcja grow() usuwa si sama, poniewa wystarczy, e zostanie uruchomiona

raz dla jednej gazi.

Efekty wizualne

53

SPOSB

6.

SPOSB

7.

Gazie koysane wiatrem: imitacja ruchu drzewa

Do utworzenia fraktalowego drzewa wykorzystywana jest wic funkcja samowywoujca

(lub raczej funkcja tworzca kopie gazi, do ktrych przypisana jest taka sama funkcja).
W rezultacie powstaje nie tylko drzewo zbudowane z gazi i podgazi, ale hierarchia ta
zostaje odzwierciedlona na listwach czasowych klipw filmowych. Mona przyjrze si
temu zjawisku, posugujc si debugerem (cho wtedy konieczne bdzie okrelenie maksymalnej liczby gazi poniej 3000, chyba e komu nie zaley na czasie!).
Otrzymana w rezultacie grafika, pomimo prostoty, ma nieco orientalny charakter. Efekt
nie zawiera jednak animacji, a statycznych generatorw Java jest bardzo wiele. Animacj
zajmiemy si w nastpnym wiczeniu.
SPOSB

7.

Gazie koysane wiatrem: imitacja ruchu drzewa

Tworzenie filmu przy wykorzystaniu wbudowanych klipw filmowych.

W poprzednim wiczeniu dowiedzielimy si, jak losowo wygenerowa drzewo, a teraz

przejdziemy do jego animacji. Gdy drzewa poruszaj si, zdaj si przestrzega tego samego porzdku ga-pd, ktry wykorzystalimy do wygenerowania drzewa. Dojcie do
poniszych wnioskw zajo mi troch czasu, cho wydaj si one zupenie oczywiste:
gdy porusza si pie, porusza si cae drzewo,
gdy porusza si ga, poruszaj si wszystkie odgazienia.
Znacznie trudniej jest jednak opracowa waciwy zakres ruchu dla poszczeglnych czci
drzewa. Pocztkowo wydawao mi si, e pie redniej wielkoci drzewa odchyla si na
wietrze w znacznie mniejszym stopniu, ni drobne gazki w koronie, lecz okazao si, e
to nieprawda. Aby si o tym przekona, wystarczy wetkn w ziemi obok drzewa redniej
gruboci gazk (pozbawion wszelkich odgazie) i przyjrze si jej w wietrzny dzie.
Okae si, e ga wcale nie wychyla si u swego szczytu bardziej, ni pie drzewa.
Gazka jest wprawdzie sabsza i bardziej elastyczna, lecz jej powierzchnia (zakadajc, e
brutalnie pozbawilimy j lici) jest znacznie mniejsza ni powierzchnia drzewa, co w znaczcy sposb osabia dziaanie siy wiatru.
Gazka na samej grze porusza si energiczniej ni pie tylko dlatego, e poruszaj si
take wszystkie gazie stojce od niej wyej w hierarchii (tzn. grubsze od niej) i ich ruch
zostaje skumulowany, gdy porusza si drzewo. Widzicie? Codziennie mona nauczy si
czego nowego.
To odkrycie dnia uatwi nam znacznie dodanie efektu wiatru wystarczy potraktowa
kad ga tak samo, jak pie i inne gazie!
Zamiast usuwania kadego uchwytu onEnterFrame (jak zrobilimy to wczeniej podczas
tworzenia drzewa [Sposb 5.]), moemy zmieni wiersz kodu, ktry usuwa funkcj grow():
delete (this.onEnterFrame);

i zastpi go funkcj sway(), gdy ga ju wyronie:

this.onEnterFrame = sway;

54

Efekty wizualne

Gazie koysane wiatrem: imitacja ruchu drzewa

Aby utworzy efekt wiatru, naley po prostu napisa funkcj sway(), ktra okrela warto
wind (wiatr) dodawan do kadej gazi w kadej klatce animacji za pomoc teje funkcji:
function sway() {
this._rotation += wind;
}

Konieczne jest urozmaicenie wartoci koysania. Mona to zrobi nastpujco:

function sway()
wind +=windEffect;
if (wind > windStrength) {
wind = -wind;
}
this._rotation += wind;
}

Oczywicie naley okreli wartoci pocztkowe parametrw wiatru. Oto ostateczne wartoci, ktre zastosowaem w tym przykadzie (nowe parametry zaznaczone s tustym
drukiem):
//Parametry drzewa
var angle = 100;
var branch = 5;
var trunkThickness = 8;
var trunkLength = -100;
var branchSize = 0.7;
//Parametry wiatru
var windEffect = 0.05;
var windStrength = 1;
var wind = 0;

Do animacji mona doda suwaki, aby uytkownik mg rcznie regulowa natenie

wiatru [Sposb 61.].
Na rysunku 1.30 przedstawiono drzewo koyszce si na wietrze..

Rysunek 1.30. Drzewo na wietrze

Efekty wizualne

55

SPOSB

7.

SPOSB

7.

Gazie koysane wiatrem: imitacja ruchu drzewa

Uwagi kocowe
Chocia w kodzie wykorzystanych zostao kilka sztuczek, to najwiksza jego zalet jest
zastosowany sposb mylenia. Kopiowanie natury i otaczajcej nas rzeczywistoci jest
sprawdzon metod odkrywania nowych moliwoci Flasha.
Poniewa program ten jest graficznym rodowiskiem programistycznym, po napisaniu
kodu mona natychmiast zapozna si z efektem graficznym. Jeli postanowicie zasadzi wicej ni jedno drzewo, sprawdcie, czy efekt jest realistyczny, gdy wiatr wieje
z rnym nateniem. Wydaje mi si, e dziki drobnym nierwnociom cao bdzie
blisza rzeczywistoci prawdziwy wiatr wiejcy z okrelonego kierunku najmocniej
atakuje drzewa skrajne, ktre wyhamowuj jego si. Kolejne drzewa poruszaj si ju
mniej energicznie.
Moj muz nie jest jednak natura, ale gry wideo. Myl, e wszystkie problemy, przed
jakimi staj projektanci animacji, zostay ju rozwizane przez zespoy zajmujce si produkcj gier wideo. To ju jednak zupenie inna bajka

56

Efekty wizualne