So easy to create transparent Flash-based AIR application window

In my previous post, I said that it was easy for flash developer to develop AIR application. I knew that AIR application could be irregular shape but I didn’t know how to do it. Today I had some time to test it out. At first I thought I would need to create some sort of mask or some shape with alpha channel, etc… Turned out that I didn’t need to do anything other than to specify the Window Chrome style as transparent at the AIR application and installer settings. That easy. Hey I am having fun!

Advertisements

~ by brianchau on October 12, 2007.

10 Responses to “So easy to create transparent Flash-based AIR application window”

  1. I so wish devs would stop changing the chrome or making applications an irregular shape, they look so much more professional n the OS’s chrome. Don’t do it because you can ‘Skip Intro syndrome’.

    Lets face it every app worth having on your comp uses the native chrome.

    • Adobe and its entire collection of commercial grade, industry standard software would like to have a word with you.

  2. Hi.. I have designed an application using flex builder3 which runs on Adobe AIR.I tried making the window transparent but not able to do that. I have set the transparent property to true and systemchrome to none. but still not able to get. Plz help me in this regard

  3. Ash, below is from the doc (http://livedocs.adobe.com/flex/3/html/help.html?content=Part5_AIR_1.html):

    Transparency in an MXML application window
    By default, the background of an MXML window is opaque, even if you create the window as transparent. (Notice the transparency effect at the corners of the window.) To present a transparent background for the window, set a background color and alpha value in the style sheet or element contained in your application MXML file. For example, the following style declaration gives the background a slightly transparent green shade:

    WindowedApplication
    {
    background-alpha:”.8″;
    background-color:”0x448234″;
    }

  4. Is there any way to keep the system chrome for the top bar (expand, minimize, close, etc.) but to make the background of the application transparent in Flash?

  5. Eric, I haven’t tested it yet. Below is from the AIR doc on Window transparency:

    Window transparency
    To allow alpha blending of a window with the desktop or other windows, set the window’s transparent property to true. The transparent property must be set before the window is created and cannot be changed. The transparent property is set in the NativeWindowInitOptions object used to create a window. (For the initial window created for your application, the initialization options are taken from attributes of the initialWindow element in the application
    descriptor file.)
    A transparent window has no default background. Any window area not occupied by a display object will be invisible. If a display object has an alpha setting of less than one, then any thing below the object will show through, including other display objects in the same window, other windows, and the desktop. Rendering large alpha-blended areas can be slow, so the effect should be used conservatively.
    ADOBE PRODUCT X.0
    User Guide
    10
    Transparent windows are useful when you want to create:
    •Applications with borders that are irregular in shape
    •Applications that must “fade out” or appear to be invisible
    Transparency cannot be used for windows with system chrome.

  6. For Flex 3 it should be:

    Application {
    backgroundAlpha: 0;
    }

    And in the html:

  7. How do the same one in FlashBuider4 with Flex4?

  8. i try to find how to do it too, help 😦

  9. This is what I found to be working. http://www.bullraider.com/flex/flex-tips-and-tricks/flex-irregular-shaped-window

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: