Macromedia Flash Super Samurai

IDZ DO
PRZYKADOWY ROZDZIA
SPIS TRECI
KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG
Macromedia Flash
Super Samurai
Autor: praca zbiorowa
Tumaczenie: Marek Binkowski
ISBN: 83-7197-696-8
Tytu oryginau: Macromedia Flash Super Samurai
Format: B5, stron: 378
Zawiera CD-ROM
TWJ KOSZYK
DODAJ DO KOSZYKA
CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK
CZYTELNIA
FRAGMENTY KSIEK ONLINE
Gwnym zaoeniem tego podrcznika jest nauka poprzez zabaw (bo kreskwki to
przede wszystkim dua dawka zabawy). Dlatego wydanie tej ksiki w formie zwykego
podrcznika byoby powanym bdem. Podstawy Flasha mona przyswoi sobie
z rnych rde, wic nie bdziemy im tu powica zbytniej uwagi. W zwizku z tym
najlepiej by byo, aby podstawy mia ju opanowane, gdy nie bdziemy zajmowa si
opisem kadego narzdzia czy sposobu jego zastosowania. Czasami najlepiej jest
zapozna si z narzdziem poprzez uycie go w niestandardowy sposb.
W kadym rozdziale znajdziesz wiczenia, ktre umoliwi ci zastosowanie wyoonych
przez nas teorii w praktyce. Do wszystkich wicze doczono kompletne pliki
w formacie FLA zawierajce wszystkie potrzebne elementy. Na pycie CD znajduje si
ponad 75 autorskich plikw wykonanych we Flashu. Dodatkow atrakcj jest
(umieszczony rwnie na pycie CD) plik w formacie FLA z dwuminutow kreskwk
wideo z muzyk, Human Blues wykonan przez Webera.
Jeli twoim marzeniem jest programowanie gier w pitej wersji Flasha, lecz zniechca
ci zoono procesu tworzenia, ta ksika moe przyczyni si do twojego sukcesu.
Poprzez wykonywanie wicze i analizowanie przykadw zrozumiesz nawet najbardziej
skomplikowane zagadnienia. Jeli tylko przyswoisz sobie techniki zastosowane w grach
dostarczonych z t ksik na pewno bdziesz tworzy wasne gry we Flashu.
komunikacji z przegldark za pomoc Flasha i skryptw JavaScript.
Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl
Spis treci
Podzikowania ........................................................................................................................ 7
O Autorach............................................................................................................................ 11
Wstp .................................................................................................................................... 15
Rozdzia 1. Jak tchn ycie w film Flasha ..............................................................19

Interaktywny pajk ............................................................................................................... 19
Plik rdowy ..................................................................................................................................20
Tworzenie elementw pajka..........................................................................................................20
Wprawianie pajka w ruch ..............................................................................................................21
Interaktywno pajka.....................................................................................................................24
Chodzce insekty .................................................................................................................. 24

Tworzenie elementw insekta .........................................................................................................25
Spacer insekta..................................................................................................................................27
Podsumowanie ...................................................................................................................... 32
Rozdzia 2. Flash i grafika trjwymiarowa..............................................................33

ActionScript i trzy wymiary ................................................................................................. 33
Trzy wymiary ..................................................................................................................................33
Symulacja trzech wymiarw ...........................................................................................................36
Kolejno nakadania klipw na osi z .............................................................................................43
Przesunicia.....................................................................................................................................44
Obrt................................................................................................................................................52
Optymalizacja..................................................................................................................................64
Studium 1. Obracanie skupiska punktw ........................................................................................66
Studium 2. Trjwymiarowy wiat ...................................................................................................72
Studium 3. Trjwymiarowe menu...................................................................................................79
Podsumowanie ................................................................................................................................87
Renderowane obiekty trjwymiarowe .................................................................................. 87

Oprogramowanie niezalenych producentw .................................................................................87
Studium 1. Myliwiec .....................................................................................................................89
Studium 2. Interfejs Gwiezdne wrota..............................................................................................99
Podsumowanie ..............................................................................................................................104
Rozdzia 3. Prawa fizyki ..........................................................................................105

Podstawy matematyki ......................................................................................................... 105
Ukad wsprzdnych Flasha ........................................................................................................105
Powtrka z trygonometrii..............................................................................................................107
Wektory .........................................................................................................................................110
Podstawy fizyki................................................................................................................... 114

Prdko i przyspieszenie..............................................................................................................114
Drugie prawo Newtona .................................................................................................................118
Flash. Super samuraj

Prosta grawitacja ...........................................................................................................................119
Tarcie.............................................................................................................................................120
Prawo Hookea spryna..........................................................................................................123
Detekcja kolizji ................................................................................................................... 126

Metoda MovieClip.hitTest()..........................................................................................................126
Matematyczna detekcja kolizji......................................................................................................128
Reakcje na kolizje ............................................................................................................... 134

Typowe reakcje niefizyczne..........................................................................................................134
Zasada zachowania pdu i zasada zachowania energii kinetycznej..............................................135
Podsumowanie .................................................................................................................... 142
Rozdzia 4. Programowanie dwiku we Flashu ...................................................145

Co to jest dwik?............................................................................................................... 145
Czstotliwo i amplituda .............................................................................................................145
Dwik cyfrowy.................................................................................................................. 146

Czstotliwo prbkowania i rozdzielczo bitowa......................................................................146
Kompresja MP3.............................................................................................................................147
Obiekt Sound ...................................................................................................................... 147

Sterowanie pojedynczym dwikiem ................................................................................. 148
Przypisywanie dwikw ..............................................................................................................148
Rozpoczynanie odtwarzania..........................................................................................................149
Zatrzymywanie odtwarzania .........................................................................................................150
Tworzenie suwakw gonoci i panoramy ..................................................................................150
Dwik i zdarzenia asynchroniczne ..............................................................................................152
Sterowanie wieloma dwikami ......................................................................................... 153

Tworzymy mikser .........................................................................................................................155
Synchronizacja ..............................................................................................................................158
Nietypowe techniki ............................................................................................................. 159

Sterowanie za pomoc ukadu wsprzdnych..............................................................................159
Relacje przestrzenne......................................................................................................................160
Rejestracja wsprzdnych klipw................................................................................................162
Wstpne wczytywanie dwikw .................................................................................................164
Praktyczne studium............................................................................................................. 166

Przypisywanie obiektw i dwikw ............................................................................................167
Sprawdzanie odlegoci klipw.....................................................................................................168
Wyznaczanie wartoci panoramy..................................................................................................169
Wyznaczanie wartoci gonoci...................................................................................................170
Prdko obrotowa ........................................................................................................................171
Globalne sterowanie gonoci ....................................................................................................172
Wskazwki dotyczce stosowania dwiku we Flashu...................................................... 173

Podsumowanie .................................................................................................................... 174
Rozdzia 5. Moduowa budowa projektu................................................................175

Co to jest moduowa budowa projektu? ............................................................................. 175
Metoda loadMovieNum() sedno sprawy ....................................................................... 176
cieki relatywne a cieki absolutne ...........................................................................................178
Dwa sposoby wczytywania filmw...............................................................................................178
Adresowanie poziomw ................................................................................................................180
Planowanie moduw ....................................................................................................................181
Spis treci
Studium witryna............................................................................................................. 183

Film master.swf tu si wszystko zaczyna.................................................................................186
Film interface.swf nawigacja ...................................................................................................186
Film contact.swf formularz kontaktowy ..................................................................................194
Film background_picker.swf sterowanie dwikiem...............................................................196
Film background_2.swf strona About Me................................................................................200
Film imagemover.swf strona Experiments...............................................................................201
Film gallery.swf galeria............................................................................................................204
Podsumowanie .................................................................................................................... 206
Rozdzia 6. Dynamiczne strony Flasha...................................................................207

Dynamiczne strony Flasha podstawy ............................................................................ 207
Jzyki programowania skryptw serwerowych ............................................................................208
Kluczowe zagadnienia i terminy ...................................................................................................209
Studium 1. Serwis dyskusyjny............................................................................................ 212

Baza danych ..................................................................................................................................212
Tworzenie skryptw serwerowych................................................................................................213
Fronton utworzony we Flashu.......................................................................................................222
Studium 2. Licznik odwiedzin ............................................................................................ 236

Skrypt count.php ...........................................................................................................................237
Fronton flashowy...........................................................................................................................239
Studium 3. Pokj pogawdek ............................................................................................. 240

Skrypt chatserver.asp ....................................................................................................................240
Fronton flashowy...........................................................................................................................243
Dodatkowa pomoc .............................................................................................................. 244

Quiz..................................................................................................................................... 245
Rozdzia 7. Projektowanie interfejsu......................................................................247

Co to jest klip sterujcy?..................................................................................................... 247
Interaktywny album ............................................................................................................ 248
Element menu, ktry zmienia skal i kolor...................................................................................249
Panele narzdzi ................................................................................................................... 258

Korzystamy z akcji function() i onClipEvent().............................................................................260
Obsuga panelu ..............................................................................................................................264
Podsumowanie .................................................................................................................... 266

Uyteczne wskazwki ...................................................................................................................267
Uyteczno i innowacja ...............................................................................................................268
Rozdzia 8. Flash i XML ..........................................................................................269

Co to jest XML?.................................................................................................................. 269
Problem .........................................................................................................................................270
Rozwizanie ..................................................................................................................................271
Przykadowy projekt .....................................................................................................................271
XML podstawy .............................................................................................................. 273

Wasny dokument..........................................................................................................................274
Co to za nazwa?.............................................................................................................................274
Reguy skadni XML .....................................................................................................................275
Kindersztuba XML ............................................................................................................. 281

Deklaracje XML............................................................................................................................281
Wielkie czy mae litery?................................................................................................................282

Segmentacja danych ......................................................................................................................282
Atrybuty a elementy ......................................................................................................................284
Biae znaki.....................................................................................................................................285
Przykady dokumentw XML ............................................................................................ 286

Wiadomo e-mail.........................................................................................................................286
Artykuy ........................................................................................................................................287
Ksiga goci ..................................................................................................................................289
Koszyk na zakupy .........................................................................................................................291
Dokumenty XML we Flashu .............................................................................................. 294

Jak Flash interpretuje dokumenty XML........................................................................................294
Poznaj rodzin ...............................................................................................................................295
Wydajno parsowania..................................................................................................................298
Czytanie danych XML ..................................................................................................................298
Tworzenie dokumentw XML we Flashu .......................................................................... 310

Tworzenie wzw i atrybutw .....................................................................................................310
Usuwanie wzw i atrybutw ......................................................................................................312
Klonowanie wzw ......................................................................................................................313
Pobieranie i wysyanie dokumentw XML...................................................................................315
Studium: koszyk na zakupy ................................................................................................ 318

Projekt ...........................................................................................................................................319
Podsumowanie .................................................................................................................... 328
Rozdzia 9. Wsppraca z jzykiem JavaScript .....................................................329

Podstawy integracji............................................................................................................. 329
Obsuga komunikacji skryptw.....................................................................................................330
Sterowanie odtwarzaczem Flash Player za pomoc skryptw JavaScript ......................... 332

Oddziaywanie skryptu JavaScript na film Flasha ........................................................................332
Przycisk Back przegldarki dziaajcy we Flashu ........................................................................333
Przechowywanie i odczytywanie informacji ...................................................................... 334

Przechowywanie danych w cookie................................................................................................335
Flash i inne moduy rozszerzajce ...................................................................................... 339

Modu rozszerzajcy RealPlayer ...................................................................................................339
Interfejs API ..................................................................................................................................341
Rozszerzanie moliwoci Flasha ........................................................................................ 344

Otwieranie nowych okien ................................................................................................... 346
Sterowanie otwartym oknem z filmu Flasha.................................................................................347
Podsumowanie .................................................................................................................... 349
Dodatek A Sowa zastrzeone..................................................................................351

Dodatek B Metody odtwarzacza Flash Player .......................................................357
Dodatek C Symbole zastpcze stosowane w wyraeniach regularnych...............365
Skorowidz..................................................................................................................367
Rozdzia 2.
Flash i grafika trjwymiarowa
Michael Brandon Williams
Torben Nielsen
Coraz wiksza liczba projektantw pracujcych we Flashu interesuje si grafik trjwymiarow. Trjwymiarowe efekty umieszczone w filmach Flasha pozwalaj wzbogaci
system nawigacyjny, wywrze dobre wraenie na kliencie lub po prostu zabawi widza.
Rzeczywicie, w cigu kilku ostatnich lat grafika trjwymiarowa w filmach Flasha staa
si bardzo popularna. Trend ten zapocztkoway takie witryny jak www.yugop.com czy
www.mano1.com i od tego czasu zainteresowanie t dziedzin cigle ronie.
Jednak Flash jest programem do tworzenia grafiki dwuwymiarowej nie obsuguje
modeli trjwymiarowych. Jak zatem mona tworzy we Flashu animacje trjwymiarowe?
To atwe trzeba udawa.
Istniej dwie podstawowe metody tworzenia iluzji trjwymiarowego ksztatu i ruchu
za pomoc skryptw ActionScript, gdzie cay projekt jest generowany przez kod; lub
przy uyciu wyrenderowanych obiektw trjwymiarowych, przygotowanych w innych
programach, a nastpnie zaimportowanych do Flasha i sterowanych prostymi akcjami
ActionScript. W tym rozdziale omwimy oba podejcia.
ActionScript i trzy wymiary

W pierwszej czci tego rozdziau skupimy si na zagadnieniach zwizanych z tworzeniem efektw trjwymiarowych za pomoc skryptw. Wszystkie rwnania wyprowadzimy w tekcie, starajc si jednak unika matematycznej komplikacji tematu. Po
omwieniu teoretycznych zagadnie przyjrzymy si kilku demonstracjom, w ktrych
pokaemy praktyczne zastosowanie tych zagadnie.
Trzy wymiary
Rozpocznijmy od przypomnienia pewnych zagadnie, ktre mog by ci ju znane. Poka, jak punkty s reprezentowane w przestrzeni trjwymiarowej, jak rzutowa je na
paszczyzn dwuwymiarow i jak to podejcie dziaa we Flashu.
34
Matematyczny ukad wsprzdnych

Chyba kady zna dwuwymiarowy ukad wsprzdnych kartezjaskich. Jego rodek
znajduje si w punkcie umieszczonym zwykle na rodku wykresu, w miejscu gdzie
przecinaj si zerowe osie x i y, prostopade do siebie. O x jest pozioma i przebiega od
lewej strony (ujemna po) do prawej (po dodatnia). O y jest pionowa i przebiega
od dou (ujemna po) do gry (po dodatnia).
Rysunek 2.1 przedstawia taki kartezjaski ukad wsprzdnych.
Rysunek 2.1.
Dwuwymiarowy
kartezjaski ukad
wsprzdnych
Aby okreli pooenie punktu w przestrzeni trjwymiarowej, definiujemy trzy prostopade osie wsprzdnych oraz rodek ukadu wsprzdnych (0, 0, 0) jako punkt przecicia tych osi. S to osie x, y i z. Kada para tych osi moe stanowi paszczyznowy
ukad wsprzdnych.
Rysunek 2.2 przedstawia trjwymiarowy ukad wsprzdnych.
Rysunek 2.2.
Trjwymiarowy ukad
wsprzdnych
Rozdzia 2. Flash i grafika trjwymiarowa
35
Uporzdkowane trjki liczb

Studenci geometrii analitycznej i algebry przez cay czas rysuj wykresy. Pooenie
kadego punktu na wykresie dwuwymiarowym jest okrelone przez uporzdkowan par liczb. Pierwsza liczba odpowiada wsprzdnej punktu na osi x (tak zwana odcita),
za druga wsprzdnej na osi y (rzdna).
Aby okreli pooenie punktu w przestrzeni trjwymiarowej, stosujemy uporzdkowan trjk liczb. S to trzy liczby, odpowiadajce kolejno wsprzdnym punktu na osi x,
y i z. Stosujc trjwymiarowy ukad wsprzdnych, moemy narysowa punkt w przestrzeni o oglnych wsprzdnych (x, y, z) (rysunek 2.3).
Rysunek 2.3.
Uporzdkowana trjka
liczb okrela pooenie
punktu w przestrzeni
trjwymiarowej
Uporzdkowana trjka liczb rzeczywistych (a, b, c) mwi, bymy si przesunli si o a jednostek wzdu osi x, nastpnie o b jednostek wzdu osi y i wreszcie o c jednostek wzdu
osi z, i tam narysowali punkt.
Trjwymiarowy ukad wsprzdnych we Flashu

Pokazany powyej trjwymiarowy ukad wsprzdnych jest standardem w niemal
wszystkich dziedzinach matematyki. Zapewne zauwaye pewne rnice wzgldem
dwuwymiarowego ukadu kartezjaskiego. Spjrz jeszcze raz na rysunek 2.3. O x
wychodzi z paszczyzny kartki, o y przebiega od lewej do prawej, za o z jest prostopada do obu pozostaych i przebiega od dou do gry. Innymi sowy, osie x i y s
zamienione miejscami. W naszych obliczeniach taka zamiana wprowadziaby niepotrzebne komplikacje, dlatego we Flashu bdziemy korzysta z innego ukadu wsprzdnych. O x bdzie przebiega w poziomie, jak w ukadzie dwuwymiarowym;
podobnie o y bdzie przebiega w pionie. Natomiast o z bdzie prostopada do paszczyzny ekranu (rysunek 2.4).
36
Rysunek 2.4.
Ukad osi
wsprzdnych
w trjwymiarowym
ukadzie, jaki bdziemy
stosowa we Flashu
We Flashu o z reprezentuje odlego obiektu od paszczyzny ekranu (w sensie gbokoci).

Gdy warto wsprzdnej z ronie, oznacza to, e obiekt oddala si od ekranu, w gb obrazu; gdy warto wsprzdnej z maleje, obiekt przyblia si do oczu widza (rysunek 2.5)1.
Rysunek 2.5.
Orientacja osi
w trjwymiarowym
ukadzie wsprzdnych
stosowanym we Flashu
Symulacja trzech wymiarw

Po okreleniu pooenia punktw w przestrzeni chcemy je przedstawi na ekranie. Jednak
jak narysowa trjwymiarowy punkt na dwuwymiarowym ekranie i jak dobra rozmiary
trjwymiarowych obiektw, aby na paszczynie ekranu wydaway si trjwymiarowe?
W tym celu wyprowadzimy kilka prostych wzorw.
W rzeczywistoci zwrot osi y w ukadzie wsprzdnych Flasha jest odwrotny, jednak rnic t z atwoci
skorygujemy w prezentowanych przykadach przyp. tum.
37
Perspektywa
Perspektywa to wanie to, co pozwala nam odrni przestrze trjwymiarow od paszczyzny dwuwymiarowej. Jest to wszechobowizujce pozorne zakrzywienie wiata,
ktre rozmieszcza obiekty na scenie w zalenoci od ich odlegoci od obserwatora. Gdy
stoisz na rodku prostej drogi, patrzc w najdalszy jej punkt, widzisz jak jej krawdzie
stopniowo zbliaj si do siebie, w miar wzrostu odlegoci. Gdy spojrzysz odpowiednio
daleko, zobaczysz, e zbiegaj si one w jedn lini. Perspektywa wpywa te na sposb
postrzegania ruchu. Na przykad, gdy obiekt na pierwszym planie porusza si z okrelon
prdkoci, a na dalszym planie wida drugi obiekt poruszajcy si z tak sam prdkoci, pozorna (postrzegana) prdko ruchu obiektu na pierwszym planie jest wiksza.
Zamiana uporzdkowanych trjek liczb na uporzdkowane pary
Problem perspektywy mona uproci do paszczyzny. Pooenie punktu w przestrzeni
jest okrelane przez uporzdkowan trjk liczb (x, y, z). Naszym zamiarem jest wyeliminowanie gbi, czyli wsprzdnej z, poniewa ekran monitora nie posiada gbi, tylko szeroko i wysoko. W jaki sposb musimy zrzutowa na paszczyzn monitora
wszystkie obiekty w prezentowanej przestrzeni. Pooenie kadego z nich wyrazimy za
pomoc uporzdkowanej pary liczb, obliczajc ich wartoci z uwzgldnieniem pierwotnej pozycji na osi z. Najprostszym rozwizaniem jest zwyke odrzucenie informacji z,
lecz w tym przypadku zatracisz efekt perspektywy, czyli krawdzie drogi nie bd si
zbiegay, lecz pozostan rwnolege.
Problem ten rozwiemy z uyciem prostej geometrii. Zanim jednak omwimy rzutowanie trjwymiarowego punktu na dwuwymiarowy ekran monitora, przyjmijmy pewne
oznaczenia, ktrymi bdziemy si posugiwa.
Rysunek 2.6 przedstawia punkt w przestrzeni, posiadajcy oglne wsprzdne (x, y, z).
Po zrzutowaniu tego punktu na ekran monitora, jego obraz ma wsprzdne (x', y').
Oznaczamy je znakiem apostrofu2, by odrni wsprzdne x i y w reprezentowanej
przestrzeni od wsprzdnych x' i y' na paszczynie monitora. Poniewa na rysunku 2.6
mog przedstawi tylko przypadek dwuwymiarowy, musz zrezygnowa z jednego
z wymiarw rezygnuj zatem ze wsprzdnej x (rysunek ten przedstawia obserwatora, ekran monitora i reprezentowan przestrze obserwowan z boku). Wielko
oznaczona liter d jest odlegoci oka obserwatora od ekranu komputera. Warto ta
odegra kluczow rol w naszych obliczeniach dotyczcych wygldu rodowiska trjwymiarowego. Wsprzdna z punktu w przestrzeni jest wyznaczana wzgldem paszczyzny ekranu monitora, czyli paszczyzna ekranu ma wsprzdn z rwn zero (tam
znajduje si pocztek trjwymiarowego ukadu wsprzdnych oraz zerowe osie x i y).
Dodajmy te, e wsprzdna z obserwatora ma warto ujemn, poniewa o z jest
skierowana w gb monitora.
Tak oznaczone symbole czytaj x prim lub y prim przyp. tum.
38
Rysunek 2.6.
Punkt trjwymiarowej
przestrzeni rzutujemy
na dwuwymiarowy
ekran monitora,
by wywietli go
we Flashu
Posugujc si tym rysunkiem, rozwimy problem perspektywy. Wykorzystamy w tym

celu znane nam wielkoci d, y i z, by znale poszukiwan warto y'. Na rysunku wida
dwa trjkty podobne. Zgodnie z prostymi prawami geometrii, moemy porwna boki
obu trjktw, stosujc proporcj jak na rysunku 2.7.
Rysunek 2.7.
Boki trjktw
podobnych
s proporcjonalne
Stosujc elementarne przeksztacenia algebraiczne, przeksztamy powysze rwnanie,

by znale warto y'. Mnoymy obie strony rwnania przez y i przez y', a nastpnie
dzielimy przez sum (d+z). Rysunek 2.8 przedstawia te przeksztacenia i ich rezultat.
Rysunek 2.8.
Korzystajc z proporcji
wsprzdnej y
w uporzdkowanej
trjce liczb,
przeksztacamy j
w uporzdkowan par
Tym sposobem wyprowadzilimy rwnanie, ktre ma kluczowe znaczenie w symulacji

perspektywy.
Rwnanie to pozwala obliczy wsprzdn y' rzutu punktu na ekran monitora. W podobny sposb moemy wyprowadzi rwnanie suce do obliczenia wsprzdnej x
tego rzutu. Zapiszmy oba rwnania, suce do przeliczania uporzdkowanej trjki liczb
na uporzdkowan par z uwzgldnieniem wsprzdnej z (rysunek 2.9).
Pracujc z rwnaniami w matematyce, dymy do przedstawienia ich w jak najprostszej
postaci. Na przykad, gdy mamy wyraenie postaci x2+x, moemy je uproci do postaci x(x+1), wycigajc x przed nawias. Podobnie w naszych rwnaniach perspektywy
moemy wycign uamek d/(d+z) i przyj, e jest to odrbna zmienna, obliczana przed
39
Rysunek 2.9.
Rwnania rzutujce
punkt przestrzeni
na paszczyzn
monitora
wyliczeniem uporzdkowanej pary wsprzdnych rzutowanego punktu. Ta zmienna odegra

donios rol podczas ustalania skali klipw filmowych i uchroni ci przed wykonywaniem dodatkowych operacji matematycznych. Zmiennej tej w naszych przykadach nadamy nazw
(wspczynnik perspektywy).
Zapiszmy zatem nasze rwnania perspektywy w ostatecznej postaci (rysunek 2.10).
Rysunek 2.10.
Ostateczna posta
rwna
oraz wspczynnika
perspektywy
Zastosujmy nasz nowo nabyt wiedz w skrypcie, ktry bdzie przelicza uporzdkowan trjk liczb na uporzdkowan par.
Uporzdkowana trjka liczb okrela pooenie punktu w symulowanej przestrzeni, zatem gdy mamy dany punkt, znamy wartoci tych liczb. Chwili zastanowienia wymaga
natomiast warto parametru d, czyli odlego oka obserwatora od ekranu monitora.
Wracajc do przykadu z drog, jeli dobierzemy zbyt ma warto parametru d, uzyskamy efekt rybiego oka i krawdzie drogi bd si zbiegay zbyt szybko. Jeli z kolei
warto ta bdzie zbyt dua, obserwator moe mie trudnoci z odrnieniem bliskich
i odlegych punktw, za krawdzie drogi bd zbiegay si zbyt wolno. Zwykle odpowiednie s wartoci z przedziau od 200 do 500, cho powiniene z nimi poeksperymentowa, aby lepiej zrozumie ich wpyw na rezultat.
Poniszy skrypt jest umieszczony w detektorze zdarzenia
klipu filmowego. (Klipem
filmowym moe by dowolny element, ktry chcesz powiela i umieszcza na obrazie).
Skrypt losuje trjk liczb z przedziau od 100 do 100, bdcych wsprzdnymi punktu
w przestrzeni, a nastpnie oblicza wsprzdne rzutu tego punktu na ekranie monitora.

!""#

$%&
' (
)* +,""-""#
. (
)* +,""-""#
(
)* +,""-""#
$&.
..
&
/
0#
1

40

&
/' '+ &
/
#
&
/. .+ &
/
#
2
Zmiana pooenia i skali na obrazie

Cho nasz skrypt oblicza pozycj trjwymiarowego punktu zrzutowanego na dwuwymiarowy ekran, nie jestemy jeszcze gotowi do wyrenderowania punktu (renderowanie w tym
kontekcie oznacza ustalenie pooenia i skali klipu filmowego reprezentujcego punkt).
Obliczenie pooenia punktu jest atwiejsz czci zadania. Jeli masz punkt o wsprzdnych (x, y, z) w przestrzeni i skonwertujesz je na wsprzdne ekranu (x', y'), wci
jeszcze nie wiesz, w ktrym miejscu obrazu Flasha powiniene go umieci. Aby to zrobi, musisz wczeniej zdefiniowa pocztek trjwymiarowego ukadu wsprzdnych
(pocztek ukadu wsprzdnych Flasha (0, 0) mieci si w lewym grnym naroniku obrazu). Pocztek trjwymiarowego ukadu wsprzdnych to punkt, wzgldem ktrego wyznaczamy pooenie wszystkich innych punktw w przestrzeni; jest to jeden z najwaniejszych elementw w naszych rozwaaniach. Gdy znajdziesz wsprzdne x' i y', przeliczasz
je na ostateczne wsprzdne obrazu, wzgldem pocztku ukadu wsprzdnych.
Poniszy przykadowy skrypt umieszcza klip filmowy na obrazie na podstawie podanego pocztku ukadu wsprzdnych oraz pooenia obiektu zrzutowanego w perspektywie. Pooenie obiektu w perspektywie jest w tym przykadzie losowane.

&3

$%. $4.&)
%&.. . $4.&)
/' ,56#
/. ,""#
&1

.
&
/' (
)* +,""-""#
&
/. (
)* +,""-""#
&
/. .+ &
/
#
+
.&%4 # .& $4 %.
. 7
81 . 9 )%
$& :
$%

$*+

)*/' /'0 &
/'#

)*/. /. &
/.#
2
Gdy pozycja klipu na ekranie jest ju ustalona, musimy jeszcze zaj si jego skal.
Rozmiar klipu rzutowanego w perspektywie moesz dobra, obserwujc wartoci liczbowe wspczynnika perspektywy przy rnych wartociach wsprzdnej z. Gdy warto tej wsprzdnej jest dua (czyli punkt jest odlegy od ekranu), mianownik wzoru
na wspczynnik rwnie staje si bardzo duy. Dzielenie przez du liczb daje w wyniku ma liczb, zatem gdy wsprzdna z ronie, wspczynnik perspektywy maleje.
Z drugiej strony, gdy z maleje, wspczynnik perspektywy ronie.
Wanie takiego zachowania oczekujemy po skali obiektu w perspektywie. Gdy obiekt
oddala si od nas (zwiksza si warto z), jego pozorny rozmiar maleje. Gdy obiekt si
zblia, wydaje si nam, e jest wikszy. Jednak nie moemy wyrazi wymiarw obiektw
bezporednio za pomoc wspczynnika perspektywy wwczas wszystkie obiekty
41
miayby jednakowe rozmiary, poniewa wspczynnik ten nie bierze pod uwag ich
pierwotnych wymiarw. Dlatego mnoymy pierwotne wymiary klipu filmowego przez
wspczynnik perspektywy, otrzymujc wymiary obiektu rzutowanego. W poniszym
rwnaniu wielko
reprezentuje pierwotn wielko klipu filmowego, za
wielko to wielko klipu rzutowanego w perspektywie.
&
/ / + &
/
#
Na podstawie naszego pierwszego skryptu, ktry losowa trjk liczb i konwertowa j na

uporzdkowan par, teraz moemy wywietli obiekt. Poniszy zmodyfikowany skrypt
rwnie umieszczamy w detektorze zdarzenia klipu filmowego. Inicjalizujemy rwnie
dodatkowe stae, takie jak pierwotny rozmiar klipu filmowego, pocztek trjwymiarowego ukadu wsprzdnych oraz zakadana odlego obserwatora od ekranu.

&3

$%. $4.&)
%&.. . $4.&)9 )
/' ,56#
/. ,""#

!""#

. 7
/
)*/
)#

$%&
' (
)* +,""-""#
. (
)* +,""-""#
(
)* +,""-""#
$&.
..
&
/
0#
&1

.
&
/' '+ &
/
#
&
/. .+ &
/
#

%1

)*/' /'0 &
/'#

)*/. /. &
/.#

% 4

)*/'&
)*/.& / + &
/
#
2
Przeroczysto klipu filmowego

Gdy obiekt znajduje si w duej odlegoci od obserwatora, jego postrzegane kolory s
mniej intensywne i zlewaj si z tem. Podobny efekt moemy uzyska we Flashu,
zmieniajc warto waciwoci

klipu filmowego, reprezentujcego obiekt. Obliczanie przeroczystoci klipu jest podobne do obliczania jego wymiarw. Gdy obiekt
znajduje si w swoim pierwotnym pooeniu lub pomidzy nim a obserwatorem, jego
waciwo

jest rwna 100, czyli jest cakowicie kryjcy. Gdy obiekt si oddala,
waciwo

maleje, a do wartoci 0. W taki sam sposb zachowuje si wspczynnik perspektywy i rozmiar obiektu. Zatem mnoc wspczynnik perspektywy przez
warto 100, wyznaczymy warto wspczynnika

w funkcji odlegoci na osi z.

;&.
&7&% &
/7.*/ ) -""+ &
/
#
42

Cho efekt ten jest atwo zaimplementowa, w wikszoci naszych przykadw nie bdziemy z niego korzysta.
Losowo rozmieszczone punkty w przestrzeni
Czas na pierwsz praktyczn demonstracj. W tym przykadzie kilkakrotnie powielimy
punkt, umiecimy jego klony w losowo wybranych punktach przestrzeni i zrzutujemy je
na paszczyzn ekranu.
Otwrz plik random_3D_points.swf, zapisany w katalogu rozdzial_2 na pycie CD-ROM.
Uruchom plik kilka razy, by zobaczy, e za kadym razem ukad punktw w przestrzeni jest inny (rysunek 2.11).
Rysunek 2.11.
Flash tworzy skupisko
punktw losowo
rozmieszczonych
w przestrzeni
Otwrz plik random_3D_points.fla, zapisany na pycie CD-ROM.
Tworzenie tego projektu rozpoczem od narysowania koa i skonwertowania go na klip

filmowy. Nastpnie w klipie napisaem skrypt, ktry umieszcza punkt w przestrzeni
i rzutuje go na ekran monitora. Gdy klip zostaje umieszczony na ekranie, losuje uporzdkowan trjk liczb okrelajc pooenie punktu i konwertuje j na uporzdkowan par, zgodnie z perspektyw. W tej sytuacji wystarczy kilkakrotnie zduplikowa klipy filmowe, a one same zajm si reszt. Duplikacja jest realizowana w pierwszej klatce
gwnej listwy czasowej ( ) i powinna by wykonana tylko jeden raz.
Poniszy kod umieszcza na obrazie 20 klonw klipu filmowego. Po zduplikowaniu klipw, zawarte w nich detektory zdarzenia
zajmuj si obliczaniem ich pozycji i wymiarw. Tworzone klony klipw filmowych nosz nazw , po ktrej nastpuje numer klonu.
43
& .&)

$
/
,"#
&% $

.&.& %34.
. 3
$
7 % "#%</
#%00

)*
*&
( =
=0%8%#
2
Kolejno nakadania klipw na osi z

Poprzednia demonstracja posiada jedn drobn wad dotyczc rzutowania obiektw
nie bierze pod uwag faktu, e obiekty widoczne na pierwszym planie powinny zasania te, ktre znajduj si na dalszym planie. Poniewa w przykadzie tym uyem
jednokolorowych k, kolejno zasaniania obiektw nie bya widoczna, zatem nie
byo wida rwnie tej wady. Jednak wypenienie k prostym gradientem ujawnioby
t niekonsekwencj w perspektywie. Rozwizanie tego problemu jest niezwykle proste
i efektywne; nie obcia te zbytnio procesora.
Metoda swapDepths()
Wbudowana metoda
obiektu MovieClip umoliwia atw zmian poziomu
warstwy, na ktrym mieci si klip filmowy, w zalenoci od odlegoci z tego klipu.
Gdy w bezporedni sposb przypiszesz klipowi numer poziomu, rwny jego wsprzdnej z, uzyskasz bdny wynik klip filmowy z du wsprzdn z powinien znajdowa si gboko w tle. Wystarczy jednak, e uyjesz wsprzdnej z ze zmienionym
znakiem wwczas im dalej klip bdzie si znajdowa od ekranu, tym niszy bdzie
numer jego poziomu.

$4 %
)*
)#
Teraz moesz zmieni zwyky punkt (koo) w dowoln grafik, jak chciaby wywietla. Zobaczysz wwczas, e kolejne klony grafiki zasaniaj si w odpowiedniej kolejnoci, zgodnie z gbi perspektywy.
By moe nie podoba ci si rozwizanie polegajce na prostym negowaniu wsprzdnej
z i okrelaniu w ten sposb numeru poziomu dla klipu, poniewa tym sposobem
mona uzyska ujemne numery poziomw. Cho zajm si jeszcze tym problemem,
jednak moesz po prostu odj warto wsprzdnej z od duej liczby, by zachowa
odpowiedni kolejno poziomw i operowa tylko dodatnimi liczbami.
Losowo rozmieszczone obiekty z poprawn kolejnoci na osi z

Zastosujmy nowe rozwizanie i utwrzmy nowy plik, ktry losowo rozmieszcza obiekty
w przestrzeni, a nastpnie rzutuje je na paszczyzn ekranu, zachowujc kolejno zasaniania zgodn z pooeniem na osi z.
44

Otwrz plik random_3D_points_depth.swf zapisany na pycie CD-ROM.
Uruchom ten plik kilka razy, aby zobaczy, e dalsze (mniejsze) obiekty zawsze s zasaniane przez blisze (wiksze). Teraz znacznie atwiej mona rozrni odlegoci poszczeglnych obiektw (rysunek 2.12).
Rysunek 2.12.
W tym przykadzie
sortujemy poziomy
klipw w zalenoci
od ich wsprzdnej z
Otwrz plik random_3D_points_depth.fla zapisany na pycie CD-ROM.
Ten film jest niemal taki sam jak film random_3D_points.fla; zawiera on nieco inne
elementy graficzne oraz dwa dodatkowe wiersze kodu. Wiersze te mieszcz si na kocu skryptu klipu filmowego. Ich zadaniem jest przypisanie klipowi poziomu warstwy,
zgodnego z jego wsprzdn z.

$4 %
)*
)#
W tym momencie dysponujemy ju niemal kompletn procedur suc do symulacji

trzech wymiarw.
Przesunicia
Aby przesun punkt w przestrzeni (czyli wykona operacj zwan w matematyce
translacj), zmieniasz warto wsprzdnej x, y lub z. Na przykad moesz przesun
punkt (1, 3, 2) o cztery jednostki wzdu osi x do (5, 3, 2), nastpnie o trzy jednostki
wzdu osi y do (5, 6, 2) i wreszcie o 4 jednostki wzdu osi z do (6, 5, 2).
45
Losowy ruch
We Flashu przesunicia powinny by bardziej pynne. Aby uzyska pynny ruch, musimy w kolejnych klatkach stopniowo zmienia wsprzdne punktw. Oznacza to, e
zmianie ulegnie rwnie ukad naszego poprzedniego skryptu, ktry jedynie umieszcza
punkty w przestrzeni i rzutowa je na paszczyzn. W nastpnym pliku rozmiecimy
obiekty w przestrzeni w taki sam sposb jak poprzednio, lecz tym razem wprawimy je
w ruch w przypadkowych kierunkach.
Otwrz plik random_3D_points_trans1.swf zapisany na pycie CD-ROM.
W chwili uruchomienia tego pliku kady obiekt otrzymuje prdko pocztkow, z jak
porusza si nastpnie w przypadkowym kierunku. Za kadym razem gdy uruchomisz
plik, obiekty rozprosz si w innych kierunkach (rysunek 2.13).
Rysunek 2.13.
Losowo
rozmieszczone
obiekty poruszaj si
w przypadkowych
kierunkach
Otwrz plik random_3D_points_trans1.fla zapisany na pycie CD-ROM.
Tym razem nie bdziemy obsugiwa wszystkich czynnoci wewntrz detektora zdarzenia
; ustalimy jedynie pozycje, stae i losowe wartoci przyrostw zwizanych
z chwilowymi przesuniciami obiektw. Pniej moesz umoliwi zmian przyrostw
za pomoc przyciskw, zdarze klipw filmowych lub innych metod interaktywnych.
Na razie jednak pozostaem przy niewielkich przyrostach, by mg zaobserwowa stopniowe zmiany pooenia.

&3

$%. $4.&)
%&.. . $4.&)9 )
/' ,56#
46

/. ,""#

!""#

. 7
/
)*/
)#
3 %
$%&
' (
)* +,""-""#
. (
)* +,""-""#
(
)* +,""-""#
.
$4.&) &)'8.
&/' (
)* +,-#
&/. (
)* +,-#
&/ (
)* +,-#
2
W powyszym kodzie wyeliminowalimy akcje zwizane z rzutowaniem obiektw na

paszczyzn i dodalimy trzy nowe zmienne. Ich wartoci w kadej klatce s dodawane
do wsprzdnych obiektu, co wprawia go w ruch. Cho efekt ten nie jest niczym nadzwyczajnym, pozwala nam zrozumie zjawisko ruchu.
Detektor zdarzenia
reaguje na przejcie klipu do nastpnej klatki, zatem zawarty w nim kod jest wykonywany w kadej klatce. Kod ten zajmuje si aktualizacj
pooenia obiektw, czyli dodawaniem do nich przyrostw, zdefiniowanych w powyszym kodzie. Po przesuniciu obiektu w nowe miejsce, jest on rzutowany z zastosowaniem tego samego kodu, co w poprzednim przykadzie.

9

>
.

'0 &/'#
.0 &/.#
0 &/#
$&.
..
&
/
0#
&1

.
&
/' '+ &
/
#
&
/. .+ &
/
#

%1

)*/' /'0 &
/'#

)*/. /. &
/.#

% 4

)*/'&
)*/.& / + &
/
#
>
. $43

)*
)#
2
Moesz mi wierzy lub nie, lecz wanie utworzye skrypt dla nastpnej demonstracji
Flasha! Gdy utworzysz kilka klonw obiektw z tym skryptem, zobaczysz skupisko
obiektw poruszajcych si w przypadkowych kierunkach przestrzeni.
Sterowany ruch
Elementy rozbiegajce si w przypadkowych kierunkach prawdopodobnie nie byy twoim
zamysem, gdy przystpowae do czytania tego rozdziau. Moesz jednak zaangaowa
47
widza w trjwymiarowy wiat, dajc mu moliwo sterowania ruchem obiektw. Ukad

nastpnego skryptu peni wan rol ze wzgldu na jego interaktywne komponenty, dlatego na tym si skoncentrujemy.
Sztuczka z wykrywaniem wcinicia klawisza
Stosujc prost sztuczk, moemy wykrywa wcinicie okrelonych klawiszy podczas
odtwarzania zaptlonych ptli, bez tworzenia nastpnego detektora zdarzenia klipu filmowego. Sztuczka ta jest szczeglnie przydatna w sytuacji, gdy wartoci zmiennych
musz by zmieniane w sposb cigy, gdy klawisz jest wcinity. Metoda
obiektu Key zwraca warto 1, gdy klawisz okrelony w argumencie jest wcinity;
w przeciwnym razie zwraca warto 0. Wynik dziaania tej metody, czyli liczb 1 lub 0,
moesz przemnoy przez inn warto, otrzymujc tym sposobem warto zmiennej,
gdy klawisz jest wcinity, lub zero, gdy jest zwolniony. Metody tej moesz uy w nastpujcy sposb:
'0 ? .*? .*. ./ +&#
Zmienna jest zwikszana o warto w kadej klatce, w ktrej

jest
wcinity. W podobny sposb moesz zrealizowa zmniejszanie wartoci zmiennej:
' ? .*? .*./ +&#
Cay mechanizm modyfikujcy warto zmiennej moesz nawet umieci w pojedynczym wierszu. Bdzie on modyfikowa warto zmiennej, w kadej klatce dodajc do
niej wynik pewnego wyraenia. W wyraeniu tym znajduj si oba czynniki, czyli przyrost wprowadzany przez klawisz inkrementacji (zwikszania) oraz przyrost (z przeciwnym znakiem) wprowadzany przez klawisz dekrementacji (zmniejszania).
'0 ? .*? .*&/ .+&? .*? .* &/ .+&#
Gdy jest wcinity klawisz 3, warto zmiennej w kadej klatce zwiksza si o .
Gdy z kolei jest wcinity klawisz , warto zmiennej zmniejsza si w kadej klatce o . Jeli uytkownik wcinie naraz oba klawisze, warto zmiennej pozostanie niezmieniona, poniewa program doda, a nastpnie odejmie od niej warto .
Zobaczmy, jak ta sztuczka dziaa w praktyce. Poniszy skrypt przesuwa klip filmowy na
obrazie, gdy uytkownik wcinie jeden (lub kilka) z klawiszy strzaek. Utwrz nowy film
Flasha, narysuj prost grafik i przekszta j w klip filmowy. Umie poniszy kod odpowiednio w detektorach zdarze
i
klipu filmowego.

%
..

. 4 1 %
& 8

$ %1.
&
& !#
2
Oczywicie za t nazw, podobnie jak za nazw &/ ., kryj si nazwy konkretnych klawiszy przyp. tum.
48

Zdarzenie
klipu filmowego, czyli jego wczytanie, inicjalizuje zmienn, ktrej warto jest przyrostem wsprzdnych klipu filmowego. Z kolei zdarzenie
,
czyli przejcie do nowej klatki klipu filmowego, uruchamia skrypt zajmujcy si modyfikowaniem wsprzdnych x i y klipu; dziaanie tego skryptu omwilimy przed chwil.
Zanim jednak utworzysz ten skrypt, musisz zastanowi si nad doborem klawiszy, ktre
bd suyy do sterowania ruchem klipu filmowego. Poniewa o x we Flashu ma taki
sam przebieg jak w tradycyjnym ukadzie wsprzdnych, moemy przyj, e klawisz
lewej strzaki bdzie powodowa zmniejszenie wartoci wsprzdnej x, natomiast klawisz prawej strzaki bdzie powodowa jej zwikszenie. Z kolei o y we Flashu jest
zwrcona w przeciwn stron, ni w tradycyjnym ukadzie wsprzdnych, dlatego klawisz strzaki w gr bdzie powodowa zmniejszenie wartoci wsprzdnej y, za klawisz
strzaki w d jej zwikszenie.

9

>7. &4
.

)*/'0 ? .*? .*@ABCD+&? .*? .*E9D+&#

)*/.0 ? .*? .*FGH+&? .*? .*IJ+&#
2
Otwrz plik key_move_sample.fla zapisany na pycie CD-ROM.
Plik ten demonstruje dziaanie omwionej przez nasz sztuczki z wykrywaniem wcinicia klawiszy. Zawiera on jedynie 13 wierszy kodu, zawartych wewntrz detektorw zdarze klipu filmowego. Skrypt jest identyczny z utworzonym przez nas.
Sterowanie ruchem za pomoc klawiszy

Zastosujmy poznan technik, tworzc nastpn aplikacj z udziaem trjwymiarowej
grafiki Flasha. Obiekty powielamy i rozmieszczamy w przestrzeni tak jak poprzednio,
jednak tym razem uytkownik moe przesuwa je we wszystkie strony.
Otwrz plik random_3D_points_trans2.swf zapisany na pycie CD-ROM.
Uywajc klawiszy Shift, Enter oraz klawiszy strzaek, moesz przemieszcza grup
obiektw w przestrzeni (rysunek 2.14).
Otwrz plik random_3D_points_trans2.fla zapisany na pycie CD-ROM.
Cay kod, oprcz pocztkowych akcji zwizanych z klonowaniem, umiecimy w klipie

filmowym obiektu. Trzy zdefiniowane wczeniej zmienne, przechowujce losowe przyrosty, zastpimy jedn wartoci, reprezentujc jednakowe przyrosty wsprzdnych
we wszystkich kierunkach. W zwizku z tym kod wewntrz detektora zdarzenia

ulegnie niewielkiej zmianie.

&3

$%. $4.&)
49
Rysunek 2.14.
Steruj ruchem
obiektw za pomoc
klawiszy strzaek
oraz klawiszy Shift
i Enter
%&.. . $4.&)9 )

/' ,56#
/. ,""#

!""#

. 7
/
)*/
)#
3 %
$%&
' (
)* +,""-""#
. (
)* +,""-""#
(
)* +,""-""#
%
..

. 4 1 %
& 8

$ %1.
&
& !#
2
Bezporednio po utworzeniu klonu klipu filmowego inicjalizujemy stae, takie jak pooenie pocztku trjwymiarowego ukadu wsprzdnych, pierwotny rozmiar klipu filmowego czy zakadana odlego obserwatora od ekranu. Skrypt losuje rwnie wartoci dla trjki wsprzdnych oraz definiuje stay przyrost, o jaki zmieni si wsprzdna
klipu, gdy uytkownik wcinie odpowiedni klawisz. W poprzednim przykadzie losowalimy wartoci przyrostu oddzielnie dla kadej wsprzdnej; teraz ograniczamy si
do ustalenia pojedynczej wartoci.
Detektor zdarzenia
klipu filmowego zawiera kod, ktry zajmuje si rzutowaniem i ruchem punktw. W poprzednim przykadzie wylosowane przyrosty byy dodawane do wsprzdnych klipu w kadej klatce. W tym przykadzie modyfikowanie
wartoci wsprzdnych jest uzalenione od klawiszy wcinitych przez uytkownika.
Poniewa nie mamy ju do czynienia z ruchem na paszczynie dwuwymiarowej, musiaem zmieni funkcje poszczeglnych klawiszy. Klawisze strzaek w lewo i w prawo
50

steruj ruchem wzdu osi x; klawisze Enter i Shift steruj ruchem wzdu osi y; natomiast klawisze strzaek w gr i w d steruj ruchem wzdu osi z. Cz skryptu zajmujca si rzutowaniem obiektw na paszczyzn ekranu pozostaje niezmieniona.

9

>7. &4
.
'0 ? .*? .*E9D+&? .*? .*@ABCD+&#
.0 ? .*? .*KCA9D+&? .*? .*HD@+&#
0 ? .*? .*FGH+&? .*? .*IJ+&#
$&.
..
&
/
0#
&1

.
&
/' '+ &
/
#
&
/. .+ &
/
#

%1

)*/' /'0 &
/'#

)*/. /. &
/.#

% 4

)*/'&
)*/.& / + &
/
#
>
. $43

)*
)#
2
Moe po wygldzie skryptu tego nie wida, jednak utworzylimy naprawd imponujcy plik!
Problem z mechanizmem rzutowania
Gdy dajesz uytkownikowi pen kontrol nad rodowiskiem trjwymiarowym, moe
si okaza, e mechanizm symulacji perspektywy posiada pewne sabe punkty. Jeden
z problemw moe si pojawi, gdy uytkownik sprbuje wej zbyt gboko w przestrze i jeden lub kilka obiektw w symulowanej przestrzeni znajdzie si za jego
gow. Wwczas obiekty te niespodziewanie wracaj na ekran, przy czym s odwrcone wzgldem wszystkich osi. Rozwizanie tego problemu polega na wyczeniu widzialnoci tych obiektw, ktre przesun si poza zakadane pooenie oka obserwatora.
Jak mona sprawdzi, czy obiekt znalaz si z tyu obserwatora? Wrmy do rysunku,
ktry pomg nam w wyprowadzeniu rwna perspektywy (rysunek 2.15).
Rysunek 2.15.
Obiekt znajduje si
z tyu obserwatora,
gdy jego wsprzdna
z jest mniejsza
od ujemnej wartoci
odlegoci d
51
Pocztek trjwymiarowego ukadu wsprzdnych mieci si bezporednio na paszczynie ekranu monitora. Wszystko, co mieci si po twojej stronie ekranu, posiada
ujemn warto wsprzdnej z; z kolei wszystko, co mieci si po drugiej jego stronie
(czyli wewntrz monitora), ma dodatni warto wsprzdnej z. Zakadan odlego
od twojego oka do monitora okrelilimy jako d (wpywa ona na obliczany wspczynnik perspektywy
). Innymi sowy, jeli chcielibymy okreli pooenie twojego oka w symulowanej przestrzeni trjwymiarowej, miaoby ono wsprzdne (0, 0, d). Jeli zatem wsprzdna z obiektu przyjmie warto mniejsz od d,
obiekt ten znajdzie si za tob (a dokadniej, za twoim okiem).
Korzystajc z tej informacji, moemy utworzy wyraenie warunkowe, ktre bdzie
sprawdza, czy obiekt znalaz si z tyu uytkownika; jeli tak, wyczymy widzialno
obiektu. Poniewa w sytuacji, gdy klip mieci si poza uytkownikiem, w ogle nie musi by on wywietlany na obrazie, moesz zaoszczdzi Flashowi oblicze, umieszczajc
wewntrz klauzuli cay fragment skryptu, zajmujcy si rzutowaniem klipu na ekran.
Poniszy skrypt bdzie bardziej wymowny ni moje sowa; zawarto detektora

rzutuje trjwymiarowe obiekty na paszczyzn ekranu.

9

>7. &4
.
'0 ? .*? .*E9D+&? .*? .*@ABCD+&#
.0 ? .*? .*KCA9D+&? .*? .*HD@+&#
0 ? .*? .*FGH+&? .*? .*IJ+&#
;8&.
4

7<

.3&

)*/ 7 #
2

3&

)*/
#
$&.
..
&
/
0#
&1

.
&
/' '+ &
/
#
&
/. .+ &
/
#

%1

)*/' /'0 &
/'#

)*/. /. &
/.#

% 4

)*/'&
)*/.& / + &
/
#
>
. $43

)*
)#
2
2
Zaprezentowany skrypt dziaa bardzo podobnie do poprzedniego przykadu. Jedyna

rnica polega na tym, e dodatkowe wyraenie warunkowe wycza widzialno klipu,
gdy znajduje si on z tyu obserwatora. Przykad ten znajdziesz w pliku random_3D_
points_trans3.fla na pycie CD-ROM.
52
Obrt
Obrt jest jednym z typowych efektw przeprowadzanych w przestrzeni trjwymiarowej.
Daje wraenie rzeczywistego przebywania w rodowisku trjwymiarowym, poniewa
pozwala si w niej obraca i oglda j ze wszystkich stron. Cho jest to najbardziej
skomplikowany aspekt omawiany do tej pory w tym rozdziale, jest zrozumiay nawet
dla matematycznego nowicjusza.
Wstp do obrotu
Zanim przystpimy do tworzenia kodu, przypomnijmy kilka podstawowych zagadnie,
gwnie z trygonometrii.
Dwie trygonometryczne funkcje, z ktrych bdziemy teraz intensywnie korzysta, to
sinus (symbol sin) oraz kosinus (symbol cos). Obie funkcje jako argument przyjmuj
warto kta. Aby zobrazowa wyniki zwracane przez te funkcje, narysujmy trjkt
prostoktny (rysunek 2.16).
Rysunek 2.16.
Wartoci funkcji sinus
i kosinus s obliczane
na podstawie dugoci
bokw trjkta
prostoktnego
Warto sinusa kta jest rwna dugoci y przyprostoktnej4 lecej naprzeciw kta ,
podzielonej przez dugo r przeciwprostoktnej5. Kosinus kta jest z kolei rwny
dugoci x przyprostoktnej lecej przy kcie , podzielonej przez dugo r przeciwprostoktnej. Definicje te dla utrwalenia zanotujemy na rysunku 2.17.
Rysunek 2.17.
Rwnania funkcji
sinus i kosinus
Na podstawie tych prostych definicji moemy sformuowa nasze pierwsze rwnania,

ktrych uyjemy w obliczeniach. Wielkoci x i y reprezentuj podstaw i wysoko
trjkta prostoktnego, powstaego przez ustawienie boku r pod ktem . Gdy umiecimy pocztek ukadu wsprzdnych w wierzchoku kta , moemy rwnie interpretowa wielkoci x i y jako wsprzdne wierzchoka drugiego kta ostrego w trjkcie
prostoktnym (rysunek 2.18).
4
5
Czyli boku, ktry styka si z ktem prostym przyp. tum.

Czyli boku, ktry nie styka si z ktem prostym przyp. tum.
53
Rysunek 2.18.
Trjkt prostoktny
z wierzchokami
osadzonymi w ukadzie
wsprzdnych
Przeksztacajc rwnania sinusa i kosinusa, moemy utworzy rwnania na dugo bokw x i y (rysunek 2.19).
Rysunek 2.19.
Proste przeksztacenie
rwna sinusa
i kosinusa
daje rwnania
na dugoci bokw x i y
Powyszy zestaw rwna pozwala nam znale wsprzdne x i y punktu, gdy znamy
dugo boku r i warto kta . Jednak jakie znaczenie maj wielkoci r i ? Wyobra
sobie prosty patyk lecy na paskiej pododze, z jednym z wierzchokw umieszczonym w punkcie (0, 0) ukadu wsprzdnych, za drugim wierzchokiem w punkcie (0, r),
przy czym r jest dugoci patyka (rysunek 2.20).
Rysunek 2.20.
Patyk z jednym
z wierzchokw
w pocztku ukadu
wsprzdnych,
za drugim
wierzchokiem na osi x
Gdyby obrci patyk o kt wok rodka ukadu wsprzdnych, jeden z wierzchokw pozostaby w pocztku ukadu wsprzdnych, za drugi znalazby si gdzie na
paszczynie xy. Moemy dokadnie ustali, jakie jest pooenie drugiego wierzchoka.
Rwnania sinusa i kosinusa, przeksztacone do postaci przedstawionej na rysunku 2.19,
pozwalaj nam odnale wsprzdne x i y, jeli znamy wielkoci r i (rysunek 2.21).
Rysunek 2.21.
Za pomoc
wyprowadzonych
rwna moesz
znale wsprzdne
wierzchoka
obrconego patyka
54

Z powyszego rysunku wynika, e gdy przesuniemy si o dugo r w kierunku , bdziemy
mogli odnale wsprzdne punktu, w ktrym si znajdziemy, mnoc warto r przez sinus lub kosinus kta . Sowem, uporzdkowan par liczb (x, y) mona te zapisa w postaci (r cos , r sin ).
W trygonometrii istnieje rwnie pojcie tosamoci trygonometrycznej. Jest rwnanie
zawierajce funkcje trygonometryczne, ktre uatwia rozwizywanie problemw i upraszcza specyficzne obliczenia. Tosamoci trygonometryczne s szczeglnie przydatne wwczas, gdy potrzebujesz oglnego wzoru na sinus lub kosinus sumy, rnicy lub iloczynu
dwch ktw. Dla nas przydatne bd dwie tosamoci trygonometryczne, zwane tosamociami dla sumy ktw (rysunek 2.22).
Rysunek 2.22.
Tosamo sinusa
i kosinusa sumy ktw
Jeli jeste dociekliwy, moesz znale dowody powyszych tosamoci w wikszoci

ksiek matematycznych. My poprzestaniemy na ich uyciu, co nastpi ju wkrtce.
Skoro zajmujemy si ktami, sinusami i kosinusami, powinienem wspomnie o pewnym dziwactwie Flasha zwizanym z obsug funkcji trygonometrycznych. Istniej dwie
rne miary ktw stopnie i radiany. Niemal wszystkim znane s stopnie i kady wie,
e w okrgu mieci si 360 stopni, czyli peny kt. Mniej znane s radiany. Kt wyraony w radianach to stosunek dugoci uku o okrelonym promieniu do dugoci tego
promienia (rysunek 2.23).
Rysunek 2.23.
Kt wyraony
w radianach
Aby uatwi sobie ycie, przyjmijmy, e promie uku r ma dugo 1. W tym wyjtkowym przypadku miara radianowa kta upraszcza si do dugoci uku s. Dugo uku
w penym kcie (czyli po prostu obwd okrgu) wynosi 2r. Jeli promie okrgu r wynosi 1, wwczas jego obwd jest rwny 2. Std wynika, e kt 360 stopni jest rwny
ktowi 2 radianw. Jeli zatem mamy kt 360 stopni, moemy przeliczy go na radiany, mnoc go przez warto 2 i dzielc przez 360; jeli uprocimy to dziaanie, wystarczy przemnoenie kta przez i podzielenie przez 180. Korzystajc z tego wspczynnika moesz przelicza stopnie na radiany (mnoc stopnie przez wspczynnik)
lub radiany na stopnie (dzielc radiany przez wspczynnik). Rysunek 2.24 przedstawia
wzr na przeliczanie ktw w stopniach na radiany i z powrotem.
55
Rysunek 2.24.
Konwersja pomidzy
stopniami i radianami
Obiekt Math Flasha, ktry udostpnia wszystkie funkcje trygonometryczne, korzysta z radianowej miary ktw, dlatego przed skorzystaniem z dowolnej funkcji trygonometrycznej
musisz przeliczy stopnie na radiany. Jak si dalej przekonasz, najlepiej jest operowa
ktami obrotw w stopniach i przelicza je na radiany bezporednio przed uyciem
funkcji trygonometrycznych Flasha.
Do czego sprowadza si obrt

Jeli chcesz wyprowadzi rwnania obrotu punktu w przestrzeni, najpierw musisz wiedzie, jak sformuowa problem. Ponadto musisz sobie dokadnie uwiadomi, co oznacza obrt wok osi x lub dowolnej innej osi.
Gdy obracasz punkt wok osi x, oznacza to, e ta o ukadu wsprzdnych staje si
jednoczenie osi obrotu. Podobnie jest w przypadku obrotu wok innych osi. Wart
podkrelenia jest fakt, e podczas obrotu wok osi x punkt nie zmienia wartoci swojej
wsprzdnej x, zmienia natomiast wartoci wsprzdnych y i z. Podobnie, gdy obracasz punkt wok osi z, zmieniaj si jego wsprzdne x i y, natomiast wsprzdna
z pozostaje niezmieniona. Na obrazie Flasha obrt wok osi z ma taki sam skutek, jak
obrt wok rodka ukadu wsprzdnych w dwuwymiarowym, kartezjaskim ukadzie
wsprzdnych (rysunek 2.25).
Rysunek 2.25.
Obroty punktu wok
poszczeglnych osi
trjwymiarowego
ukadu wsprzdnych
Obrt wok osi z

Sformuujmy rwnania opisujce obrt punktu wok osi z; dziki temu bdzie nam
atwiej opisa nastpnie obrt wok pozostaych osi. Wyobra sobie punkt na paszczynie xy, ktrego wsprzdna z jest chwilowo nieistotna (przyjmijmy, e wynosi 0).
Punkt ma zatem wsprzdne (x, y, 0), jest oddalony o r od pocztku ukadu wsprzdnych, za czca go z nim linia jest nachylona do osi x pod ktem a (rysunek 2.26).
56
Rysunek 2.26.
Linia czca punkt
na paszczynie xy
z pocztkiem ukadu
wsprzdnych tworzy
kt z osi x
Teraz obr ten punkt o kt b wok pocztku ukadu wsprzdnych (lub wok osi
z prostopadej do paszczyzny xy). Obrcony punkt przyjmie wsprzdne (x', y', 0), zachowujc przy tym pierwotn odlego r od pocztku ukadu wsprzdnych (rysunek 2.27).
Rysunek 2.27.
Punkt obrcony
wok osi z
Zwr uwag, e teraz linia czca obrcony punkt z pocztkiem ukadu wsprzdnych tworzy z osi x kt o wartoci a+b, a nie tylko b. Kt b to kt, o jaki obrcilimy
pierwotn konfiguracj punktu. Zatem problem obrotu punktu wok osi z sprowadza
si do znalezienia nowych wsprzdnych (x', y', 0), przy czym znane s wartoci a, b, r
oraz pierwotne wsprzdne (x, y, 0).
Obrt z uyciem trygonometrii

Rozpocznijmy od zapisania wzorw funkcji sinus i kosinus, przeksztaconych do postaci umoliwiajcej znalezienie wsprzdnych x i y pierwotnego i obrconego punktu
(rysunek 2.28).
Rysunek 2.28.
Wzory umoliwiajce
znalezienie
wsprzdnych
pierwotnego
i obrconego punktu
57
By moe zaczynasz si ju domyla, dlaczego wczeniej wspomnielimy o tosamociach trygonometrycznych dla sumy ktw. Powysze rwnania nie s dla nas adn
nowoci. Musimy jedynie pamita, e obrcony punkt tworzy z osi x kt a+b. Cho
rwnania te mogyby by uyteczne podczas obracania punktu, jednak ich zastosowanie
byoby uciliwe. Musielibymy cay czas ledzi odlego punktu od pierwotnej pozycji oraz pierwotnego kta nachylenia. Jest to moliwe do zrealizowania, lecz nie jest
konieczne. Korzystajc z tosamoci trygonometrycznych dla sumy ktw, wyprowadzimy bardziej praktyczne wzory (rysunek 2.29).
Rysunek 2.29.
Korzystamy
z tosamoci
trygonometrycznych
dla sumy ktw,
podstawiajc je
do wzorw
Zwr uwag, e tosamoci dla sumy ktw nie zawieraj wielkoci r, zatem podczas
podstawiania tosamoci do wzorw wielko r musi pozosta poza nawiasami. Jednak
aby uproci nasze wyraenia, moemy przemnoy wyraz r przez wntrze nawiasw
(rysunek 2.30).
Rysunek 2.30.
Mnoymy wyraz r
przez zawarto
nawiasw
Jeli jeste spostrzegawczy, z pewnoci zauwaysz, e w ostatnim zestawie rwna wystpuj pewne wsplne elementy. Rwnania na x', y' i z' zawieraj czony, ktre s identyczne z rwnaniami na x, y i z. Mwimy oczywicie o czonach (r cos a) oraz (r sin a),
ktre s odpowiednio rwne wielkociom x i y. Korzystajc z tego faktu, moemy zastpi
te czony wielkociami x i y (rysunek 2.31).
Tym sposobem otrzymae rwnania opisujce obrt punktu wok osi z. Jeli znasz
pierwotne pooenie punktu (x, y, 0) i chcesz obrci go wok osi z o b stopni, po prostu uyj ostatnich dwch rwna. Zwr uwag, e pozbylimy si w nich wszelkich
kopotliwych wielkoci, takich jak r czy a.
Przykad obrotu wok osi z

W powyszych rozwaaniach byo wida, e obrt wok osi z nie angauje trzeciego
wymiaru (poniewa obracane punkty pozostaj na paszczynie xy). Przyjrzyjmy si
kilku niewielkim demonstracjom, aby rozwia wszelkie wtpliwoci.
58
Rysunek 2.31.
Upro rwnania,
zastpujc podobne
czony
Otwrz plik z_axis_rotation1.swf, zapisany na pycie CD-ROM.
Za kadym razem gdy klikniesz przycisk Obr, punkt obrci si wok pocztku ukadu wsprzdnych o kt podany w polu Kt obrotu (rysunek 2.32).
Rysunek 2.32.
Obrt punktu wok
osi z o kt podany
przez uytkownika
Otwrz plik z_axis_rotation1.fla zapisany na pycie CD-ROM.
W filmie utworzyem pole tekstowe (zwizane ze zmienn

), suce do
wpisywania kta obrotu punktu, przycisk wykonujcy obrt oraz klip filmowy (o nazwie point) reprezentujcy obracany punkt. Film zawiera dwa skrypty. Jeden z nich
mieci si w pierwszej klatce gwnej listwy czasowej ( ), za drugi w przycisku
wykonujcym obroty.
59
W gwnej listwie czasowej utworzyem now warstw, przeznaczon wycznie na

skrypty. Umieciem w niej skrypt deklarujcy wszystkie potrzebne stae i umieszczajcy punkt w pocztkowym pooeniu. Warto
suy do konwertowania stopni na
radiany, przeprowadzanego przed zastosowaniem funkcji trygonometrycznych obiektu
Math. Nastpne dwie stae deklaruj pooenie rodka trjwymiarowego ukadu wsprzdnych na obrazie Flasha. Wreszcie w ostatniej czci skryptu deklaruj pocztkow
pozycj punktu i umieszczam go w tej pozycji.
$&. %
.
(
)*JA-L"#
.&%
$%. $4.&)
/' ,56#
/. ,""#
&3
1

' -6"#
. "#

&3
.1

*/' /'0'#

*/. /..#
Akcje zajmujce si obracaniem punktu mieszcz si w skrypcie przycisku, wewntrz

detektora
. Po wykryciu kliknicia przycisku Obr i zwolnienia klawisza
myszy, obliczamy sinus i kosinus kta obrotu (podanego przez uytkownika w polu tekstowym). Poniewa obiekt Math wymaga podawania kta w radianach, konwertujemy
stopnie na radiany bezporednio w argumencie funkcji.
%;3

/ (
)*H

/ +
#
&/ (
)*&H

/ +
#
Zwr uwag, e warto zmiennej

jest wstpnie przetwarzana przez
funkcj . Jest to konieczne, poniewa warto pochodzca bezporednio z pola
tekstowego moe by traktowana jako warto tekstowa, na ktrej nie mona wykonywa
operacji matematycznych. Dla pewnoci konwertujemy j na warto liczbow.
W nastpnych kilku wierszach skryptu odbywa si obliczanie nowego pooenia obracanego punktu. Nie moemy jednak zmienia bezporednio wsprzdnych x i y punktu
za pomoc wyprowadzonych wczeniej rwna. Gdybymy od razu zaktualizowali
wsprzdn x przed obliczeniem wartoci wsprzdnej y, tosamoci nie zadziaayby
poprawnie. Dlatego tworzymy dwie pomocnicze zmienne,
i
, i dopiero po zakoczeniu oblicze aktualizujemy zmienne i .
&1
& 8
1. %3&
1 &
.
.&.&) .3
$

/' '+&/ .+/ #

/. .+&/ 0'+/ #

%1

'

/'#
.

/.#
Po obliczeniu nowych wartoci wsprzdnych punktu pozostaje jeszcze umieszczenie

punktu w tych wsprzdnych. Oczywicie bierzemy przy tym pod uwag pooenie
rodka trjwymiarowego ukadu wsprzdnych, stosujc taki sam kod jak poprzednio:
60

.1

*/' /'0'#

*/. /..#
czc wszystkie elementy, otrzymujemy skrypt przycisku, obracajcy punkt o wsprzdnych (x, y) o kt

wok rodka dwuwymiarowego ukadu wsprzdnych.

%;3

/ (
)*H

/ +
#
&/ (
)*&H

/ +
#
&1
& 8
1. %3&
1 &
.
.&.&) .3
$

/' '+&/ .+/ #

/. .+&/ 0'+/ #

%1

'

/'#
.

/.#

.1

*/' /'0'#

*/. /..#
2
Inny wariant obrotu wok osi z

W nastpnym przykadzie korzystamy z takiego samego mechanizmu obrotu. Rnica
polega na tym, e kt obrotu jest ustalany przez uytkownika za pomoc klawiszy
strzaek (bez udziau pola tekstowego) i obrt jest wykonywany w kadej klatce filmu
(wyeliminowano przycisk Obr). W rezultacie powstaje efekt cigego ruchu obrotowego. Przytrzymujc klawisz strzaki, moesz pynnie zwiksza lub zmniejsza prdko ruchu obrotowego. Plik korzysta z techniki wykrywania wcini klawiszy, ktr
omwilimy wczeniej.
Otwrz plik z_axis_rotation2.swf, zapisany na pycie CD-ROM.
Przytrzymujc klawisze strzaek w lewo lub w prawo, moesz modyfikowa kt, o jaki
punkt obraca si w kadej klatce. Zanim zajrzysz do kodu, zastanw si, jak zrealizujesz
takie zadanie. W jaki sposb umoliwisz uytkownikowi modyfikowanie kta obrotu
i obracanie punktu o ten zmodyfikowany kt?
Otwrz plik z_axis_rotation2.fla, zapisany na pycie CD-ROM.
Plik ten dziaa podobnie jak poprzedni przykad pooenie punktu jest obliczane
w taki sam sposb. Plik nie zawiera jednak przycisku Obr, pola tekstowego ani dodatkowej warstwy dla skryptw w gwnej listwie czasowej; wszystkie akcje s zawarte
wewntrz detektorw zdarze klipu filmowego.
Detektor zdarzenia
deklaruje kilka niezbdnych wartoci sta
suc
do konwertowania stopni na radiany, pooenie pocztku trjwymiarowego ukadu
wsprzdnych, pocztkowe pooenie punktu oraz pocztkowy kt obrotu. Ponadto
61
deklarujemy przyrost, o jaki bdziemy modyfikowa kt obrotu po wykryciu wcinicia

klawisza. Poniewa w kadej klatce wykonujemy obrt, czyli modyfikujemy wartoci
wsprzdnych x i y punktu, nie jest konieczne cige modyfikowanie kta obrotu w celu
poruszania punktu. Tak naprawd warto rotation_angle okrela teraz prdko obrotow punktu. Gdy zwikszasz lub zmniejszasz t warto, zmieniasz prdko ruchu.

$&. %
.

(
)*JA-L"#
.&%
$%. $4.&)
/' ,56#
/. ,""#
&3
1

' -6"#
. "#
.
3

.&4&
& *-#
&3
.3

/ "#
2
Kod wewntrz detektora zdarzenia

jest bardzo podobny do kodu przycisku
z poprzedniego przykadu. Przed przystpieniem do obliczania nowej pozycji, modyfikujemy kt obrotu. Poniewa kt ten jest modyfikowany przez uytkownika za pomoc
klawiszy strzaek, korzystamy z takiego samego rozwizania, jak w jednym z wczeniejszych skryptw tego rozdziau. Po zmodyfikowaniu kta obrotu obliczamy jego sinus i kosinus, nastpnie wstawiamy te wartoci do rwna obrotu i wyznaczamy nowe
pooenie punktu.

9

%3

&4
.

/ 0 ? .*? .*E9D+&? .*? .*@ABCD+&#
%;3

/ (
)*

/ +
#
&/ (
)*&

/ +
#
&1
& 8
1. %3&
1 &
.
.&.&) .3
$

/' '+&/ .+/ #

/. .+&/ 0'+/ #

%1

'

/'#
.

/.#

.1

)*/' /'0'#

)*/. /..#
2
Obrt wok pozostaych osi

Obrt wok pozostaych osi wyglda bardzo podobnie do obrotu wok osi z, zatem nie
musimy dla nich powtarza tak wnikliwego omwienia. Po wyprowadzeniu wszystkich
rwna zobaczysz, e rni si one tylko pojedynczymi wartociami.
62

Wczeniej stwierdzilimy, e obrt wok osi x nie wpywa na wsprzdn x punktu.
W zwizku z tym, aby wyobrazi sobie punkt obracajcy si wok osi x, przewracamy trjwymiarowy ukad wsprzdnych w ten sposb, by o x bya skierowana w nasz stron, prostopadle do paszczyzny kartki, na ktrej le pozostae osie. Obracany
punkt ley teraz gdzie na paszczynie yz, za linia czca go z pocztkiem ukadu
wsprzdnych tworzy kt a z osi z. Zamierzamy obrci ten punkt wok osi x (lub
inaczej wok pocztku dwuwymiarowego ukadu wsprzdnych yz) o kt b. Sytuacja
jest bardzo podobna do omawianej poprzednio, lecz tym razem modyfikujemy wsprzdne y i z (rysunek 2.33).
Rysunek 2.33.
Punkt obracany
wok osi x
Na podstawie tego rysunku moemy sformuowa pierwszy zestaw rwna, podobnie jak
zrobilimy to poprzednio. Ponownie zwr uwag, e po obrceniu punktu o kt b, linia
czca go z pocztkiem ukadu wsprzdnych tworzy z osi z kt a+b (rysunek 2.34).
Rysunek 2.34.
Rwnania opisujce
pooenie punktu
w pierwotnej pozycji
oraz po obrocie
Pominiemy prac zwizan z przeksztaceniami, ktr wykonalimy ju poprzednio.

Korzystajc z tosamoci trygonometrycznych oraz upraszczajc rwnania, otrzymujesz
ostateczn posta rwna (rysunek 2.35).
Tym sposobem otrzymae rwnania, za pomoc ktrych moesz obrci punkt wok osi
x w trjwymiarowym ukadzie wsprzdnych. Jeli znasz pocztkowe pooenie punktu
(x, y, z) i chcesz go obrci wok osi x o kt b, po prostu uyj ostatnich dwch rwna.
Rwnie tym razem udao nam si wyeliminowa problematyczne wielkoci r i a.
Wyprowadzenie rwna opisujcych obrt punktu wok osi y wyglda niemal identycznie. Dlatego rezygnuj z geometrycznej reprezentacji problemu i przedstawiam jedynie algebraiczne przeksztacenia (rysunek 2.36).
63
Rysunek 2.35.
Rwnania opisujce
obrt punktu
wok osi x
Rysunek 2.36.
Rwnania opisujce
obrt punktu
wok osi y
w trjwymiarowym
ukadzie wsprzdnych
Wyprowadzilimy rwnania opisujce obroty skadowe wok wszystkich trzech osi przestrzennego ukadu wsprzdnych. Zbierzmy rezultaty tych wyprowadze na rysunku 2.37.
Cho oznaczenia przy zmiennych x, y i z jeden, dwa lub trzy apostrofy s stosunkowo drobne, nie wolno ich lekceway. Powysze rwnania demonstruj zasad, ktra
ma ogromne znaczenie podczas obracania obiektw wzgldem trzech osi zawsze
przeksztacaj punkt bdcy wynikiem poprzedniego przeksztacenia. Oznacza to, e jeli
chcesz obrci punkt wok osi x i y, powiniene obrci pierwotny punkt wok osi x,
a nastpnie wynik tego obrotu obrci wok osi y.
Oto plan dziaania skryptu, ktry obraca wiele punktw wok wszystkich trzech osi
(x, y oraz z) ukadu wsprzdnych, odpowiednio o kty a, b i c:
64
Rysunek 2.37.
Rwnania opisujce
obroty skadowe
wok poszczeglnych
osi przestrzennego
ukadu wsprzdnych
1. Znajd sinus i kosinus ktw obrotu a, b i c.

2. Rozpocznij ptl, by obliczy wsprzdne obracanych punktw i umieci punkty
w nowych wsprzdnych przestrzennych.
3. Obr punkt wok osi x.
4. We wynik obrotu punktu wok osi x i obr go wok osi y.
5. We wynik obrotu punktu wok osi y i obr go wok osi z.
6. Oblicz rzut punktu przestrzeni na paszczyzn ekranu.
7. Zmodyfikuj inne parametry klipu filmowego reprezentujcego punkt.
Optymalizacja
Posiadamy wszystkie informacje potrzebne do utworzenia we Flashu kilku spektakularnych efektw. Jednak nie mniej wane jest, by Flash zdoa wykona wszystkie potrzebne obliczenia. Bardziej zaawansowane metody optymalizacji oblicze i redukcji
obcienia procesora nie maj zastosowania we Flashu z dwch powodw: Flash nie
obsuguje optymalizowanych oblicze, a w rodowisku nie ma wystarczajcej liczby
obiektw, by w peni korzysta z tych algorytmw. W tym podrozdziale omwimy jednak kilka technik optymalizacji, ktre s uyteczne we Flashu.
Wyczanie niewidocznych obiektw

Wczeniej w tym rozdziale zastosowalimy prost metod optymalizacji oblicze zwizanych z grafik trjwymiarow jeli czego nie wida, nie renderuj tego. Gdy punkt
65
znajdowa si z tyu obserwatora, nie wykonywalimy dla niego oblicze, lecz wyczalimy jego widzialno. Moemy rozwin t ide i wycza obiekty, ktre nie s
widoczne w obszarze ekranu.
Obiekt znajduje si poza widzialnym obszarem, jeli jego wsprzdna x lub y na obrazie jest wiksza od szerokoci lub wysokoci obrazu, lub mniejsza od 0. Moemy to
sprawdzi za pomoc kilku wyrae warunkowych i w zalenoci od wyniku przypisa
waciwoci odpowiedniego klipu warto lub
.

.

/
) 66"#

/) )
!""#
2

9

;8&. 4
7
)*/'M
/
)NN
)*/'<"

4 3 3 43

)*/ 7 #
2
7
)*/.M
/) )
NN
)*/.<"

4 $33 43

)*/ 7 #
2

%% 4

)*/
#
2
2
Pamitaj, e wszelkie przesunicia, obroty i rzuty perspektywiczne musisz wykona

przed sprawdzeniem, czy punkt znajduje si na obrazie. Wyczanie niewidocznych
obiektw nie zaoszczdzi ci zatem oblicze, jednak pozwoli zminimalizowa liczb
obiektw jednoczenie wywietlanych przez Flasha.
Minimalizuj ilo oblicze

Optymalizacja jest nierozerwalnie zwizana z technik programowania. Aby przyspieszy wykonywanie dowolnych procedur, musisz zminimalizowa ilo wykonywanych
oblicze. Oznacza to moliwie rzadkie uywanie obiektu Math, tylko do tych celw, do
ktrych jest absolutnie niezbdny. Oznacza to rwnie upraszczanie wyrae, tak aby
zawieray jak najmniejsz liczb operacji mnoenia i dzielenia (ktre s znacznie bardziej pracochonne od dodawania i odejmowania).
66

Obiekt Math
Cho dziaanie obiektu Math nie jest nadzwyczaj powolne, jednak powiniene si do
niego odwoywa nie wicej ni kilka razy, traktujc go jako obcienie dla procesora.
Wiele osb popenia bd polegajcy na obliczaniu sinusw i kosinusw bezporednio
we wzorach obrotw, wewntrz ptli obracajcej wszystkie punkty. Poniewa w konkretnej klatce wszystkie punkty najprawdopodobniej s obracane o ten sam kt, sinus
i kosinus tego kta wystarczy obliczy jeden raz.
Oto kod z komentarzami opisujcymi t strategi:

9

.7%3

.
4&
&3

7 % "#%<& /
$#%00

>
$
. %

.&.
;8&.
&4
. %
2
2
Niektrzy tworz tablice wartoci sinusw i kosinusw, dziki czemu w ogle nie musz korzysta z obiektu Math. Cho praktyka ta bya popularnie stosowana w przeszoci w jzykach C++ i innych jzykach programowania, jednak nie jest potrzebna
w przypadku dzisiejszych szybkich komputerw.
Studium 1. Obracanie skupiska punktw

W pierwszej czci studium przedstawi przykad, nad ktrym pracowalimy ju we wczeniejszej czci rozdziau. Tworzy on skupisko losowo rozmieszczonych punktw i oddaje
do dyspozycji uytkownika zestaw przyciskw umoliwiajcych ich obracanie. Struktura
skryptu i filmu jest jednak cakowicie odmienna, zatem przystpmy do ich omawiania.
Otwrz plik demo_one1.swf, zapisany na pycie CD-ROM.
Film wywietla skadowe kty obrotu wok poszczeglnych osi i w kadej klatce obraca skupisko punktw o ustawione kty (rysunek 2.38).
Otwrz plik demo_one1.fla, zapisany na pycie CD-ROM.
Ukad
Dokument zawiera siedem gwnych elementw graficznych. Sze z nich to przyciski
sterujce czstkowymi ktami obrotu wok trzech osi. Ostatnia grafika to klip filmowy
67
Rysunek 2.38.
Za pomoc przyciskw
ustaw skadowe kty
obrotu wok
poszczeglnych osi
reprezentujcy punkt. W odrnieniu od poprzednich przykadw, wikszo kodu nie

mieci si wewntrz klipu filmowego punktu. Ze wzgldu na nabyte dowiadczenie
w programowaniu w jzyku C++, preferuj umieszczanie kodu w jednym miejscu, gdy
tylko jest to moliwe. Dlatego utworzyem oddzielny klip filmowy, ktremu nadaem
nazw i w ktrym umieciem wikszo akcji.
Zasig dziaania zmiennych

Wikszo kodu mieci si w detektorach zdarze klipu filmowego . Jedynie trzy
zmienne mieszcz si poza nimi s to kty obrotu wok poszczeglnych osi. Zmienne
te s przechowywane na gwnej listwie czasowej, dziki czemu przyciski maj do nich
atwy dostp. Skrypt klipu filmowego rwnie korzysta z tych zmiennych podczas obliczania sinusw i kosinusw ktw.
Usuwamy niepotrzebny klip

Klip filmowy o nazwie jest wielokrotnie duplikowany podczas tworzenia skupiska punktw. Chcemy, aby byy widoczne jedynie zduplikowane klony, jednak
pierwotny klon powinien by niewidoczny, poniewa mieci si dokadnie w rodku
trjwymiarowego ukadu wsprzdnych i obrt nie wpywa na jego pozycj. Dlatego
w detektorze zdarzenia
klipu filmowego umieciem nastpujcy skrypt, ktry
wycza widzialno pierwotnego klonu i pozostawia jedynie klony zduplikowane.

.3&
.7.
7
)*/ =
=
68

)*/ 7 #
2
2
Inicjalizacja zmiennych
W pierwszej klatce gwnej listwy czasowej ( ) inicjalizujemy zmienne

,

i

, reprezentujce kty obrotu wok poszczeglnych osi. Wartoci tych zmiennych s modyfikowane przez uytkownika za
pomoc szeciu przyciskw umieszczonych na obrazie. Nastpnie s odczytywane
przez klip filmowy . Poniewa bezporednio po uruchomieniu filmu punkty nie
powinny by obracane, zmiennym tym nadajemy pocztkowe wartoci 0.
Pozostae akcje powizaem bezporednio z klipem filmowym . Odczytywanie
wsprzdnych punktu w poprzednich przykadach nie stanowio adnego problemu,
poniewa wszelkie informacje o punkcie mieciy si w nim samym. Tymi parametrami
punktw sterujemy z zewntrznego skryptu, zatem musimy ledzi pozycje wielu
punktw. Moglibymy utworzy wiele zmiennych o nazwach !, ", !, " i tak dalej
dla kadego punktu, lecz takie rozwizanie byoby mao wydajne. Zamiast tego tworzymy tablic obiektw. Kady element tablicy reprezentuje jeden punkt, za poszczeglne waciwoci punktw stanowi wartoci poszczeglnych wsprzdnych.
W zwizku z powyszym w detektorze zdarzenia
klipu filmowego tworzymy tablic, a nastpnie w ptli umieszczamy obiekt w kadym elemencie tej tablicy.
Wreszcie losujemy pocztkowe wartoci wsprzdnych punktu. W tej samej ptli duplikujemy rwnie same punkty.

& & .&)
$
/
-6#

& .&%
$

/
O ./
#

$ &3
.&).&%
7 % "#%</
#%00

&% $7.&)
/
*
*&
( =
=0%8%#

$
$4.&)'8.

/
P%Q F% &
#
.%&3
$4

/
P%Q*' (
)* +,""-""#

/
P%Q*. (
)* +,""-""#

/
P%Q* (
)* +,""-""#
2
Pozostay kod w detektorze zdarzenia

deklaruje zmienne, ktrych uywalimy ju
wczeniej pooenie pocztku trjwymiarowego ukadu wsprzdnych, pocztkowy
rozmiar klipu reprezentujcego punkt, zakadan odlego obserwatora od ekranu oraz
warto wspczynnika, sucego do konwersji stopni na radiany.
69
1 &3

$%. $4.&)
/' ,56#
/. ,""#

R""#
&3
. 7
/
)*/
)#
$&. %
.

(
)*JA-L"#
2
Skrypty przyciskw
Skrypty przyciskw s w tym przykadzie bardzo proste. Gdy uytkownik kliknie przycisk przedstawiajcy strzak w gr, jego skrypt zwikszy warto odpowiedniego kta
obrotu; gdy z kolei kliknie przycisk skierowany w d, jego skrypt zmniejszy warto
odpowiedniego kta obrotu. Moesz dowolnie dobra warto jednorazowej zmiany
wartoci kta; ja zdecydowaem si na zastosowanie operatorw inkrementacji ## i dekrementacji $$, ktre zmieniaj warto zmiennej o 1.
Oto skrypt wykonywany po klikniciu przycisku skierowanego w gr, odpowiadajcego osi x.

43

$'

/ /'00#
2
Gwny skrypt
Gwny skrypt filmu mieci si w detektorach zdarze klipu filmowego . W skrypcie tym s wykonywane obroty i rzuty perspektywiczne punktw. Cho te 50 wierszy kodu nie zawiera adnych nowoci, jednak wie si z nim kilka puapek, na ktre trzeba
uwaa. Ponadto moesz zaobserwowa zastosowane w nim techniki optymalizacji.
Wiele osb popenia bd polegajcy na obracaniu obiektw wok wszystkich osi,
nawet gdy nie jest to potrzebne. W wielu przypadkach wystarcza obrt wok jednej
bd dwch osi. Obrt wok wikszej liczby osi, ni jest to konieczne, jedynie
zwiksza ilo oblicze wykonywanych przez skrypt.
Poniewa w tym przykadzie nie zajmujemy si adnymi przesuniciami, moemy od razu

przej do ruchu obrotowego. Na pocztku s obliczane sinusy i kosinusy ktw obrotu wok poszczeglnych osi. Pamitaj o koniecznoci przeliczenia ktw ze stopni na radiany.

9

& .&)3
$

/ (
)*/
*

/ /'+
#
&/ (
)*&/
*

/ /'+
#
/ (
)*/
*

/ /.+
#
70

&/ (
)*&/
*

/ /.+
#
/& (
)*/
*

/ /+
#
&/& (
)*&/
*

/ /+
#
Nastpnie w ptli odczytujemy po kolei wszystkie elementy tablicy

i obracamy punkty wok poszczeglnych osi. Zdecydowaem si na uycie ptli ,
poniewa liczba elementw w tablicy raczej si nie zmieni, za do czytania tablicy potrzebny jest indeks, ktrym jest licznik ptli %.
4
$
%.

.
7 % "#%</
#%00

&%
2
Pierwszymi operacjami wykonywanymi w ptli s obroty. Pamitaj, e najpierw obracamy punkt wok osi x, nastpnie wynik tego obrotu obracamy wok osi y i wreszcie
wynik tego obrotu obracamy wok osi z. Wane jest, by zawsze przeksztaca wynik
poprzedniego przeksztacenia i nie modyfikowa tablicy przed zakoczeniem wszystkich przeksztace. W razie niepewnoci wr do rysunku 2.37 nie
jest atwo zapamita szeciu rwna!
$
$'
'-
/
P%Q*'#
.-
/
P%Q*.+&/
/
P%Q*+/ #
-
/
P%Q*+&/ 0
/
P%Q*.+/ #
$
$.
', '-+&/-+/#
., .-#
, -+&/0'-+/#
$
$
'R ',+&/&.,+/&#
.R .,+&/&0',+/&#
R ,#

&%
&.$4.&)

/
P%Q*' 'R#

/
P%Q*. .R#

/
P%Q* R#
W tym miejscu skryptu mamy ju wykonane obliczenia zwizane z obrotem wszystkich

wsprzdnych punktw wok osi x, y i z. Teraz pozostaje zrzutowanie punktw na
paszczyzn ekranu i wywietlenie ich. Rozpoczynamy od obliczenia wspczynnika
perspektywy, a nastpnie obliczamy pooenie rzutu punktu na ekranie.
$&.
..
&
/
0R#

&
/' 'R+ &
/
#
&
/. .R+ &
/
#
By moe pogubie si ju w tym, do czego potrzebne s nam te wszystkie obliczenia,

zatem przypomnijmy. Wspczynnik perspektywy jest kluczem do wyznaczenia pooenia
punktu na obrazie i zmodyfikowania jego skali. Aby obliczy wspczynnik perspektywy,
musisz zna wsprzdne punktu w przestrzeni. Aby znale aktualne wsprzdne punktu,
71
wykonujesz wszelkie przesunicia i obroty. Gdy ju dotrzesz do wspczynnika perspektywy i uporzdkowanej pary liczb, po prostu wpisujesz odpowiednie wartoci do waciwoci klipu filmowego.

. %&
/
P=
=0%Q*/' /'0 &
/'#
/
P=
=0%Q*/. /. &
/.#
.7%. .
/
P=
=0%Q*/'& /
P=
=0%Q*/.& / +
&
/
#
.7%
. % $43
/
P=
=0%Q*
)R#
Inny wariant sterowania

Sterowanie ruchem obrotowym za pomoc przyciskw na obrazie moe by mao wygodne. Zamiast tego moemy zdefiniowa zestaw klawiszy na klawiaturze, sucych
do modyfikowania ktw obrotu wok poszczeglnych osi. Przyjmijmy, e klawisze
strzaek w gr i w d posu do sterowania ktem obrotu wok osi x, klawisze
strzaek w lewo i w prawo bd zmieniay kt obrotu wok osi y, natomiast za pomoc
klawiszy Ctrl i 0 (zero na klawiaturze numerycznej) uytkownik moe zmienia kt obrotu wok osi z.
Otwrz plik demo_one2.fla na pycie CD-ROM.
W tym pliku stosujemy te same rozwizania co poprzednio, jedynie nieznacznie modyfikujemy dziaanie skryptu z pliku demo_one1.fla. Przede wszystkim usuwamy przyciski i obsugujce je skrypty, jak rwnie skrypt w pierwszej klatce gwnej listwy czasowej ( ). Zmienne ktw obrotu bd teraz przechowywane w klipie filmowym
. W zwizku z tym wewntrz detektora zdarzenia
klipu musimy umieci takie dodatkowe akcje:
&3
3
.
$& $.&)

/ /' "#

/ /. "#

/ / "#
Ponadto w chwili wywietlenia klipu inicjalizujemy zmienn definiujc przyrost kta

obrotu po wykryciu wcinicia klawisza. Wyprbuj rne wartoci, by wybra tak,
ktra ci najbardziej odpowiada.
.
3

..&&4&

/& *6#
Inicjalizacja kolejnej zmiennej moe si pocztkowo wydawa pozbawiona sensu.

Obiekt Key zawiera wiele predefiniowanych staych (waciwoci). Posiadaj one nazwy poszczeglnych klawiszy i przechowuj odpowiadajce im kody numeryczne. Na
przykad staa &'() zawiera warto 37 (kod klawisza strzaki w lewo). Za pomoc
tych staych moemy z atwoci sprawdzi, czy zosta wcinity okrelony klawisz,
72

korzystajc z metody . Stae obiektu Key obejmuj wszystkie klawisze uywane w naszym przykadzie, oprcz klawisza 0 (zero) na klawiaturze numerycznej. Aby
wykry wcinicie tego klawisza, jako argument metody naley poda warto
96. Jednak zgodnie z zasadami eleganckiego programowania, w kodzie powinnimy
unika stosowania staych. Dlatego zdefiniujemy w obiekcie Key now sta, odpowiadajc klawiszowi 0 na klawiaturze numerycznej.
"
.& %
? .*HI(JO/" ST#
To wszystkie dodatkowe wartoci, jakich uywamy w tym wariancie. Wewntrz detektora zdarzenia
klipu filmowego musimy doda akcje zwikszajce lub zmniejszajce wartoci ktw obrotu po wykryciu wcinicia odpowiedniego klawisza. Robimy
to przed obliczeniem sinusw i kosinusw ktw, by obliczone wartoci byy aktualne.
.7%
&3
$
1&&4
.&) .

/ /'0 ? .*? .*IJ+

/&? .*? .*FGH+

/&#

/ /.0 ? .*? .*@ABCD+

/&? .*? .*E9D+

/&#

/ /0 ? .*? .*FHD@FE+

/&? .*
? .*HI(JO/"+

/&#
Ostatnia modyfikacja dotyczy zastosowania obiektu Math. W poprzednim wariancie

kty obrotw byy dostpne na gwnej listwie czasowej i w skrypcie klipu musielimy
odnosi si do nich za pomoc cieki . Teraz kty obrotu s dostpne na tej samej
listwie czasowej co skrypt, zatem moemy pomin ciek adresow.
& .&)3
$

/ (
)*

/ /'+
#
&/ (
)*&

/ /'+
#
/ (
)*

/ /.+
#
&/ (
)*&

/ /.+
#
/& (
)*

/ /+
#
&/& (
)*&

/ /+
#
I to wszystkie modyfikacje w tym wariancie przykadu. Obrt wok poszczeglnych

osi jest w nim sterowany za pomoc szeciu klawiszy na klawiaturze.
Studium 2. Trjwymiarowy wiat

Efekt prezentowany w tym przykadzie moe si wydawa skomplikowany, lecz w rzeczywistoci atwo go uzyska. Zastosujemy ca wiedz na temat trjwymiarowoci, jak
dotd poznalimy; przedstawimy te kilka dodatkowych informacji zwizanych z tworzeniem trjwymiarowego wiata we Flashu.
Otwrz plik demo_two1.swf zapisany na pycie CD-ROM.
Za pomoc klawiszy strzaek moesz porusza si w trjwymiarowym wiecie (rysunek 2.39). Zastanw si, jak mgby uzyska taki efekt, zanim zajrzysz do pliku. Jakiego typu obrt realizujemy? Jakie zachodz przesunicia?
73
Rysunek 2.39.
Trjwymiarowy wiat
utworzony we Flashu
Trjwymiarowy wiat utworzony we Flashu

Trjwymiarowy wiat we Flashu musi by pod kadym wzgldem prosty. Obiekty powinny by statyczne i wyglda tak samo z kadego miejsca. Mona oczywicie uy
obiektu prerenderowanego pod rnymi ktami, tak aby w zalenoci od pooenia
w wiecie byo widoczne inne jego ujcie. Jednak rzadko kiedy takie rozwizanie jest
warte zachodu, poniewa znacznie zwiksza rozmiar pliku i obnia wydajno.
W zwizku z tymi ograniczeniami tworzenie trjwymiarowego wiata we Flashu wymaga zastosowania jedynie kilku technik, ktre tu poznalimy. Poniewa chcemy, aby
wiat otacza bohatera z wszystkich stron, jedyny obrt, jaki moe on wykona na
paszczynie xz, to obrt wok osi y. Z kolei ruch (w sensie przesunicia) moe si odbywa jedynie wzdu osi x i z. Ruch wzdu osi y umoliwiaby wznoszenie si lub
opadanie, co daoby niepodany rezultat, poniewa obiekty s statyczne.
W tym przykadzie powielamy na obrazie rysunek tego samego drzewa, rozmieszczajc
jego klony w rnych miejscach wiata. Klip filmowy drzewa nosi nazw %.
W przypadku takiego obiektu jak drzewo trudno jest wybra punkt odniesienia, ktry
reprezentowaby pooenie drzewa w trjwymiarowym wiecie. Aby zachowa wraenie cigoci wiata, musimy wybra pojedynczy punkt reprezentujcy cae drzewo.
Najlepiej zdefiniowanym punktem drzewa w wiecie jest ten, w ktrym oba si stykaj.
Dlatego zdecydowaem si umieci punkt odniesienia klipu filmowego u podstawy
drzewa. Uporzdkowana trjka liczb bdzie zatem okrelaa pooenie podstawy drzewa.
Zudzenie przestrzeni
Za pomoc dwch prostych przeksztace uzyskamy iluzj obiektw otaczajcych bohatera. Gdy wyprowadzalimy rwnania okrelajce pooenie trjwymiarowego punktu na
74

dwuwymiarowej paszczynie, zakadalimy, e obserwator siedzi w pewnej odlegoci
(d) od ekranu. Jednak gdy bohater jest zanurzony w wiecie, nie ma odlegoci pomidzy nim a ekranem. Pierwszym naszym przeksztaceniem bdzie zatem przesunicie
wszystkich punktw wiata w stron obserwatora o odlego d. Poniewa to przeksztacenie wpywa jedynie na sposb przedstawiania wiata, nie powinno wpywa na
pooenie punktw w symulowanym trjwymiarowym wiecie.
Drugie przeksztacenie nadaje bohaterowi pewn wysoko w trjwymiarowym wiecie. Poniewa pooenie drzewa jest okrelone przez pooenie jego podstawy, bez dodatkowego przesunicia gowa obserwatora znajdowaaby si na poziomie gruntu. Jednak jestemy przyzwyczajeni, e wiat obserwujemy z pewnej wysokoci. Aby uzyska
ten efekt, przesuwamy wszystkie punkty wiata w d wzdu osi y o odlego odpowiadajc wysokoci bohatera. To przeksztacenie rwnie nie powinno wpywa na
rzeczywiste pooenia punktw, jedynie na sposb ich prezentacji. Poeksperymentuj
z wysokoci bohatera, aby dobra tak, jaka jest dla ciebie zadowalajca.
Drobiazgi zwizane z budow filmu

Kilka spraw zwizanych z budow filmu wymaga komentarza. Pierwsz z nich jest rysunek ta. Narysowaem proste zielone to reprezentujce grunt, stykajce si z rysunkiem nieba na rodku obrazu. Miejsce, w ktrym grunt styka si z niebem, nie jest
przypadkowe; na linii horyzontu znajduje si punkt zbiegu perspektywy dla wszystkich
obiektw wiata. Oznacza to, e gdy obiekty oddalaj si od obserwatora, zbliaj si
do linii horyzontu. Pooenie punktu zbiegu jest jednoznacznie okrelone przez wsprzdne x i y trjwymiarowego ukadu wsprzdnych. Punkt zbiegu zwykle powinien si
znajdowa na linii horyzontu, zatem linia horyzontu powinna si pokrywa ze wsprzdn y trjwymiarowego ukadu wsprzdnych.
W tym pliku rwnie uylimy techniki polegajcej na umieszczeniu wikszoci kodu
w niewidzialnym klipie filmowym, odpowiedzialnym za wszystkie najwaniejsze obliczenia. W nim s przechowywane wszelkie zmienne oraz wykonywane wszystkie obliczenia zwizane z trjwymiarowoci i rzutowaniem obiektw. Operacje, ktre s wykonywane tylko jeden raz na pocztku, mieszcz si w detektorze zdarzenia
, natomiast
akcje wykonywane w kadej klatce znajduj si wewntrz detektora zdarzenia
.
Wszystkie drzewa umieszczane w filmie s klonami jednego pierwotnego drzewa. Klip
filmowy drzewa zawiera skrypt, ktry usuwa orygina z obrazu jest to jedyny klon
tego klipu, ktry nie bdzie wywietlany. Skrypt odpowiedzialny za usunicie oryginau
znamy ju z poprzednich przykadw.

9

7
)*/ =% &
=

)*/ 7 #
2
2
75
Inicjalizacja trjwymiarowego wiata

Zmienne, obiekty, powielanie klipw filmowych i warunki pocztkowe s zdefiniowane
wewntrz detektora zdarzenia
klipu filmowego . Niemal wszystkich inicjalizowanych wartoci uywalimy ju wczeniej.
Pierwsze zadanie polega na powieleniu drzew i rozmieszczeniu ich w przypadkowy sposb.
Kady klon drzewa otrzymuje rwnie losow skal, dziki czemu uzyskujemy bardziej
naturalny wygld lasu. Na pocztku definiujemy liczb klonw drzew, jakie znajd si
w filmie, oraz tablic, ktra bdzie przechowywaa pozycje i skale poszczeglnych drzew.

&
.&)
$
/% &
,"#

& &)%3& .&%
$
% &
/
O ./% &
#
Nastpnie w ptli klonujemy drzewa. Dla kadego drzewa tworzymy w tablicy %
obiekt, w ktrym umiecimy jego wsprzdne i skal. Wielkoci te bd waciwociami obiektu w tablicy.

..%&) &&
7 % "#%</% &
#%00

&%

/
*% &
*&
( =% &
=0%8%#

$
&.
8 %3&.3 3
$%4$4.&)
4

% &
/
P%Q F% &
#
.%&3
1

% &
/
P%Q*' (
)* +-6""56"#
% &
/
P%Q*. "#
% &
/
P%Q* (
)* +-6""56"#
.%&3
3 4

% &
/
P%Q* / (
)* +6"06"#
2
Pozostae inicjalizowane wielkoci s staymi zwizanymi z tworzonym wiatem. Podobnie jak we wczeniejszych demonstracjach musimy okreli pooenie trjwymiarowego ukadu wsprzdnych, odlego obserwatora od ekranu oraz sta potrzebn
przy konwersji stopni na radiany.
1
$%. $4.&)
/' ,56#
/. ,""#

6""#
$&. %
.

(
)*JA-L"#
Pojawia si te nowa zmienna, okrelajca wysoko bohatera. Poeksperymentuj z t

wartoci, by sprawdzi, jaka ci najbardziej odpowiada. Moesz nawet umoliwi uytkownikowi modyfikowanie tej wielkoci. Na przykad, gdy uytkownik trzyma wcinit spacj, warto ta moe si zmniejsza, co da efekt przykucnicia.
76

.)
4%3&
$%. . &
. /) )
R"#
Nastpne trzy wielkoci s zwizane z przesuniciem. Pierwsza z nich stanowi przyrost,

o jaki jest zwikszane lub zmniejszane przesunicie w przypadku wykrycia wcinicia
odpowiedniego klawisza. Zwr uwag, e tym razem przyrost ten nie decyduje o prdkoci ruchu, lecz o jednokrokowym przesuniciu, ktre ustaje po zwolnieniu klawisza.
Dwie pozostae wielkoci okrelaj pocztkowe przesunicie wzdu osi x i z.
.
1. .. 4& &)1'

/& -"#
&3
4&

/' "#

/ "#
Podobn inicjalizacj przeprowadzamy dla ruchu obrotowego. Pierwsza warto okrela

przyrost kta obrotu w przypadku wykrycia wcinicia odpowiedniego klawisza. Druga
z kolei okrela pocztkowy obrt wok osi y.
.
3

$.

/& ,#
&3
.3

$.

/ /. "#
Wreszcie, wewntrz obiektu Key definiujemy sta odpowiadajc kodowi klawisza 0 (zero) na klawiaturze numerycznej. Za chwil omwimy klawisze sterujce ruchem i obrotem bohatera.
"
.& %
? .*HI(JO/" ST#
2
Klawisze sterujce
Dobr odpowiednich klawiszy sterujcych umoliwi uytkownikowi wygodne poruszanie si w wiecie. Musimy umoliwi mu sterowanie obrotami wok osi y oraz przemieszczanie si wzdu osi z (w przd i w ty) oraz osi x (na boki). Dobr klawiszy sterujcych obrotem wok osi y oraz ruchem wzdu osi z jest oczywisty najbardziej
odpowiednie do tego celu s klawisze strzaek. Mniej oczywiste jest sterowanie ruchem
na boki; zdecydowaem si na wybranie klawiszy Ctrl i 0 na klawiaturze numerycznej.
Gwna cz skryptu
Pozostaa, gwna cz skryptu mieci si w detektorze zdarzenia
klipu
filmowego . W tych 70 czy 80 wierszach kodu korzystamy z wszystkich omwionych do tej pory technik, cznie z optymalizacj.
Zanim przystpimy do przesuwania, obracania i rzutowania punktw, musimy zmodyfikowa aktualny kt obrotu oraz przesunicia, zgodnie z klawiszami wcinitymi przez
uytkownika. Stosujemy w tym celu technik, ktr poznalimy ju wczeniej.
77

9

.7% 4& ' 1&..
&4&

/' ? .*? .*FHD@FE+

/&? .*
? .*HI(JO/"+

/&#

/ ? .*? .*FGH+

/&? .*? .*IJ+

/&#
.7%3

$. 1&..
&4&

/ /. ? .*? .*@ABCD+

/&? .*? .*E9D+

/&#
Gdy znamy ju aktualny kt obrotu, musimy obliczy jego sinus i kosinus na uytek
rwna obrotu. Pamitaj, e wartoci te wystarczy obliczy jeden raz przed skorzystaniem z rwna obrotu. Nie obliczaj sinusa i kosinusa kta obrotu wewntrz ptli ,
zajmujcej si obracaniem i rzutowaniem poszczeglnych punktw.
3

/. (
)*

/ /.+
#
&/. (
)*&

/ /.+
#
Po zmodyfikowaniu ktw obrotu i przesuni oraz pomocniczym obliczeniu sinusa

i kosinusa, w ptli obliczamy pooenie poszczeglnych punktw w przestrzeni, poddajc je tym przeksztaceniom. Do tego celu najlepiej nadaje si ptla .
7 % "#%</% &
#%00

&% 3
&
2
Wntrze ptli stanowi najwaniejsz cz skryptu. Przed rzutowaniem punktu

i sprawdzeniem, czy mieci si na ekranie, musimy podda go przesuniciu i obrotowi.
Rozpoczynamy od przesunicia punktu i tymczasowy rezultat tego przeksztacenia umieszczamy w tymczasowych zmiennych; tablica % pozostaje na razie niezmieniona. Nastpnie przesunity punkt obracamy wok osi y. Po wykonaniu tego przeksztacenia umieszczamy nowe wartoci w tablicy % .
>
1'

' % &
/
P%Q*'0

/'#

. % &
/
P%Q*.#

% &
/
P%Q*0

/#
$
$.
'
'+&/.
+/.#
.
.#

+&/.0
'+/.#

%$4

&.
% &
/
P%Q*' '#
% &
/
P%Q*. .#
% &
/
P%Q* #
W poprzednich przykadach w tym miejscu przystpowalimy ju do rzutowania punktu. Symulujc trjwymiarowy wiat, musimy jednak pamita, by dokadnie otoczy
nim bohatera. Std wynikaj dwa dodatkowe przeksztaceniach, o ktrych wspomnielimy wczeniej. S to przesunicia, ktre dotycz jedynie zmiennych i . Pooenie
78

obiektu okrelone w tablicy % pozostaje niezmienione, poniewa zawiera rzeczywiste pozycje obiektw w przestrzeni, ktre ju obliczylimy. Wykonywane tu
przesunicia dotycz jedynie rzutowania obiektw i wywietlenia ich na ekranie.
4& 4 %3& .

.&3 &.
.&).&%
$
> 4
.$&.
$1.8.1)

3.
. . /) )
#
> 4
.$&.
18 ..
.4
%.
#
Tym sposobem uzyskujemy ostateczne wsprzdne punktw po przeksztaceniach. Teraz pozostaje nam zrzutowanie ich na paszczyzn ekranu.
Podczas rzutowania staramy si wykona jak najmniej operacji. Z jednej z takich oszczdnoci korzystalimy ju wczeniej sprawdzalimy, czy obiekt znajduje si z tyu obserwatora. Jeli aktualna wsprzdna z rzutowanego punktu jest mniejsza ni ujemna warto
odlegoci obserwatora od ekranu, nie musimy rzutowa ani wywietla punktu.
;8&.
4
.
7<

. 8.3&
/
P=% &
=0%Q*/ 7 #
2

&%
2
Nawet jeli obiekt nie znajduje si z tyu obserwatora, nie jest powiedziane, e znajdzie
si na ekranie. Jeli obiekt mieci si poza ekranem, nadal nie musimy go wywietla. eby to jednak stwierdzi, musimy zrzutowa go na ekran, czyli pozna jego wsprzdne
i skal. Pamitaj, e te operacje mieszcz si wewntrz klauzuli wyraenia warunkowego i s wykonywane tylko wwczas, gdy obiekt znajduje si z przodu obserwatora.

%

. 8 &1 . 8
4& 3& %% & &
$&.
..
&
/
0#
&1

&
/' /'0'+ &
/
#
&
/. /..+ &
/
#

.&

&
/& % &
/
P%Q* / + &
/
#
Po obliczeniu wsprzdnych zrzutowanego obiektu moemy sprawdzi, czy znajduje si

on na obrazie. Obiekt znajduje si poza lew krawdzi ekranu, jeli jego prawa krawd
ma wsprzdn x mniejsz od zera; z kolei gdy lewa krawd obiektu ma wsprzdn x
wiksz ni szeroko ekranu, oznacza to, e znajduje si on w caoci poza praw krawdzi obrazu. Bierzemy zatem wsprzdn x obiektu, dodajemy lub odejmujemy jego szeroko i sprawdzamy, czy znalaz si za ktr z bocznych krawdzi. W zalenoci od
wyniku tego testu decydujemy, czy wczy, czy te wyczy jego widzialno.
79
;8&.

%% 4
7 &
/'0 &
/& <"NN &
/'U
&
/& M/'+,

8.3&
/
P=% &
=0%Q*/ 7 #
2

&%
2
Wszelkie akcje zwizane z aktualizacj pooenia obiektu mieszcz si wewntrz klauzuli tego wyraenia warunkowego. Przede wszystkim wczamy widzialno
( ) obiektu, poniewa znajduje si on na ekranie. Nastpnie przepisujemy obliczone wartoci wsprzdnych i skali do jego odpowiednich waciwoci.

83&
/
P=% &
=0%Q*/
#

%$4
/
P=% &
=0%Q*/' &
/'#
/
P=% &
=0%Q*/. &
/.#

% 4
/
P=% &
=0%Q*/'& /
P=% &
=0%Q*/.&
&
/& #

% $43
/
P=% &
=0%Q*
)#
2
2
2
2
Domykamy wszystkie nawiasy klamrowe, koczc skrypt i tworzenie wiata. Dugo

skryptu nie przekroczya 150 wierszy, za efekt trjwymiarowego wiata utworzonego
w caoci we Flashu jest fascynujcy.
Studium 3. Trjwymiarowe menu

Ostatni z prezentowanych przeze mnie przykadw to trjwymiarowe menu z przyciskami otwierajcymi adresy URL w nowych oknach przegldarki. Projekt ten moe
rwnie posuy jako galeria fotografii, prac lub inna prezentacja.
Otwrz plik demo_three1.swf, zapisany na pycie CD-ROM.
W tym przykadzie losowo rozmieszczamy w trjwymiarowej przestrzeni kilka napisw. Uytkownik moe porusza si w przestrzeni i wybiera napisy, ktre s jednoczenie przyciskami. Nie obracamy caego rodowiska, poniewa nie jestemy w stanie
przedstawia elementw menu pod rnymi ktami (rysunek 2.40).
Otwrz plik demo_three1.fla, zapisany na pycie CD-ROM.
80
Rysunek 2.40.
Ruchome elementy
menu rozrzucone
w przestrzeni
Rozpoczynamy demonstracj
Ta demonstracja zawiera bardzo ma liczb komponentw, za w jej mechanizmach
nie znajdziesz adnych sztuczek. Aby podkreli perspektywiczny charakter demonstracji, moesz utworzy rysunek ta, obejmujcy ca powierzchni obrazu. W takim przypadku pamitaj o tym, by punkt zbiegu perspektywy na rysunku ta pokrywa si
z punktem zbiegu perspektywy napisw (szczeglnie wana jest wsprzdna y punktu
zbiegu, ktra pokrywa si z lini horyzontu). Utwrz rwnie klip filmowy (o nazwie
), ktry bdzie zawiera elementy menu. W klipie tym umieciem dugie
dynamiczne pole tekstowe (takie, by miecio stosunkowo dugie nazwy elementw menu)
i powizaem je ze zmienn. Ponadto pod polem tekstowym utworzyem niewidzialny
przycisk, ktry po klikniciu otwiera wybrany adres URL w nowym oknie przegldarki.
Jak zwykle, oddzielny klip filmowy zawiera najwaniejsze czci kodu.
Skrypty
Jedynie w trzech miejscach tego pliku znajduj si skrypty. Pierwszym jest przycisk
wewntrz klipu filmowego , drugim s detektory zdarze tego klipu, za
trzecim s detektory zdarze klipu filmowego . Najwaniejszy skrypt mieci si
w trzecim z wymienionych miejsc; pozostae dwa zawieraj po kilka wierszy kodu.
Poniewa klip filmowy bdzie wielokrotnie klonowany, umieciem w nim
krtki skrypt, ktry wycza pierwotny klon tego klipu (ten, z ktrego bd duplikowane wszystkie nastpne). Ten pierwszy klon nie ma bra udziau w prezentacji, jedynie
da pocztek pozostaym klonom.
81

.3&
.

7
)*/ = /
=

)*/ 7 #
2
2
Gwna cz skryptu w detektorach zdarze klipu rni si nieco od kodu, z ktrym pracowalimy do tej pory. Rozpoczynamy od zadeklarowania liczby elementw
menu, ktre pojawi si na obrazie. Dla kadego z nich musimy zapamita takie informacje jak wywietlana nazwa, zwizany z ni adres URL oraz wsprzdne przestrzenne. Aby uporzdkowa te informacje, tworzymy tablic zawierajc oddzielny
obiekt dla kadego elementu menu. Kady z tych obiektw bdzie zawiera wszystkie
informacje o jednym elemencie menu.

&
$
/ /
-"#

& 7 &% & $.&)
&)
/
/7 O ./ /
#

$
1

&.
7 % "#%</ /
#%00

/
/7P%Q F% &
#
2
Nastpnie inicjalizujemy wywietlane nazwy elementw menu oraz zwizane z nimi

adresy URL. Moesz je wpisa bezporednio we Flashu lub wczyta z zewntrznego
pliku tekstowego. Bez wzgldu na sposb ich okrelenia, upewnij si, e skrypt przepisze wszystkie informacje do tablicy , z ktrej skorzystamy w dalszej
czci. W tym przykadzie zdefiniowaem dziesi dowolnych nazw elementw menu
i odpowiadajce im adresy URL.
.
$
/
/7P"Q* =C =#
/
/7P-Q* =H =#
/
/7P,Q* =J
7=#
/
/7PRQ* =E&
=#
/
/7P!Q* =K
77=#
/
/7P6Q* =C
.=#
/
/7PTQ* =O =#
/
/7P5Q* =V =#
/
/7PLQ* =O
=#
/
/7PSQ* =
&
=#
.3 & $.

/
/7P"Q* =)
W*) *&=#
/
/7P-Q* =)
W* *&=#
/
/7P,Q* =)
W*
7*&=#
/
/7PRQ* =)
W*&
*&=#
/
/7P!Q* =)
W*
77*&=#
/
/7P6Q* =)
W*)
.*&=#
/
/7PTQ* =)
W* *&=#
82

/
/7P5Q* =)
W* *&=#
/
/7PLQ* =)
W*
*&=#
/
/7PSQ* =)
W*&
&
*&=#
Po ustaleniu tych informacji musimy powieli element menu i ustali warunki pocztkowe. Nazwa kadego elementu i odpowiadajcy mu adres URL s przesyane do klonu
klipu filmowego, gdzie mog by nastpnie wywietlone i uyte w przycisku.
Przestrzenne wsprzdne elementw menu s inicjalizowane w specjalny sposb. Tworzony przez nas efekt wymaga, by elementy menu byy rozrzucone przed obserwatorem.
Oznacza to, e elementy naley rozmieci jedynie wzdu osi x i z. Dodaem rwnie
niewielki czynnik losowy dla wsprzdnej y, by zwikszy wraenie przestrzeni.
&%
$ &
7 % "#%</ /
#%00

&%

/
* /
*&
( = /
=0%8%
4

. 3
7
/
P= /
=0%Q*7 /
/7P%Q* #
% 7 8.. &)4&
.&
/
P= /
=0%Q* /
/7P%Q*#
.%1 7
/
/7P%Q*' (
)* +-"""6""#
/
/7P%Q*. (
)* +-""6"#
/
/7P%Q* (
)* +6""#
2
Pozostay jeszcze do zainicjalizowania wielkoci wpywajce na zmian pooenia elementw. Ponadto definiujemy pierwotn skal elementw menu. Bezwzgldna wielko wszystkich napisw (czyli ich wielko po odrzuceniu perspektywy) powinna by
taka sama; dziki temu nie bdziesz musia ledzi skali poszczeglnych napisw w tablicy .
1 &3

$%. $4.&)
/' ,56#
/. ,""#

R""#
$&. %
.

(
)*JA-L"#
.
4& &)'&4&

/& -"#
&3
4& 1'

/' "#

/ "#
&3
.

/
/ ,""#
2
Pozosta cz skryptu zwizanego z klipem mieci si w detektorze zdarzenia

. Kod ten zajmuje si przesuniciami elementw w przestrzeni i rzutowaniem ich na paszczyzn obrazu. W tym przykadzie nie wykonujemy adnych obrotw,
nie ma wic potrzeby ledzenia ktw obrotu ani obliczania ich sinusw i kosinusw.
83
Rozpoczynamy od zmodyfikowania przesuni wzdu osi x i z, zgodnie w wcinitymi

klawiszami sterujcymi. (Moesz rwnie pozwoli uytkownikom przesuwa napisy
wzdu osi y, jeli nie uwaasz, e zbytnio skomplikuje to nawigacj).

9

.7% 4& 1' &4
.

/' ? .*? .*E9D+

/&? .*? .*@ABCD+

/&#

/ ? .*? .*FGH+

/&? .*? .*IJ+

/&#
Po odczytaniu informacji zwizanych z przesuniciem punktw, przechodzimy do ptli,

w ktrej przesuwamy poszczeglne punkty i rzutujemy je na paszczyzn obrazu. Pooenia przesunitych punktw umieszczamy najpierw w dwch pomocniczych zmiennych, i , a dopiero potem przepisujemy je do tablicy .
4
>
%.

.
7 % "#%</ /
#%00

>
1'

' /
/7P%Q*'0

/'#

/
/7P%Q*0

/#

%
&.
/
/7P%Q*'
'#
/
/7P%Q*
#
Po przesuniciu punktw sprawdzasz pierwszy warunek widzialnoci. Jeli punkt znajduje si z tyu obserwatora, nie ma potrzeby rzutowania go i wywietlania. Jeli jednak
znajduje si z przodu obserwatora, musimy dodatkowo sprawdzi, czy znajduje si na
obrazie, czy poza nim.
;8&.
1.
.

7
<

%
8.3&

/
P= /
=0%Q*/ 7 #
2

&%
2
Wewntrz klauzuli skrypt oblicza pooenie i skal zrzutowanego elementu. Posiadajc te informacje, moesz sprawdzi, czy element menu mieci si na obrazie. Poniewa wsprzdna y elementu nigdy si nie zmienia, podczas rzutowania wsprzdnej
moemy skorzysta bezporednio z informacji zawartej w tablicy .

%% 4
.
8 & &.
% & 8
1 %% 4 8

3& %% & &
$&.
..
&
/
0
#
&1

&
/' /'0
'+ &
/
#
&
/. /. /
/7P%Q*.+ &
/
#
& 4

&
/& /
/ + &
/
#
84

Sprawdzamy, czy element znajduje si na obrazie Flasha, stosujc t sam technik co
poprzednio. Jeli prawa krawd elementu jest wysunita poza lew krawd obrazu,
bd te lewa krawd elementu jest wysunita poza praw krawd obrazu, moemy
by pewni, e obiekt znajduje si poza obrazem.
;8&.
%% 4 43
7 &
/'0 &
/& <"NN &
/'U
&
/& M/'+,

8.3&
/
P= /
=0%Q*/ 7 #
2

&%
2
Skoro dotarlimy do tego miejsca struktury decyzyjnej, oznacza to, e element menu
znajduje si gdzie na obrazie. Musimy zatem wczy jego widzialno (waciwoci
przypisa warto ) oraz zaktualizowa pozycj i inne waciwoci.

%% 4 83&%
/
P= /
=0%Q*/
#

%1
/
P= /
=0%Q*/' &
/'#
/
P= /
=0%Q*/. &
/.#

% 4
/
P= /
=0%Q*/'& /
P= /
=0%Q*/.&
&
/& #

. $43
/
P= /
=0%Q*
)
#
2
2
2
2
Po zamkniciu wszystkich nawiasw klamrowych moesz przystpi do testowania

przykadu.
Inny wariant
Istnieje wiele metod udoskonalenia interaktywnoci w prezentowanym menu. W tym
wariancie wprowadzimy nawigacj za pomoc kursora myszy.
Przesuwajc kursor myszy w gr i w d, uytkownik moe przesuwa si w ty i w przd

(a raczej w gb) wiata; przesuwajc kursor w prawo i w lewo, moe przesuwa si na boki
(rysunek 2.41).
85
Rysunek 2.41.
Przesuwajc
kursor myszy,
moesz porusza si
w trjwymiarowym
wiecie
Otwrz plik demo_three2.fla, zapisany na pycie CD-ROM.
Mechanizmy, jakie utworzylimy do tej pory, mona atwo zaadaptowa do tego wariantu.
Musimy jedynie zmodyfikowa kilka wierszy kodu, obliczajcych przyrosty przesuni,
ktre do tej pory robiy to na podstawie wykrytych wcini klawiszy. Teraz przyrosty
powinny by obliczane na podstawie pooenia kursora myszy.
Bardzo wane jest, by nawigacja bya intuicyjna. Stwierdziem, e najlepszym rozwizaniem bdzie przesuwanie wiata wzdu osi x w kierunku przeciwnym do pooenia
kursora. Gdy zatem kursor znajduje si po lewej stronie rodka ukadu wsprzdnych,
przyrost przesunicia w poziomie (wzdu osi x) powinien by dodatni, by napisy przesuway si w prawo. Z kolei gdy kursor znajduje si po prawej stronie obrazu, przyrost powinien by ujemny, by uzyska ruch w lewo. Takie zachowanie realizujemy za pomoc
jednego prostego wiersza:

/' /'/
*/' #
Gdy kursor znajduje si nad rodkiem ukadu wsprzdnych, przyrost przesunicia

w gb (wzdu osi z) powinien by ujemny, tak aby napisy przybliay si do obserwatora. Napisy powinny si oddala od obserwatora, gdy kursor znajduje si poniej rodka ukadu wsprzdnych, co uzyskujemy przez dobranie dodatniego przyrostu przesunicia wzdu osi z. Poniszy wiersz realizuje podane zachowanie:

/ /
*/. /.#
Gdy zastpisz poprzednie wyraenia powyszym kodem, zauwaysz, e elementy menu

poruszaj si zbyt szybko. Przyrosty maj zbyt due wartoci, poniewa pooenie kursora
na obrazie jest wyraane w pikselach. Aby elementy menu poruszay si wolniej, musimy
podzieli powysze rnice przez pewien wspczynnik. Jego warto zaley od tego, czy
chcesz uzyska sterowanie energiczne, czy bardziej spokojne. Poeksperymentuj z tym
86

wspczynnikiem, by znale warto, ktra najbardziej ci odpowiada. Aby unika wartoci
numerycznych w kodzie, w detektorze zdarzenia
definiuj parametr

,
ktrego zadaniem jest wanie regulacja prdkoci sterowania.
$&. %3&..
4&
1 ..

/
,"#
Gdy mamy zdefiniowany ten parametr, moemy zmodyfikowa oba wiersze obliczajce przesunicia.
.7% 4& 1' 1 ..

/' /'/
*/'
/
#

/ /
*/. /.
/
#
I to wszystko!
Oto kolejny wariant jeden z wielu wartych zbadania. Uoylimy w nim wszystkie
elementy menu wzdu osi z i umoliwilimy uytkownikowi przesuwanie si pomidzy
nimi. Klawisze strzaek w gr i w d steruj ruchem wzdu osi z, za kursor myszy
pozwala na wykonywanie nieznacznych przesuni wzdu osi x i y (rysunek 2.42).
Rysunek 2.42.
Moesz tworzy
przerne warianty
sterowania
Dalsze przykady
Na pycie CD-ROM umieciem jeszcze kilka przykadw zastosowania programowanej
grafiki trjwymiarowej we Flashu. Jedna z demonstracji to obracajce si trjwymiarowe
menu z prostymi elementami nawigacyjnymi witryny. W innym pliku znajdziesz generator
terenu z polem si oraz kulk poruszajc si w tym polu. Mam nadziej, e badanie
tych plikw sprawi ci tyle radoci, ile mnie sprawio ich tworzenie. Pliki z tymi przykadami
znajdziesz w katalogu rozdzial_2/_Dalsze_przyklady.
87
Podsumowanie
Gratulacje nauczye si tworzy nowe, fascynujce efekty. Bez wtpienia pojawi
si u ciebie pytania i problemy zwizane z tworzeniem podobnych efektw. By moe
zechcesz je omwi z innymi czonkami spoecznoci flashowych. Jeli potrafisz posugiwa si jzykiem angielskim, jednym z dobrych miejsc dla takich dyskusji jest witryna Were-Here (www.were-here.com). Na forum matematycznym tej witryny moesz
podyskutowa z wiodcymi twrcami prezentacji flashowych; s oni znani z tego, e
przedyskutowali ju niemal wszystkie aspekty tworzenia grafiki trjwymiarowej.
Renderowane obiekty trjwymiarowe

W drugiej czci tego rozdziau poznasz magi renderowanych obiektw trjwymiarowych. Poznasz moliwoci, jakie daje poczenie technik Flasha z realizmem grafiki
trjwymiarowej. Przedstawione tu informacje powinny zainspirowa ci do tworzenia
w przyszoci wasnych, znakomitych projektw tego typu.
Oprogramowanie niezalenych producentw

Na rynku istnieje wiele aplikacji do tworzenia i renderowania grafiki trjwymiarowej. Dwa
programy szczeglne nadaj si do tworzenia obiektw trjwymiarowych na potrzeby Flasha. Pierwszy z nich nosi nazw Swift 3D, a jego producentem jest firma Electric Rain
(www.swift3d.com), natomiast drugi to Vectra3D, stworzony przez firm Idea Works
(www.vectra3d.com). Te dwa niedrogie programy s wspaniaymi narzdziami dla projektantw pracujcych we Flashu. Pozwalaj one modyfikowa i animowa trjwymiarowe
obiekty, importowa pliki z bardziej zaawansowanych (i znacznie droszych) programw 3D, takich jak 3ds max (wczeniej wystpujcy pod nazw 3D Studio Max) czy
LightWave 3D, a take importowa grafik wektorow z programw ilustracyjnych takich jak Macromedia FreeHand. Co waniejsze, s to jedyne dwie znane mi aplikacje,
ktre potrafi eksportowa pliki w formacie SWF. W obu przypadkach eksportowane
pliki SWF zawieraj wektorowe rysunki, ktre mona umieci w oddzielnych ujciach
kluczowych filmu Flasha (tworzc tak zwan animacj klatka po klatce).
Zarwno program Swift 3D, jak i Vectra3D jest dostpny w wersjach dla Windows
i Macintosha. Swift 3D jest ponadto dostpny jako modu rozszerzajcy (plugin) dla
programu 3ds max (Windows) i LightWave 3D (Windows i Macintosh); Vectra 3D wystpuje jako modu rozszerzajcy jedynie dla programu 3ds max dla Windows.
Poza powyszymi cechami obu programw nie czy zbyt wiele podobiestw. Praca w kadym z nich przebiega zupenie inaczej.
Swift 3D
Program Swift 3D korzysta z interfejsu typowego dla aplikacji 3D (rysunek 2.43).
88
Rysunek 2.43.
Interfejs programu
Swift 3D
Program Swift 3D udostpnia trzy metody tworzenia animacji. Moesz importowa

trjwymiarow siatk utworzon w programie 3D Studio Max (format 3DS); moesz
importowa wektorowe ksztaty z programu ilustracyjnego, takiego jak FreeHand (format EPS) i konwertowa je na trjwymiarowe obiekty za pomoc narzdzi edycyjnych
programu Swift 3D; moesz wreszcie od podstaw tworzy trjwymiarowe obiekty
(w tym ksztaty podstawowe, takie jak sfery, stoki i piercienie oraz tekst) wewntrz
programu.
Intuicyjny interfejs programu pozwala edytowa kolory, typy fazowania, gbi, obroty
i pooenia. Dostpne s predefiniowane schematy kolorw i sekwencje animacyjne,
z ktrych moesz korzysta, po prostu przecigajc je i upuszczajc. Program oferuje
rwnie interesujce rozwizanie obrotow kamer umoliwiajc animowanie
kamery, a nie obiektu. (Dobry samouczek dotyczcy stosowania tej funkcji znajdziesz
pod adresem http://www.erain.com/tutorials.asp).
Vectra3D
Interfejs programu Vectra3D rni si od tego, ktry zobaczylimy w Swift 3D (rysunek 2.44).
Program ten nie pozwala tworzy obiektw trjwymiarowych od podstaw ani nie oferuje
gotowych schematw animacji, zatem praca w nim wyglda zgoa inaczej. Program wywietla obiekt trjwymiarowy jako grup punktw. Aby zobaczy wypenienia obiektu,
musisz go wyrenderowa.
89
Rysunek 2.44.
Interfejs programu
Vectra3D
Studium 1. Myliwiec
Moim pierwszym przykadem jest animacja futurystycznego myliwca, ktry pikuje z nieba,
wyrwnuje poziom lotu, oddaje kilka strzaw, a nastpnie wykonuje zwrot w lewo i znika z pola widzenia. Animacja ta jest zwiastunem wikszego projektu, ktry nazwaem interfejsem Gwiezdne wrota.
Zobacz animacj zapisan w pliku Spaceship_final.swf na pycie CD-ROM (rysunek 2.45).
Ukoczony projekt moesz te zobaczy pod adresem www.sdflash.net/trailer.htm.
Rysunek 2.45.
Animacja
zapisana w pliku
Spaceship_final.swf
90

Animacja jest stosunkowo prosta i korzysta z niewielkiej liczby akcji. Jest to dowd na
to, e dla uzyskania efektu trjwymiarowoci we Flashu nie musisz tworzy ton kodu.
Planowanie animacji
Zanim przystpisz do realizacji projektu, powiniene naszkicowa najwaniejsze momenty trjwymiarowej animacji. Gdy zobaczysz ujcia animacji na papierze, bdziesz
mg dokadnie przeanalizowa akcj i zdecydowa, ktre elementy naley zrobi w programie renderujcym, a ktre mona zreazliowa bezporednio we Flashu. Tym sposobem zaoszczdzisz mnstwo czasu i frustracji na dalszych etapach produkcji.
Staraj si ogranicza liczb uj renderowanych w zewntrznej aplikacji. Pomoe ci to
zminimalizowa rozmiar wynikowego pliku Flasha. (Kade wyrenderowane ujcie animacji
to oddzielny rysunek, wic takie rozwizanie wpywa na szybki wzrost rozmiaru pliku).
Rysunek 2.46 przedstawia scenariusz obrazkowy mojej animacji.

Rysunek 2.46.
Rczny szkic
najwaniejszych
uj animacji
Ze scenariusza obrazkowego jasno wynika, e Flash miaby problemy z utworzeniem

obracajcego si myliwca gdy ten obraca si z niemal pionowej pozycji i przyjmuje
pozycj frontaln, a nastpnie odbija w lewo.
Flash nie jest w stanie samodzielnie wywietli tych rnych widokw, poniewa nie
potrafi zasania jednych i odsania innych czci obiektu. W zwizku z tym podzielimy zadania animacyjne pomidzy Flasha i program Swift 3D w nastpujcy sposb:
1. Myliwiec zmienia pozycj z pionowej na poziom i wyrwnuje poziom lotu
(Swift 3D).
2. Podczas wykonywania manewru obrotu myliwiec schodzi w d i zblia si do
obserwatora (Flash).
3. Myliwiec strzela w stron obserwatora (Flash).
4. Myliwiec odbija w lewo (Swift 3D).
5. Podczas odbijania myliwiec wznosi si i ucieka do prawego grnego naronika
ekranu, po czym znika (Flash).
Omwmy sekwencj tworzon w programie Swift 3D.
91
Rozpoczynamy projekt w programie Swift 3D

W programie Swift 3D otwrz plik Spaceship_Final.t3d, zapisany na pycie CD-ROM
(rysunek 2.47). Jest to plik tego programu; na pycie CD-ROM znajdziesz rwnie prbn
wersj programu Swift 3D.
Rysunek 2.47.
Gotowy obiekt
programu Swift 3D,
ktry wyeksportujemy
do Flasha
Kliknij ikon Play Animation (symbol trjkta) w lewym dolnym naroniku listwy czasowej, by sprawdzi przebieg animacji. Zobaczysz, jak myliwiec z pozycji pionowej
wyrwnuje lot do poziomu, a nastpnie odbija w lewo. Dokadnie taki ruch myliwca
opisalimy na wczeniejszej licie.
Zwr uwag, e aktywna kamera nosi nazw camera01. Gdy program Swift 3D importuje plik 3D Studio, dziedziczy pewne ustawienia tego programu, takie jak kt widzenia kamery, wiata i kolory. Jeli jeste uytkownikiem programu 3D Studio, jest to
dla ciebie due uatwienie, poniewa moesz przygotowa kompletny obiekt przed
przystpieniem do pracy w programie Swift 3D.
W Internecie moesz znale mnstwo darmowych siatek trjwymiarowych obiektw,
przeznaczonych dla uytkownikw, ktrzy nie maj czasu lub zdolnoci do przygotowywania
wasnych modeli. Sprawd witryny www.3dcafe.com i www.highend3d.com. Uywany przez
nas model znalazem na witrynie www.3dcafe.com.
Jak wida na rysunku 2.48, nasza animacja zawiera trzy ujcia kluczowe. Operacje obrotu i pochylenia modelu w poszczeglnych ujciach kluczowych wykonaem za pomoc kulowego manipulatora obiektw (Object Trackball), znajdujcego si w lewym dolnym naroniku interfejsu.
92
Rysunek 2.48. Uoenie myliwca w trzech ujciach kluczowych
Gdy animacja jest ju zdefiniowana, czas na wyeksportowanie pliku SWF. Przystpujc

do tego procesu, powiniene rozway dwa czynniki liczb wieloktw uywanych
przez modu renderujcy do przedstawienia kadego ujcia oraz typ wypenienia. Im
bardziej zoony typ wypenienia wybierzesz, tym wicej szczegw bdzie zawiera
tworzony obiekt i tym wikszy bdzie rozmiar pliku dla kadej klatki6. Rysunek 2.49
dosadnie ilustruje ten problem. Poeksperymentuj, by znale kompromis pomidzy liczb
szczegw a rozmiarem pliku.
Rysunek 2.49.
Ten sam obiekt
wyeksportowany
z rnymi
ustawieniami
wypenienia
Otwrz plik Spaceship_rendered.swf zapisany na pycie CD-ROM. Jest to animacja

myliwca wyeksportowana przez program Swift 3D.
Flash nie jest programem, w ktrym mona umieszcza zoone obiekty trjwymiarowe.
Zaimportuj obiekt zoony z 70 000 wieloktw, a zrozumiesz, co mam na myli
oczywicie pod warunkiem, e w ogle uda ci si wczyta tak animacj! Znalezienie
kompromisu pomidzy rozmiarem pliku i jakoci obrazu wymaga cierpliwoci czasem
bdziesz musia wyrenderowa obiekt kilka razy, zanim znajdziesz optymalne rozwizanie.
Aby ustawi typ wypenienia w programie Swift 3D, przejd na zakadk Preview and Export Editor, w polu
Output Options wybierz opcj Fill Options, a nastpnie z listy Fill Type wybierz odpowiedni metod
wypenienia przyp. tum.
93
Finalizujemy projekt we Flashu

Po utworzeniu i wyrenderowaniu trjwymiarowego obiektu poza Flashem, moemy wzbogaci go we Flashu czc realizm grafiki trjwymiarowej z wydajnymi rozwizaniami grafiki wektorowej Flasha.
Otwrz plik Spaceship_final.fla zapisany na pycie CD-ROM (rysunek 2.50).
Rysunek 2.50.
Kontynuujemy prace
nad projektem
we Flashu
Importujemy animacj
We Flashu rozpocznij prac od utworzenia klipu filmowego o nazwie *
,
w ktrym umie wyrenderowany obiekt trjwymiarowy. Nastpnie zaimportuj animacj SWF wygenerowan w programie Swift 3D, umieszczajc j na domylnej warstwie
klipu. Warstwie tej nadaj nazw
. Po zaimportowaniu animacji warstwa ta
powinna zawiera 34 ujcia kluczowe (rysunek 2.51).
Pomie silnikw i strzay dziaka
Nastpnie utwrz symbol graficzny (
zawierajcy koo wypenione gradientem radialnym. Posuy on do utworzenia efektw pomieni silnikw odrzutowych oraz strzaw
dziaka. Umie go na warstwie + klipu *
. Wane jest, by
warstwa ta znajdowaa si pod warstw
, poniewa pomie silnikw musi si
znajdowa za myliwcem. Zmie skal symbolu, tak aby wyglda jak realistyczny ar
emitowany z silnikw (rysunek 2.52). Stosujc t technik, moesz nawet uzyska efekt
podobny do tego z Gwiezdnych wojen myl tu o biao-niebieskiej unie wydobywajcej si z silnikw myliwca Millenium Falcon, ktrym latali Han Solo i Chewie.
94
Rysunek 2.51.
Kolejne ujcia
kluczowe animacji
myliwca
Rysunek 2.52.
Zmie skal
symbolu, aby
dopasowa un
do wymiarw
myliwca
W pierwszych dwudziestu klatkach klipu filmowego myliwiec porusza si po linii prostej, zatem za pomoc zwykej automatycznej animacji mona sprawi, by pomie poda za silnikami. W ostatnich 15 klatkach myliwiec porusza si mniej regularnie
i ledzenie go staje si bardziej kopotliwe. W zwizku z tym w ostatnich 15 klatkach
umie ujcia kluczowe, animujc pomie silnikw metod klatka po klatce (rysunek
2.53). Kolejne ujcia kluczowe zawieraj przeskalowane i obrcone klony symbolu (
.
Rysunek 2.53.
Animacja pomieni
stanowi kombinacj
automatycznej animacji
ruchu i animacji
klatka po klatce
Nastpnie przejd do tworzenia strzaw dziaek laserowych, kierowanych w stron

obserwatora. Rozpocznij od strzau prawego (patrzc od strony obserwatora) dziaka.
Utwrz dla niego symbol klipu filmowego o nazwie (
,, umie na rodku
klipu klon symbolu (
i zmie skal klonu (wysoko = 13,6; szeroko = 13,6).
W czwartej klatce utwrz nowe ujcie kluczowe i ponownie zmie skal klonu lasera
95
(wysoko = 272; szeroko = 272) oraz jego wsprzdn x zmie na 128. Wreszcie
w sidmej klatce utwrz trzecie ujcie kluczowe, w ktrym ponownie zmodyfikuj laser
(wysoko = 340; szeroko = 340; wsprzdna x = 176). Modyfikujc wsprzdn x,
zwikszysz realizm efektu w wynikowym filmie.
W ujciu kluczowym w klatce numer 7 umie nastpujc akcj:

OJ .-#
Aby utworzy efekt strzau z lewego dziaka, zduplikuj poprzednio utworzony strza i nadaj
duplikatowi nazw (
,. Nastpnie w duplikacie zmodyfikuj wsprzdn x lasera w ujciach 4. i 7., zmieniajc w panelu Info wartoci wsprzdnej z ujemnych na dodatnie. Dziki temu strza lewego dziaka bdzie si przemieszcza w przeciwn stron.
Dwik
Ostatnim krokiem zwizanym ze strzaem dziaek jest dodanie dwiku strzau. Zwr
uwag, e dwik ten umieciem tylko w jednym z dwch klipw filmowych strzaw.
Poniewa dziaka strzelaj rwnoczenie, nie ma potrzeby umieszczania dwiku w obu
klipach. Preferuj sterowanie dwikiem za pomoc skryptw, poniewa obiekt Sound
Flasha 5 oferuje znakomite moliwoci w tej dziedzinie. (Wicej informacji na temat
dwiku we Flashu znajdziesz w rozdziale 4.).
Zwykle wszystkie uywane w filmie dwiki definiuj w pierwszym ujciu gwnej listwy czasowej. To uatwia wyszukiwanie i usuwanie ewentualnych bdw w kodzie.
Symbole dwikw zawarte w bibliotece udostpniam skryptom, definiujc dla kadego
z nich identyfikator eksportu w oknie Symbol Linkage Properties. Zdefiniowany tam
identyfikator funkcjonuje tak jak zewntrzna nazwa klipu filmowego za jego pomoc
moesz odnosi si w swoich skryptach do symboli zawartych w bibliotece. Aby uatwi sobie zapamitanie identyfikatorw, nadaj im takie same nazwy, jak nazwy symboli wewntrz biblioteki.
W pierwszym ujciu klipu (
, umie nastpujc akcj:
/
*
K*

#
Przygotowanie klipu myliwca

Wrmy jeszcze do prac nad klipem filmowym *
. Ponad warstw
$
utwrz now warstw o nazwie
. Dziaka powinny wystrzeli, gdy myliwiec
wyrwna swj lot, co oznacza, e strzay musz si pojawi w 19. klatce klipu filmowego.
Utwrz w tej klatce puste ujcie kluczowe. W nim umie, dokadnie na wylocie dziaek,
dwa klony klipw filmowych przedstawiajcych strzay lasera. Rysunek 2.54 przedstawia
wygld ujcia kluczowego w 19. klatce klipu.
W ujciach klipu filmowego myliwca umiecimy kilka prostych akcji, ktre uatwi sterowanie tym klipem w dalszej czci projektu. W tym celu utwrz now warstw o nazwie
96
Rysunek 2.54.
Myliwiec w chwili
rozpoczcia strzau

+ i na niej umie dwa ujcia kluczowe, odpowiednio w klatkach 19. i 35.
W kadym z tych uj kluczowych umie akcj . (Na razie moe si to wydawa
niezrozumiae, lecz wszystko si wyjani, gdy poczymy wszystkie elementy animacji).
czymy wszystkie elementy

Teraz, gdy klip filmowy myliwca jest ju gotowy, czas poczy wszystkie elementy
na gwnym obrazie filmu. W scenie 1. utwrz now warstw nad warstw

i nadaj jej nazw
. Aby uatwi sobie wyrwnywanie elementw, moesz posuy si miark i liniami pomocniczymi Flasha 5. (Jeli jeste uytkownikiem programu FreeHand, pewnie nieraz ju uywae tych narzdzi).
Rysunek 2.55 przedstawia lini pomocnicz umieszczon w centralnej czci obrazu.
Rysunek 2.55.
Linia pomocnicza
pomoe ci
w animowaniu
myliwca
Gdy jest aktywna warstwa

, zaznacz w bibliotece klip filmowy *

i przecignij go na obraz. W panelu Instance nadaj jego klonowi nazw
.
Do nazw klonw klipw filmowych zawsze dodaj kocwk (movie clip). W ten
sposb mog atwo pozna, czy odnosz si do klipu filmowego, czy do zmiennej.
Zwiksza to rwnie czytelno kodu, co ma due znaczenie podczas wyszukiwania
ewentualnych bdw.
97
Zmie skal klipu do 10 procent pierwotnej wielkoci, a nastpnie umie go w takim

miejscu obrazu, by jego rodek znalaz si dokadnie na linii pomocniczej. Myliwiec
powinien znajdowa si w pobliu grnej krawdzi obrazu, na przykad w punkcie o takich wsprzdnych:
XW,R5*YW"*-
W 20. klatce warstwy

utwrz ujcie kluczowe. W tym momencie myliwiec
zakoczy nurkowanie i wyrwna lot.
Gdy umiecisz klip filmowy myliwca na obrazie Flasha, w rodowisku edycyjnym cay
czas jest widoczne tylko pierwsze ujcie klipu. To utrudnia waciwe uoenie klipu,
poniewa musisz sobie wyobrazi ujcie klipu, ktre bdzie wywietlane w danym
momencie w wynikowym filmie. Moesz jednak posuy si sztuczk. Zaznacz klip
*
i edytuj go. Utwrz now warstw na szczycie stosu warstw. Skopiuj
myliwiec z 19. klatki i umie go w pierwszym ujciu nowej warstwy.
Wrmy jednak do edycji gwnej listwy czasowej. Rysunek 2.56 przedstawia wygld
klipu w 20. klatce.
Rysunek 2.56.
Klip myliwca podczas
edycji w 20. klatce
animacji
W klatce numer 20 zwiksz skal klipu do 65 procent i zmie jego wsprzdne na nastpujce:
XW-,L*,
YW6!*"
W panelu Frame wybierz automatyczn animacj ruchu (Motion Tween) i pozostaw domylne ustawienia pozostaych opcji. Nastpnie utwrz kolejne ujcie kluczowe w klatce
numer 40. Tam zwiksz skal myliwca do 150 procent i przesu go do wsprzdnych:
XWRL*S
YW!R*S
Ponownie wybierz automatyczn animacj ruchu, pozostawiajc jej domylne parametry. W tej klatce musimy rwnie wstawi akcj, ktra wznowi odtwarzanie klipu myliwca po tym, jak zatrzyma si na akcji w klatce numer 19 listwy czasowej klipu. Na gwnej listwie czasowej utwrz now warstw i nadaj jej nazw
+
(skrypty uj).
98

W ujciu kluczowym w klatce numer 1 umie poniszy skrypt, ktry tworzy obiekty
Sound dla dwikw uywanych w filmie.

K K#

K*
&)K=
=#
'K K#
'K*
&)K='=#
Aby odtworzy dwik nadlatujcego myliwca, utwrz nowe ujcie kluczowe w klatce
numer 6 i umie w nim nastpujc akcj:
'K*

#
Aby sterowa klipem myliwca, utwrz puste ujcie kluczowe w 40. klatce warstwy

+ i umie w nim tak akcj:
/
* )/&*
OJ .,"#
Tym sposobem wznowimy odtwarzanie klipu filmowego w miejscu, w ktrym myliwiec

odbija w lewo.
Aby uatwi sobie prawidowe uoenie myliwca w nastpnym ujciu kluczowym
(w 54. klatce), zastosuj t sam sztuczk co poprzednio w klipie myliwca skopiuj
rysunek z 35. klatki i wklej go do pierwszej klatki klipu (rysunek 2.57). (Pamitaj, by
po zakoczeniu edycji usun z klipu pomocnicze kopie myliwca).
Rysunek 2.57.
Tymczasowo
kopiujc rysunek
z odpowiedniej klatki
klipu, uatwisz sobie
umieszczenie
myliwca
w odpowiednim
miejscu
Na gwnej listwie czasowej utwrz nowe ujcie kluczowe w klatce numer 54 warstwy

. Zwiksz skal klipu do 300 procent i nadaj mu nastpujce wsprzdne:
XW,6,*L
YWR!5*"
Wreszcie, w 60. klatce warstwy

utwrz ostatnie ujcie kluczowe i przesu
klip do wsprzdnych:
XWS*L
YW!SS*"
99
I to ju wszystko. Cho to studium nie jest skomplikowane z programistycznego punktu

widzenia, zawiera kilka aspektw wartych przemylenia.
W tym studium poznae podstawy korzystania z trjwymiarowych obiektw, lecz to
jeszcze nie koniec. Poka teraz, jak mona stosowa trjwymiarowe obiekty w wikszym projekcie.
Studium 2. Interfejs Gwiezdne wrota

Fantastycznonaukowy film Gwiezdne wrota zainspirowa mnie do utworzenia kolejnego
projektu, ktry nazwaem interfejsem Gwiezdne wrota (Stargate Interface). Prezentowany
tu interfejs to prototyp, lecz moesz w nim zobaczy, co mona osign za pomoc nieco
wikszej iloci kodu ActionScript oraz mnstwa wyobrani. W czasie, gdy ksika ta
znajdzie si na pkach, projekt powinien by dostpny pod adresem www.sdflash.net.
Tematem przewodnim witryny s okrge wrota z omioma symbolami, gwiezdny nawigator (Star Navigator) ustawiajcy symbole dla poszczeglnych sekwencji kodu oraz
menu z szecioma opcjami. Kada opcja menu jest powizana z sekwencj kodu, zoon z czterech symboli, ktre musz by aktywowane przez wrota, by przej do odpowiedniej podstrony. Symbole s wyrniane przez gwiezdny nawigator, ktry wyszukuje je i blokuje je we wrotach. Po zablokowaniu wszystkich symboli w sekwencji
kodu, film przechodzi do strony odpowiadajcej wybranej opcji.
Otwrz plik Stargate.swf zapisany na pycie CD-ROM, by zobaczy opisywany prototyp
projektu.
Wszystkie trjwymiarowe obiekty projektu powstay w programie Swift 3D. Same wrota
zaprojektowaem jako paski rysunek wektorowy w programie FreeHand, a nastpnie
zaimportowaem go do programu Swift 3D. Wszystkie trjwymiarowe symbole wrt
sprawiy, e powsta plik dosy sporych rozmiarw, lecz zdecydowaem si kontynuowa projekt ze wzgldu na zadowalajce rezultaty.
Interfejs skada si z czterech wsppracujcych ze sob klipw filmowych (rysunek 2.58).
Inicjalizacja
Wszelkie czynnoci nawigacyjne rozpoczynaj si w menu, gdzie uytkownik wybiera
jedn z dostpnych opcji. Z kad z opcji jest zwizana inna sekwencja kodu, zoona
z czterech symboli. Poszczeglne sekwencje s zdefiniowane w szeciu tablicach na pocztku filmu:
. O .6858!8R#

. O .R868T85#
7 ) . O .!8-868R#
& . O .,86858R#

7 . O .,8T8-8R#
&
&
. O .-868,8T#
100
Rysunek 2.58.
Ukad elementw
nawigacyjnych
Tablice te steruj caym schematem animacji. Ponadto na pocztku filmu zdefiniowaem pewne zmienne, ktre rwnie maj kluczowe znaczenie w sterowaniu interfejsem:

. &%
." "#

. &%
.- "#

& . &%
., "#

&
. &%
.R "#
7%3&

.8
$.&
&). &% 1.

#

#
Wybr opcji z menu

Gdy uytkownik kliknie jeden z przyciskw w menu, dwie strzaki ustawiaj si na
wskazanej pozycji. W chwili kliknicia ustalana jest warto pomocniczej zmiennej
okrelajcej miejsce, w ktrym strzaki si zatrzymaj. Gdy strzaki dotr do celu, wykonywany jest poniszy skrypt:
.8&. 3

7
)*
= =
% .
& %
&. .&)
%3&.&)&
.
7&
"#&
< R#&
00
/
P=.=0&
Q /
* .P
)*&
Q#
2
&)
%3 .. &%
/
*
-#
&) .
.. &%
/
*
/&*&
"#
101

.% .

/
*
/&* .#
.

7 %
/
*

/&* =K.
&

******=#

#
2
Gwiezdny nawigator
Jak wida w powyszym kodzie, w tym momencie aktywowalimy gwiezdny nawigator.
W nim zdefiniowaem funkcj, do ktrej odwouj si za kadym razem, gdy strzaki
mijaj symbol. Oto ta funkcja:

& .% .

7&
7&K
&&
;8&.% .%
&..&.
&3

7/
P=.=0&
Q &ZZ/
*
-
.

/
*

/&* =K.=0/
*
0=&
******=#

.% .&)$
/
*

/&* .#

.% %3&
.

J
./
*
/&P=&=0&0=/&=Q8/ 8
#
/
*&*

#
&
00#

#

7
%

. 1 . &%
2 7/
P=.=0&
Q &ZZ/
*
,
/
*

/&* /
*

/&* 0=[K.=0/
*
0=
&
******=#
/
*

/&* .#

J
./
*
/&P=&=0&0=/&=Q8/ 8
#
/
*&*

#
&
00#

#
2 7/
P=.=0&
Q &ZZ/
*
R
/
*

/&* /
*

/&* 0=[K.=0/
*
0=
&
******=#
/
*

/&* .#

J
./
*
/&P=&=0&0=/&=Q8/ 8
#
/
*&*

#
&
00#

#
2 7/
P=.=0&
Q &ZZ/
*
!
/
*

/&* =K.=0/
*
0=&
******[E &) \ &
&

]]]]]=#
/
*

/&* .#

J
./
*
/&P=&=0&0=/&=Q8/ 8
#
/
*&*

#
&
00#

#
2
2
Za kadym razem gdy strzaki docieraj do symbolu, odwouj si do tej funkcji, podajc warto symbolu jako argument, w taki sposb:
102

7&K
&-#
-%

&38
$
. %&
Po znalezieniu symbolu aktywuj klip filmowy gwiezdnych wrt (

). Ponownie korzystam z nieocenionej akcji , definiujc dwie nastpne funkcje.
Pierwsza z nich obsuguje pierwsze trzy symbole w sekwencji, za druga zajmuje si
ostatnim, czwartym symbolem w sekwencji kodu. Podzia ten wynika z faktu, e w przypadku ostatniego symbolu wykonywane s nieco inne akcje. Oto te dwie funkcje:
7&% .&)
&). &%
7&
7&K

.8. 8
8&
7/
P=.=0.Q . ZZ/
*

.% 3
4 . .&)
&)
/
*

/&P& 0=/&=Q*
OJ .-"#
/
*
&*

#
$
.

/
*
/&* .#
/
*
00#

#
2
2
7&%

. &%
$ 4 $1& $ 37&%3
7&
7&K

,.8. 8
8&
7/
P=.=0.Q . ZZ/
*

/
*

/&P& 0=/&=Q*
OJ .-"#
/
*
&*

#
&3
&%$1.
/
*
OJ .=

=#
/
*
00#

#
2
2

#
Te funkcje s wywoywane w klipie filmowym

i uruchamiaj odpowiednie
elementy interfejsu. Wartoci argumentw, ktrymi operujemy, zale od pooenia
symboli na gwiezdnych wrotach oraz strzaek blokady, znajdujcych si obok nich. Oto
akcje zawarte w jednym z uj kluczowych:
. 7&% .&)
&).
7&K

"8-8-8^
^#
7&K

-858,8^)
^#
7&K

,868R8^
^#
. 7&%

8&
.
7&K

,R8R8!8^ 7
^#
W tym miejscu koczy si sekwencja kodu. Teraz czas na rozpoczcie sekwencji podry.
Sekwencja podry
W sekwencji podry gwiazda jest lokalizowana w podobny sposb, jak urzdzenie GPS
lokalizuje samochd. Wybierasz cel podry, a komputer wybiera tras. W interfejsie
103
zdefiniowaem sze potencjalnych celw podry i szesnacie przystankw, ktre

moesz min na drodze do celu. W klipie filmowym o nazwie
utworzyem
sze tras, po jednej dla kadego celu podry (rysunek 2.59).
Rysunek 2.59.
Klip mapping_mc
zawiera mapy tras
prowadzcych
do poszczeglnych
celw podry
Funkcja *

" zleca gwnej listwie czasowej wykonanie skoku do etykiety
o nazwie

. W ujciu oznaczonym t etykiet rozpoczyna si sekwencja wyznaczania trasy podry. Korzystamy przy tym z kolejnej funkcji, ktr zdefiniowaem
wczeniej w listwie czasowej, a ktra wyznacza tras podry. Oto posta tej funkcji:

#
^
^#
7&
7&D

& %
. 3&4&
3 4.-T

)*7
)* +T0-#
. % 4
.
.8
$ %. .

% %. 3&4

0

#
2
Funkcja )
*
jest wywoywana w gwnej listwie czasowej. Powoduje ona
wykonanie skoku w klipie
do wygenerowanej przez ni etykiety. Oto skrypt
wykonujcy ten skok:
7&D

#
/
* /&*
OJ .

#
Po ustaleniu trasy moemy rozpocz sekwencj podry. Taki przynajmniej jest mj

zamiar na razie nie zrealizowaem jeszcze tego fragmentu. Z tego wzgldu nasze
zwiedzanie prototypu interfejsu Gwiezdne wrota koczy si w tym miejscu. Mam nadziej, e spodoba ci si przykad poczenia w jednym projekcie renderowanych
obiektw trjwymiarowych ze skryptami ActionScript i by moe stanie si on inspiracj do powstania innych tego typu projektw.
W czasie, gdy ksika trafi na pki ksigar, powinien by ju gotowy cay projekt.
Odwied stron www.sdflash.net i sprawd, jak tras wrd gwiazd wybraem.
104
Podsumowanie
Tym sposobem dotarlimy do koca rozdziau. Mam nadziej, e wiesz ju, jak korzysta z renderowanej grafiki trjwymiarowej i zechcesz tworzy ciekawe efekty
wizualne, dziki ktrym twoje filmy stan si bardziej realistyczne. Miej pracy w trzech
wymiarach!

Macromedia Flash Super Samurai

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Macromedia Flash Super Samurai

Uploaded by

Copyright:

Available Formats

IDZ DO

Rozdzia 1. Jak tchn ycie w film Flasha ..............................................................19

Chodzce insekty .................................................................................................................. 24

Rozdzia 2. Flash i grafika trjwymiarowa..............................................................33

Renderowane obiekty trjwymiarowe .................................................................................. 87

Rozdzia 3. Prawa fizyki ..........................................................................................105

Podstawy fizyki................................................................................................................... 114

Flash. Super samuraj

Detekcja kolizji ................................................................................................................... 126

Reakcje na kolizje ............................................................................................................... 134

Podsumowanie .................................................................................................................... 142

Rozdzia 4. Programowanie dwiku we Flashu ...................................................145

Dwik cyfrowy.................................................................................................................. 146

Obiekt Sound ...................................................................................................................... 147

Sterowanie wieloma dwikami ......................................................................................... 153

Nietypowe techniki ............................................................................................................. 159

Praktyczne studium............................................................................................................. 166

Wskazwki dotyczce stosowania dwiku we Flashu...................................................... 173

Rozdzia 5. Moduowa budowa projektu................................................................175

Studium witryna............................................................................................................. 183

Podsumowanie .................................................................................................................... 206

Rozdzia 6. Dynamiczne strony Flasha...................................................................207

Studium 1. Serwis dyskusyjny............................................................................................ 212

Studium 2. Licznik odwiedzin ............................................................................................ 236

Studium 3. Pokj pogawdek ............................................................................................. 240

Dodatkowa pomoc .............................................................................................................. 244

Rozdzia 7. Projektowanie interfejsu......................................................................247

Panele narzdzi ................................................................................................................... 258

Podsumowanie .................................................................................................................... 266

Rozdzia 8. Flash i XML ..........................................................................................269

XML podstawy .............................................................................................................. 273

Kindersztuba XML ............................................................................................................. 281

Flash. Super samuraj

Przykady dokumentw XML ............................................................................................ 286

Dokumenty XML we Flashu .............................................................................................. 294

Tworzenie dokumentw XML we Flashu .......................................................................... 310

Studium: koszyk na zakupy ................................................................................................ 318

Podsumowanie .................................................................................................................... 328

Rozdzia 9. Wsppraca z jzykiem JavaScript .....................................................329

Sterowanie odtwarzaczem Flash Player za pomoc skryptw JavaScript ......................... 332

Przechowywanie i odczytywanie informacji ...................................................................... 334

Flash i inne moduy rozszerzajce ...................................................................................... 339

Rozszerzanie moliwoci Flasha ........................................................................................ 344

Podsumowanie .................................................................................................................... 349

Dodatek A Sowa zastrzeone..................................................................................351

ActionScript i trzy wymiary

Flash. Super samuraj

Matematyczny ukad wsprzdnych

Rozdzia 2. Flash i grafika trjwymiarowa

Uporzdkowane trjki liczb

Trjwymiarowy ukad wsprzdnych we Flashu

Flash. Super samuraj

We Flashu o z reprezentuje odlego obiektu od paszczyzny ekranu (w sensie gbokoci).

Symulacja trzech wymiarw

Rozdzia 2. Flash i grafika trjwymiarowa

Tak oznaczone symbole czytaj x prim lub y prim przyp. tum.

Flash. Super samuraj

Posugujc si tym rysunkiem, rozwimy problem perspektywy. Wykorzystamy w tym

Stosujc elementarne przeksztacenia algebraiczne, przeksztamy powysze rwnanie,

Tym sposobem wyprowadzilimy rwnanie, ktre ma kluczowe znaczenie w symulacji

Rozdzia 2. Flash i grafika trjwymiarowa

wyliczeniem uporzdkowanej pary wsprzdnych rzutowanego punktu. Ta zmienna odegra

Flash. Super samuraj

Zmiana pooenia i skali na obrazie

& .&)

Zmienna jest zwikszana o warto w kadej klatce, w ktrej

%&.. . $4.&)9 )

W filmie utworzyem pole tekstowe (zwizane ze zmienn

Zwr uwag, e warto zmiennej

Kod wewntrz detektora zdarzenia