[Flex Labs] Overlaying a tiled PNG on an application background gradient in flex.
This is quite a simple tutorial. It is more about design than programming. It will cover adding an application gradient background, and then overlaying a tiled PNG pattern on top. With a little creativity, this effect can make a nice application or website background that is not easily reproducible with html / css.
First, begin by setting up your application. First we’ll add a background gradient, and set up a few other parameters:
| <?xml version=”1.0” encoding=”utf-8”?> <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” width=”100%” height=”100%” fontAntiAliasType=”advanced” layout=”absolute” backgroundGradientColors=”[#535353, #2f2f2f]” horizontalScrollPolicy=”off”> |
Next, we add a VBox that will take up the whole application background. The CSS class dottedBG will contain the location for the tile image:
| <mx:VBox width=”100%” height=”100%” verticalAlign=”top” horizontalAlign=”center” verticalGap=”0” paddingLeft=”0” paddingRight=”0” paddingTop=”30” paddingBottom=”20” styleName=”dottedBG” horizontalCenter=”0”> |
Finally, add the CSS class:
| .dottedBG{ background-image: Embed(“dottedtile.png”); } |
I will post the source for this example soon. Feel free to post links to your own examples.
Leave a comment