Free Flex2 Development Environment
Published on December 30th, 2006 by DannyT. Filed under UncategorizedThis 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:
- FlashDevelop (Release 2.02 at time of writing)
- Flash Player 9 Projector content debug release
- Flex2 SDK
- AS3 Intrinsic Classes
- AS3 Top Level Declaration
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]
horizontalAlign="center" verticalAlign="center"
>
[/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.
Col
December 31st, 2006 at 1:11 pm
Hi Dan,
Great tutorial mate!!! Yes I’m one of those idiots who had problems setting this up so thanks
Col
liwenzhi
January 8th, 2007 at 8:44 am
thank you Dan, this is just I’m looking for, you’ve done a good job.
Sakana
January 12th, 2007 at 4:31 pm
Tank you Dan, very good tutorial for a first time in free flex.
S.
Tacomman
January 21st, 2007 at 9:05 pm
Thanks for such a great tutorial. However, when I press the Quick MTASC Build button for either the *.as or *.mxml example above, I get a valid *.swf file but I also get the following error dialog: “No application is associated with the specified file for this operation.” What am I missing that would cause this error?
rosen jiang
January 25th, 2007 at 8:10 am
Cool
thx Danny!
David
February 3rd, 2007 at 2:33 am
How can I make “Quick MTASC Build” button work? I am getting error: ” Application not found”, I tried to replace original ASCompletion.dll to ASCompletion-v1.0.1. Now that button is disabled????
Eduardo GarcÃa
February 7th, 2007 at 5:40 am
while(true) { trace(“gracias!!!\n”); }
Eduardo GarcÃa
February 7th, 2007 at 5:24 pm
btw, what about working with AMFPHP? (http://www.sephiroth.it/tutorials/flashPHP/flex_remoteobject/index.php)
zakoops
February 11th, 2007 at 4:07 pm
Yesterday, I created my first Flex 2 application after having set everything in place according to the instructions available on the FlashDevelop site.
But no proper compilation, no output (arghhh!).
This morning, I found out your post and read it carefully, just to insure that my settings of yesterday were OK.
I just missed that obvious thing:
« …Now to run the project, simply click the Quick MTASC Build button (grey cog with a red bug on it) and if all… »
…and everything worked!
Thanks!
lara
February 12th, 2007 at 5:56 pm
Thank you very much. I couldnt figure out how to use Flashdevelop, now everything works.
Adam
February 22nd, 2007 at 12:35 am
Thanx Dan, that tutorial was easy to follow. I think you just saved me $500!
Anand
February 22nd, 2007 at 6:55 am
Just today I downloaded the Flex Builder 2 and started working with it.
I followed the tutoial and got the error.
“An unknown item is declared as the root of your MXML document. Switch to source mode to correct it.â€..
What ever MXML code I put into the editor, I am still getting the same error.
I am unable to proceed.
Please guide me on this issue.
Also can some one recommend me some pdf’s or nice articles where I can learn to code, step by step.
DannyT
February 22nd, 2007 at 10:42 am
Anand, this tutorial isn’t for using Flex Builder 2. It is for Flex2 development with FlashDevelop. For Flex Builder tutorials check out the Adobe Flex2 quickstarts
Manu
February 24th, 2007 at 9:56 pm
Hello, I have just made a French article to make famous HelloWorld in actionscript 3. In my tutoriel, I advise to use Flex Builder.
http://blog.emmanuelbonnet.com/2007/02/24/…ion-ratrappage/
Sharon Pariente
March 1st, 2007 at 2:36 pm
Dear Danny
Having found your details on http://www.weblogs.macromedia.com we are writing to express our interest in your suitability for a role we are looking to fill.
We are a leading provider of online casual gaming and a developer of cutting-edge, person-to-person Gaming systems for major distribution partners and media groups worldwide.
We are looking for an innovative and experienced Flex developer to join our young and vibrant team (on a remote basis since we are based in London) of technical and creative minds, who are currently building a next-generation games platform.
Please contact me if you would like more information.
I look forward to hearing from you.
Kind regards
Sharon Pariente
Jason Jensen
March 2nd, 2007 at 11:25 pm
Many thanks Danny!
This is exactly what I needed to get started using FD. I was up and running within minutes.
One note: ater a reboot I started getting a “Application not found” error when I compiled. I reinstalled the Flash Player 9 Plugin content debugger, and ran the Projector content debugger again to associate it with my swf files… and viola! I’m back in business. Hope this helps somebody.
Thanks again Danny!!
Labes
March 11th, 2007 at 6:10 am
I’m getting an error with the xml HelloWorld.
! is an X in a red circle
Line 2
col: 1 Error: Parse error at ‘ ‘.
This means… what? Any help anyone…
Phil
March 13th, 2007 at 8:10 pm
This works great. Thanks.
One question…my trace() statements are not appearing in Flashdevelop. Is that possible to set up?
DannyT
March 13th, 2007 at 8:27 pm
Labes, all i can suggest is you double and triple check the syntax you’ve used. Try re-typing rather than copy/paste (if that’s what you did).
Phil, glad it works, try doing a search on the FlashDevelop forum, I believe someone has implemented trace through local connection but I can’t remember for sure.
Fred
March 19th, 2007 at 6:05 pm
brilliant stuff, thanks for writin gthis
Barney
March 25th, 2007 at 9:06 pm
The HelloWorld example runs!!!!
Thanx dan! …. How many times does something work correct in one go??? …
Peter Kirn
April 9th, 2007 at 9:59 pm
Be careful with this … at some point Adobe changed the name from flex_2_sdk to flex_sdk_2. Screws me up on paths every time.
Just make sure your directory and the app settings all match up!
Great tutorial — clearest yet on this! Viva flashdevelop!
leif
April 12th, 2007 at 11:26 am
Thank you very much! I was looking for something like this for hours… and now everything works just perfectly. I just wish someone would do something similar for eclipse, since i’d prefer that IDE.
arthipesa
April 12th, 2007 at 11:42 pm
wow,…thank you, but i haven’t got the idea yet, but so far i like it…
hmm, i’ll give a try on this..
William from Lagos
April 13th, 2007 at 5:58 pm
Wow, what a great tutorial. Simple and straight forward.
Thanks!
Fred
April 14th, 2007 at 1:05 pm
If anyone tries to compile and get the ‘Application Not Found’ error, try downloading the Flash Player Debug Release as outlined in the tutorial. Browse to the swf file produced by the compiler, right click and choose ‘open with’ and browse to the downloaded player.
Ramses
April 18th, 2007 at 1:24 pm
Tnx man !.. love yer tutorial.. love the way everything is getting to get more & more OPEN SOURCE !!.. the way it should be
anyways.. this is a great written tutorial.. not too much but still very complete.. keep up the good work !..
i had the ‘application not found’ error as well .. but managed to get rid of it .. by associating SWF with the flash player 9 you asked us to download
cheers !
Ramses
blackpawn
April 23rd, 2007 at 9:24 pm
wow, this is great, thanks!
JaeWebb
April 29th, 2007 at 4:03 am
This tutorial was clear and concise. I appreciate you taking the time to create it and make it available to all.
Liz D.
April 29th, 2007 at 7:46 am
Thanks so much! Very helpful.
zeflasher
April 30th, 2007 at 3:29 am
Good tut
It saves me lots of time…
Thx heaps.
Cliburn M. Solano
May 4th, 2007 at 2:02 am
Salamat Pare!! Malaking tulong ito sa mga developers sa Pilipinas!! Mabuhay ka!!
Dan
May 6th, 2007 at 11:31 am
Not quite idiot proof I’m afraid(or perhaps it is and I’m not quite bright enough to pass for an idiot…what comes after idiot? Imbicle?).
:::sigh:::
At any rate: I got the code complete to work w/o a hitch first try but the silly thing refuses to compile: I get an alert box with “error while running flex 2 complier” when I hit the gear/bug button (the bottom left hand side of the screen says: ‘Mxmlc running’); also when I give up and close the program I get a second alert box saying “no process is associated with this object.” I have to close that twice (or perhaps two alerts are there) before FD will close.
I have Flash CS3 but I’ve not uninstalled Flash 8; so that shouldn’t screw anything up? Also I uninstalled and reinstalled the Flex SDK directly from the adobe site (and even rebooted windoze) and triple checked all the paths…I’m at my wits end trying to figure out what could be going wrong!
Imam
May 15th, 2007 at 8:38 pm
Thank you. My dream come true to take benefit from AS3 for my 3D Engine, after I have an hour installation due to flex_2_sdk or flex_sdk_2. What an idiot I am … hua ha ha….. A very usefull tutorial…
Mÿron
May 18th, 2007 at 11:40 am
Hello! I was just wondering, what do you do with the AS3 top-level declaration (toplevel.as)? The tutorial tells us to unzip anywhere (and then remove all references to Macromedia in the global classpart), but it does not tell us what it is for. Any idea?
Imma
May 18th, 2007 at 12:46 pm
I think everythings was allright but, I still have problem.
1. The syntax default is AS2
2. There is no choice of Flash 9 in project property
Can you help me?
How to know if a swf file is for Flash 9 or flash 8?
Peter
May 21st, 2007 at 10:20 pm
Dan –
I experienced the same error messages and found that I had forgotten to install the Java runtime. I’ve now gotten rid of the error messages but still haven’t managed to get things working. They work fine on my laptop running xp, but I can’t seem to make this work on Vista. Just says Mxmlc Running indefiniately.
Peter
May 21st, 2007 at 10:46 pm
ah ha! It turns out that I had installed the wrong version of the java runtime environment. You need 1.5 or higher. I installed 1.6 and things are fine and dandy.
Oh and thanks much for this tutorial. Hopefully my post will keep other from going astray.
Mano
May 31st, 2007 at 8:41 pm
Great stuff and thanks. The AS3 example works fine, but I am getting a similar error to the one that Labes reported, namely:
Line 2 col: 1 Error: Parse error at ”.
…despite having typed (not pasted) the code and rechecking until my eyes went square. Same problem with sample code from the Flex site.
Any ideas, anyone?
James
June 10th, 2007 at 3:51 am
Thanks for the great tutorial! For the MXML part I had a problem with the MTASC button being greyed out. I fixed it by renaming the file from .xml to .mxml (my mistake) and selecting AS3 from the syntax menu (it was on xml by default). Hope that helps someone.
Zahra
July 11th, 2007 at 11:25 am
Dear Danny,
I would like to use fluorine in C# solution to set up a Tcpchannel. Is there any tutorial to help?
Thanks in advances
Jason Browne
August 16th, 2007 at 9:26 pm
I’ve got to learn AS3 for work, and I don’t have the time to figure out how to get everything all setup. Wonderful tut! Thanx bunches!
Visitor031
August 21st, 2007 at 12:40 am
I have visited your site 381-times
Ronin Sage
August 26th, 2007 at 7:28 am
After doing several hours worth of research into which programming language and IDE would be ideal for my “reborn” game design/development hobby. This tutorial clarified what seemed to be some sort of well-kept secret regarding the setup of FlashDevelop, among other open-source IDEs. Thanks.
conspirisi
September 13th, 2007 at 11:42 am
This tutorial looks really good, any chance of you updating this tutorial for flashDevelop 3?
Radia
September 17th, 2007 at 5:07 pm
thanks for writin gthis
Andrew
September 20th, 2007 at 3:39 pm
Everything works! I am your fan!
Katalog Stron
September 25th, 2007 at 10:07 pm
Thank you. My dream come true to take benefit from AS3 for my 3D Engine, after I have an hour installation due to flex_2_sdk or flex_sdk_2. What an idiot I am … hua ha ha….. A very usefull tutorial…
Meble
September 29th, 2007 at 3:57 pm
Thanks Great Blos in site.. !!
smusa
October 8th, 2007 at 2:26 am
Thanks Danny. I am successfully running this on FlashDevelop 3.0 Beta 3 and Flex 3 SDK. You just have to modify the Flex 2 SDk path variable in the settings. Thanks to James for the xml – mxml trick and Jason for the debugger tip.