AS3:FlexAndFlashCS3Workflow

From FlashDevelop

Jump to: navigation, search

Contents

Create a FlashDevelop project:

FlashDevelop offers two pure AS3 templates:

Tip - 'Package' field in the New Project dialog:

Some projects will automatically create a main class for you - if you fill the "Package" field the appropriate directories and declarations will be created.

It is recommended to give a unique package to each SWF you create - this prevents classes "collisions" when building modular projects.

Organize your project

Keep classes and FLAs in "src", publish FLAs in "lib" and the project SWF output in "bin" (or "deploy").

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

About SWCs:

SWCs are pre-compiled classes. So a SWC is just like another path in a project classpath: it contains classes, they can be imported, extended, etc like any other class. When Adobe Flash Professional exports a SWC it includes all the library exported symbols, and you can use these symbols in your code.

Create the 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.
  • Note that you can freely specify a package name for symbol classes (ie. assets.MySymbol) instead of having everything at top level.

OPTION 1: custom class extending library symbol:

Why "MySymbol_design"?

Because MySymbol_design will be the graphical layer (or view) of a MySymbol that we will create later in FlashDevelop. You will not instantiate the symbol class but your custom class.

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.

OPTION 2: library symbol extending custom class:

Why "MySymbol_base"?

Because MySymbol_base will be the base class of a MySymbol. You will instantiate the symbol class and not the base class.

Export the symbols for ActionScript:

Link the SWC to your FlashDevelop project

Now each time you will publish the FLA, changes will be automatically picked up by FlashDevelop. Any symbol's class you will export in the FLA will be available in your code, as if it was a regular custom class.

Writing the classes

Now it's time to go back to FlashDevelop and create classes using the SWC symbols:

Let's say we have a symbol exported as MySymbol_design, there are 2 options for linking the symbol in your code: 

// 1. inheritance (compact but can be confusing)
package 
{ 
  public class MySymbol extends MySymbol_design
  {
    public function MySymbol()
    {
      trace("I'm a MySymbol instance called", name);
    }
  }
}

// 2. composition (safe choice)
package 
{
  import flash.display.Sprite;
  
  public class MySymbol extends Sprite
  {
    private var design:MySymbol_design;
    
    public function MySymbol()
    {
      trace("I'm a MySymbol instance called", name);
      design = new MySymbol_design();
      addChild(design);
    }
  }
}

Targeting symbols properties and children symbols

A very poweful feature of the SWC technique is that the symbols classes have very interesting properties.

Children elements:

Let's add an child element to MySymbol_design. Put a TextField on MySymbol_design stage, and name it "txtLabel".

Now MySymbol_design classes instances have an new "txtLabel" (type TextField) property!

Timeline code:

Let's add an action layer to MySymbol_design. Write some code like: 

var text:String;
function showText():void {
  txtLabel.text = text;
}

Now MySymbol_design classes instances some new "text" (types String) and "showText" (function():void) properties! 

// 1. inheritance (compact but can be confusing)
package 
{ 
  public class MySymbol extends MySymbol_design
  {
    public function MySymbol()
    {
      trace("I'm a MySymbol instance called", name);
      // properties inherited from MySymbol_design
      this.text = "some text";
      this.showText();
      this.txtLabel.x += 100;
    }
  }
}

// 2. composition (safe choice)
package 
{
  import flash.display.Sprite;
  
  public class MySymbol extends Sprite
  {
    private var design:MySymbol_design;
    
    public function MySymbol()
    {
      trace("I'm a MySymbol instance called", name);
      design = new MySymbol_design();
      addChild(design);
      // custom properties of design
      design.text = "some text";
      design.showText();
      design.txtLabel.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 design.txtLabel is undefined 
design.txtLabel.x += 100; // throw an exception
if (design.txtLabel) design.txtLabel.x += 100; // ok

Writing the main class

When working with Flex you must create a main class. This will be the "entry point" of the SWF: 

package
{
  import flash.display.Sprite;
  import flash.events.Event;
  
  public class Main extends Sprite
  {
    public function Main():void
    {
      if (stage) init();
      else addEventListener(Event.ADDED_TO_STAGE, init);
    }
    
    private function init(e:Event = null):void 
    {
      removeEventListener(Event.ADDED_TO_STAGE, init);
      // entry point
      addChild(new MySymbol());
    }
  }
}
Entry point is always public

The main class must be a public class extending (at least) flash.display.Sprite

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.

Another sample project, using Adobe Flash Professional interface components:

Retrieved from "http://www.flashdevelop.org/wikidocs/index.php?title=AS3:FlexAndFlashCS3Workflow"
Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox