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




 
 
SEGÉDLETEK ActionScript

Letöltéskijelző az egész mozira (AS3)
  feltöltve: 2008.03.02 | szerző: Ducky | olvasva: 1595 alkalommal

 
 

Ebben a segédletben egy letöltéskijelzőt készítünk, AS3 - CS3 verzióban, ami a mozi egészének betöltését jeleníti meg. 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á.

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

Kép 1

Most készítsük elő a rétegeket az időszalagon. Három rétegre lesz szükségünk és minden rétegen két kulcskockára. A rétegeket nevezzük el a lenti képen látható módon. Ebből következik a program későbbi működése is. Az első kulcskockán lesz a letöltéskijelző és a második kockán a tartalom. Természetesen az első kocka után tetszőleges számú kulcskockát és animációt helyezhetünk el, ez már részletkérdés. A letöltéskijelző a teljes swf fájl betöltését jeleníti meg, tehát az első kocka után tetszőleges tartalom szerepelhet.

Kép 2

Most készítsük el a letöltéskijelző mozit, amely megjeleníti a letöltés folyamatát számszerűen és grafikusan is. Válasszuk a főmenü Insert / New symbol.. menüpontját

Kép 3

Most pedig a megjelenő ablakban adjuk meg az új mozi nevét és válasszuk a Movie clip lehetőséget, ahogyan az a lenti képen is látható. Ha kész, akkor nyomjuk meg az Ok gombot.

Kép 4

A Loader moziban szintén három réteget készítünk, az összetevők megjelenítéséhez. A legfelső rétegben helyezzük el a szövegmezőket. A szövegmezők elhelyezése, típusa és instance neve látható a lenti képen. Az instance neveket a Properties panelen kell megadni az Instance name mezőben.

Kép 5

A következő keret elnevezésű rétegre rajzoljuk meg a szükséges grafikákat, kereteket tetszőlegesen. A harmadik csík elnevezésű rétegre helyezzünk el egy Movie clip-et, amely egy téglalapot, csíkot tartalmaz, a kerethez igazodva. A csík Movie clip instance neve legyen 'csikMoz'. A mozi regisztrációs pontja és belső középpontja a csík bal szélére kerüljön.

Kép 6

Elkészült a Loader mozink. Helyezzük el a Kijelző mozi réteg alső kulcskockáján az egész Movie Clip-et és adjuk neki a loadMozi instance nevet. A Tartalom elnevezésű réteg második kulcskockájára tegyük a tartalmat, ami jelen példánkban egy nagyobb mérető kép. Teteszőleges képet tehetünk a második kockára, vagy bármilyen grafikát, animációt. A lényeg az, hogy legyen legalább 80-100 kB a mérete, hogy láthatóan tudjuk tesztelni a letöltéskijelzést.

Kép 7

És végül jöhet az ActionScript, ami az egészet vezérelni fogja. A kódokat az AS3 elnevezésű rétegre írjuk. A kód feladata az lesz, hogy a letöltés során ellenőrizze a letöltött adatmennyiséget, majd ez alapján kiszámolja a letöltés mértékét százalékosan. Ezután megjeleníti az adatokat grafikusan és számszerűen is. Írjuk tehát a lent látható kódot az AS3 réteg első kulcskockájára.

//
stop ();

// események létrehozása
loaderInfo.addEventListener ( ProgressEvent.PROGRESS, toltesFut );
loaderInfo.addEventListener ( Event.COMPLETE, toltesVege );

// letöltés folyamatban függvény
function toltesFut ( event:ProgressEvent ):void {
    var percEnt = event.bytesLoaded / event.bytesTotal;
    loadMozi.csikMozi.scaleX = percEnt;
    loadMozi.prcKiirText.text = Math.round( percEnt *100 ) + " %";
    var total:String = Math.round( event.bytesTotal / 1024 ) + " Kb";
    var loads:String = Math.round( event.bytesLoaded / 1024 ) + " Kb";
    loadMozi.btKiirText.text = total + " / " + loads;
}

// letöltés kész függvény
function toltesVege ( event:Event ):void {
    gotoAndStop ( 2 );
}

//

Ezzel a program el is készült. Az adatok számítása ugyanaz mint a régebbi as2-es verzióknál. Alapvető változás az, hogy nem kell EnterFrame eseményt alkalmaznunk, a letöltés PROGRESS és COMPLETE eseménye jelzi a letöltés folyamatét és befejezését. Ehhez rendeljük a megfelelő függvényeket. Ha a letöltés folyamatban van akkor megjelenítjük az adatokat, ha a letöltés véget ért, akkor lépünk a második kockára.

Kép 11

A programot elkészíthetjük úgy is, hogy a vezérlő AS kódot külső osztályban helyezzük el. Ismerjünk meg erre is két módszert. Először is készítsük el a külső AS fájlt. Nyissunk meg egy új alkalmazást és válasszuk az ActionScript File lehetőséget. Az első lehetőségben a külső osztályt példányosítással fogjuk használni és tulajdonságkánt átadjuk a MainTimeline-t, azaz a fő réteget.

Kép 8

Írjuk be az AS fájlba a lent látható kódot, majd mentsük el az AS fájlt az FLA fájlal azonos mappába As3RootLoader.as néven. Ez megegyezik a fájlban létrehozott osztály nevével.

//* As3RootLoader.as *//
//

package {

    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.ProgressEvent;

    public class As3RootLoader extends Sprite {

        // Main Timeline tulajdonság
        private var mainReteg:Object;

        // konstruktor
        public function As3RootLoader ( rtReteg ):void {
            mainReteg = rtReteg;
            mainReteg.stop ();
            // események létrehozása
            mainReteg.loaderInfo.addEventListener ( ProgressEvent.PROGRESS, toltesFut );
            mainReteg.loaderInfo.addEventListener ( Event.COMPLETE, toltesVege );
        }

        // letöltés folyamatban metódus
        private function toltesFut ( event:ProgressEvent ):void {
            var percEnt = event.bytesLoaded / event.bytesTotal;
            mainReteg.loadMozi.csikMozi.scaleX = percEnt;
            mainReteg.loadMozi.prcKiirText.text = Math.round( percEnt*100 ) + " %";
            var total:String = Math.round( event.bytesTotal / 1024 ) + " Kb";
            var loads:String = Math.round( event.bytesLoaded / 1024 ) + " Kb";
            mainReteg.loadMozi.btKiirText.text = total + " / " + loads;
        }

        // letöltés kész metódus
        private function toltesVege ( event:Event ):void {
            mainReteg.gotoAndStop ( 2 );
        }

    }// osztály vége

}// csomag vége
//

Az AS fájl elkészült. Ha megnézzük igazából maga a folyamat ugyanaz mint a frame-re írt verziónál, csak OOP (Objektum Orientált Programozás) formában. Ha valaki nem ismerné ezt a programozási formát, annak javaslom Tenegri: Az objektum orientált programozás alapjai Flash-ben címő segédletét és a fentebb már említett Reider segédletet. Az import sorokban megadjuk a szükséges csomagokat. Az import flash.events.Event; és import flash.events.ProgressEvent; helyett lehet egyszerűen import flash.events.* -ot írni. Most azért szerepelnek külön, hogy lássuk, mi szükséges a működéshez. Ezután létrehozzuk az As3RootLoader publikus osztályt, amelyet majd példányosítunk az FLA fájlban. Következő lépésben mainReteg néven létrehozunk egy tulajdonságot az osztályban, ebben fogjuk majd eltárolni az FLA-ból kapott MainTimeline réteget. A konstruktor lesz az a metódus, ami automatikusan lefut az osztály példányosításakor, tehát tulajdonképpen a konstruktor indítja el a letöltéskijelzés folyamatát. A mainReteg tulajdonságnak átadja a kapott MainTimeline objektumot, majd leállítja a mozi futását a letöltéskijelzés idejére. Létrehozzuk a letöltés folyamatban és letöltés vége eseményeket is, amelyeket már megismertünk a lecke korábbi részében. A letöltés folyamatban metódus ugyanaz, mint a frame-re írt verziónál a letöltés folyamatban függvény. Ugyanígy a letöltés kész metódus is megegyezik az eddig használt függvénnyel. Tehát amíg a letöltés folyamatban van, addig kiírjuk az adatokat, ha a letöltésnek vége, akkor lépünk a második kockára a fő rétegen. Ezt a külső osztályt most fel kell használnunk, azaz az FLA fájlban példányosítanunk kell, hogy működjön a letöltéskijelzés. Az FLA fájlban az AS3 réteg első kulcskockájából töröljük ki az összes AS kódot, majd írjuk be helyette a lenti pár sort.

// letöltéskijelző példányosítása
var letolTes:As3RootLoader = new As3RootLoader ( this );
//

A kód egyszerű, a letolTes kifejezéshez hozzárendelve létrehozunk egy új példányt a külső fájlban elkészített As3RootLoader osztályból. Az osztálynak paraméterként megadjuk a MainTimeline-t, azaz a fő réteget, amire a this hivatkozást használjuk fel. A letöltéskijelzés elindul és végzi a dolgát, ahogyan a frame-re írt verziónál. Az FLA-ban semmi mást nem módosítunk, azaz a grafikai elemek és összetevők maradnak a régi formában. Nézzük meg a másik külső osztályos megoldást. Most nem példányosítással fogjuk az osztályt alkalmazni, hanem egyszerűen hozzáadjuk a mozihoz a Properties panelen, a Document class mezőt használva. Ehhez egy kicsit módosítanunk kell a külső AS fájlban lévő kódot. Tehát az As3RootLoader.as fájlban lévő kódot írjuk át a lent látható módon.

//* As3RootLoader.as *//
//

package {

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

    public class As3RootLoader extends MovieClip {

        // konstruktor
        public function As3RootLoader ():void {
            stop ();

            // események létrehozása
            loaderInfo.addEventListener ( ProgressEvent.PROGRESS, toltesFut );
            loaderInfo.addEventListener ( Event.COMPLETE, toltesVege );
        }

        // letöltés folyamatban metódus
        private function toltesFut ( event:ProgressEvent ):void {
            var percEnt = event.bytesLoaded / event.bytesTotal;
            loadMozi.csikMozi.scaleX = percEnt;
            loadMozi.prcKiirText.text = Math.round( percEnt * 100 ) + " %";
            var total:String = Math.round( event.bytesTotal / 1024 ) + " Kb";
            var loads:String = Math.round( event.bytesLoaded / 1024 ) + " Kb";
            loadMozi.btKiirText.text = total + " / " + loads;
        }

        // letöltés kész metódus
        private function toltesVege ( event:Event ):void {
            gotoAndStop ( 2 );
        }

    }// osztály vége

}// csomag vége
//

A kódban minimális eltérés tapasztalható, nem adjuk át a MainTimeline objektumot az osztálynak. Most az FLA fájlban töröljük ki az AS3 réteget, mert ennél a verziónál nem lesz rá szükség.

Kép 9

Megváltozik a felhasználás módja is. Tehát eddig az AS3 rétegen példányosítottuk a a külső osztályt, de ezt a réteget most töröltük. Az FLA fájlban egyáltalán nem lesz AS kód. 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 10

Ha elmentjük és teszteljük a mozit, látni fogjuk, hogy igazából a működésükben semmi eltérés nincs, csak az elkészítés módja változott. Mindhárom módszer elfogadott és mindenki megszokása vagy tetszése szerint alkalmazhatja. Elérkeztünk a segédlet végéhez. Remélhetőleg sokaknak nyújt némi segítséget az alapokhoz. Jó munkát és sok sikert. 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 >>> : .. .