Flex Files: Tutorial – Flex 3 HelloWorld in FlashDevlop

Flex Files: Tutorial -  Flex 3  HelloWorld in FlashDevlop

I have decided to start exploring the world of developing Flash games outside the Flash CS3/CS4 IDE. This makes sense for me because I rarely use the time line or the drawing tools inside Flash. Also, I am itching to use the Gaming Your Way encryption that Squize created, and it works primarily with Flex apps. I know this has been done before and better else where, but here are the EXACT steps I went through to compile my first Flex 3 Hello World app with FlashDevelop.

Set Up the Environment:
1. Uninstall any previous Flash Players by going by download the Flash Uninstall Utility from Adobe

2. Install the latest version of Java (1.6 included in the Java 6.0 install).

3.Go get the latest version of Flash Develop. Install it on your system. (send them a donation)

4. Go get the Flex 3 SDK (Get the Adobe Flex version, not the Open Source Version).

5.Unzip this into a folder on your system. You will need to point Flash Develop to it, so make it an easy location to remember..

6. Go get the Debug Flash Browsers Player(s) and Projector. They have Mac and Windows projectors as well as IE and Mozilla based browser plug-ins.

If you have any trouble with the Flex SDK install, check out the Adobe Online Help Section.

Set Up Flash Develop To Use the Flex SDK and run swf files:
1. Run FlashDevelop
2. Go to the [tools] ->[program Settings] menu item
3. Click on AS3 Context in the Plug-Ins menu to the left.
4. Set the Flex SDK Location to be the location of the sdk folder on your system

How to create a simple application and set it's properties like you would in Flash.
1. Select [project] >New Project from the menu
2. Select Flex 3 Project from the Actionscript 3 Template Menu
3. Give it a name - mine is called JeffHelloWorld
4. Give it a home folder location on your system
5. Check mark the Create Folder For This Project Option (it keeps everything nice, neat and clean)
6. Click on [ok]

You will see the basic shell of your Application in the Project Panel to the right.
Flash Develop has created some folders for you:

bin/- where your swfs files will be compiled to
src/- where it starts the root of your application source. This has also been added to your class path, so you can start creating packages if necessary in this folder.
lib/- Empty at the beginning.

There is one more folder that is created, but you are not able to see it in the project panel.
obj/ - This holds a wonderful little file called "JeffHelloWorldConfig.xml" which contains all of the Flash IDE - like information about your file. You can edit this by hand, or see the next section. It holds width and height of the swf, background color, and frame rate.

I created one more folder on my own, called assets/ where I plan to put all of the images, sounds, xml, etc that I plan to load in at run time or embed in my final swf.

Before we create any code, there are a few more things to set up:

1. Go to the [project] ->[properties] menu item
2. Here you will see 4 tabs: Output, Class Paths, Build and Compiler Options

Output
target flash player - (9 works for me, 10 does not for some reason, even though it is installed).
Output File Name - Lets you change the name of the output swf and location
Dimensions background color, and frame rate. - These change the obj/JeffHelloWorldConfig.xml file.
Test Movie - Let' s you choose how you want to see the movie when you build with F5. Play In External Flash Player works best for me.

Class Paths
This allows you to add and delete class paths. The src folder is added by default.

The Build and Compiler Options give you the option of customizing the build process. I am not advanced enough with the process to understand how to utilize these yet.

Code the Simple Application
1. Right Click on the src folder in the project panel and select ADD >New Class
2. Call it what ever you like. I called mine Main.as
3. Set Main.as to be the class that runs by default by right-clicking it in the project panel and selecting ALWAYS COMPILE.
4. Double-Click the Main.as file to open it, and drop in the code below (or what ever you want to put in).
5.
Remember, you are no longer controlling a main time line with a document class, so you will need to import classes such as flash.text.TextField to use them.
[cc lang="javascript" width="550"]
package{
import flash.display.Sprite;
import flash.text.TextField;

public class Main extends Sprite{

public function Main(){
trace("main started");
stage.stageWidth = 100;
stage.stageHeight = 100;

var textlabel:TextField = new TextField();
textlabel.x = (stage.stageWidth - textlabel.width) / 2;
textlabel.y = (stage.stageHeight - textlabel.height) / 2;

textlabel.text = "Jeff's Hello, World!";

addChild(textlabel);
}
}
}
[/cc]

Press F-5 and you will see the compiler attempt to create swf and display it in your chosen output medium.
Notice that Trace Actions as well as compiler messages occur in that output window below..

That's it!!

For further information, please check out TheYAK.net's awesome set of tutorials on the subject.