Setting or clearing the application background image in Flex

The following example shows how you can remove the default gradient background image for a Flex application by setting the backgroundImage style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/14/setting-or-clearing-the-application-background-image-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        applicationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.events.ItemClickEvent;

            [Bindable]
            private var defaultBackgroundImage:Class;

            private function init():void {
                defaultBackgroundImage = Application.application.getStyle("backgroundImage");
            }

            private function toggleButtonBar_itemClick(evt:ItemClickEvent):void {
                Application.application.setStyle("backgroundImage", evt.item.data);
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="default" data="{defaultBackgroundImage}" />
        <mx:Object label="null" data="{null}" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="backgroundImage:">
                <mx:ToggleButtonBar id="toggleButtonBar"
                        dataProvider="{arr}"
                        itemClick="toggleButtonBar_itemClick(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

</mx:Application>

View source is enabled in the following example.

You can also set the backgroundImage style in an external .CSS file, or <mx:Style /> block, as shown in the following snippet:

<mx:Style>
    Application {
        backgroundImage: ClassReference(null);
    }
</mx:Style>

Or, you can set the backgroundImage style in MXML, as shown in the following snippet:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        backgroundImage="{null}">

5 thoughts on “Setting or clearing the application background image in Flex

  1. I am loading a Flex app into a Flash app (I know, don’t ask). The Flex app is made transparent (see example above). Still the Flex app will take over the mouse if it hovers over the loaded FlexApp.swf. Can this be prevented or is this inherent in the way the Flex framework has been set up?

  2. previous didnt come out

    add this to your application starting tag

    paddingBottom=”0″ paddingLeft=”0″ paddingRight=”0″ paddingTop=”0″

    and the part you’re trying to hide will be completely gone, no need for the complicated response

  3. How i can make magmatic lasso tool to remove background color. And then crop that image, and need to save .png in flex. Please provide me tutorial or code.

Comments are closed.