With the fully object oriented nature of ActionScript 3.0, it is more important to have a means of managing multiple ActionScript files. Flash Project files are a good step in the right direction. You still have to deal with some frustrating deficiencies in the Flash authoring environment, but it is a huge improvement compared to working without. This article will walk you through setting up a Flash project, and how to set up your classes and packages appropriately. This is a pretty basic article, but it should help you get started creating and working with projects. All of the instructions are for Flash CS3 Professional, but they should be identical or similar for other versions.
Starting Out
After you have opened Flash, you will want to create a Flash project. Set up a directory where you will be working for your project. I generally keep the project file (flp) in the root directory. The flp file is nothing more than a simple file that tells the Flash environment what files to make available for easy browsing etc. It also includes any information about source control connections. An flp can connect and work relatively well with common source control programs such as Visual Source Safe. If you are used to the complete integration you get with Visual Studio and VSS, you will be slightly frustrated with Flash, but it is better than nothing.
To create your flp file, click on File->New and choose Flash Project. The dialogue will ask you where you want to create the project. Choose your directory and give the project a name.
In order for the flp to have any real meaning, you will need at least one Flash file (fla) that is set as the default. So first off, lets create a flash file (ActionScript 3.0). Save that file in the root of your project directory. Once you have created your fla file, add it to the project. To do this, you will want to make sure that the Project palate is open. To open it, click Window->Project, or press F8.
The Project palate displays the contents of your project in a tree structure.
Click on the page-like icon on the top left and select Add File. Browse to the fla you just saved and add it. Now right click on that fla file and select Make Default Document. This provides you with a nice feature, that is enough to use an flp by itself. From now on, if you have the fla file open, it will always run if you hit ctrl-enter on the keyboard. You can have your focus on an ActionScript file and still run the project immediately. Without using an flp, you have to switch focus to the fla to run it every time. I usually open the fla file and minimize it.
IMPORTANT: The file structure displayed in in the Project Window is whatever you define it to be as you create the project there. It has nothing to do with the folder structure of any location on your computer. It is best practice to create folders in your project that correspond to folders on your computer, and to keep files in your project in the same location as they are found on the computer. However, there is absolutely no connection between a file you can browse through the Flash Project palate, and its location on the computer. This means that saving a file in a directory on your computer will not make it show up in the Flash Project palate. What you can or cannot browse in the Project palate also has no bearing on what is or is not used when you publish your swf. The Project palate is basically a single convenient place to access files in flash.
Creating Classes
I like to develop flash applications more like a traditional application than a lot of developers will do. You can incorporate timeline driven behavior through symbols in the flash library etc, but I don't like to have lots of ActionScript spread around timelines etc. I usually create a parent class that basically runs the application. It utilizes child classes to then take care of each aspect of the application.
So usually, my main fla file will have a library with symbols and other resources, and a few lines of code, something like the following:
import classes.MyApplication;
var myApp:MyApplication = new MyApplication();
this.addChild(myApp);
myApp.run();
A few other tricks may be necessary to do things like read from the query string and initialize the parent application accordingly, but my fla files will rarely have more ActionScript than this anywhere in the actual fla.
In this example, you will want to create a file folder on your computer called "classes". This folder should be in the same directory as the fla and flp files. Inside that folder you would save a file called MyApplication.as. Then add a folder to your flp called the same name, and add the file inside that folder.
Your MyApplication class could look like the following:
package classes
{
import classes.myTools.*;
import flash.display.Sprite;
public class MyApplication extends Sprite
{
private var myTool:ToolOne;
public function MyApplication()
{
this.graphics.beginFill(0xFF0000,1);
this.graphics.drawRect(0,0,100,100);
myTool = new ToolOne("red");
this.addChild(myTool);
}
public function run()
{
myTool.doSomething();
}
}
}
This is a very trivial and useless class, but it demonstrates a few things. First it shows how you would extend an existing DisplayObject class such as a Sprite. About 95% of the classes that I write for a Flash application extend the Sprite class. If you need timeline functionality then you should use the MovieClip class. The Sprite is leaner than the MovieClip and provides all the functionality other than the timeline stuff you get in a MovieClip.
The second thing this leads us into is how to set up child packages. The import classes.myTools.* means that the system will look for a myTools directory inside the classes folder on your hard drive. (Remember not to confuse hard drive file location with a flash project's displayed structure.) The system will then include, and provide programmatic access to all the classes defined in that directory. They do not have to be part of the flp so long as they exist in the right location on the hard drive. As has already been mentioned, it is strongly recommended to keep the flp's organization matching the file structure exactly to avoid confusion.
So let's get started by creating the ToolOne class. Create a folder inside the classes folder called myTools. Then create an ActionScript file called "ToolOne.as".
IMPORTANT: Remember that in ActionScript, the name of the file and the name of the class defined must match.
Now you could write a class as follows:
package classes.myTools
{
package classes.myTools
{
import flash.display.Sprite
public class ToolOne extends Sprite
{
private var col:String;
public function ToolOne(c:String)
{
col=c;
this.graphics.beginFill(0x0000FF,1);
this.graphics.drawCircle(0,0,5);
}
public function doSomething()
{
trace("color passed in to me:"+col);
}
}
}
}
Again there is nothing spectacular here, but you see a working example how to organize your classes. Note that the package path above needs to match the directory structure on the computer relative to your project's root. It is also worth noting that general practice is to have package names be camel-case (eg myTools or myHappyDayToolForBob), and have actual classes be the same except the first letter always capitalized (eg ToolOne or MyHappyDayToolOne).
At this point, you are ready to run your project. If you either hit the test project button, or hit ctrl-enter (assuming the fla is still open), you should get a swf that has a red square and a blue circle. It will also display "color passed into me: red" in the output window.
Final Thoughts
The example here is obviously useless, but it should walk you through how to get a simple project set up, and give you the basic principles needed to set your classes up. If you apply these basic principles correctly, the Flash Project becomes a very handy tool to keep organized while building complex, enterprise-level applications that utilize a broad library of classes and tools.
