how do you make a gradient background on a button in flex 4

[mcmcmark]

Hey everyone, this is driving me crazy. Below is my css for a button in file.  I want a gradient background on a button in flex 4. I can not for the life of me figure out how to do this. There is no longer the backgroundColors option. chromeColor is only a single color and all the examples I see on the web using fill, and linearGradient throw up errors so I assume these were only in the beta? This is very frustrating to not be able to do a simple thing in flex 4 that worked in flex 3. Any ideas? Thanks.

Button {

cornerRadius: 3;

highlightAlphas: 0.36, 0;

fillAlphas: 1, 1, 1, 1;

paddingLeft: 5;

paddingRight: 5;

backgroundColors: #ff6600, #ff9900, #ffffff, #eeeeee;

color: #ffffff;

disabledColor: black;

textRollOverColor: #000000;

textSelectedColor: #000000;

borderColor: #ff6600;

fontWeight: normal;

}.

[FTQuest]

As the shortest/simplest solution instead of 'chromeColor' try 'accentColor'. It gives very nice subtle gradients.

But if you want to control it really, just make a custom skin - copy the default skin and then play with gradients in the layers.

HTH,

FTQuest

[mcmcmark]

accentColor does not work. I am still unable to figure out for the life of me how to apply a gradient on a flex 4 button so my buttons look like they did in flex 3.

[Peter_deHaan]

I believe the accentColor style only works if the Boolean emphasized property is set to true.

There isn't a SWF, but some easy copy-paste examples at http://blog.flexexamples.com/2010/04/05/setting-the-accent-color-on-the-spark-button-control-in-flex... to see what the accentColor vs emphasized bits do.

Peter

[reidabel]

This may not be what you're looking for, but since you are stuck, I'll elaborate on what FTQuest was saying. It will only take a few minutes to do this.

In FB4:

1. right-click the button, choose "Create Skin", give it a package (directory) and name (filename), host component "spark.components.Button" and "Create as copy of" "spark.skins.spark.ButtonSkin".

This creates junk.mxml for you, the skin file.

2. In the source of junk.mxml, change layer 1 (shadow) and layer 2 (fill) colors as I did here in this code. Note that where you see {color#}, this is data-binding to a variable I've made in a color.as file that I've included in the skin file. In fact, that is ALL that I changed in the skin file it generated for me.

snippet from colors.as:

public

var color1:int = new int(0xA1D190);

snippet from junk.mxml:

<![CDATA[

include "Colors.as";

layer changes in junk.mxml:

<!-- layer 1: shadow -->

<!--- @private -->

<s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">

<s:fill>

<s:LinearGradient rotation="90">

<s:GradientEntry color="0x000000"

color.down="

{color5}"

alpha="

0.01"

alpha.down="

0" />

<s:GradientEntry color="0x000000"

color.down="

{color6}"

alpha="

0.07"

alpha.down="

0.5" />

</s:LinearGradient>

</s:fill>

</s:Rect>

<!-- layer 2: fill -->

<!--- @private -->

<s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">

<s:fill>

<s:LinearGradient rotation="90">

<s:GradientEntry color="{color2}"

color.over="

{color3}"

color.down="

{color4}"

alpha="

0.85" />

<s:GradientEntry color="{color4}"

color.over="

{color5}"

color.down="

{color6}"

alpha="

0.85" />

</s:LinearGradient>

</s:fill>

</s:Rect>

You can (and maybe should) hardcode colors in here to do your gradients. After this, your button will need to use the skin, like:

<s:Button ... skinClass="Skins.junk">

... where "Skins" is the name of the package/directory I told it to create the skin in.

This may not be ideal for you, but it's working for me. Regarding having variables for color values, I posted a thread this morning asking if this is the best way to do things or not, so I don't know if it's the way to go.

Hope this helps ...