Archive

Archive for April, 2010

Custom Preloader in FlashBuilder

April 20, 2010 2 comments

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!

Categories: Flex, Math Tags: , ,

Degrafa and FlashBuilder Part I

April 16, 2010 3 comments

I’ve moved onto new gigs and part of that move is migrating my home office to the MacBook Pro and FlashBuilder (I still want to call it Flex 4).  I’ve been working with Jason on getting Degrafa setup with FlashBuilder and finding out what issues are involved with migration.  This is the first in a series of posts on this issue.

When importing the Origin branch from SVN [branches/Origin/Degrafa], setup the project as a Flex Library Project.   Under Project Properties, Flex Library Build Path | Classes Tab – Select classes to include in the library.  Make sure com is checked.  FB wants to setup the main source folder as src.  Leave it blank.

Select the Flex Library Compiler settings.  For now, we need to use the Flex 3.5 SDK.  Set the namespace url to http://www.degrafa.com/2007 .  On the next setting below Namespace URL, browse to the project manifest file and select it.

Click here to see a screenshot of my settings.

When you build the project, there should be a .swc in the bin folder.

When creating a new project, go to the Flex Build Path settings in Project Properties, Library Path.  Click Add Project and select your Degrafa source project.

Now, a few things have changed.  In the new FB 4 universe, Canvas is out and the spark BorderContainer is the new kid on the block.  Degrafa plays nicely with the new kid, but the Degrafa declarations should go inside the fx:Declarations tag.  Here is a minimal example,

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:degrafa="http://www.degrafa.com/2007"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="600" minHeight="400">
  <fx:Declarations>
    <degrafa:RegularRectangle width="100" height="100" graphicsTarget="{ [myCanvas] }">
      <degrafa:stroke>
      <degrafa:SolidStroke color="0xff0000" />
      </degrafa:stroke>
    </degrafa:RegularRectangle>
  </fx:Declarations>
<s:BorderContainer id="myCanvas" width="300" height="300" />
</s:Application>

There are some issues, currently with fills. Jason is looking into current issues and a full-on Flex 4-compatible release (ah, I like Flex 4 much better). I will expand on fills and style-related issues in future posts. Once I get some reasonable examples up and running, it will be time to return to spline goodies. Flex setup … boring … math stuff … fun 🙂

Categories: Degrafa, Flex Tags: , ,