3.4 Loading external files (images, .swf)

In this exercise, we will learn how to load external files. We have already studied it with sound, now we will do it with visual assets – 3 image files, in this example. The same procedure can be applied to load .swf files. The images are from the Heat Seeker interactive audiovisual project I have developed with André Carrilho (using Flash), as Video Jack.

1. First, some thoughts on the usefulness of loading external files. When creating projects for the web or network devices, speed of loading is quite important. In a large project, it is better to load only what is being accessed in a given time. It is also a good practice to separate the structure of the project from the content, as the content might change. For example, images of a person or a team might change in time; or of a project which is a work in progress. On the other hand, you might want to change or replace a structure while maintaining the content, so structure/content separation is again useful. Besides, many projects rely on loading content from databases (as we will see when approaching XML), so loading external, dynamic content becomes a necessity.

2. Let’s begin our exercise by creating 3 buttons for loading 3 different images. These buttons will be rounded rectangles colored differently, partially cropped by the images to look like tabs:

var rectangle1:Sprite = new Sprite();
stage.addChild(rectangle1);
rectangle1.x=50;
rectangle1.y=5;
rectangle1.graphics.beginFill(0xFF0000);
rectangle1.graphics.drawRoundRect(0, 0, 100, 20, 10);
rectangle1.buttonMode=true;

var rectangle2:Sprite = new Sprite();
stage.addChild(rectangle2);
rectangle2.x=225;
rectangle2.y=5;
rectangle2.graphics.beginFill(0x0000FF);
rectangle2.graphics.drawRoundRect(0, 0, 100, 20, 10);
rectangle2.buttonMode=true;

var rectangle3:Sprite = new Sprite();
stage.addChild(rectangle3);
rectangle3.x=400;
rectangle3.y=5;
rectangle3.graphics.beginFill(0xFF00FF);
rectangle3.graphics.drawRoundRect(0, 0, 100, 20, 10);
rectangle3.buttonMode=true;

3. Let’s create an instance of the Loader class, which will be the container for the images (myLoader). This uses the same logic as the Sound class we have seen, which was a container for sound files. In this case, Loader is a graphical entity, and it can be added to the stage, in a specific position. Images will be loaded taking the position of the Loader into account (as its top-left starting point). We will place this loader in pixel (25,20):

var myLoader:Loader = new Loader();
stage.addChild(myLoader);
myLoader.x=25
myLoader.y=20;

4. Now, let’s create URLRequests for the 3 images, and load the first one by default into our myLoader object:

var image1:URLRequest = new URLRequest("videojack1.jpg");
var image2:URLRequest = new URLRequest("videojack2.jpg");
var image3:URLRequest = new URLRequest("videojack3.jpg");
myLoader.load(image1);

An image should now appear. However, the buttons are not working yet.

5. Let’s then create the listeners and functions for loading images 1 to 3 by pressing the respective buttons on top:

rectangle1.addEventListener(MouseEvent.CLICK, loadImage1);
function loadImage1(e:MouseEvent):void{
myLoader.load(image1);
}
rectangle2.addEventListener(MouseEvent.CLICK, loadImage2);
function loadImage2(e:MouseEvent):void{
myLoader.load(image2);
}
rectangle3.addEventListener(MouseEvent.CLICK, loadImage3);
function loadImage3(e:MouseEvent):void{
myLoader.load(image3);
}

6. The whole code should look like this:

var rectangle1:Sprite = new Sprite();
stage.addChild(rectangle1);
rectangle1.x=50;
rectangle1.y=5;
rectangle1.graphics.beginFill(0xFF0000);
rectangle1.graphics.drawRoundRect(0, 0, 100, 20, 10);
rectangle1.buttonMode=true;
var rectangle2:Sprite = new Sprite();
stage.addChild(rectangle2);
rectangle2.x=225;
rectangle2.y=5;
rectangle2.graphics.beginFill(0x0000FF);
rectangle2.graphics.drawRoundRect(0, 0, 100, 20, 10);
rectangle2.buttonMode=true;
var rectangle3:Sprite = new Sprite();
stage.addChild(rectangle3);
rectangle3.x=400;
rectangle3.y=5;
rectangle3.graphics.beginFill(0xFF00FF);
rectangle3.graphics.drawRoundRect(0, 0, 100, 20, 10);
rectangle3.buttonMode=true;

var myLoader:Loader = new Loader();
stage.addChild(myLoader);
myLoader.x=25
myLoader.y=20;
var image1:URLRequest = new URLRequest("videojack1.jpg");
var image2:URLRequest = new URLRequest("videojack2.jpg");
var image3:URLRequest = new URLRequest("videojack3.jpg");
myLoader.load(image1);

rectangle1.addEventListener(MouseEvent.CLICK, loadImage1);
function loadImage1(e:MouseEvent):void{
myLoader.load(image1);
}
rectangle2.addEventListener(MouseEvent.CLICK, loadImage2);
function loadImage2(e:MouseEvent):void{
myLoader.load(image2);
}
rectangle3.addEventListener(MouseEvent.CLICK, loadImage3);
function loadImage3(e:MouseEvent):void{
myLoader.load(image3);
}

And the final result should look like this:

Download files: ex18-loader.zip

Advertisements

About Nuno Correia

audiovisuals+interaction
This entry was posted in 3. Project Management and tagged . Bookmark the permalink.

One Response to 3.4 Loading external files (images, .swf)

  1. Pingback: Flash and ActionScript | Software Studies for Media Designers

Leave a Reply

Please log in using one of these methods to post your comment:

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