. .. : Swf.hu 1.0 archívum : Swf.hu főoldal >>> : .. .




 
 
SEGÉDLETEK ActionScript alapok

Actionscript 3.0 alapok Adobe Flash CS3-ban
  feltöltve: 2007.10.11 | szerző: Reider | olvasva: 5952 alkalommal

               
 

Display Lista, Display Objektumok

A display list és a display objektumok kezelése is teljesen megváltozott AS3-ban aminek eredménye egy sokkal flexibilisebb és jobb rendszer lett.
Régebbi actionscript verziókban nem volt lehetőség dinamikusan kezelni a display list-et ami abban nyilvánult meg, hogy egy már valahol létrehozott MovieClip-et nem tudtunk átmozgatni egy másik helyre újra létre kellett hozni azt a kívánt helyen, vagy nem tudtuk később láthatóvá tenni ha nem a display list-hez csatolva lett létrehozva. Dinamikusan csak egy, más display objektumokat tartalmazni képes tároló létezett ez volt a MovieClip. Ez több szempontból sem volt optimális, mivel ha csak rajzolni akartunk valamit dinamikusan akkor is MovieClip-et kellett létrehozni ami tartalmazott több olyan funkciót is amire az adott esetben nem lett volna szükség így megnőtt a használt memória mérete is és lassult a programunk is.

Ahhoz hogy megértsük az új rendszer működését először is tisztáznunk, kell hogy mik az alapvető szerepet betöltő osztályok.

info DisplayObject

AS3-ban megjelent egy új osztály a DisplayObject ami azokat az alapvető tulajdonságokat definiálja amire egy grafikus reprezentációval rendelkező objektumnak kezelnie kell. Ilyen például az x y koordináta vagy a láthatóság a visible érték. AS3-ban minden olyan objektum, amit láthatóvá lehet tenni ebből az osztályból származik tehát amikor display objektumról beszélünk azoknak az osztályoknak a példányairól beszélünk amelyek a DisplayObject-ből származnak.


info DisplayObjectContainer

Egy másik fontos osztály a DisplayObjectContainer, ami olyan a tulajdonsággal ruházza fel a DisplayObject-eket, hogy képesek más ilyen objektumokat is tárolni.

Display Objektumok kezelése

AS3-ban minden látható objektum tagja egy speciális hierarchiának, amit úgy hívunk display lista (láthatósági lista).

 

DispplayList

A Stage áll mindennek a csúcsán és mivel az is egy DisplayObjectContainer így tartalmazhat gyermek objektumokat. A Stage egy osztály amit induláskor példányosít a player és automatikusan hozzá csatolja a root objektumot.
Régebbi verziókban a Stage csak egy globális objektum volt ami nem tartalmazott más objektumokat csak annyi volt a szerepe hogy lekérhettünk és beállíthattunk rajta bizonyos speciális értékeket. Most a legjobb úgy gondolni rá mintha egy MovieClip lenne amihez tudunk más MC-ket csatolni elvehetjük róla de mind-e mellett tartalmaz pár speciális változót is amik megadják a már jól ismert szélesség vagy magasság értékeket.

Ugyan a Stage áll a hierarchia legtetején mégsem az a régi _root megfelelője. Az osztály amit _root ként ismerünk most a Stage gyermek objektuma. Ezen az objektumon dolgozunk CS3-ban amikor egy üres fla-ban kódokat írunk az első frame-re. A _root neve is megváltozott úgy mint a legtöbb általunk gyakran használt változónak, de csak annyiban, hogy lekerült előle egy vonal tehát most már root-ként tudjuk elérni.

Minden olyan osztályhoz, ami alosztálya a DisplayObjectContainer-nek tudunk dinamikusan display objektumokat adni. Mivel egy teljesen új és flexibilisebb rendszer áll most a rendelkezésünkre a módszer is teljesen eltér az általunk megszokottól. Nincs szükség többé a hosszas és körülményes create... kezdetű metódusokra mint például a createEmptyMovieClip. Ha egy MC-re van szükségünk csak példányosítanunk kell az osztály a new kulcsszó segítségével:

var myMovie:MovieClip = new MovieClip()

Ezzel létre is hoztunk egy üres MC-t ami majd pont úgy viselkedik mint ahogyan azt a korábbi verziókban is megszokhattuk pár különbséggel. Mivel még semmilyen módon nem mondtuk meg a playernek hogy hol is szeretnénk majd látni ezt az objektumot így mindaddig nem lesz látható a tartalmával együtt amíg hozzá nem csatoljuk egy látható display listához.
Ehhez az alábbi fontosabb metódusok állnak a rendelkezésünkre amiket a DisplayObjectContainer osztály definiál. Ezek a metódusok minden olyan osztályon meghívhatóak amelyek öröklődési listájában szerepel a DisplayObjectContainer osztály.

Próba képpen nézzük meg hogy a MovieClip ilyen osztály-e. A súgóban keressünk rá a MovieClip osztályra. Legfelül a kapott oldalon találunk egy olyan kezdetű sort hogy Inheritance. Itt vannak felsorolva azok az osztályok amelyeknek a metódusait örökli a MovieClip:

MovieClip Inheritance SpriteInheritanceDisplayObjectContainerInheritanceInteractiveObjectInheritanceDisplayObjectInheritanceEventDispatcherInheritanceObject

A másik módszer amivel egyszerűn kideríthető hogy milyen metódusokat lehet használni egy addott osztálynál az ha megnézzük mik szerepelnek a Public Methods listában. Mivel alap estben ez a lista csak a kiválasztott osztály definícióit mutatja hogy teljes képet kapjunk kattinthatunk a Show Inherited Public Methods linkre aminek hatására megkapjuk a teljes listát.

Mostmár meg tudjuk nézni hogy melyek azok az osztályok amik örökölnek valamilyen metódust így folytathatjuk a legfontosabb display lista kezelő függvényekkel:

addChild(child:DisplayObject):DisplayObject
removeChild(child:DisplayObject):DisplayObject
getChildByName(name:String):DisplayObject
swapChildren(child1:DisplayObject, child2:DisplayObject):void

info addChild

Ez az egyik legtöbbet használt függvény a dinamikus display lista kezelésben. Segítségével láthatóvá tudjuk tenni a display objektumainkat.

Egyetlen paramétere van egy display objektum. Az ne zavarjon meg minket, hogy DisplayObject típusú a paramétere. Ez leegyszerűsítve annyit jelent, hogy ennek az osztálynak is benne kell lennie az öröklődési listájában amit már felül megtanultunk megvizsgálni tehát egy MovieClip is gond nélkül átadható neki.
Akik nincsenek tisztában az objektum orientált programozás alapjaival azok az
Inheritance listát vehetik úgy mint egy tudás listát. Annál komplexebb egy osztály minél többet tud. Az ilyen függvények paraméterének típusát pedig mint egy minimális követelményt. Ha az osztály nem felel meg a követelménynek nem adható át paraméterként.

Próbáljunk meg kiírni egy szöveget majd tegyük láthatóvá. Írjuk az alábbi kódot az első frame-re a root-on:

var myField:TextField = new TextField()
myField.text = "Hello AS3!"

this.addChild(myField)

Ezzel a kóddal létrehozunk egy új szövegdobozt, és láthatóvá tesszük az addChild segítségével. A szövegdobozokat is ugyanúgy a new kulcsszó segítségével hozhatunk létre és mivel az is egy display objektum így láthatóvá is tudjuk tenni.

info  removeChild

Ez a már hozzáadott display objektum eltávolítására használható. Szintén egy paramétere van ami egy DisplayObject. Meghívása után eltávolítja a kiválasztott objektumot így ezután az már nem lesz látható. Miután eltávolítottuk nem fog vele pontosan az történni mint ami AS2-ban egy removeMovieClip() meghívása után. Mivel mostmár létezhetnek objektumok Stage-ig nyúló display lsitán kívül is így lehetőség van akár újra hozzáadni akár egy másik DisplayObjectContainer-hez ami régebbi AS verziókban nem volt lehetséges.

info getChildByName

Ez egy másik fontos metódus ami egy már container-hez csatolt display objektum visszakeresésére szolgál.
Minden DisplayObject kap egy alapértelmezett nevet létrehozásnál, ami általában valami ilyesmi: "instance1". Ezt a DisplayObject tárolja a name tulajdonságában és ugyanitt is lehet megadni egy általunk kiválasztott nevet. Később ennek a névnek a segítségével visszakérhetjük a container-hez csatolt objektumunkat.

var myField:TextField = new TextField()
myField.text = "Hello AS3"
myField.name = "as3Field"

this.addChild(myField)

trace(this.getChildByName("as3Field")) // [object TextField]

info  swapChildren

Ez az AS2-ből is ismert swapDepths-re hasonlít annyi különbséggel, hogy 2 paramétert vár azt a 2 display objektumot amiknek a sorrendjét meg szeretnénk cserélni.

Rendelkezésünkre áll még számos metódus, amiknek segítségével hozzáadhatunk elvehetünk vagy sorrendet állíthatunk fel az objektumaink között, ezek mind megtalálhatóak a súgóban a DisplayObjectContainer-nél.

Depth kezelés

Amint az már gondolom bizonyára észre vettétek nem kellett sehol sem depth értéket megadni amikor például a MovieClip-et hozzá csatoltuk egy display list-hez. Ez azért van mivel AS3 most már maga kezeli ezeket a számokat. Nincs szükség többé számon tartani az éppen használt depth értéket vagy nem kell mindig lekérni, hogy melyik a legnagyobb ez mostantól automatikusan történik. Lehetőség van továbbra is depth értéket megadni, amikor hozzáadunk egy display objektumot egy container-hez de fontos tudni, hogy ebben az esetekben nem lehet használaton kívüli depth érték egy nagyobb és egy kisebb mélységen elhelyezett objektum között.
Ez azt jelenti, hogy amíg régen létrehozhattunk egy-egy MC-t a 1, 10, 15 depth-eken most már ezek szigorúan csak a 0, 1, 2 mélységen helyezkedhetnek különben hibát fogunk kapni.

A depth megadására display objektum hozzáadáskor az addChildAt nevű metódust használhatjuk aminek 2 paramétere van egy display objektum és egy szám ami a mélységet adja meg. Lehetőség van már használatban lévő mélységet is megadni, ilyenkor beszúródik az objektumunk.

var myField:TextField = new TextField()
myField.name = "MyField 1"
myField.text = "Hello AS3"

var myField2:TextField = new TextField()
myField2.name = "MyField 2"
myField2.text = "Hello AS3 Again"
myField2.x = 80

addChildAt(myField, 0)
addChildAt(myField2, 0)

trace(getChildAt(0).name) // MyField 2

Ha megpróbáljuk és az utolsó sort kicseréljük erre: addChildAt(myField2, 2) egy hibát fogunk kapni ami a hibás depth megadás miatt következett be.

Új Display Objektumok

Számos olyan új osztály került bevezetésre, amiket egyszerűen használhatunk akár betöltött adatok vagy dinamikus rajzok megjelenítésére. Ezeket az osztályokat és az egymáshoz viszonyított helyzetüket az alábbi ábra mutatja.

DisplayObjects

Ezek közül mindegyiket el lehet érni dinamikusan, de nem mindet lehet létrehozni, mivel vannak olyanok is köztük, amiket a fejlesztőkörnyezet tud csak elkészíteni például ilyen a StaticText (statikus szöveg). Nézzünk párat a fontosabb új osztályok közül.

info  Shape

Ennek az osztálynak a neve bizonyára ismerős. Régebbi Flash verziókban lehetőségünk volt rajzeszközök segítségével shape-eket készíteni, amiket AS-ből nem lehetett elérni vagy módosítani. Amikor dinamikusan szerettünk volna vektorgrafikus rajzot készíteni csak a MovieClip állt a rendelkezésünkre, aminek számos más tulajdonsága is volt, amire adott esetben nem is lett volna szükség így csak lassított a programunkat és növelte a memória használatot. AS3-ban már rendelkezésünkre áll ilyen esetekre a Shape osztály.

Egy shape-nek csak egyetlen egy tulajdonsága van mégpedig egy Graphics nevezetű osztály példánya amit graphics néven érhetünk el. Eddig a rajzok elkészítéséhez szükséges függvények az MC-n voltak definiálva mostantól ezt a feladatot a graphics látja el. Ez azt jelenti hogy amíg régen ezt írtuk: myMovieClip.lineTo(x,y) most ezt kell: myMovieClip.graphics.lineTo(x,y). Természetesen ugyanez igaz a shape-eknél is. Egy másik újítás még, hogy kibővítették a rajzoló függvényeket olyanokkal is amik egyszerű alakzatok rajzolására alkalmasak mint például egy téglalap vagy kör. Ezeket az új függvényeket a Graphics osztály leírásánál találhatjuk meg. Készítsünk egy téglalapot az új drawRect() függvény segítségével.

var myShape:Shape = new Shape()
myShape.graphics.beginFill(0xff)
myShape.graphics.drawRect(0,0,200,100)
myShape.graphics.endFill()

addChild(myShape)

Sikeresen rajzoltunk egy kék téglalapot pár sor segítségével. Mivel a Shape nem DisplayObjectContainer így nem tudunk hozzá gyermek objektumokat adni az addChild() segítségével ez egyszerűen csak egy rajz tárolására alkalmas de mivel display objektum így mozgathatjuk, vagy méretezhetjük is AS segítségével.

info  Sprite

Ez az osztály egy egyszerűbb MovieClip funkcióit hivatott átvenni. Mindent tud amit egy MC kivéve a frame kezelést ugyanis csak egyetlen frame-je van így nem találhatóak meg rajta például a play() vagy a gotoAndStop() metódusok. CS3-ban nem fogunk vele olyan gyakran találkozni mivel alap esetben konvertálásnál a MovieClip-et ajánlja fel a fejlesztő környezet de lehetőségünk van átírni azt.
A Sprite nem dinamikus, mint a MovieClip így nem tudunk rajta tetszés szerinti változókat létrehozni.

info  Bitmap

Flash 8-ban megjelent egy új osztály aminek segítségével pixel információkat kérhettünk le képekről vagy egyszerűen sajátokat készíthettünk ez volt a BitmapData. Amikor meg akartuk jeleníteni egy MC-hez kellett csatolni az attachBitmap() segítségével. A BitmapData továbbra is létezik AS3-ban csak a megjelenítésének módja változott.

A Bitmap osztály segítségével tudjuk láthatóvá tenni a BitmapData objektumokat az alábbi módon.

//Létrehozzuk a BitmapData objektumot és kitöltjük kék színnel
var bData:BitmapData = new BitmapData(100,100,false,0xFF)

//Létrehozzuk a Bitmap objektumot és átadjuk neki a BitmapData-t
var bitmap:Bitmap = new Bitmap(bData)

//Hozzácsatoljuk a display listához
this.addChild(bitmap)

Display Objektumok CS3-ban

CS3 új tetszetősebb megjelenésén kívül más változások is végbe mentek a programban. AS3 új display objektum kezelése itt is meglátszik. Ha nem szeretnénk dinamikusan mozgatni a rajzainkat, vagy nem akarunk semmit sem vezérelni AS-ből akkor lehet hogy némelyik változás nem is jön szembe velünk. Nézzük tehát párat.

 

convertToSymbol

 

Ha actionscript-ben is használni szeretnénk egy általunk rajzolt alakzatot akkor konvertálás előtt meg kell adnunk a már megszokott nevet és egy új adatot is ami a Class. Mivel most már a konstruktor segítségével hozhatunk létre új display objektumokat így adnunk kell egy nevet annak az osztálynak amit majd CS3 fog elkészíteni és kiegészíti az általunk készített rajzokkal. Ezt az osztály elérhetővé fog válni AS-ből is így egyszerűen készíthetünk belőle példányokat.

Másik fontos dolog, amit még megadhatunk az a Base class. Ez az az osztály amire majd CS3 a változtatásokat alapozni fogja. Ennek egy létező osztálynak kell lennie, különben hibát fogunk kapni vagy automatikusan visszaállítódik az alapértelmezett érték. Egyenlőre semmi szükség bármire megváltoztatni az alapértelmezettet, mivel többnyire úgy is azt akarjuk majd használni.

Előfordulhat, hogy az OK gomb lenyomása után egy ablak jelenik meg, ami így néz ki:

classWarning

 

Nem kell megijedni csak arról informál minket a fejlesztőkörnyezet hogy Class név amit megadtunk még nem létezik úgyhogy létre lesz hozva ami jó mivel használni is szeretnénk majd később.

Ezek után ha dinamikusan szeretnénk példányosítani az imént elkészített osztályunkat akkor csak annyi a dolgunk hogy meghívjuk az osztályunk konstruktorát a new kulcsszó segítségével.

var myMovie:MovieClass = new MovieClass()

var myMovie2:MovieClass = new MovieClass()
myMovie2.y += myMovie.height+10

addChild(myMovie)
addChild(myMovie2)

Ha mindent jól csináltunk már láthatunk is két példányt a könyvtárban található MC-ből.

Ha képeket próbálunk meg dinamikusan elérhetővé tenni azt is ugyanígy tehetjük meg. Miután beimportáltuk a library-ban jobb click menüben a Linkage menüpontra kattintva tudjuk megadni az osztály nevét. Ebben az esetben a Base class BitmapData lesz, tehát majd úgy is kell kezelnünk a képünket. Például legyen a képünk osztályának neve "Picture". Ebben az esetben így nézne ki ha megpróbáljuk dinamikusan megjeleníteni:

var picture:Picture = new Picture(0,0)
var bitmap = new Bitmap(picture)

this.addChild(bitmap)

Van egy furcsaság ebben a kódban, mégpedig az hogy át kellett adnom 2 paramétert a saját osztályomnak létrehozáskor. Erre azért van szükség, mivel CS3 a BitmapData-ra alapozva hozza létre a saját képünket tartalmazó osztályt, és mivel annak 2 kötelező paramétere van így át kell adnunk 2 számot hogy a fordító ne írjon ki hibát. Teljesen mindegy hogy mik a számok az nem számít.

Változások

Az egyik legszembetűnőbb változás a display objektumok terén a tulajdonságok nevein ment végbe. Többnyire ezek a változások annyiban ki is merülnek, hogy a tulajdonságok nevei elől eltűnt az "_" karakter, tehát mostantól nem _y hanem simán csak az y segítségével érhetjük el vagy állíthatjuk be egy objektum y koordinátáit. Másik fontos dolog még hogy amíg eddig bizonyos értékeket %-ban kellett megadnunk mint például a régi MovieClip._alpha ezeket most már egy 0-1 ig terjedő skálán kell megtennünk. Például ahhoz hogy 60%-ra állítsuk egy MovieClip átlátszóságát régen ezt írtunk:

myMovie._alpha = 60

AS3-ban ez fog ugyanakkora változást jelenteni:

myMovie.alpha = 0.6

Pár lényegesebb név változást az alábbi táblázat sorol fel.

changes

Másik fontos változás hogy a _root és a Stage már nem globális többé hanem a DisplayObject osztály részei és a nevük is megváltozott root-ra és stage-re. Írassuk ki őket:

trace(root) //[object MainTimeline]
trace(stage) //[object Stage]

Ami rögtön feltűnik, hogy a root kiíratásánál nem a megszokott "_level0"-t kapjuk hanem egy más értéket. A root amikor CS3 automatikusan hozza létre MovieClip típusú és a "MainTimeline" osztály nevet kapja amit a trace a fent látható formátumban ír ki. Az osztálynév nem egyezik meg a name tulajdonsággal ami alapján hivatkozni tudunk a display listán található objektumokra. Írassuk ki a name értékét.

trace(root.name) // root1

Ezt a nevet is automatikusan a fejlesztőkörnyezet adta neki. Az osztály nevet a new kulcsszóval történő példányosításkor tudjuk használni a name tulajdonságban megadott nevet pedig például getChildByName() használatakor.

Korábbi AS verziókban a _root mindig egy helyre mutatott még akkor is ha egy betöltött swf-ben használtuk. Ebből gyakran adódtak gondok, mivel a nem megfelelően elkészített flash alkalmazások betöltés után elromlottak vagy nem voltak hajlandóak működni. Ez a probléma gyakran visszavezethető volt az abszolút elérési útvonalak használatára ami a root megváltozott célja miatt következett be.
Erre volt megoldás a Flash Player 7-ben bevezetett _lockroot aminek ha true értéket adtunk a root mindig ugyanoda mutatott.
AS3-ban ez már automatikus, a root értéke nem fog megváltozni még az swf betöltése után sem.

Amíg a root helyenként mutathat máshova is a stage mindig a betöltő swf Stage-ére fog mutatni.
Másik fontos változás a stage-el kapcsolatban hogy eddig a Stage.width és a Stage.height tulajdonságokat használtuk a méretének meghatározására de most már ezt így kell lekérnünk:

stage.stageWidth
stage.stageHeight

Mivel a stage is egy display objektum így örökli a width és a heigth tulajdonságokat, amik változhatnak a tárolt tartalom méretétől függően és így nem a kívánt értékeket fogjuk kapni.

Mostantól maszkolni is máshogyan kell mégpedig a minden display objektumon megtalálható mask tulajdonság segítségével aminek meg kell adni a maszkunkat:

myMovieClip.mask = maskMovieClip

Dinamikus példányosítás

Azt már tudjuk hogyan kell saját osztályok példányosításával tartalmat csatolni a library-ből, de mi van ha mi a régen használt attachMovie-hoz hasonlóan String ként szeretnénk megadni a példányosítani kívánt osztályt. Ehhez nyújt számunkra segítséget a getDefinitionByName nevű függvény, ami visszaadja a keresett osztályt a neve alapján. Készítsünk egy rajzot majd konvertáljuk MovieClip-rel és adjuk neki a MyMovie1 osztály nevet majd másoljuk be ezt a kódot:

var num:uint = 1
var myMovie:* = new (getDefinitionByName("MyMovie"+num))

addChild(myMovie)

Ha mindent jól csináltunk akkor megjelent a rajzunk a bal felső sarokban. Jól jöhet ez az osztály ha például random szeretnénk osztályokat készíteni mert így csak a nevüket kell csak random módon elkészíteni és már példányosíthatjuk is őket.

 

 
               
 
 

© Devnet.hu. A segédletek semmilyen formában nem másolhatók, publikálhatók a Devnet.hu és a szerzők közös írásos engedélye nélkül.
 
. .. : Swf.hu 1.0 archívum : Swf.hu főoldal >>> : .. .