Flex 3 Toggle Button Skinning Example

July 31, 2009

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

Create Multiple Skins(Flash CS4) for a Flex Button

July 24, 2009

Did a quick review of creating Flex Button Skins and incorporating these skins into Flex Builder 3. The following records my investigation for my own future reference.

Continue reading


Flash 10 Debugger Upgrade and Flex

July 23, 2009

I always forget to initially update to latest flash player debugger plugin and player when I inadvertently update to a new flash player to view content in a browser.

So I am writing myself a quick sequence of instructions I followed so the next time I can just refer to this post without googling for the sequence. The blog that I initially referenced when I was upgrading is located at http://www.mmug-dublin.com/blog/?p=36 and discussed Flash Player 10 and FB3.

Symptom:
Flex builder can not find the debugger executable when debugging mode is requested.

Problem:
Updated my Flash Player to a release version and not the debugger version during a browser surfing session.
Continue reading