Using default css

Many times I have encountered the need of customizing skins using the default images and cursors Flex has in it's Assets.swf file.

I just wanted to put a out there for people searching for a quick implementation and for those who never used the default assets of Flex.

It's fairly simple... there are a few ways of embedding an asset to your application or component, I like using a variable class statement.

Like this:

[Bindable]

[Embed(source='Assets.swf', symbol='mx.skins.cursor.HBoxDivider')]

private var doubleArrowCursor : Class;

This will embed the cursor used for the HBoxDivider that shows upon "rollover" on the horizontal edge.

You would use it for example like this:

override protected function rollOverHandler( event : MouseEvent ) : void

{

super.rollOverHandler( event );

cursorManager.setCursor( doubleArrowCursor );

}

override protected function rollOutHandler( event : MouseEvent ) : void

{

super.rollOutHandler( event );

cursorManager.removeAllCursors();

}

The overrides above assume that you are extending a class that contains the methods "rollOverHandler" and "rollOutHandler", obviously if you're not you'd have to simple remove the "override" keywords and add listeners for "rollOver" and "rollOut" into your component.

Lots of other assets are available, pretty much everything that you see on a Flex application without skinning. To find what you need open the folder you've installed Flex or Flash Builder and navigate to the SDK folder you use then "/frameworks/projects/framework/assets", there you will find the .FLA simple open it and explore the assets and look for the symbols, they are everything you will need.

Path Example: { installation folder }\sdks\4.5.1\frameworks\projects\framework\assets

Hope it helps someone out there trying for the first time to use Flex included assets.