As3 PDF

Sadraj
1.
UVOD ................................................................................................................................. 3
2.
OSNOVNI KONCEPTI ANIMACIJE ............................................................................... 4

2.1. Programirani frejmovi ..................................................................................................... 4
2.2. Dinamika animacija ....................................................................................................... 5
3.
ACTION SCRIPT OKRUENJA....................................................................................... 6

3.1. Flash CS IDE ................................................................................................................... 7
3.2. Flex Builder Flash Builder ........................................................................................... 9
3.3. Command-line kompajler ................................................................................................ 9
3.4. FlashDevelop IDE ......................................................................................................... 10
3.5. Komanda trace ............................................................................................................... 11
4.
ANIMACIJA POMOU KODA ...................................................................................... 12

4.1. Kretanje u petljama (looping) ........................................................................................ 12
4.2. Frame loops ................................................................................................................... 14
4.3. Dogaaji i rukovaoci dogaaja ...................................................................................... 14
4.2 Vebanja ......................................................................................................................... 15
5.
DISPLAY LISTA .............................................................................................................. 18

5.1. Podklase display objekata .............................................................................................. 21
5.2. Interakcija korisnika ...................................................................................................... 23
5.2.1. Dogaaji mia ......................................................................................................... 23
5.2.2. Dogaaji tastature ................................................................................................... 24
6.
TEHNIKE RENDEROVANJA ........................................................................................ 26

6.1. Boje u Fleu ................................................................................................................... 26
6.1.1. Korienje heksadecimalnih vrednosti boja ........................................................... 26
6.1.2. Transparentnost i 32-bitne boje .............................................................................. 26
6.1.3. Kombinovanje boja................................................................................................. 26
6.1.4. Ekstrakcija komponentnih boja .............................................................................. 27
6.2. API za crtanje ................................................................................................................ 27
6.2.1. lineStyle, lineTo, moveTo ...................................................................................... 28
6.2.2. Vane geometrijske i trigonometrijske formule ..................................................... 33
Spisak slika
Sl. 3-1 Startni prozor Flash-a...................................................................................................... 8
Sl. 3-2 Unoenje imena klase u Properties panelu ..................................................................... 8
Sl. 3-3 Poetna stranica razvojnog okruenja FlashDevelop ................................................... 10
Sl. 3-4 Klasa Test u razvojnom FlashDevelop okruenju ........................................................ 11
Sl. 4-1 frame-by-frame animacija ............................................................................................. 12
Sl. 4-2 renderovanje i prikazivanje ........................................................................................... 12
Sl. 4-3 skript animacija ............................................................................................................. 12
Sl. 4-4 zato ne koristimo for ciklus za animaciju objekta ....................................................... 13
Sl. 4-5 pomeranje crvene lopte sa leva na desno preko ekrana ................................................ 15
Sl. 4-6 Dve razliite putanje loptice ......................................................................................... 16
Sl. 4-7 Pulsiranje loptice........................................................................................................... 16
Sl. 4-8 Putanja koja zavisi od parametara range, xspeed i yspeed ........................................... 17
Sl. 4-9 Sinusna putanja ............................................................................................................. 17
Sl. 4-10 Iscrtavanje krive .......................................................................................................... 18
Sl. 5-1 Prebacivanje kruga iz jednog kvadrata u drugi ............................................................. 20
Sl. 5-2 Sukcesivno prebacivanje kruga..................................................................................... 20
Sl. 5-3 Klasa ParentKvadrat ..................................................................................................... 21
Sl. 5-4 Drugi nain definisanja klase ParentKvadrat ................................................................ 22
Sl. 5-5 Klasa Krug .................................................................................................................... 22
Sl. 5-6 Izmenjena klasa PreomenaRoditelja2 ........................................................................... 23
Sl. 5-7 Dogaaji mia ............................................................................................................... 24
Sl. 5-8 Dogaaji tastature ......................................................................................................... 25
Sl. 6-1 Lista metoda za drawing API........................................................................................ 28
Sl. 6-2 Crtanje miom po panelu .............................................................................................. 28
Sl. 6-3 Crtanje krivih ................................................................................................................ 29
Sl. 6-4 Otri prelazi izmeu krivih ........................................................................................... 30
Sl. 6-5 Izgled krivih dobijenih kodom sa Sl. 6-5. ..................................................................... 30
Sl. 6-6 Uvoenje sredinjih taaka ........................................................................................... 31
Sl. 6-7 Blagi prelazi izmeu krivih ........................................................................................... 31
Sl. 6-8 Potpuno glatka kriva .................................................................................................. 32
Sl. 6-9 Zatvorena kriva ............................................................................................................. 32
Sl. 6-10 Zatvorena glatka kriva ................................................................................................ 33
Sl. 6-11 Strelica ........................................................................................................................ 34
Sl. 6-12 Okretanje strelice prema miu .................................................................................... 34
Sl. 6-13 Rastojanja od centra do mia ...................................................................................... 35
1. UVOD
U svetu Fle-a postoji jaz izmeu onih koji koriste i razumeju ActionScript i onih
drugih. Nekad se to pogreno naziva razlika izmeu dizajnera i projektanata
podrazumevajui da dizajneri ne razumeju kod, a da projektanti ne razumeju dizajn. Ovo je
naravno potpuno pogreno pojednostavljenje. ActionScript moete da primenjujete kao
dizajner ubacujui gotove pakete u animaciju ili kao programer iji je glavni cilj da
isprogramira postavljene zahteve dizajna. ActionScript je mnogo vie od toga. ActionScript je
umetnost.
Da li je programiranje umetnika forma? Isto koliko je fotografija ili film bilo
umetnika forma u nedavnoj prolosti. Kada je fotografija prvi put napravljena, smatrana je
izvanrednim tehnikim dostignuem i nita vie. Ona je predstavljala tehniki postupak
beleenja stvarnosti. 150 godina kasnije, mi smo danas u stanju da fotografiju protumaimo
kao subjektivni umetniki izraz. Pre oko sto godina braa Lumier su prikazali film o ulasku
voza u stanicu Lion i proizveli reakciju da su svi prisutni u panici pobegli iz sale u kojoj se
prikazivao film u strahu od dolazeeg voza. Danas zanamo da itamo film, mi smo filmski
obrazovani. Ovo ne moemo jo uvek da kaemo za programiranje.
Danas na programiranje gledamo kao na isto tehniku stvar. Programer danas, je ono
to je filmski stvaralac bio pre jednog veka: umetnik koji stvara u mraku, ekajui da se
drutvo obrazuje toliko da bi bilo u stanju da njegov rad tretira kao umetnost. Sigurno neemo
ekati vek da se ovo dogodi.
Cilj ovog kursa je da studentima da osnovu koja e im omoguiti kreativni pristup
ActionScriptu. Ovo nije kurs vizuelnog programiranja kojim se kliktanjem i prevlaenjem
kontrole vuku na radnu povrinu, a programsko okruenje kreira programski kod umesto vas.
Vizuelni nain pravljenja programskih paketa je izuzetno dobar, jer programera oslobaa
pisanja ogromne koliine ablonskog koda i omoguava programeru da se usresredi na sutinu
problematike koju programira. ActionScript 3.0 (u daljem tekstu e se koristiti skraenica
AS3), koji je predmet ovog kursa je objektno orjentisan skript jezik, veoma blizak C++ i za
njega nema i ne postoji potreba za vizuelnom verzijom. U ovom jeziku kreirate klase i
direktno ih izvravate na Flash Player-u. Ove klase piete u proizvoljnom tekst editoru i
najee nemate potrebu za nekim dodatnim okruenjem koje bi vam pomoglo u tome.
Pisanje ovih klasa je jedan ali ne i jedini zadatak ovog kursa. AS3 je izvanredan a
jednostavan nain da oivite va kod i da kreativno spojite dizajnera i programera u vama.
Da bi to bilo mogue, potrebno je da poznajete sutinu animacije i da steknete osnovna
neophodna znanja iz:
osnovnih koncepata animacije,
tehnika renderovanja,
osnovnih i naprednih pokreta i
3D animacije
Cilj ovog kursa je da vam prenese ova znanja i omogui da razumete ta se zaista
deava kada izvravate vau klasu na Flash Player-u, a time i da otvori ogromnu i veoma lepu
oblast kreativne dinamike animacije.
2. OSNOVNI KONCEPTI ANIMACIJE

ta je animacija? Najprikladniji odgovor iz renika izraza bi bio: stvaranje iluzije
pokreta. Animacija, to je pokret. Pokret objekta u vremenu ili vizuelna promena objekta u
vremenu. Ili, i jedno i drugo. U osnovi, pokret je promena pozicije u vremenu, ali i promena
oblika tog objekta u vremenu. Na primer, veoma popularni 90-tih godina foto-morfic
programi kojima bi npr. sliku devojke pretopili u sliku tigra. Ili, promena veliine ili
orjentacije objekta. Ili, jednostavno, promena boje tog objekta.
Veza animacije i vremena je veoma vana i ona nas dovodi do sledee kljune stvari, a
to je da animacija dri nau zainteresovanost za objekte koje prikazuje. Iako je Mona Liza
jedna od najuvenijih slika svih vremena, teko da e prosean posmatra da je posmatra
neprekidno due od petnaestak minuta. Ali stavite tog posmatraa ispred platna na kome se
prikazuje neki akcioni visokobudetni film i teko da e te ga od tog platna odvojiti za sledea
dva dva ipo sata. Ovo je snaga animacije.
Ukoliko bih vam prikazao sliku oveka na levoj strani sobe i, posle nekoliko sekundi,
sliku tog oveka na desnoj strani sobe vi bi rekli da sam vam pokazao dve slike a ne
animaciju. Ukoliko bih vam pokazao pola tuceta slika koje prikazuju tog oveka u procesu
njegovog prelaska iz levog dela sobe u desni i dalje bi tvrdili da vam pokazujem seriju
individualnih slika. Sa poveavanjem broja ovih slika, u jednom momentu, va mozak se
predaje i prihvata iluziju da se ne radi o individualnim slikama ve o animaciji. Ovaj
momenat je veoma dobro prouen u filmskoj industriji.
Istraivai su ustanovili da su pri brzini od 24 slike u sekundi ljudi perfektno sreni da
prihvate te slike kao jednu pokretnu sliku. Ukoliko je broj slika manji, preskoci postaju
izraajniji i iluzija se gubi. S druge strane, ljudsko oko i mozak ne mogu da razlikuju mnogo
vei broj slika u sekundi od 24, tako da npr. 100 slika u sekundi nee uiniti da film izgleda
realistinije (iako vee brzine u animaciji izgledaju bolje za objekte koji se kreu velikim
brzinama).
Da bi ceo koncept animacije bio mogu, potrebne su tri stvari: skladite, prenos i
prikaz. Objekat koji je u osnovi svega ovoga zove se frame, ili, na srskom frejm (iako
bukvalni prenos engleske rei frame moe da znai okvir, filmadije, slino kao i programeri
imaju mnoge izraze koji se jednostavno ne prevode). ta je frejm? Za poetak, to je slika,
fotografija, crte. Ali, to je i prikaz virtuelnih objekata u odreenom trenutku vremena
pomou opisa njihovih oblika, veliina, boja i pozicija. Prema tome, na film ne mora da bude
serija slika ve serija opisa tih slika u vremenu. Umesto da jednostavno prikae sliku, raunar
moe da pomou opisa stvori sliku i onda da je prikae. Moemo da idemo i korak dalje,
koristei programirane frejmove.
2.1. Programirani frejmovi

Raunari su mone naprave i broj operacija koje mogu da izvre u delu sekunde
omoguava da je nepotrebno da za svaki frejm pamtimo sve opise svih objekata koji su u
naem filmu. Dovoljno je da imamo potpuni opis objekata za prvi frejm i skup pravila kako da
na osnovu prethodnog, pravimo sledei frejm. Jasno je koliko memorijskog prostora moemo
da utedimo koristei ovaj pristup. Slike, same po sebi zauzimaju znaajan memorijski
prostor. 24 slike u sekundi ovaj prostor troe veoma brzo. Jasno je da, ako imamo kompletan
opis samo prve slike i skup pravila, naa potreba za memorijom e se dramatino smanjiti.
4
ak i veoma sloen skup pravila koji definiu kako e se objekti menjati zauzima manje
prostora od slike srednje veliine.
Prirodno, postoji i kontra argument. Sa poveanjem naih umetnikih zahteva, pravila
postaju sve komplikovanija, a raunar mora da radi sve napornije i napornije da bi izraunao
opis za sledeu scenu. CPU ima na raspolaganju tano odreeno vreme izmeu dva frejma da
sve ovo izrauna, i ako se to vreme produi, prikaz naeg filma zapada u tekoe. Ovaj
problem ne postoji sa serijom slika jer, slika je slika, bez obzira ta je na njoj.
2.2. Dinamika animacija

Najznaajnija prednost programirane animacije ide mnogo dalje od puke utede u
memoriji. To je injenica da programirana animacija postaje dinamika. Verovatno ste gledali
film Titanik. Ovaj tone na kraju. Uvek tone. Gledali ga vi u bioskopu, kod kue na dvd-u ili
na TV-u, on tone. Jedini nain da on ne potone je da pritisnete stop na plejeru. To je zato to
je film niz nepokretnih slika. Slike na kraju ovog filma prikazuju brod koji tone, i tu nema
pomoi. Zbog ovoga teko da e neko imati preveliku elju da ponovo potroi tri sata i
odgleda ono to je ve video.
Ne mora obavezno programirana animacija da bude i dinamika. Mogu da uzmem
neki objekat, i da ga, koristei kod, postavim na odreenu poziciju a zatim da ga pomeram
preko ekrana. Svaki put kada budem putao ovaj film isti kod e da prouzrokuje isto
pomeranje preko ekrana. Ovo teko da je dinamika animacija.
Ali ta ako uzmem taj objekat i koristei kod, sluajnim odabirom ga postavim na
poetnu poziciju a zatim odredim sluajni pravac njegovog kretanja, kao i sluajnu vrednost
brzine tog kretanja. Sada e, svaki put kada putamo taj film, neto razliito da se dogodi. Ili
ta, ako, u zavisnosti od trenutka kada se film puta, koji je deo dana ili godine u pitanju,
kreiram razliite scene koje e taj film da prikazuje, recimo zimsko jutro, letnje popodne ili
no u Aprilu. Ili da imam neke parametre u filmu koji mogu da se promene dok se film
prikazuje pomou tastature ili mia. Ovim bih omoguio korisniku da interaguje sa objektima
na ekranu. Moda i da spasi Titanik.
Moda i najinteresantniji aspekt dinamike animacije, a predmet ovog kursa je
uglavnom o tome, je primena matematikih i fizikih principa realnog sveta na objekte u
pokretu. Nai objekti e da se kreu, padae usled gravitacije, kada udare u zemlju odbie se,
ali ne toliko visoko kao to su bili pre pada. Zatim, kada se smiri, korisnik e da ga podigne i
pomera koristei tastaturu ili mia, jednom reju, imae utisak da rukuje sa fizikim
objektom.
Sa ovim tipom animacije, korisnik vie nije puki posmatra unapred snimljenih scena.
On je uvuen u okruenje koje ste vi kreirali. Koliko dugo e da ostane u njemu? Onoliko
koliko to okruenje dri njegovu zainteresovanost.
3. ACTION SCRIPT OKRUENJA

Postoji vie naina da se napravi AS3 film i to koristei:
Flash CS IDE (CS5, CS4, CS3),
Flex Builder,
Flex/AS3 kompajler sa komandne linije ili
FlashDevelop IDE.
Dok je cena prva dva okruenja znaajna, druga dva su besplatna. U ovom delu e biti
prikazana sva etiri okruenja, ali emo u ostatku kursa koristiti iskljuivo besplatna
okruenja, ne gubei nita od optosti problematike.
Sutina ActionScripta su klase i u ovom kursu e se podrazumevati da studenti
poseduju osnovna znanja objektno orjentisanog programiranja, tj da su im poznati pojmovi
kao to su: constructors, imports, inheritance. Napravimo jedostavnu klasu:
package {
import flash.display.Sprite;
public class Test extends Sprite {
public function Test() {
init();
}
private function init():void {
graphics.beginFill(0xff0000);
graphics.drawEllipse(100, 100, 100, 100);
graphics.endFill();
}
}
}
i proimo kroz kod. Prvo, nailazimo na package naredbu. Packages, jednostavno reeno,
omoguavaju da grupiemo odreene klase zajedno. Oni su struktuirani prema
direktorijumima u kojima su smetene klase. Svako ime u package se odnosi na odreeni
folder, sa imenima koja su razdvojena takama. Na primer klasa Lopta koja je smetena u
com/tela/film e biti referencirana sa com.tela.film.Lopta, tako da e definicija klase biti:
package com.tela.film {
public class Lopta {
}
}
Sledea je import naredba kojom uvozimo klasu Sprite. Kada radimo u AS3 svaku klasu koju
napravimo pravimo kao naslednicu jedne od dve klase: MovieClip ili Sprite. Klasa MovieClip
predstavlja ablon za sva ActionScript svojstva i metode koji su deo objekta movie clip. Ona
sadri svojstva kao to su x i y pozicija klipa, njegova veliina itd. U AS3 je uvedena klasa
Sprite koja je po svojoj definiciji jednostavnija od klase MovieClip i o kojoj moemo da
razmiljamo kao o muviklip-u (ponovo ne prevodimo pojam jer je engleska re odomaena
kod nas) bez vremeske linije (timeline). U najveem broju sluajeva kada objektima rukujemo
samo preko koda, ne koristimo frejmove i vremensku liniju, te nam je pogodnije da koristimo
jednostavniju Sprite klasu.
6
Kada pravimo klasu koja nasleuje MovieClip ili Sprite, ona automatski nasleuje sva
svojstva i metode tih klasa. Tada dodajemo specifina ponaanja i svojstva koja se primenjuju
na objekt koji pravimo. Na primer, za igricu koju pravimo elimo da napravimo objekat
svemirski brod. elimo da za ovaj objekat, pored odreene grafike, imamo njegovu poziciju
na ekranu, da ga pomeramo, rotiramo, oslukujemo dogaaje mia i tastature za interakciju sa
korisnikom. Ovo su sve stvari koje MovieClip i Sprite mogu da odrade. Tada dodajemo
specifina svojstva kao to su brzina, gorivo, oteenje, i specifina ponaanja, kao to su
uzletanje, sudar, pucanje, samounitenje. Klasa bi mogla da izgleda ovako:
package {
public class SvemirskiBrod extends Sprite {
private var brzina:Number = 0;
private var ostecenje:Number = 0;
private var gorivo:Number = 1000;
public function Uzletanje():void {
// . . .
}
public function Sudar():void {
// . . .
}
public function Pucanje():void {
// . . .
}
public function SamoUnitenje():void {
// . . .
}
}
}
Sve ostalo u ovom kodu je ve poznato od modifikatora pristupa public, konstruktora u kome
se poziva metoda init() kojom se crta crveni krug.
U ovoj glavi e biti objanjeno kako da se u svakom od pobrojana etiri okruenja
postavi AS3 projekat sa ovom osnovnom klasom. U nastavku kursa e se prezentovati samo
kod odgovarajuih klasa, podrazumevajui da on moe da se primeni u bilo kojem od tih
okruenja. Klasu koju smo napisali koristei proizvoljan tekst editor emo sauvati sa
nastavkom as, Test.as.
3.1. Flash CS IDE

Kreiramo novi FLA izborom Create New Flash File (ActionScript 3.0), slika 3.1.
Sl. 3-1 Startni prozor Flash-a

Flash dodeljuje ime Untitled-1.fla kreiranom fajlu. Sada je vano da se sauva kreirani
fajl u direktorijumu u kome smo suvali klasu Test.as ili u bilo kom drugom, ali u tom sluaju
moramo da zapamtimo putanju izmeu ta dva direktorijuma. koliko ne savamo kreiranu
klasu, pri daljem radu e se javljati razne poruke o tome da Flash ne moe da pronae klasu sa
kojom radimo. U properties paneul (Sl. 3.2.) uoavamo polje Document Class i unosimo ime
nae klase: Test. Unosimo ime klase, ne fajla, te nije potrebno da dodajemo nastavak as. Ako
nam je klasa u okviru paketa, unosimo kompletnu putanju do nje.
Sl. 3-2 Unoenje imena klase u Properties panelu

8
Sada jednostavno testiramo kod odabirom Test Movie iz Control menija ili Debug
Movie iz Debug menija ili koristimo preice Ctrl+Enter ili Ctrl+Shift+Enter. Fle e
kompilirati klasu u Test.SWF. Kada se pokrene SWF, konstruktor i init() metoda crtaju na
crveni krug.
Kada se koristi dokument klasa, treba izbegavati stavljanje bilo kakvog koda na
vremensku liniju, ak ni komentare, jer to moe da prouzrokuje konflikt sa kodom koji dodaje
kompajler.
3.2. Flex Builder Flash Builder

Adobe Flex Builder je profesionalni alat koji omoguuje projektantima softvera da
razvijaju bogate Internet aplikacije korienjem open source Flex okruenja. On ukljuuje
podrku za inteligentno kodiranje, debagovanje, vizuelni dizajn, kao i alat za testiranja. Posle
verzije 3.0., promenjen je naziv, tako da je najnovija verzija Flash Builder 4.
Kako je akcenat ovog kursa stavljen na razumevanje sutine animacije i ActionScripta, vizuelni alati Flex-a mogu samo da odvuku panju na neke nevane detalje u postupcima
pravljenja animacije. S druge strane, besplatni softver koji nam stoji na raspolaganju sadri
sve to je potrebno da pravimo sve ono to bi pravili uz pomo skupog softvera.
3.3. Command-line kompajler

Korienje raznih vizuelnih alata i okruenja pri pisanju softvera je izuzetno korisno,
ali sadri jednu opasnost. Programeri se vremenom toliko srode sa arobnjacima koji umesto
njih piu i putaju kod da bez tih alata nisu u mogunosti ni da naprave jednostavan Zdravo,
kako si? program, a kamoli da ga pokrenu sa komandne linije. Takoe, kako arobnjaci
prave kod za sve rutinske delove programa, mnogi programeri nikad ne pogledaju ta je
okruenje za njih napravilo i bave se samo soficistiranim delovima pisanja koda, tako da
postaju nesposobni da bez arobnjaka naprave te rutinske delove koda.
Kod programiranja u ActionScriptu klase moemo da piemo u proizvoljnom editoru,
tako da nam je potreban kompajler i biblioteka korienih klasa da bismo mogli da napravimo
bilo ta to moemo da napravimo korienjem nekog skupog vizuelnog alata.
Kao prvo, treba da skinemo besplatnu verziju (trenutno je najnovija 4.1.) Flex SDK sa
http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4. U bin direktorijumu se
nalazi Windows kompajler mxmlc.exe. Naredbu za kompiliranje nae klase sada vrimo sa
komandne linije sa direktorijuma u kome smo sauvali tu klasu navodei putanju do
kompajlera, npr: C:/flex_sdk_4.1.0.16076_mpl/bin/mxmlc.exe Test.as . Na ekranu dobijamo
niz informacija o tome ta kompajler radi i, ako postoje greke, informacije o njima i ako je
mogue, tane linije i karaktere gde su greke ustanovljene. Ovim postupkom je kreiran u
istom direktorijumu Test.swf, koji kada startujemo pomou Flash player-a dobijamo na
crveni krug na ekranu.
Glavni nedostatak ovakvog rada je ukucavanje putanja do klase koju kompiliramo i
putanje do mxmlc-a. Ovo se najelegantnije reava pravljenjem batch fajla u kome su smetene
ove putanje, a parametar je ime klase koju treba da kompiliramo. Na primer:
C:\Programi\flex_sdk_4.1.0.16076_mpl\bin\mxmlc.exe C:\Users\Admin
\Documents\kodAS3\%1
U ovom izrazu %1 oznaava parametar batch fajla, tj. u naem sluaju, ime fajla koji
kompajliramo, tj. Test.as.
Kada koristimo CS IDE, u properties panelu podeavamo svojstva dokumenta, kao to
su veliina SWF-a, frame rate, boja pozadine itd. Ako koristimo command-line kompajler ovo
moemo da uradimo na vie naina. Prvi je da na komandnu liniju dodamo te parametre:
-default-background-color=color
-default-frame-rate=fps
-default-size=width,height
Jednostavno, ove parametre dodajemo na komandnu liniju posle imena klase:
(putanja)mxmlc.exe Test.as -default-background-color=0xff0000
Moemo da dodamo proizvoljan broj parametara koje meusobno razdvajamo
prazninom. Drugi nain je da ova svojstva dokumenta postavimo u metapodatke direktno u
nau klasu. Metapodaci se sastoje od naredbi koje nisu ActionScript naredbe koje se
kompiliraju ve ih kompajler koristi tokom procesa kompiliranja. Ovo se izvodi naredbom
SWF:
[SWF(backgroundColor="0xffffff", width="800", height="600", frameRate="31")]
Ova linija se u kod postavlja neposredno pre deklaracije klase.
3.4. FlashDevelop IDE

Okruenje koje preporuujemo za uenje i pravljenje ActionScript animacija je
besplatan paket FlashDevelop. Prva dobra osobina je to to je besplatan a druga to nas u
odnosu na rad sa komandne linije oslobaa pisanja putanja ili pravljenja batch fajlova. Pored
toga, njegov editor je napravljen po uzoru na Visual Studio, tako da omoguava simultani rad
na vie klasa koje su otvorene na tab panelima, kao i dibagovanje koda. Takoe postoji
inteligentna dopuna koda (IntelliSense). Uvodni prozor FlashDevelop-a je prikazan na slici
3.3.
Sl. 3-3 Poetna stranica razvojnog okruenja FlashDevelop

10
Iako su mogunosti ovog okruenja impozantne, za potrebe ovog kursa emo koristiti
samo njegov editor da bi pisali klase i dibager za putanje i proveravanje koda.
Sl. 3-4 Klasa Test u razvojnom FlashDevelop okruenju

Film pokreemo sa Tools => Flash Tools => Build Current File ili korienjem
preice Ctrl+F8.
3.5. Komanda trace

Komandom trace se ispisuje poruka u Output panelu Flea. Ova poruka nije deo filma
i najee se koristi u postupku razvoja programa za otkrivanje greaka u njemu ili kao
obavetenje programeru da se tokom izvravanja programa desio neki dogaaj. Ukoliko se
koristi CS IDE ove poruke se ispisuju automatski. Isto vai i za Flex Builder, s tim to film ne
treba da se pokrene naredbom run ve debug. Ukoliko se koristi naredba sa komandne linije
ili FlashDevelop stvar sa trace je komplikovanija. U naelu, koriste se open source trace
paneli, npr. Xpanel, koji moe da se skine sa www.ajaxmaker.com/xpanel/xpanel.htm.
Kako je potreba za ispisivanjem poruka u naelu potpuno marginalna i kako neke
bitne poruke moemo da ispisujemo direktno na ekranu tokom putanja filma, ovde neemo
detaljnije prikazivati kako se u besplatnim okruenjima moze da koristi trace naredba.
11
4. ANIMACIJA POMOU KODA

Poto smo odabrali okruenje u kome emo da proizvodimo nae ActionScript klase,
spremni smo da se upustimo u pravljenje ActionScript animacije.
4.1. Kretanje u petljama (looping)

Praktino svaka kodirana animacija sadri neku vrstu petlje. Ukoliko govorimo o
frame-by-frame animaciji, odgovarajui dijagram toka bi mogao da se prikae slikom 4.1. kao
serija slika gde je svaki frejm slika koju je jednostavno samo potrebno da prikaemo tokom
putanja filma.
prikaz
frejma1
prikaz
frejma2
prikaz
frejma3
prikaz
frejma..
Sl. 4-1 frame-by-frame animacija

Fle ne kreira novu sliku za svaki frejm, ak ni u frame-by-frame filmu. Za svaki
frejm, Fle belei poziciju, veliinu, boju, itd. za svaki objekt na sceni. Tako, da ako imamo
loptu koja se pomera preko scene, svaki frejm e imati zabeleenu poziciju lopte u tom
frejmu. Na primer, u frejmu1 lopta je 10 piksela od leve ivice, u frejmu2 15 piksela, itd. Fle
Player ita podatke, postavlja scenu prema datim opisima i prikazuje frejm. Ovo zovemo
renderovanje i prikazivanje (Sl. 4.2.).
render
frejma1
prikaz
frejma1
render
frejma2
prikaz
frejma2
Sl. 4-2 renderovanje i prikazivanje

Kada smo govorili o dinamikoj kodiranoj animaciji podrazumevali smo dijagram
toka koji bi odgovarao onom sa slike 4.3.
definii
poetno
stanje
render
frejma
prikaz
frejma
primena
pravila
Sl. 4-3 skript animacija

Kao to se vidi sa slike 4.3, vie nema frejma1, frejma2 itd. ActionScript animacija u
optem sluaju moe da se odvija na samo jednom frejmu. Kao prvo, ovde imamo definisanje
poetnog stanja. Ovo moemo da ureadimo na razne naine, na primer, prevlaenjem muvi
klipova na scenu ba kao to smo radili sa tweened animacijom u Fleu ili opisivanjem
kompletne scene pomou koda. Posle toga renderujemo i prikazujemo taj frejm.
12
Zatim, primenjujemo pravila. Pravila mogu da budu jednostavna, kao na primer,

Lopta e se pomeriti za 5 piksela udesno ili mogu da budu sastavljena od stotina linija
kompleksne trigonometrije. Primena pravila e rezultovati u novom opisu koji e tada da se
renderuje i prikae. I ponovo, sve na isti nain u krug. Ono to odmah zapaamo je da se u
svakom ciklusu primenjuje potpuno isti skup pravila. Nemamo pravilo za prvi frejm, pa onda
neko drugo pravilo za drugi, itd. Zbog ovoga je na izazov da postavimo takav skup pravila
koji e odgovoriti na svaku moguu situaciju koja e se pojaviti u naoj sceni. ta e se desiti
kad naa lopta stigne do desnog kraja scene? Na skup pravila mora da rauna sa ovakvom
situacijom.
U osnovi, polazimo od veoma jednostavnog ponaanja kreiranjem jednog ili dva
pravila, pa kada to profunkcionie dodajemo sledee pravilo. Ova pravila su ustvari
ActionScript naredbe. Svako pravilo moe da bude jedna ili vie naredbi. U primeru
pomeranja lopte za 5 piksela udesno, pravilo bi bilo:
ball.x = ball.x + 5 ; , odnosno:
ball.x += 5 ;
Stigli smo do take kada postavljeno pravilo elimo da stavimo u petlju da bi se naa
lopta pomerala kontinualno udesno. Svakome koji je ikada neto programirao namee se
jednostavan kod:
for(i = 0; i < 500; i++){
ball.x = i;
}
Ukoliko izvrimo ovaj kod videemo da se lopta ne pomera preko scene ve da se
jednostavno odjednom nalazi na njenom desnom kraju ili uopte ne vidi. Zato se lopta nije
pomerala na svaku od pozicija iz ciklusa? Ustvari, ona se ipak pomerala, ali mi to nismo imali
priliku da vidimo jer nismo ni jednom rekli Fleu da osvei ekran. Na slici 4.4. je prikazano
ono to se ustvari desilo.
definii
poetno
stanje
render
frejma
primena
pravila
kraj
ciklusa
da
prikaz
frejma
ne
Sl. 4-4 zato ne koristimo for ciklus za animaciju objekta

Mi smo ustvari primenili pravilo i pomerali loptu na poziciju i kreirali novu scenu 500
puta, ali tu scenu nismo prikazali sve dok ciklus nije zavren. To je zato to Fle osveava
ekran samo na kraju frejma. Ovo je veoma vana injenica. Evo niza akcija koje Fle
preduzima u svakom frejmu:
1. Pozicionira objekte koji su trenutno na sceni.
2. Izvrava ActionScript koji se poziva u tom frejmu.
3. Proverava da li je trenutak da prikae frejm. Ukoliko postavimo frame rate na 20
frejmova u sekundi, Fle proverava da li je prolo 50 milisekundi od trenutka kada je
prikazan prethodni frejm, i ako jeste, prikazae frejm koji je upravo renderovan i prei
na sledei frejm.
13
ta ako je vreme potrebno za renderovanje due od predvienog vremena za frejm?

Fle e nastaviti sa izvravanjem take dva, ak i ako ovo uspori frame rate. Ustvari, Fle e
ekati i do 15 sekundi da se skript izvri, a onda prikazati uvenu poruku A script is causing
the player to run slowly.
Prema tome, ono to je potrebno da uradimo je da petlju napravimo preko dva frejma,
tj da koristimo framo loops.
4.2. Frame loops

U uvodnom razmatranju je reeno da nam je koncept ActionScript programiranja
takav da ne koristimo vremensku liniju i stavljanje sadraja na individualne frejmove. Ideja sa
frame loops potie jo od najranijih verzija Flea kada ActionScript nije bio tako moan kao
danas. ideja je se postavi kod na odreeni frejm, a na sledei frejm postavi naredba, najee
gotoAndPlay, koja alje prikaz na prethodni frejm. Ovo postavlja beskonanu petlju izmeu
ova dva frejma. Na primer, frejm1 bi imao kod ball.x ++;, a frejm2 kod gotoAndPlay(1);
Ustvari, frejm2 ne treba da sadri nikakav kod, jer se vremenska linija automatski vraa na
poetak, tj. na frejm1.
4.3. Dogaaji i rukovaoci dogaaja

Jedna od najznaajnijih promena u Fleu je nova arhitektura dogaaja koja i
najsloenija ponaanja ini mnogo jednostavnijim nego to je to bilo u ranijim verzijama. U
ovom kursu se podrazumeva da studenti poseduju znanja o dogaajima, rukovaocima
dogaaja, i oslukivaima, tako da e ovde biti prikazani samo specifini pojmovi vezani za
ActionScript.
Oslukiva (listener) je objekat koji belei deavanje dogaaja. Klasa se specificira
kao oslukiva odreenog dogaaja, pozivom funkcije addEventListener. Argumenti su ime
dogaaja koji se oslukuje i ime funkcije u naoj klasi koja e biti rukovaoc dogaaja, na
primer:
addEventListener("enterFrame", onEnterFrame);
U ovakvoj sintaksi ime dogaaja je string, te je podloan grekama u pisanju, jer ako
umesto enterFrame otkucamo enteFrame, kompajler nee prikazati greku i mi emo da se
ubijemo dok ne ustanovimo zato nam kod ne radi. Mnogo bolja sintaksa je:
addEventListener(Event.ENTER_FRAME, onEnterFrame);
Ime funkcije moe da se izabere proizvoljno, mogli smo umesto onEnterFrame da
stavimo PoetakFrejma. Ipak, postoji veoma korisna konvencija da se imena daju tako da
ukazuju na ono to predstavljaju, te je stvarno veoma pogodno da se usvoji da u imenu
funkcije bude ba ime dogaaja i da poinje sa on ime se ukazuje da se radi o reagovanju na
dogaaj.
Ukoliko ne elimo da oslukiva vie oslukuje dogaaj pozivamo metod
removeEventListener, npr:
removeEventListener(Event.ENTER_FRAME, onEnterFrame);
14
Ono to esto zbunjuje je da koristimo dogaaj EnterFrame iako najee na film ima
samo jedan frejm. Ustvari, EnterFrame moemo da posmatramo kao tajmer. Na osnovu frame
rate, Fle izraunava koliko vremena traje svaki frejm i u tom intervalu ispaljuje ove
dogaaje. Ukoliko postoji sledei frejm, prelazi na njega, a ako nema, vraa se na prvi. Sada
moemo da napiemo kod PrvaAnimacija za loptu koja se pomera na desno preko ekrana
(Sl. 4.5):
package {
import flash.events.Event;
public class PrvaAnimacija extends Sprite {
private var ball:Sprite;
public function PrvaAnimacija() {
init();
}
ball = new Sprite();
addChild(ball);
ball.graphics.beginFill(0xff0000);
ball.graphics.drawCircle(0, 0, 40);
ball.x = 20;
ball.y = stage.stageHeight / 2;
ball.addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onEnterFrame(event:Event):void {
ball.x ++;
}
}
}
Sl. 4-5 pomeranje crvene lopte sa leva na desno preko ekrana
4.2 Vebanja
Jednostavni kod sa slike 4.5. ima sve neophodne elemente za jednostavnu statiku
animaciju. Sada moemo raznovrsnim jednostavnim promenama u funkciji onEnterFrame da
menjamo putanju loptice ili da iscrtavamo neku krivu. Neke od takvih modifikacija su
prikazane u sledeih pet document klasa.
package {
public class DvePutanje extends Sprite {
private var boja:uint = 0xff0000;
private var ugao:Number = 0;
public function DvePutanje() {
init();
}
addChild(ball);
ball.graphics.beginFill(boja);
ball.x = 20;
15
ball.addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onEnterFrame(event:Event):void {
if (ball.x > stage.stageWidth / 2)
{
ball.y = stage.stageHeight / 2 + Math.sin(ugao) * 50;
ugao += .1;
} else
{
ball.x ++;
}
}
}
}
Sl. 4-6 Dve razliite putanje loptice

package {
public class Pulsiranje extends Sprite {
private var angle:Number = 0;
private var centerScale:Number = 1;
private var range:Number = .5;
private var speed:Number = .1;
public function Pulsiranje() {
init();
}
addChild(ball);
ball.x = stage.stageWidth / 2;
}
public function onEnterFrame(event:Event):void {
ball.scaleX = ball.scaleY = centerScale + Math.sin(angle)
* range;
angle += speed;
}
}
}
Sl. 4-7 Pulsiranje loptice

package {
public class ParametriPutanje extends Sprite {
private var angleX:Number = 0;
private var angleY:Number = 0;
private var centerX:Number = 200;
private var centerY:Number = 200;
private var range:Number = 50;
private var xspeed:Number = .07;
16
private var yspeed:Number = .11;

public function ParametriPutanje () {
init();
}
addChild(ball);
ball.x = 0;
}
ball.x = centerX + Math.sin(angleX) * range;
ball.y = centerY + Math.sin(angleY) * range;
angleX += xspeed;
angleY += yspeed;
}
}
}
Sl. 4-8 Putanja koja zavisi od parametara range, xspeed i yspeed
package {
public class SinusnaPutanja extends Sprite {
private var xspeed:Number = 1;
public function SinusnaPutanja ()
{
init();
}
addChild(ball);
ball.x = 0;
}
ball.x += xspeed;
ball.y = centerY + Math.sin(angle) * range;
angle += yspeed;
}
}
}
Sl. 4-9 Sinusna putanja
17
package {
public class Crtanje extends Sprite {
private var xspeed:Number = 1;
private var xpos:Number;
private var ypos:Number;
public function Crtanje()
{
init();
}
xpos = 0;
graphics.lineStyle(1, 0, 1);
graphics.moveTo(0, centerY);
}
xpos += xspeed;
angle += yspeed;
ypos = centerY + Math.sin(angle) * range;
graphics.lineTo(xpos, ypos);
}
}
}
Sl. 4-10 Iscrtavanje krive
5. DISPLAY LISTA
Svaki objekat koji se pojavljuje na sceni je kreiran od klase koja nasleuje klasu
DisplayObject. Drugim reima, svi objekti (movie clips, dugmad buttons, tekstualna polja
text fields, grafika graphics, bitmaps, komponente, osnovni oblici basic shapes) su deo
velike familije koji se ponaaju na isti osnovni nain u smislu njihovog kreiranja, postavljanja
na scenu, unitavanja i manipulisanja na sceni. Zbog ovoga je kod za kreiranje razliitih
tipova objekata meusobno veoma slian:
var mojTextfield:TextField = new TextField();
var mojMovieClip:MovieClip = new MovieClip();
var mojSprite:Sprite = new Sprite();
Kao to smo videli u prethodnim primerima, sada moemo da crtamo neki sadraj u
kreirani objekt, kao npr:
mojSprite.graphics.beginFill(0xff0000);
mojSprite.graphics.drawCircle(0, 0, 40);
mojSprite.graphics.endFill();
Meutim, ako pokuamo da prikaemo ovo, teko da emo bilo ta videti. Na ovom
mestu nastupa naa diskusija o Display listi.
18
Display listu moemo da zamislimo kao stablo svih vizuelnih objekata u vaem filmu.
U korenu stabla je scena, koja je uvek vidljiva. Na sceni moete da imate nekoliko movie
clip-ova ili nekih drugih vizuelnih objekata. Kada ih unesete na scenu oni postaju takoe
vidljivi. U okviru tih objekata moete da imate druge vizuelne objekte, a u njima druge, itd i
to u osnovi predstavlja vau display listu. U AS3, kada kreirate vizuelni objekat on nije
automatski ubaen na display listu. Ako pojam scena uzmemo bukvalno, vizuelne objekte
moemo da zamislimo kao glumce koji stoje iza zavese i publika ih ne vidi sve dok ne nastupi
trenutak kada njihova uloga to od njih zahteva. Takoe, display listu moemo da zamislimo
kao familiju, tj. seriju relacija roditelj-dete. Kada dodajete novi objekat na display listu,
objekat kome ste dodali novi objekat je roditelj, a novi objekat je roditeljevo dete. Zbog
ovoga, kada dodajete objekat na listu, to radite pomou addChild metode.
Document klasa predstavlja koren stabla koji je automatski vidljiv, i kome po potrebi
dodajete naslednike i naslednike tim naslednicima:
addChild(mojSprite);
Sada posedujemo dovoljno znanja da iskoristimo nasleivanje da bi objekat premestili
sa jednog roditelja na drugi.
package {
public class PromenaRoditelja extends Sprite {
private var parent1:Sprite;
private var parent2:Sprite;
public function PromenaRoditelja() {
init();
}
parent1 = new Sprite();
addChild(parent1);
parent1.graphics.lineStyle(1, 0);
parent1.graphics.drawRect(-50, -50, 100, 100);
parent1.x = 60;
parent1.y = 60;
parent2 = new Sprite();
addChild(parent2);
parent2.graphics.lineStyle(1, 0);
parent2.graphics.drawRect(-50, -50, 100, 100);
parent2.x = 170;
parent2.y = 60;
parent1.addChild(ball);
ball.addEventListener(MouseEvent.CLICK, onBallClick);
}
19
public function onBallClick(event:MouseEvent):void

{
}
}
}
Sl. 5-1 Prebacivanje kruga iz jednog kvadrata u drugi

U ovom kodu nam je sve poznato (drawRect koristimo za crtanje pravougaonika). Na
Slici 5.2. malo modifikujemo kod da bi lopticu mogli sukcesivno da prebacujemo sa jednog
pravougaonika na drugi i nazad.
package {
public class PromenaRoditelja2 extends Sprite {
private var parent1:ParentKvadrat;
public function PromenaRoditelja2() {
init();
}
parent1 = new ParentKvadrat();
addChild(parent1);
parent1.x = 60;
parent1.y = 60;
parent2 = new ParentKvadrat();
addChild(parent2);
parent2.x = 170;
parent2.y = 60;
ball.addEventListener(MouseEvent.DOUBLE_CLICK, onBallDClick);
ball.doubleClickEnabled = True
}
{
}
public function onBallDClick(event:MouseEvent):void
{
}
}
}
Sl. 5-2 Sukcesivno prebacivanje kruga

Za vebu moete da pokuate da napiete kod kojim bi se koristio samo onBallClick,
tako to bi se ispitalo koji je trenutni roditelj objekta, pa na osnovu toga objekat premestio na
drugog roditelja.
20
5.1. Podklase display objekata

U prethodnim primerima moemo da zapazimo da se u svakoj document klasi
ponavlja veliki broj istih naredbi. Ovo ponavljanje potie iz dva razloga: prvi nastaje samim
definicijama klase, paketa i import klauzule i to je ablon koji intellisense okruenja u kome
piete moe sam da napravi. Drugo ponavljanje potie jer smo u skoro svim primerima
koristili iste display objekte te smo ih u svakoj klasi iscrtavali na isti nain, npr. za krug smo
pisali:
ball.graphics.endFill();
ball.x = 20;
U AS3 jednostavno definiete klasu koja predstavlja va display objekt i zatim u

document klasi napravite instancu te klase pomou klauzule new. U kodu sa slike 5.2 koristi
se takva klasa ParentKvadrat koja predstavlja objekat kvadrata (slika 5.3.).
package {
public class ParentKvadrat extends Sprite {
Public Function ParentKvadrat()
{
init();
}
private function init():void
{
graphics.lineStyle(1, 0);
graphics.drawRect(-50, -50, 100, 100);
}
}
}
Sl. 5-3 Klasa ParentKvadrat

Iz koda se vidi da smo u definiciju klase uneli vrstu linije kojom se iscrtava kvadrat i
definisali x i y pozicije (-50) odakle crtanje polazi kao i irinu i visinu (100). Ako sad
pogledamo kod na slici 5.2. vidimo da parent1 i parent2 vie ne nasleuju Sprite, ve klasu
ParentKvadrat:
Imamo potpunu slobodu da biramo ta e u definiciji klase biti uvek isto, a ta e se preko
parametara menjati prilikom definisanja instance te klase u naoj document klasi. Na primer,
gornji kvadrat moemo da definiemo i kao:
package {
public class ParentKvadrat extends Sprite {
private var xPos:Number;
private var yPos:Number;
public function ParentKvadrat(X:Number=50, Y:Number=50)
{
21
this.xPos = X;
this.yPos = Y;
init();
}
{
graphics.lineStyle(1, 0);
graphics.drawRect( -50, -50, 100, 100);
this.x = xPos;
this.y = yPos;
}
}
}
Sl. 5-4 Drugi nain definisanja klase ParentKvadrat

Ako sada napravimo i klasu objekta krug (Sl. 5.5.), definicija nae document klase sa
slike 5.2. postaje mnogo kraa i preglednija.
package {
public class Krug extends Sprite {
private var radius:Number;
private var color:uint;
public function Krug(radius:Number=40, color:uint=0xff0000) {
this.radius = radius;
this.color = color;
init();
}
public function init():void {
graphics.beginFill(color);
graphics.drawCircle(0, 0, radius);
graphics.endFill();
}
}
}
Sl. 5-5 Klasa Krug

package {
public class PromenaRoditelja2 extends Sprite {
private var ball:Krug
public function PromenaRoditelja2() {
init();
}
parent1 = new ParentKvadrat(60, 60);
addChild(parent1);
parent2 = new ParentKvadrat(170, 60);
addChild(parent2);
ball = new Krug(40, 0xff0000);
ball.addEventListener(MouseEvent.DOUBLE_CLICK, onBallDClick);
ball.doubleClickEnabled = True
22
}
{
}
public function onBallDClick(event:MouseEvent):void
{
}
}
}
Sl. 5-6 Izmenjena klasa PreomenaRoditelja2
5.2. Interakcija korisnika

Interakcija korisnika je jedan od glavnih razloga zato koristite Action Script jer bez
nje, odnosno bez dinamikog ulaza u va film, jednostavno bi koristili twinove i pravili
statike animacije. Ustvari, o ovoj interakciji smo skoro sve ve rekli jer je ona bazirana na
korisnikim dogaaima koji se generalno svode na samo dva tipa: dogaaje mia i dogaaje
tastature.
5.2.1. Dogaaji mia

Dogaaji mia su doiveli dramatine promene u AS3. U AS2 klipovi su bili sluai za
sve dogaaje mia. U AS3 bilo koji objekat moe da se proglasi za sluaa dogaaja. Takoe,
da bi se ispalio dogaaj mia, neophodno je da se kursor mia nalazi iznad nekog vidljivog
dela objekta koji ga oslukuje. U AS2 ovi dogaaji su se ispaljivali za svaki klip, bez obzira
gde se kursor mia nalazio. Raspoloiva svojstva dogaaja mia u MouseEvent klasi su:
CLICK
DOUBLE_CLICK
MOUSE_DOWN
MOUSE_MOVE
MOUSE_OUT
MOUSE_OVER
MOUSE_UP
MOUSE_WHEEL
ROLL_OUT
ROLL_OVER
Dogaaji jasno opisuju sami sebe, tako da dodatna objanjenja nisu potrebna. Da bi se ipak
stekao oseaj o njima, pustite sledei kod i dobiete imena dogaaja ispisana u tekstualnom
polju u zavisnosti od trenutnog poloaja mia.
package {
import flash.events.MouseEvent;
import flash.text.TextField;
public class MouseEvents extends Sprite {
private var textField:TextField;
public function MouseEvents() {
23
init();
}
{
var sprite:Sprite = new Sprite();
addChild(sprite);
sprite.graphics.beginFill(0xff0000);
sprite.graphics.drawCircle(0, 0, 50);
sprite.x = stage.stageWidth / 2;
sprite.y = stage.stageHeight / 2;
sprite.addEventListener(MouseEvent.CLICK, onMouseEvent);
sprite.addEventListener(MouseEvent.DOUBLE_CLICK, onMouseEvent);
sprite.addEventListener(MouseEvent.MOUSE_DOWN, onMouseEvent);
sprite.addEventListener(MouseEvent.MOUSE_MOVE, onMouseEvent);
sprite.addEventListener(MouseEvent.MOUSE_OUT, onMouseEvent);
sprite.addEventListener(MouseEvent.MOUSE_OVER, onMouseEvent);
sprite.addEventListener(MouseEvent.MOUSE_UP, onMouseEvent);
sprite.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseEvent);
sprite.addEventListener(MouseEvent.ROLL_OUT, onMouseEvent);
sprite.addEventListener(MouseEvent.ROLL_OVER, onMouseEvent);
textField = new TextField();
addChild(textField);
}
public function onMouseEvent(event:MouseEvent):void
{
textField.text = event.type;
}
}
}
Sl. 5-7 Dogaaji mia

Treba da zapazite da se koristi isti rukovaoc (handler) za sve dogaaje: onMouseEvent.
5.2.2. Dogaaji tastature

esto imate potrebu ne samo da znate da je pritisnuto neko dugme na tastaturi, ve i o
kom se dugmetu radi. Postoji vie naina da dobijete ovu informaciju od rukovaoca dogaaja
tastature. Rukovaoc dogaaja prosleuje objekat koji ga je inicirao, zajedno sa podacima o
tom dogaaju. U dogaaju tastature, postoje dva parametra koja se odnose na podatak koje
dugme je prouzrokovalo dogaaj: charCode i keyCode.
Svojstvo charCode daje aktuelni karakter koji predstavlja dugme koje je upravo
pritisnuto. Na primer, ako korisnik pritisne dugme a na tastaturi charCode e sadrati string
a. Ukoliko korisnik takoe dri pritisnuto i dugme Shift, charCode e sadrati A.
Karakter keyCode sadri broj koji predstavlja fiziko dugme koje je pritisnuto.
Ukoliko korisnik pritisne dugme a, keyCode e sadrati broj 65, bez obzira koja ostala
dugmad su istovremeno pritisnuta. Ukoliko korisnik prvo pritisne Shift, a zatim a,
dobiete dva dogaaja tastature: jedan za Shift (keyCode 16) a zatim jedan za a (65).
24
Klasa flash.ui.Keyboard sadri svojstva za nealfanumeriku dugmad, tako da ne treba

da se pamte njihovi kodovi. Na primer, Keyboard.SHIFT je jednak broju 16. Na slici 5.7. je
kod koji dogaaje tastature koristi za pomeranje kruga.
package {
import flash.events.KeyboardEvent;
import flash.ui.Keyboard;
public class KeyCodes extends Sprite {
private var ball:Krug;
public function KeyCodes() {
init();
}
ball = new Krug(40, 0xff0000);
addChild(ball);
ball.x = stage.stageWidth / 2;
stage.addEventListener(KeyboardEvent.KEY_DOWN, onKBEvent);
}
public function onKeyboardEvent(event:KBEvent):void {
switch(event.keyCode) {
case Keyboard.UP :
ball.y -= 10;
break;
case Keyboard.DOWN :
ball.y += 10;
break;
case Keyboard.LEFT :
ball.x -= 10;
break;
case Keyboard.RIGHT :
ball.x += 10;
break;
default:
break;
}
}
}
}
Sl. 5-8 Dogaaji tastature
25
6. TEHNIKE RENDEROVANJA
Ovako rogobatan naslov proizilazi iz neadekvatnih srpskih rei za strane tehnike
izraze. Najpribliniji prevod za render je prikazivanje, ali u svetu proizvodnje filmova
smisao je mnogo iri i obuhvata i irok spektar aktivnosti vezanih za samo prikazivanje. U
ovoj glavi e biti prikazani najvaniji segmenti kreiranja vizuelnog sadraja, i to: boje, API za
crtanje, transformacije boja, filteri i bitmap klasa.
6.1. Boje u Fleu

U Fleu su boje predstavljene brojevima od 0 do 16,777,215 kao 24-bitne veliine.
Znai, postoji 16,777,216 moguih vrednosti boja, to se dobija od 256 256 256. Fle
koristi RGB boje, to znai da je svaka boja sastavljena od crvene, zelene i plave komponente.
Svaka od ovih komponenti ima vrednost izmeu 0 i 255. Ovo se naziva 24-bitni sistem boja
poto je 8 bitova potrebno da bi se predstavio broj 255.
6.1.1. Korienje heksadecimalnih vrednosti boja

U AS-u se koristi prefiks 0x za oznaavanje heksadecimalnog broja. Na primer, 0xF je
jednako 15, a 0x10 je jednako 16. Za 24-bitne boje opseg je, prema tome od 0x000000 do
0xFFFFFF. Ovaj sistem je odabran jer ovih est cifara mogu da se razbiju u tri grupe od po
dve cifre, pri emu prvi par predstavlja crvenu komponentu, drugi zelenu, a trei plavu.
Ovakav prikaz je mnogo podesniji od decimalnog, jer ako nam neko da vrednost boje
11,273,634 u decimalnom sistemu, o toj boji moemo malo ta da kaemo, ali ako taj broj
pretvorimo u heksadecimalni 0xAC05A2 odmah vidimo da je boja sastavljena od visokih
vrednosti za crvenu i plavu i niske za zelenu, to nas dalje navodi na zakljuak da se radi o
nekoj purpurnoj boji, to nikad ne bismo mogli da zakljuimo iz njenog decimalnog prikaza.
6.1.2. Transparentnost i 32-bitne boje

Kao dodatak 24-bitnom sistemu boja postoje 32-bitne boje koje koriste dodatna 8 bita
za definisanje transparentnosti, odnono, na srpskom, providnosti. U heksadecimalnom zapisu
32'bitne boje, prve dve cifre oznaavaju transparentnost: 0xAARRGGBB, gde A oznaava
transparentnost, odnosno tzv. alfa kanal. Prema tome, 0XFFFFFF predstavlja neprovidnu
belu boju, 0x00FFFFFF potpuno transparentnu belu boju, a 0x80FFFFFF priblino 50%
providnu belu boju.
6.1.3. Kombinovanje boja

Pretpostavimo da imamo tri promenljive red, green i blue u kojima su vrednosti
odgovarajuih boja i da elimo da napravimo sloenu boju sastavljenu od ovih komponenti.
Treba naglasiti da AS3, pored tipa Number koji je korien u ranijim verzijama kao jedini tip
za predstavljanje brojnih vrednosti, uvodi i tipove int i uint za cele brojeve. U int smetamo i
26
pozitivne i negativne cele brojeve, te je prvi od 32 bita kojima se predstavljaju ovi brojevi
rezervisan za znak. U uint smetamo samo pozitivne cele brojeve, te je jasno da je
maksimalna dozvoljena vrednost za ovaj tip duplo vea od tipa int, konkretno, u int ne moe
da se smeste sve 32-bitne vrednosti boja, a u uint mogu. Naredba za kombinovanje osnovnih
boja sadri operacije kojima se bitovi pomeraju ulevo:
color24 = red << 16 | green << 8 | blue;
color32 = alpha << 24 | red << 16 | green << 8 | blue;
Kada heksadecimalni broj 0xRRGGBB pretvorimo u binarni, dobijamo niz

RRRRRRRRGGGGGGGGBBBBBBBB
U ovoj formuli operator nad bitovima << n pomera bitove ulevo za n mesta. Pretpostavimo
da je vrednost promenljive red 0xFF, odnosno 255, odnosno binarno 11111111. Pomeranjem
16 mesta ulevo dobijamo:
111111110000000000000000
Neka je dalje vrednost promenljive green 0x55, odnosno 85 decimalno, odnosno 01010101
binarno. Pomeranjem 8 mesta ulevo, dobijamo:
000000000101010100000000
Konano, neka je blue 0xF3, tj. 243, tj 11110011.

111111110000000000000000
000000000101010100000000
000000000000000011110011
Korienjem logike ili operacije zaista dobijamo traenu sloenu boju:You could simply add
111111110101010111110011
Ako ovo sada konvertujemo u hex, dobijamo 0xFF55F3.

Za 32-bitne boje postupak je potpuno analogan.
6.1.4. Ekstrakcija komponentnih boja
Ukoliko elimo da iz sloene boje izdvojimo komponente, kompletan postupak je
obrnut u odnosu na prethodni. Umesto logikog operatora ili koristi se operator i koji daje
jedinicu samo kada su obe vrednosti jedan.
red = color24 >> 16;
green = color24 >> 8 & 0xFF;
blue = color24 & 0xFF;
Za 32-bitne boje formule su:

alpha = color32 >> 24;
red = color32 >> 16 & 0xFF;
green = color32 >> 8 & 0xFF;
blue = color32 & 0xFF;
6.2. API za crtanje

API oznaava application programming interface, odnosno interfejs za pristup
aplikaciji, a sutinski predstavlja skup metoda i svojstava koje koristimo u naim programima
za pristupanje odreenom skupu postupaka i svojstava. API za crtanje, drawing API , se
odnosi na svojstva i metode koje nam omoguuju da crtamo linije, krive, bojimo, pravimo
prelaze boja itd. Lista metoda je data na slici 6.1.
27
clear()
lineStyle(width, color, alpha)
moveTo(x, y)
lineTo(x, y)
curveTo(x1, y1, x2, y2)
beginFill(color, alpha)
endFill()
beginGradientFill(fillType, colors, alphas, ratios, matrix)
drawCircle(x, y, radius)
drawEllipse(x, y, width, height)
drawRect(x, y, width, height)
drawRoundRect(x, y, width, height, ellipseWidth, ellipseHeight)
Sl. 6-1 Lista metoda za drawing API

Veina metoda je oigledna i naljbolje e biti prikazana kroz sledee primere. API za
crtanje se pristupa preko klasa MovieClip i Sprite, npr:
mojSprite.graphics.lineTo(100, 100);
6.2.1. lineStyle, lineTo, moveTo

Kod na slici 6.2. nam omoguuje da crtamo po panelu dok drimo pritisnuto levo
dugme mia.
package {
public class DrawingApp extends Sprite
{
Public Function DrawingApp()
{
init();
}
{
graphics.lineStyle(1);
stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
}
private function onMouseDown(event:MouseEvent):void
{
graphics.moveTo(mouseX, mouseY);
stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
}
private function onMouseUp(event:MouseEvent):void
{
stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
}
private function onMouseMove(event:MouseEvent):void
{
graphics.lineTo(mouseX, mouseY);
}
}
}
Sl. 6-2 Crtanje miom po panelu

28
Sledeim kodom crtamo krive izmeu taaka, tako da poloaj mia predstavlja
kontrolnu taku.
package {
public class DrawingCurves
{
private var x0:Number =
private var y0:Number =
private var x1:Number;
private var y1:Number;
private var x2:Number =
private var y2:Number =
extends Sprite
100;
200;
300;
200;
Public Function DrawingCurves()

{
init();
}
{
stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
}
private function onMouseMove(event:MouseEvent):void
{
x1 = mouseX;
y1 = mouseY;
graphics.clear();
graphics.moveTo(x0, y0);
graphics.curveTo(x1, y1, x2, y2);
}
}
}
Sl. 6-3 Crtanje krivih

Sada emo da nacrtamo krive koje spajaju 9 proizvoljnih taaka, tako da uvek srednja
taka bde kontrolna taka.
package {
public class MultiCurves1 extends Sprite
{
private var numPoints:uint = 9;
Public Function MultiCurves1()
{
init();
}
{
// formiranje niza sluajnih taaka
var points:Array = new Array();
for (var i:int = 0; i < numPoints; i++)
{
points[i] = new Object();
points[i].x = Math.random() * stage.stageHeight;
points[i].y = Math.random() * stage.stageHeight;
29
}
// pomeranje na prvu taku
graphics.moveTo(points[0].x, points[0].y);
// prelaz na naredne parove
for (i = 1; i < numPoints; i += 2)
{
graphics.curveTo(points[i].x, points[i].y,
points[i + 1].x, points[i + 1].y);
}
}
}
}
Sl. 6-4 Otri prelazi izmeu krivih
Kada pustimo film vidimo da su prelazi izmeu segmenata otri, kao oni sa slike 6.5.
Sl. 6-5 Izgled krivih dobijenih kodom sa Sl. 6-5.

Da bi dobili blage prelaze, uvodimo sredinje take izmeu kojih crtamo krive. Ovo je
pojednostavljeno prikazano na slici 6.6, dok je kod prikazan na slici 6.7.
30
Sl. 6-6 Uvoenje sredinjih taaka

package {
{
{
init();
}
{
{
}
graphics.moveTo(points[0].x, points[0].y);
for (i = 1; i < numPoints - 2; i ++)
{
var xc:Number = (points[i].x + points[i + 1].x) / 2;
var yc:Number = (points[i].y + points[i + 1].y) / 2;
graphics.curveTo(points[i].x, points[i].y, xc, yc);
}
graphics.curveTo(points[i].x, points[i].y, points[i+1].x,
points[i+1].y);
}
}
}
Sl. 6-7 Blagi prelazi izmeu krivih

Izgled krivih je sada:
31
Sl. 6-8 Potpuno glatka kriva

Jo nam ostaje da zatvorimo krivu i to postiemo sledeim kodom:
package {
{
{
init();
}
{
{
}
// pomeraj na prvu sredinju taku
var xc1:Number = (points[0].x + points[numPoints - 1].x) / 2;
var yc1:Number = (points[0].y + points[numPoints - 1].y) / 2;
graphics.moveTo(xc1, yc1);
// kriva kroz ostale take
for (i = 0; i < numPoints - 1; i ++)
{
var xc:Number = (points[i].x + points[i + 1].x) / 2;
var yc:Number = (points[i].y + points[i + 1].y) / 2;
graphics.curveTo(points[i].x, points[i].y, xc, yc);
}
// kriva od zadnje take do prve sredinje take
graphics.curveTo(points[i].x, points[i].y, xc1, yc1);
}
}
}
Sl. 6-9 Zatvorena kriva

32
Izgled zatvorene krive bi bio:
Sl. 6-10 Zatvorena glatka kriva
6.2.2. Vane geometrijske i trigonometrijske formule

Iako spada u gradivo osnovne kole, podsetiemo se osnovnih jednaina koje redovno
koristimo prilikom iscrtavanja objekata.
Raunanje osnovnih trigonometrijskih funkcija:
sin = suprotna / hipotenuza
cos = nalegla / hipotenuza
tg = suprotna / nalegla
Konverzija radijana u stepene i obrnuto:

radians = degrees * Math.PI / 180
degrees = radians * 180 / Math.PI
Rotacija prema miu:

dx = mouseX - sprite.x;
dy = mouseY - sprite.y;
sprite.rotation = Math.atan2(dy, dx) * 180 / Math.PI;
Sinusni talasi:
public function onEnterFrame(event:Event){
value = center + Math.sin(angle) * range;
angle += speed;
}
Kreiranje krugova:
xposition = centerX + Math.cos(angle) * radius;
yposition = centerY + Math.sin(angle) * radius;
angle += speed;
}
Kreiranje elipsi:
xposition = centerX + Math.cos(angle) * radiusX;
yposition = centerY + Math.sin(angle) * radiusY;
angle += speed;
}
33
Rastojanje izmeu dve take:

dx = x2 x1;
dy = y2 y1;
dist = Math.sqrt(dx*dx + dy*dy);
Kao ilustraciju emo napraviti animaciju u kojoj se uta strelica koja se nalazi na
centru panela okree prema trenutnom poloaju mia. Na slici 6-11 je prikazana klasa koja
predstavlja nau utu strelicu, a na 6-12 kod za okretanje strelice prema miu.
package {
public class Strelica extends Sprite {
public function Strelica() {
init();
}
public function init():void {
graphics.beginFill(0xffff00);
graphics.moveTo(-50, -25);
graphics.lineTo(0, -25);
graphics.lineTo(0, -50);
graphics.lineTo(50, 0);
graphics.lineTo(-50, 25);
graphics.lineTo(-50, -25);
graphics.endFill();
}
}
}
Sl. 6-11 Strelica

package
{
public class RotateToMouse extends Sprite {
private var arrow:Strelica;
public function RotateToMouse()
{
init();
}
arrow = new Arrow();
addChild(arrow);
arrow.x = stage.stageWidth / 2;
arrow.y = stage.stageHeight / 2;
}
var dx:Number = mouseX - arrow.x;
var dy:Number = mouseY - arrow.y;
var radians:Number = Math.atan2(dy, dx);
arrow.rotation = radians * 180 / Math.PI;
}
}
}
Sl. 6-12 Okretanje strelice prema miu

34
Sledei kod ispisuje u tekstualno polje trenutna rastojanja mia od centra panela:
package
{
import flash.text.TextField;
public class MouseDistance extends Sprite {
private var sprite1:Sprite;
private var textField:TextField;
public function MouseDistance()
{
init();
}
sprite1 = new Sprite();
addChild(sprite1);
sprite1.graphics.beginFill(0x000000);
sprite1.graphics.drawRect(-2, -2, 4, 4);
sprite1.graphics.endFill();
sprite1.x = stage.stageWidth / 2;
sprite1.y = stage.stageHeight / 2;
textField = new TextField();
addChild(textField);
stage.addEventListener(MouseEvent.MOUSE_MOVE,
onMouseMove);
}
public function onMouseMove(event:MouseEvent):void {
graphics.clear();
graphics.moveTo(sprite1.x, sprite1.y);
graphics.lineTo(mouseX, mouseY);
var dx:Number = sprite1.x - mouseX;
var dy:Number = sprite1.y - mouseY;
var dist:Number = Math.sqrt(dx * dx + dy * dy);
textField.text = dist.toString();
}
}
}
Sl. 6-13 Rastojanja od centra do mia
35

As3 PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

As3 PDF

Enviado por

Direitos autorais:

Formatos disponíveis

Sadraj

OSNOVNI KONCEPTI ANIMACIJE ............................................................................... 4

ACTION SCRIPT OKRUENJA....................................................................................... 6

ANIMACIJA POMOU KODA ...................................................................................... 12

DISPLAY LISTA .............................................................................................................. 18

TEHNIKE RENDEROVANJA ........................................................................................ 26

2. OSNOVNI KONCEPTI ANIMACIJE

2.1. Programirani frejmovi

2.2. Dinamika animacija

3. ACTION SCRIPT OKRUENJA

3.1. Flash CS IDE

Sl. 3-1 Startni prozor Flash-a

Sl. 3-2 Unoenje imena klase u Properties panelu

3.2. Flex Builder Flash Builder

3.3. Command-line kompajler

3.4. FlashDevelop IDE

Sl. 3-3 Poetna stranica razvojnog okruenja FlashDevelop

Sl. 3-4 Klasa Test u razvojnom FlashDevelop okruenju

3.5. Komanda trace

4. ANIMACIJA POMOU KODA

4.1. Kretanje u petljama (looping)

Sl. 4-1 frame-by-frame animacija

Sl. 4-2 renderovanje i prikazivanje

Sl. 4-3 skript animacija

Zatim, primenjujemo pravila. Pravila mogu da budu jednostavna, kao na primer,

Sl. 4-4 zato ne koristimo for ciklus za animaciju objekta

ta ako je vreme potrebno za renderovanje due od predvienog vremena za frejm?

4.2. Frame loops

4.3. Dogaaji i rukovaoci dogaaja

Sl. 4-5 pomeranje crvene lopte sa leva na desno preko ekrana

Sl. 4-6 Dve razliite putanje loptice

Sl. 4-7 Pulsiranje loptice

private var yspeed:Number = .11;

Sl. 4-8 Putanja koja zavisi od parametara range, xspeed i yspeed

Sl. 4-9 Sinusna putanja

Sl. 4-10 Iscrtavanje krive

public function onBallClick(event:MouseEvent):void

Sl. 5-1 Prebacivanje kruga iz jednog kvadrata u drugi

Sl. 5-2 Sukcesivno prebacivanje kruga

5.1. Podklase display objekata

U AS3 jednostavno definiete klasu koja predstavlja va display objekt i zatim u

Sl. 5-3 Klasa ParentKvadrat

Sl. 5-4 Drugi nain definisanja klase ParentKvadrat

Sl. 5-5 Klasa Krug

Sl. 5-6 Izmenjena klasa PreomenaRoditelja2

5.2. Interakcija korisnika

5.2.1. Dogaaji mia

Sl. 5-7 Dogaaji mia

5.2.2. Dogaaji tastature

Klasa flash.ui.Keyboard sadri svojstva za nealfanumeriku dugmad, tako da ne treba

Sl. 5-8 Dogaaji tastature

6.1. Boje u Fleu

6.1.1. Korienje heksadecimalnih vrednosti boja

6.1.2. Transparentnost i 32-bitne boje

6.1.3. Kombinovanje boja

Kada heksadecimalni broj 0xRRGGBB pretvorimo u binarni, dobijamo niz

Konano, neka je blue 0xF3, tj. 243, tj 11110011.

Ako ovo sada konvertujemo u hex, dobijamo 0xFF55F3.

Za 32-bitne boje formule su:

6.2. API za crtanje

Sl. 6-1 Lista metoda za drawing API

6.2.1. lineStyle, lineTo, moveTo

Sl. 6-2 Crtanje miom po panelu