Flash game development with flex and ActionScript (No.1)

Get started with flash game development. This article shows you which tools to download and details the first steps in creating a flash game using Flex and ActionScript.

Start a flash game program. This article will show you how to use the flex development tool as language to start developing a flash game.

Getting started

With Flash Player and the flex SDK Adobe has supplied everything you need to start creating your own Flash games. Creating a flash game using Flex has several advantages like:

• Cross platform compatibility-there is a flash player for every major platform
• Easy deployment-publishing the game is as simple as uploading the SWF File
• (Almost) Zero installation requirements-an end user only needs a web browser with the Flash Player Plugin installed
• Free tools-all you need is the free flex SDK and a text editor

Start

 

The Flash Player and flex sdks provided by Adobe can satisfy any flash game you want. Developing Flash games with Flex has the following benefits:

• Cross-platform compatibility-Flash Player applies to most platforms!
• Easy deployment-you only need to upload the generated SWF file!
• In most cases, the client does not need to download any additional programs to be initialized-each client only needs one browser and One Flash Player (embedded in the browser!
• Free tools-all the development tools you need are a free flex SDK and a code editing program!

This article series will step you through the process of creating a 2D flash game using Flex, with the result being a complete game in the style of the old school top down shooters.

 

This article will guide you through the entire process of creating a 2D flash game developed with Flex! Based on this result, we can complete a plane-hitting game that is often used in school!

 

To get started you will first need to download the Flex 3 SDK from http://www.adobe.com/products/flex/flexdownloads. the SDK contains all the tools you will need to compile the source code presented here into a SWF file that can be added to a Web page. you will also need a decent text editor. I quite like textpad, which can be downloaded from http://www.textpad.com /. finally you will need to download a flash debug player from http://www.adobe.com/support/flashplayer/downloads.html. the debug player will allow you to open up a SWF file directly without having to create a web page to contain it. with these three tools you are ready to start coding.

 

First, download the Flex 3 SDK. This SDK contains the compiler that compiles the source code to be presented into the SWF file to be loaded on the page. You also need a proper code editor. I especially like textpad, It's A http://www.textpad.com/. Finally you may need to download a publisher from http://www.adobe.com/support/flashplayer/downloads.html. This debugger allows you to directly open the SWF file without cutting a page. With these three tools, you are ready to write code! Creating the application

Conceptually flex splits up an average program into two sections: the GUI and The ActionScript code. the GUI is created in an mxml file, which is an XML file that contains user interface elements nested in tags very similar to HTML. note that the mxml file can contain in ActionScript code inside an MX: script tag, but the main focus of the mxml file is to define the user interface.

The top level tag of an mxml file is the MX: Application tag. This application object is the entry point of the Flex application, and is the most logical place to start.

Main. mxml ActionScript source code

 

<? XML version = "1.0" encoding = "UTF-8"?>

<Mx: Application

Xmlns: MX = "http://www.adobe.com/2006/mxml"

Layout = "absolute"

Width = "600"

Height = "400"

Framerate = "100"

Creationcomplete = "creationcomplete ()"

Enterframe = "enterframe (event)">

<Mx: SCRIPT> <! [CDATA [

Public Function creationcomplete (): void

{

}

Public Function enterframe (Event: Event): void

{

}

]> </MX: SCRIPT>

</MX: Application>

 

We start by defining some of the properties of the Application object. These properties can be set through attributes in the MX: Application tag. This shoshould look familiar to anyone who has written HTML.

Width and height

Specify the screen size of the program in pixels.

Framerate

Specifies a limit on the frames per second. the default is 24, but since we want the game to run as fast as possible it's best to override this with a much higher number. note that just setting the framerate to 100 doesn't guarantee (ensure) that the frame rate will always be 100 (or even get anywhere near it ). this property just sets a ceiling on what the frame rate cocould be.

Creationcomplete

Attaches a function to be called when the application has been created. We use this as the entry point in the program.

Enterframe

Attaches a function to be called every time the screen is redrawn (the screen will be refreshed). We will use this to repaint the screen with the next frame of the game.

The MX: script tag gives us a place to write some ActionScript code. the [CDATA [] tag just means that any special characters inside the MX: script tag will be interpreted as text rather than xml characters. inside the MX: script tag we need to add the two functions which match the values for the creationcomplete and enterframe properties.

 

Compiling and running

To compile the program you need to run the commandMxmlc main. mxmlFrom the command prompt. You can then open up the resulting main.swf file in the Flash debug player through file-> open.

And the end result? A blank screen that does nothing. Not terribly exciting I'll admit, but it is a start. We will build off this code in Part 2 of the series to start drawing to the screen.