This tutorial will guide you through the steps of creating a simple ActionScript component and compilling it into a SWC file.

Installing the SWC Export Plugin

The plugin installation is a piece of cake. Download the plugin from here, unzip the ExportSWC.dll file and place it in FlashDevelop’s Plugin folder. (If you don’t know where to find this folder go to the “Tools” menu and click on “Application Files…”.) After restarting FlashDevelop you should see a new icon in the toolbar:

Sample Project: A Status Component

You will be creating a simple status component as a sample project. It displays different icons according to the status set. As for the icons, I’m using two icons from the free “Silk” icon set which can be found on www.famfamfam.com:

The first icon is supposed to represent an “OK” status, and the other one signals an “Error” status. (For example, you could use this component as an item renderer in a Flex DataGrid for displaying the status of the listed items.)

Setting up the FlashDevelop Project

Create a new project in FlashDevelop and select “ActionScript 3 / Default Project” as template. Call the project “StatusComponent” and save it. If you look at the project panel you will notice that FlashDevelop has already created two folders (bin and src) and a class file (Main.as) for you. Please make sure that the src folder is the only folder in your classpaths settings:

Now follow these steps:

1. Create a third folder on the same level as the bin and src folders and call it assets.
2. Copy the two icon files into this new folder.
3. Under the src directory create a hierarchy of three sub directories: com/log2e/components. (I’m using my domain name here, you can name them whatever you like, of course. But it’s considered good practice to organize your class packages with the help of unique names such as domain names.)
4. Finally, move the class file Main.as into the components folder and rename the file to StatusComponent.as.

Your project panel should look like this now:

Now open the StatusComponet.as file.

The ActionScript Code

I’m posting the complete class code first, and then I will go through the code step by step.

Line 1: The package definition reflects the directory structure we created below the src folder.

Lines 3-4: We only need Sprite and Bitmap as display objects.

Line 6: Since we are creating a visual component the StatusComponent class extends Sprite.

Lines 8-10: The three constants hold the status definitions as strings. They are accessible from outside the component (for example, StatusComponent.STATUS_OK).

Lines 12-15: The two [Embed] metadata tags include the two icons in the SWF and SWC files at compile-time. Instances of the embedded assets can be created by the standard new syntax.

Lines 17-18: The two private variables hold the current status information and the displayed icon.

Lines 20-22: When a new instance of the component is created the constructor sets the initial status to unset.

Lines 25-28: The getter method for the status property.

Lines 30-50: The setter method for the status property. This method not only updates the private _status property, but also removes the currently displayed icon from the display list and instantiates a new icon according to the status set.

Exporting the SWC File

All the hard work is done. The SWC file is only a mouse click away. Of course, you can test the component first by hitting F5. In this case you should modify the constructor and set the initial value to STATUS_OK or STATUS_ERROR, otherwise you will only see a blank canvas when you publish the movie. For the release version of the component set the initial value back to STATUS_UNSET. Now click on the new “Export SWC” icon and the magic happens right in front of your eyes…

If everything went ok, you will see a new file in your bin folder:

If you tested the component (like I did) you also have the SWF file in the bin folder. Actually you can delete the StatusComponent.swf file now, it’s no longer needed.

Using the StatusComponent

For a quick test of the component create a new default ActionScript 3 project in FlashDevelop, call it “StatusComponentTest”, and make the StatusComponent.swc file accessible to your project by adding its path to the new project’s classpaths. The project panel should look like this:

Now this is important: Right-click on the StatusComponent.swc file and select “Add To Library”. Otherwise the class(es) in your SWC file will not be recognized.

Here’s a simple test class (StatusComponentTest.as) that instantiates the component and sets the status to STATUS_OK. The trace() statement sends the string value of the current status to the output panel.

I hope you enjoyed the tutorial.