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




 
 
SEGÉDLETEK ActionScript

Enterframe letöltéskijelző (AS3)
  feltöltve: 2008.03.16 | szerző: Ducky | olvasva: 1427 alkalommal

 
 

Ebben a segédletben egy újabb letöltéskijelző megoldást ismerünk meg a teljes mozira. A letöltés folyamatát és annak végét az EnterFrame eseménnyel kontrolláljuk. Az AS3-ban már megvannak a speciális lehetőségek (pl. ProgressEvent.PROGRESS, Event.COMPLETE) a letöltések kontrollálására, ez szerepel is több segédletben. Ugyanakkor akik ehhez a megoldáshoz szoktak és nem akarnak változtatni, azoknak mindenképpen érdekes lesz az anyag. 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 letöltéskijelző meg fogja jeleníteni százalékosan és grafikusan is a letöltés aktuális állását és ezek mellett az swf fájl méretét és a betöltött méretet is kiíratjuk. Lássunk is hozzá.

Alapok elkészítése

Első lépésként készítsük elő a szükséges összetevőket. Szükségünk lesz a moziban egy letöltéskijelző MovieClip-re (mc) és egy képre, vagy valami tartalomra, hogy teszteléskor lássuk, hogyan működik. 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 400 pixel, egy tetszőleges világosabb színű háttér és 36 fps Frame rate.

Kép 1

A mozin belül három réteget kell készítenünk és mindegyik rétegen 2 kulcskocka lesz. Az első kulcskockára kerül majd a letöltéskijelző és a második kulcskockára kerül a tartalom. Készítsük el a rétegeket és a kulcskockákat a lenti képen látható módon.

Kép 2

A Loader réteg első kulcskockáján helyezzük el a letöltéskijelző mozit. Készítsünk egy új mc-t Loader mozi néven és helyezzük el a színpad közepén. Az mc-n belül négy réteget kell elkészítenünk, ez látható a lenti képen. Minden rétegen egyetlen kulcskocka található.

Kép 3

Rajzoljuk meg az alap elnevezésű rétegen a letöltéskijelző mozi grafikai alapjait. Ez lehet tetszőleges formájú, tetszőleges elrendezésben. A lenti példa egy egyszerű formát alkalmaz.

Kép 4

A csík rétegen kell elkészítenünk a letöltéskijelző csíkot. Ez egy új mc, amiben egy sima csíkot rajzolunk. A csík regisztrációs pontja az mc bal szélére essen. Az mc instance neve legyen loadCsik. Helyezzük el a csíkot az alap grafikán a lenti képen látható módon.

Kép 5

A keret rétegen rajzoljuk meg a letöltéskijelző csík keretét. Ha esetleg akarunk más összetevőkhöz is keretet rendelni, akkor azt is ezen a rétegen készítsük el.

Kép 6

A text rétegen készítsünk két szövegmezőt a lenti képen látható módon elhelyezve. A bal oldali mezőben fog megjelenni a letöltés százalékos mértékben és a jobb oldali mezőben a letöltött méret. A lenti képen láthatóak a szövegmezők tulajdonságai és az instance nevek.

Kép 7

A letöltéskijelző mozi ezzel el is készült. Adjuk neki a rootLoader instance nevet. Tehát a letöltéskijelző mc a színpad közepére kerül a Loader réteg első kulcskockáján.

Kép 8

A tartalom réteg második kulcskockáján helyezzünk el egy tetszőleges képet, vagy más tartalmat. A mérete legyen 3-400 kB vagy nagyobb, hogy lássuk, miként működik a kijelzés.

ActionScript kód elkészítése

Ha ez megvan, akkor jöhet a vezérlő AS kód. Az AS réteg első kulcskockáját jelöljük ki, majd nyissuk meg az Actions panelt és írjuk rá a következő kódot.

//
stop ();
stage.addEventListener ( Event.ENTER_FRAME, toltesFut );

// ENTER_FRAME függvény
function toltesFut ( event:Event ):void {
    var percEnt:Number = stage.loaderInfo.bytesLoaded / stage.loaderInfo.bytesTotal;
    rootLoader.loadCsik.scaleX = percEnt;
    rootLoader.loadPerc.text = Math.round( percEnt*100 );
    var total:String = Math.round( stage.loaderInfo.bytesTotal / 1024 ) + " kB";
    var loads:String = Math.round( stage.loaderInfo.bytesLoaded / 1024 ) + " kB";
    rootLoader.adatKiir.text = total + " / " + loads;
    if ( percEnt == 1 ) {
        stage.removeEventListener ( Event.ENTER_FRAME, toltesFut );
        gotoAndStop ( 2 );
    }
}

Mint látható, a kód egyszerű és rövid. A stop utasítással leállítjuk a mozit az első kockán, majd elindítjuk az ENTER_FRAME eseményt. Ez a folyamatos esemény fogja figyelni és megjeleníteni a letöltés mértékét. A percEnt változóban tároljuk el a letöltés mértékét, majd a letöltéskijelző csík scaleX értékéhez rendeljük, így annak a mérete a letöltés mértékének megfelelően változik. A százalékos kijelző mezőnek is átadjuk ezt az értéket úgy, hogy szorozzuk százzal és az eredményt kerekítjük egésszé. A total változóban tároljuk el a fájl teljes méretét és a loads változóba kerül a letöltött mennyiség értéke. A másik szövegmezőben ezeket az értékeket jelenítjük meg. Ha a letöltés befejeződött, akkor érvényesül az elágazás feltétele, töröljük az ENTER_FRAME eseményt és a 2. kulcskockára léptetjük a root réteget. Ezzel el is készült a program. Mentsük el és teszteljük a Ctrl+Enter gombok lenyomásával. A letöltés szimulálásához kétszet kell lenyomnunk egymás után a gombokat.

Külső osztály elkészítése

Most pedig készítsük el az alkalmazást külső AS osztály alkalmazásával. 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éteget töröljük, nem lesz rá szükség. 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 RootEnterTolt.as néven. Most jöhet az osztály megadása a flash moziban. A Properties panelen a Document class mezőben adjuk meg a RootEnterTolt osztályt. Ha megvan, mentsük el a fájl módosításait.

Kép 9

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ő RootEnterTolt.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 RootEnterTolt - RootEnterTolt.as).

//* RootEnterTolt.as *//
//

package {

    import flash.display.MovieClip;
    import flash.events.Event;

    public class RootEnterTolt extends MovieClip {

        // konstruktor
        public function RootEnterTolt ():void {
            stop ();
            stage.addEventListener ( Event.ENTER_FRAME, toltesFut );
        }

        // ENTER_FRAME metódus
        private function toltesFut ( event:Event ):void {
            var percEnt = stage.loaderInfo.bytesLoaded / stage.loaderInfo.bytesTotal;
            rootLoader.loadCsik.scaleX = percEnt;
            rootLoader.loadPerc.text = Math.round( percEnt*100 );
            var total:String = Math.round( stage.loaderInfo.bytesTotal / 1024 ) + " Kb";
            var loads:String = Math.round( stage.loaderInfo.bytesLoaded / 1024 ) + " Kb";
            rootLoader.adatKiir.text = total + " / " + loads;
            if ( percEnt == 1 ) {
                stage.removeEventListener ( Event.ENTER_FRAME, toltesFut );
                gotoAndStop( 2 );
            }
        }

    }// osztály vége

}// csomag vége
//

A kód szinte teljesen ugyanaz mint a frame-re írt verziónál, csak egy publikus osztályba rendezzük, így ez már nem szorul újabb magyarázatra. Importáljuk a szükséges csomagokat, majd elkészítjük a publikus osztályt és azon belül elhelyezzük a letöltéskijelző kódot. A kijelzőt használhatjuk akár példányosítással is, erre van példa a Letöltéskijelző az egész mozira (AS3) című segédletben. Remélhetőleg mindenkinek segített valamennyit a leírás. További példák letöltéskijelzésre a Ducky AS3 blogon is megtalálhatóak.

 
 
 
 

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