Tutorial: The Age Gauge & the easy way to get data into Flash

Michael — Thu, 25 Jun 2009 11:37:44 +0000

Age Gauge on Comeout.on.net

If you work with websites, sooner or later you will find yourself interacting with Flash. While Flash usually gives me the urge to run for the hills, sometimes it really is the correct tool for the job. If you do have to work with Flash, chances are you will need to get data into it. This post documents how I created the Age Gauge for the Come Out Festival‘s 2009 website.

Before we begin, a disclaimer: I hate working with Flash. If you are in a position where you are about to do something in Flash, the correct approach is to first make sure there is no other way to do what you want. Since I primarily work on Linux, I especially hate Flash. However, sometimes it is the best way to solve a problem.

Normally, if you’re using Flash for anything other than simple animation, you will need a way to pass data from your website/database/server to the Flash file. There are many ways to go about this. The Web 2.0 guys will tell you that once the Flash animation has started, it should retrieve an XML file from the server, using Flash’s built in XML parsing functionality to extract the data. A slightly more old school variation on this approach is to create a server side script that creates output looking just like URL encoded variables ($_GET in PHP). The Flash file loads the URL and the variables are automatically available as global variables. However, sometimes you just need to keep things simple. But first, some background…

What is this Age Gauge anyway?

Come Out is an arts festival for young people. The festival organisers needed the new website to show the target ages for all of the shows, so that 17 year old year 12s didn’t end up at a show aimed at kindergarten kids. The guys at Loud Whisper being all awesome and designy, came up with what you see above. They gave this to me and said “make it work”.

Now I was left with a predicament, how would I make it work? There are 171 possible combinations of ages, so making some static images is probably not the best way to go.

My immediate reaction was to look at the GD image library for PHP and see if I could make something work. I have made bar graphs using GD before. However, the big problem here was that it had to look like the design. The round ends were are a particular problem here. Next I thought about Javascript. To be honest, with enough CSS trickery you could probably make it work. However, I am not quite Web 2.0 enough, and getting it to be cross-browser compatible would be a bit of a pain.

This leaves one extra option: Implement the thing in Flash.

Setting up the FLA file

The fact that I don’t like Flash actually worked in my favour. I wanted to get this over and done with as quickly as possible. So, I have ignored pretty much all the cool ActionScript 3 features, and using external .as files for scripts. For something this quick and simple, it just isn’t needed.

So we end up with something that looks like what you see below:

The Age Gauge in Flash

All of the layers can be ignored except for red. Red contains the red bar that moves and changes size. Because we need to change the red bar using ActionScript, we’ve given the red movie clip an instance name called slider. Where the slider is actually positioned doesn’t matter too much, because we’re going to be moving it once the movie loads anyway!

ActionScript me baby!

Before we can do anything, we need to figure out the correct position for the slider, and the correct increment for a single year. The way I did this was to simply move the slider using the arrow keys on the keyboard until I had something that looked right. We then put these into script:

var startAge;
var endAge;
 
/**
 * This is the smallest value for the start age
 */
var MIN_POSITION = 2.9;
 
/**
 * The width of a single year.
 * So, if there were 2 years between the start and end age,
 * The width of the rectangle would be step*2
 */
var STEP = 9.29

So, with an age of 0, the slider should have it’s position.x at 2.9. For every year, we had 9.29 onto this position. Sounds easy so far right? Next we have to actually do the moving and resizing based on the starting and ending age:

// set the position of the slider, but first
// we don't want things to break with a negative age
if (startAge &lt;= 0) {
 startAge = 0;
 slider._x = MIN_POSITION;
}
else {
 // here we take the position, and add the step value multiplied by the start age
 slider._x = MIN_POSITION + (startAge * STEP);
}
 
// now we just set the width to be however many years are between the start and end ages
slider._width = STEP*(endAge-startAge);

That is all of the code to make this work. We don’t even need to be too precise with the starting position and step, because the mask hides it if we are slightly off. This is one of the benefits of using Flash, and made the Age Gauge very easy to implement.

Getting the data into Flash

The next step is to actually make this work. The script above uses uninitialised variables. This will cause things to break, which would be bad. We need to get data into the swf file so that startAge and endAge have values. As I mentioned way back at the start, there are a few ways this can be done. The one I didn’t mention is to simply use flashvars in the HTML of the page. This gives the Flash file data without having to bother with opening remote URLs for use with XML parsing or loadVars(). This is not the best way for all problems! However, all we are trying to do here is get two numbers in, so what’s the big deal?

Creating the HTML is pretty straight forward. I should mention though that I use swfobject for loading Flash through Javascript. It gets around some issues, such as IE7 not playing Flash on page load. Anyway, the HTML looks like this:

The code above uses swf object to load the Age Gauge, passing flashvars to the file when it loads. In this example, we are using a start age of 16, and end age of 13. If you aren’t using flashvars, then you’d do something more like this:

The point is the same. Really, all swfobject does is generate this HTML for you when the page loads. Note that the flashvars param has the actual startAge and endAge variables formatted like $_GET data, in the same format as loadVars() expects.

Conclusion