Transparent Air application with Flashbuilder
Just a quick one that annoyed me a bit. After my Vacation I came back and was so happy that the Flashbuilder beta was released. It was really necessary coz I wasn’t happy working with Flexbuilder 3 after seeing the Gumbo preview at Max.
So, I started a new AIR Project in Flashbuilder and got stuck imediatly. I wanted a transparent application and this was really easy in Flexbuilder 3.As we now have the Spark framework things have changed a bit. To get an application with no crome and transparency you have to do the following:
- Set system Chrome to none in the application descriptor file
- Set transparent to true in the application descriptor file
- Copy the file ApplicationSkin.mxml from the flex4 library to your project in a folder skins and name it ApplicationAlphaSkin.mxml
- add the state: <s:State name=”normalInactive” /> as first state in ApplicationAlphaSkin.mxml
- set alpa=”0″ on the solidcolor of the backgroundRect
- set the new skin in you application tag: skinClass=”skins.ApplicationAlphaSkin”
Hope this helps someone.
This entry was posted on Sunday, June 28th, 2009 at 15:47 and is filed under Flashbuilder. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
July 23rd, 2009 at 15:26
dont work for me…
July 23rd, 2009 at 15:43
If you would give me some details on what doesn’t work I could help you.
July 24th, 2009 at 14:50
ok :
1) I create one project
2) I set system Chrome to none in the application descriptor file
3) Set transparent to true in the application descriptor file
You talk about ApplicationSkin.mxml, what is it ?
July 24th, 2009 at 16:24
Ok, that won’t be enough to get it transparent.
Flashbuilder uses the Spark Framework for Components and Skinning, which means your Application uses ApplicationSkin.mxml for Skinning your Application. In ApplicationSkin.mxml there is a white rect, which is used to fill the background.
What you need to do is find the file ApplicationSkin.abc in the Flex Framework.
Click on expand Flex 4.0 in your package explorer. Then expand the flex4.swc, spark, skins and finally default. Here you will find ApplicationSkin.abc. Open it and save it as ApplicationAlphaSkin.mxml in your project in a folder called skins. Now just do the last three Steps from the description above.
Essentially all you have to do is have your own ApplicationSkin File, where the rect is transparent and tell the Application to use it instead of the default.
July 29th, 2009 at 00:01
When you say — set the new skin in you application tag:
skinClass=”skins.ApplicationAlphaSkin”
where exactly do you do this? I am completely new to this, was learning/building on Flex 3 project, but decided to switch to FB4. many thanks in advance.
July 29th, 2009 at 09:39
Hi MCE,
the application tag is on top of your main mxml file. It should look like this:
< 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/halo" minWidth="1024" minHeight="768">
September 4th, 2009 at 13:07
THANK YOU. it’s been giving me a headache all day.
April 14th, 2010 at 21:44
FYI-
In version 4, build 272416…
Using backgroundAlpha=”0″ on a WindowedApplication works for me. No changing the Application skin was neccessary. Also need to change systemChrome to none and transparent to true in app descriptor xml.
April 15th, 2010 at 16:01
Hi Joe,
thanks a lot for the information.
As always things change from beta to a final release.