Melbourne Content Management and Flash developers

This tutorial tells you how to use Flex Builder 3 to code the ActionScript 3 to be used in your Flash CS3 file.

We will create the Flex Builder project first, then create the Flash project that will reference the Flex Builder code.

Create a new Flex Builder project

1. Start Adobe Flex Builder 3, create a new ActionScript project
   
2. Type in the project name. We will use "Test" here.
   Note the location (you may change it if you wish), we will create a Flash project in the same location later.
   
3. (If you need to import some existing modules, you can click Next at this step, see the Part 2 video here)
   Click Finish
4. Right click on the new project (Test) and select Properties
   
5. In ActionScript Compiler, uncheck "Copy non-embedded files" and "Generate HTML wrapper", because we don't need them.
   
   
6. Click OK. If you get a warning to delete 'html-template' folder, click OK.

Create a new Flash file

1. Start Adobe Flash CS3, create a new Flash File (ActionScript 3.0)
   
2. File - Save As... Save it to the same folder as your ActionScript project above, and type in the filename ("Test.fla" here).
   
   
3. Go to File - Publish Settings, and uncheck HTML, because we don't need it.
   
4. Select the Flash tab, and click Settings next to ActionScript version
   
5. Uncheck 'Automatically declare stage instances'.
   This is because we will have to declare them manually in the ActionScript file in Flex, where we will do the coding.
   
   Click OK and OK to close the settings.
   
6. Now in the Properties window of the document (if you can't see it, hit Ctrl + F3), type in the document class "Test".
   
   Note that this class name is the same as the ActionScript filename we created (which is Test.as).
   So now we have Test.as and Test.fla in the same folder.
   
7. Save it.

Doing the coding

Now Test.as contains the ActionScript code that is used in Test.fla. Let's see it working.

1. Back to Flex Builder, let's put in some code into the Test.as file.
   Type in this code in the constructor:
   
   trace("Welcome to Yart!");
   
2. Save it
3. Go back to your Adobe Flash CS3 (Test.fla), hit Ctrl + Enter to compile and run it.
   You should see the output
   

More complex example

Here we will look at how the ActionScript code could interact with Flash stage instances.

1. In Flash, let's create a Dynamic Text on the stage, and give it a name "test_txt"
   
2. Remember we unchecked "Automatically declare stage instances"?
   Now go to Flex Builder and declare it there.
   Just before the constructor, type in:
   
   private var test_txt: TextF
   Hold on! Did you see the intellisense come out and suggest TextField for you?
   
   If you select TextField on the popup intellisense (using Enter or mouse click), Flex Builder will automatically import the necessary class for you.
   
   Otherwise you will have to type in the import code yourself!
   (To force the intellisense to pop up, press Ctrl + Space)
3. Now in the constructor, type in
   
   test_txt.text = "Welcome to Yart!";
   
4. Go back to Flash CS3 (Test.fla) and hit Ctrl + Enter to compile and run it.
   You should see the result on Test.swf!
   
   Congratulations! You can now build a Flash SWF file and do the coding using Flex Builder!