Introduction to Flex

Adobe Flex is similar to Flash in that both of them use the same graphics engine and they both allow you to use Actionscript.

However, Flex is free, open source, and is written using MXML. It consists of Actionscrupt libraries that give access to the Flash drawing engine and a compiler, however, rather than compiling through the development environment such as in flash, it is done via the command line. Flash is also based more around the time line than Flex.

Flex has similarities to HTML and to my understanding is based on XML, so most of it seems fairly easy to read to me. The Actionscript files are virtually the same as the appearance of the Actionscript files you would use in Flash.

The exercise in the KKB210: Computational Arts 1 week 5 tutorial is based around a “Moon Buggy” and making it jump. We were provided with the basis of it with an Actionscript file, an mxml file and a swf file of what the final solution should look like.

Initially, the buggy moves across the screen, what we have to do though is to make it jump whenever the user clicks with the mouse.

The documentation on the Adobe site is quite useful and explanatory, though it does take a bit of sifting to find what we need.

We didn’t need to make any changes to the mxml file, but the Actionscript was another story.

We end up with a Actionscript file that looks like this:

import mx.core.UIComponent;
import flash.display.Loader;

public class MoonPatrolGame extends UIComponent
private var backgroundLoader:Loader;
private var middlegroundLoader:Loader;
private var foregroundLoader:Loader;
private var buggyLoader:Loader;
private var verticalSpeed:int;
private var groundLevel:int;

public function MoonPatrolGame() {

// Call the constructor for the superclass UIComponent

// Load the images for the buggy, the foreground, midddleground and background
backgroundLoader = new Loader();
middlegroundLoader = new Loader();
foregroundLoader = new Loader();
buggyLoader = new Loader();
backgroundLoader.load(new URLRequest(".uploads/flex/MoonPatrolSimple/img/background.png"));
middlegroundLoader.load(new URLRequest(".uploads/flex/MoonPatrolSimple/img/middleground.png"));
foregroundLoader.load(new URLRequest(".uploads/flex/MoonPatrolSimple/img/foreground.png"));
buggyLoader.load(new URLRequest(".uploads/flex/MoonPatrolSimple/img/buggy.png"));


public function initialiseGame():void {

// buggy is at groundLevel
buggyLoader.y = 375;

// The buggy stays in the centre
buggyLoader.x = (width / 2) - (buggyLoader.content.width / 2);

// We want to update every frame so we add a listener for ENTER_FRAME events
addEventListener(Event.ENTER_FRAME, drawGame);

// Check for a mouse click
addEventListener(MouseEvent.CLICK, clickCallback);

// Add the background, middleground, foreground and buggy objects to the display list

// These variables are for making the buggy jump up in the air
verticalSpeed = 0;         // this is the rate at which the buggy is moving upwards (in pixels per frame)
groundLevel = 375;        // this is the y-value of the ground level

public function drawGame(event:Event):void {

// Move the background, middleground and foreground at different rates
backgroundLoader.x = backgroundLoader.x - 1;
middlegroundLoader.x = middlegroundLoader.x - 2;
foregroundLoader.x = foregroundLoader.x - 4;

// This makes the the buggy move up and down according to it's vertical speed
if (buggyLoader.y > groundLevel) {
buggyLoader.y = groundLevel;
verticalSpeed = 0;
buggyLoader.y = buggyLoader.y - verticalSpeed;
verticalSpeed = verticalSpeed - 1;

// This gets called when the mouse is clicked
public function clickCallback(event:MouseEvent):void {
buggyLoader.y = groundLevel - 1;
verticalSpeed = 20;


To see it in action, have a look at the .SWF here. The .mxml is available here, and the .as is available here.

Tags: , , , ,

Leave a Reply