Flex Preloader with Greensock TweenLite and TweenMax

In this tutorial we will create a preloader for a Flex application that will place a tint over a set of images coloring them as the loading process continues.

Note that this tutorial also applies for Flex 4.x and 3.x

First we create a new Actionscript file.

We name it “Preloader.as”, and we place it in a package named: “Preloader_”

Then we import it in our Flex Application like this:

<s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009″ 

xmlns:s=”library://ns.adobe.com/flex/spark             xmlns:mx=”library://ns.adobe.com/flex/mx”              preloader=”Preloader_.Preloader”>

 

Main Code

In the Preloader Class we place an extend definition like this:

public class Preloader extends DownloadProgressBar

This means that can override and extend the DownloadProgressBar methods.

Now let’s import our images (here I used three but you’ll find a hint inside the source of how to apply this effect into more images)

 

[Embed(source=“/assets/NET.png”)]

private var FlashPreloaderSymbol1:Class;

 

[Embed(source=“/assets/GFX.png”)]

private var FlashPreloaderSymbol2:Class;

 

[Embed(source=“/assets/COM.png”)]

private var FlashPreloaderSymbol3:Class;

 

private var clip;

private var clip2;

private var clip3;

 

On the constructor now we will add the code to actually import the images onto the stage:

public function Preloader() 

{

super();

//getting the images into the loader

clip = new FlashPreloaderSymbol1();

clip2 = new FlashPreloaderSymbol2();

clip3 = new FlashPreloaderSymbol3();

 

//Adding images to stage

addChild(clip);

addChild(clip2);

addChild(clip3);

}

 

And now that we have the images properly set, we continue to the most important part, the method that will monitor the completion events of each portion of the application (RSLs, Swf, framework files).

public override function set preloader(preloader:Sprite):void 

{

//Center the images

centerPreloader();

// runtime shared library

preloader.addEventListener( RSLEvent.RSL_PROGRESS, onRSLDownloadProgress );

preloader.addEventListener( RSLEvent.RSL_COMPLETE, onRSLDownloadComplete );

preloader.addEventListener( RSLEvent.RSL_ERROR, onRSLError );

 

// application

preloader.addEventListener( ProgressEvent.PROGRESS, onSWFDownloadProgress );

preloader.addEventListener( Event.COMPLETE, onSWFDownloadComplete );

 

// initialization

preloader.addEventListener( FlexEvent.INIT_PROGRESS, onFlexInitProgress );

preloader.addEventListener( FlexEvent.INIT_COMPLETE, onFlexInitComplete );

}

 

As we can see an event will fire in every stage of the loading procedure.

Now let’s see each individual event listener

private function onRSLDownloadProgress( event:ProgressEvent ):void 

{

isRslDownloading = true;

 

rslBytesTotal = event.bytesTotal;

rslBytesLoaded = event.bytesLoaded;

rslPercent = Math.round( (rslBytesLoaded / rslBytesTotal) * 100);

//trace(“onRSLDownloadProgress: rslBytesLoaded ” + rslBytesLoaded);

//trace(“onRSLDownloadProgress: rslBytesTotal ” + rslBytesTotal);

//trace(“onRSLDownloadProgress: ” + rslPercent + “%”);

 

updateProgress();

}

The RSL loading handler

 

private function onRSLDownloadComplete( event:RSLEvent ):void 

{

// We tween the color of the first image into an green tint, also adding a little blur to make it more impressive

TweenMax.to(clip, 2, {tint:0xA3F40E, glowFilter:{color:0xA3F40E, alpha:1, blurX:10, blurY:10}});

rslPercent = 100;

}

 

This is where the magic takes place, when each part has finished loading one of the images will slowly change color, the images where originally a shade of grey, but when the first part of the loading stage completes the loading images will look like this:

private function onSWFDownloadProgress( event:ProgressEvent ):void 

{

swfBytesTotal = event.bytesTotal;

swfBytesLoaded = event.bytesLoaded;

 

if ( isRslDownloading ) {

// as soon as RSL starts downloading the SWF data are added by the RSL values

swfBytesTotal -= rslBytesTotal;

swfBytesLoaded -= rslBytesLoaded;

}

swfPercent = Math.round( (swfBytesLoaded / swfBytesTotal) * 100);

//trace(“onSWFDownloadProgress: ” + swfPercent + “%”);

//trace(“onSWFDownloadProgress: swfBytesLoaded ” + swfBytesLoaded);

//trace(“onSWFDownloadProgress: swfBytesTotal ” + swfBytesTotal);

 

updateProgress();

}

The swf loading handler

 

private function onSWFDownloadComplete( event:Event ):void 

{

//Now tweening the second image (remember we can have as much as we want)

TweenMax.to(clip2, 2, {tint:0xA3F40E, glowFilter:{color:0xA3F40E, alpha:1, blurX:10, blurY:10}});

 

swfPercent = 100;

}

 

When the second part of the loading stage completes we will have something like this:

private function onFlexInitComplete( event:FlexEvent ):void 

{

//Tweening the last image and onComplete we launch the application, we do this to make sure it the effect will play

var myTween:TweenMax = TweenMax.to(clip3, 1, {tint:0xA3F40E, glowFilter:{color:0xA3F40E, alpha:1, blurX:10, blurY:10}});

myTween.addEventListener(Event.COMPLETE,onDoneAnimating);

}

 

As stated in the comment inside the code, here we tween the last of our images but we also include a callBack function in order to allow the tween to complete gracefully and not be interrupted.

This is our last result of the effects:

After the tween finishes the following code will run and the Flex application will initialize:

private function onDoneAnimating(e):void 

{

// The final event is dispatched. The application will now load.

dispatchEvent( new Event( Event.COMPLETE ) );

}

 

You can view a DEMO (make sure you clear cache and refresh if you need to see the preloader again)

Download the source/project files here: Greensock-Tutorial-Flex-Preloader

Thanks for reading I hope this will enable you to create even more fancy preloaders.

Facebooktwittergoogle_pluspinterestlinkedin
linkedin
Bookmark the permalink.

5 Responses to Flex Preloader with Greensock TweenLite and TweenMax

  1. Bola says:

    Hi, I love this preloader can please have a sample of the code? please!

  2. coder says:

    What I’m posting here is the complete code, if you want a sample there is a link at the end of the page.

  3. Arthur says:

    Hi i have tried to follow the code, but i get so many errors… Am still new to flex. would you please share the whole code.

  4. coder says:

    Updated the post to include the full project. I hope you will find everything in there.

  5. Arthur says:

    thanks a lot man… i like the preloader. will try it out

Leave a Reply

Your email address will not be published. Required fields are marked *