http://www.swiftless.com

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 <= 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:

<script type="text/javascript">
swfobject.embedSWF("AgeGauge.swf", 
                   "AgeGauge",
                   "168", 
                   "61", 
                   "9.0.0",
                   false,
		   {startAge: "6", endAge: "13"}
                  );
</script>

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:

<object id="AgeGauge" data="AgeGauge.swf" type="application/x-shockwave-flash"  height="61" width="168">
   <param value="startAge=6&amp;amp;endAge=13" name="flashvars">
</object>

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

And that’s all there is to it really. Remember that using flashvars is a very simple way of getting data from your website into Flash. For more complicated things, parsing an XML file would be a much more flexible way to go. The moral of the story is to use the right tool for the job. Whether we are talking about the choice of Flash, GD, or Javascript, or choosing between the methods of getting data into Flash.  Hope this was at least a little useful!

Note that this video is 640×480, so hit the full screen button to get more readable detail.

Notes

I cannot believe I messed up the remote path that many times! I am sorry about that. Of course, the side effect is you learnt how to both add and remove remotes. So yeah… I did that on purpose.

At this point, we can create a project or join an existing one. We can add files and commit changes. We can push our changes to remotes, and fetch changes that other people have made. This is all great. However, we haven’t touched on one of Git’s most powerful features. I am of course talking about branching and merging. This will be the priority for the next video.

Again, any feedback is much appreciated.

]]> http://www.20papercups.net/tutorials/git-vtm03-pushing-pulling/feed/ 3 http://www.20papercups.net/tutorials/git-vtm02-the-basics/ http://www.20papercups.net/tutorials/git-vtm02-the-basics/#comments Sat, 28 Mar 2009 08:59:45 +0000 Michael http://www.20papercups.net/?p=172 This video hits up the terminal and starts using git. We start by creating a git repository, which is super easy with Git. Then, we look at adding files to the repository, and commiting changes.

Note that this video is 640×480, so hit the full screen button to get more readable detail.

Notes

In this video, I specifically create a project using:

git init

. If you are working on your own projects, this is how you will work. However, a lot of the time you will be starting work on an already existing project. In this case, you don’t create a new repo using git init, instead you clone an already existing repository. The basic is this:

git clone path/to/repository

I will cover this in a later video, but I think it is important enough to mention here.

Another thing that I could have covered in more detail is the staging area. There is actually a lot more that you can do with it than I mentioned in this video. However, that will come later. For the first 3 videos (at least) I want to just get the basics down.

Note that this video is 640×480, so hit the full screen button to get more readable detail.

Notes

Git is a distributed version control system, originally written by Linus Torvalds for Linux Kernel development. It is Free and Open Source software. You can get it for Linux, Mac and Windows (either native or cygwin). There are also plugins for Eclipse, etc, so you don’t have to work from a terminal like me.

This video just tries to convey what makes working with a distributed version control system different and better. Nothing too strenuous just yet. If you are a Git guru, I am aware that I am glossing over some details in this video. This is intentional, and I hope to cover some of these details in later videos, or at least in the accompanying text. Still, I welcome any and all feedback and suggestions.

Also, I apologise in advanced for my terrible tablet handwriting skills.

Note that this video is 1024×768, so hit the full screen button to get more readable detail.

Notes:

The 3DBuzz C++ videos include the following code:

main() {
   cout << "Hello World" << endl;
}

This code fails to compile on newer versions of Visual C++ and GCC. All that needs to be done is to specify that main will return an int, and then actually return one:

int main() {
   cout << "Hello World" << endl;
   return 0;
}

Of course, whether this actually needed a video is debatable!