4 Replies Latest reply on May 4, 2010 10:53 AM by Peter deHaan

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

    mcmcmark Level 1

      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;

      }.

        • 1. Re: how do you make a gradient background on a button in flex 4
          FTQuest Level 3

          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

          • 2. Re: how do you make a gradient background on a button in flex 4
            mcmcmark Level 1

            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.

            • 3. Re: how do you make a gradient background on a button in flex 4
              reidabel Level 1

              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 ...

               

               

              • 4. Re: how do you make a gradient background on a button in flex 4
                Peter deHaan Level 4

                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-contr ol-in-flex-4/ to see what the accentColor vs emphasized bits do.

                 

                 

                Peter