How do you load an image into a Movieclip in AS 3.0?

How do you load a bitmap image (jpeg, gif,png) or SWF into a movieclip in AS 3.0? In the following example we will create a movieclip which resembles an AS 2 designers asset. We will add the asset to the stage ala attach movie, the AS 3 way and we will load an image into an empty movieclip that has been masked.

Example – designer mc with a mask
Lets start from scratch.
Fire up Flash CS3 and Save it
Select the rectangle tool and open up the properties panel and adjust the rectangle corner radius to 5.
Draw a cornered square on stage (I drew a 115 by 115 square).
Select the cornered square right click (or ctrl click MAC) select Convert to Symbol option.
In the Name dialog enter ‘imagePod’.
In the Type radio buttons select MovieClip.
In the Linkage dialog select Export for ActionScript.

propPanel

Select OK.

Double click on the cornered square we made to access its timeline.
Label the default layer ‘bkg’.
Select the vector cornered square you drew on stage and right click (or ctrl click MAC) select Convert to Symbol option.
In the Name dialog enter ‘bkg’.
Select OK.

Lock the layer.
Add 2 more layers.
Label the top most layer ‘mask’.
Label the layer below the ‘mask’ layer ‘container’.
Open up the Library panel and select the ‘bkg’ movieclip and drag it onto stage.
Select the movieclip, open up the properties panel and adjust the width and height to be 100X100 and adjust the tint to be white.
Select the new white movieclip and place it centered of the bkg movieclip (x = 7.5, y = 7.5).
Double click the ‘mask’ layer.
In the Layer Properties panel Select the Mask radio button.

layerProp1

Select OK.
Lock the ‘mask’ layer.

Create an EmptyMovieclip – Insert – New Symbol.
In the Name dialog enter ’emptyMovieclip.
In the Type radio buttons select MovieClip.
Select OK.

Select the ‘container’ label, open up the Library panel and select the ’emptyMovieclip’ movieclip and drag it onto stage.
Double click the ‘container’ layer, in the Layer Properties panel Select the Masked radio button.

layerProp2

Select OK.
Select the container movieclip (emptyMovieclip) on stage open up the property panel and give it an instance name of ‘container’.
Select the container movieclip and positon it to have the same x,y values as the mask movieclip (x = 7.5, y=7.5).
If you followed the directions correctly you should have a stage that looks like this:

stage

Now back out onto the root timeline and remove the imagePod mc from stage.
The last thing we need to do before typing code is to create a graphic, 100X100 jpeg named ‘cherries.jpg’, and place it in the same folder as the fla.
Now we are ready to type code, first thing we need to do is create the Document class for the fla.
Open up your text editor of choice and type:

package {
import flash.display.*;

public class ImageIntoAMovieclipExample extends Sprite
{

public function ImageIntoAMovieclipExample():void
{

}

}

}

Save the class as ImageIntoAMovieclipExample.as in the same folder as the fla.
Navigate back to the Flash Ide and open the properties panel and under Document class enter ImageIntoAMovieclipExample. We are now ready to enter the rest of the code, navigate back to the class and type:

package {
import flash.display.*;
import flash.events.Event;
import flash.net.URLRequest;

public class ImageIntoAMovieclipExample extends Sprite
{
private var container:MovieClip;
private var pod:MovieClip;
private var imgLoader:Loader;

public function ImageIntoAMovieclipExample():void
{
pod = new imagePod();
pod.x = 25;
pod.y = 25;
addChild(pod);
container = pod.container;
loadImage();
}

private function loadImage():void
{

imgLoader = new Loader();
imgLoader.contentLoaderInfo.addEventListener(Event.INIT,initImage);
imgLoader.load(new URLRequest(‘cherries.jpg’));

}
private function initImage(evt:Event):void
{
trace(“image init”);
container.addChild(imgLoader.content);
}

}

}

So, the first thing you will notice is that we imported the events and the url request which will help us out with loading.

import flash.events.Event;
import flash.net.URLRequest;

The next thing we do is add the var for the loader, which will load up the asset/ jpeg. We add the vars for the container where we want our image to load into and we add the var pod that will be necessary for attaching our movieclip to stage .

private var container:MovieClip;
private var pod:MovieClip;
private var imgLoader:Loader;

Next we add code to the constructor ImageIntoAMovieclipExample.

public function ImageIntoAMovieclipExample():void
{
pod = new imagePod(); //this line a code assigns the pod var to equal the imagePod object/ class.
pod.x = 25; //we position the image pods x placement.
pod.y = 25; //we position the image pods y placement.
addChild(pod); // then we attach the image pod to stage.
container = pod.container; // this line of code sets the container var to the value of the image pod movieclips child movie ‘container’.
loadImage(); // we then call the load image method which loads up our asset.

}

The loadImage() method handles the loading.

private function loadImage():void
{

imgLoader = new Loader(); //create the loader object
imgLoader.contentLoaderInfo.addEventListener(Event.INIT,initImage); // add an INIT event to the loader object.
imgLoader.load(new URLRequest(’cherries.jpg’)); // load up the ‘cherries.jpg’ image.

}

Finally, we have the last method which places your image into the container movieclip.

private function initImage(evt:Event):void
{
trace(”image init”);
container.addChild(imgLoader.content); // all this does is reference the container mc in your image pod and adds the loaded image as its child.
}

And that is how you load an image into a movieclip. The following code is just an adjustment which simply hides the pod and then reveals it when the image has loaded. I achieve this by setting the image pod alpha to 0. I add another listener event which tells me when the image has completely loaded and then I set the image pod alpha to 100 or 1.

package {
import flash.display.*;
import flash.events.Event;
import flash.net.URLRequest;

public class ImageIntoAMovieclipExample extends Sprite
{
private var container:MovieClip;
private var pod:MovieClip;
private var imgLoader:Loader;

public function ImageIntoAMovieclipExample():void
{
pod = new imagePod();
pod.x = 25;
pod.y = 25;
pod.alpha = 0; //hide the pod for now.
addChild(pod);
container = pod.container;
loadImage();
}

private function loadImage():void
{

imgLoader = new Loader();
imgLoader.contentLoaderInfo.addEventListener(Event.INIT,initImage);
imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,imageLoaded); // add a new event listener which will be triggered when the image has loaded.
imgLoader.load(new URLRequest(‘cherries.jpg’));

}
private function initImage(evt:Event):void
{
trace(“image init”);
container.addChild(imgLoader.content);
}

private function imageLoaded(evt:Event):void
{
trace(“image Loaded”);
pod.alpha = 1; // set the image pod to a value of 100& or visible.

}

}

}

I hope this article helps wrap your mind around how you load an image into a movieclip in AS 3.0. I plan to write another article which will take our current graphical assets and expand it to include a preloader. I will also introduce a different way of class linkage where we create the class instead of Flash generating one for you.

Enjoy!

Download sample files.

2 thoughts on “How do you load an image into a Movieclip in AS 3.0?

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: