Part 1: ActionScript projects

When developing graphic intensive applications, many Flash developers combine the two main Flash Platform building tools – Flash Pro and Flex Builder. As the artwork or animations reach a certain level of complexity, it’s usually more efficient and flexible to prepare the visual assets in Flash rather than writing them in ActionScript using the drawing API or a tweening library.

This series is not going to be a how-to-do tutorial, I’d rather like to share with you some of the experiences we’ve gathered in Geewa over the years by developing our games and other applications for our game portal. In the first part of the series, we’ll focus on ActionScript projects (i.e. projects that do not use the Flex framework).

SWC vs. Embed vs. Runtime Loading

Before we dive into the SWC world, let me just quickly compare this technique to the other two options we have when want to deliver Flash assets into Flex Builder – embed and runtime loading.

I should say I can only think of disadvantages when thinking about embed:

·        Above all, the embedded assets can not contain any ActionScript – so it’s not even possible to stop a timeline animation or dispatch an event from the asset.

·        There is no code hinting for the embedded assets. With the SWCs you can by contrast use code hinting not only when instantiating the classes associated with the graphic assets, but also to reference the asset’s first-level children, as long as you have the “Automatically declare stage instances” option in the Flash Pro’s Advanced ActionScript Settings checked.

For highly expressive RIAs, runtime loading of graphic assets may be necessary, since the application would be too large if all the graphics was compiled into one swf. However, even in this case I recommend to use an externally linked SWC. Letting the compiler know about the classes you work with will surely save you from many typos.

Ways to Implement SWC  Assets

Although they seem to be identical, the buttons in the above demo demonstrate three different approaches to create ActionScript components based on the SWC assets. Consider these methods just as model samples – in a real world application you can of course arbitrarily combine the described techniques.You can download the demo source files here.

Method 1 (Green) – Asset Class Extends Component Class

This approach uses inheritance to combine the asset class (i.e. the class associated with the graphic asset) with the component class (i.e. the scripted class that implements the actual logic of the button). It basically consists of the following three steps:

1. In Flex Builder, write your component class (ButtonV1Base) as a subclass of either MovieClip or Sprite.

2. Switch to Flash CS4 and create the corresponding movie clip symbol, associate it with the asset class (ButtonV1) while setting the component class (ButtonV1Base) as the base class.

3. Return to Flex Builder and you are ready to use the button by instantiating the ButtonV1 class.

Method 1 does not use any drawing API, all the graphics is created in Flash. The timeline of the button asset has three frames that represent states of the button (up, over and down). And here is where the things get complicated. In the ActionScript 2 the gotoAndStop()method was perfectly synchronous – after you’ve called it, you got immediate access to the children defined on the target frame. Unfortunately, this is no more true in AS3. In my sample, the movie clip called “pattern” only exists on frames “over” and “down”. The problem is that after you move the playhead from the “up” state to the “over” state, you need to apply color to the pattern clip. However, after calling the gotoAndStop() method, the reference to the pattern clip is not yet available. I’ve tried several workarounds including the ADDED, ENTER_FRAME or RENDER events, but none of these really helped. Try to move the mouse quickly over the green button and you’ll notice that the ADED event (that I eventually used) sometimes comes too late and the  pattern clip thus retains its original black color. The only hack that works (see the blue button) is to hide the pattern clip in Flash authoring by setting its alpha to 0 and then make it visible by ActionScript only after the appropriate color has been applied.

Method 2 (Blue) – Component Class Extends Asset Class

Method 2 is almost the same as Method 1, only the inheritance relationship is reversed:

1. We first create the movie clip symbol in Flash and associate with the asset class  ButtonV2Asset.

2. In Flex Builder, we write the component class ButtonV2 that extends ButtonV2Asset.

3. The ButtonV2 classis ready to be instantiated by ActionScript.

Depending on the specific needs of your project, both methods have their pros and cons:

·        Method 2 is easier to set up – Flash Pro does not have to know the source path of your project since your asset class only extends MovieClip or Sprite.

·        With Method 2, you can rely on code hinting when referencing your component’s first level children, because the asset class automatically generates public properties referencing each named child.

·        On the other hand, by using Method 1 you can instantiate your components not only programmatically but also graphically, which allows you to create containers or even the whole UI of your application in Flash (see the Panel class in the attached demo).

Method 3 (Orange) –Asset Classes Used via Composition

In this method, the component is rather scripted than drawn. Only those assets, that are easier to design in Flash (such as the Pattern and TextFieldContainer in our sample) are created there and then programmatically instantiated by the component class ButtonV3. Other button assets, such as the background or pattern clip mask, are written in ActionScript. The states of the button are based on adding or removing children and redrawing the background. This enables us to elegantly work around the asynchronous gotoAndStop() problem.

Summary

Methods 1 and 2 are better suited to smaller applications or prototypes – components made using these methods are generally less optimized than components based on Method 3, because they usually compose of MovieClips instead of much lighter Shapes. By contrast, Methods 1 and 2 may be more effective, as designing a component in Flash (assumed that you are familiar with it) is often quicker than writing it in ActionScript.

FlexFlashIntegration_AS.zip (146.25 kb)