AS3:FlashCS3Workflow
From FlashDevelop
Tutorial: ActionScript 3 development using Adobe Flash Professional and FlashDevelop. See also: ActionScript 2 tutorial.
Contents |
Create a FlashDevelop project:
- create an "AS3 Flash IDE project" in FlashDevelop,
- note that you can create this project near an existing FLA file, it will not add any file (also FlashDevelop will never remove your existing files).
Organize your project
- we suggest you separate the source and the published elements,
- so create 2 folders in your project: "bin" (or "deploy") and "src" (sources),
- open the project properties,
- go to Classpath tab,
- add "src" in the classpath (<Add Classpath...>).
Keep classes and FLAs in "src", publish SWFs in "bin" (or "deploy").
Tip - enabling code completion for Adobe Flash Professional "fl" classes:
|
Create an Adobe Flash Professional document (the "FLA")
- start Adobe Flash Professional (you can press F6 in FlashDevelop),
- create a new AS3 Flash document,
- save the FLA in the "src" folder of the project,
- open the publish settings (Formats tab) and change the publish target to "../bin/theswfname.swf" so it will be generated in the appropriate directory.
Configure the FLA
- open the FLA in Adobe Flash Professional,
- open the document's Publish Settings > ActionScript 3 Parameters
- uncheck "Automatically declare stage instances".
| This setting we changed is VERY important:
This is needed if we want to have code completion for elements on stage. It means that we want to declare manually, in our classes, the elements on stage. Note that you must declare all elements which have an instance name. |
Define the Document and symbols classes
The Document Class:
- the Document class is the class associated with the main timeline (ie. the main class),
- define the document class (ex: "SampleProjectMain") in the Publish settings or in the Properties panel (click on Flash stage's background to have the document properties).
Create a few library symbols choosing their name carefully:
- A recommended practice is to name the symbols like their corresponding class (ie. MySymbol).
- If a symbol contains other symbols, these children symbols names should be a combination of the parent symbol classname (ie. MySymbol_background) - this makes it easier to understand relations between symbols.
| Tip - difference between symbol and class
Technically in AS3 every symbol automatically has an associated class (symbols are never manipulated directly), but by default these classes have weird names, so we must give them a fixed class name that we will be able to import in our code. |
Export the symbols for ActionScript:
- right-click on the symbol in the Library panel, select "Linkage..." dialog,
- check "Export for ActionScript" and fill in the class name (ie. MySymbol),
- do not change the base class (ie. flash.display.MovieClip).
| Tip - Flash tells a class does not exist:
When you associate a document or symbol to a non-existent class, Flash will warn that the class does not exist and that it will generate a default class automatically. This is not an issue, you can create a custom class of the same name at any moment. |
Writing the classes
Now it's time to go back to FlashDevelop and create the corresponding classes:
- select in the project tree the directory where you want to create a class,
- then right-click: Add > New Class...
- enter the class name (without the package, it will automatically be added in the generated class).
| Tip - what is this @author DefaultUser?
First time you create a class you should see this in the class comments: /** * ... * @author DefaultUser (Tools -> Custom Arguments...) */ Custom Arguments are application variables that you can set in FlashDevelop and use in templates:
PS: try to always add a description of the general "role" of the class in this first comment block (in place of the "..."). |
Let's say we have a symbol exported as a MySymbol class:
package
{
import flash.display.MovieClip;
public class MySymbol extends MovieClip
{
public function MySymbol()
{
trace("I'm a MySymbol instance called", name);
}
}
}
Tip - about document and symbol's classes:
PS: of course this doesn't apply to images which must eventually extend flash.display.BitmapData. |
Declaring elements on stage
If, as recommended earlier, you unchecked "Automatically declare stage instances" in the FLA publish settings, we have to explicitly declare this element in the parent container class (if it has a custom class), no matter which frame this symbol appears.
For instance, put a MySymbol instance on the main timeline, call it "mySymbol". We must declare it in the document class:
package
{
import flash.display.MovieClip;
public class SampleProjectMain extends MovieClip
{
public var mySymbol:MovieClip; // dynamically typed
//public var mySymbol:MySymbol; // strongly typed
public function SampleProjectMain()
{
trace("I'm the document");
if (mySymbol) mySymbol.x += 100;
}
}
}
| Tip - about elements visibility:
Elements must be declared as public, this is mandatory for symbol instances on the timeline. Any other declaration (internal, protected, private) will fail. Period. |
Adding "timeline code"
Although some people consider this is a bad practice (addFrameScript() can be used to avoid it), I think it's perfectly ok to add a little bit of code in the timeline as it will make your class much lighter.
For instance, if a symbol (or the main timeline) is a multiframe animation, and if you want to know when it has reached a particular frame:
- add an "action" layer,
- create a blank keyframe in the timeline (for instance the latest),
- write in the frame actions:
lastFrame();
- now in the symbol's class (or document class if you're on the main timeline) declare the lastFrame() method:
package
{
import flash.display.MovieClip;
public class SampleProjectMain extends MovieClip
{
public var mySymbol:MovieClip; // dynamically typed
//public var mySymbol:MySymbol; // strongly typed
public function SampleProjectMain()
{
trace("I'm the document");
}
public function lastFrame():void
{
trace("we reached the last frame");
if (mySymbol) mySymbol.x += 100;
}
}
}
| Tip - AS3 is not as tolerant as AS1/2:
Be careful to always check that the element you manipulate are not null: // is AS3, if mySymbol is undefined mySymbol.x += 100; // throw an exception if (mySymbol) mySymbol.x += 100; // ok |
Download a sample project
This tutorial is available as a sample FlashDevelop project:
PS: in the sample project, classes are "packaged". A package is a unit where you gather classes from a common project or common role.
