AS3:FlashCS3Workflow

From FlashDevelop

Jump to: navigation, search

Tutorial: ActionScript 3 development using Adobe Flash Professional and FlashDevelop. See also: ActionScript 2 tutorial.

Contents

Create a FlashDevelop project:

Organize your project

Keep classes and FLAs in "src", publish SWFs in "bin" (or "deploy").

Tip - enabling code completion for Adobe Flash Professional "fl" classes:
  • open the project properties,
  • go to Compiler Options tab,
  • add Library\AS3\frameworks\FlashIDE in the Intrinsic Libraries list.

Create an Adobe Flash Professional document (the "FLA")

Configure the FLA

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:

Create a few library symbols choosing their name carefully:

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:

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:

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:

  • in the main menu, select Tools > Custom Arguments,
  • replace the DefaultUser's value by your name.

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:
  • classes must be declared public,
  • usually your classes will extend flash.display.MovieClip,
  • but you can choose to extend flash.display.Sprite (the symbol timeline will be disabled!),
  • or extend any other user class extending at least flash.display.Sprite.

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:

lastFrame();
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.

Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox