Thursday, March 15, 2007

Flex LinkButton : Transparent Backgrounds?

For a current project I have a container which has a gradient background. Within this I have a series of LinkButtons. I only want the text color of the LinkButton to change on rollOver. If the background of the container was solid I could set the rollOver color to match the background. But the gradient makes this impossible. So I went to the styles for LinkButton expecting to find a backgroundAlpha property. But it seems the LinkButton lacks this or any similar style that I could use. It took me a little while to realise there is a relatively simple solution. Which is to create a skin with a transparent background and to use this for the LinkButton's overSkin and downSkin. I already had a few skins that I was embedding from a swf so I just created a new movieClip which contained a transparent object and added a linkageID of clear_bg. Exported the swf and defined a new style for my LinkButtons. Simple and yet effective. I'd love to hear if there was a style I could have used to get the same result.


LinkButton {
overSkin:Embed("my_skins.swf#clear_bg");
up
Skin:Embed("my_skins.swf#clear_bg");
down
Skin:Embed("my_skins.swf#clear_bg");
}

17 comments:

Anonymous said...

The transparency didn't work for me, although it does bring in the linked transparent png that I placed into my .fla and exported. Flash appears to lose its transparent background.?

The transparency does work if I just bring in the transparent png on its own. So thanks for directing me there.

There's another hack I found, but this unfortunately only works with device fonts, and that's to set the LinkButton's alpha property to 0.

geekglue said...

Probably didn't explain myself properly. I didn't import a png into Flash. I made a rectangle and used it as the basis of a movieClip. I then set the movieClips alpha = 0. Once exported this could be used as described within Flex.

Felix said...

I vote for 'backgroundAlpha' to go in the next version of Flex.

Felix said...

I found your CSS didn't work in Flex 2.0.1. This CSS did:

disabledSkin: Embed("library.swf#BlankRect");
downSkin: Embed("library.swf#BlankRect");
overSkin: Embed("library.swf#BlankRect");
upSkin: Embed("library.swf#BlankRect");

geekglue said...

How silly of me. The post's text talks about setting the skin value and the css sample sets values for the Icon. I will correct this. Sorry for the confusion.

Luciano Lopez said...

Here the code for roll over.
Name this as file and in the css file put.
downSkin:ClassReference("skins.LinkButtonSkin");
overSkin:ClassReference("skins.LinkButtonSkin");
upSkin:ClassReference("skins.LinkButtonSkin");

" skins is the dir and LinkButtonSkin is the as file."
////////////////////////////////////////////////////////////////////////////////
//
// Copyright (C) 2003-2006 Adobe Macromedia Software LLC and its licensors.
// All Rights Reserved. The following is Source Code and is subject to all
// restrictions on such code as contained in the End User License Agreement
// accompanying this product.
//
////////////////////////////////////////////////////////////////////////////////

package skins
{

import mx.core.EdgeMetrics;
import mx.skins.Border;

/**
* The skin for all the states of a LinkButton.
*/
public class LinkButtonSkin extends Border
{


//--------------------------------------------------------------------------
//
// Constructor
//
//--------------------------------------------------------------------------

/**
* Constructor.
*/
public function LinkButtonSkin()
{
super();
}

//--------------------------------------------------------------------------
//
// Overridden properties
//
//--------------------------------------------------------------------------

//----------------------------------
// borderMetrics
//----------------------------------

/**
* @private
*/
override public function get borderMetrics():EdgeMetrics
{
return EdgeMetrics.EMPTY;
}

//--------------------------------------------------------------------------
//
// Overridden methods
//
//--------------------------------------------------------------------------

/**
* @private
*/
override protected function updateDisplayList(w:Number, h:Number):void
{
super.updateDisplayList(w, h);

var cornerRadius:Number = getStyle("cornerRadius");
var rollOverColor:uint = getStyle("rollOverColor");
var selectionColor:uint = getStyle("selectionColor");

graphics.clear();

switch (name)
{
case "upSkin":
{
// Draw invisible shape so we have a hit area.

break;
}

case "overSkin":
{

break;
}

case "downSkin":
{

break;
}

case "disabledSkin":
{
// Draw invisible shape so we have a hit area.
drawRoundRect(
0, 0, w, h, cornerRadius,
0, 0);
break;
}
}
}
}

}

Al said...

Thanks all! I've gone with Luciano's method as I can't be bothered to crank up Flash.

Perhaps for that reason it feels a little cleaner too.

Trevor Hartman said...

nice solution Luciano,

thanks

Houser said...

Thanks, Luciano, that solution worked great. GeekGlue, I'm sure your solution works well also, it just was easier not to have to open Flash up.

Christian Nunciato said...

This ActionScript skin approach worked splendidly for me as well. Thanks much for making this available!

Anonymous said...

I user borderSkin: ClassReference(null) to get transparent skins....

Matthew Erwin said...

skin: ClassReference(null);


That eliminates the background and if you want it to look like a normal Html link changing on hover then consider the following:

.htmlLink
{
fontSize: 12;
fontWeight: normal;
text-decoration:none;
}

.htmlLinkHover
{
fontSize: 12;
fontWeight: normal;
text-decoration:underline;
skin: ClassReference(null);
}

<mx:LinkButton id="lnk" x="54" y="52" label="MyLink" styleName="htmlLink" click="doStuff( )"
rollOver="lnk.styleName='htmlLinkHover';"
rollOut="lnk.styleName='htmlLink';"/>

Timothy Erwin said...

Hey thanks bro...works like a charm =) just what I needed!

Ross Henderson said...

Thanks, Matthew. That helped me out a ton. I ended up doing the same thing at runtime, which I think is a pretty handy thing.

linkButton.setStyle("skin",Class(null)).

Anonymous said...

< mx:LinkButton skin="{null}"/>

Corneliu Dascalu said...

thanks, it worked

Rob Riggs said...

Yep, I do what Matt does. I just set the skin class to null.

skin: ClassReference(null);

Also, if you want to override the rollover text color, use this:

textRollOverColor: color

This property isn't documented much.