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

    TitleWindow with dynamic background gradient

    DBxMarc

      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:fill>
                <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:LinearGradient>
           </s:fill>
           <s:filters>
                <s:GlowFilter alpha="0.85" color="#000000" quality="2"/>
           </s:filters>
      </s:Rect>


      There is the result I want:

      titlewindow.jpg

        • 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"
                         xmlns:s="library://ns.adobe.com/flex/spark"
                         xmlns:mx="library://ns.adobe.com/flex/mx">
          
              <s:layout>
                  <s:HorizontalLayout horizontalAlign="center" verticalAlign="middle" />
              </s:layout>
          
              <fx:Style>
                  .foo1 {
                      bgFillGrad: red,haloOrange;
                  }
                  .foo2 {
                      bgFillGrad: yellow,haloGreen;
                  }
                  .foo3 {
                      bgFillGrad: haloBlue,purple;
                  }
              </fx:Style>
          
              <s:TitleWindow id="titlWin1" styleName="foo1" skinClass="GradTitleWinSkin">
                  <s:Button />
              </s:TitleWindow>
          
              <s:TitleWindow id="titlWin2" styleName="foo2" skinClass="GradTitleWinSkin">
                  <s:Button />
              </s:TitleWindow>
          
              <s:TitleWindow id="titlWin3" styleName="foo3" skinClass="GradTitleWinSkin">
                  <s:Button />
              </s:TitleWindow>
          
          </s:Application>
          
          
          
          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.
          Peter

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

            Good! Thank's a lot!