AS3.pdf

download AS3.pdf

of 35

Transcript of AS3.pdf

  • 7/26/2019 AS3.pdf

    1/35

    1

    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 BuilderFlash 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

  • 7/26/2019 AS3.pdf

    2/35

    2

    Spisak slika

    Sl. 3-1 Startni prozor Flash-a ...................................................................................................... 8

    Sl. 3-2 Unoenje imena klase u Properties panelu..................................................................... 8Sl. 3-3 Poetna stranica razvojnog okruenja FlashDevelop................................................... 10

    Sl. 3-4 Klasa Test u razvojnom FlashDevelop okruenju........................................................ 11Sl. 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 ....................................................... 13Sl. 4-5 pomeranje crvene lopte sa leva na desno preko ekrana ................................................ 15

    Sl. 4-6 Dve razliite putanje loptice ......................................................................................... 16Sl. 4-7 Pulsiranje loptice ........................................................................................................... 16

    Sl. 4-8 Putanja koja zavisi od parametara range, xspeed iyspeed........................................... 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................................................................ 22Sl. 5-5 Klasa Krug .................................................................................................................... 22

    Sl. 5-6 Izmenjena klasa PreomenaRoditelja2 ........................................................................... 23

    Sl. 5-7 Dogaaji mia ............................................................................................................... 24

    Sl. 5-8 Dogaaji tastature ......................................................................................................... 25Sl. 6-1 Lista metoda za drawing API ........................................................................................ 28

    Sl. 6-2 Crtanje miom po panelu .............................................................................................. 28Sl. 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 ........................................................................................... 31Sl. 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.................................................................................... 34Sl. 6-13 Rastojanja od centra do mia...................................................................................... 35

    http://c/Users/Admin/Documents/ICT/FlashIActionScript/AS3.docx%23_Toc293506710http://c/Users/Admin/Documents/ICT/FlashIActionScript/AS3.docx%23_Toc293506710http://c/Users/Admin/Documents/ICT/FlashIActionScript/AS3.docx%23_Toc293506711http://c/Users/Admin/Documents/ICT/FlashIActionScript/AS3.docx%23_Toc293506711http://c/Users/Admin/Documents/ICT/FlashIActionScript/AS3.docx%23_Toc293506712http://c/Users/Admin/Documents/ICT/FlashIActionScript/AS3.docx%23_Toc293506712http://c/Users/Admin/Documents/ICT/FlashIActionScript/AS3.docx%23_Toc293506713http://c/Users/Admin/Documents/ICT/FlashIActionScript/AS3.docx%23_Toc293506713http://c/Users/Admin/Documents/ICT/FlashIActionScript/AS3.docx%23_Toc293506713http://c/Users/Admin/Documents/ICT/FlashIActionScript/AS3.docx%23_Toc293506713http://c/Users/Admin/Documents/ICT/FlashIActionScript/AS3.docx%23_Toc293506713http://c/Users/Admin/Documents/ICT/FlashIActionScript/AS3.docx%23_Toc293506712http://c/Users/Admin/Documents/ICT/FlashIActionScript/AS3.docx%23_Toc293506711http://c/Users/Admin/Documents/ICT/FlashIActionScript/AS3.docx%23_Toc293506710
  • 7/26/2019 AS3.pdf

    3/35

    3

    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 projektanatapodrazumevajuida dizajneri ne razumeju kod, a da projektanti ne razumeju dizajn. Ovo jenaravno potpuno pogreno pojednostavljenje. ActionScript moete da primenjujete kaodizajner ubacujui gotove pakete u animaciju ili kao programer iji je glavni cilj daisprogramira postavljene zahteve dizajna. ActionScript je mnogo vie od toga. ActionScript jeumetnost.

    Da li je programiranje umetnika forma? Isto koliko je fotografija ili film biloumetnika forma u nedavnoj prolosti. Kada je fotografija prvi put napravljena, smatrana jeizvanrednim 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 ulaskuvoza 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 filmskiobrazovani. Ovo ne moemo jo uvek da kaemo za programiranje.

    Danas na programiranje gledamo kao na isto tehniku stvar. Programer danas, je onoto je filmski stvaralac bio pre jednog veka: umetnik koji stvara u mraku, ekajui da sedrutvo obrazuje toliko da bi bilo u stanju da njegov rad tretira kao umetnost. Sigurno neemoekati vek da se ovo dogodi.

    Cilj ovog kursa je da studentima da osnovu koja e im omoguiti kreativni pristupActionScriptu. Ovo nije kurs vizuelnog programiranja kojim se kliktanjem i prevlaenjemkontrole vuku na radnu povrinu, a programsko okruenje kreiraprogramski 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 sutinuproblematike koju programira. ActionScript 3.0 (u daljem tekstu e se koristiti skraenicaAS3), 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 inajee 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 ajednostavan nain da oivite va kod i da kreativno spojite dizajnerai programera u vama.Da bi to bilo mogue, potrebno je da poznajete sutinu animacije i da steknete osnovnaneophodna 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 zaistadeava kada izvravatevau klasu na Flash Player-u, a time i da otvori ogromnu i veoma lepu

    oblast kreativne dinamike animacije.

  • 7/26/2019 AS3.pdf

    4/35

    4

    2.OSNOVNI KONCEPTI ANIMACIJE

    ta je animacija? Najprikladniji odgovor iz renika izraza bi bio: stvaranje iluzijepokreta. 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 iliorjentacije objekta. Ili, jednostavno, promena boje tog objekta.

    Veza animacije i vremena je veoma vana i ona nas dovodi do sledee kljune stvari, ato 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 posmatraneprekidno 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 sledeadvadva 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 neanimaciju. Ukoliko bih vam pokazao pola tuceta slika koje prikazuju tog oveka u procesunjegovog 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 sepredaje i prihvata iluziju da se ne radi o individualnim slikama ve o animaciji. Ovajmomenat je veoma dobro prouen u filmskoj industriji.

    Istraivai su ustanovili da su pri brzini od 24 slike u sekundi ljudi perfektno sreni daprihvate 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 izgledarealistinije (iako vee brzine u animaciji izgledaju bolje za objekte koji se kreu velikimbrzinama).

    Da bi ceo koncept animacije bio mogu, potrebne su tri stvari: skladite, prenos iprikaz. Objekat koji je u osnovi svega ovoga zove se frame, ili, na srskom frejm (iako

    bukvalni prenos engleske reiframe moe da znai okvir, filmadije, slino kao i programeriimaju 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 budeserija 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,koristeiprogramirane frejmove.

    2.1. Programirani frejmovi

    Raunari su mone naprave i broj operacija koje mogu da izvre u delu sekundeomoguava da je nepotrebno da za svaki frejm pamtimo sve opise svih objekata koji su unaem filmu. Dovoljno je da imamo potpuni opis objekata za prvi frejm i skup pravila kako dana osnovu prethodnog, pravimo sledei frejm. Jasno je koliko memorijskog prostora moemoda utedimo koristei ovaj pristup. Slike, same po sebi zauzimaju znaajan memorijski

    prostor. 24 slike u sekundi ovaj prostor troe veoma brzo. Jasnoje da, ako imamo kompletanopis samo prve slike i skup pravila, naa potreba za memorijom e se dramatino smanjiti.

  • 7/26/2019 AS3.pdf

    5/35

    5

    ak i veoma sloen skup pravila koji definiu kako e se objekti menjati zauzima manjeprostora od slike srednje veliine.

    Prirodno, postoji i kontra argument. Sa poveanjem naih umetnikih zahteva, pravilapostaju sve komplikovanija, a raunar mora da radi sve napornije i napornije da bi izraunaoopis 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. Ovajproblem 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 umemoriji. To je injenica da programirana animacija postaje dinamika.Verovatno ste gledalifilm Titanik. Ovaj tone na kraju. Uvek tone. Gledali ga vi u bioskopu, kod kue na dvd-u ilina 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 iodgleda ono to je ve video.

    Ne mora obavezno programirana animacija da bude i dinamika. Mogu da uzmemneki 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 istopomeranje preko ekrana. Ovo teko da je dinamika animacija.

    Ali ta ako uzmem taj objekat i koristei kod, sluajnim odabirom ga postavim napoetnu poziciju a zatim odredim sluajni pravac njegovog kretanja, kao i sluajnu vrednostbrzine 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 ilino 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 objektimana ekranu. Moda i da spasi Titanik.

    Moda i najinteresantniji aspekt dinamike animacije, a predmet ovog kursa jeuglavnom 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 zemljuodbie 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 fizikimobjektom.

    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? Onolikokoliko to okruenje dri njegovu zainteresovanost.

  • 7/26/2019 AS3.pdf

    6/35

    6

    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 bitiprikazana sva etiri okruenja, ali emo u ostatku kursa koristiti iskljuivo besplatnaokruenja, ne gubei nita od optosti problematike.

    Sutina ActionScripta su klase i u ovom kursu e se podrazumevati da studentiposeduju 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 classTest extends Sprite{

    public functionTest() {

    init();

    }

    private functioninit():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 premadirektorijumima u kojima su smetene klase. Svako ime u package se odnosi na odreenifolder, sa imenima koja su razdvojena takama. Na primer klasa Lopta koja je smetena ucom/tela/film e biti referencirana sa com.tela.film.Lopta, tako da e definicija klase biti:

    packagecom.tela.film {

    public classLopta {

    }}

    Sledea je import naredba kojom uvozimo klasu Sprite. Kada radimo u AS3 svaku klasu kojunapravimo 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. Onasadri svojstva kao to su x i ypozicija klipa, njegova veliina itd. U AS3 je uvedena klasaSprite koja je po svojoj definiciji jednostavnija od klase MovieClip i o kojoj moemo darazmiljamo kao o muviklip-u (ponovo ne prevodimo pojam jer je engleska re odomaenakod nas) bez vremeske linije(timeline). U najveem broju sluajeva kada objektima rukujemosamo preko koda, ne koristimo frejmove i vremensku liniju, te nam je pogodnije da koristimo

    jednostavniju Sprite klasu.

  • 7/26/2019 AS3.pdf

    7/35

    7

    Kada pravimo klasu koja nasleuje MovieClip ili Sprite, ona automatski nasleuje svasvojstva i metode tih klasa. Tada dodajemo specifina ponaanja i svojstva koja se primenjujuna objekt koji pravimo. Na primer, za igricu koju pravimo elimo da napravimo objekat

    svemirski brod. elimo da za ovaj objekat, pored odreenegrafike, imamo njegovu pozicijuna ekranu, da ga pomeramo, rotiramo, oslukujemo dogaaje mia i tastature za interakciju sakorisnikom. 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 suuzletanje, sudar, pucanje, samounitenje. Klasa bi mogla da izgleda ovako:

    package{

    import flash.display.Sprite;

    public classSvemirskiBrod extends Sprite{

    private varbrzina:Number = 0;

    private var ostecenje:Number = 0;

    private var gorivo:Number = 1000;

    public functionUzletanje():void {// . . .

    }

    public functionSudar():void{// . . .

    }

    public functionPucanje():void{

    // . . .

    }

    public functionSamoUnitenje():void{// . . .

    }}

    }

    Sve ostalo u ovom kodu je ve poznato od modifikatora pristupa public, konstruktora u komese poziva metoda init() kojom se crta crveni krug.

    U ovoj glavi e biti objanjeno kako da se u svakom od pobrojana etiri okruenjapostavi AS3 projekat sa ovom osnovnom klasom. U nastavku kursa e se prezentovati samokod 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 sanastavkom as, Test.as.

    3.1. Flash CS IDE

    Kreiramo noviFLA izborom Create New Flash File (ActionScript 3.0), slika 3.1.

  • 7/26/2019 AS3.pdf

    8/35

    8

    Sl. 3-1 Startni prozor Flash-a

    Flash dodeljuje ime Untitled-1.fla kreiranom fajlu. Sada je vano da se sauva kreiranifajl u direktorijumu u kome smo suvali klasu Test.as ili u bilo kom drugom, ali u tom sluajumoramo da zapamtimo putanju izmeu ta dva direktorijuma. koliko ne savamo kreiranuklasu, pri daljem radu e se javljati razne poruke o tome da Flash ne moe da pronae klasu sakojom radimo. U properties paneul (Sl. 3.2.) uoavamo polje Document Class i unosimo imenae 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-2Unoenje imena klase u Properties panelu

  • 7/26/2019 AS3.pdf

    9/35

    9

    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 ekompilirati klasu u Test.SWF. Kada se pokrene SWF, konstruktor i init() metoda crtaju nacrveni 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 dodajekompajler.

    3.2. Flex BuilderFlash Builder

    Adobe Flex Builder je profesionalni alat koji omoguuje projektantima softvera darazvijaju bogate Internet aplikacije korienjem open source Flex okruenja. On ukljuuje

    podrku za inteligentno kodiranje, debagovanje,vizuelni dizajn, kao i alat za testiranja. Posleverzije 3.0., promenjen je naziv, tako da je najnovija verzija Flash Builder 4.

    Kako je akcenat ovog kursa stavljen na razumevanje sutine animacije i ActionScript-a, 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 sadrisve 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 umestonjih piu i putaju kod da bez tih alata nisu u mogunosti ni da naprave jedn ostavan Zdravo,

    kako si? program, a kamoli da ga pokrenu sa komandne linije. Takoe, kako arobnjaciprave kod za sve rutinske delove programa, mnogi programeri nikad ne pogledaju ta jeokruenje 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 danapravimo

    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 sakomandne linije sa direktorijuma u kome smo sauvali tu klasu navodei putanju dokompajlera, npr: C:/f lex_sdk_4.1.0.16076_mpl/bin/mxml c.exe Test.as . Na ekranu dobijamo

    niz informacija o tome ta kompajler radi i, ako postoje greke, informacije o njima i ako jemogue, tane linije i karaktere gde su greke ustanovljene. Ovim postupkom je kreiran uistom direktorijumu Test.swf, koji kada startujemo pomou Flash player-a dobijamo nacrveni krug na ekranu.

    Glavni nedostatak ovakvog rada je ukucavanje putanja do klase koju kompiliramo i

    putanje do mxmlc-a. Ovo se najelegantnije reavapravljenjem 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

    http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4
  • 7/26/2019 AS3.pdf

    10/35

    10

    U ovom izrazu %1 oznaava parametar batch fajla, tj. u naem sluaju, ime fajla kojikompajliramo, tj. Test.as.

    Kada koristimo CS IDE, u properties panelu podeavamo svojstva dokumenta, kao tosu veliina SWF-a, frame rate, boja pozadine itd. Ako koristimo command-line kompajler ovomoemo 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 razdvajamoprazninom. Drugi nain je da ova svojstva dokumenta postavimo u metapodatke direktno u

    nau klasu. Metapodaci se sastoje od naredbi koje nisu ActionScript naredbe koje sekompiliraju ve ih kompajler koristi tokom procesa kompiliranja. Ovo se izvodi naredbomSWF:

    [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 jebesplatan paket FlashDevelop. Prva dobra osobina je to to je besplatan a druga to nas uodnosu na rad sa komandne linije oslobaa pisanja putanja ili pravljenja batch fajlova. Poredtoga, njegov editor je napravljen po uzoru na Visual Studio, tako da omoguava simultani radna vie klasa koje su otvorene na tab panelima, kao i dibagovanje koda. Takoe postojiinteligentna dopuna koda (IntelliSense). Uvodni prozor FlashDevelop-a je prikazan na slici

    3.3.

    Sl. 3-3Poetna stranica razvojnog okruenja FlashDevelop

  • 7/26/2019 AS3.pdf

    11/35

    11

    Iako su mogunosti ovog okruenja impozantne, za potrebe ovog kursa emo koristitisamo 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 filmai najee se koristi u postupku razvoja programa za otkrivanje greaka u njemu ili kaoobavetenje programeru da se tokom izvravanja programa desio neki dogaaj. Ukoliko sekoristi CS IDE ove poruke se ispisuju automatski. Isto vai i za Flex Builder, s tim to film netreba da se pokrene naredbom run ve debug.Ukoliko se koristi naredba sa komandne linijeili FlashDevelop stvar sa trace je komplikovanija. U naelu, koriste se open source trace

    paneli, npr. Xpanel, koji moe da se skine sawww.ajaxmaker.com/xpanel/xpanel.htm.

    Kako je potreba za ispisivanjem poruka u naelu potpuno marginalna i kako nekebitne poruke moemo da ispisujemo direktno na ekranu tokom putanja filma, ovde neemodetaljnije prikazivati kako se u besplatnim okruenjima moze da koristi trace naredba.

    http://www.ajaxmaker.com/xpanel/xpanel.htmhttp://www.ajaxmaker.com/xpanel/xpanel.htmhttp://www.ajaxmaker.com/xpanel/xpanel.htmhttp://www.ajaxmaker.com/xpanel/xpanel.htm
  • 7/26/2019 AS3.pdf

    12/35

    12

    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 oframe-by-frame animaciji, odgovarajui dijagram toka bi mogao da se prikae slikom 4.1. kaoserija slika gde je svaki frejm slika koju je jednostavno samo potrebno da prikaemo tokom

    putanja filma.

    Fle ne kreira novu sliku za svaki frejm, ak ni u frame-by-frame filmu. Za svakifrejm, Fle belei poziciju, veliinu, boju, itd. za svaki objekt na sceni. Tako, da ako imamoloptu koja se pomera preko scene, svaki frejm e imati zabeleenu poziciju lopte u tomfrejmu. Na primer, u frejmu1 lopta je 10 piksela od leve ivice, u frejmu2 15 piksela, itd. FlePlayer ita podatke, postavlja scenu prema datim opisima i prikazuje frejm. Ovo zovemorenderovanje i prikazivanje (Sl. 4.2.).

    Kada smo govorili o dinamikoj kodiranoj animaciji podrazumevali smo dijagramtoka koji bi odgovarao onom sa slike 4.3.

    Kao to se vidi sa slike 4.3, vie nema frejma1, frejma2 itd. ActionScript animacija uoptem sluaju moeda 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 opisivanjemkompletne scene pomou koda. Posle toga renderujemo i prikazujemo taj frejm.

    definiipoetno

    stanje

    render

    frejma

    prikaz

    frejma

    primena

    pravila

    render

    frejma1

    prikaz

    frejma1

    render

    frejma2

    prikaz

    frejma2

    prikaz

    frejma1

    prikaz

    frejma2

    prikaz

    frejma3

    prikaz

    frejma..

    Sl. 4-1 frame-by-frame animacija

    Sl. 4-2 renderovanje i prikazivanje

    Sl. 4-3 skript animacija

  • 7/26/2019 AS3.pdf

    13/35

    13

    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 linijakompleksne trigonometrije. Primena pravila e rezultovati u novom opisu koji e tada da serenderuje i prikae. I ponovo, sve na isti nain u krug. Ono to odmah zapaamo je da se usvakom 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 desitikad naa lopta stigne do desnog kraja scene? Na skup pravila mora da rauna sa ovakvomsituacijom.

    U osnovi, polazimo od veoma jednostavnog ponaanja kreiranjem jednog ili dvapravila, pa kada to profunkcionie dodajemo sledee pravilo. Ova pravila su ustvariActionScript 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 naalopta 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 sejednostavno odjednom nalazi na njenom desnom kraju ili uopte ne vidi. Zato se lopta nijepomerala na svaku od pozicija iz ciklusa? Ustvari, ona se ipak pomerala, ali mi to nismo imalipriliku da vidimo jer nismo ni jednom rekli Fleu da osvei ekran. Na slici 4.4. je prikazanoono to se ustvari desilo.

    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 osveavaekran 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 jeprikazan prethodni frejm, i ako jeste, prikazae frejm koji je upravo renderovan i prei

    na sledei frejm.

    definiipoetno

    stanje

    render

    frejma

    primenapravila

    kraj

    ciklusa

    prikazfrejma

    da

    ne

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

  • 7/26/2019 AS3.pdf

    14/35

    14

    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 eekati i do 15 sekundi da se skript izvri, a onda prikazati uvenu poruku A script is causingthe player to run slowly.

    Prema tome, ono to je potrebno da uradimo je da petlju napravimo preko dva frejma,

    tj da koristimoframo loops.

    4.2. Frame loops

    U uvodnom razmatranju je reeno da nam je koncept ActionScript programiranjatakav da ne koristimo vremensku liniju i stavljanje sadraja na individualne frejmove. Ideja sa

    frame loopspotie jo od najranijih verzija Flea kada ActionScript nije bio tako moan kaodanas. 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 izmeuova 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 napoetak, tj. na frejm1.

    4.3. Dogaaji i rukovaoci dogaaja

    Jedna od najznaajnijih promena u Fleu je nova arhitektura dogaaja koja inajsloenija ponaanja ini mnogo jednostavnijim nego to je to bilo u ranijim verzijama.Uovom 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 specificirakao oslukiva odreenog dogaaja, pozivom funkcije addEventListener. Argumenti su imedogaaja koji se oslukuje i ime funkcije u naoj klasi koja e biti rukovaoc dogaaja , na

    primer:

    addEventL istener(" enterFrame" , onEnterF rame);

    U ovakvoj sintaksi ime dogaaja je string, te je podloan grekama u pisanju, jer akoumesto enterFrame otkucamo enteFrame, kompajler nee prikazati greku i mi emo da seubijemo dok ne ustanovimo zato nam kod ne radi. Mnogo bolja sintaksa je:

    addEventL istener(Event.ENTER_FRAME, onEnterF rame);

    Ime funkcije moe da se izabere proizvoljno, mogli smo umesto onEnterFrame dastavimo 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 imenufunkcije bude ba ime dogaaja i da poinje sa onime se ukazuje da se radi oreagovanju nadogaaj.

    Ukoliko ne elimo da oslukiva vie oslukuje dogaaj pozivamo metodremoveEventListener, npr:removeEventL istener(Event.ENTER_FRAME, onEnterF rame);

  • 7/26/2019 AS3.pdf

    15/35

    15

    Ono to esto zbunjuje je da koristimo dogaaj EnterFrame iako najee na film imasamo jedan frejm. Ustvari, EnterFrame moemo da posmatramo kao tajmer. Na osnovu framerate, Fle izraunava koliko vremena traje svaki frejm i u tom intervalu ispaljuje ovedogaaje. Ukoliko postoji sledei frejm, prelazi na njega, a ako nema, vraa se na prvi.Sadamoemo da napiemo kod PrvaAnimacija za loptu koja se pomera na desno preko ekrana(Sl. 4.5):

    package{importflash.display.Sprite;importflash.events.Event;

    publicclassPrvaAnimacija extendsSprite {privatevarball:Sprite;

    publicfunctionPrvaAnimacija() {init();

    }privatefunctioninit():void {

    ball = newSprite();

    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);

    }privatefunctiononEnterFrame(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 statikuanimaciju. Sada moemo raznovrsnim jednostavnim promenama u funkciji onEnterFrame damenjamo putanju loptice ili da iscrtavamo neku krivu. Neke od takvih modifikacija su

    prikazane u sledeih pet document klasa.

    package{importflash.display.Sprite;

    importflash.events.Event;

    publicclassDvePutanje extends Sprite {privatevar ball:Sprite;privatevar boja:uint = 0xff0000;privatevar ugao:Number = 0;

    publicfunctionDvePutanje() {init();

    }privatefunctioninit():void {

    ball = newSprite();addChild(ball);

    ball.graphics.beginFill(boja);ball.graphics.drawCircle(0, 0, 40);ball.x = 20;

  • 7/26/2019 AS3.pdf

    16/35

    16

    ball.y = stage.stageHeight / 2;ball.addEventListener(Event.ENTER_FRAME, onEnterFrame);

    }privatefunctiononEnterFrame(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{importflash.display.Sprite;

    importflash.events.Event;

    publicclassPulsiranje extends Sprite {privatevar ball:Sprite;privatevar angle:Number = 0;privatevar centerScale:Number = 1;privatevar range:Number = .5;privatevar speed:Number = .1;

    publicfunctionPulsiranje() {init();

    }privatefunctioninit():void {

    ball = newSprite();addChild(ball);ball.graphics.beginFill(0xff0000);ball.graphics.drawCircle(0, 0, 40);ball.x = stage.stageWidth / 2;ball.y = stage.stageHeight / 2;addEventListener(Event.ENTER_FRAME, onEnterFrame);

    }publicfunctiononEnterFrame(event:Event):void {

    ball.scaleX = ball.scaleY = centerScale + Math.sin(angle)* range;

    angle += speed;}

    }}

    Sl. 4-7 Pulsiranje loptice

    package{importflash.display.Sprite;importflash.events.Event;

    publicclassParametriPutanje extends Sprite {privatevar ball:Sprite;privatevar angleX:Number = 0;privatevar angleY:Number = 0;

    privatevar centerX:Number = 200;privatevar centerY:Number = 200;privatevar range:Number = 50;privatevar xspeed:Number = .07;

  • 7/26/2019 AS3.pdf

    17/35

    17

    privatevar yspeed:Number = .11;

    publicfunctionParametriPutanje () {init();

    }privatefunctioninit():void {

    ball = newSprite();addChild(ball);ball.graphics.beginFill(0xff0000);ball.graphics.drawCircle(0, 0, 40);ball.x = 0;addEventListener(Event.ENTER_FRAME, onEnterFrame);

    }publicfunctiononEnterFrame(event:Event):void {

    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 iyspeed

    package{importflash.display.Sprite;importflash.events.Event;

    publicclassSinusnaPutanja extends Sprite {privatevar ball:Sprite;privatevar angle:Number = 0;privatevar centerY:Number = 200;

    privatevar range:Number = 50;privatevar xspeed:Number = 1;privatevar yspeed:Number = .05;

    publicfunctionSinusnaPutanja () {init();

    }privatefunctioninit():void {

    ball = newSprite();addChild(ball);ball.graphics.beginFill(0xff0000);ball.graphics.drawCircle(0, 0, 40);ball.x = 0;

    addEventListener(Event.ENTER_FRAME, onEnterFrame);}publicfunctiononEnterFrame(event:Event):void {

    ball.x += xspeed;ball.y = centerY + Math.sin(angle) * range;angle += yspeed;

    }}

    }

    Sl. 4-9 Sinusna putanja

  • 7/26/2019 AS3.pdf

    18/35

    18

    package{importflash.display.Sprite;importflash.events.Event;

    publicclassCrtanje extends Sprite {privatevar angle:Number = 0;

    privatevar centerY:Number = 200;privatevar range:Number = 50;privatevar xspeed:Number = 1;privatevar yspeed:Number = .05;privatevar xpos:Number;privatevar ypos:Number;

    publicfunctionCrtanje() {init();

    }privatefunctioninit():void {

    xpos = 0;graphics.lineStyle(1, 0, 1);graphics.moveTo(0, centerY);addEventListener(Event.ENTER_FRAME, onEnterFrame);

    }publicfunctiononEnterFrame(event:Event):void {

    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 klasuDisplayObject. Drugim reima, svi objekti (movie clips, dugmad buttons, tekstualna poljatext fields, grafika graphics, bitmaps, komponente, osnovni oblici basic shapes) su deovelike familije koji se ponaaju na isti osnovni nain u smislu njihovog kreiranja, postavljanjana 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 ukreirani 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 oDisplay listi.

  • 7/26/2019 AS3.pdf

    19/35

    19

    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 movieclip-ova ili nekih drugih vizuelnih objekata. Kada ih unesete na scenu oni postaju takoevidljivi. U okviru tih objekata moete da imate druge vizuelne objekte, a u njima druge, itd ito 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 objektemoemo da zamislimo kao glumce koji stoje iza zavese i publika ih ne vidi sve dok ne nastupitrenutak kada njihova uloga to od njih zahteva. Takoe, display listu moemo da zamislimokao 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 addChildmetode.

    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 premestilisa jednog roditelja na drugi.

    package{importflash.display.Sprite;importflash.events.Event;

    publicclassPromenaRoditelja extends Sprite {privatevar parent1:Sprite;privatevar parent2:Sprite;privatevar ball:Sprite;

    publicfunctionPromenaRoditelja() {init();

    }privatefunctioninit():void {

    parent1 = newSprite();addChild(parent1);parent1.graphics.lineStyle(1, 0);parent1.graphics.drawRect(-50, -50, 100, 100);parent1.x = 60;parent1.y = 60;

    parent2 = newSprite();addChild(parent2);

    parent2.graphics.lineStyle(1, 0);parent2.graphics.drawRect(-50, -50, 100, 100);parent2.x = 170;parent2.y = 60;

    ball = newSprite();parent1.addChild(ball);ball.graphics.beginFill(0xff0000);ball.graphics.drawCircle(0, 0, 40);ball.addEventListener(MouseEvent.CLICK, onBallClick);

    }

  • 7/26/2019 AS3.pdf

    20/35

    20

    publicfunctiononBallClick(event:MouseEvent):void{

    parent2.addChild(ball);}

    }}

    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{importflash.display.Sprite;importflash.events.Event;

    publicclassPromenaRoditelja2 extends Sprite {privatevar parent1:ParentKvadrat;privatevar parent2:ParentKvadrat;

    privatevar ball:Sprite;

    publicfunctionPromenaRoditelja2() {init();

    }privatefunctioninit():void {

    parent1 = newParentKvadrat();addChild(parent1);parent1.x = 60;parent1.y = 60;

    parent2 = newParentKvadrat();addChild(parent2);

    parent2.x = 170;parent2.y = 60;

    ball = newSprite();parent1.addChild(ball);ball.graphics.beginFill(0xff0000);ball.graphics.drawCircle(0, 0, 40);ball.addEventListener(MouseEvent.CLICK, onBallClick);

    ball.addEventListener(MouseEvent.DOUBLE_CLICK, onBallDClick);ball.doubleClickEnabled = True

    }

    publicfunctiononBallClick(event:MouseEvent):void

    { parent2.addChild(ball);}publicfunctiononBallDClick(event:MouseEvent):void{

    parent1.addChild(ball);}

    }}

    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 nadrugog roditelja.

  • 7/26/2019 AS3.pdf

    21/35

    21

    5.1. Podklase display objekata

    U prethodnim primerima moemo da zapazimo da se u svakoj document klasiponavlja veliki broj istih naredbi. Ovo ponavljanje potie iz dva razloga: prvi nastaje samimdefinicijama 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 primerimakoristili iste display objekte te smo ih u svakoj klasi iscrtavali na isti nain , npr. za krug smo

    pisali:ball.graphics.beginFill(0xff0000);ball.graphics.drawCircle(0, 0, 40);ball.graphics.endFill();ball.x = 20;ball.y = stage.stageHeight / 2;

    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{importflash.display.Sprite;

    publicclassParentKvadrat extends Sprite {PublicFunctionParentKvadrat()

    {init();

    }privatefunctioninit():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 sadpogledamo kod na slici 5.2. vidimo da parent1 i parent2 vie ne nasleuju Sprite, ve klasuParentKvadrat:

    privatevar parent1:ParentKvadrat;

    privatevar parent2:ParentKvadrat;

    Imamo potpunu slobodu da biramo ta e u definiciji klase biti uvek isto, a ta e se prekoparametara menjati prilikom definisanja instance te klase u naoj document klasi. Na primer,gornji kvadrat moemo da definiemo i kao:

    package{importflash.display.Sprite;

    publicclassParentKvadrat extends Sprite {privatevar xPos:Number;

    privatevar yPos:Number;

    publicfunctionParentKvadrat(X:Number=50, Y:Number=50){

  • 7/26/2019 AS3.pdf

    22/35

    22

    this.xPos = X;this.yPos = Y;init();

    }privatefunctioninit():void{

    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 saslike 5.2. postaje mnogo kraa i preglednija.

    package{importflash.display.Sprite;

    publicclassKrug extends Sprite {privatevar radius:Number;privatevar color:uint;

    publicfunctionKrug(radius:Number=40, color:uint=0xff0000) {this.radius = radius;this.color = color;init();

    }publicfunctioninit():void {

    graphics.beginFill(color);graphics.drawCircle(0, 0, radius);

    graphics.endFill();}

    }}

    Sl. 5-5 Klasa Krug

    package{importflash.display.Sprite;importflash.events.Event;

    publicclassPromenaRoditelja2 extends Sprite {privatevar parent1:ParentKvadrat;

    privatevar parent2:ParentKvadrat;privatevar ball:KrugpublicfunctionPromenaRoditelja2() {

    init();}privatefunctioninit():void {

    parent1 = newParentKvadrat(60, 60);addChild(parent1);parent2 = newParentKvadrat(170, 60);addChild(parent2);

    ball = newKrug(40, 0xff0000);parent1.addChild(ball);

    ball.addEventListener(MouseEvent.CLICK, onBallClick);ball.addEventListener(MouseEvent.DOUBLE_CLICK, onBallDClick);

    ball.doubleClickEnabled = True

  • 7/26/2019 AS3.pdf

    23/35

    23

    }publicfunctiononBallClick(event:MouseEvent):void{

    parent2.addChild(ball);}publicfunctiononBallDClick(event:MouseEvent):void{

    parent1.addChild(ball);}

    }}

    Sl. 5-6 Izmenjena klasa PreomenaRoditelja2

    5.2. Interakcija korisnika

    Interakcija korisnika je jedan od glavnih razloga zato koristite Action Script jer beznje, 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 nakorisnikim dogaaima koji se generalno svode na samo dva tipa: dogaaje mia i dogaajetastature.

    5.2.1. Dogaaji mia

    Dogaaji mia su doiveli dramatine promene u AS3. U AS2 klipovi su bili sluai zasve dogaaje mia. U AS3 bilo koji objekat moe da se proglasi za sluaa dogaaja. Takoe,da bi se ispaliodogaaj 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 obziragde 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 ipakstekao oseaj o njima, pustite sledei kod i dobiete imena dogaaja ispisana u tekstualnom

    polju u zavisnosti od trenutnog poloaja mia.

    package{importflash.display.Sprite;importflash.events.MouseEvent;importflash.text.TextField;

    publicclassMouseEvents extends Sprite {

    privatevar textField:TextField;

    publicfunctionMouseEvents() {

  • 7/26/2019 AS3.pdf

    24/35

    24

    init();}privatefunctioninit():void{

    var sprite:Sprite = newSprite();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 = newTextField();addChild(textField);

    }publicfunctiononMouseEvent(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 jepritisnuto neko dugme na tastaturi, ve i okom se dugmetu radi. Postoji vie naina da dobijete ovu informaciju od rukovaoca dogaajatastature. Rukovaoc dogaaja prosleuje objekat koji ga je inicirao, zajedno sa podacima otom 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 stringa. 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 ostaladugmad 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).

  • 7/26/2019 AS3.pdf

    25/35

    25

    Klasaflash.ui.Keyboard sadri svojstva za nealfanumeriku dugmad, tako da ne trebada se pamtenjihovi kodovi. Na primer, Keyboard.SHIFTje jednak broju 16. Na slici 5.7. je

    kod koji dogaaje tastature koristi za pomeranje kruga.

    package{importflash.display.Sprite;

    importflash.events.KeyboardEvent;importflash.ui.Keyboard;

    publicclassKeyCodes extends Sprite {privatevar ball:Krug;

    publicfunctionKeyCodes() {init();

    }privatefunctioninit():void {

    ball = newKrug(40, 0xff0000);addChild(ball);ball.x = stage.stageWidth / 2;

    ball.y = stage.stageHeight / 2;stage.addEventListener(KeyboardEvent.KEY_DOWN, onKBEvent);

    }publicfunctiononKeyboardEvent(event:KBEvent):void {

    switch(event.keyCode) {caseKeyboard.UP :ball.y -= 10;break;

    caseKeyboard.DOWN :ball.y += 10;break;

    caseKeyboard.LEFT :ball.x -= 10;break;

    caseKeyboard.RIGHT :ball.x += 10;break;

    default:break;

    }}

    }

    }Sl. 5-8 Dogaaji tastature

  • 7/26/2019 AS3.pdf

    26/35

    26

    6.TEHNIKE RENDEROVANJA

    Ovako rogobatan naslov proizilazi iz neadekvatnih srpskih rei za strane tehnikeizraze. Najpribliniji prevod za render je prikazivanje, ali u svetu proizvodnje filmovasmisao 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 zacrtanje, 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. Flekoristi 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 jejednako 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 podve 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 brojpretvorimo 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 onekoj 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 oznaavatransparentnost, 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 vrednostiodgovarajuih boja i da elimo da napravimo sloenu boju sastavljenu od ovih komponenti.

    Treba naglasiti da AS3, pored tipa Numberkoji je korien u ranijim verzijama kao jedini tipza predstavljanje brojnih vrednosti, uvodi i tipove int i uint za cele brojeve. U int smetamo i

  • 7/26/2019 AS3.pdf

    27/35

    27

    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 jemaksimalna dozvoljena vrednost za ovaj tip duplo vea od tipa int, konkretno, u int ne moeda 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 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 pristupaplikaciji, a sutinski predstavlja skup metoda i svojstava koje koristimo u naim programimaza pristupanje odreenom skupu postupaka i svojstava. API za crtanje, drawing API , seodnosi na svojstva i metode koje nam omoguuju da crtamo linije, krive, bojimo, pravimo

    prelaze boja itd. Lista metoda je data na slici 6.1.

  • 7/26/2019 AS3.pdf

    28/35

    28

    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 zacrtanje 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 levodugme mia.

    package{importflash.display.Sprite;importflash.events.MouseEvent;

    publicclassDrawingApp extends Sprite{PublicFunctionDrawingApp()

    {init();}

    privatefunctioninit():void{graphics.lineStyle(1);stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);}

    privatefunctiononMouseDown(event:MouseEvent):void

    {graphics.moveTo(mouseX, mouseY);stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);}

    privatefunctiononMouseUp(event:MouseEvent):void{stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);}

    privatefunctiononMouseMove(event:MouseEvent):void{graphics.lineTo(mouseX, mouseY);}

    }}

    Sl. 6-2 Crtanje miom po panelu

  • 7/26/2019 AS3.pdf

    29/35

    29

    Sledeim kodom crtamo krive izmeu taaka, tako da poloaj mia predstavljakontrolnu taku.

    package{importflash.display.Sprite;importflash.events.MouseEvent;

    publicclassDrawingCurves extends Sprite{privatevar x0:Number = 100;privatevar y0:Number = 200;privatevar x1:Number;privatevar y1:Number;privatevar x2:Number = 300;privatevar y2:Number = 200;

    PublicFunctionDrawingCurves(){

    init();}

    privatefunctioninit():void{

    stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);}

    privatefunctiononMouseMove(event:MouseEvent):void{

    x1 = mouseX;y1 = mouseY;graphics.clear();graphics.lineStyle(1);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 srednjataka bde kontrolna taka.

    package{importflash.display.Sprite;

    publicclassMultiCurves1 extends Sprite{privatevar numPoints:uint = 9;PublicFunctionMultiCurves1(){

    init();}privatefunctioninit():void{// formiranje niza sluajnih taaka

    var points:Array = newArray();for(var i:int = 0; i < numPoints; i++){

    points[i] = newObject();points[i].x = Math.random() * stage.stageHeight;points[i].y = Math.random() * stage.stageHeight;

  • 7/26/2019 AS3.pdf

    30/35

    30

    }graphics.lineStyle(1);

    // pomeranje na prvu takugraphics.moveTo(points[0].x, points[0].y);

    // prelaz na naredne parovefor(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 jepojednostavljeno prikazano na slici 6.6, dok je kod prikazan na slici 6.7.

  • 7/26/2019 AS3.pdf

    31/35

    31

    Sl. 6-6 Uvoenje sredinjih taaka

    package{importflash.display.Sprite;importflash.events.MouseEvent;

    publicclassMultiCurves2 extends Sprite{privatevar numPoints:uint = 9;

    PublicFunctionMultiCurves2(){

    init();}privatefunctioninit():void{

    var points:Array = newArray();for(var i:int = 0; i < numPoints; i++)

    {points[i] = newObject();points[i].x = Math.random() * stage.stageHeight;points[i].y = Math.random() * stage.stageHeight;}

    graphics.lineStyle(1);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 krivihIzgled krivih je sada:

  • 7/26/2019 AS3.pdf

    32/35

    32

    Sl. 6-8 Potpuno glatka kriva

    Jo nam ostaje da zatvorimo krivu i to postiemo sledeim kodom:

    package{importflash.display.Sprite;importflash.events.MouseEvent;

    publicclassMultiCurves3 extends Sprite{

    privatevar numPoints:uint = 9;PublicFunctionMultiCurves3(){

    init();}

    privatefunctioninit():void{var points:Array = newArray();for(var i:int = 0; i < numPoints; i++)

    {points[i] = newObject();points[i].x = Math.random() * stage.stageHeight;points[i].y = Math.random() * stage.stageHeight;}

    // pomeraj na prvu sredinju takuvar xc1:Number = (points[0].x + points[numPoints - 1].x) / 2;var yc1:Number = (points[0].y + points[numPoints - 1].y) / 2;graphics.lineStyle(1);graphics.moveTo(xc1, yc1);

    // kriva kroz ostale takefor(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 takegraphics.curveTo(points[i].x, points[i].y, xc1, yc1);

    }}

    }

    Sl. 6-9 Zatvorena kriva

  • 7/26/2019 AS3.pdf

    33/35

    33

    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 redovnokoristimo prilikom iscrtavanja objekata.

    Raunanje osnovnih trigonometrijskihfunkcija:sin = suprotna / hipotenuzacos = nalegla / hipotenuza

    tg = suprotna / nalegla

    Konverzija radijana u stepene i obrnuto:radians = degrees * Math.PI / 180degrees = 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:public function onEnterFrame(event:Event){xposition = centerX + Math.cos(angle) * radius;yposition = centerY + Math.sin(angle) * radius;angle += speed;}

    Kreiranje elipsi:public function onEnterFrame(event:Event){xposition = centerX + Math.cos(angle) * radiusX;

    yposition = centerY + Math.sin(angle) * radiusY;angle += speed;}

  • 7/26/2019 AS3.pdf

    34/35

    34

    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 nacentru 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 {import flash.display.Sprite;

    publicclassStrelica extends Sprite {publicfunctionStrelica() {

    init();}publicfunctioninit():void {

    graphics.lineStyle(1, 0, 1);graphics.beginFill(0xffff00);

    graphics.moveTo(-50, -25);graphics.lineTo(0, -25);graphics.lineTo(0, -50);graphics.lineTo(50, 0);graphics.lineTo(0, 50);graphics.lineTo(0, 25);graphics.lineTo(-50, 25);graphics.lineTo(-50, -25);graphics.endFill();

    }}

    }

    Sl. 6-11 Strelica

    package{

    import flash.display.Sprite;import flash.events.Event;

    publicclassRotateToMouse extends Sprite {privatevar arrow:Strelica;

    publicfunctionRotateToMouse() {init();

    }privatefunctioninit():void {

    arrow = newArrow();addChild(arrow);arrow.x = stage.stageWidth / 2;arrow.y = stage.stageHeight / 2;addEventListener(Event.ENTER_FRAME, onEnterFrame);

    }publicfunctiononEnterFrame(event:Event):void {

    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

  • 7/26/2019 AS3.pdf

    35/35

    Sledei kod ispisuje u tekstualno polje trenutna rastojanja mia od centra panela:

    package{

    import flash.display.Sprite;import flash.events.MouseEvent;

    import flash.text.TextField;

    publicclassMouseDistance extends Sprite {privatevar sprite1:Sprite;privatevar textField:TextField;

    publicfunctionMouseDistance() {init();

    }privatefunctioninit():void {

    sprite1 = newSprite();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 = newTextField();addChild(textField);stage.addEventListener(MouseEvent.MOUSE_MOVE,

    onMouseMove);}publicfunctiononMouseMove(event:MouseEvent):void {

    graphics.clear();graphics.lineStyle(1, 0, 1);

    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