Let's start by creating an ActionScript project. The image on the left is a screenshot of how I usually create my folder structure inside an ActionScript project.

Importing an SWC into an ActionScript project

The easiest thing we can start with is importing an SWC from a third party into our project. We can either use Papervision or FisixEngine, as I stated before. Once you downloaded the sources, locate the SWC file and copy it into the "swc" directory, either with Finder if you are on Mac, or with Windows Explorer if you use Windows.

Once the file is placed, go back to Eclipse (or Flash/Flex Builder) and refresh your entire project so that the added file may be taken into account. You may right-click onto the folder and select "Refresh", or simply click on the folder and hit F5 on your keyboard.

On a side note, it is actually a good habit to take to always refresh your project folder when you go back to your IDE after adding files into said project. It will save you some headaches.

Right-click on the project folder and go to "Properties", and then select the "ActionScript Build Path" tab on the left. At the right of that window, click on the button "Add SWC..." and browse to the SWC you just added into your project.

The link type is set to "Merged into code" by default. What this means is that the SWC is added to your code at compile time, adding some size to your project. In the case of third party code libraries, you cannot modify this since they do not provide an SWF to load at runtime (more on this below).

Now all the classes from that are included into that SWC are available to you in your code, and you can get code complete as well. Also, another folder has been added to your project folder, "Referenced Libraries". If you expand this icon, you will see the libraries you imported and all their API.

Creating an SWC from Flash and loading it dynamically

As you can see from the first screenshot in this post, I made a distinction between embedded assets and authoring assets.

What I mean by that is that the embedded assets are visual assets created in Flash, exported as an SWC and merged into the code (as seen in the previous point). The authoring assets are planned to be loaded at runtime, to ligthen the size of my final SWF. Let's see how this goes.

In the embedded assets, I usually just have the preloader, since this is something we always need. In the Flash library, check the properties of the preloader MovieClip. Make sure to check the "Export for ActionScript" box. Also, give it the "Preloader" class name. No association to any .AS file, a simple class. Flash will alert that no class is associated and that it will create one on its own, which is all good.

What this means is that the Preloader class is available to you in code complete in your IDE since you will be able to see it in the Referenced Libraries.

Referenced Libraries:

Since this class you created extends MovieClip, the said class inherits of all the functions and variables. If you were to nest MovieClips into the one created and give them name, they will appear in the autocomplete as well. Quite useful, let me tell you!

ActionScript:

var preloader:Preloader = new Preloader();
addChild(preloader);
trace("preloader.fillMC.width: " + preloader.fillMC.width);

That's all fine and dandy, but it's just a repeat of the previous point. What we need is actually to take some weight off of the filesize, load the assets dynamically and still be able to work as we did so far. Let's first create MovieClips in the authoringAssets.fla with classes names and then export the SWF and the SWC. Then, once you imported the SWC, change the link type to "External". Simply double click on the "Link type" and change it from the combo box.

Referenced librairies:

However in this case it is important that you do not create an instance of these classes before the external assets are loaded, otherwise you would get an error during the compilation.

ActionScript:

package
{
 
import flash.display.Loader;
import flash.display.Sprite;
import flash.events.Event;
import flash.net.URLRequest;
 
public class Main extends Sprite
{
 
private var _loader:Loader;
 
public function Main()
{
_loader = new Loader();
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderCompleteHandler);
var loaderContext:LoaderContext = new LoaderContext(false, ApplicationDomain.currentDomain);
_loader.load(new URLRequest("../assets/swf/authoringAssets.swf"), loaderContext);
}
 
private function loaderCompleteHandler(event:Event):void
{
var whiteSquare:WhiteSquare = new WhiteSquare();
var blackSquare:BlackSquare = new BlackSquare();
blackSquare.x = 32;
addChild(whiteSquare);
addChild(blackSquare);
}
 
}
 
}

The LoaderContext is essential here. What this does is to make sure that once the SWF is loaded, its contents, namely the classes you put in it, are available everywhere in the application. Once the SWF is loaded, then you can create as many instances as you need. If you end up having tons of classes and a huge assets file, at least it's easy to use a preloader to deal with them.

Here are the sources for this tutorial. Thanks to James Paterson for showing me this useful technique!

When I first got into Flash in 1999-2000, I only knew one way to import my assets into Flash: File > Import > Import to Stage/Import to Library. It's actually quite practical, since you can place your elements as you would in Photoshop or Illustrator and create all sorts of MovieClips easily. And it's actually still the best way to create banners and quick projects.

In order to call the attachMovieClip function (remember this was with AS2), an identifier name was given when the "Export for ActionScript" box was checked. After a while, I learned that I could relate ActionScript classes to that specific MovieClip in the library, so I would end up also a class name like com.clientname.ui.SomeClass, a habit I kept until recently, even in AS3.

This presented some inconvenients, mainly beefing up the size of the file. Also, creating variable names in the class that had the same names as in the MovieClip associated to the said class would cause some namespace issues in AS3.

With Flex Builder, now Flash Builder, you can embed image files in your code and make them act as classes (example 1, example 2). Quite useful, but again, it just makes your file size bigger. Having a preloader that would stop the timeline until all is loaded, or having two separate SWFs with one that loads the other, both those two options seemed a bit unclean and inefficient, especially if you eventually want to hand the project to someone else.

There is also the option of loading everything at runtime. And I mean everything, all images, sounds, etc. It's a step towards making the file lighter, but sometimes you do need to edit your assets à la Photoshop, have multiple MovieClips, and basically using the Flash IDE at this point would help. Sure you could recreate everything in code, place all your elements, TextFields, MovieClips and the likes in code, but sometimes you may want to use components too, and I've faced moments where I could create components dynamically. And doing all that just in code is time consuming, and let's face it, this industry is based on efficiency and speed of delivery.

Enter SWC files. These files are either a compiled library of code–just like Papervision or Fisix Engine do–or a compiled FLA file that includes a library of assets built in the Flash IDE. There are different ways to use these files and when possible, it is even possible to load them dynamically.

In the next tutorials, I will show how to use and create these files and how to import and use fonts and CSS. All these things may be basic, but I think it is worth it to summarize all the different ways I have learned about on the web and while working in producton teams.

Let's backtrack a bit. My OS is in French, as I am French Canadian. Whenever I use software that requires that I write (namely MS Word, but also utilities for emails, etc.), I want my software in my native language. However, in the case of programming (and that actually goes for Adobe's Creative Suite as well) I want my software in English. A simple matter of aligning more properly with a lot of tutorials online.

As stated in my previous post, I use Eclipse to program, and my setup is in English. After installing the Flash Builder plugin, I ended up with Eclipse's UI switched to French. Erh... what gives? During the process of installation, I did not chose French at any point.

I uninstalled and reinstalled Eclipse and Flash Builder a couple of times to see where I had gone wrong. Nowhere.

The answer came from a similar question asked on the Adobe forums. The explanation given on the forum is for Gumbo, here is a translation for Eclipse:

1. Exit Eclipse and open the finder and go to the Eclipse install directory
2. Right-click on Eclipse and select "Show Package contents"
3. Navigate to Contents > MacOS
4. Edit Eclipse.ini in TextEdit
5. Below the line "-vmargs", enter "-Duser.language=en" and then "-Duser.country=CA" (or "-Duser.country=US")

The guy on the forum seemed to have the wrong language installed, so instead of asking him to uninstall and reinstall Flash Builder, the Adobe employee suggested this option. Fair enough. However I do not understand why I had to go through the same steps when I decided to install the plugin in English. Why has the plugin decided to take my OS language rather than the one I chose during the installation? As James Paterson says, Flash is surrounded by black magic!

I've been thinking of what to write for my first post, other than "Welcome to this blog". I realized that since I intend to share my work habits and to make some tutorials out of what I have learned the past few years, I might as well present how I work.

I have tried different ways of writing ActionScript over the last years: the Flash IDE (not really efficient), FlashDevelop (is a good start), Flex Builder and finally Eclipse. Ok, the last two are actually the same. Here is why I am now using Eclipse to write my ActionScript projects, and sometimes even other projets.

The Flash IDE is a great visual tool as it merges some parts of Photoshop, Illustrator, After Effects and a code editor. However, try as you might, you can be good at a lot of things, but rarely can you master them all. The code completion in the Flash IDE is less than optimal, I haven't found a way to create snippets and honestly, it's missing many customization options.

FlashDevelop is great. Honestly. But you have to have a Windows system. Ever since I bought my MacBook Pro, I don't have that anymore. Sure I could install Parallels, but I think it's a lot of time wasted in an efficient workflow.

When I started at Sid Lee, I switched to Flex Builder since this is the tool used there. At iCongo, where I worked previously, we were using Eclipse, so I kind of got used to that workflow. After Flash Builder's (or Gumbo's) release, I struggled with some bugs and decided to move back to Eclipse.

I now use Eclipse 3.4 with the Flash Builder 4 plugin. I prefer Eclipse to Flash Builder as the base IDE since Eclipse already includes an XML and HTML editor. Another huge... ok, let me rephrase... HUGE advantage that Eclipse has over FlashDevelop is the fact that Eclipse has a plugin for dealing with SVN, which I think is crucial for teamwork. Oh yea, you can install TortoiseSVN on your machine and deal with SVN separately from your code, but let's face it, that offers more chances for your team to mess the SVN flow.

So, to sum it up, I added the Subclipse plugin to my Eclipse setup.

I also added the FlexFormatter plugin, which allows me to format my code automatically the way i want. Quite useful when you are a neat freak like me.

When working with Java developpers at iCongo, I have seen that they had a tab for tasks, which I found useful. When I code, I may not want to write all the code at once, so I need to sprinkle some reminders along the way. The TODO and FIXME tags are quite useful in that sense. The Flex Builder 2 task extension does just the thing!

Finally, since I started to edit my WordPress blog, I added a PHP extension to my Eclipse.

If I was only work oriented, that would be sufficient. But I like my work environment to look great. I remembered three articles that Lee Brimelow wrote about making your Eclipse look better (Pimp my Eclipse part 1, part 2, part 3). There is a lot of stuff from his articles I did not use, but that could be useful nevertheless.