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.
For the purpose of this article we will create a Flash scrollbar skin that looks like this:
as opposed to the default one that looks like this:
The skin will automatically be applied to all the components utilizing the ScrollBar in your movie, including TextArea, List, Window and ScrollPane.
Once you complete this tutorial you will be able to create your own skins for the ScrollBar component. You will also gain the experience which will help you with creating skins for other components and their elements.
Alex July is a Vancouver-based (Canada, British Columbia) Web Developer/ Graphic Artist who has an extensive experience in both creative realms. He is also a host of Linecraft.com where he is showcasing his skills and sharing experience with the developers community. For the past 3 years Alex has been focusing on the development of Rich Internet Applications using Macromedia Flash technology.
When away from the computer Alex is practicing Martial Arts, playing guitar and enjoying time with his wonderful family.