Flex 3 Toggle Button Skinning Example

I am in the process of migrating our Flash based buttons to Flex. Our sound on/off button is perfect example to use the toggle button features of the Flex component.

The mxml code should look like the following with the toggle feature set to true:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="vertical">
	<mx:Style source="PlayerButtonSkins.css" />
	<mx:Button 
		id="soundOn"
		toggle="true"
		styleName="soundToggle" />
</mx:Application>

The styleName attribute can reference a css class which can be used to provide a visual skinning of the button when it is on and when it is off.
The PlayerButtonSkins.css file which is used by this mxml, has an example entry for the sound button using the stylename soundToggle:

Button.soundToggle {
	upSkin: Embed(source="/../assets/ButtonBar.swf", symbol="Sound_up");
	overSkin: Embed(source="/../assets/ButtonBar.swf", symbol="Sound_over");
	downSkin: Embed(source="/../assets/ButtonBar.swf", symbol="Sound_up");
	disabledSkin: Embed(source="/../assets/ButtonBar.swf", symbol="SoundOff_up");
	selectedUpSkin: Embed(source="/../assets/ButtonBar.swf", symbol="SoundOff_up");
	selectedOverSkin: Embed(source="/../assets/ButtonBar.swf", symbol="SoundOff_over");
	selectedDownSkin: Embed(source="/../assets/ButtonBar.swf", symbol="SoundOff_up");

}

The ButtonBar.swf file contains static skins/vector images of the sound button in various states of toggleness. Note: The styleName can be applied to button components whose styleName is set to “soundToggle”. This CSS styleName/component class context lets you uniquely skin many different buttons within the same mxml.

The images below illustrate the button states:
initial state of upSkin,overSkin and downSkin

The up state of the sound  on button

The up state of the sound on button

The over state of the sound button

The over state of the sound button

The selected states used when button has been toggled (selectedUpSkin, selectedOverSkin, selectedDownSkin)

The up state of the sound off button

The up state of the sound off button

The image used to represent the over state of the sound off button

The image used to represent the over state of the sound off button

Advertisements

2 Responses to Flex 3 Toggle Button Skinning Example

  1. Your post really helped! thanks mate!

  2. Caroline says:

    thank you for this! just when i needed it!
    I edited it some for images and am sharing the code.

    /* in the CSS */
    /* Lock Unlock Toggle Button */
    Button.lockToggle {
    upSkin: Embed(“images/icon-locked-frozenFields.png”);
    overSkin: Embed(“images/icon-locked-frozenFields.png”);
    downSkin: Embed(“images/icon-locked-frozenFields.png”);
    disabledSkin: Embed(“images/icon-locked-frozenFields.png”);
    selectedUpSkin: Embed(“images/icon-unlocked-frozenFields.png”);
    selectedOverSkin: Embed(“images/icon-unlocked-frozenFields.png”);
    selectedDownSkin: Embed(“images/icon-unlocked-frozenFields.png”);
    }

    /* on the mxml page */

Leave a Reply

Fill in your details below or click an icon to log in:

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: