Ebben a sorozatban a leggyakrabban használt egér eseményekkel fogunk megismerkedni. Az egér eseményekkel foglalkozó első segédletben egy egyszerű példán keresztül ismerhetünk meg három egér eseményt. A példában egy olyan alkalmazást készítünk, ami az egér bal gombjának lenyomására és felengedésére reagál, majd a gomb nyomva tartása mellett az egér mozgását is követi. Ha még nem dolgoztál AS3-al, akkor javaslom, hogy indulásnak olvasd el Reider Actionscript 3.0 alapok Adobe Flash CS3-ban című segédletét. A leckében használt egér események a következőek lesznek: MOUSE_DOWN, MOUSE_UP, MOUSE_MOVE. Lássunk is hozzá.
Alap elemek elkészítése
Ebben a példában tehát az bal egér gomb lenyomását, felengedését és az egér mozgását fogjuk felhasználni. A kész működő példa megtekinthető a lenti moziban.
Az összetevőkkel itt se lesz sok problémánk, összesen egy MovieClip-et (mc) kell elkészítenünk és azt se helyezzük ki a színpadra, a Library-ból használjuk fel. Készítsünk egy új AS3 mozit, azaz az új mozi készítésekor CS3-ban adjuk meg a Flash file (ActionScript 3.0) beállítást. Az új mozi paramétereit állítsuk be a lenti képen látható módon. Szélesség 500 pixel, magasság 300 pixel, egy tetszőleges világosabb színű háttér és 36 fps Frame rate.
A mozin belül egyetlen rétegre lesz szükségünk és azon is egyetlen kulcskockára. Az egyetlen rétegünknek adjuk az AS nevet. Most készítsük el azt az egy mc-t, amire szükségünk lehet. Készítsünk egy új MovieClip-et, majd rajzoljunk a középpontjára egy egyszerű kis X jelet. Természetesen ez a forma lehet bármi más. Az mc neve legyen Jelölés mozi.
Most ezt az mc-t be kell ágyaznunk. Ennek a kivitelezése már valószínűleg mindenki számára ismerős, de azért nézzük át. Válasszuk ki az mc-t a Library-ban, kattintsunk rá a jobb egérgombbal, majd a megjelenő menüben válasszuk a Linkage... lehetőséget.
A megjelenő Linkage panelen jelöljük be az Export for ActionScript és az Export in first frame négyzeteket, majd a Class mezőben adjuk meg az mc osztályát JeloloMozi néven. A Base class mezőbe a MovieClip osztály kerül: flash.display.MovieClip. Ha ez megvan, akkor nyomjuk meg az Ok gombot és a beágyazás el is készült. Ne felejtsük el, hogy az mc a Library-ban marad, nem kell kihelyezni a színpadra.
AS kód készítése
Most, hogy előkészítettünk mindent, jöhet a vezérlő AS kód. Válasszuk ki az AS réteg egyetlen kulcskockáját, majd nyissuk meg az Actions panelt és írjuk bele a következő kódot.
// jelölő mozi kezdő pozíciók
var alapX:Number = stage.stageWidth / 2;
var alapY:Number = stage.stageHeight / 2;
// jelölő és vonaltár mozik
var vonalTar:MovieClip;
var jelolMozi:JeloloMozi;
addChild ( vonalTar = new MovieClip () );
addChild ( jelolMozi = new JeloloMozi () );
// alap pozíció és eseménykiosztás
jeloloPozicio ( 1 );
esemenyKiosztas ();
// jelölő mozit pozícionáló függvény
function jeloloPozicio ( forma:int ):void {
if ( forma == 1 ) {
jelolMozi.x = alapX;
jelolMozi.y = alapY;
} else if ( forma == 2 ) {
jelolMozi.x = mouseX;
jelolMozi.y = mouseY;
}
}
// vonal rajzoló függvény
function vonalRajzol ():void {
vonalTar.graphics.clear ();
vonalTar.graphics.lineStyle ( 1, 0x333333, 0.7 );
vonalTar.graphics.moveTo ( alapX, alapY );
vonalTar.graphics.lineTo ( jelolMozi.x, jelolMozi.y );
}
// eseménykiosztás függvény
function esemenyKiosztas ():void {
stage.addEventListener ( MouseEvent.MOUSE_DOWN, downEsemeny );
stage.addEventListener ( MouseEvent.MOUSE_UP, upEsemeny );
}
// MOUSE_DOWN függvény
function downEsemeny ( eDat:MouseEvent ):void {
jeloloPozicio ( 2 );
vonalRajzol ();
stage.addEventListener ( MouseEvent.MOUSE_MOVE, moveEsemeny );
}
// MOUSE_UP függvény
function upEsemeny ( eDat:MouseEvent ):void {
jeloloPozicio ( 1 );
vonalRajzol ();
stage.removeEventListener ( MouseEvent.MOUSE_MOVE, moveEsemeny );
}
// MOUSE_MOVE függvény
function moveEsemeny ( eDat:MouseEvent ):void {
jeloloPozicio ( 2 );
vonalRajzol ();
}
//
Nézzük végig, mit is jelentenek a kódok. Az alapX és alapY változókban eltároljuk a jelölő mozi alap pozícióját. Innen fog kiindulni és ide is tér vissza mindig. Az alapX pozíció a mozi szélességének a fele, és az alapY a mozi magasságának a fele. Így a jelölő mozi mindig a színpad közepére fog kerülni, függetlenül a mozi méretétől. Ezután létrehozunk két mozit, az egyikben vonalat fogunk tárolni, a másikba pedig a jelölő mozi kerül. A jelölő mozi elmozdulásakor és mozgatásakor egy vonalat jelenítünk meg a mozi középpontja és a jelölőmozi között. Ezután a mozikat az addChild segítségével hozzáadjuk a display list-hez. Ha ezt kihagynánk, a mozik nem jelennének meg. A jeloloPozicio ( 1 ) függvény segítségével a kiinduló alap pozícióra helyezzük a jelölő mozit. A függvény paraméterként 1-et kap, ez jelzi, hogy alap pozícióra kell helyezni az mc-t. Ha 2-t kapna, akkor az egér aktuális pozíciójára helyezné el a jelölőt. Az esemenyKiosztas () függvénnyel osztjuk ki a működéshez szükséges eseményeket.
A jeloloPozicio ( forma:int ) függvény, ahogy már fentebb is említettük, a jelölő mozit helyezi el a forma változó értékétől függően. Ha az érték 1, akkor a jelölő mozit az alap pozícióra helyezi, ha pedig 2, akkor az egér aktuális pozíciójához rendeli. A vonalRajzol () függvény egy vonalat rajzol az alap x-y pont és a jelölő mozi x-y pontja közé. Így összeköti a jelölő mozit az alap ponttal. Az esemenyKiosztas () függvény adja meg a MOUSE_DOWN és MOUSE_UP eseményeket. A MOUSE_DOWN akkor érvényesül, ha lenyomjuk az egér bal gombját és a downEsemeny() függvényt rendeljük hozzá. A MOUSE_UP esemény akkor érvényesül, amikor felengedjük az egér bal gombját és az upEsemeny() függvényt rendeljük hozzá. Az eseményeket a stage kapja, így azon belül mindíg érvényesülnek.
A downEsemeny() függvény tehát az egér gomb lenyomásakor fut le és meghívja a jeloloPozicio ( 2 ) függvényt. Mivel a függvény a 2 értéket kapja, így a jelölő mozit az egér pozíciójára helyezi. A vonalRajzol () függvény segítségével megrajzoljuk az összekötő vonalat az alap pont és a jelölő mozi között. Hozzárendeljük még a színpadhoz a MOUSE_MOVE eseményt, amely akkor érvényesül, ha az egér mozog. Az eseményhez a moveEsemeny() függvény fog tartozni.
Az upEsemeny() függvény az egérgomb felengedésekor fut le. A jelölő mozit az alap pontra helyezi, megrajzolja a vonalat és törli a MOUSE_MOVE eseményt. Végezetül pedig a moveEsemeny() következik, ami akkor fut le, ha az egér mozog. A jelölő mozit az egér pozíciójára helyezi, majd megrajzolja az összekötő vonalat. Mivel a MOUSE_MOVE eseményt a bal egérgomb lenyomásakor hozzuk létre és a gomb felengedésekor töröljük, így az esemény csak addig él, amíg a bal egérgombot nyomva tartjuk.
Összefoglalva tehát a következő folyamat játszódik le. Amikor a színpadon lenyomjuk az egér bal gombját, akkor a jelölő mozi az egér pozíciójára ugrik és elindul a MOUSE_MOVE esemény, ami az egér pozícióján tartja a jelölő mozit. Ha az egér bal gombot felengedjük, akkor a jelölő visszakerül az alap pozícióra. Most készítsük el ugyanezt a megoldást külső osztály alkalmazásával is.
Külső osztály verzió
A külső osztály verziót elkészíthetjük úgy, hogy ezt a meglévő FLA-t módosítjuk, vagy készíthetünk egy teljesen új flash mozit ugyanezekkel a paraméterekkel és összetevőkkel. A változás a következő lesz. Az AS rétegen töröljük az összes AS kódot, ne maradjon semmi. Tetszőlegesen akár a réteget is átnevezhetjük üresre, vagy bármi másra, mivel a rétegen nem lesz semmi. Készítsünk egy új ActionScript fájlt a főmenü File / New menüpont segítségével. A megjelenő ablakban válasszuk az ActionScript file lehetőséget. Az új AS fájlt mentsük el az FLA fájlal azonos mappába EgerEsemenyek1.as néven. Most jöhet az osztály megadása a flash moziban. A Properties panelen a Document class mezőben adjuk meg az EgerEsemenyek1 osztályt. Ha megvan, mentsük el a fájl módosításait.
Most térjünk vissza a külső ActionScript fájlhoz. El kell készítenünk a külső vezérlő osztályt, ami ugyanazt a szerepet fogja betölteni, mint a fentebb megismert frame kód. Írjuk a lent látható kódot a külső EgerEsemenyek1.as fájlba, majd mentsük el. Figyeljük meg, hogy a publikus osztály neve megegyezik az AS fájl nevével (public class EgerEsemenyek1 - EgerEsemenyek1.as).
/* EgerEsemenyek1.as */
//
package {
// szükséges csomagok
import flash.display.MovieClip;
import flash.events.MouseEvent;
// EgerEsemenyek1 osztály
public class EgerEsemenyek1 extends MovieClip {
// tulajdonságok
private var alapX:Number;
private var alapY:Number;
private var vonalTar:MovieClip;
private var jelolMozi:JeloloMozi;
// konstruktor
public function EgerEsemenyek1 () {
addChild ( vonalTar = new MovieClip () );
addChild ( jelolMozi = new JeloloMozi () );
alapX = stage.stageWidth / 2;
alapY = stage.stageHeight / 2;
jeloloPozicio ( 1 );
esemenyKiosztas ();
}
// jelölő mozit pozícionáló metódus
private function jeloloPozicio ( forma:int ):void {
if ( forma == 1 ) {
jelolMozi.x = alapX;
jelolMozi.y = alapY;
} else if ( forma == 2 ) {
jelolMozi.x = mouseX;
jelolMozi.y = mouseY;
}
}
// vonalat rajzoló metódus
private function vonalRajzol ():void {
vonalTar.graphics.clear ();
vonalTar.graphics.lineStyle ( 1, 0x333333, 0.7 );
vonalTar.graphics.moveTo ( alapX, alapY );
vonalTar.graphics.lineTo ( jelolMozi.x, jelolMozi.y );
}
// eseménykiosztó metódus
private function esemenyKiosztas ():void {
stage.addEventListener ( MouseEvent.MOUSE_DOWN, downEsemeny );
stage.addEventListener ( MouseEvent.MOUSE_UP, upEsemeny );
}
// MOUSE_DOWN metódus
private function downEsemeny ( eDat:MouseEvent ):void {
jeloloPozicio ( 2 );
vonalRajzol ();
stage.addEventListener ( MouseEvent.MOUSE_MOVE, moveEsemeny );
}
// MOUSE_UP metódus
private function upEsemeny ( eDat:MouseEvent ):void {
jeloloPozicio ( 1 );
vonalRajzol ();
stage.removeEventListener ( MouseEvent.MOUSE_MOVE, moveEsemeny );
}
// MOUSE_MOVE metódus
private function moveEsemeny ( eDat:MouseEvent ):void {
jeloloPozicio ( 2 );
vonalRajzol ();
}
}// osztály vége
}// csomag vége
//
A kód egy kicsit hosszabb mint a frame-re írt verziónál, de a működési elv és a fő összetevők ugyanazok. Nézzük át röviden, mivel az előző verzióban a kód működését részletesen kitárgyaltuk. Először is importáljuk a szükséges csomagokat (flash.display.MovieClip és flash.events.MouseEvent), másra nem is lesz szükségünk. Aztán létrehozzuk a publikus EgerEsemenyek1 osztályt, a MovieClip-ből származtatva. Ezt az osztálynevet adtuk meg az FLA fájlban a Document class mezőben. Az osztály tulajdonságaiként létrehozzuk az alap x-y változókat és a két mozi tárolót. A konstruktor automatikusan lefut, tehát ebben hozzuk létre a tároló mozikat, meghatározzuk a kezdő pozíciókat és kiosztjuk az eseményeket. Az osztály többi metódusa már teljesen megegyezik a frame-re írt függvényekkel.
Mentsük el az AS fájlt, majd teszteljük a mozit. Ahogyan eddig is megszokhattuk, működésben nem lesz látható különbség. Ezzel el is érkeztünk a segédlet végéhez. Remélhetőleg elég részletes és érthető volt ez a kis leírás, mindenkinek jó munkát és sok sikert. Folytatása következik.
|