Creating ActionScript 3.0 components in Flash – Part 1: Introducing components

I wrote this series of articles to provide instructions and present techniques required to create ActionScript 3.0 components in Adobe Flash CS3 Professional. After following along with this series, you will learn how to do the following:

• Set up the layers and frames in your component movie clip symbol
• Implement Live Preview for your component
• Dispatch events
• Support styles and easily editable skins
• Manage drawing with the invalidation model
• Manage focus
• Handle keyboard input
• Create a compiled clip shim for your ActionScript definitions
• Deploy your component to the Components panel

For the purpose of this series, I focus on creating components modeled after the Flash CS3 User Interface components. These components all leverage shared base classes and other classes—which I refer to as the "User Interface Component Infrastructure."

There's a lot of functionality in the Infrastructure that makes the process of creating a component faster and easier. Additionally, there are many conventions that, if followed correctly, can make new components compatible with the User Interface components. However, there is a lot to know about using and extending the Infrastructure's APIs. In order to offer a comprehensive overview, I've dedicated the majority of this article to working with these APIs.

Creating a FLA-based editable component, built in the same style as the User Interface components, is the primary focus of this series. But I will briefly cover how to create a SWC-based, non-editable component as well.

Formatting conventions

In this series, I've formatted code snippets and references to a specific package, class, function, or property by name with a fixed-width font, like this:

You'll notice that not every reference to the TileList component, for example, is formatted this way. This is because references to the Library symbol TileList are not formatted using the same font. The component TileList is comprised of the Library symbol named TileList and the ActionScript class fl.controls.TileList, which is tied to the Library symbol.

Convention dictates that the class name and symbol name should be identical, and following this convention greatly simplifies and facilitates project organization, but they do not necessarily have to be the same. For example, a symbol named Foo could be exported for ActionScript as the class Bar. So when you double-click the symbol on the Stage to edit it, you are editing TileList, but when you change its properties by writing code, you are accessing an instance of fl.controls.TileList, or TileList for short. This can be a little confusing, but my hope is that the formatting will make things less confusing.

Sidebar

You'll also notice some text set apart in a sidebar like this. When I discuss more esoteric technical details that will be illuminating to some and befuddling to others, or when I discuss more complex examples, I set the text apart in this way.

You may find this series more digestible—at least upon the first read—if you skip these sidebars for now. Some of this material covers in-depth topics that might make more sense after you have completed the series and have had some experience working with components. At that point, you might find it helpful to review the series again and focus on the more advanced areas of interest.

Now that I've clarified the formatting conventions used in this series, let me discuss what a component is and what it does.

What is a component?

A component is generally a user interface widget, like a button, a checkbox, or a menu bar. Rather than having to write all the code and create all the art for these widgets yourself, you can simply drag components into your FLA file.

Flash developers can manipulate a component with ActionScript, but in many cases it is also possible to configure them by setting parameters in the Property inspector. Components do not have to be simple user interface widgets, and some can be quite complex, like the FLVPlayback component that plays videos or the DataGrid component that presents a table of data.

Among the different versions of Flex, Flash, and ActionScript, there are many different ways to define what is a component. In this series, I'm almost exclusively discussing ActionScript 3.0 components that are created and used in Flash CS3. In the context of Flash, a component is a movie clip or compiled clip that the Flash developer can drag out of the Components panel into a FLA file. The movie clip should be exported for ActionScript and also should expose parameters that can be set in the Parameters tab of the Property inspector or in the Components inspector.

Live Preview

A component has Live Preview, which means it adjusts proportionately in response to changes in width and height (instead of simply scaling like most shapes and symbols). It also updates itself to reflect parameters set by the Flash developer, such as dataProvider, label, or visible.

Authoring the Live Preview support for Flash CS3 ActionScript 3.0 components is actually quite similar to authoring the Live Preview support for ActionScript 1.0 and 2.0 components. It is important to note that when I discuss Live Preview in ActionScript 3.0 components, it is not related to the design view preview supported by Flex Builder 2.

User Interface Component Infrastructure

The User Interface components included with Flash CS3 are built upon what I will refer to in this series as the "User Interface Component Infrastructure." The Infrastructure consists of the classes defined in the fl.* packages. It is not to be confused with the Flex 2 framework, which is defined by the classes in the mx.* packages. I specifically avoid using the term framework when referring to the User Interface Component Infrastructure to avoid confusion with the Flex 2 framework.

To be built with the Infrastructure, a component's class must extend fl.core.UIComponent and it should also adhere to other guidelines and requirements enumerated in this series. You must implement specific methods to plug into the invalidation and styling models, for example, and there are specific guidelines on how to set up your FLA file.

The main example covered in this series, the MenuBar component, is built upon the User Interface Component Infrastructure, as most components likely will be. Flash CS3 does ship with some components that are not built upon the Infrastructure: the FLVPlayback and the FLVPlaybackCaptioning components. Creating components that are not based on the Infrastructure is outside the scope of this series.

FLA-based vs. SWC-based

A FLA-based component is a movie clip that is editable by a Flash developer. When you drag a FLA-based component from the Components panel to the Stage or to the Library, behind the scenes it is just as though you opened a FLA file as an External Library and dragged in a symbol from that Library.

Dragging the component into a FLA file also imports all the Library symbols used by the component into the FLA file's Library, and those symbols are editable as well. The primary reason to make components FLA-based is to include the Library symbols that are used to skin the component as editable. The User Interface components included with Flash CS3 are all FLA-based components for this reason.

A SWC-based component is a compiled clip. Compiled clips can be seen as prepublished SWFs embedded within your Library. Since SWC-based components are prepublished, they cannot be edited at all by the Flash developer.

SWC-based components publish faster than a movie clip or a FLA-based component, primarily because all of its ActionScript is precompiled. The FLVPlayback and FLVPlaybackCaptioning components are examples of SWC-based components.

The User Interface FLA-based components use a technique to take advantage of the publish efficiency gained by using SWC-based components. Each UI component includes a compiled clip, called the ComponentShim. This compiled clip includes all of the precompiled ActionScript definitions for the User Interface components, including the entire User Interface Component Infrastructure. Later in this series I'll cover more details about how this compiled clip shim works and how you can use the same trick in your components.

ActionScript 2.0 also supports SWC files, but as you can imagine they are in a different format from ActionScript 3.0 SWC files. ActionScript 2.0 SWC files are completely incompatible with ActionScript 3.0 SWC files and compiled clips. Any SWC file can be copied into Components folder in Flash. Flash can identify which components are ActionScript 2.0 and which are ActionScript 3.0 and treats each one accordingly.

Where to go from here

Read what's coming in the rest of the parts in this series, so you can decide where you'd like to go next:

• Part 2: MenuBar component prototype: Start prototyping the MenuBar component and get a better understanding of the functionality needed. You'll determine the way your menu appears, create the class, discuss error handling, and explore other considerations when developing FLA-based components.
• Part 3: From prototype to component: Take the final prototype you created and turn it into an ActionScript 3.0 component. I'll also walk you through the creation of the the UILoader Live Preview SWF as an example of how a custom Live Preview SWF is created.
• Part 4: Events: Extend the Event class with your MenuEvent class to add interactivity.
• Part 5: Styles and skins: Get into aesthetics and learn how to customize the appearance of the MenuBar component with styles and skins.
• Part 6: Invalidation model: Maximize performance of the MenuBar component by consolidating the events received (mouse events, frame scripts, whenever a new dataProvider is set or whenever properties are updated) so that the changes to the component are updated at once.
• Part 7: Focus management: Learn what it is and how to control which part of the component is active when mouse or key press events are encountered.
• Part 8: Keyboard support: Add keyboard support to the MenuBar component so that users can navigate through the drop-down menus using key presses (up and down arrows, the Spacebar, the Escape and Return keys) to make the menu bar easier to negotiate and more accessible.
• Part 9: Shim compiled clip: Examine how to work with compiled clips. You'll put the finishing touches on your MenuBar component by ensuring that when developers use your components, their FLA files will publish quickly. I'll provide some tips and resources to help you optimize your components before distributing them and also touch on some compatibility issues that you should consider when developing components.

As you research more information about working with ActionScript 3.0 and creating components, you might find the following resources to be very helpful:

• ActionScript 3.0 Language and Component Reference (Flash LiveDocs)
• ActionScript Technology Center