back

Overview: How to skin, style, and extend
Flash CS3 components

by Grant Skinner

To me, the really cool thing about Adobe Flash® has always been the synergy between design and code. This fusion creates virtually limitless possibilities for creative exploration and is what has kept me working enthusiastically with Flash for more than ten years. When my company was asked to architect and build the new component set for Flash CS3 Professional software, I embraced the opportunity because it gave me the chance to create components that embodied this synergy. In this article, I explain our objectives in building the Flash CS3 components set and provide a brief overview of how to skin, style, and extend the components.

Philosophy and goals

Previous versions of Flash components have been forced to live a schizophrenic existence, trying to satisfy the overlapping needs of both application developers and experience designers. With the release of Adobe Flex™ 2 software, application developers now have a dedicated tool and component framework. This enabled us to build a component set that is specifically targeted at rich experience creators.

With this in mind and armed with plenty of feedback from Adobe customers, we identified three core objectives for the new component set:

Size and performance

We wanted to build a component set that was as lightweight as possible. By stripping out lesser used features and coding smart, we were able to reduce the components file size by 25–40% from the v2 component set (depending on the specific components used). We were also able to reduce the base size of the component framework from 27K in Flash MX 2004 to only 17K in Flash CS3 Professional — this is more than 110K smaller than the Flex 2 base framework size (see Figure 1).

Size chart

Figure 1: Size difference between Flash and Flex component framework.

We believe this smaller size encourages developers who previously rolled their own lightweight components to use the included components and to build new components on the CS3 framework.

We also set out to make the components run more efficiently. Writing the components in the ActionScriptâ„¢ 3.0 language gave us a huge performance boost, but we were also able to increase efficiency by taking advantage of new capabilities in the language and carefully optimizing the code. Figure 2, which shows one million rows in a list, is a simple example of this performance. You can scroll, select, and interact with the list with no performance issues.

AlertThis content requires Flash

Download the free Flash Player now!

Get Adobe Flash Player

Figure 2: Optimized component performance.

Simplified skinning and styling

One of the most important things we set out to accomplish with the Flash CS3 components was to make them easy to customize visually but still give advanced users the power to get very specific results. With the help of scale-9 and a few authoring enhancements, we were able to make component skinning a completely visual process (see Figure 3). Skinning a Flash CS3 component involves three simple steps:

  1. Drag a component onto your Stage.
  2. Double-click the component.
  3. Select the skin asset you'd like to modify, and double-click it to edit it.
Component skins

Figure 3: Component skins.

To control how your skin will scale, you can use the scale-9 guides to indicate the corners and edges of the skin — no more fussing with multiple clips representing every corner or edge of a component (see Figure 4). Literally every piece of a component can be skinned in this way. We even set up the progress bar to automatically tile and animate the indeterminate bar skin (called the barber pole) for you. More advanced developers can still create programmatic skins by extending Sprite and exposing width and height setters and then using styling to apply the skin to their components.

Scale-9 guides

Figure 4: Scale-9 guides.

The new component framework also makes it easy to apply styles for text and custom skins to components. The Flash CS3 components include the ability to apply styles to individual component instances, all components of a certain type, or all components. We also rewrote the style propagation system to be much more efficient than the one in the v2 components, so you can apply global styles with confidence that they won't lock up your application.

Apply a style to a specific component instance:

myComponent.setStyle("styleName",styleValue);

Apply a style to all components of a specific type:

StyleManager.setComponentStyle(TextArea, "styleName", styleValue);

Apply a style to all components:

StyleManager.setStyle("styleName", styleValue);

Extensibility

Another major focus for us while architecting the new component set was to make it as straightforward as possible for developers to extend existing components or create their own components with the framework. We did this by sticking to a shallow, transparent class hierarchy. To build a custom component, you need to work with only five classes from the framework — and four of them are optional (see Figure 5). Even our most complex components, such as List, are only three or four levels deep in the inheritance chain. Best of all, there are no mix-ins or other ambiguous class relationships; almost every relationship is either inheritance or composition, which makes tracking down a specific function in the framework straightforward.

Five classes for building a custom component

Figure 5: Five classes for building a custom component.

We worked to maintain similar APIs and workflows to v2 and the Flex 2 framework so that your knowledge from other component sets would be applicable to this new set. We also left everything open and ready for modification. The CS3 components have almost no private methods and don't use namespaces, which means you can extend and modify any functionality you want with relative ease. While a full explanation of creating custom components is beyond the scope of this article, I am working on some articles that will appear on my blog and will detail how to work with the framework.

Conclusion

The Flash CS3 component set is targeted directly at the rich experience market. The components are lightweight, efficient, and built to be customized, both visually and functionally. I hope this is the component set that finally convinces rich experience designers to use the framework instead of rolling new custom components for every project. (I've been there and done that, and it was never a great option.)

If you'd like more information on the new component set, check out the documentation in the Flash Help panel (yes, these components come with good documentation) or check out my notes for Flash CS3: A Guided Tour, which detail many of the topics mentioned in this article. We have also started releasing unofficial updates to the component set, and I will be blogging about extending CS3 components soon.

 


Grant Skinner is CEO and chief architect of gskinner.com, a Flash development and consulting company. He works with leading new media agencies and progressive corporate clients to create cutting-edge applications, games, and multimedia pieces. Skinner's expertise in fusing coding with interface design, usability, marketing, and business logic has garnered international acclaim and resulted in several prestigious industry awards, including Best Canadian Developer at FITC 2005.