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




 
 
SEGÉDLETEK Flash alapok

Billentyűzet eseménykezelés (AS3)
  feltöltve: 2008.03.02 | szerző: Ducky | olvasva: 675 alkalommal

   
 
Ebben a segédletben a billentyűzet alap eseményeivel foglalkozunk, konkrétan a KEY_DOWN és KEY_UP események működésére készítünk példákat. Az alap példát két verzióban készítjük el, egy frame-re írt megoldással és egy külső osztály verzióval. 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 példában a kurzor vezérlő gombok lenyomását és felengedését kontrolláljuk és ennek megfelelően kiíratjuk a billentyűzethez tartozó kódokat. Készítünk még egy vezérlés példát is a végén. Lássunk is hozzá.

Frame-re írt verzió

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 550 pixel, magasság 150 pixel, egy tetszőleges világosabb színű háttér és 36 fps Frame rate.

Kép 1

Most készítsük elő a rétegeket az időszalagon. Két rétegre lesz szükségünk és minden rétegen egy kulcskockára. A rétegeket nevezzük el a lenti képen látható módon.

Kép 2

Most készítsük el a szükséges Movie Clip-eket (továbbiakban mc), amelyeket vezérelni fogunk a gombok segítségével. Minden mc-t az alap elnevezésű rétegen helyezzünk el. Összesen öt mc-re lesz szükségünk, ahogyan az a lenti képen is látható. Adjuk meg az összes mc-nek azokat az instance neveket, amelyek szintén szerepelnek a képen, összekötve az mc-kkel. A billentyűzetet ábrázoló mc-k lehetnek tetszőlegesen bármilyen formájúak.

Kép 3

Az ötödik mc-ben egy szövegmezőt helyezzünk el, jó nagy méretben, ennek a szövegmezőnek a tulajdonságai láthatóak a lenti képen. Dynamic Text, Instance name: codeKiir, fonttípusa Arial és a betűméret 96. Ebben a nagy szövegmezőben fog megjelenni a lenyomott billentyűk kódja.

Kép 4

Most pedig készítsük el a vezérlő AS kódot, amelyet az AS elnevezésű rétegen fogjuk elhelyezni, az első és egyetlen kulcskockán. A kód nem lesz túl hosszú, hiszen a feladat maga is egyszerű. Az AS réteg kulcskockájára másoljuk be a lenti kódot.

// mozi tároló tömb
var moziTarolo:Array = new Array();
moziTarolo[37] = gbMozi_1;
moziTarolo[38] = gbMozi_2;
moziTarolo[39] = gbMozi_3;
moziTarolo[40] = gbMozi_4;

// események
stage.addEventListener ( KeyboardEvent.KEY_DOWN, keydownEsemeny );
stage.addEventListener ( KeyboardEvent.KEY_UP, keyupEsemeny );

// KEY_DOWN függvény
function keydownEsemeny ( event:KeyboardEvent ):void {
    if ( event.keyCode >= 37 && event.keyCode <= 40 ) {
        gombLenyomva ( event.keyCode, moziTarolo[event.keyCode] );
    }
}

// KEY_UP függvény
function keyupEsemeny ( event:KeyboardEvent ):void {
    if ( event.keyCode >= 37 && event.keyCode <= 40 ) {
        gombFelengedve ( moziTarolo[event.keyCode] );
    }
}

// gomb lenyomás függvény
function gombLenyomva ( gbKy:int, gbMc:MovieClip ):void {
    textMozi.codeKiir.text = gbKy;
    gbMc.alpha = 0.4;
}

// gomb felengedés függvény
function gombFelengedve ( gbMc:MovieClip ):void {
    textMozi.codeKiir.text = "";
    gbMc.alpha = 1;
}

//

Nézzük meg, hogy miből is áll a fenti kód. A moziTarolo egy tömb lesz, amiben eltároljuk a billentyűzet mc-ket. A tömb indexelése 37-38-39-40 lesz, mivel a használt billentyűzetek kódja is ennek megfelelő és így könnyebb lesz az azonosítás. Ezután létrehozzuk a KEY_DOWN és a KEY_UP eseményeket, amelyekhez hozzárendeljük a keydownEsemeny és a keyupEsemeny függvényeket. A keydownEsemeny() függvény ellenőrzi, hogy a lenyomott billentyűk kódja bele esik-e a 37 és 40 közötti tartományba, és ha igen, akkor lefuttatja a gombLenyomva() függvényt, aminek paraméterként átadja a billentyű kódját és a hozzá tartozó mc-t a tömbből. A keyupEsemeny() függvény szintén ellenőrzi, hogy a lenyomott billentyűk kódja bele esik-e a 37 és 40 közötti tartományba, és ha igen, akkor lefuttatja a gombFelengedve() függvényt, aminek paraméterként átadja a billentyű kódját és a hozzá tartozó mc-t a tömbből. A gombLenyomva() függvény kiírja a szövegmezőbe az aktuális billentyű kódot, majd a hozzá tartozó mc alpha értékét 0.4-re állítja. Itt ne felejtsük el, AS3-ban az alpha érték 0 és 1 közé esik. A gombFelengedve() függvény törli a szövegmező tartalmát, és visszaállítja az mc alpha értékét 1-re. Összefoglalva tehát, ha lenyomjuk valamelyik kurzor nyíl billentyűt, akkor a hozzá tartozó mc elhalványul és a kódja megjelenik a szövegmezőben. Mentsük el a mozit és teszteljük. Most pedig nézzük meg ugyanezt külső osztály alkalmazásával.

Külső osztály verzió

Első lépésként készítsük el a külső AS fájlt. Az FLA fájl ugyanaz marad, csak kicsit módosítunk majd rajta. Az as fájlba másoljuk bele a lent látható kódot, majd mentsük el BillentyuEsemeny.as néven az FLA fájlal azonos mappában.

/* BillentyuEsemeny.as */
//

package {

    // szükséges csomagok
    import flash.display.MovieClip;
    import flash.events.KeyboardEvent;

    // BillentyuEsemeny osztály
    public class BillentyuEsemeny extends MovieClip {

        // mozi tároló tömb
        private var moziTarolo:Array = new Array();

        // konstruktor
        public function BillentyuEsemeny ():void {
            moziTarolo[37] = gbMozi_1;
            moziTarolo[38] = gbMozi_2;
            moziTarolo[39] = gbMozi_3;
            moziTarolo[40] = gbMozi_4;
            stage.addEventListener ( KeyboardEvent.KEY_DOWN, keydownEsemeny );
            stage.addEventListener ( KeyboardEvent.KEY_UP, keyupEsemeny );
        }

        // KEY_DOWN metódus
        private function keydownEsemeny ( event:KeyboardEvent ):void {
            if ( event.keyCode >= 37 && event.keyCode <= 40 ) {
                gombLenyomva ( event.keyCode, moziTarolo[event.keyCode] );
            }
        }

        // KEY_UP metódus
        private function keyupEsemeny ( event:KeyboardEvent ):void {
            if ( event.keyCode >= 37 && event.keyCode <= 40 ) {
                gombFelengedve ( moziTarolo[event.keyCode] );
            }
        }

        // gomb lenyomás metódus
        private function gombLenyomva ( gbKy:int, gbMc:MovieClip ):void {
            textMozi.codeKiir.text = gbKy;
            gbMc.alpha = 0.4;
        }

        // gomb felengedés metódus
        private function gombFelengedve ( gbMc:MovieClip ):void {
            textMozi.codeKiir.text = "";
            gbMc.alpha = 1;
        }

    }// osztály vége

}// csomag vége
//

A kód elején importáljuk a szükséges csomagokat, majd elkészítjük a BillentyuEsemeny publikus osztályt. A kód többi része teljesen ugyanaz, mint a frame-re írt verziónál, így az nem szorul újabb magyarázatra. Az osztályban a konstruktor fogja feltölteni a tömböt az mc-kkel és az eseményeket is elkészíti. Most már csak hozzá kell rendelni az FLA fájlhoz az AS forrást. Töröljük ki az AS réteget, mert ehhez a verzióhoz nem lesz szükség scriptekre az FLA-n belül. Most kattintsunk a színpad egy üres részére, majd a Properties panelen a Document class mezőben adjuk meg az As3RootLoader osztályt.

Kép 5

Most pedig kombináljuk ezt a gomb eseménykezelést egy kis EnterFrame eseménnyel és mozgassunk meg valamit a billentyűk segítségével.
 
   
 
 

© 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 >>> : .. .