Load and Display Image in Flash Builder 4

There are 3 methods for loading image in flash builder 4:

1) Load and Display image on Stage:


<?xml version="1.0" encoding="utf-8"?>
<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/mx" minWidth="500" minHeight="500" applicationComplete="loadImage()">

<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<fx:Script>
<![CDATA[
import flash.display.*;
import flash.events.*;
import flash.net.*;
import mx.core.*;

private var loader:Loader = new Loader();
private var ui:UIComponent = new UIComponent();
private var sprite:Sprite = new Sprite();
                        private var mc:MovieClip = new MovieClip();

private function loadImage():void
{
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
loader.load(new URLRequest("mypic.jpg"));
trace("started loading");
}

private function imageLoaded(event:Event):void
{
loader.width=50;
loader.height=50;
systemManager.stage.addChild(loader);
}

]]>
</fx:Script>
</s:Application>

if we want to set height width of image then set the loader height and width and than addChild the image in stage. else if we want to load image in actual size than there is no need to set the loader height and width.


2) There is an another way to load image if  you wanted to add a Flash DisplayObject to the main Application canves you would wrap the DisplayObject in a UIComponent then add the UIComponent, then add the UIComponent to the Application as a child, like this:

ui.addChild(loader);

this.addElement(ui);

3) Another way to load and display an image inside a MovieClip: 

                         

ui.addChild(mc);

this.addElement(ui);

mc.addChild(loader);