Free Flex2 Development Environment Tutorial

By admin on 30/12/2006

This is certainly not anything groundbreaking, however I thought it might be useful to offer a step by step guide to getting up and running for Flex2/AS3 development without spending a bean on software*.

*N.B. gaping flaw in comment: you will however need Windows to do all of this which is of course not free. Unfortunately this tutorial is for setting up a Flex2/AS3 development environment for Windows. I might get around to exploring a similar setup on Linux but at the moment this is my preferred setup as FlashDevelop will only run on Windows.

This tutorial is essentially an idiot proofing of the (already fairly idiot proof) instructions on FlashDevelop.org. However, I originally struggled with this and know of a few others who have also, so dont feel bad if you're reading this having struggled elsewhere (it's easy when you know how eh? I dont really think you or I am an idiot). This tutorial is aimed at those wishing to get into some Flex2/AS3 development but haven't had a chance to do much yet.

The Environment

We are going to step through the setup of our development environment and build a hello world Flex2/AS3 application using the following:

Pre-requisites

Before anything will work you'll need to make sure you have a couple of things installed. Firstly check you have the Microsoft .NET 1.1 SP1 framework if not you need to download Microsoft .NET 1.1 SP1 framework.

Secondly you'll need the flash player for Internet Explorer and it's worth getting the "projector content debug release" for ease of testing (saves having to open IE everytime you want to test) visit the Adobe Flash Player download page for these. Once downloaded, right click on a .swf file, select Open With and select "Flash Player 9 r28", this will mean when you test your movies they'll run in the standalone player.

You will also need the java 1.5 runtime installed (to check your version click Start, Run, type "cmd" hit enter, type "java -version" hit enter). That should hopefully be everything you need to complete the rest of this tutorial.

Installing FlashDevelop

The first step is to install FlashDevelop, download it from FlashDevelop.org in the "Releases" forum, this tutorial is written at the time of release 2.0.2 (so don't blame me if things change for later versions). Run the installer and follow along as you would any other install.

NOTE: by default FlashDevelop comes ready to run for AS2 projects. If you plan to do AS2 and AS3 development (as I do) I would suggest changing the installed path to "C:\Program Files\FlashDevelop_AS2" or wherever you wish to install it, we will make a duplicate for Flex2/AS3 projects shortly. If you plan on using Flex2/AS3 only then ignore this comment.

That is all there is to installing FlashDevelop, easy eh? This is one of the reasons it's getting so much kudos in the OSFlash community.

What about Flex2/AS3????

Ah yes, that's what we're here for isn't it? As noted above, if you plan on doing AS2 development in FlashDevelop as well as AS3, I would recommend making a copy of the Program Files folder you originally installed FlashDevelop to. I made a copy to C:\Program Files\FlashDevelop_AS3, this means you can switch seemlessly between the two without having to change classpaths or settings. If you only plan to do Flex2/AS3 then carry on as you are.

Flex2 SDK If you don't already have it, download the Flex2 SDK from Adobe and extract it somewhere on your PC (I extracted to c:\Flex2\flex_2_sdk). We now need to tell FlashDevelop where it is, look for a file called settings.xml in C:\Program Files\FlashDevelop_AS3\Settings\ (you might need to run FlashDevelop.exe and close it before settings.xml is created) (edit: thanks Phillipe) In FlashDevelop click Tools, Program Settings (or press F9) and make sure that the key ASCompletion.Flex2Sdk.Path has the correct path to the flex2 sdk we extracted earlier. This has now enabled the Flex2 mxmlc compiler. AS3 Code Completion

In order to have the AS3 intellisense and code completion you'll need to download the AS3 Intrinsic Classes and extract them anywhere (I chose C:\Flex2\AS3_intrinsic_classes). Now open FlashDevelop and press Ctrl + F9 to open the global classpaths dialog, add the path to the AS3 intrinsic classes and close FlashDevelop.

Because we're using this setup for Flex2/AS3 development only we now need to remove all AS2 reminants. To do this download the AS3 top-level declaration and extract anywhere (except for in the AS3 intrinsic classes folder, I chose C:\Flex2\as3_toplevel). Open FlashDevelop and hit Ctrl+F9 again to open the global classpath dialog and remove the first classpath (%userprofile%\Local Settings\Application Data\Macromedia\Flash MX 2004\en\Configuration\Classes).

Now go to program settings (F9) and set the ASCompletion.Macromedia.Classpath key to the path of the as3 top level declarations (in my case C:\Flex2\as3_toplevel) and also set the ASCompletion.MTASC.UseStdClasses key to false.

MXML completion

The final step is to enable MXML completion. To do this download the MXML definition and extract it to your FlashDevelop's data folder (in my case C:\Program Files\FlashDevelop_AS3\Data).

And that is it for setup! You should now have a Flex2/AS3 development environment ready to go. If you want to jump straight in I would suggest reading up on the AS3/MXML custom @mxmlc quickbuild tag, however if you want to make sure everything is working stick with me for an amazingly exciting HelloWorld!!!!

HelloWorld! AS3

Open FlashDevelop (make sure you open the FlashDevelop.exe in your FlashDevelop_AS3 folder if you kept an AS2 version).

Click Project,

Click New Project,

Select Empty Project,

Enter the project name "HelloWorldAS3" and choose where you want the project created.

You should see in the right hand project explorer a panel with your project file,

right click that and select Add, New Class

Enter the class name "HelloWorld" click OK,

Your HelloWorld Class will appear,

Click Syntax, AS3. You can test this now by typing the following:

[as]

package

{

import flash.display.Sprite;

import flash.text.TextField;

public class HelloWorld extends Sprite

{

function HelloWorld()

{

var t:TextField = new TextField();

t.text = "HelloWorld!";

addChild(t);

}

}

}

[/as]

If you type the above (instead of copy paste) replacing the default class structure (that's AS2) you should notice you have AS3 intellisense and code completion! Cool eh?

Now to run the project, simply click the Quick MTASC Build button (grey cog with a red bug on it) and if all has gone to plan you should see your first AS3 swf file created and loaded for your viewing pleasure. If it worked congratulations! If not, post a comment here or on the FlashDevelop.org forums and I'm sure we'll get it sorted.

HelloWorld! MXML

Now we all know AS3 isn't Flex2 and Flex2 isn't AS3, it all comes together when we introduce MXML, Flex2's markup language. Fortunately we've just setup a very cool environment for creating this very thing, so without further ado:

Open FlashDevelop if it's not already running,

Click Project, New Project

Select Empty Project

Name the project "HelloWorldMXML", choose where you wish it to save and click OK,

In the project explorer on the right, right click HelloWorldMXML and select Add, New Xml File...

Name the file "HelloWorld.mxml" and click OK,

Now type the following into your mxml file:

[xml]

[/xml]

Again, you should notice you have mxml intellisense and code completion making it a breeze to knock up an mxml layout.

Once done click the Quick MTASC Build button and whoosh, you should see your first Flex2 swf created and displayed. If so well done, if not post a message or hit the forums.

Next head over to the Adobe Flex2 quickstarts and start finding your way around Flex2 and AS3!

Any comments, suggestions, corrections, questions etc feel free to bang into the comments.