Styles, Skinning, and Themes

[ LiB ]  

Components are cool, but customizing components by changing their look is really very useful. It's possible to modify a component's default graphics, colors, fonts, and general look through styles, skins, and themes. All the underlying code is unaffected when you make a change.

A style is a single attribute for a component (such as the font or font color ). Skinning is just the process of replacing or adding the graphics used by the component. Finally, a theme (of which there are only two right now) is a collection of various skins that work together for an overall look. For example, changing a style can be as simple as changing a button's font to Courier. Skinning a CheckBox can mean replacing the check mark with an "x" graphic (which we'll do). Making a theme involves identifying all the visual attributes: maybe specifying Courier font but also that all highlights appear in gray and all corners are sharp edged.

Changing styles is the least involved, skinning is a bit more involved, and making themes is the most work even though it's not necessarily very technical.

Setting Styles

When you change a component's color or text, you can do so entirely in script. Such style changes are not much more involved than first identifying the attribute you want to change, coming up with a replacement, and then deciding how global a change you intend to make. For example, you can change any of the following:

  • A single instance of a component

  • One component type (say, all Button components)

  • All components containing the attribute you're affecting (for instance, changing the text color on every component containing text)

Instance Versus Component Versus Global Styles

Suppose you've decided you want to change the text color. (You learn how to pick a style in the next sectionbut let's do this part with the idea you're going to change the text color.) Ultimately, you must decide whether you want to affect one instance, all instances of a certain component type, or all components containing text. The syntax varies. Consider a sample for each:

Affecting a single instance:

 myInstance.setStyle("theStyle", value); 

Replace myInstance with the instance name , replace "theStyle" with the supported style, and replace value with an actual value. If I had a RadioButton instance named rb, for example, I could use the following code to change the text color (style name "color") to red:

 rb.setStyle("color", 0xFF0000); 

Affecting a single component type:

 var myStyle = new mx.styles.CSSStyleDeclaration(); myStyle.color = 0x0000FF; _global.styles.CheckBox=myStyle; 

Maybe I should have worked up to this one, but most of this you just copy verbatim every time. The first line creates a new style declaration and stores it in a variable myStyle . Next you set the color property (directly, not via setStyle()) . Finally, you associate all CheckBox components with that style. This example causes all CheckBoxes' text color to appear blue.

Affecting all components :"color", 0xFF0000); 

Notice this syntax is nearly identical to skinning a single instance. Instead of saying "some instance set style," however, you say "global style set style." In fact, I use this setting the most frequently because it's equivalent to creating a theme. If I want a silvery blue look to all my components, text, and highlights, for example, I can set several global styles and it will affect everything.

After you decide what you want to affect, it's just a matter of identifying the styles you want to change. Next you'll learn how to find the different styles you're allowed to change. Let me first remind you that it's not just a matter of picking colors. Styles include things such as fontWeight ("normal" or "bold") and textAlign ("left", "center" , or "right") .

Picking Styles

The available styles vary among components, but you can find a list of which styles are available by searching Flash's help for "supported styles." You'll notice most of these are based on standard CSS styles. This is probably your best resource for finding which styles you're allowed to set.

For one particularly influential style, check out "themeColor" . This style mainly affects the rollover highlight color. You can set it to any color you want, but three specific color schemes are available: "haloBlue", "haloOrange" , and the default "haloGreen" . For example, I can make a button instance (myButton) adopt the "haloBlue" look by using this code:

 myButton.setStyle("themeColor", "haloBlue"); 

You'll no doubt find other styles that prove useful. I find an interesting way to not only find the available styles but also to see how they affect my components is to use the Debugger panel. That is, just put a few components onstage and select Control, Debug Movie. Then start digging through the styles by first selecting _global and the Variables tab as shown in Figure 12.7.

Figure 12.7. Although not recommended for the faint-hearted, you can see all the style names using the Debugger panel.


You can change the values of many of these styles right in the Debugger and see the results onstage. Digging through the plethora of options is a bit overwhelming, but when you find the style you want to affect, you can see the results immediately. Also, it's a drag because colors have to be represented as a number between 1 and 16,000,000 or so. I guess I point out this process because it can help you see the structure behind styles.


"borderStyle" Style

Without picking favorites, there's one style I feel compelled to point out. That's "borderStyle" . If you use the TextArea or TextInput (for instance, to get the scrolling text), you may find that you don't want that border (no matter how beautiful it may be). Just use the following code (on an TextArea instance named my_txt):

 my_txt.setStyle("borderStyle", "none"); 

Replacing Skins

Whereas setting styles involves changing an attribute, replacing skins involves replacing actual contents of movie clips. For example, we'll replace the check mark the CheckBox uses with one that looks like an "x." One notable difference from styles: In the case of skins, all instances are affected. In addition, any component that uses the skin element you changed will also be affected. If you change the down arrow, for example, you'll see the results in both the ComboBox and the TextArea (when it scrolls ) because they both use the same down arrow.

You can skin several different ways: Just apply a theme (which means you'll be skinning everything with the same look), edit the theme for one movie, or edit and create your own theme to use with other movies.

Applying a Theme

Flash only ships with a couple themes ( Halo and Sample ). The assets for these are stored in a folder called ComponentFLA inside the First Run folder adjacent to Flash MX 2004. Perhaps by the time you read this book, other themes will be available.

To apply the theme, just open the source FLA file as an external library. That is, select File, Import, Open External Library. Point to the file SampleTheme.fla. Copy the contents of that library into your file. To do so, open your movie's library so that you can see both the internal and external library (see Figure 12.8). Then drag the folder Flash UI Components 2 into your movie's library.

Figure 12.8. You can drag the entire Flash UI Components 2 folder into your movie and then edit the graphics it contains.


Put a few components onstage (using the standard method of dragging from the Components panel). Test the movie. By just having that folder in your library, all components adopt an entirely new look.

Editing a Theme for One Movie

The applying a theme exercise you just completed will affect only that movie. Although you may like most of that theme, however, you may want to make a minor change to itfor example, the check mark the CheckBox uses (see Figure 12.9). If you want, you can replace that check mark.

Figure 12.9. You can edit the check mark graphic for the CheckBox component.


If you're going to be editing a theme, this means you'll be changing the contents of specific movie clips. It's basically a process of hunting down the element you want to change and editing it. The only warning is that you need to make sure you get all variations. In the case of that little check mark, there are four variations to edit. Luckily, both the Halo theme and the Sample theme are well organized. In fact, every component includes a clip named CheckBoxAssets (or similar) that includes all the various states in one clip. You don't really need that clip during runtime, but it includes the clips you do need. They're easy to find this way.

Go ahead and open as external library either the Halo or Sample theme as you did in the preceding section. Drag the Flash UI Components 2 into your movie. Now you can dig in to find the check marks. You want to edit CheckBoxAssets, which is in the path Flash UI Components 2/Themes/MMDefault/CheckBox Assets/. Double-click to edit that clip and zoom way in to see everything (see Figure 12.10).

Figure 12.10. The CheckBoxAssets clip includes all the pieces you may want to edit.


Now just carefully double-click the check mark until you get to its base shape. Delete the onscreen graphics and draw your own "x" check mark. Test the movie.

Saving a Theme

Making edits to a theme is just a tad bit touchy. You have to dig deep and you don't want to be sloppy for fear of breaking everything (which, actually, isn't very easy to do). It's certainly more work than you'll want to do for every project if there's a change you commonly make (for instance, changing the check mark).

Making your own theme is so easy, you'll kick yourself. Just start a new file and import as an external library the theme on which you want to base yours. Make the edits, and then just save the FLA in a safe place (for instance, with the other themes). Easy.

If you have visions of making your own theme from the ground up, I still recommend starting with one of the completed themes, but just change everything. I think you'll do the least amount of work if you make changes starting with the most specific. Because so much is shared, you'll see that changing something specific may affect several other (more general) attributes. In addition, try to edit the contents of clips instead of replacing clips. Naturally, clip instance names are used, so your replacement needs the same name. That's not an issue if you just edit clip contents. Finally, you'll find that components also use linkage settings meaning that even if a particular symbol isn't used within any other clip, it may still be part of a component that effectively uses the attachMovie() method. Again, edit contents and you should be fine.

[ LiB ]  

Macromedia Flash MX 2004 for Rich Internet Applications
Macromedia Flash MX 2004 for Rich Internet Applications
ISBN: 0735713669
EAN: 2147483647
Year: 2002
Pages: 120 © 2008-2017.
If you may any questions please contact us: