Flex Spark application background alpha

Sometimes when creating a web based Flex application you want the background to be transparent or semi-transparent. In Flex 3 this involved two steps, setting the ‘backgroundGradientAlphas’ property on the mx:Application to [0,0] or something less than 1 and setting the ‘wmode’ on the swf to ‘transparent’. Now with Flex 4 (Spark) it’s not quite so easy, there is no ‘backgroundGradientAlphas’ style on the s:Application.

If you want background alpha on the new Spark Application component you need to create a custom skin and a style to the spark:Application. It’s surprisingly easy and I actually like this method because it gives the developer much more freedom in how they would like to implement background transparency.

Step 1: modify the default application. Add a new style property using the fx:Metadata tags and tell the application to use the new skin class you are about to create with the ‘skinClass’ attribute.

 <?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"
 			   skinClass="com.dgrigg.skins.ApplicationSkin" 
 			   backgroundColor="0xFFFFFF" 
 			   backgroundAlpha="0"
 			   width="100%"
 			   height="100%">
 	<fx:Metadata>
 		[Style(name="backgroundAlpha",type="Number",default="0")]
 	</fx:Metadata>
 </s:Application>
 

Step 2: set the new ‘backgroundAlpha’ style value to whatever you want in the s:Application declaration using the ‘backgroundAlpha’ attribute (see above).

Step 3: create a new version of the default spark.skins.spark.ApplicationSkin class and change the following section from this:

 <s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0"  >
 	<s:fill>
 		<s:SolidColor color="{getStyle('backgroundColor')}" />
 	</s:fill>
 </s:Rect>
 

to this:

 <s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0"  >
 	<s:fill>
 		<s:SolidColor color="{getStyle('backgroundColor')}" 
 		alpha="{getStyle('backgroundAlpha')}" />
 	</s:fill>
 </s:Rect>
 

And remember to set the wmode to transparent on object/embed tag. The great part about using a custom skin is you are free to implement a background alpha however you wish, you can do a plain alpha fill, or you could do something more exotic like a radial or linear alpha fill.

Comments RSS 2.0 feed. You can leave a response, or trackback from your own site.