Pixelbox

One of the first things you want to do when creating a Flex app is to remove all the default stuff, which makes your app look like everyone else’s. The most obvious default thing in Flex is that loading, progress initilisation bar you get before the application starts.

Now before I start there is one thing to look out for. I first wanted to change the background colour, and kept getting a flash of that Windows 98 turquoise before it change to my new colour… This had me really confused for a while, until I realised that the auto generated HTML that Flex Builder 3 creates has that same colour as it’s default background… Doh! (You can also get the compiler to change this, see the gotoAndLearn example for more info)

Quite a few of the settings of the loading screen can be set through the mx:Application tag, in your Application Class’s MXML. The most obvious being the background colour. This is also where you can specify your own download screen, or as Adobe call it, “DownloadProgressBar”.

At the highest level a Flex application is a two frame movie clip, the first frame being the aforementioned, “DownloadProgressBar” and the second being your Application class. In order to draw images and a progress bar on your loading class thing, you will need to extend the Sprite class (like a movieclip without frames) and implement the IPreloaderDisplay. ( Holy object orientation Batman! Don’t worry you can just copy my example and ignore that if you want!)

When creating your own “DownloadProgressBar” you need to keep it lightweight, otherwise you will have to make a “DownloadProgressBar” for that! Also some elements of the Flex framework won’t be available when it starts, so don’t go too crazy!

The first step is to add this to the tag in your Application’s MXML file

preloader="com.example.preloaders.myDownloadProgressBar"

Once this is added your application will use your custom “DownloadProgressBar” Class, rather than the default one. This means you can do lots of stuff yourself with the information provided, such as total to download and total downloaded, in addition to some events called at various stages of initilisation.

Download the Download Progress Bar example class here. I have commented as much as I can, and will try and put a demo together soon.

Other examples:

• http://www.onflex.org/ted/2006/07/flex-2-preloaders-swf-png-gif-examples.php
• http://flexiblemyself.blogspot.com/2007/10/custom-preloader.html
• http://iamjosh.wordpress.com/2007/12/18/flex-custom-preloader/
• https://defiantmouse.com/yetanotherforum.net/default.aspx?g=posts&t=82
• http://www.gotoandlearn.com/play?id=108