Two days ago I needed to customize the very first preloader of a flex application (the one that is shown before finishing loading initialization classes of flex). My first impression was that it cannot be changed because I thought is something built in the Flash Player but at the end I found a way using a standard flash preloader (Flash 8 & Actionscript 2.0).
First we need to create a preloader class that will replace the standard one from the flex. That is CustomPreloader.as and is loaded in the application tag with
preloader="CustomPreloader"attribute.
The mxml file looks like this:
<mx:application xmlns:mx="http://www.adobe.com/2006/mxml"> layout="absolute" preloader="CustomPreloader"> <mx:box> borderStyle="solid" backgroundColor="#0F7494" borderColor="#0F7494" dropShadowEnabled="true" horizontalCenter="0" top="0"> <mx:swfloader> source="@Embed(source='test.swf')" width="550" height="400" /> </mx:swfloader> </mx:box> </mx:application>
The test.swf file is embeded to make the flex application bigger to be able to test the preloader.
The CustomPreloader class is bellow:
package { import mx.preloaders.DownloadProgressBar; import flash.display.Sprite; import flash.events.ProgressEvent; import flash.events.Event; import mx.events.FlexEvent; import flash.display.MovieClip; public class CustomPreloader extends DownloadProgressBar { [Embed(source="preloader.swf", symbol="Preloader")] public var WelcomeScreenGraphic:Class; public var wcs:MovieClip; public function CustomPreloader():void { super(); wcs = new WelcomeScreenGraphic(); addChild(wcs); wcs.gotoAndStop(0); } public override function set preloader(preloader:Sprite):void { preloader.addEventListener(ProgressEvent.PROGRESS, onSWFDownloadProgress); preloader.addEventListener(Event.COMPLETE, onSWFDownloadComplete); preloader.addEventListener(FlexEvent.INIT_PROGRESS, onFlexInitProgress); preloader.addEventListener(FlexEvent.INIT_COMPLETE, onFlexInitComplete); centerPreloader(); } private function centerPreloader():void { x = (stageWidth / 2) - (wcs.width / 2); y = (stageHeight / 2) - (wcs.height / 2); } private function onSWFDownloadProgress(event:ProgressEvent):void { var t:Number = event.bytesTotal; var l:Number = event.bytesLoaded; var p:Number = Math.round((l/t) * 19); var pForAmount:int = Math.floor(p * 5); wcs.gotoAndStop(p); wcs.amount_txt.text = String(pForAmount) + "%"; } private function onSWFDownloadComplete(event:Event):void { wcs.gotoAndStop(100); wcs.amount_txt.text = "100%"; } private function onFlexInitProgress(event:FlexEvent):void { wcs.gotoAndStop(100); wcs.amount_txt.text = " "; } private function onFlexInitComplete(event:FlexEvent):void { wcs.gotoAndStop(100); dispatchEvent( new Event(Event.COMPLETE)); } } }
Now the Preloader.swf and Preloader.fla file contains just the basic preloading stuff and even without actionscript. Important thing is that all thing in the preloader flash file are inside a symbol called “Preloader” symbol that is specified in the embed command
[Embed(source="preloader.swf", symbol="Preloader")] public var WelcomeScreenGraphic:Class;
because we want to be able to access things inside the flash preloader file.
Basic events are created and those access the flash preloader file. When loading is done we instruct the movie to go and stop at frame 100 even though there is no 100 frame but it will go to the last one available
wcs.gotoAndStop(100);
Here is our application in action (to review the preloader please empty your browser’s cache).
So… this is about it. You can find 2 archives: one with flash files and one with the flex application.
Popularity: 94%
| ||
|
Tags: ActionScript, Events, Preloader
This post was written by Andrei Ionescu
Views: 4489
Interesting…
Thanks for posting!
Cyril
the fla´s samples files are corrupted, can you upload again
Thanks
Thank you, i read at the beginning of your post: “(Flash 8 & Actionscript 2.0)” and was trying with flash 8, but now with CS3 all works fine, and i can understand what you do here. Its nice to make a custom preloader to flex.
Too you can change the defaults of flex preloader with action script like this:
package preloader
{
import mx.preloaders.DownloadProgressBar;
public class Loading extends mx.preloaders.DownloadProgressBar
{
public function Loading()
{
super();
downloadingLabel = "Please Wait..."
initializingLabel = "Initializing...";
}
}
}
sorry the english, im brazilian, tanks again and good lucky!