Az ActionScript egy eseményvezérelt nyelv. A program minden változása egy esemény hatására következik be.
Az esemény bekövetkezésekor egy előre megadott programrészlet lefut. (amelynek hatására, akár újabb események váltódhatnak ki)
1. ActionScript 3.0
1.1. Eseményvezérlés az AS3-ban
ActionScript 3-ban minden esemény egy objektum, amely az Event osztály vagy annak egy alosztályának példánya. Az esemény objektum nem csak az esemény részletes leírását, de az annak kezeléséhez szükséges metódusokat is tartalmazza.
Minden esemény három részből áll:
- az esemény forrása (source, más néven event target): melyik objektum fogja kiváltani.
- maga az esemény (event): mi történik pontosan
- a válasz (response): milyen műveletet hajtsunk végre
Gyakorlatban a target egy objektum, az esemény egy esemény objektum, a válasz pedig egy metódus szokott lenni.
Objektumhoz eseményt rendelni egy figyelő (listener) segítségével lehet az addEventListener függvénnyel, mely paraméterként az eseményt és a végrehajtandó függvényt mint objektumot kapja.
A figyelő egy olyan speciális objektum vagy függvény, amely bejegyzi magát egy másik objektumhoz, hogy értesülni szeretne, ha azon valamely esemény megtörténik.
function eseményVálaszFüggvény(eseményObjektum:EseményTípus):void {
// Végrehajtandó kód
}
eseményForrás.addEventListener(EseményTípus.ESEMÉNY_NEVE, eseményVálaszFüggvény);
Lássuk, mi történik ilyenkor a háttérben:
Legyen a konkrét eseményünk a MouseEvent eseményosztály CLICK eseménye (az egér bal gombjával való kattintás). Amikor a Flash Player megnyitja a fájlt, feljegyzi, hogy van egy eseményVálaszFüggvény nevű függvény. Amikor a fenti kód lefut, az eseményForrás objektum figyelői közé bekerül egy referencia az eseményVálaszFüggvény-re Amikor valaki rákattint az eseményForrás objektumra, a Flash Player létrehoz egy MouseEvent objektumot, ami leírja az esemény részleteit: miféle esemény, hol, milyen objektummal történt. Ezután a Flash Player végignézi az eseményForrás figyelőit, és meghívja őket, a MouseEvent objektumot átadva nekik.
1.2. Különbség a korábbi verziókhoz képest
A leglényegesebb eltérés a korábbi AS verziókhoz képest az az eseménykezelésben, hogy bár még az AS2-ben is ötféle különböző eseménykezelő rendszer volt, az AS3-ban ezeket egyesítették és egységesítették. Ez az ötféle eseménykezelő rendszer a következő:
- on() események és onClipEvent() események, melyek közvetlenül MovieClip és Button objektumokhoz rendelhetőek hozzá.
- callback események: egy objektum egy eseményéhez lehet egy függvényt csatolni (pl. az XML.onload)
- eseményfigyelők
- UIEventDispatcher osztály a DOM eseménymodell részleges implementációjára
Ezeknek mint megvolt a maga előnye és hátránya, például az on és onClipEvent események könnyen, gyorsan használhatóak voltak, de egy nagyobb projektnél nem volt célszerű, hogy a kódrészletek közvetlenül a MovieClipekbe voltak rakva, nehéz volt őket megtalálni.
A callback függvényeket is könnyű volt használni, de nagy hátrányuk volt, hogy így egy eseményhez nem lehetett, csak egyetlen függvényt hozzárendelni (ez persze kikerülhető volt, de ennek ellenére problémás).
Ráadásul az öt különböző modell nem csak a fejlesztők számára volt problémás, hanem a felhasználóknak is, mert az öt modellnek sem a szintaxisa sem a szemantikája nem egyezett meg mindenhol teljesen egymással. A this kulcsszó például mást és mást jelentett.
Az AS3 ezzel szemben egy új, egységes modellt vezetett be, a DOM eseménykezelő modelljére alapozva. Bár az SWF fájl szerkezete nem teljesen azonos a DOM-éval, a megjelenítési lista (display list) és a DOM között elegendő hasonlóság van technikailag a megfeleltetésre (azaz a display objektumok és a node-ok közötti megfeleltetésre). A DOM modell a viselkedés (behaviour) fogalmára épül.
1.3. Eseményfolyam (event flow)
Ennek a résznek a megértéséhez szükséges lehet a display list ismerete.
Amikor egy esemény bekövetkezik, a Flash Player elküldi a generált esemény objektumot. Amennyiben az érintett objektum (a forrás, azaz célobjektum (target)) nincs a display listben, rögtön ennek továbbítja az eseményt. Amennyiben azonban a target a display list része, a display listnek kerül elküldésre az esemény, és azon továbbítódik a cél felé. Az eseményfolyam, azaz event flow azt írja le, hogy az esemény milyen útvonalon jut el a célobjektumhoz. Az eseményfolyam három részből áll:
- capture phase ("zsákmány-fázis") - az az út, amelyet a cél felé teszünk a Stage-ből indulva
- target phase (cél-fázis) - magánál a célobjektumnál
- bubbling phase ("buborék-fázis") - az az út, amit visszafelé teszünk a Stage-hez
Ennek célja az, hogy egy eseményt ne csak az azt kiváltó objektumnál, hanem az event flow-ban szereplő node-oknál is le tudjunk kezelni. Például olyankor jó ez, ha egy gomb és egy címke van egy objektumban, és az objektumban szeretnénk lekezelni azt, ha a gombra kattintanak, mert abban történnek a lényegi változások.
Az Event osztálynak van néhány speciális, az event flow szempontjávól lényeges propertyje:
- bubbles - Egy eseményről azt mondjuk, hogy "buborékos", ha a targettől a Stage felé továbbadódik annak szülőin keresztül. Ez az attribútum azt tárolja, hogy az adott esemény ilyen-e
- eventPhase - Tartalmazza, hogy épp melyik fázisban vagyunk. E közül a három konstans közül valamelyik: CAPTURING_PHASE, AT_TARGET, BUBBLING_PHASE
- target - A célobjektumra való referencia
- currentTarget - Az aktuális objektum referenciája
Az Event osztálynak három típusú metódusa van:
- használati metódusok
- clone() - lemásolja az eseményt
- toString() - szöveges formában visszaadja az esemény leírását
- eseményfolyam metódusok - ezekkel az eseményfolyamból vehetünk ki csomópontokat
- alapviselkedés metódusok - események alapértelmezett viselkedését befolyásolhatjuk (tilthatjuk) velük (pl. hogy dupla kattintásnál kijelöljük a kurzor alatt lévő szót)
1.4. Eseményfigyelők (event listener)
Az eseményfigyelők, más néven eseménykezelők olyan speciális függvények, melyek bizonyos események hatására hajtódnak végre. Eseményfigyelő létrehozása általában két lépéses:
- Először szükség van egy konkrét függvényre vagy metódusra, ami ezt a működést megvalósítja, ezt általában először létre kell hozni.
- Az addEventListener() metódussal regisztálni kell a célobjektumnál a figyelőt
Eseményfigyelőket eltávolíthatunk a removeEventListener() függvénnyel, ha már nincs rájuk szükség.
Eseményt kiváltani a dispatchEvent(myEvent:MyEventType) metódussal lehetséges
2. ActionScript 2.0
2.1. Eseményvezérlés
Az ActionScript egy eseményvezérelt nyelv. A program minden változása egy esemény hatására következik be.
Az esemény bekövetkezésekor egy előre megadott programrészlet lefut. (amelynek hatására, akár újabb események váltódhatnak ki)
JavaScripttel ellentétben nincs Event, azaz eseményt leíró objektum.
A régebbi Flash 5 és a jelenlegi Falsh MX között a eseményvezérlés szintaktikájában is jelentős fejlődés történt. Ez pedig a callback függvények
használata. Pl. az előző verzióban egy gomb megnyomásánál a következő kódrészletnek a gombhoz tartozó résznél kellett lennie: on(Press){utasítások}. (Ha
a gomb megnyomódik, akkor lefutnak az utasítások.)
Az új verziónál lehetőség van arra, hogy ne kelljen minden eseményvezérlést máshol tárolnunk, ezáltal bármikor lehet módosítani az eseménykezelők
felüldefiniálásával a gomb viselkedését. gomb_neve.onPress=function(){utasítások}
Tehát a szintaktika: objektum.eseményleíró = callbackfüggvény
A Flash MX eseménykezelő-modelljével ismerkedjünk meg részletesebben
Mint feljebb említettük, nagy fejlődést mutat ez a Flash 5 lehetőségeihez képest, szépen felépített és jól áttekinthető, ugyanakkor moduláris és könnyen
variálható scripteket írhatunk. Ezekkel egyszerűbben és sokrétűben hozhatunk létre animációkat, ötletes és hasznos interaktív elemeket.
Az alapvető meghatározások mellett néhány trükköt is bemutatunk.
Már említettük, hogy az ActionScript egy eseményvezérelt nyelv, ezért elsőként az esemény (event) fogalmát kell tisztáznunk. Eseménynek nevezzük azt a
dolgot, ami a mozi futása közben történik. Ez lehet a felhasználó által generált esemény, mint pl. egy egérkattintás vagy egy billentyű lenyomása, ill.
lehet rendszeresemény, amire jó példa az, hogy a mozi egy képkockáról a következőre lép.
Többféle lehetőségünk van események kezelésére:
- Eseménykezelő metódusok (event handler methods) használata
- Eseményfigyelők (event listeners) használata
- Egy filmklip vagy nyomógomb speciális eseménykezelőinek használata
- Komponensek eseménykezelése
2.2. Eseménykezelő metódusok használata
Az eseménykezelő valójában egy függvény, ami akkor hajtódik végre, amikor az adott esemény bekövetkezik. Eseménykezelő pl. az onEnterFrame vagy az onMouseMove, ez azonban nem csinál semmit addig, amíg nem definiálunk egy függvényt, amit végrehajthat (addig undefined az értéke). Itt fontos megjegyeznünk, hogy valójában az enterFrame esemény következik be, és az onEnterFrame, ill. az ahhoz kapcsolt függvény az, amivel megmondjuk, hogy mi történjen. Azt, hogy enterFrame, Flash MX-ben nem írjuk a scriptbe soha, csak azért használjuk így, hogy tudjunk beszélni róla. A következő ActionScript osztályok definiálnak eseménykezelőket: "Button osztály", "ContextMenu osztály", "ContextMenuItem osztály", "Key osztály", "LoadVars osztály", "LocalConnection osztály", "Mouse osztály", "MovieClip osztály", "MovieClipLoader osztály", "Selection osztály", "SharedObject osztály", "Sound osztály", "Stage osztály", "TextField osztály", "XML osztály", és "XMLSocket osztály". Egy eseménykezelő három fő részből áll: egy objektumból, amin az esemény kiváltódik; az objektumhoz tartozó eseménykezelő metódus nevéből; és az eseménykezelőt megvalósító függvényből. A következő kód jelzi az eseménykezelők alapvető struktúráját:
object.eventMethod = function () {
// Az eseménynek megfelelő kód
}
illetve Flash MX-ben:
function fvname() {
// Az eseménynek megfelelő kód
}
majd:
object.eventMethod = fvname;
onClipEvent(enterFrame) {
_x+=Math.round(Math.random()*5);
}
function mozgas () {
this._x+=Math.round(Math.random()*5);
}
stop();
golyobis_mc.onEnterFrame=mozgas;
// az onEnterFrame a mozgas fv. visszatérési értékét veszi fel – helytelen módszer golyobis_mc.onEnterFrame=mozgas(); // az onEnterFrame magára a mozgas fv.-re mutat golyobis_mc.onEnterFrame=mozgas;
function mozgas () {
this._x+=Math.round(Math.random()*5);
return this._x;
}
stop();
golyobis_mc.onEnterFrame=mozgas();
trace(golyobis_mc.onEnterFrame);
function mozgas () {
this._x+=Math.round(Math.random()*5);
}
stop();
for (i=0; i<15; i++) {
_root[’’golyobis”+i+”_mc”].onEnterFrame=mozgas;
}
stop();
onEnterFrame=_root.mozgas;
function mozgas () {
this._x+=Math.round(Math.random()*5);
if (this._x>=300) {
this._x=300;
this.onEnterFrame=undefined;
}
}
onMouseDown=function () {
golyobis1_mc._x=150;
golyobis1_mc.onEnterFrame=mozgas;
};
function mozgas (klip, hatar) {
klip._x+=Math.round(random()*5);
if (klip._x>=hatar) {
klip._x=hatar;
klip.onEnterFrame=undefined;
}
}
onEnterFrame=function () {
_root.mozgas(this, 200);
};
function noveles () {
this._xscale=this._yscale+=10;
if (this._xsale>=300) {
this._xscale=this._yscale=300;
this.onEnterFrame=undefined;
}
}
klip.onEnterFrame=noveles
// MoveRight osztály
class MoveRight extends MovieClip {
function onPress() {
this._x += 20;
}
}
2.3. Eseményfigyelők használata
A mozinkban elhelyezett objektumok figyelhetik az eseményeket, és reagálhatnak is rájuk. Ezek az eseményfigyelők (listener). Nem mindenféle objektum
figyel minden eseményre, valamelyikhez nekünk kell hozzárendelni azt. Ilyen pl. a moziklip objektum: figyel az egéreseményekre, de a
billentyűzetfigyelésre már utólag kell rábírnunk.
Az eseményfigyelők két részből állnak: egy figyelő objektumból (listener object), ami reagál egy eseményre és egy adó objektumból (broadcaster object),
ami regisztrálja a figyelő objektumot és megadja neki, hogy fogadja az eseményt. Például regisztrálhatunk egy nyomógomb objektumot, hogy fogadja egy
szövegdoboz megváltoztatására irányuló eseményeket. Hozzákapcsolhatunk több figyelő objektumot is egyetlen adó objektumhoz, és egy figyelő objektum
számos adó objektumtól fogadhat eseményeket.
A következő ActionScript osztályok képesek eseményfigyelők használatára: "Key osztály", "Mouse osztály", "MovieClipLoader osztály", "Selection osztály",
"Stage osztály", and "TextField osztály".
Az eseményfigyelők eseménykezelő modellje hasonlít a fenti eseménykezelő metódusok használatára, két fő különbséggel:
- Az eseménykezelő a figyelő objektumhoz van hozzákapcsolva, és nem ahhoz az objektumhoz, ami közvetíti az eseményt.
- Az adó objektumnak van egy speciális metódusa (addListener()), ami regisztrálja a figyelő objektumo(ka)t, akik majd fogadják az ő eseményeit.
var listenerObject.eventName = function(){
// Eseménykezelő kód helye
};
broadcasterObject.addListener(listenerObject);
broadcasterObject.removeListener(listenerObject);
// Létrehozunk egy új figyelő objektumot, focusListener néven
var focusListener:Object = new Object();
// Definiáljuk a figyelő objektumhoz tartozó függvényt
focusListener.onSetFocus = function(oldFocus_txt:TextField, newFocus_txt:TextField) {
oldFocus_txt.border = false;
newFocus_txt.border = true;
}
// Összekapcsoljuk a figyelő objektumot az adó objektummal
Selection.addListener(focusListener);
2.4. Egy filmklip vagy nyomógomb speciális eseménykezelőinek használata
A színtéren lévő nyomógomb, illetve filmklip példányokhoz közvetlenül is hozzákapcsolhatunk eseménykezelőket. Nevezetesen az on() és onClipEvent()
eseménykezelőket használhatjuk, és ekkor a nyomógomb, illetve filmklip példányokra kell „ráírnunk” a kódot. Nem használhatjuk eseménykezelésre ezt a
lehetőséget, olyan nyomógomb, illetve filmklip példányok esetében, amiket futási időben hozunk létre, ilyen esetekben az előző két eseménykezelő módszer
használható.
Az on() eseménykezelő gombesemények kezelésére alkalmas, és a következő szintaxissal használhatjuk:
on(mouseEvent) {
// A kód helye
}
AmouseEvent paraméter lehetséges értékei (, és az események leírása):
press: Az egér gombja nyomva van, mialatt az egér kurzor a nyomógomb fölött van.
release: Az egér gombját felengedjük, mialatt az egérmutató a nyomógomb fölött van.
releaseOutside: Mialatt az egérmutató a nyomógomb fölött van, lenyomjuk az egér gombját, majd a nyomógomb területén kívül engedjük fel. A press és a
dragOut események mindig megelőzik a releaseOutside eseményt.
rollOut: Az egérmutató kikerül a nyomógomb területéről.
rollOver: Az egérmutatóval áthaladunk a nyomógomb területe felett.
dragOut: Az egérmutatóval a nyomógomb területe felett állunk és lenyomjuk az egér jobb gombját, nyomva tartjuk, majd kigördítjük a nyomógomb
területéről az egérmutatót.
dragOver: Az egérmutatóval a nyomógomb területe felett állunk és lenyomjuk az egér jobb gombját, kigördítjük a nyomógomb területéről az
egérmutatót, majd visszagördítjük a nyomógomb fölé.
keyPress ("key"): Meghatározott billentyű leütése. A paraméter kulcs része ("key") egy billentyű kód vagy billentyű konstans lehet. Jól használható ez a
lehetőség arra, hogy bizonyos előre definiált billentyűk viselkedését felülírjuk. A nyomógomb elhelyezhető az alkalmazás bármely pontján, a színtéren
belül, illetve kívül is. Az egyetlen korlátja ennek a technikának, hogy az on() eseménykezelő nem alkalmazható futási időben.
A fentiek szemléltetésére tekintsük a következő két példát:
on(press) {
trace("Megnyomtad a gombot!");
}
on(rollOver, rollOut) {
trace("Áthaladtál felettem vagy legördültél rólam!");
}
onClipEvent(movieEvent){
// A kód helye
}
onClipEvent (keyDown) {
if (Key.getCode() == Key.RIGHT) {
this._parent.nextFrame();
} else if (Key.getCode() == Key.LEFT) {
this._parent.prevFrame();
}
}
stop();
Mouse.hide();
eger_mc.onMouseMove=function () {
this._x=xmouse;
this._y=ymouse;
};
eger_mc.onMouseMove()
tesztKlip_mc.onRollOver=function () {
trace(’’mintha a menüpont3_mc-re kattintottunk volna’’);
menupont3_mc.onRelease();
}
proba_mc.onRelease=function(par1, par2) {
//függvénytörzs
}
proba_mc.onRelease(’’valami’’, pl_egy_változó);
function probaFuggveny () {
}
probaFuggveny=function () {
}
2.5. Komponensek eseménykezelése
Minden komponens rendelkezik eseményekkel, amik vagy felhasználói interakciók következtében állnak elő (pl.: click és change események), vagy akkor,
amikor valami meghatározó történik a komponenssel (pl.: load esemény).
(A komponensek áttekintése megtalálható a mellékletben.)
A komponensek eseményeit is a fent említett technikákhoz hasonló módon lehet kezelni, részletesebben csak az eseményfigyelők használatára térek ki.
A legfontosabb jellegzetességek:
- Az adó objektum (broadcaster) maga a komponens példány (componentInstance).
- A figyelő objektum egy függvény vagy egy objektum is lehet.
- A figyelő regisztrálása az addEventListener metódussal történik. A következő szintaxist kövessük:
componentInstance.addEventListener("eventName", listenerObjectORFunction);
- Ha a figyelő egy objektum, akkor egy függvényt kell definiálni a számára, ami lefut az esemény bekövetkezésekor. A szintaxis a következő:
Megjegyzés: Flash MX-ben alkalmazható a callback mechanizmus a fentebb írtak alapján!
var listenerObject:Object = new Object(); listenerObject.eventName = function(evtObj:Object){ // Az eseménykezelő kód… };componentInstance.addEventListener("eventName", listenerObject); - Több figyelőt is regisztrálhatunk ugyanahhoz a komponens példányhoz: myButton.addEventListener("click", listener1); myButton.addEventListener("click", listener2);
- Egy figyelőt is regisztrálhatunk több komponens példányhoz: myButton.addEventListener("click", listener1); myButton2.addEventListener("click", listener1);
myListener = new Object();
myListener.click = function(evt){
trace(evt.target.label);
}
myButton.addEventListener("click", myListener);
class ClassName extends MovieClip{
public function onLoad():Void {
componentInstance.addEventListener("eventName", this);
}
public function eventName(evtObj:Object):Void {
// Az eseménykezelő kód…
}
}
import mx.controls.TextInput;
import mx.controls.RadioButton;
class Pelda extends MovieClip
{
// Komponens deklarációk
var TI:TextInput;
var RB1:RadioButton;
var RB2:RadioButton;
var RB3:RadioButton;
// Események és komponensek összekapcsolása
public function onLoad():Void
{
TI.addEventListener("change", this);
RB1.addEventListener("click", this);
RB2.addEventListener("click", this);
RB3.addEventListener("click", this);
}
// A "change" eseménykezelője
public function change(event:Object):Void
{
if (event.target == TI) {
// Kód helye
}
}
// A "click" eseménykezelője
public function click(event:Object):Void
{
switch (event.target) {
case RB1:
case RB2:
case RB3:
// Kód helye
break;
}
}
}
2.6. Idővonalak
_root - Fő idővonal meghívása
A Flash film legfelső szintje, azaz a gyökér vagy más néven a fő idővonal.
Gyakran használt parancs, de én mégsem javaslom a használatát túl gyakran. Ha ezt használod, ne ágyazd be a filmedet sehova. Azaz ha loadMovie-t
használsz erre a mozira, akkor a _root annak a gyökerére mutat, amibe beágyaztad a mozit. Nem biztos, hogy ez mindig jó.
Használata:
_root.flash_mc_var=0;
_parent - Egy szinttel feljebbi idővonal meghívása
Az adott MovieClipen (-ben) használat esetén az MC előtti idővonal. Azaz, ha egy MC-ben használod és az MC az a _root-on van, akkor a _parent azonos a _root idővonallal. De ezzel mindig csak egy szintet lépsz vissza a hierarchiában.
Használata:
_parent._parent._parent.gotoAndPlay(1)
itt 3 szintet létünk vissza.
this - Saját idővonal meghívása
Amikor tanulgattam a Flash-t, először én is elgondolkodtam, hogy ez mire jó. Azonban rá kellett jönnöm: nagyon is fontos. Ezzel tudunk úgy beavatkozni az adott időfolyamba, hogy az adott idővonal pontos nevét tudnánk. Ez főként az osztályoknál, függvényeknél és ciklusoknál fogjuk alkalmazni.
Használata:
onClipEvent(enterFrame){
this._alpha+=5
}
Ha egy MC-t a loadMovie("movi.swf",n) paranccsal töltünk be az n-edik mélységbe, akkor a legkönnyebben a _leveln parancsal tudunk hozzáférni, úgy hogy az n helyére beírjuk a loadMovie-ban használt mélységet. A _root = _level0.
Használata:
_level3.movie_mc.gotoAndStop(2);