Flash

Building on the success of components in the last release of Flash MX, Macromedia has outdone itself in rebuilding this complete architecture for ActionScript version 2.0.

With this latest release we've been introduced to some new and powerful ways of customizing components. Two buzzwords here are "Styles" and "Themes" - the first is largely used for defining font, color, and spacing properties, while Themes deal with the actual skinning of component assets. I'll discuss these two features in detail, as well as touch on some more advanced topics such as inheritance and code-based skinning.

Of course, these new goodies come at a price. Established Flash designers and developers will need to invest time getting themselves acquainted with the new feature set in Flash MX 2004, and those new to the software will have a lot of ground to cover. This article is a good start, as it will get you more in touch with the component customization options available and how to use them in this latest release of Macromedia Flash.

Styling Components
Let's take a closer look at one of these new ways of customizing components in Flash MX 2004 (see Image I). Styles is a feature that you'll probably be using most often when tweaking components to suit your project. In Flash MX, you used either the globalStyleFormat or setStyleFormat component methods for doing this.

You can compare Styles to Cascading Style Sheets, though there are subtle (and not so subtle) differences in implementation. If you look at the new CSS support for TextField objects in Flash MX 2004 you'll see that they have a lot in common with the Styles feature used on components. One of the main differences between the two is that components can't parse the W3C standard style properties and use their ActionScript equivalent; more about this later in the article.

The basic principle of using Styles is very easy indeed; you only have to use two methods, "getStyle" and "setStyle", to get started. You guessed it, those methods do exactly as their names indicate: set and get style properties. Not very exciting yet, is it? Let's get to the good part…these styles can be layered and applied to various scopes, have inheriting values, and even support custom style declarations (see Image II). It's definitely getting more interesting now.

These various scopes on which Styles can be applied are the following: the component instance, a component class, and the _global scope. Let's first look at how to set style properties on a single component instance.

Applying Styles to a Component Instance
A component instance is basically any single component that you have on stage. These components are instantiated from their component class and are individual copies of the same object.

• Open up a new FLA in Flash MX 2004.
• Drag a ScrollPane component from the "Components panel" to your stage.
• Give the ScrollPane component instance name "myScrollPane".
• Write the following ActionScript on frame 1 of your main timeline:

myScrollPane.setStyle("backgroundColo ","0x003366");

If you test this movie you'll see that the ScrollPane component now has a dark blue background color. When you want to retrieve a value for a particular style property on the component, simply use the getStyle method and specify the style property as the first argument.

myScrollPane.getStyle("backgroundColor "); // traces out 0x003366

For a full list of all supported style properties, consult the Flash MX 2004 documentation (Help > Using Components > Customizing Components > Using Styles to Customize ... > Supported Styles). Be sure to look at the documentation for each individual component (Help > Using Components > Components Dictionary) since there might be some component-specific styles listed there.

Of course, when you've got multiple components on stage you won't want to style them all individually. This is where the other scopes come in handy. The first one we'll look at is the component class.

Applying Styles to a Component Class
The component class is what you might consider the framework of a component. All instances of a component you drag on stage are instances of their component class. Knowing this, applying styles to the component class will make all instances of that class subscribe to the same settings.

Flash MX 2004 stores these class style definitions in the _global. styles scope. This scope contains an object for each component, the object name of which refers to the component class name.

• Open up a new FLA in Flash MX 2004.
• Drag a couple of ComboBox components from the "Components panel" to your stage.
• Write the following ActionScript on frame 1 of your main timeline:

_global.styles.ComboBox.setStyle("back groundColor","0x003366");

If you test this movie you'll see that all ComboBox components on stage have now got a dark blue background color applied. This approach is very useful if you want to use different styles for different components. However, if you want all components on stage to subscribe to your settings, doing it this way could cause you to get finger cramps from defining the styles for every single component class you're using.

Applying Styles to the _global Scope
Setting Styles on the _global scope makes sure that every component has access to the Style properties, and no separate style declarations on the component instance or class are necessary (see Image III).

• Open up a new FLA in Flash MX 2004.
• Drag a couple of ComboBox and ScrollPane components from the "Components panel" to your stage.
• Write the following ActionScript on frame 1 of your main timeline:

_global.style.setStyle("backgroundColo r","0x003366");

If you test this movie now you'll see that all components have a nice dark blue background color. Notice that we used _global.style here, not the _global.styles scope we discussed earlier for the component class style declarations. That all looks very nice, but it's unfortunately not always a one-stop approach to styling all your components. Let's look at a problem with using the _global scope to style components:

• Keep using the same FLA with the components.
• Drag a TextArea component on stage. Now if we test this movie, you'll see

that the TextArea component does not subscribe to this _global background Color style property. Why is this happening? Well, the TextArea component, among others, already has some style properties predefined on its component class style scope, which takes precedence over the _global style scope.

Applying styles to component classes is all very well and good, but it might not always be a good solution. What if you want to give a ComboBox and a TextArea component a particular style and a ScrollPane and List component another one? This is where custom style declarations come into play.

Creating Custom Style Declarations
Custom styles allow you to create an object that contains various style property settings that you can then have any component subscribe to.

• Open up a new FLA in Flash MX 2004.
• Drag ComboBox, TextArea, ScrollPane, and List components onstage.
• Give the ComboBox component instance name "myComboBox".
• Give the TextArea component instance name "myTextArea".
• Give the ScrollPane component instance name "myScrollPane".
• Give the List component instance name "myList".
• Write the ActionScript in Code I on the first frame of your main timeline.

If you test this movie you'll see that the ComboBox and TextArea component have a dark blue background color, while the ScrollPane and List component have a red background color.

Now how did we do that? It's not that difficult; first we create custom style objects in the _global.styles scope by instantiating them from the built-in CSSStyleDeclaration class. Having done that we now have two namespaces for applying our styles to: "myStyle1" and "myStyle2". The next thing we do is apply a different value for the backgroundColor style property to each of the custom style declarations. If you look at the last four lines you'll see that we are setting a style property named "styleName" on each of our component instances. This "styleName" property points components to the name of the style declaration in the _global.styles scope we want it to subscribe to.

This example, which sets only one style property, doesn't look very productive, but as you'll likely use far more style settings in real-world projects this approach can very productive as opposed to applying all those styles manually to component instances.

Styles and Inheritance
Just as is the case with CSS, Styles applied to components can be set to inherit their value. This means that a child object that doesn't have a particular style property assigned "inherits" the value of its parent object. A good example of an inheriting style property is "color" versus the "backgroundColor" property, which does not do so.

This style inheritance for components is a very useful feature when working with nested components. Even components components nested at runtime automatically get these inherited style properties applied.

Dealing with Differently Scoped Styles on a Component
You might be wondering what happens if you have Styles applied to multiple scopes on a component. Flash deals with this in a very slick way. There is an order in which Flash goes looking for style settings, which also brings the concept of inheriting styles into play.

1. component instance (myComponentInstance)
2. component styleName property (_global.styles.styleName)
3. component default class style declaration (_global.styles.ComboBox)

The three steps above are the same for any style property that Flash applies to a component. First it looks to see if Styles are assigned to the component instance; if so, it disregards all other scopes. If no Styles were defined on the component instance it looks to see if the "styleName" property was set to point to a custom style declaration. If not, it moves on to the default component class style declaration in the _global.styles scope.

So far, so good. Now we come to the inheriting styles part. If a particular style property is set to inherit, Flash first moves on to the parent object of the component and goes looking through those three scopes in that object. Finally, when Flash has finished looking through all parent objects without finding the style to be defined it moves on to step 4, the _global scope.

Style properties that aren't set to inherit automatically move on to step 4 if no style definitions were found in any of the other three locations.

4. global style scope (_global.style)

We've covered a large portion of the Styles API; if you want more information on subjects such as defining color names and setting inheritance for style properties, see the documentation on the StyleManager class (Help > Using Components > Components Dictionary > StyleManager class).

Skinning Components
Moving on to skinning components, you may have noticed that - unlike in Flash MX - component assets are no longer stored in the Library panel. You used to be able to look for the Library folders that belonged to a particular component and start editing the movieclips in there to suit your project. Those days are now over; Flash MX 2004 has introduced compiled clips and the SWC file format.

These compiled clips do a couple of things: they hide the component code from prying eyes, allow for easy distribution of components, and automate things like creating live previews for components. All well and good, but how do we get to the component assets? For customizing component skins Macromedia has introduced the so-called "Themes," which are basically just simple FLA documents that act as containers for all component assets.

Applying a Theme to Your Project
Flash MX 2004 ships with two themes: "haloTheme.fla" and "sampleTheme.fla" (you can find those in the First Run > ComponentFLA folder of your installation directory). If you open up "sampleTheme.fla", for example, you'll notice that there is nothing at all on stage.

Now let's open the Library panel and see what's really going on in there. You'll find a whole bunch of nested folders and if you browse down through Flash UI Components 2 >Themes > MMDefault you'll find the folders that contain the assets for each of the UI components (Accordion Assets, Alert Assets, etc.).

Things are getting a bit more familiar now; you can now simply edit those movieclips and make all the changes you want. When you're done with modifying the component assets, simply drag that folder from the Themes FLA to the stage of the FLA you want to apply the skins to. You can then safely delete those assets from the stage of your FLA (they are still contained the Library panel) and if you test your movie you'll see the new skins applied for the component you customized.

Components can also be skinned purely by using ActionScript. A full explanation of this would go beyond the scope of this article, but essentially every component contains properties that point to the linkage identifier for the skins it uses. The Accordion, for example, has four of these properties (falseUpSkin, falseDownSkin, falseOverSkin, trueUpSkin) that each point to the linkage identifier of a skin that represents a particular state of the header bars.

If, for example, we want to change the skin for the rollover state of the Accordion header bars we could create a movieclip containing our skin, give it the instance name "rolloverAccordion", for example, and use the following code:

myAccordion.falseOverSkin = "rolloverAccordion";

This code assumes that our Accordion component had the instance name "myAccordion". If you test the movie and move your mouse over one of the header bars you'll see your custom skin applied. For more info on skinning the Accordion component, you might want to consult the Flash documentation (Help > Using Components > Components Dictionary > Accordion component)

Conclusion
As you've probably noticed, Flash MX 2004 has given us a host of new features for customizing components. This article has only touched upon the most common uses but should have given you enough information to go out and start customizing components yourself.

If you want to learn more about it, be sure to read through the Flash MX 2004 documentation, which does a pretty good job of introducing all these topics, and be sure to do some experimenting yourself, as that is definitely the easiest way of getting acquainted with it.

If you want to see customization at work on a real-world application, take a look at "aggregator.fla", available at www.sys-con.com/mx/sourcec.cfm.