Pixelbox

Welcome to Pixelbox. Thursday the 24 of July 2008

Skip to content >>

Changing the default loading screen in Flex

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!

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

PolarClock

I came across PolarClock today, a great flash clock that kind of rotates depending on the time. What was really interesting is that the developer has turned it into a screen saver using ScreenTime. When you change the settings on OS X you can see the flex app loading. Will have to try it out, but first [...]
Meta tags: ActionScript, Flex

Caculating Dates in AS3

Meta tags: AIR, ActionScript, Flex

Really simple analytics

At work this morning I got one of those, “can you just”. But it wasn’t asking for me to knock up copy of YouTube or MySpace by the end of the week as a favour, but rather for a simple way or reccording the number of people that interact with and click on an advert [...]

Flickr widget part 2

I had some more ideas about what to do with my flex flickr widget the other day. Inspired by Dunstan’s old blog that he never updates, I though I should get the widget to update related to my situation. For the first incarnation (and I have many more ideas of how to do this) it will [...]

Next Page »