IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG

TWJ KOSZYK
DODAJ DO KOSZYKA

CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK

CZYTELNIA
FRAGMENTY KSIEK ONLINE

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

Flash 5.

Techniki zaawansowane
Autor: praca zbiorowa
ISBN: 83-7197-566-X
Tytu oryginau: Flash 5 Studio
Format: , stron: 710
Zawiera CD-ROM

Chocia sam program mieci si na niewielkiej pycie, to moliwoci Flasha s ogromne.

Pojawi si na scenie internetowej kilka lat temu, ale teraz wykrystalizowa si jako
powane narzdzie zdolne do tworzenia atrakcyjnych wizualnie witryn internetowych
wysokiej jakoci. Lecz to jeszcze nie wszystko: implementacja skryptu ActionScript
w pitej wersji Flasha przeksztacia program w prawdziwe rodowisko programistyczne,
ktre umoliwia realizacj w peni interaktywnych projektw od interfejsu uytkownika
do wewntrznego przechowywania danych. W niniejszej ksice przedstawimy peen
zakres moliwoci Flasha, a celem autorw jest pokazanie kolejnych zastosowa tej
uytecznej aplikacji.
Do powstania tej ksiki przyczynili si programici, ktrzy w codziennej pracy stawiaj
sobie te same pytania co Ty: Jak powinienem to zrobi? Jak mog to zrobi? Jakie
mam moliwoci do wyboru? W jaki sposb ta technologia rozwinie si w przyszoci?
Jak mog zapewni, e witryna, nad ktr pracuj, bdzie odwiedzana przez
maksymaln liczb internautw? Jakie s wymagania moich klientw i jak mog im
sprosta? Wszyscy oni stali na linii ognia, walczc z klientami, technologi czy kodem.
Za pomoc tej ksiki chc podzieli si z Tob zdobyt wiedz.

O Autorach...................................................................................................................... 11
Niezbadany wiat Flasha................................................................................................ 17
Gbia, rozmach i zrozumienie................................................................................................... 17
Podzia ksiki ............................................................................................................................ 18
Preludium...............................................................................................................................................18
Tworzenie zawartoci ............................................................................................................................18
ActionScript...........................................................................................................................................18
Dynamiczna zawarto ..........................................................................................................................18
Konteksty...............................................................................................................................................18

Ukad ksiki .............................................................................................................................. 19

Zawarto pyty CD-ROM ......................................................................................................... 20

Cz I Preludium............................................................................ 21
Rozdzia 1. Zasady projektowania witryny internetowej .............................................. 23
Uyteczno................................................................................................................................ 24
Uyteczno Flasha ...............................................................................................................................24
Najczciej spotykane problemy zwizane z uytecznoci witryn internetowych
wykonanych we Flashu .......................................................................................................................25
Adresy witryn internetowych powiconych uytecznoci...................................................................26

Rola projektanta witryn internetowych ...................................................................................... 27

Definiowanie wiadomoci .....................................................................................................................27
Definiowanie publicznoci ....................................................................................................................29

Rozwizanie problemu ............................................................................................................... 31

Projekt konstrukcyjny............................................................................................................................32
Rozmiar plikw, wstpne adowanie, strumieniowanie i akcja loadMovie ..........................................33
Prototyp funkcjonalnoci .......................................................................................................................36

Uyteczno i dowiadczenie uytkownika ............................................................................... 38

Wybr i formatowanie tekstu ................................................................................................................40
Spjno: narzdzie uytecznoci .........................................................................................................42

Widoczne elementy projektu ...................................................................................................... 44

Twrczo pomimo ogranicze.............................................................................................................44
Szkicowanie, miniaturki i bazgroy .......................................................................................................46
Szkicowanie...........................................................................................................................................47

Kompozycja................................................................................................................................ 48
Elementy kompozycji ............................................................................................................................49
Kierunek czytania ..................................................................................................................................51
Szkic kompozycyjny..............................................................................................................................51

Flash 5. Techniki zaawansowane

Schematy kolorw ...................................................................................................................... 52
Wybr schematu kolorw......................................................................................................................56
Przykady kolorw.................................................................................................................................57

Spjno po raz drugi ................................................................................................................. 59

Profil graficzny ........................................................................................................................... 61
Ulepszanie projektw ................................................................................................................. 62
Metoda drastyczna .................................................................................................................................62

Projektowanie witryny internetowej Titoonia.com studium projektu................................... 64

Przegld witryny....................................................................................................................................64
Wiadomo ............................................................................................................................................65
Docelowa publiczno ...........................................................................................................................66
Projekt strukturalny ...............................................................................................................................68
Struktura katalogw...............................................................................................................................69
Tworzenie prototypu..............................................................................................................................70
Szkicowanie...........................................................................................................................................71
Kompozycja...........................................................................................................................................72
Kolor......................................................................................................................................................73
Czcionki.................................................................................................................................................75

Tworzenie zawartoci witryny Titoonia..................................................................................... 76

Profil graficzny ......................................................................................................................................81

Zakoczenie................................................................................................................................ 82

Cz II Tworzenie zawartoci ........................................................ 83

Rozdzia 2. Sprytne klipy ................................................................................................ 85
Wszechstronno sprytnych klipw ........................................................................................... 89
Rozdzia 3. Flash i zewntrzne aplikacje 3D...................................................................103
Podstawy teoretyczne 3D ......................................................................................................... 104
Perspektywa liniowa i rzut ortogonalny ..............................................................................................104

Tworzenie zawartoci 3D we Flashu........................................................................................ 107

Rczne trasowanie we Flashu..............................................................................................................107
Oglne wskazwki dotyczce stosowania polecenia Trace Bitmap....................................................114

Tworzenie 3D w innych aplikacjach ........................................................................................ 116

Swift 3D...............................................................................................................................................116
Rendering w programie Swift 3D........................................................................................................122
3D Studio Max.....................................................................................................................................126
Vecta 3D ..............................................................................................................................................127
Pluginy Illustrate! 5.0 i Vecta 3D dla 3D Studio Max ........................................................................128
Amorphium Pro ...................................................................................................................................129
Poser ....................................................................................................................................................131

Ktry produkt wybra?............................................................................................................. 131

Interaktywno.......................................................................................................................... 132
Prawdziwy trzeci wymiar ......................................................................................................... 133
Optymalizacja zawartoci 3D na potrzeby sieci....................................................................... 133
Darmowe modele w sieci ......................................................................................................... 137
Ograniczony rendering ruchu ..............................................................................................................135
Zmniejszanie powierzchni ...................................................................................................................135
Renderowanie czci uj....................................................................................................................137

Zakoczenie.............................................................................................................................. 138

Spis treci

Rozdzia 4. Animacja kreskwek we Flashu...................................................................139

Pocztki..................................................................................................................................... 140
Planowanie animacji............................................................................................................................141
Interaktywna zawarto .......................................................................................................................142

Podstawy animacji.................................................................................................................... 143

Przenikanie uj Onion Skinning ...................................................................................................144

Animacja we Flashu ................................................................................................................. 145

Projektowanie postaci..........................................................................................................................145
Skaczca pika .....................................................................................................................................147
Skaczcy czowiek...............................................................................................................................149
Cykle ruchu..........................................................................................................................................150

Optymalizacja ........................................................................................................................... 155

Zakoczenie.............................................................................................................................. 157
Rozdzia 5. Wideo we Flashu..........................................................................................159
Wybr waciwego klipu .......................................................................................................... 160
Zastosowanie programw QuickTime Pro i Photoshop........................................................... 168
Optymalizacja ........................................................................................................................... 176
Zmiana kolorw wideo............................................................................................................. 178
Skalowanie filmu...................................................................................................................... 179
Zakoczenie.............................................................................................................................. 180
Rozdzia 6. Dwik we Flashu ........................................................................................181
Tworzenie stou mikserskiego .................................................................................................. 182
Tworzenie i importowanie dwikw .................................................................................................182
Obiekt koloru we Flashu 5...................................................................................................................197

Kontrolowanie dwiku porednio........................................................................................... 200

Rozbudowanie wiczenia ....................................................................................................................202

Zakoczenie.............................................................................................................................. 208
Rozdzia 7. Efekty przezroczystoci................................................................................209
Aktualizacja oryginalnych obrazkw ....................................................................................... 216
Optymalizacja rozmiaru pliku animacji ................................................................................... 219
Zawansowana animacja map bitowych .................................................................................... 221
Zakoczenie.............................................................................................................................. 222
Rozdzia 8. Maskowanie i efekty tekstowe....................................................................225
Warstwy.................................................................................................................................... 225
Podstawy maskowania.............................................................................................................. 226
Animowanie masek .................................................................................................................. 229
Zamaskowany tekst .............................................................................................................................229
Efekt reflektora ....................................................................................................................................232
Efekt koa kolorw ..............................................................................................................................235

Maski i ActionScript................................................................................................................. 239

Efekty tekstowe ........................................................................................................................ 245
Proste efekty tekstowe .........................................................................................................................245
Bardziej zoone efekty tekstowe ........................................................................................................250

Zakoczenie.............................................................................................................................. 263

Flash 5. Techniki zaawansowane

Rozdzia 9. Przyciski i menu...........................................................................................265

Przyciski ................................................................................................................................... 265
Tworzenie przyciskw z podpowiedziami ..........................................................................................266
Przyciski w klipach filmowych ...........................................................................................................268
Zastpowanie zachowania przycisku...................................................................................................269

Menu ......................................................................................................................................... 274

Proste menu .........................................................................................................................................275
Pywajce menu ...................................................................................................................................277
Poziome menu hierarchiczne...............................................................................................................279
Pionowe menu hierarchiczne...............................................................................................................281

Zakoczenie.............................................................................................................................. 286

Cz III ActionScript..................................................................... 287

Rozdzia 10. Podstawy programowania w rodowisku ActionScript............................289
Najwaniejsze zagadnienia programowania............................................................................. 290
Zmienne ...............................................................................................................................................290
Rodzaje zmiennych..............................................................................................................................291
Typy danych ........................................................................................................................................292

Struktury programowania w jzyku ActionScript.................................................................... 296

Wyraenia ............................................................................................................................................296
Instrukcje .............................................................................................................................................296
Bloki ....................................................................................................................................................297

Sterowanie przepywem ........................................................................................................... 297

Konstrukcje rozgazie ......................................................................................................................297
Konstrukcje ptli..................................................................................................................................298

Funkcje ..................................................................................................................................... 300

Obiekty ..................................................................................................................................... 302
Przykady: zmienne i sterowanie przepywem ......................................................................... 303
Przykady: funkcje.................................................................................................................... 307
Przykady: obiekty.................................................................................................................... 312
Zakoczenie.............................................................................................................................. 316
Rozdzia 11. Integracja rodowiska programowania ActionScript ...............................317
Listwy czasowe, klipy filmowe i obiekty................................................................................. 317
Gwna listwa czasowa ............................................................................................................ 317
Unikanie blokowania listwy czasowej ................................................................................................318

Praca z klipami filmowymi....................................................................................................... 322

Praca z kilkoma listwami czasowymi..................................................................................................323
Praca z osadzonymi klipami filmowymi .............................................................................................323
Rysunki, klipy filmowe i przyciski......................................................................................................324

Kiedy wykonywany jest kod? .................................................................................................. 325

Wielokolorowe kule bilardowe wykonane za pomoc jednego symbolu ...........................................326

Klipy filmowe jako obiekty rozwijane menu ...................................................................... 334

Pole tekstowe .......................................................................................................................................334
Pole listy ..............................................................................................................................................335

Zakoczenie.............................................................................................................................. 350

Spis treci

Rozdzia 12. Tworzenie efektw wizualnych z zastosowaniem jzyka ActionScript .......351

Tablice ...................................................................................................................................... 351
Efekty wizualne ........................................................................................................................ 352
cigacz znacznika myszy ....................................................................................................................352
Efekt czsteczki: ogie ........................................................................................................................357
Przechwytywanie klawisza..................................................................................................................363
Manipulacja lini .................................................................................................................................375

Zakoczenie.............................................................................................................................. 387
Rozdzia 13. Stosowanie prostych procedur w grach....................................................389
Prosta gra w ping-ponga ........................................................................................................... 395
Co powinienem zrobi teraz? ................................................................................................... 412
Typowe elementy gry ..........................................................................................................................412

Zakoczenie.............................................................................................................................. 414
Rozdzia 14. Programowanie gier..................................................................................415
Kosmiczna gra .......................................................................................................................... 415
Modyfikacja gry ....................................................................................................................... 436
Rozdzia 15. Flash i trzeci wymiar .................................................................................439
Co jest moliwe, a co praktyczne? ........................................................................................... 439
Wszystko o okrgach................................................................................................................ 441
Sinus i cosinus .....................................................................................................................................442
Ruch po okrgu....................................................................................................................................443

O Z .......................................................................................................................................... 446
Obrt wok osi Y ...............................................................................................................................447
Prawdziwa perspektywa ......................................................................................................................448
Obrt wok osi X ...............................................................................................................................450

Przemieszczanie kilku punktw ............................................................................................... 451

Obrt wok osi Z................................................................................................................................451
Obrt wok osi Y ...............................................................................................................................454
Obrt wok osi X ...............................................................................................................................456

Obiekt trjwymiarowy.............................................................................................................. 456

Zakoczenie.............................................................................................................................. 462
Rozdzia 16. Obiektowe gry Flasha ................................................................................463
Wytyczne .................................................................................................................................. 463
Ograniczenia Flasha jako rodowiska gier ............................................................................... 464
Tworzenie gier mimo ogranicze ............................................................................................. 465
Szablon gry Flasha.................................................................................................................... 467
Duszki gameSprite...............................................................................................................................467
wiat gier .............................................................................................................................................468
Klipy filmowe zachowania ..................................................................................................................472

Wygld i dziaanie gry.............................................................................................................. 474

Na pocztku .......................................................................................................................... 477
Dynamika obrotw ..............................................................................................................................478
Spotkanie z wrogiem ...........................................................................................................................485

Flash 5. Techniki zaawansowane

czenie w cao ..................................................................................................................... 487
Plik Savior02.fla ..................................................................................................................................487
Plik Savior03.fla ..................................................................................................................................490
Plik Savior.fla ......................................................................................................................................496

Zakoczenie.............................................................................................................................. 498

Cz IV Dynamiczna zawarto................................................... 501

Rozdzia 17. Dynamiczna zawarto uzyskiwana z plikw tekstowych .......................503
Dynamiczna zawarto uzyskiwana z plikw tekstowych....................................................... 504
adowanie danych tekstowych do Flasha ................................................................................ 504
Baner reklamowy z moliwoci aktualizacji .......................................................................... 517
Zakoczenie.............................................................................................................................. 525
Rozdzia 18. Dynamiczne aplikacje internetowe............................................................527
Interfejs ..................................................................................................................................... 528
Architektura projektu...........................................................................................................................528
Planowanie z wyprzedzeniem .............................................................................................................530

Komunikacja silnik interfejs................................................................................................ 532

Koszyk sklepowy Flasha .......................................................................................................... 535
Architektura pliku FLA .......................................................................................................................537
Standardowe klony ..............................................................................................................................541
Dane z pliku tekstowego......................................................................................................................542
Dlaczego film zosta zaprojektowany w ten wanie sposb?.............................................................543

Kod ........................................................................................................................................... 543

Gwne funkcje....................................................................................................................................544
Kod paska przewijania.........................................................................................................................550
Kod programu adujcego ...................................................................................................................552
Uwielbiam, gdy udaje mi si zrealizowa plan................................................................................553

Techniki rozwizywania problemw ....................................................................................... 554

Zakoczenie.............................................................................................................................. 556
Rozdzia 19. Flash i PHP .................................................................................................557
Zasady stosowania PHP z Flashem .......................................................................................... 557
Poczenia klient-serwer......................................................................................................................558
Interpreter PHP oparty na CGI ............................................................................................................558
Komunikacja midzy Flashem i PHP ..................................................................................................559

Narzdzia .................................................................................................................................. 563

Serwer WWW Apache ........................................................................................................................564
PHP4 preprocesor hipertekstu ........................................................................................................566
Twoja pierwsza strona w jzyku PHP .................................................................................................567
Dokumentacja PHP4............................................................................................................................568

Co mona zrobi z PHP i Flashem? ......................................................................................... 569

Zagadnienia zwizane z wydajnoci PHP .........................................................................................569

Flash i PHP w akcji .................................................................................................................. 570

Zakoczenie.............................................................................................................................. 577

Spis treci

Rozdzia 20. Flash i XML .................................................................................................579

Same fakty ................................................................................................................................ 579
Czy jest si czym przejmowa?................................................................................................ 580
Natura bestii.............................................................................................................................. 581
Podstawowa skadnia jzyka XML .......................................................................................... 582
Zastosowanie jzyka XML w rodowisku programowania ActionScript Flasha 5 ................. 584
Obiekt XML ........................................................................................................................................584
Obrbka dokumentw XML ...............................................................................................................587
Testowanie kodu XML ........................................................................................................................590

adowanie dokumentu XML.................................................................................................... 593

Uzyskiwanie dostpu do bazy danych przy uyciu jzyka XML ............................................ 598
Pisanie kodu ASP ................................................................................................................................601
Ulepszanie kodu ASP ..........................................................................................................................607
Dodawanie funkcji przeszukiwania.....................................................................................................609

Zakoczenie.............................................................................................................................. 612

Cz V Konteksty ......................................................................... 613

Rozdzia 21. Poczenie Flasha i HTML ...........................................................................615
Wprowadzenie do jzyka HTML i Flasha................................................................................ 616
Osadzanie w caym oknie przegldarki ...............................................................................................619
Proporcje filmu i okna .........................................................................................................................620

Osadzanie procentowe i o staym rozmiarze ............................................................................ 625

Osadzanie w ramkach............................................................................................................... 627
Wyskakujce okienka ............................................................................................................... 628
Jeden film kontra kilka filmw................................................................................................. 630
Jeden film ............................................................................................................................................630
Kilka filmw........................................................................................................................................631
Filmy uoone w stosy .........................................................................................................................632

Wykrywanie Flasha i flashowe witryny internetowe ............................................................... 633

Flash jako obrazek w tekcie ...............................................................................................................634
Nagwki Flasha ..................................................................................................................................635
Zastosowanie ramek dla nagwkw Flasha .......................................................................................635
Strony Flasha ze stronami HTML .......................................................................................................638

Zakoczenie.............................................................................................................................. 638
Rozdzia 22. adowanie wstpne i strumieniowanie.....................................................641
Co to jest strumieniowanie? ..................................................................................................... 642
Co to jest adowanie wstpne? ................................................................................................. 643
Ekrany adujce, taktyka rnorodnoci i reakcje uytkownika .............................................. 644
Wstp do konstrukcji ................................................................................................................ 644
Testowanie filmw strumieniowanych i Bandwidth Profiler Flasha ..................................................645
Modyfikacja kolejnoci adowania ......................................................................................................647
Generowanie raportw o rozmiarze.....................................................................................................647

Demonstracja strumieniowania animacji i dwiku................................................................. 650

Analiza filmu .......................................................................................................................................651

Podstawowa technika adowania wstpnego............................................................................ 653

10

Flash 5. Techniki zaawansowane

Przybliony pasek adowania wstpnego ................................................................................. 655
Analiza filmu .......................................................................................................................................656
Przemylenia kocowe ........................................................................................................................660

Bardziej precyzyjny pasek adowania wstpnego .................................................................... 661

Analiza filmu .......................................................................................................................................661
Przemylenia kocowe ........................................................................................................................664

Modularna witryna internetowa Flasha .................................................................................... 665

Analiza filmu .......................................................................................................................................665
Przemylenia kocowe ........................................................................................................................670

Zakoczenie.............................................................................................................................. 671
Rozdzia 23. Optymalizacja Flasha dla wyszukiwarek ..................................................673
Typy wyszukiwarek.................................................................................................................. 673
Szperacze WWW...................................................................................................................... 674
Planowanie witryny przyjaznej wyszukiwarce ........................................................................ 674
Strony wejciowe.................................................................................................................................675
Obsuga standardowych witryn HTML ...............................................................................................675
Witryny internetowe z ramkami ..........................................................................................................676
Witryny internetowe utworzone we Flashu.........................................................................................676

Wybr sw kluczowych i docelowego natenia ruchu w sieci ............................................. 677

Inne rozwaania zwizane z procesem wyboru sw kluczowych......................................................678
Gdy ju wybrae sowa kluczowe... ...................................................................................................678

Znaczniki <META> i inne elementy kodu wspomagajce prac wyszukiwarek .................... 680
Co to jest znacznik <META>? ............................................................................................................680
Znaczniki <META> i sowa kluczowe................................................................................................681
Komentarze HTML .............................................................................................................................682
Ukryte pola wejciowe ........................................................................................................................683
Znaczniki obrazkw ............................................................................................................................684
Nazwy plikw, adresy internetowe i cza ..........................................................................................685

Wykluczanie stron z wyszukiwarek ......................................................................................... 685

Plik robots.txt.......................................................................................................................................686
Szperacze i znacznik <META>...........................................................................................................687

Monitorowanie ruchu w sieci i listingi..................................................................................... 688

Zgaszanie stron do wyszukiwarek........................................................................................... 689
Szczegy dotyczce poszczeglnych wyszukiwarek .........................................................................690

wiczenie ................................................................................................................................. 697

Zakoczenie.............................................................................................................................. 701

Dodatki......................................................................................... 703
Skorowidz ......................................................................................................................705

Odkd powsta Flash, projektanci pracujcy w tym programie usiuj doda do swoich
projektw trzeci wymiar. Wraz z ukazaniem si na rynku aplikacji, takich jak Vecta3D
i Swift 3D, umieszczenie przestrzennej zawartoci na stronie WWW stao si stosunkowo proste. Od tej pory elementy 3D stosowano z rnym powodzeniem w wielu
witrynach internetowych i grach w trybie online. Efekty trjwymiarowe niezmiennie
przycigaj uwag internautw, lecz atwo jest wpa w puapk, stosujc je w nieodpowiednich miejscach. Chocia tematem tego rozdziau jest tworzenie trjwymiarowych
obiektw we Flashu, sam jestem przeciwnikiem nadmiernego wykorzystywania efektw
3D w sieci. Zestaw narzdzi przeznaczonych do tworzenia grafiki trjwymiarowej moe
oczywicie pomc w opracowaniu niezwykle atrakcyjnych i niezapomnianych efektw,
niemniej jednak podczas projektowania naley pamita o ich wadach. Elementy trjwymiarowe mog znacznie obciy procesor, a zbyt czste ich stosowanie niekorzystnie wpywa na cay projekt.
Dziki wprowadzeniu rodowiska ActionScript do Flasha 4 i poszerzeniu jego moliwoci
w 5. wersji tej aplikacji, zamiast polega na predefiniowanych obliczeniach, moemy
przeprowadza kalkulacje 3D w czasie rzeczywistym. Mimo udoskonale wprowadzonych w nowym odtwarzaczu Flasha 5, wymagania dotyczce procesora podczas wykonywania skomplikowanych oblicze we Flashu (z zachowaniem przyzwoitej prdkoci
filmu) nadal s dosy wysokie. S jednak sposoby na obejcie tych ogranicze.

Co jest moliwe, a co praktyczne?

Majc na uwadze wspomniane wyszej utrudnienia, naley pamita, e przeprowadzanie
oblicze 3D w czasie rzeczywistym we Flashu nie musi oznacza tworzenia zoonych
form geometrycznych, gdy ley to poza granicami rozsdku. Bardzo interesujce
efekty mona natomiast uzyska za pomoc okrelania pozycji obiektw w przestrzeni,
nadajc im przestrzenne wsprzdne. Przykadem zastosowania takiej techniki jest trjwymiarowa gra w rugby o nazwie Conversion Kings (www.sportal.co.za/conversionkings),
ktra zostaa wykonana przez moj firm dla korporacji Sportal.
Aby obliczy wsprzdne x, y i z piki w przestrzeni zastosowalimy prosty mechanizm
3D podobny do tych, ktrymi zajmiemy si w tym rozdziale. Stadionowi, stanowiskom
i podou rwnie nadalimy przestrzenne wsprzdne, co umoliwio nam wykrywanie kolizji piki z tymi obiektami. Nastpnie na to 3D naoylimy przezroczyst matryc trjwymiarowych wsprzdnych, na ktrej umiecilimy ruch piki.

440

Cz III K ActionScript

Poniewa wsprzdne obliczane s w wirtualnym rodowisku 3D, moemy take zmieni

kt i perspektyw widoku. Dziki temu uzyskujemy widoki z rnych perspektyw, a nawet funkcj powtrki przedstawian spoza stanowisk. Jedynymi elementami, ktre
naley obliczy metod ujcie po ujciu, s pika i jej cie. Ich wykonanie mona potraktowa jako przykad realnego zastosowania trzeciego wymiaru we Flashu.
Podobnym projektem jest interfejs uytkownika przedstawiony na stronie WWW pod
adresem www.com-ebusiness.de. I tym razem obliczenia 3D zastosowane zostay do okrelenia pozycji piki w aksonometrycznej przestrzeni 3D, gdy w tej grze pika powinna zachowywa si zgodnie z prawami fizyki.

Rozdzia 15. K Flash i trzeci wymiar

441

Takie poczenie prerenderowanych obiektw trjwymiarowych i oblicze 3D w czasie

rzeczywistym stanowi wielki potencja, zwaszcza na polu programowania gier we Flashu.
Jak na razie, moliwoci tej techniki nadal nie zostay w peni zbadane. Trzeci wymiar
tego rodzaju moe by rwnie z powodzeniem stosowany w projektowaniu interfejsw
multimedialnych.

Wszystko o okrgach
Zanim wemiemy pod uwag takie zastosowania, niezbdne jest zrozumienie sposobu
przeprowadzania tych prostych oblicze 3D. To wanie bdzie stanowi gwny temat
tego rozdziau, w ktrym przedstawi take proces generowania we Flashu prostego
mechanizmu 3D. Na jego serce skada si kilka okrgw i oblicze ktw. W tym
celu przygotowaem pliki w formacie FLA. Ich analiza powinna Ci uatwi zrozumienie
wszystkich operacji przeprowadzonych w tym rozdziale.

Pliki te, zapisane w formacie FLA, znajdziesz na pycie CD-ROM doczonej do ksiki.
Zalecam, aby mia do nich dostp w trakcie pracy nad wiczeniami. Jednym
z najlepszych sposobw uczenia si jest eksperymentowanie, dlatego te warto
powici wystarczajco duo czasu na przeanalizowanie poszczeglnych etapw
wiczenia i przykadw.

Na pocztek powinnimy si dokadnie zastanowi, jakie efekty chcemy uzyska. Naszym celem jest utworzenie we Flashu 5 efektw 3D przy uyciu jzyka ActionScript.
Kocow wersj projektu (ktry za chwil wykonamy) umieciem w pliku sample_13.fla. Wykorzystaem w nim jzyk ActionScript do obliczenia wsprzdnych szecianu w przestrzeni i stworzenia iluzji trzeciego wymiaru. Wyraz iluzja uyty w tym
kontekcie nie oznacza bynajmniej, e wiczenia przedstawione w tym rozdziale dotycz tworzenia pseudotrjwymiarowych efektw. Wyraz ten zosta uyty dlatego, poniewa obiekt trjwymiarowy umieszczony na dowolnej dwuwymiarowej powierzchni
nie jest niczym innym jak iluzj. Uzyskuje si j za pomoc kombinacji waciwoci x i y
poszczeglnych punktw w trjwymiarowym obiekcie i skalowanie ich podczas ruchu
punktw w przestrzeni. Nasz szecian przypomina wygldem obiekt trjwymiarowy
dziki przestrzeganiu podczas rysowania odpowiednich regu, umoliwiajcych szybkie
skojarzenie i wyobraenie sobie obiektu umieszczonego w przestrzeni trjwymiarowej.
Poniewa yjemy w trjwymiarowym wiecie, intuicyjnie rozpoznajemy takie efekty
perspektywy, jak zmniejszanie si obiektw wraz z oddalaniem si ich od nas, czy zbieganie si linii w niewidocznych punktach.
W pliku sample_13.fla kluczow rol odgrywa iluzja. Dziki niej elmenty w obiekcie wygldaj tak, jakby obracay si wok punktu centralnego. Jeli uywae Flasha 3, na pewno
prbowae animowa obiekt wzdu spaszczonej owalnej cieki w celu symulowania

442

Cz III K ActionScript
obrotu 3D wok punktu centralnego. Jest to wanie jeden ze sposobw imitowania
efektw trjwymiarowych w rodowisku ActionScript. Jeli potrafimy obliczy kolist
ciek zamiast animowa j, jestemy na dobrej drodze do utworzenia we Flashu trjwymiarowych efektw w czasie rzeczywistym.

Sinus i cosinus
W szkole podstawowej na pewno si uczye o zwizku funkcji trygonometrycznych
sinus (sin) i cosinus (cos) z okrgami. Nie bdziemy wyjania dziaania tych funkcji,
gdy nie jest to naszym zadaniem. Jeli chciaby dowiedzie si wicej o funkcjach
trygonometrycznych, zajrzyj do podrcznikw lub skorzystaj z niezliczonych materiaw dostpnych w Internecie i szkoach. Przyjrzyjmy si teraz funkcjom trygonometrycznym i przekonajmy si, co mog nam zaoferowa.
Majc podan warto kta, moemy zastosowa funkcje sinus i cosinus do obliczenia
wsprzdnych punktu, w ktrym linia narysowana pod tym ktem przecina si z koem
o rodku w punkcie, z ktrego rysowana jest linia. Podczas symulacji trzeciego wymiaru funkcje sinus i cosinus su zatem do obliczania kolistej cieki wok punktu centralnego. Cosinus reprezentuje warto poziom (X), a sinus warto pionow (Y)
wsprzdnej. Poniej przedstawilimy ilustracj dziaania tych dwch funkcji.

Wartoci sinusa i cosinusa dla danego kta oparte s na okrgu o promieniu dugoci jednej jednostki, zwanym rwnie koem jednostkowym (jak na rysunku). Promie reprezentuje odlego midzy punktem rodkowym (0,0) i krawdzi koa. Z tymi danymi
rwnanie dla obliczenia wsprzdnej x wyglda tak jak zostao przedstawione poniej.


     

A rwnanie dla wsprzdnej y tak jak poniej.


    


Rozdzia 15. K Flash i trzeci wymiar

443

Im wiksza bdzie warto promienia, tym wiksze bdzie koo.

Poniej przedstawione zostay rwnania dla kta o wartoci 33 z promieniem o wartoci 2.
X = 2
cos(33) = 2
0.8387 = 1.6773
Y = 2
sin(33) = 2
0.5446 = 1.0892

Inaczej ni to miao miejsce w poprzednich wersjach, we Flashu 5 funkcje trygonometryczne s funkcjami wbudowanymi i moemy uzyska do nich dostp za pomoc
nowego obiektu
. W kodzie ActionScript moemy napisa rwnania w sposb, ktry zosta przedstawiony poniej.


     


    


Wydaje si to proste, lecz jest oczywicie pewien kruczek kty stosowane przez
obiekty
 i

mierzone s w radianach, a nie w stopniach. Jeli jednak
wolisz uywa stopni, moesz przeksztaci je za pomoc poniszego rwnania.
 
 
  F ! "#$

Warto  (pi) zastosowan w powyszym rwnaniu mona rwnie uzyska za pomoc

nowego obiektu Flasha 5
. W jzyku ActionScript rwnanie to bdzie wyglda
tak jak poniej.


 


      



    
 


Rwnania te umoliwi Ci obliczenie wsprzdnych x i y dowolnego punktu przecinajcego si z koem o podanym promieniu.

Ruch po okrgu
Przeprowadzimy teraz test. Po otworzeniu pliku sample_01.fla zobaczysz, e listwa czasowa  skada si z pojedynczej kopii klipu filmowego umieszczonej na rodku sceny. Cay kod wpiszemy do tego klipu, wic dwukrotnie go kliknij, aby spowodowa otwarcie do edycji.

444

Cz III K ActionScript
Ten klip filmowy zawiera dwa kolejne klony klipw filmowych kko o nazwie kopii Point i krzyyk o nazwie kopii centerPoint. Waciwoci  i  klipu centerPoint
su jako odnoniki do wsprzdnej, wok ktrej klip Point bdzie si porusza.
W tym przypadku wsprzdna ta odpowiada rodkowi klipu filmowego (0,0).

Jeli przyjrzysz si ukadowi listwy czasowej, zauwaysz, e ten klip filmowy skada
si tylko z trzech uj. Zawieraj one kod ActionScript. Ujcie 1. jest ujciem konfiguracyjnym, w ktrym umiecilimy rne funkcje. Dwukrotnie kliknij ujcie 1., aby edytowa jego zawarto, ktra zostaa przedstawiona poniej.




 

 
 
   ! "

  #$
%
& 
& 
'(
 
)(
 
*
 +,'(# +,
 +*)(# +*
%

W tym wiczeniu zastosujemy zmienn 

 do okrelenia wartoci kta 
 dla
dowolnego obrotu, ktry bdziemy chcieli obliczy. W pierwszym przykadzie zmienna

 przypisuje zmiennej 
 wartoci uzyskane z konwersji ze stopni na radiany,
a nastpnie zwiksza o 2 wartoci podane dla zmiennej  po kadorazowym wywoaniu polecenia 
.

Rozdzia 15. K Flash i trzeci wymiar

445

Zmienna 
 zawiera kod obliczajcy punkt na kole w oparciu o omwione
wczeniej rwnania, a nastpnie definiuje now pozycj klipu Point na ekranie, okrelajc jego waciwoci  i .
Ujcie 2. zawiera kod, ktry wywouje akcj 
 i 
. Zosta on przedstawiony poniej.
 
& 

Skrypt w ujciu 3. tworzy ptl kodu w ujciu 2.

 *$

Poniewa warto zmiennej 

 jest zwikszana przez cige wywoania polecenia 

, zarwno sinus, jak i cosinus zostan uyte w poleceniu 
 do obliczenia
nowej pozycji klipu Point na okrgu o promieniu 100. W efekcie otrzymamy klip Point
poruszajcy si po kolistej ciece wok klipu centerPoint, jak wida poniej.

Za pomoc zmiany wartoci promienia ( ) moemy kontrolowa rozmiar kka.
Jeli zamiast poda okrelon warto 100 zmodyfikujemy funkcj 

tak, aby zwikszy warto promienia   po kadorazowym jej wywoaniu, kolista
cieka bdzie stopniowo si zwiksza (sample_02.fla).



 

 
 
   ! "

  #$
%
& 
& 


 

'(
 
)(
 

446

Cz III K ActionScript
*
 +,'(# +,
 +*)(# +*
%

W efekcie uzyskamy klip Point poruszajcy si po spiralnej ciece wok klipu centerPoint.

O Z
W jaki sposb ta spirala zwizana jest z naszym wiczeniem 3D? Nastpny rysunek
przedstawia analiz trzech osi w rodowisku 3D (x, y i z). Jeli przyjrzysz si pierwszej
ilustracji, zrozumiesz, e w dwch omwionych do tej pory przykadach obliczalimy
obrt wok osi z przy uyciu wsprzdnej punktw znajdujcych si na osi x i y
w celu zdefiniowania kolistej cieki. Na ekranie komputera mona wyobrazi sobie
o z jako o skierowan w naszym kierunku (jakby wychodzia z ekranu).

W oparciu o ten rysunek, moemy stwierdzi, e w rodowisku 3D:

 definiujc wsprzdne x i y punktu, z zastosowaniem sinusa i cosinusa moemy
obliczy obrt punktu wok osi z,
 definiujc wsprzdne y i z punktu, z zastosowaniem sinusa i cosinusa moemy
obliczy obrt punktu wok osi x,

Rozdzia 15. K Flash i trzeci wymiar

447

 definiujc wsprzdne z i x punktu, z zastosowaniem sinusa i cosinusa moemy

obliczy obrt punktu wok osi y.
We Flashu moemy okreli wsprzdne x i y klonu przez zastosowanie waciwoci
 i , lecz uzyskanie wartoci wsprzdnej z jest odrobin trudniejsze. W rodowisku
trjwymiarowym pozycja obiektu na osi z zazwyczaj reprezentuje jego odlego od
widza. Z powodu perspektywy im bliej obiekt znajduje si przy widzu, tym wyglda
na wikszy (i na odwrt). Oznacza to, e do przedstawienia wsprzdnej klonu na osi
z moemy zastosowa jego waciwoci   i .

Obrt wok osi Y

Przeprowadzimy teraz test. W oparciu o nasz pierwszy eksperyment (sample_01.fla)
zmodyfikowaem kod dla funkcji 
 w celu symulowania obrotu wok osi y.
Zgodnie z wyej wymienionymi reguami dokonujemy tego, okrelajc wsprzdne x i z.
Nowy kod, wpisany do pliku sample_03.fla, zosta przedstawiony poniej.




 

 
 
   ! "

  #$
%
& 
& 
'(
 



*
 +,'(# +,
 ! "

Wprowadzilimy tutaj tylko dwie zmiany. Najpierw poniszy wiersz

)(
 

zastpilimy linijk przedstawion poniej.


 

Zamiast definiowa waciwoci  klipu Point, porwnalimy jego waciwoci  

i  do zmiennej  (jak wida poniej).
 +* +,-(#$

W tym kodzie definiujemy waciwoci 

 i 
  jako rwne 
. Warto 200 zostaje nastpnie dodana do zmiennej , aby zrekompensowa to,
e z promieniem   o wartoci 100 minimalna warto zmiennej  bdzie wynosi
100 (przecie nie chcemy, aby klip Point posiada ujemn warto skali). Ruch klipu Point
wzdu osi x pozostaje taki sam (jak zosta zdefiniowany przez cosinus kta 
),

448

Cz III K ActionScript
lecz zamiast porusza si w d i w gr osi y klip Point przemieszcza si teraz do
przodu i do tyu po osi z. Czyli mwic dokadniej skaluje si tak, jak zostao to
zdefiniowane przez sinus kta 
. W efekcie powstaje iluzja klipu Point poruszajcego
si po kolistej ciece w przestrzeni, co wida poniej.

Prawdziwa perspektywa
Chocia ten ruch wyglda dosy realistycznie, nie jest jeszcze cakowicie poprawny.
Dopasowalimy skal klipu Point, ale nie wyregulowalimy cieki, ktr poda nasz
obiekt. Jako e cieka rozciga si w nasz stron, oddalajc si od nas, powinna by
widoczna w perspektywie. Aby uzyska taki efekt, wprowadzimy zmienn  
i zdefiniujemy waciwoci  ,   i  klipu Point w stosunku do tej zmiennej.
Na pocztku fragmentu skryptu umieszczonego w ujciu 1. pliku sample_04.fla nowej
zmiennej   przypisalimy warto 150, co wida poniej.




  #$

 

 
 
   ! "

  #$
%

Zmienna wykorzystywana jest przez polecenie 

 do obliczania stopnia zachodzcego znieksztacenia perspektywy. Im mniejsza jest warto zmiennej  ,
tym bardziej wyraziste bdzie znieksztacenie (i na odwrt). W samym poleceniu 

 zdefiniowalimy now zmienn , opart na wartociach zmiennych 
  i .
& 
& 
'(
 
-(
 

Rozdzia 15. K Flash i trzeci wymiar

449

%% &'
($%$)%  #

*
!*(  !

  

 ! ($

Warto zmiennej  zostaje pomnoona przez warto zmiennej ! w celu zdefiniowania waciwoci  , a nastpnie pomnoona przez 100, aby okreli wartoci waciwoci   i  klipu filmowego Point. Im bliej klip filmowy Point znajduje si widza (czyli im wiksza jest warto zmiennej ), tym wiksza bdzie warto
zmiennej . Poniszy rysunek (ktry jest widokiem wzdu osi y, czyli z gry)
przedstawia znieksztacenie cieki wok rodka i wpyw na nie rnych wartoci
zmiennej  .

Podczas ogldania rysunku wzdu osi z widoczny bdzie efekt bardziej wyrazistego
ruchu i skalowania w czasie przybliania si obiektu do widza, a delikatniejszego
ruchu, kiedy obiekt si oddala. Mona to porwna do jazdy samochodem najblisze
otoczenie wok samochodu wyglda tak, jakby si poruszao o wiele szybciej ni, na
przykad, gry w tle. Gdy warto zmiennej   dochodzi do 1 000 000, nie
nastpi prawie adne znieksztacenie. Powstanie wtedy widok ortogonalny (czyli taki,
w ktrym nie jest obecne znieksztacenie perspektywiczne). Jeli spojrzymy na nasze
otoczenie z perspektywy ortogonalnej, wwczas bdzie nas dzielia od wszystkich
obiektw jednakowa odlego.
Na razie zmiennej   w ujciu 1. klipu filmowego Move3D przypisalimy warto ", wic podczas ogldania filmu nie zauwaysz znacznego znieksztacenia.
Sprbuj zmieni warto na 150, a nastpnie uruchomi film, aby zobaczy naprawd
wyrazisty efekt perspektywy. Mona nawet utworzy efekt przesuwania si obiektu
poza ekran. W tym celu przypisz zmiennej   warto 15 i sprbuj powstrzyma si od uchylania, gdy obiekt bdzie zatacza ptl nad Twoj gow. Po
zmianie wartoci zmiennej   modyfikacje ruchu i skalowania klipu Point s
atwo zauwaalne.

450

Cz III K ActionScript

Obrt wok osi X

T sam technik moemy zastosowa do symulacji obrotu wok osi x, obliczajc
wsprzdne z i y. Widok wzdu osi x przedstawia paszczyzn, na ktrej y reprezentuje
wsprzdn pionow (sinus), a z wsprzdn poziom (cosinus).
W skrypcie symulacji obrotu wok osi x (sample_05.fla) polecenie 
 bdzie
wyglda tak jak poniej.
& 
+
 

-(
 
((*&
.(  /-(((0
*
!  !

+(  

 +* +,.(

Rezultat wprowadzonych zmian zosta przedstawiony na poniszym rysunku.

Rozdzia 15. K Flash i trzeci wymiar

451

Nasza kula sprawia teraz takie wraenie, jakby obracaa si wok osi x, przybliajc si
i oddalajc podczas obrotu.

Przemieszczanie kilku punktw

Skoro ju wiesz, w jaki sposb stosujemy funkcje sinus i cosinus do symulacji obrotu
pojedynczego punktu wok osi w przestrzeni, przyjrzyjmy si teraz metodom tworzenia systemu, w ktrym wok rodka bdzie si obraca kilka punktw.
Przede wszystkim musimy okreli rozmieszczenie punktw w systemie i sposb przechowywania informacji o nich. Aby maksymalnie uproci wyjanienia, omwi to zagadnienie
najpierw dla systemu dwuwymiarowego, a dopiero pniej dodam trzeci wymiar.
W systemie dwuwymiarowym moemy okreli wsprzdn x i y dla dowolnego
punktu. Wsprzdne te zdefiniujemy w stosunku do punktu rodkowego (0,0) i bd
one dziaa na tej samej zasadzie, co jednopunktowe systemy, ktrymi zajmowalimy
si do tej pory. Oznacza to, e bdziemy postpowa zgodnie z konwencj Flasha. Wedug
wspomnianej reguy dowolny punkt umieszczony nad osi x bdzie posiada ujemn
warto wsprzdnej y, a punkt umieszczony poniej bdzie posiada dodatni warto
wsprzdnej y. T sam zasad zastosujemy dla wsprzdnych x (punkt znajdujcy si
na lewo od osi y bdzie mia ujemn warto wsprzdnej i na odwrt).

Obrt wok osi Z

Zaczniemy od systemu skadajcego si z czterech punktw. Poniszy rysunek przedstawia wsprzdne niezbdne do narysowania kwadratu o rozmiarze 100100 jednostek (ze rodkiem wyrwnanym do rodka siatki).

452

Cz III K ActionScript

Wsprzdne dla rogw tego kwadratu zostay przedstawione poniej.

Punkt 0:
Punkt 1:
Punkt 2:
Punkt 3:

x = 50,
x = 50,
x = 50,
x = 50,

y = 50
y = 50
y = 50
y = 50

Do przechowywania tych wartoci zastosujemy dwie tablice o nazwach i . W oparciu

o pierwsze ujcie pliku sample_01.fla (zajmowalimy si nim w pierwszym wiczeniu)
wiersz definiujcy warto promienia   zastpimy kodem, ktry definiuje dwie
nowe tablice. Nowy skrypt (umieszczony w pliku sample_06.fla) zosta przedstawiony
poniej.
12*(&(3456*,*5
,&*/7
87
8/7
87

*&*/7
8/7
87
87

092, 

W tym kodzie zmiennej  #$ przypisujemy warto zmiennej 

 tablicy (jest
to liczba punktw w systemie). Poniewa chcemy, aby nasz system skada si z czterech
punktw, doczyem procedur, ktra tworzy kopie klipu Point i nadaje im nazwy Point0,
Point1, Point2 i Point3, a nastpnie czyni oryginalny klip filmowy niewidzialnym.
(&2*(*

:092##
(0;(< <8< <#8
%
+0=


Gwna zmiana w poleceniu 

 zachodzi w rwnaniach, ktre dotychczas stosowalimy do obliczania zmiennych ! i %.
     
    


Zamiast promienia   zastosujemy wsprzdne x i y (ktre wanie zdefiniowalimy do podobnego dziaania). Nowe rwnania zostay przedstawione poniej.

Rozdzia 15. K Flash i trzeci wymiar

453

  %  
 &   
   
 ' %   

Zmienne ! i % (jak rwnie waciwoci  i ) musimy jednak okreli dla
wszystkich punktw w systemie. Dokonamy tego, stosujc ptl wykonujc akcje, ktre
czterokrotnie zdefiniuj te wartoci. Zmienna  suy do kontrolowania iloci wykonanych ptli i do udostpniania wartoci tablic i .
& 

:092##
=3'(,>? #*>? 
)(*>? /,>? 
*
>< <#?+,'(# +,
>< <#?+*)(# +*
%
%

Po uruchomieniu filmu zmienna  &'

'  ( umieszczona w sekcji ) powyszego kodu zostanie zmieniona na nazwy kopii klipu filmowego 
, 
", 

 i 
*.
Uruchamiajc nowy skrypt (sample_06.fla), zauwaysz, e po zwikszeniu kta (za pomoc
zmiennej 
) wszystkie cztery punkty poruszaj si po kolistej ciece wok klipu centerPoint, zachowujc sta odlego midzy sob.

Prawdziw zalet stosowania tej metody jest moliwo zmiany wsprzdnych x i y

kadego punktu w systemie. Przeprowadzimy krtki eksperyment, ktry lepiej zilustruje
to zagadnienie zmienimy wartoci w tablicach i  (ksztat przedstawiony na poniszym rysunku potraktujemy jako wzr). Ksztat ten prezentuje nowy zestaw wartoci.
Punkt0:
Punkt1:
Punkt2:
Punkt3:

x = 60,
x = 60,
x = 20,
x = 50,

y = 60
y = 40
y = 60
y = 30

454

Cz III K ActionScript

Po zastpieniu wartoci zdefiniowanych dla tablic i  nowymi (sample_07.fla) uzyskamy now konfiguracj punktw w systemie przypominajc ksztatem poprzedni figur.
Punkty nadal bd si jednak obraca wok klipu centerPoint z zachowaniem staych
odlegoci midzy sob. Poeksperymentuj ze zmian tych wartoci i obejrzyj rezultaty.

Obrt wok osi Y

Podobnie jak w pierwszym przykadzie tego rozdziau, dokonalimy oblicze, ktre reprezentuj obrt wok osi z. Na podstawie informacji zdobytych podczas wicze na plikach sample_04.fla i sample_05.fla moemy wykona rwnie obliczenia dla osi x i y.
Zaczniemy od obrotu wok osi y.
Aby symulowa obrt wok osi y, musimy okreli wartoci zmiennych ! i .
W tym celu bdziemy potrzebowali zestawu wsprzdnych punktw znajdujcych si
na osiach x i z. Wyobramy sobie obrcenie paszczyzny x y o 90 wok osi x w taki
sposb, e stare wsprzdne y staj si wsprzdnymi z, a wsprzdne x pozostaj
niezmienione.

Nowe rwnanie dla obliczenia obrotu wok osi y zostao przedstawione poniej.
  %  
 &   
(    
 ' %  

Rozdzia 15. K Flash i trzeci wymiar

455

W tym wiczeniu wykorzystamy rwnie kod, ktry zdefiniuje warto zmiennej 
stosowanej do okrelania waciwoci   i  klipu Point. Warto zmiennej
 zostanie rwnie pomnoona przez warto zmiennej ! (dajc w ten sposb
waciwo _ klipu Point).
Poniewa zmienna  zalena jest od wartoci zmiennej  , musimy pamita o przypisaniu zmiennej   jakiej wartoci. Tak jak poprzednio umieszczamy j na pocztku skryptu w ujciu 1. Kod symulujcy obrt wok osi y dla polecenia
drawPoints zosta przedstawiony poniej (znajdziesz go rwnie w pliku sample_08.fla
na pycie CD-ROM doczonej do ksiki).
& 
& 

:092##
=3)
'(,>? #5>? 
-(5>? /,>? 
((*&
.(  /-(((0
*
>< <#?+,'(.(# +,
>< <#?+* +*
>< <#?+,>< <#?+*.(


&>< <#?&(.(.(7


%
%

Ostatni wiersz kodu tej funkcji jest odpowiedzialny za sortowanie z (czyli okrelanie
punktw, ktre naley narysowa przed innymi podczas ich obrotu). We Flashu 4 wykonanie tej operacji byo dosy pracochonne, lecz we Flashu 5 moemy w tym celu
zastosowa wbudowan funkcj  . Funkcja ta przesuwa biec kopi na nowy poziom okrelony wyraeniem +,. Im wiksza jest zatem warto zmiennej , tym na wyszy poziom w biecym stosie zostanie przesunity klon klipu
Point. Funkcja ta nie zastpuje zawartoci poziomu, do ktrego przechodzi, lecz zamienia zawartoci dwch poziomw. Jest to szczeglnie pomocne wtedy, gdy dwa punkty
posiadaj jednakow warto zmiennej .

456

Cz III K ActionScript

Obrt wok osi X

Rwnania dla obrotu wok osi x, ktre su do obliczania wsprzdnych y i z, zostay
przedstawione poniej (patrz plik sample_09.fla).
   
 &   
(    
 '  

Rezultat bdzie zbliony do efektu z pliku sample_05.fla z tym wyjtkiem, e teraz ju

cztery punkty obracaj si wok osi x.

Obiekt trjwymiarowy
Do tego momentu obliczalimy obrt wok poszczeglnych osi oddzielnie, za kadym
razem przypisujc do obliczenia po dwie wsprzdne na punkt. Aby jednak powstaa
iluzja obracania obiektu trjwymiarowego, kademu punktowi musimy przypisa
wsprzdn x, y i z, a obliczenia dla wszystkich trzech osi naley wykona dla kadego
punktu. Poniszy rysunek ilustruje sytuacj, w ktrej do wytoczenia dwuwymiarowego kwadratu w celu wygenerowania szecianu musimy zastosowa cztery dodatkowe punkty i do kadego z nich przypisa wsprzdn z.

Kocowy szecian unosi si w trjwymiarowej przestrzeni wsprzdnych o punkcie

pocztkowym (0,0,0). W oparciu o ten rysunek moemy stwierdzi, e trjwymiarowe
wsprzdne dla szecianu (takiego jak ten, czyli o rozmiarze 100 na 100 na 100 jednostek z punktem rodkowym w pozycji (0,0,0)) bd wyglda tak jak poniej.
Punkt0:
Punkt1:
Punkt2:
Punkt3:
Punkt4:
Punkt5:
Punkt6:
Punkt7:

x = 50,
x = 50,
x = 50,
x = 50,
x = 50,
x = 50,
x = 50,
x = 50,

y = 50,
y = 50,
y = 50,
y = 50,
y = 50,
y = 50,
y = 50,
y = 50,

z = 50
z = 50
z = 50
z = 50
z = 50
z = 50
z = 50
z = 50

Zamiast wykonywa obliczenia dla obrotu wok pojedynczej osi (tak jak to robilimy
do tej pory z zastosowaniem funkcji 
), dokonamy oblicze dla wszystkich

Rozdzia 15. K Flash i trzeci wymiar

457

trzech osi jednoczenie. Z tego wzgldu musimy wprowadzi trzy nowe zmienne, ktre
bd kontroloway kt obrotu wok kadej osi. Nazwiemy je !
, %
 i 

i zastpimy nimi ogln zmienn 
 (ktr stosowalimy do tej pory).
Zmienna !
 bdzie reprezentowa kt obrotu wok osi x, zmienna %
 wok
osi y, a zmienna 
 wok osi z. Nowy zestaw rwna mona zatem podzieli na
trzy czci. Wszystkie rwnania zostay przedstawione poniej.
Obrt wok osi x:
)*   

+, &   
+,
()*    

+, '  
+,

Obrt wok osi y:

)*  %  

+, & ()*  
+,
(  ()*  

+, ' %  
+,

Obrt wok osi z:

  )*  
(
+, & )*  (
+,
  )*  
(
+, ' )*  (
+,

W tych rwnaniach zmienne !-$, %-$ i -$ su jako tymczasowe
zmienne stosowane w miejsce zmiennych ,  i . (w celu uzyskania dostpu do wartoci
zmiennych !, % i ).
Po przypisaniu wartoci zmiennym !, % i  do powyszych rwna dodamy kod
definiujcy zmienn . Nowe pozycje punktw zostan narysowane na ekranie za
pomoc pomnoenia wartoci zmiennej  przez wartoci zmiennych ! i %
oraz przy uyciu okrelenia waciwoci    kadego punktu w taki sam sposb jak
w poprzednim przykadzie. W tym przypadku rwnie zastosowalimy zmienn  do
okrelenia waciwoci   i  dla kadego klonu Point.
Skrypt tworzcy funkcj 
 zosta przedstawiony poniej (oraz w pliku sample_10.fla).
& 
& 

:092##
=3'
)(+@2(*>?' #5>?' 
-(+@2(5>?' /*>?' 
=3)
'(+@2(,>?) #-(+@2() 
-(-(+@2() /,>?) 
=3'('(+@2(- #) +@2(- 
)()(+@2(- /'(+@2(- 
((*&
.(  /-(((0

458

Cz III K ActionScript
*
>< <#?+,'(.(# +,
>< <#?+*)(.(# +*
>< <#?+,>< <#?+*.(


&>< <#?&(.(.(7


%
%

Pamitaj, e w celu utworzenia efektw trjwymiarowych nie zawsze konieczne jest obliczanie obrotu wok wszystkich trzech osi. Czasami niezbdne jest obrcenie obiektu wok
osi z, lecz te nie zawsze jest to konieczne. Oglnie mwic czasami warto ogranicza
kod stosowany we Flashu. Wystarczy, abymy obliczyli tylko obroty wok osi x i y.
Obrt wok osi x:
   
 &   
(    
 '  

Obrt wok osi y:

  %  
 & (  
(  (  
 ' %  

Dziki temu nie bd ju nam potrzebne dodatkowe zmienne tymczasowe (patrz plik
sample_11.fla). Dla potrzeb tego wiczenia nadal jednak bdziemy korzysta z rwna
obliczajcych obrt wok wszystkich trzech osi.
Aby przej z pliku sample_09.fla do sample_10.fla, musimy zmieni funkcj 

w celu zdefiniowania wartoci zmiennych wszystkich trzech ktw (!
, %

i 
). Dokonamy tego, trzykrotnie powielajc istniejcy skrypt (zmieniajc tylko
nazwy zmiennych).
 
' '  ! "

) )  ! "

- -  ! "

' ' #$
) ) #$
- - #$
%

Wartoci dodawane do zmiennej  na kocu kodu okrelaj to, o ile kada o ma si
obrci. Na przykad warto 0 zatrzyma szecian w miejscu, a warto ujemna spowoduje
obracanie si obiektu w przeciwnym kierunku. Oczywicie wartoci te mona definiowa,
stosujc inne wyraenia. Aby na przykad obrci obiekt w zalenoci od ruchu myszy, moemy zastosowa poniszy skrypt (umieszczony rwnie w pliku sample_12.fla).
 
' '  ! "

) )  ! "

- -  ! "

* !,

+ ,

 

Rozdzia 15. K Flash i trzeci wymiar

459

Ustawienie stopni ! i % na biec lokalizacj kursora myszy jest najprostszym sposobem uzyskania omawianego efektu, lecz moemy take zastosowa bardziej
skomplikowane skrypty, jeli chcemy otrzyma inny rodzaj ruchu czy interakcji.
W ten sposb dotarlimy do ostatniego etapu projektu. Na razie utworzylimy w systemie 8 punktw poruszajcych si wok punktu rodkowego. Aby nada obiektowi okrelony ksztat, punkty poczymy liniami. W tym celu utworzymy kolejn funkcj o nazwie
/
, ktra bdzie kreowa ptl dla umieszczanych linii. Do poczenia punktw
w celu utworzenia szecianu bdziemy potrzebowali dwanacie linii. We Flashu nie
moemy niestety definiowa wsprzdnych poszczeglnych punktw linii za pomoc
jzyka ActionScript. Musimy znale na to jaki inny sposb.
Zastosujemy klip filmowy zawierajcy pojedyncz ukon lini. Zeskalujemy j poziomo i pionowo midzy punktami, ktre maj zosta poczone. Wartoci zmiennych
 ,   i  zastosowanych w filmie musz by identyczne, aby jego
punkty kocowe odpowiaday punktom przeznaczonym do poczenia. Innymi sowy
rozmiar klipu filmowego powinien wynie 100 na 100 jednostek. Oznacza to, e jeli znamy odlego pomidzy dwoma punktami i chcemy nada linii w klipie filmowym odpowiedni dugo, wystarczy ustawi wartoci waciwoci  klipu filmowego na t odlego.
Aby utworzy taki klip filmowy, narysuj ukon lini biegnc w d od lewej do prawej strony pod katem 45. W panelu Info ustaw wartoci X i Y na 0 tak, aby grny lewy
koniec linii sta si rodkiem klipu filmowego. Ustaw szeroko i wysoko na 100.

Nazwij t kopi klipu filmowego Line.

W ujciu 1. klipu filmowego Move3D w pliku sample_13.fla przypiszemy zmiennej o nazwie /
#$ warto 12. Reprezentuje ona liczb linii, ktrymi poczymy wszystkie
punkty w szecianie.
Nastpnym krokiem bdzie powielenie klipu Line dwanacie razy (nadajc kopiom nazwy
/
, /
", /
 i tak dalej) i ustawienie widocznoci oryginalnego klonu na .
92 $
(&2*

:92##

460

Cz III K ActionScript

(0;(<A<8<A<#8#092

%
A+0=


Aby skrypt odpowiedzialny za czenie wszystkich linii uzyska informacj, ktre punkty
naley poczy, przygotujemy dla kadej linii list punktw przeznaczonych do poczenia. Dokonamy tego, przypisujc do kadej z linii zmienne o nazwie /
X0
i /
X1
, gdzie X oznacza liczb, ktr dodamy do nazwy kadego klipu filmowego
w ostatnim fragmencie kodu. Kompletna lista zostaa przedstawiona poniej.
12*2
A
B
8A
C 
A B
8A C$
A$B 8A$CD
ADB$8ADCD
AEB
8AECE
A7B 8A7C7
AFB$8AFCF
AGBD8AGCG
A"BG8A"CF
AHBG8AHC7
A
B78A
CE
A BF8A CE

Dla linii /
 punktem zakotwiczenia bdzie zatem punkt 
 (/
0), a zostanie ona rozcignita do punktu 
" (/
1
). Linia /
" zostanie poczona od
punktu 
 do 
 i tak dalej. Pierwsze cztery linie wyglda bd tak jak na poniszym rysunku.

Nastpnie dodamy funkcj /

 ktra poczy punkty. Poniszy kod wpisz
w ujciu 1.

Rozdzia 15. K Flash i trzeci wymiar

461

&A
&A

:92##
><A<#?+,>< <#><A<##<B<??+,
><A<#?+*>< <#><A<##<B<??+*
><A<#?+,>< <#><A<##<C<??+,/
>< <#><A<##<B<??+,
><A<#?+*>< <#><A<##<C<??+*/
>< <#><A<##<B<??+*
%
%

W tym skrypcie wartoci waciwoci  i  kadej linii s rwne wartociom waciwoci  i  punktu reprezentujcego punkt pocztkowy linii (/
X0). Powyszy
kod skaluje lini, stosujc rnic midzy wartociami waciwoci  i  dwch
punktw przez ni poczonych. Cay mechanizm dziaa poprawnie. Jeli zeskalujemy jaki element za pomoc ujemnych wartoci, odbijemy go przez jego o. Zatem w celu uzyskania klipu Line przedstawionego na poniszym rysunku

zastosujemy ponisze rwnania.

-  $. /
  '#
-  $. /
  '"$
)%,  '# ' $  '#
) ,  '"$ ' $  '"$

Za pomoc powyszych rwna skalujemy klip Line przez 8% na osi x i okrelamy

szeroko klipu filmowego na 8. Nastpnie skalujemy klip na osi y przez 10%
i okrelamy wysoko klipu filmowego na 10.
Po zastosowaniu wartoci dla wszystkich linii uzyskalimy zamierzony przez nas efekt,
czyli szecian w przestrzeni trjwymiarowej (ktry zosta przedstawiony poniej).

462

Cz III K ActionScript
W ten sposb zakoczylimy konstrukcj podstawowego programu do tworzenia obiektw
3D, ktr moesz zastosowa w innych projektach. Ukoczony model znajduje si w pliku
sample_13.fla na pycie CD-ROM doczonej do ksiki.

Zakoczenie
Teraz poeksperymentuj, pozmieniaj wsprzdne poszczeglnych punktw i przekonaj
si, w jaki sposb zmiany te wpyn na model. Sprbuj rwnie umieci dodatkowe
punkty w systemie, zmieniajc warto zmiennej  #$ i okreli dla nich pocztkowe wsprzdne. Stosunkowo atwym zadaniem bdzie przeksztacenie tego modelu
w system dynamiczny, w ktrym uytkownik bdzie mg kontrolowa gbi lub liczb punktw za pomoc wejciowego pola tekstowego (lub przyciskami plus i minus)
i obserwowa zmiany zachodzce w czasie rzeczywistym.
Pamitaj, e wsprzdne nie musz by statyczne. Najwiksz zalet tego systemu jest
to, e mona w nim resetowa pozycje punktw po kadej wykonanej ptli systemu
(mniej wicej w taki sam sposb, w jaki okrelalimy zmienne odpowiedzialne za definiowanie ktw obrotu). Daje to moliwo przesuwania punktw w obrbie systemu,
a to z kolei stanowi podstaw, na ktrej zostay zrealizowane projekty omwione na pocztku tego rozdziau.