Egér események kezelése 1. rész (AS3) / Swf.hu

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á.

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.

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.

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.