Skip to content
February 9, 2011 / Danii Oliver

Skinning Assets for Flex

When developing an application in Flex you can skin your components in different ways. You can write the mxml component then the mxml skinClass. But that takes up a lot of time and can potentially causes time consuming bugs. Here is a better and faster way to go about the task.
Skinning with jpeg, gif, png or swf.
If you want to use image files you will have to embed them in your Flex app.
It will look like this

Button {
overSkin: Embed("../assets/orb_over_skin.gif");
upSkin: Embed("../assets/orb_up_skin.gif");
downSkin: Embed("../assets/orb_down_skin.gif");
}

</mx:Application

No different from coding up, down, over states in CSS or Javascript.
In this manner files are embedded and then complied. Thus they are a part of your application and cannot be changed on the fly. You will have to recompile your app to update any changes every time you make a change. There are other issues with resizing as well that you can read about HERE if you choose to take this route.

A better way to reuse your code and make changes on the fly would be to link external swfs. In this manner you would have to recompile on the new swfs but if you have a bunch already made you need only replace the swfs in the Flex directory that you were pointing to and and your application should run fine with out recompiling.

Linking swfs requires the you embed the file path and and call or map to the symbol name

Button {
upSkin: Embed(source='../assets/SubmitButtonSkins.swf',
symbol='MyUpSkin');
overSkin: Embed(source='../assets/SubmitButtonSkins.swf',
symbol='MyOverSkin');
downSkin: Embed(source='../assets/SubmitButtonSkins.swf',
symbol='MyDownSkin');
}


much like this.

Lets look at a test run.
Take

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: