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.
The release of Flash Builder 4 and the new Spark components means most Flex developers will be going through the process of discovering what has changed from Flex 3 to Flex 4. For the most part the changes are pretty well documented and with a little trial and error things that used to work and now don't can be easily adjusted to work again. Over the next few months as I work on a few projects using Flash Builder 4 and Flex 4 with the new Spark components I will be sharing my experiences, the tricks I learn and how to avoid the pitfalls I will undoubtably find myself in.
One of the first pitfalls I have run across is using the MX navigator containers (ie ViewStack, TabNavigator, etc). The Spark component set has no corresponding components and due to differences in the Spark containers you can not simply add a Spark group to a navigator container like you can an MX container. You need to wrap the Spark component(s) in a NavigatorContent instance first. It's a little cumbersome but I have found that if the view you are creating will only be used in a navigator container then it's easiest to simply have you component/view extend the NavigatorContent class.
There are some basic demos here and here on how to use the NavigatorContent in a navigation container. The problem I ran into was with the creation policy. As you likely know navigation containers have a creationPolicy property that determines when the children get created. Ideally you use the default setting which means the children only get created as needed. The issue I had was in Flex 3 you could have a creationComplete event listener on the navigator children and it would only fire once the container was displayed. In the function called from the event you could access any of the container's children as you knew at that point they had all been created.
Unfortunately in Flex 4 with the Spark components this no longer holds true. When you use the NavigatorContent class the creationComplete event is dispatched immediately when the navigation container (ie ViewStack is added to the stage) however if the creationPolicy is not set to all, the actual children on the NavigatorContent have not yet been created and you end up with RTE's when referencing the children. To prevent this from happening you need to listener to a new event, the 'contentCreationComplete' event which only fires once the NavigatorContent becomes visible.
You can quickly see in the demo below how the two differ (right click to view the source).
The MX Views only fire the 'creationComplete' when the view is displayed. At that point any children of the view can be accessed. The Spark views however, all fire the 'creationComplete' when they are first added to the ViewStack. At that point accessing any child object of the view will throw an error. It's after the 'contentCreationComplete' that you can access children of the Spark view. It's a little semantic difference, but it's a huge headache the first time you run across it.
If you live in Massachusetts and are concerned about the education system you should visit Standforchildren.org . It's not very often I work with non-profit organizations however this was a really neat project to be involved with. Stand For Children wanted to get the message across to legislators in Massachusetts and across the US that childrens' needs and rights regarding public education need to be heard.
The team at Stand For Children wanted people to actively create, post and share virtual signs about their stand for the public education system. Brian from the The ID Corp came up with a great concept and using some Flash and PHP magic I was able to execute it.
Living in Canada it's an entirely different situation with public education. I was shocked to find out just how different (and not for the better) the US public education system is. Stand for Children has a great team and I hope this campaign and more like it will help pave the way for a more promising future for America's youth.
So go ahead. Take a stand.
Derrick Grigg is a Rich Internet Application (RIA) freelance contractor based in Toronto, Canada. He specializes in architecting and developing applications using a variety of technologies, most notably Flash, Flex and Coldfusion.
