jump to navigation

How to set background image for a windowed application August 21, 2010

Posted by Tournas Dimitrios in Flex.

How to set background image for a windowed application without placing a image control.
The hard way :

< ? xml version="1.0" encoding="utf-8"?>
<m x: WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
        creationComplete="onCreationComplete(event)" height="800" width="800" >

            import mx.events.FlexEvent;

            private var bgLoader : Loader;
            private var bgBitmapData : BitmapData;
            private var bgImagePath:String = "Tulips.jpg"; // set your require background image path

            private function onCreationComplete(event:FlexEvent):void
                bgLoader = new Loader ();
                bgLoader.contentLoaderInfo.addEventListener (Event.COMPLETE, bgLoadingComplete, false, 0, true);
                bgLoader.load (new URLRequest (bgImagePath));
            private function bgLoadingComplete (event:Event):void
                bgBitmapData = new BitmapData (bgLoader.width, bgLoader.height);
                bgBitmapData.draw ( bgLoader );

                bgCanvas.graphics.beginBitmapFill (bgBitmapData);
                bgCanvas.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight);
                bgCanvas.graphics.endFill ();


    <m x: Canvas id="bgCanvas" height="100%" width="100%" />

 < m x: WindowedApplication>  

And with the simple way:

< m x: WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
height="800" width="800" >

// your code

</m x: WindowedApplication>

  // backgroundImage="assets/myimage.jpg" will set as a background Image.


1. Scott F. - March 28, 2011

Is there a way to check for a complete event of the background image loading in the ‘Simple’ way?

tournasdimitrios1 - March 28, 2011

@Scott F
In the WindowedApplication tag, have a applicationComplete=”somefunction()”, and then create a function somefunction() in the ” script tag ” with the code that must be excecuted .

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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s