AS3 Compiling a program

<pageby nominor="false" comments="false"/>

Introduction

This article is part of the Actionscript 3 tutorials.

There are potentially three ways to compile your first actionscript program:

1. Compiling with the binary mxmlc included in the free Flex framework.
2. Compiling with Flex Builder
3. Compiling with the Flash CS3 Authoring tool

Compiling an AS3 program with the Flex SDK

Here, we will describe how to compile with mxmlc. This assumes that your Flex framework is properly installed. For information on how to install it on the Adobe Flex page.

Open a text editor, a simple one that will save the text as it appears on the screen, without any formatting. In that new text file, copy the following code:

 package  {

   import flash.display.Sprite;

   public class FilledCircle extends Sprite {

       function FilledCircle():void {

         var circle:Sprite = new Sprite();
         circle.graphics.beginFill(0xFF794B);
         circle.graphics.drawCircle(50, 50, 30);
         circle.graphics.endFill();
         addChild(circle);

       }
    }
 }

Save the file as text and give it the name of "FilledCircle.as". Take good note of the directory in which you save that file. Preferably, put it in a folder quite high up in the hierarchy. We will assume that the file is stored somewhere defined by "\path\to\file\".

On a mac

1. Open a terminal window. Terminal is an application like any other. To find it, go to the Applications -> Utilities. You should see Terminal.app among the files.
2. Double click on the application to open it.
3. At the prompt, type:

 cd \path\to\file\
 mxmlc FilledCircle.as

On a PC

1. From the Windows start menu, open a command prompt by choosing Start > All Programs > Accessories > Command Prompt.
2. At the command prompt, change to the C:\Flex SDK 2\bin directory then execute the mxmlc executable on your actionscript file.

 cd C:\Flex SDK 2\bin
 mxmlc C:\path\to\file\FilledCircle.as

The mxmlc executable will compile the program and generate a .swf file name FilledCircle.swf. To run the file, open it in the Flash Player on your desktop or in a web browser that has Flash Player installed. Note that Flash Player 9 needs to be installed to view swf files generated by the Flex compiler.

AS3 programming with Flash CS3

You may add AS code to any frame as explained in the Flash tutorials. However if you want to code AS 3 for real, e.g. with a class structure, you can use the following "how to". See also Adobe's explanation.

Edit an AS3 program with Flash CS3

If you want, you can edit AS3 programs with Flash CS3. This is an alternative to using a text editor.

To create a new File:

1. Open Flash CS3
2. Select menu New"; Select "ActionScript file" (or alternatively select from the panel that appears when Flash CS3 loads).

You will use the same editor as the one you may be familiar as a Flash Designer (F9). All usual Flash panel will be greyed.

• Menu File->Import Script will let you import a a script if needed. Else you can just copy/paste code from this wiki. E.g. copy the FilledCircle code from above.

To edit an existing AS File:

• Just open it with the File menu

You can not compile a file this way, only edit it. So move on ...

Compiling an AS3 program with Flash CS3

Let's assume that you created a file FilledCircle.

Here are the steps to compile an ActionScript program that is based on a class structure like in the Action Script 3 tutorials.

1. Create a new Flash file: Menu File->New->Flash File(ActionScript 3)
2. This new *.fla should be in the same directory as your ActionScript file.
3. In the Properties tab of the Property inspector enter the class name of the primary class of your AS3 code. E.g. FilledCircle
4. Save this little change !
5. Test the movie. This will automatically create the *.swf file.

Example

• We created an Actionscript 3 file called FilledCircle.as
  • It contains the class FilledCircle defined above
• We then created a new Flash filed called FilledCircletest.fla
  • In the Document class^ field of the properties panel we entered FilledCircle
• Note: You now also could edit the AS code again by clicking on the little pen next to the Document class field.

Here is a screendump:

Document class: Importing AS3 code into a fla file