This might save you some time if you’re building apps with Flex 4 Beta (Gumbo). In Spark Applications there is no backgroundAlpha property within you main MXML application file. To create a transparent Flex 4 background you’ll need to do the following:

1) Create a custom application skin MXML file.

2) Set the skinClass of your application MXML to the custom skin file: you can do this in the MXML for your app – eg. skinClass=”com.mycompany.myproject.skins.MyAppSkin”.

Search for the default ApplicationSkin.mxml in the Flex 4 SDK. Duplicate this file, rename it and place it within your project source. In the new skin code I just added alpha=”0″ to the backgroundRect declaration.

That’s it 🙂


  1. philip andrew

    Thanks! I use this so I can place my Gumbo app over the html. very useful as a CMS editing system.

  2. tony montana

    seriously? flex 4 so far, has been a f****ucking pain in the a**ss!!!! they’ve gone back to splash 2.0 days. little things like this have been driving me insAn3.

    why should I have to cutNpaste an old class, just to reuse existing functionality that used to be just 10 characters long?

    this works btw, but it’s ludicrous. I feel like I’ve gone to plaid. And now I’m a sad panda. 🙁

  3. Osman Ayabakan

    Fuck you flex 4 sdk. BackgroundImage not found :/

  4. Nick Kuh

    Yeah… they changed Flex UI Components and lost the background image style property in most (or all) cases which I think was a really bad move on Adobe’s part…

  5. Theo

    Could someone just send me a complete example.

    I don’t seem to get this together.


  6. Zarate

    You don’t need to copy the whole ApplicationSkin.mxml file, you can extend it.

    Just create and do this:

    import spark.skins.spark.ApplicationSkin;

    public class MySkin extends ApplicationSkin
    public function MySkin()
    backgroundRect.alpha = 0;

    Thanks a lot for the hint anyway : )


  7. Tom

    They have changed alsmot every thing ! Its a new start for every one… just a lot of waste of time ;-(

  8. tabman

    You rock 😉

    but you also need to add the following to javascript:
    params.wmode = “transparent”;

  9. edward

    Can we find flex code from any online User Interface which uses flex?

  10. Julia

    Awesome – this is exactly what I was looking for! Thanks!

  11. Bhargav

    Answered my own question. You just need to rrcrtustuee the skin a little bit and put the scroller back around the RichEditableText element, and bind the scroll position of the “gutter” to the scroll position of the text editing area:


    Mountains or the beach. A dilemma most people would love to have. I think I would take the beach. On second thought maybe the mountains would be better. But then…….

  13. Oh my gosh the almighty, that website is definitely great! The way you make it happen?! I in no way think about to determine that good internet site with the much useful details! Thanks for this!

  14. Tusen takk for i gÄr Anette, det var kjempekoselig Ä treffe deg og alle de andre bloggerne! Gleder meg allerede masse til neste gang!Klem Tonje

Leave a reply