Fun with Flex 4 Skinning and the ToggleButton

Posted on by

I’ve been having a blast with the new Flex 4 skinning model and the flexibility/customization it provides. One of my favorite components to mess with is the ToggleButton because it’s so basic (either on or off) and yet pretty complex when you get down and dig in. It extends ToggleButtonBase which extends ButtonBase so it has the typical up/over/down/disabled states but because it’s a ToggleButton it also has the selected equivalent of all of those. That ends up making it difficult to do transitions between states because the transitions between the interim states like down to downAndSelected are so short. And if you roll off of it or move the mouse it fires an over state so the transition will look jerky.

Even with this limitation you can have some fun. When creating a transition between on and off you primarily want to deal with the over and overAndSelected states. Creating transitions between those two states will let you create something custom as the ToggleButton moves from the off state to the on state. And since the new Flex 4 component model lets you swap out skins at runtime it’s easy to create some interesting themes on the traditional ToggleButton. You can check out the SWF below (with source enabled) to see what I mean. And the code is very straight forward. The only variation is in the skin files:

<s:states>
	<s:State name="normal" />
	<s:State name="text" />
	<s:State name="beer" />
	<s:State name="coins" />
</s:states>
<mx:ComboBox id="cb" y="5" x="0" change="this.currentState = cb.selectedLabel;">
	<mx:dataProvider>
		<mx:ArrayCollection>
			<fx:Object id="normal" label="normal" skinClass="{spark.skins.default.ToggleButtonSkin}" />
			<fx:Object id="text" label="text" skinClass="{components.TextToggle}" />
			<fx:Object id="beer" label="beer" skinClass="{components.BeerToggle}" />
			<fx:Object id="coins" label="coins" skinClass="{components.CoinFlip}" />
		</mx:ArrayCollection>
	</mx:dataProvider>
</mx:ComboBox>
<s:ToggleButton id="toggle" y="100" x="0" skinClass="{cb.selectedItem.skinClass}" />

Some notes:

  • A selected beer is an empty beer.
  • Notice in the code above that skinClass is a bindable attribute. Makes it easy to swap in and out.
  • Be careful when you move the mouse after clicking the ToggleButton or some states won’t play correctly.
  • When clicking the coin, keep the mouse towards the top of the coin and don’t move it or you won’t get the effect.

Related posts:

  1. Couple of Good Skinning With Flex 4 Blog Posts
  • http://www.simplfiedchaos.com todd

    How did you create the BeerToggle class. There’s a heck of a lot of markup in there. Did something help you generate all that? Maybe you could comment some more on the workflow of creating something like this?

    Also, there’s something wrong with the beer cap path, because every time I select it, it doesn’t go back over the top, but keeps slipping to the left a few pixels each time you toggle it.

    Thanks for the sample.

  • http://blog.lyraspace.com Lee Probert

    I’m guessing you exported the FXG from Fireworks or AI.

  • http://blog.lyraspace.com Lee Probert

    next time look at the source Lee … lots of transitions there dude.

  • ryanstewart

    Sorry about the delay. @Todd I did all of the graphics from Illustrator->Catalyst. The beer one is a bit buggy because I didn’t spend enough time polishing it.

    Without Catalyst it’d be tough to do any of the graphics. I ended up creating a custom components with all of the states that are included in a ToggleButton and just copied and pasted that skin file into a new Skin file in my main Flash Builder project.

    =Ryan
    ryan@adobe.com

  • julien

    Very nice beer button, this should be included in the sdk :)

  • Sergi

    cannot see the source of this example!?

  • ryanstewart

    Strange, you’re right. I’ll have to figure out what’s up.

    You can also grab the source code from here – http://github.com/ryanstewart/Flex4ToggleButton/tree/master

    =Ryan

  • http://seanhess.net/posts/flex_skins_and_styles Use css to style a custom spark skin in Flex 4

    [...] I’ve finally had a chance to dive in to Flex 4. One trick I learned is incredibly powerful. CSS is a powerful way to specify settings to something from the outside, but it quickly becomes a pain if you need to push pixels around. I’m going to show you how you can create a skin that reads its properties from a stylesheet. This allows css to do what it does best: set simple properties, and lets you do the pixel pushing in the Skin. [...]

  • Tahirazeemalvi

    Thanks Ryan.

  • Raja

    right click on swf file.