Flash AS3 Tutorials Center | Interesting Flash Animation Tutorials | Valuing Flash Animation Tutorials | Flash ActionScript and Animation Home

AS3 Beginner Tutorials | AS3 Basic Lessons | AS3 Valuing Courses | AS3 Components Tutorials | AS3 and PHP Interaction Tutorials
AS3 Practical Tutorials | AS3 Animation Techniques | AS3 Transition Effects Tutorials | AS3 Download Upload Files | AS3 Particle Systems
Communication Between Flash Movies with AS3 | AS3 and JavaScript interaction | AS3 Matrix Transformation | AS3 Physics Simulation Tutorials

Flash AS Tutorial: Load External Image to Loader and Sprite (2)

The benefits of loading external images to sprite is that you can animate the sprite easily with Flash ActionScript.

Please update flash player to view this Flash ActionScript tutorial!

Flash Tutorial Content:

After the Sprite has been displayed on the MainTimeline of Flash Movie with Flash ActionScript, you can do some animation on it very easily, for example, move it, rotate it, etc.

The complete Flash Movie is shown as above, you may try how it works before you start this Flash tutorial.

Flash ActionScript Codes:

var imageLoaded:Boolean = false;

 

// Create a new Sprite for the content to load into
var logo:Sprite = new Sprite();

 

// Set display location of the Sprite
logo.x = 160;
logo.y = 50;

 

// Create a new Loader to load the image
var myLoader = new Loader();


image1_btn.addEventListener(MouseEvent.CLICK, loadImage1);

 

function loadImage1(evt:MouseEvent):void {

// URL of the external image content
myLoader.load(new URLRequest("logo.png"));

}

 

// Listen error events for the loading process
myLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, loadError);
myLoader.contentLoaderInfo.addEventListener(SecurityErrorEvent.SECURITY_ERROR, loadError);

 

function loadError(event:ErrorEvent):void {

// Display error message to user in case of loading error.
output_txt.text = "Sorry that there is an error during the loading of an external image. The error is:" + "\n" + event;

}

 

// Listen when the loading of image is completed
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);

 

function loadComplete(event:Event):void {

// Add the Loader on the Sprite when the loading is completed
logo.addChild(myLoader);
// Display the Sprite on the MainTimeline
addChild(logo);
// Set imageLoaded to true so that the Image can be unloaded
imageLoaded = true;

}

 

// Function to remove the Loader
function removeImage(evt:MouseEvent):void {

if (imageLoaded == true) { myLoader.unload();
removeChild(logo);
// Set imageLoaded to false to prevent error when no Image loaded
imageLoaded = false;
// Remove the Event Listener when not in use
stage.removeEventListener(Event.ENTER_FRAME, rotateLogo);
}

}

 

remove_btn.addEventListener(MouseEvent.CLICK, removeImage);

 

function rotateLogo(evt:Event):void {

if (imageLoaded == true) { stage.addEventListener(Event.ENTER_FRAME, rotateLogo);
myLoader.rotation += 10;
}

}

 

rotate_btn.addEventListener(MouseEvent.CLICK, rotateLogo);

Download Flash Source File:

Flash Source File load-image-3.fla

Remarks:

Sometimes you would like to control the layer or depth of the external image loaded into the Flash Movie. The most easiest way is to insert an empty MovieClip into the desired layer of Flash Movie. Then load the external image into the empty MovieClip. The next two Flash ActionScript tutorial will show how to do that.