Lássuk, hogy mit fogunk elkészíteni:

Két fő részből fog állni a munkánk. Először is el kell készítenünk Flash-ben az előtöltőnket, statikus adatokkal, majd Flash Builder-ben (vagy a korábbi Flex verziókban) összekapcsolni azt az alkalmazásunkkal.

Flash

Hozzunk létre egy MovieClip-et, amiben összeállítjuk az előtöltőnket.
A képen látható módon adjunk  nevet az MC-nek és jelöljük be az “Export for ActionScript”-et a Linkage részben, hogy tudjunk a “Class” mezőbe írni. Amit ide írunk, azzal a névvel fogunk hivatkozni a Flex alkalmazásunkban erre az MC-re.

A létrejött MC-ben állítsuk össze a preloaderünket.

Dinamikus szövegmezőket használjunk és ágyazzuk be azokat a betűket (Properties paletta/Character embedding), amiket felhasználunk az adott mezőben.  A “100%” feliratú szövegmezőben fogom megjeleníteni a betöltöttséget, százalék formátumban, ezért ott a következőképpen néz ki a beágyazás:

Ezt a szövegmezőt lássuk el instance névvel is (Properties/Instance), hogy a Flex alkalmazásunkból hivatkozni tudjunk majd rá.

A két szövegmező alatt láthattunk 2 különböző színű téglalapot. A belső téglalap az előtöltő csík, tehát erre tudnunk kell majd később hivatkozni, hogy állítani tudjuk a szélességét, a betöltöttségtől függően.

Rajzoljunk a “Rectangle tool” segítségével egy téglalapot, jelöljük ki, majd a megjelenő menüben válasszuk a “Convert to Symbol”-t.

Ha ezzel megvagyunk, adjunk instance nevet az alakzatból átalakult MC-nek, hogy hivatkozni tudjunk később rá és készen is vagyunk az előtöltőnkkel.

A következő dolgunk az, hogy SWC komponensként kimentsük az MC-t, amiben az előtöltőnket összeállítottuk, hogy azt betöltve a Flex alkalmazásunkba felhasználhassuk (Libraryban jobb klikk a customPreloaderMC-re, majd “Export SWC file…”)

Flex

Hozzunk létre egy új Flex projectet (File/New/Flex Project) és a Lybrary Path-hoz adjuk hozzá az előbb kimentett SWC file-t (már meglévő project esetén jobb klikk a project nevére, Properties, Flex Build Path).

Következő lépésben hozzunk létre egy ActionScript osztalyt (src mappan jobb klikk->new->ActionScript Class), CustomPreloaderAS néven, amit a DownloadProgressBar osztályból örököltetünk (Superclass mezőbe: mx.preloaders.DownloadProgressBar). Ebben az osztályban vezéreljük majd az előtöltőnket.
A teljes kód:

/**
 * @author vizoli (Viski Zoltan)
 */

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.ProgressEvent;
	import mx.events.FlexEvent;
	import mx.preloaders.DownloadProgressBar;

	public class CustomPreloaderAS extends DownloadProgressBar {
		private var customPreloaderWidth:uint = 229;
		private var customPreloaderHeight:uint = 73;
		private var customPreloader:customPreloaderCLASS;

		public function CustomPreloaderAS() {
			customPreloader = new customPreloaderCLASS();
			addEventListener(Event.ADDED_TO_STAGE, onAdded);
			addChild(customPreloader);
		}

		public override function set preloader(preloader:Sprite):void {
			preloader.addEventListener(ProgressEvent.PROGRESS, onProgress);
			preloader.addEventListener(FlexEvent.INIT_COMPLETE, onInitComplete);
		}

		private function onAdded(event:Event):void {
			customPreloader.stop();
			customPreloader.x = ((stage.stageWidth/2) - (customPreloaderWidth/2));
			customPreloader.y = ((stage.stageHeight/2) - (customPreloaderHeight/2));
		}

		private function onInitComplete(event:Event):void {
			dispatchEvent( new Event(Event.COMPLETE));
		}

		private function onProgress(event:ProgressEvent):void {
			customPreloader.percent_txt.text = Math.ceil(event.bytesLoaded/event.bytesTotal*100) + "%";
			customPreloader.progressBarMC.scaleX = (event.bytesLoaded/event.bytesTotal);
		}
	}
}

A továbbiakban részletekre bontom a kódot és úgy magyarázom el, hogy mi mit jelent.

private var customPreloaderWidth:uint = 229;
private var customPreloaderHeight:uint = 73;
private var customPreloader:customPreloaderCLASS;

Az első két változó az előtöltő magasság és szélesség értéket tárolja, amire a pozicionálás miatt van szükség.
A harmadik sorban deklaráljuk az előtöltőnket. Típusként azt kell megadnunk, amit Linkage/Class névként adtunk az előtöltőt tároló MC-nek.

public function CustomPreloaderAS() {
	customPreloader = new customPreloaderCLASS();
	addEventListener(Event.ADDED_TO_STAGE, onAdded);
	addChild(customPreloader);
}

Az osztály konstruktora, amelyben létrehozunk egy új előtöltő objektumot, majd hozzáadjuk az addChild()-al a DisplayList-hez.
Hozzárendelünk ADDED_TO_STAGE eseményt az osztályhoz, ami akkor következik be, amikor az osztályunk felkerült a DisplayList-re. Erre azért van szükség, mert amíg ez nem következik be, addig pl. a stage.stageWidth-re nem hivatkozhatunk.

private function onAdded(event:Event):void {
	customPreloader.stop();
	customPreloader.x = ((stage.stageWidth/2) - (customPreloaderWidth/2));
	customPreloader.y = ((stage.stageHeight/2) - (customPreloaderHeight/2));
}

Ez függvény hívódik meg amikor felkerült az ADDED_TO_STAGE esemény bekövetkezésekor, amiben pozicionáljuk az előtöltőnket, a stage méretétől függően, mindig középre.

public override function set preloader(preloader:Sprite):void {
	preloader.addEventListener(ProgressEvent.PROGRESS, onProgress);
	preloader.addEventListener(FlexEvent.INIT_COMPLETE, onInitComplete);
}

Felüldefiniáljuk a DownloadProgressBar osztály preloader metódusát, azért, hogy eseményeket tudjunk rendelni preloaderhez.

private function onInitComplete(event:Event):void {
	dispatchEvent( new Event(Event.COMPLETE));
}

Ez a függvény hívódik meg, amikor az előtöltés befejeződött, tehát dobnunk kell egy COMPLETE eseményt az alkalmazásunknak, hogy ezt ő is tudja és eltüntesse preloadert.

private function onProgress(event:ProgressEvent):void {
	customPreloader.percent_txt.text = Math.ceil(event.bytesLoaded/event.bytesTotal*100) + "%";
	customPreloader.progressBarMC.scaleX = (event.bytesLoaded/event.bytesTotal);
}

Ez a függvény hívódik meg újra és újra a betöltés közben, amiben frissítjük a betöltést kijelző text mezőt és az előtöltő csík szélességét, százalékban megadva.

Most, hogy megértettük a CustomPreloaderAS osztály működését, nincs más hátra, mint hozzárendelni az alkalmazásunkhoz, preloaderként:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
				preloader="CustomPreloaderAS"
				backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#8B9181, #8B9181]"
				width="400" height="350" backgroundColor="#8B9181" >

	<mx:Image source="@Embed(source='assets/testImage.jpg')" maintainAspectRatio="false" width="100%" height="100%"/>
</mx:Application>

Remélem érthetően sikerült bemutatnom, hogy hogyan lehet saját előtöltőt használni Flexben készült munkáinkban. Amennyiben kérdésetek volna, szívesen válaszolok!