Fx{r} is trying to start the Fx{r} Community! Please join our group on Adobe Groups following this link: http://groups.adobe.com/groups/ab29539ab9.
Fx{r} is now on Twitter too. Follow us @ twitter.com/fx_r!
«
»

ActionScript, Flash, Flex 2, How to, MXML

Very First Flex Preloader Customization

Andrei Ionescu | 07.02.08 | 16 Comments

Table of contents

  1. Very First Flex Preloader Customization
  2. Very First Flex Preloader Customization For Flex Builder 3/Flex SDK 3.2
Google Buzz

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"&gt;
        <mx:swfloader>
            source="@Embed(source='test.swf')"
            width="550" height="400" />
</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.

Next in series
Share and Enjoy:
  • Twitter
  • Google Buzz
  • LinkedIn
  • Google Bookmarks
  • del.icio.us
  • Digg
  • Sphinn
  • blogmarks
  • Reddit
  • StumbleUpon
  • Facebook
  • DZone
  • FriendFeed
  • Yahoo! Buzz
  • Yahoo! Bookmarks
  • Slashdot
  • MySpace
  • Add to favorites
fla_source_files
flex_custom_preloader




Tags: , ,

This post was written by Andrei Ionescu

Views: 35779

related

16 Comments

have your say

Add your comment below, or trackback from your own site. Subscribe to these comments.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

:

:


«
»