FlexLive.net

In a Flex application, the pre-loader is the first thing your users see. It’s important to have a eye-catching preloader to establish your branding. This tutorial shows you how to create an animated preloader in a few easy steps. It is intended for Flex developers with little experience in Flash and Illustrator.

Here is a quick demo of what we are about to build.

Before we begin, you can download all the source files used in this tutorial to follow along.

We just had St. Patrick’s Day earlier this week, so we will do a beer-themed custom preloader. Look for the “beer_glass.ai” file in the source zip. It has a simple vector illustration of an empty pint, and full pint, and the branding text for FlexLive.net.

We will use Flash CS4 to turn the vector assets into a short preloader animation. To begin, create an empty Flash file for ActionScript 3.

In Flash CS4, go to File > Import > Import to Stage, and select the Illustrator asset (beer_glass.ai). You should be greeted by an import screen as follows. Make sure the “Set stage size to same size…” is selected, and click OK to proceed.

Once all the vector assets are imported to the Flash stage, press ctrl+a to make sure all objects are selected. Then right click on the selected objects and choose “Convert to Symbol”. In the convert symbol dialog, name the symbol “preloader”, and enable “Export for ActionScript”. The symbol name will be referenced later from your Flex application. The convert symbol dialog should look as follows,

After you are done with the convert symbol dialog, the assets should be grouped into a single object on your Flash stage.

Now we can start with the fun animation work. Double click on the graphic asset to start editing.  Notice when you first enter the edit mode, there are three objects selected: the empty glass, the full glass, and the decor text. Make sure all objects are selected, right click, and select “Distribute to Layers”.

Now you should have four layers. We should rename them so they are easier to work with. You can rename a layer by double clicking on its label.

Rename “layer 1″ TO “mask”, “layer 2″ to “glass_full”, “layer 3″ to “glass_empty”, and “layer 4″ to “text”. Re-arrange the layers by dragging them up and down. The final layering should look as follows,

Now select the empty glass and full glass objects, and align them to the left and bottom. The result should look as follows,

With the “mask” layer selected, set the stroke color to “none” and fill color to a bright green. Ensure “Object Drawing” is enabled, and select the rectangle tool (see screenshot below).

Draw a rectangle under that is at least as wide as the glass graphics.

Right click on the frame 20 of the mask layer, and select “Insert Keyframe”.

Use the “Free Transform Tool” (Q), resize the green rectangle to cover the entire glass.

Right click on the mask timeline and select “Create Shape Tween”. For the other three layers, right click on frame 20 of each and select “Create Keyframe”. The final timeline should look as follows,

For the final step, right click on the mask layer and select “Mask”.

Preview the animation and save the Flash file. Go to File >Publish to create the .swf asset file.

In Flex Builder, we will create a custom preloader class by extending the “DownloadProgressBar” class,

public class AppPreLoader extends DownloadProgressBar {...}

We will embed the preloader animation as follows,

[Embed(source="assets/beer_glass.swf", symbol="preloader")]
private var PreloaderAsset:Class;

We can instantiate the preloader animation asset with the MovieClip class,

private var _mov:MovieClip;
_mov = new PreloaderAsset();

When extending the “DownloadProgressBar”, we need to extend the preloader setter to insert the progress handles,

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

The preloader progress handler will be driving the animation frame by frame. Recall from ealier, our animation had 20 frames.

private function onSWFDownloadProgress(evt:ProgressEvent):void
{
var p:int = (evt.bytesLoaded/evt.bytesTotal) * 20;
_mov.gotoAndStop(p);
}

Finally, we will set the custom preloader class in the root application node,

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" preloader="net.flexlive.skin.AppPreLoader" >

That concludes our tutorial. All the source is available in this zip file. Feel free to leave a comment for questions.

Need to bring your Flex project up to speed? Zee Yang is a freelance Flex developer with deep understanding of architecture and user experience. You can reach him at zee.yang@gmail.com.

Trackback This Post | Subscribe to the comments through RSS Feed