Intro to the Flex SDK
by Andy 'pinacolada' Fischer

The Game Files

The MXML File

At the root of every Flex app is an MXML file. Here's a really simple MXML File:

<?xml version="1.0" encoding="utf-8"?>
< mx:Application
  xmlns:mx="http://www.adobe.com/2006/mxml" 
  styleName = "plain"
	layout="absolute"
	>
	< mx:Label text="Some label" x="30" y="40" />
	< mx:Button label="Some button" x="30" y="70" />

</mx:Application>

Here's what it looks like after its compiled and run:

As you can see, the file format is really similar in form and function to HTML. MXML has a ton of GUI widgets, such as menus, buttons, controls, etc. Most of the features of MXML aren't very relevant to games, so let's just write a barebones file and get on to the coding.

Here's the MXML file we'll be using for our game:

<?xml version="1.0" encoding="utf-8"?>
< mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
  styleName = "plain"
	xmlns="net.crayfishden.flexintro.*" 
	layout="absolute"
	creationComplete="initApp()">

	< mx:Script>
        <![CDATA[
            public function initApp():void
            {
                canvas.init();
            }
		]]>
	</mx:Script>

  < MyGameCanvas id="canvas" width="100%" height="100%" themeColor="#ffffff" />
</mx:Application>

Let me highlight the items in this file that are worth being aware of:

xmlns="net.crayfishden.flexintro.*"

"xmlns" means XML Namespace, and it tells the compiler where to find our source code. In this case, the compiler will look under the "net" folder, then the "crayfishden" folder, then the "flexintro" folder.

creationComplete="initApp()">

This property tells the player to call the (static) function "initApp" when the application is finished being created.

	   < mx:Script>
	   <![CDATA[
		public function initApp():void
		{
			canvas.init();
		}
	]]>
</mx:Script>

The <mx:Script> tag allows us to include some static code into the Application tag. In this case we are calling init() on "canvas". If you're wondering where the 'canvas' object came from, it was created because we have a tag with an id of 'canvas'.

< MyGameCanvas id="canvas" width="100%" height="100%" themeColor="#ffffff" />

This is a custom tag. When the compiler gets to this point, it'll look under the namespace (which we defined as the "net/crayfishden/flexintro" folder), and it'll find the file MyGameCanvas.as (which we are going to write next). Then it will make an instance of MyGameCanvas, and add it to our application.

Note also that we set the width and height to 100%, so that this tag will take up the entire space.

So, all the magic happens inside the file MyGameCanvas.as. All we need to do now is write it.

The Actionscript File

Okay, now we're ready to write some actual code.

For this tutorial we're going to write a simple Breakout clone. This game has basically 3 elements: a bunch of blocks at the top of the screen, a paddle at the bottom of the screen (that the player controls), and a ball that destroys blocks and bounces if it hits anything.

The language is Actionscript 3, which is based on ECMAScript 4. At the time of release (and this writing), ECMAScript 4 is unreleased and only exists as a preliminary edition. So, ECMAScript 4 might differ slightly from Actionscript 3 by the time it is released. If you've used JavaScript, this language will seem familiar, as JavaScript implements ECMAScript 3.

Some of the new features of ECMAScript 4 (and consequently, new features of Actionscript 3), are: sealed classes, packages/namespaces, and optional static typing. I'll talk about each of these as they appear in the code.

So, let's make a pass through the source code file. The very first thing we write is this:

package net.crayfishden.flexintro {

This declares everything inside the brackets to be in the package "net.crayfishden.flexintro" (the same as the XMLNS that we defined above). This is required.

Next is a good place to import the stuff we will need:

import mx.core.UIComponent;
import mx.controls.Image;
import flash.events.*;
import flash.utils.*;
import flash.display.*;

Next we start declaring our class:

public class MyGameCanvas extends UIComponent 
{

Nothing too complicated here, we define a class MyGameCanvas that has UIComponent as its parent.

UIComponent is the base class for all visual components in Flex, so you'll be subclassing it often. In fact, now is an excellent time to check out the documentation. If you plan on doing more Flex development, you'll probably want to bookmark that page.

Next we declare some gameplay-related constants.

var NUM_BLOCK_ROWS:int = 5;
var NUM_BLOCK_COLS:int = 10;
// etc...

This syntax might seem weird. Why is the type written after the variable name? This is what the new "optional static typing" looks like. Actionscript is dynamically typed, which means that we don't need to specify the type if we don't want to. Here's what the above code would look like if we didn't want to declare the type:

var NUM_BLOCK_ROWS = 5;
var NUM_BLOCK_COLS = 10;

But usually, you want to declare the type. Using static typing will:

definitely reduce programmer error
possibly improve runtime performance
prevent the compiler from giving you warnings

So, it's a good habit to use static typing as much as possible.

Moving on, next we have some sprites and a few state variables.

// Sprites
private var blocks:Array = new Array(0);
private var ball:Sprite = new Sprite();
private var paddle:Sprite = new Sprite();

private var ball_dx:Number;
private var ball_dy:Number;
private var ball_speed:Number;
private var lives:int = 3;

"Array" is a dynamic length container, just like "Vector" from Java or C++. "Sprite" is a kind of display object. When we create a Sprite this way it starts out blank, but we'll fill it in later. "Number" is a non-integer value (Actionscript's version of a "float").

Next we include our image files.

[Embed(source="gold_block.jpg")]
private var GoldBlock:Class;

[Embed(source="red_block.jpg")]
private var RedBlock:Class;

[Embed(source="blue_block.jpg")]
private var BlueBlock:Class;

// Put these image classes into one array for easy access
private var allBlocks:Array = new Array(GoldBlock, RedBlock, BlueBlock);

The Embed statement is some compile-time magic. It tells the compiler to find the given resource file (in a path that is relative to our .AS file), and include it inside the final .SWF . You can embed all kinds of stuff: image files, MP3s, fonts, even other Flash movies.

We need to declare a Class variable immediately after the Embed statement. In a second act of compile-time magic, this class variable will be attached to the image object. So now, if we want to draw "gold_block.jpg", we just create an instance of GoldBlock.

Moving on, let's declare our init() function.

public function init():void 
{
	// set up ball
	ball.graphics.beginFill(0xee00ee);
	ball.graphics.drawCircle(0, 0, BALL_RADIUS);
	ball.graphics.endFill();
	addChild(ball);
	resetBall();            // places the ball in a starting location

There's a couple things going on here. First, we do some vector drawing onto our ball, thanks to the built-in object "graphics". Every DisplayObject has a "graphics". In this case we are just drawing a purple circle.

Next, to explain addChild(), I'm going to talk about the Flash display model. This is most likely one of the biggest differences for programmers that are coming from other platforms.

The Flash Display Model

Contents

	Introduction
	The Game Files
	The Flash Display Model

	Source code
	Printable version
	Discuss this article