Custom Preloader in FlashBuilder

Tomorrow, I start a new series on FlashBuilder and PureMVC as I’m moving back into PureMVC for some client work. One aspect of the example application is a custom preloader. This process has not really changed from Flex 3 to 4. If memory serves, the definitive modern tutorial on the topic was provided by Jesse Warden. This site contains a sample code with references to Jesse’s work.  You may, however, gain a lot of insight into how the process works by studying the code in mx.preloaders.Preloader and mx.preloaders.DownloadProgressBar.

I have never worked with a designer who wanted to use a progress bar in a preloader, so I will take an opportunity to sneak in an answer to a math question from a junior high algebra student as part of the preloader.  Instead of subclassing DownloadProgressBar, my code illustrates using a Sprite subclass as a custom preloader.  The preloader draws a circle of varying color and radius in accordance to the answer to the student’s question.

The student wanted to know the single formula for computing the radius of a circle so that when the independent variable was zero the radius had a certain value.  When the independent variable was equal to one, the radius was some maximum value.  The radius was a some specified value between the min and max when the independent variable was 0.5.  The value of the radius varies linearly.

The problem with this specification is that there are  three constraints.  Let’s call the lowest value the ‘inner’ radius or i.  Let the radius at 0.5 be the ‘middle’ value or m.  Let the maximum value at 1 be the ‘outer’ radius or o.  Call the independent variable t.  Let r(t) be the equation for the radius.  The constraints are r(0) = i, r(0.5) = m and r(1) = o.  If the functional form of r(t) is constrained to be linear, then the model is overdetermined.  The equation of  a line only has two degrees of freedom.  The only way three constraints can be fit to such a model is if one of the constraints is degenerate.

Either the model needs to be quadratic if a single equation is desired or piecewise linear if a linear form is desired.  In other words, there is one linear equation for t=0 to t=0.5 and another linear equation for t > 0.5 to t=1.

This is illustrated in the custom preloader’s draw() method by drawing a circle in red that varies linearly from r=i to r=m while Flex is preloading the RSL’s.  The circle shifts to yellow and the radius varies linearly from r=m to r=o while the application .SWF is preloaded.  The circle turns green once the load is complete.

The preloader is implemented in a CustomPreloader class and specified in the application MXML as follows.

<?xml version=”1.0″ encoding=”utf-8″?>
<s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009&#8243;
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx” minWidth=”700″ minHeight=”500″
xmlns:comp=”components.*”
preloader=”preloader.CustomPreloader” >

You may view the source for CustomPreloader.as here. Review the links in the source code if you need a further deconstruction of how the process works. It’s well documented on Jesse’s site.

Enjoy!

Advertisement