Creating the application

We will use two programming languages to write our game: ActionScript and MXML. In fact, we will use only small portion of MXML to define application and canvas object. User interface, game logic, event handling... will all be written in ActionScript.

MXML

Flex developers use MXML language to define layout of user interface components and other non-visual aspects of an application. MXML is XML markup language, convenient for development of rich user interfaces. But games, usually, display user interface differently than desktop applications, that is why we will not code much in MXML. All we have to do is create one MXML file, that will define application tag and include main ActionScript source code file. OK, create empty file in text editor, copy code below and save file as SnakesAdventure.mxml in project root.

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    name="SnakesAdventure"
    backgroundColor="#000000"
    horizontalAlign="center"
    creationComplete="Init();"
    enterFrame="UpdateFrame();"
    paddingLeft="0"
    paddingTop="0"
    paddingBottom="0"
    paddingRight="0"
    width="480" height="480">

  <mx:Script>
  <![CDATA[
    include "SnakesAdventure.as";
  ]]>
  </mx:Script>

  <mx:Canvas id="gamePanel" x="0" y="0" width="100%" height="100%"/>
</mx:Application>

MXML source code files always start with XML declaration (line 1). In the second line is starting tag of root element mx:Application. mx:Application element contains several attributes (lines 3-12): width and height attributes define size of the application frame in pixels (480x480), backgroundColor defines background colour of application frame. Attribute creationComplete defines which function will be called after application initialization is complete. Attribute enterFrame defines which function will be called when application is ready to draw new frame. We will implement both functions in ActionScript (SnakesAdventure.as).

In mx:Script element (lines 14-18) we gave instruction to Flex compiler that file SnakesAdventure.as contains relevant source code and should be included into compilation process.

mx:Canvas element (lines 18-20) creates panel with the name "gamePanel" inside application frame. Panel has exactly the same size as application frame and will display all visible graphics.

You can find a lot more information about Flex components on Adobe Flex live docs, for example Application class page contains list of all attributes you can define in mx:Application element.

If you try to execute build script again, compilation will fail and compiler will report the following error:

Unable to open included file: /home/user/myProjects/SnakesAdventure/SnakesAdventure.as

No worries, we will create missing SnakesAdventure.as file next.

ActionScript

With MXML you can easily define and position user interface controls, containers, services... of the application, but you cannot implement their custom behaviour. To implement custom behaviour, we have to use another programming language: ActionScript. There are many ways to mix MXML code with ActionScript, in SnakesAdventure.mxml we embedded ActionScript (include statement) inside mx:Script tag.

ActionScript is object-oriented procedural programming language, developed by Adobe. If you have prior experience with programming languages like Java, JavaScript, C#... you should become familiar with ActionScript in very short period of time.

Now, let's create missing SnakesAdventure.as file. Create empty file in text editor and copy code below. Save the file as SnakesAdventure.as inside project root.

public function Init():void
{

}

private function UpdateFrame():void
{

}

If you remember, we set two function in mx:Application tag (file SnakesAdventure.mxml) that will handle creationComplete and enterFrame events. We have to define both functions, otherwise compiler reports an error. Currently they have empty bodies, but we will implement them in following chapters.

One more thing: if your text editor supports syntax highlighting, but ActionScript code is displayed as plain text anyway, I suggest you enable highlighting for JavaScript.