Custom Flex Preload Part Two : Producing the SWF

Please see Part One for the introduction to this post

We are going to embed a swf into a class that extends the DownloadProgressBar to take the place of the standard flex preloader.  Rather than just dumping a swf into the preloader we want to have some form of access to the assets in the swf so we can display the percent loaded, maybe show some sort of visual cue as to how much has downloaded.

So fire up flash and lets get stuck in.

Create a new flash document (FLA), and select ActionScript 2.

New Flash File

We need to create a MovieClip to expose the asset to Flex and we don’t want to associate it with a class, which we would have to do if we chose ActionScript 3.

As I’ve pointed out many times before I am NOT a designer, so this preloader is going to look a bit ropey, but it will serve to illustrate the point.

What we need is a movieclip with a linkage name in the library for us to be able to access it from Flex.  So draw a box and then select it and press F8 to turn it into a movielcip.

Create Symbol Dialog Box

I’ve popped the name of preloader and selected “Export for ActionScript” and “Export in the first Frame”.  I’ve left the linkage name as “preloader,” this is the name we will use in the Flex code to identify this MovieClip.

Click OK.  Double Click the movie clip (Cntrl Click on a Mac – I think, I don’t use one) to edit it.  To make things easy I’ve created a couple of layers, one for the background (the box) one for static text and one for dynamic text (the text that will display the amount  of the application that is loaded).

Preloader Dynamic Text

As you can see I gave the dynamic text a name of “percent_txt.”  Save the file and export it.

You can download the fla from here – > Basic Flash Assets

Next - lets look at the flex code.

EDIT – I said this needed to be in AS2 from the Flash IDE.  After more time working with Flex I’ve actually realised that you can export in AS3 from the IDE and use class names, ignore the warnings about there being no class file and use the class name you gave the asset exactly as I said the instance name should be used above.

Tags »

Author:admin
Date: Sunday, 22. June 2008 12:26
Trackback: Trackback-URL Category: Flash, Flex, Flex Builder, Tutorials

Feed for the post RSS 2.0 Comment this post

2 comments

  1. 1

    Tip: make sure the preloader movieClip contains more than one frame. Otherwise it will NOT be converted to a movieClip by Flex.

  2. 2

    I didn’t know that – thanks for the tip!

Submit comment