Uživatelské nástroje

Nástroje pro tento web


vyuka:udalosti_v_actionscriptu_3

Události a tlačítka v nové verzi ActionScriptu

Mějme jednoduchý příklad - viz následující obrázek:

Pro přehrání obsahu potřebujete Adobe Flash Plugin.

Dvě klasická tlačítka, kterými ovládáme instanci knihovního movieClipu mys_mc. Klip červeným tlačítkem (pojmenovaným tlacitko1_btn) zastavujeme a zeleným (pojmenovaným tlacitko2_btn) spouštíme (pomocí příkazů mys_mc.stop() a mys_mc.play(). V ActiosScriptu verze 2 jsme to mohli udělat jednoduše. Do layeru s kódem AcxtionScriptu jsme napsali:

this.tlacitko1_btn.onRelease = function() {
mys_mc.stop();
 
this.tlacitko2_btn.onRelease = function() {
mys_mc.play();

V ActionScriptu 3 to ovšem nefunguje. Kód musíme napsat jinak. Zato ale podle stejného kopyta pro všechny ovladače událosté. Nejprve musíme naladit přijímač posluchače na daou událost a popsat název funkce, která se vyvolá, když událost nastane. Události na kterou tlačítka (tlacitko1_btn a tlacitko2_btn ) budou reagovat jsou události myši - třídy MouseEvent. Jedním z nich je událost kliknutí (MouseEvent.CLICK). Funkce, která se vyvolá dojde-li k této události (tj.kliknutímk na tlačítko) nazveme kliknutoNaTlacitko1 a kliknutoNaTlacitko2. Do prvních dvou řádků v skriptovém layeru proto napíšeme:

this.tlacitko1_btn.addEventListener(MouseEvent.CLICK,kliknutoNaTlacitko1);
this.tlacitko2_btn.addEventListener(MouseEvent.CLICK,kliknutoNaTlacitko2);  

Takže, nyní nám zbývá definovat příslušné funkce kliknutoNaTlacitko1 a kliknutoNaTlacitko2. Každá funkce, která reaguje na nějakou událost dostává jako parametr vlastní událost (v daném případě typu MouseEvent). Proto vždy píšeme tento parametr do hlavičky funkce: function kliknutoNaTlacitko1(e:MouseEvent):void .

Prostřednictvím hodnot tohoto parametru můžeme získat řadu užitečných údajů. Tak například získáme odkaz na objekt, nad kterým bylo kliknuto (e.target), nebo můžeme zjistit jméno objektu nad kterým bylo kliknuto (e.target.name), souřadnice myši v době kliknutí ((e.target.stageX a e.target.stageY) atd. Tyto údaje např. můžeme vypisovat na obrazovku pomocí odlaďovacích příkazů trace.

Kód definující funkce kliknutoNaTlacitko1 a kliknutoNaTlacitko2 bude jednoduchý (trasovací příkazy trace slouží jen jako ilustrace vypisování hodnot, které můžeme „vydolovat“ z parametru události e):

function kliknutoNaTlacitko1(e:MouseEvent):void {
trace("kliknuto na tlačítko s názvem "+e.target.name);
trace("myš byla na souřadnicích x "+e.stageX + "y: "+e.stageY);
mys_mc.stop();
}
 
function kliknutoNaTlacitko2(e:MouseEvent):void {
trace("kliknuto na tlačítko s názvem "+e.target.name);
trace("myš byla na souřadnicích x "+e.stageX + "y: "+e.stageY);
mys_mc.play();
}

Zdrojový text příkladu si můžete stáhnout zde → zdrojovýText v ZIP

Další jednoduchý příklad událostí myši

Podívejme se na další jednoduchý příklad - máme zde dvě instance klipů mys_mc a syr_mc. Obě se otáčí. Když nad ně zajedeme myší, kurzor myši se změní na ručičku (jako nad tlačítkem) a když na objekt klikneme, přestane se otáčet a kurzor se změní na normální šipku. Odjedeme-li kurzorem od objektu, opět se roztočí. Když na ně opět najedeme, kurzor se změní na ručičku, po kliknutí se objekt přestane otáčet, můžeme ho však roztočit dvojklikem:

Pro přehrání obsahu potřebujete Adobe Flash Plugin.

Podívejme se jak je to možné naprogramovat. Nejprve - jak zařídit, aby se kurzor myši nad movieClipem změnil ze šipky na ručičku jako nad tlačítkem. To je jednoduché. Nastavíme vlastnost movieClipu buttonMode na hodnotu true (implicitně je na hodnotě false).

mys_mc.buttonMode=true;
syr_mc.buttonMode=true;

Reakci na kliknutí naprogramujeme obdobně jako v minulém příkladu. Nejprve přiřadíme oběma MovieClipům posluchače usálostí, který na kliknutí bude reagovat voláním funkce kliknuto:

mys_mc.addEventListener(MouseEvent.CLICK,kliknuto);
syr_mc.addEventListener(MouseEvent.CLICK,kliknuto);

Všimněte si, že jedna funkce (kliknuto) reaguje na události myši zachycené na dvou různých MovieClipech. Jak poznáme, nad kterým klipem bylo kliknuto?

Tato informace je právě přenášena povinným parametrem ve funkci reagujícím na událost - a tím je vlastní objekt události - v daném příkladě schovaný v parametru e.

K odkazu na objekt, nad kterým bylo kliknuto se dostaneme přes vlastnost události target (anglicky cíl, terč). Takže když napíšeme:

e.target.stop(); 

tj. pošleme instanci movieClipu zprávu stop() (tj. zavoláme funkci stop(), která zastaví přehrávání MovieClipu).

Můžeme si pomocí trasovacího příkazu trace dokonce i vypsat název instance MovieClipu - ten se skrývá ve hodnotě vlastnosti name, tj. v daném případě v e.target.name. Napíšeme tedy trasovací funkci:

trace("kliknuto na "+e.target.name);

Pokud chceme aby se po kliknutí změnil charakter klipu z „tlačítkového“ na obyčejný - tj. aby se ručička myšího kurzoru změnila na šipku, musíme klipu nastavit hodnotu buttonMode na false. Proto napíšeme:

e.target.buttonMode=false;

Vlastní definice celé funkce kliknuto pak vypadá takto

function kliknuto(e:MouseEvent){
   e.target.stop();
   trace("kliknuto na "+e.target.name);
   e.target.buttonMode=false;	
}

Dvojklik nejprve zachytíme posluchačema událostí

mys_mc.addEventListener(MouseEvent.DOUBLE_CLICK,dvojKliknuto);
syr_mc.addEventListener(MouseEvent.DOUBLE_CLICK,dvojKliknuto);

Normálně ale MovieClipy na dvojklik nereagují - vlastnost doubleClickEnabeld (tj. povolení dvojkliku) je nastavena na hodnotu false. Rpoto nesmíme zapomenout nastavit tuto vlastnost u obou MovieClipů na true

mys_mc.doubleClickEnabled=true;
syr_mc.doubleClickEnabled=true;

Na dvojklik se má cílový MovieClip znovu rozběhnout (zavoláme mu funkci play() a instance MovieClipu se má opět chovat jako tlačítko (kurzor se má změnit na ručičku). Proto mu změníme vlastnost buttonMode na true:

function dvojKliknuto(e:MouseEvent){
  trace("dvojkliknuto na"+e.target.name);
  e.target.play();
  e.target.buttonMode=true;
  trace("dvojkliknuto na "+e.target.name);
}

Nakonec chceme, aby obě instance MovieClipů reagovali na událost, kdy myš opustí instanci - přesune se jinam. Tato událost myši se jmenuje MouseEvent.MOUSE_OUT. Naprogramujeme tedy nejdříve přidání posluchačů události, kteří při výskutu události MOUSE_OUT zavolají funkci mysOdesla:

mys_mc.addEventListener(MouseEvent.MOUSE_OUT,mysOdesla);
syr_mc.addEventListener(MouseEvent.MOUSE_OUT,mysOdesla);

Funkce mysOdesla roztočí znovu klip (zavolá jeho funkci play), a nastaví chování klipu na „tlačítkové“ (tj. změní mhodnotu jeho vlastnosti buttonMode na true:

function mysOdesla(e:MouseEvent){
	e.target.play();
	e.target.buttonMode=true;
	trace("myš odešla od "+e.target.name);
}

Zdrojový kód příkladu naleznete zde → velkymysinec0.zip

Úkol:

Upravte klip tak aby:

  1. Sýr přestal reagovat na kliknutí.
  2. Sýr se dal myší táhnout. Jakmile byl myší uchopen, přestal se točit, jakmile byl myší puštěn začal se točit.

Viz následující obrázek:

Pro přehrání obsahu potřebujete Adobe Flash Plugin.

<- řešení úkolu

vyuka/udalosti_v_actionscriptu_3.txt · Poslední úprava: 2007/10/18 17:54 autor: kofranek