7 Replies Latest reply on Dec 30, 2008 2:09 PM by Jim Daniel

    Way to change how the background gradient

    Jim Daniel Level 1
      Is there a way to have the background gradient that is not an even transition from top to bottom. I need the gradient transition to occur totally in the upper quarter of the stage and the lower three fourths an even color. This can be done in Flash so I don't think it is unreasonable to be able to do it in Flex. I'm hoping that it is just I'm missing (over looking) something.
        • 1. Re: Way to change how the background gradient
          rtalton Level 4
          The gradient background does not let you specify gradient "stops", so you're out of luck there.
          But you could use the graphics class to draw complex gradients onto a sprite which could then be place in the background and sized to the application window.
          • 3. Re: Way to change how the background gradient
            Level 7

            "Jim Daniel" <webforumsuser@macromedia.com> wrote in message
            news:gjbm8u$5uc$1@forums.macromedia.com...
            > Is there a way to have the background gradient that is not an even
            > transition
            > from top to bottom. I need the gradient transition to occur totally in
            > the
            > upper quarter of the stage and the lower three fourths an even color.
            > This can
            > be done in Flash so I don't think it is unreasonable to be able to do it
            > in
            > Flex. I'm hoping that it is just I'm missing (over looking) something.

            Application has backgroundGradientColors, and you can simply have several
            that are all the same until the point where you want to change it. There
            may be other objects that have this.


            • 4. Re: Way to change how the background gradient
              rtalton Level 4
              The Flex components only support two-color gradients.
              If you want to get a little creative, you can create a skin for a Flex component which uses a complex gradient.
              Here's a finished example of how it can be done:
              http://www.anaheimjobs.net/samples/gradient/

              I used the Flex skinning kit for Illustrator to create a 3-stop blue-green gradient background for a Text Area component. The gradient only appears in the upper quarter of the text Area. I imported this into Flex, and assigned the style to a TextArea which is set to 100% of the width and height of the application. Voila.
              Adobe has free skinning kits for Flash and Photohsop too. But Illustrator is my weapon of choice for this because the output is vector and scales well. You could do this in Flash, but Illustrator gives me lots of control if I want to get very complicated with fills and gradients.

              • 5. Re: Way to change how the background gradient
                Level 7

                "rtalton" <webforumsuser@macromedia.com> wrote in message
                news:gjdpbe$r09$1@forums.macromedia.com...
                > The Flex components only support two-color gradients.
                > If you want to get a little creative, you can create a skin for a Flex
                > component which uses a complex gradient.
                > Here's a finished example of how it can be done:
                > http://www.anaheimjobs.net/samples/gradient/
                >
                > I used the Flex skinning kit for Illustrator to create a 3-stop blue-green
                > gradient background for a Text Area component. The gradient only appears
                > in the
                > upper quarter of the text Area. I imported this into Flex, and assigned
                > the
                > style to a TextArea which is set to 100% of the width and height of the
                > application. Voila.
                > Adobe has free skinning kits for Flash and Photohsop too. But Illustrator
                > is
                > my weapon of choice for this because the output is vector and scales well.
                > You
                > could do this in Flash, but Illustrator gives me lots of control if I want
                > to
                > get very complicated with fills and gradients.

                If I want background gradients in something that doesn't support it, I just
                add my own backgroundGradientColors and backgroundAlphas.
                http://livedocs.adobe.com/flex/3/html/skinstyle_3.html

                This has the advantage is that you can use CSS to specify what colors to use
                and how they are to gradate.


                • 6. Re: Way to change how the background gradient
                  rtalton Level 4
                  Yes, the flash.graphics api offers gradients, and that's why I suggested that at first. But after thinking about it, I thought I'd show him an alternative.
                  Until Flex 4 arrives, we have no visual and intuitive way to create graphics from within Flex. Flex has no drawing tools. Writing code to create graphics is an ancient and very ugly process. It may be a good fit for programmers, but not for people used to designing with Adobe's advanced graphics tools, which Jim indicated he's probably used to. That's why I put up an example using Illustator's Flex skinning capabilities. He can do this in Flash just as easily. It took me about 10 minutes, start to finish. I agree using the flash.graphics api within Flex would allow him to change the colors from within Flex, but he could do it quickly enough using Flash or Illustrator and re-exporting the swf, I think. And the benefits of using a graphics tool to draw graphics goes without saying.
                  • 7. Re: Way to change how the background gradient
                    Jim Daniel Level 1
                    Thanks for all the good ideas on how to solve my problem. As I'm a programmer and don't use Illustrator I think I'll be going with Amy's suggested solution.