On this page we discuss the process of loading external jpeg files in our applet. We use the Loader class which is new to ActionScript 3. We also show how event listeners are set up to provide the functionality that we want.
We begin on line about 168 by creating an instance of the Loader class and storing it in a variable called photoHolder. The Loader class is a subclass of the DisplayObjectContainer class. So any instance of the Loader class is a DisplayObjectContainer object but of a special kind. In particular, an instance of Loader can hold only one child at a time, which is the most recently loaded content. The loaded content automatically becomes a child of the Loader class instance. The Loader instance itself can be added to the Display List. Below, we create photoHolder, make it a child of the MainTimeline, and position it the way we want.
var photoHolder:Loader=new Loader();
this.addChild(photoHolder);
photoHolder.x=312;
photoHolder.y=90;
A note: You can add an instance of Loader to the Display List and have its only child be automatically displayed, or you can add to the Display List the downloaded bitmap, which is stored in yourLoader.content property. In our case, the first approach is more practical.
When the user double-clicks on a face of the tetrahedron, the corresponding jpeg is supposed to load. Below is the code that accomplishes that. (For simplicity, we show only one face, the one drawn in spFaceHolder0.)
spFaceHolder0.addEventListener(MouseEvent.DOUBLE_CLICK,face0Clicked);
function face0Clicked(e:MouseEvent):void {
if(!isLoading){
messageTxt.text="Loading...";
photoHolder.load(new URLRequest("Sunset.jpg"));
}
}
When double-clicked, the face will display a message 'Loading...' in the box messageTxt present on the Stage, and then evoke the method 'load' on our instance photoHolder of the Loader class, photoHolder.load(..). The method requires at least one parameter, an instance of URLRequest class. We create such an instance on the fly with new URLRequest(..) code. URLRequest requires a local or global address of the file to load. If our swf file is embedded in an html page, the local address is relative to the html page. To avoid any confusion of how local addresses are resolved, we have placed our swf, html, and all jpg files in the same directory.
You may notice that the listener will execute the code only if the value of our Boolean variable 'isLoading' is false. We set it up that way to avoid two files trying to load at the same time should the user keep double-clicking faster than the files can download. Below you will see how listeners added to photoHolder handle the value of 'isLoading' variable and the message in messageTxt box.
Each instance of the Loader class, in our case, photoHolder, has contentLoaderInfo property. That property (an object itself) can respond to a number of events related to loading. Event.OPEN is dispatched when our jpeg begins to load. We set 'isLoading' to 'true', so other faces will not repond to clicks while a content is loading. Event.COMPLETE is dispatched when the content finishes loading. We set 'isLoading' to 'false' and send the text 'Done' to messageTxt box.
photoHolder.contentLoaderInfo.addEventListener(Event.OPEN,beginLoad);
function beginLoad(e:Event):void {
isLoading=true;
}
photoHolder.contentLoaderInfo.addEventListener(Event.COMPLETE,doneLoad);
function doneLoad(e:Event):void {
messageTxt.text="Done.";
isLoading=false;
}
A Note on ProgressEvent.PROGRESS. Besides the two events that we used above that contentLoaderInfo can listen to, there is another very useful event: ProgressEvent.PROGRESS. We didn't use it in our example because our files are so small that it doesn't make sense to try to display the percentage of bytes loaded. With larger files that ability is very important. Suppose that we have a dynamic text field on the Stage, progressTxt and forget about messageTxt and isLoading variable. The following code would show progress of the download.
photoHolder.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,showProgress);
function showProgress(e:ProgressEvent):void {
progressTxt.text="Loaded: "+String(Math.floor(e.bytesLoaded/1024))+
" KB of "+String(Math.floor(e.bytesTotal/1024))+" KB.";
}
A Note: Why the DOUBLE_CLICK? If you take a look at our fla file, you will see that spBoard responds to MOUSE_DOWN and MOUSE_UP events to know when to rotate the tetrahedron. If we required the user to click instead of double-click on a face to load an image, loading would also take place when MOUSE_DOWN and MOUSE_UP would happen over the same face. That would cause a somewhat confusing behaviour. Try it if you don't like the DOUBLE_CLICK event. spBoard also responds to ROLL_OUT to begin the auto-rotate.
