Introduction

Flash components are cool! That, of course, is an understatement.  The ability to create highly customized, visually attractive application interfaces is the most obvious advantage of Flash components over their HTML counterparts. One could never achieve the same level of customization with CSS and HTML as with skins in Flash.

Back in Flash MX days skinning components was a fun and easy thing to do: you would simply modify some items in the movie’s Library and publish your movie – your components would be updated in a blink of an eye.

But ever since the version 2.0 of the Components architecture was implemented many designers have been feeling shy about the whole skinning idea. As the skins’ elements are embedded into the precompiled SWC movie clips and are no longer listed in the movie’s Library, they are not available directly for editing.

Well, the truth is the new architecture allows you to skin your components in a smarter, more organized way.
Sure you can change colors of certain elements through Action Script, apply “halo themes” and Cascading Style Sheets, but version 2.o architecture also allows you to modify your components’ appearance directly as you would do with any regular shape of symbol.

This article is called “Hands-on Primer on skinning Flash components”. It means that I am not going to bore you with a lot of theory. You will find a little bit of theory at the end of article (just a tiny bit), but by the time we are done you will intuitively know most of it.