FlashDevelop AS3 Quick Start Guide

This page is intended to serve as a quick guide to setting up a new AS3 development environment and creating a simple project using the Razor components. If you are not new to ActionScript 3 or Flex, then you might find some of these steps redundant and you can skip them. These instructions are only applicable to Windows systems, but you can replace FlashDevelop with your favourite editor.

Step 1

Install FlashDevelop

Download the latest version of FlashDevelop from the FlashDevelop community forum, and install to your system using the installer provided.

Step 2

Install Flex SDK

The Flex SDK contains the compilers and debugger needed for developing our applications. Unlike Flex Builder, these tools are available for free from Adobe.
Note: If you have already installed Flex Builder, the Flex SDK is already installed in the same directory.

Use the installer provided at http://www.adobe.com/go/flexsdk2_download. For the purposes of this guide, we will install it to C:\flex_sdk.

Step 3

Download the Razor source

Download the latest Razor source code, and unpack it to the location of your choice. For the purposes of this guide, we will use C:\Razor

Step 4

Set up FlashDevelop

First of all, we are going to configure FlashDevelop to use the Flex SDK we installed earlier.
Launch FlashDevelop, and go to the Installed Plugins dialog in the Tools menu.

Select the AS3Context plugin in the dialog that appears (1). Then click the Settings button (2).

Select the 'Flex SDK Location' option and click the browse button (shown below) to open a file dialog.

Locate your Flex SDK directory on your filesystem, for the purposes of this guide, this was C:\flex_sdk.
Close out each dialog when you are done.

Step 5

Create a New Project

Go to the Project menu and create a new project.

Select the ActionScript 3 - Default Project option (1). Then enter a name for your project (2). You can also change the location of your new project here.
Finally, make sure the 'Create a new directory' option is checked (3) and click OK.

FlashDevelop will automatically create a Main class and folder structure for our project...

Step 6

Add the razor source to the project classpath

Open the current project properties from the Project menu.

Select the Classpaths tab, and click the 'Add classpath..' button.

Navigate to the AS3 razor source you downloaded in step 3. It is important to select the AS3 version, and not the AS2 version. In our example, this location is C:\Razor\as3.

Step 7

Write some test code!

Open up Main.as by expanding the 'src' folder in the Project tree, and double clicking the file. This class is set up to launch by default when you run or debug your movie. You can change the main class at any time by right-clicking your class in the Project panel on the right, and checking 'Always Compile'. Make sure to uncheck the same option on the existing main class.

In your Main file, paste the following code, overwriting anything that is already there:

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import razor.controls.Button;
	import razor.layout.Pane;
	import razor.skins.plastic.PlasticStyleSheet;
	import razor.skins.plastic.presets.Default;
	import razor.skins.Settings;
	
	public class Main extends flash.display.Sprite
	{
		private var myButton:Button;
		
		public function Main():void
		{
			Settings.setSkin(new PlasticStyleSheet(), new Default());
			
			var myPane:Pane = addChild(new Pane()) as Pane;
			myPane.setSize(300, 200);
			myPane.label = "Hello world!";
			
			myButton = myPane.addLayoutElement(Button) as Button;
			myButton.label = "Click me!";
			myButton.addEventListener(Button.E_CLICK, onClick);
		}
		
		private function onClick(e:Event):void
		{
			myButton.mergeStyle({baseColor: Math.random()*0xFFFFFF});
		}
	}
}

Then click the 'Test Movie' button.

You should see the swf below (albeit enlarged in the FlashDevelop window).