Building the FLA-editable Flash component

I found this part of the project pretty exciting. I knew that Flash CS3 components could be editable on the Timeline because I'd used a few of the ones that come preinstalled with Flash. But when I started searching for documentation on how to do it, I was quickly frustrated. There is very little information available on how to create Flash CS3 editable components, and it involves a mystical object known only by the somewhat ambiguous name of "ComponentShim."

Fortunately, I stumbled upon Spender's post on FlashBrighton, Creating FLA-based components in Flash CS3. That tutorial taught me the basic process of utilizing the component shim, so I started trying to convert my video player into an editable component.

Step 1: Add UIComponent to class paths

Your component will have to extend the UIComponent class. In order for your project to extend that class, you must add that class path to your document settings. Select File > Publish Settings, click the Flash tab, and with ActionScript 3.0 selected in the ActionScript Version drop-down, click Settings. This opens the ActionScript 3.0 Settings dialog box (see Figure 15).

Figure 15. ActionScript 3.0 settings

Click the "+" button to add a new class path and insert the following:

$(AppConfig)/Component Source/ActionScript 3.0/User Interface

For more information on the UIComponent, see the Class UIComponent entry in the Flex 3 Language Reference.

Step 2: Extend UIComponent

I needed a class that extended the UIComponent, so I created a new class called ABMP_flc.as:

package com.almerblank.ABMP.shell {
   import fl.core.UIComponent;
   import flash.display.*;
   import com.almerblank.ABMP.*;
   import com.almerblank.fl.utils.events.*;
   public class ABMP_flc extends UIComponent {
      public function ABMP_flc(){
      }
      private var _player:Player;
      protected override function draw():void
      {
         init();
      }
      protected function getSkinName():String
      {
         return "ABMediaPlayerFlashComponentSkin";
      }
      private function init():void
      {
         _player = new Player();
         addChild(_player);
      }
   }
}

Step 3: Build an avatar

Create a new movie clip in your library called Avatar. On frame 1, draw a rectangle with x = 0 and y = 0. Make the height and width whatever you want to be the default for the component. The rectangle should have a hairline stroke (for scaling) and no fill.

Step 4: Link a movie clip to the class that extends UIComponent

Add a new movie clip to the library. I called mine ABMP_flc. Now link it to the class you wrote earlier in Step 2. Right-click the movie clip in the library, check the Export for ActionScript and Export in First Frame check boxes. For Class, enter the path to the class you wrote. Leave Base Class as flash.display.MovieClip. I'll call this the component MovieClip.

Edit this new component MovieClip. On frame 1, add an instance of the Avatar MovieClip at 0,0. As I learned from Spender's post, UIComponent uses this instance to set its default width and height, and then removes it from the display list immediately. It does this only for the DisplayObject at index 0, so you don't want any other display objects on this frame.

Step 5: Make the designer's life easy

Once you complete this component and someone uses it in a Flash app, all of the library assets from your component will be added to that FLA file. These are the assets that your designer needs to update and redesign the app. Instead of forcing your designer to hunt around the library to find all the movie clips and graphics that you use and update them one at a time, create a guide that facilitates this process.

If you read Spender's post, you'll see how you can do this using a dedicated skins MovieClip for this purpose. However, I found it easier simply to place a guide layer on frame 1 of the component MovieClip and include all the component assets in that guide (see Figure 16).

Figure 16. Guide layer for all the component's assets

To do it this way, insert a new layer in the component MovieClip, right-click the layer, and select Guide. Drag all the assets you want to the layer. Layout and positioning and parent-child hierarchies do not matter. Since this is a guide layer, it will not be included in what is published from Flash.

Step 6: Create a component definition

Right-click the MovieClip component in your library and select Component Definition. Next to Class, assign a class name for this component and click OK.

Now I show you how to handle the final step of preparing an editable Flash CS3 component: using the component shim.

Page 5 of 7

Previous Page

Next Page