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");
      upSkin:Embed("my_skins.swf#clear_bg");
      downSkin:Embed("my_skins.swf#clear_bg");
  }
Posted by at
Labels: , ,

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.

9:26 AM
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.

9:42 AM
Felix Turner said...

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

7:32 AM
Felix Turner 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");

7:50 AM
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.

8:58 AM
Anonymous 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;
}
}
}
}

}

5:59 AM
Anonymous 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.

5:38 PM
Trevor Hartman said...

nice solution Luciano,

thanks

9:34 AM
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.

7:31 AM
Christian Nunciato said...

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

8:14 AM
Anonymous said...

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

11:04 PM
Anonymous 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';"/>

9:33 AM
Anonymous said...

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

1:40 PM
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)).

3:08 AM
Anonymous said...

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

11:15 PM
Corneliu Dascalu said...

thanks, it worked

6:03 PM
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.

3:04 AM

Post a Comment

Subscribe to: Post Comments (Atom)