McCullick Games: Flash Game Development Tutorial 1: Setting up FlashDevelop

Flash Game Development Tutorial 1: Setting up FlashDevelop

I developed the Fisher Girl game as part of a prototyping challenge. The Lost Garden blog regularly holds game prototyping challenges and gives away a game design and graphics. So starting with the Fishing Girl design and graphics I created the Fisher Girl game (play it: http://www.nonoba.com/darkzak/fisher-girl).

I don't have a recent version of the Flash editor, so this game was developed entirely using FlashDevelop (http://flashdevelop.org) and the open source Flex (http://www.adobe.com/products/flex/) framework. Since this game was build completely using open source/royalty free tools, graphics, and music I am going to give back to the community by posting tutorials on how I built the game.

To follow these tutorials you will need:

Download FlashDevelop - install the latest release
Flex 3 - download the Open Source Flex SDK latest stable build.

Setup

Install FlashDevelop and unzip the flex sdk to somewhere simple you will remember (I installed to C:\tools\flex). Then open up FlashDevelop and in the main menu click Tools > Program Settings. In the left hand list choose AS3Context, then in the right hand list find the Flex SDK Location and enter the location you unzipped the Flex sdk to (On mine I entered C:\tools\flex).

Test Setup

You should be all setup to compile in AS3! Let's test it out.

In the main menu click Project > New Project..., choose AS3 Project, set the Name to be HelloWorld, select a location for the project, and select the Create a directory for project checkbox. After you click OK, you should see a new project created in the right hand box under Projects. Open up the src folder in the Projects area and open the Main.as file. FlashDevelop does a lot of the initialization code for you. Find the "//entry point" comment, this is where you first have access to the flash stage. Directly under the entry point comment paste the following code:

var output:TextField = new TextField();
output.text = "Hello World";
this.addChild(output);

You will need to add the following import statement: "import flash.text.TextField;"

To test your code hit CTRL+Enter or Project > Test Movie. You should see "Hello World" printed at the top of the movie!

In the next tutorial I'll show how to embed game assets from a swf or from png files into your game.

Labels: games, tutorial

2 Response to "Flash Game Development Tutorial 1: Setting up FlashDevelop"

paisible Says: March 24, 2010 at 12:04 PM

Hi, I don't know if it's because of the flashdevelop version I have but using the test snippet you gave raises an error:
-------------
C:\...\Documents\flex projects\HelloWorld\src\Main.as(23): col: 15 Error: Type was not found or was not a compile-time constant: TextField.
var output:TextField = new TextField();
^
C:\...\Documents\flex projects\HelloWorld\src\Main.as(23): col: 31 Error: Call to a possibly undefined method TextField.
var output:TextField = new TextField();
^
Build halted with errors (fcsh).
------------

SO to get it to work I had to import the flash.text namespace.
Ok , I'm going to read the remaining of the tut now ;-)