2 Replies Latest reply on Nov 10, 2010 10:03 AM by DBxMarc

    TitleWindow with dynamic background gradient


      I'm new to Flex 4 and how to skin component with sparks. I'm trying to make a custom TitleWindow with a dynamic background gradient set in a stylesheet.

      Is there a way to set a CSS Class to a gradientEntry?


      That is my actual code for the gradient:


      <s:Rect height="406" d:id="3" width="430" x="0" y="0">
                <s:LinearGradient rotation="270" scaleX="406.028" x="214.981" y="406.028">
                     <s:GradientEntry color="#303030" ratio="0"/>
                     <s:GradientEntry color="#141414" ratio="0.854545"/>
                     <s:GradientEntry ratio="1"/>
                <s:GlowFilter alpha="0.85" color="#000000" quality="2"/>

      There is the result I want:


        • 1. Re: TitleWindow with dynamic background gradient
          Peter deHaan Level 4

          Here is a crude example which I managed to get working. Not sure how ideal it is, but it seems to work:


          <?xml version="1.0" encoding="utf-8"?>
          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                  <s:HorizontalLayout horizontalAlign="center" verticalAlign="middle" />
                  .foo1 {
                      bgFillGrad: red,haloOrange;
                  .foo2 {
                      bgFillGrad: yellow,haloGreen;
                  .foo3 {
                      bgFillGrad: haloBlue,purple;
              <s:TitleWindow id="titlWin1" styleName="foo1" skinClass="GradTitleWinSkin">
                  <s:Button />
              <s:TitleWindow id="titlWin2" styleName="foo2" skinClass="GradTitleWinSkin">
                  <s:Button />
              <s:TitleWindow id="titlWin3" styleName="foo3" skinClass="GradTitleWinSkin">
                  <s:Button />
          And I attached my custom Spark TitleWindow skin, GradTitleWinSkin.mxml. It was a bit too long to paste here. The code I modified was around lines 244-265, plus I added the following code around lines 106-107.
          grad1.color = String(getStyle("bgFillGrad")).split(",")[0];
          grad2.color = String(getStyle("bgFillGrad")).split(",")[1];
          Probably some better ways to do this, but this was fast and seemingly worked (although I didnt add any error checking, so I dont know what would go wrong if you passed 0,1, or 3+ colors to the custom bgFillGrad style.

          • 2. Re: TitleWindow with dynamic background gradient
            DBxMarc Level 1

            Good! Thank's a lot!