Make that Flex Button look like an HTML link

– February 21, 2010

Sometimes it’s the simple things that make us happy. And for me one of those simple things is just how easy it is to make a <s:Button> look like an HTML link with Flex 4.

view source

If you’re an HTML coder then first, “WTF you doin’ on my blog hillbilly boy?” and second you’re probably thinking, “Yeah, or you could just use HTML in the first place and actually have regular links. That may be true but can your regular links do this?

view source

I’m laughing at the superior web standard. ( from??? ) And if you can do that with your shitty Javascript then can you do it in just 5 minutes – on all browsers? ‘Cause that’s all it took me and I’m being generous.

Watch the music-video tutorial

Show me some skin
Here’s all that you need in your HTMLBtn skin file. I said it was easy. Was I right or was I right? :)

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">

<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";

	.upStyle { color: #0000FF; }
	.overStyle { color: #009900; }
	.downStyle { color: #00FF00; }
	.disabledStyle { color: #666666; }

</fx:Style>

<s:states>
	<s:State name="up" />
	<s:State name="over" />
	<s:State name="down" />
	<s:State name="disabled" />
</s:states>

<s:transitions>
	<s:Transition toState="over" autoReverse="true">
		<s:Resize target="{ underlineOver }" />
	</s:Transition>

	<s:Transition toState="up" autoReverse="true">
		<s:Resize target="{ underlineOver }" />
	</s:Transition>
</s:transitions>

<s:Label
	id="labelDisplay"
	styleName.up="upStyle"
	styleName.over="overStyle"
	styleName.down="downStyle"
	styleName.disabled="disabledStyle"/>

<!--This is the blue line that is always present-->
<s:Rect
	width="100%" height="1"
	bottom="0" horizontalCenter="0">
	<s:fill>
		<s:SolidColor color="#0000FF"/>
	</s:fill>
</s:Rect>

<!--This is the green underline that grows out to 100%
width when the mouse moves over and then shrinks
back to 0 width when the mouse moves out.-->
<s:Rect id="underlineOver"
	width.over="100%" width.up="0" height="1"
	bottom="0" horizontalCenter="0">
	<s:fill>
		<s:SolidColor color="#009900"/>
	</s:fill>
</s:Rect>

</s:Skin>

Notice that the <Resize> Transitions only specify a target. You don’t have to bother with telling it exactly what width to transition to. It figures that out from the properties of the target. In this case it’s the <Rect> which has width.up=”0″ and width.over=”100%”. Have I said lately that I love Flex 4 states?

Tags: , ,