 |
||
Viewing By Entry / Main
Friday, November 3, 2006
Applying background gradients to VBox, HBox, Canvas etc.
Here's a little custom border class I created called SimpleGradientBorder which allows you to use non-solid fills with Flex 2 containers. Here's how it looks (the Container shown here is actually a Canvas):  By setting the border-skin style of a Container to the SimpleGradientBorder class, it's possible to fill Box/Canvas containers with a background gradient. This is just a basic example which only supports two fill colors and always draws a vertical gradient but it is actually pretty easy to modify this example if you need more advanced drawing routines. Note that you must set the border-style style attribute to "solid" on the Container, otherwise the background will not be drawn! Dirk
Comments
Dirk, thanks a lot for the post. This showed me what I was doing differently (and apparently wrong) in my skinning.
Very useful Dirk. Thanks!
Been looking for a way to do this. Thanks so much for the post.
Brilliant, this is a life saver. Thanks for sharing it.
Dirk, thanks for this example. However, it does not work for Canvas because the style fillColors does not exist for it.
Do you have any idea ?
Great work! Thanks for the code. ~N
Dirk, Awesome code. One question. is there a way to set an offset so that you can adjust the midline between the two gradient colors? For example, I'd like my gradient to appear just near the bottom, rather than the from top to bottom. Cannot discern how to do so in your code.
Nice find! I wondered why you would extend HaloBorder and not just RectangularBorder.
@Andrew you need to change the ratios ([0, 255]). g.beginGradientFill("linear", fillColors, [1, 1], [0, 255], m); take a look at the beginGradientFill method
Tink, Thanks. I figured that our right after posting. I modified the class to support using css properties to set the ratios. I created another to handle radial gradiants as well which we use to give a "shadowed corner" look.
thanks so much for this. Very helpful. Is there a way to make the background alpha change? It seems to be solid the whole way through.
I just managed to mash up your gradient canvas with corners, and the more flexible GradientCanvas.mxml component on <a href="http://afoucal.free.fr/index.php/2008/04/29/flex-gradientcanvas-v2-more-background-gradients-more-borders/">Flex"i"MMi</a> which didn't have the ability to round corners to make an especially nice component. Thanks to both of you!
I just managed to mash up your gradient canvas with corners, and the more flexible GradientCanvas.mxml component on <a href="http://afoucal.free.fr/index.php/2008/04/29/flex-gradientcanvas-v2-more-background-gradients-more-borders/">Flex"i"MMi</a> which didn't have the ability to round corners to make an especially nice component. Thanks to both of you!
Thanks for this.
You are the man. Thanks.
|
|
 |
