Preloading SWF, JPG, PNG or GIF files with AS 3.0.

Hi everybody. In a previous tutorial Advanced preloader we have learn how to make a preloader that keeps track of how much of our file has been loaded. In that tutorial we have used a jpg file that was embedded in our swf and keep track of its loading progress. That approach is good when working with embedded files but what if we want to be informed of the loading progress of the external file that we load? This is what we will learn today.We will learn how to load external files (swf, png, jpeg and gif) and we will build a cool preloader to keep track of the loading process.

Let’s go to work.

1. Create a new file by going to File > New select Flash file (ActionScript 3.0) and click Ok.

2. Insert two new layers by going to Insert > Timeline > Layer.

3. Double click on the top layer and name it actions, name the second one mask and the third logo.

4. Lock the actions layer and the mask layer and select the logo layer. Select the Text tool, in the Property Inspector set the text type to static and the font size to 30 and on the stage type a word (your name or something else).Position the text in the middle of the stage. (Tip: with the text selected press Ctrl + X to cut it and Ctrl + V to paste, this will paste the text in the middle of the stage).

5. Lock the logo layer and unlock the mask layer. Go to Tools palette and select the Rectangle tool. In the property inspector set its stroke to none and select a color.

On the stage make a rectangle that covers only the text from the logo layer. Select the rectangle hit F8 set its name to logoMask, its type to MovieClip and the registration point to top left and click Ok.

6. With the rectangle selected set it instance name to logoMask and write down its x position (this will be the maskFinish variable). Select the rectangle and on you keyboard press the left arrow key until the left side of the rectangle it’s near the right side of the text like so:

7. Select the rectangle and write down the x position (this will be the maskStart variable) of the rectangle. Select the mask layer right click and select Mask. We have transformed our layer intro a Mask layer this will mask all the layers that are underneath him.

8. Save you fla file in a new folder and in this folder place the file that you want to load. You can choose between swf, png, jpeg and gif.

9. Select frame 1 from the actions layer hit F9 to open the ActionScript panel and paste the next code:

var maskStart:Number = -31;
var maskFinish:Number = 172;
var maskMove:Number = maskFinish - maskStart;
var myLoader:Loader = new Loader();
var fileURL:URLRequest = new URLRequest("tv_display.swf");
myLoader.load(fileURL);
myLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, fileLoaded);
function fileLoaded(event:ProgressEvent):void {
var procent:Number = event.bytesLoaded/event.bytesTotal*100;
logoMask.x = maskStart + maskMove*procent/100;
if (event.bytesLoaded == event.bytesTotal) {
removeChild(logoMask);
addChild(myLoader);
}
}


10. Change the values of the maskStart and maskFinish variables to your values (the values of the logoMask MovieClip that you have write in steps 6 and 7) and the path of my file with your (new URLRequest("tv_display.swf");).Hit Ctrl + Enter to test your file. To view the preloader progress on the window that appears go to View > Download Settings and chose 56k (from here you can test how fast is loading your file on connections with different speed) after go to View > Simulate Download (or Ctrl+Enter). Now you should see how your preloader working.

Let’s see the code.

We have a variable that holds the start position of the mask (maskStart) and one for the end position of the mask (maskFinish).The maskMove variables calculate the distance that our mask is traversing from the start point to the end point.

Next we declare a Loader object (myLoader) this will load our file and an URLRequest object (fileURL) this holds the path of our file. After we load our external file and add a PROGRESS event to contentLoaderInfo property of myLoader object.

The fileLoaded function is handling the PROGRESS event. Inside this function we have a procent variable that holds the percent of file loaded, we update the x position of the mask in correlation with the procent variable and setup a if condition. We check to see if the bytes loaded is equal with the total bytes. If so we remove our mask and we add to the display list our loader object (myLoader) that contains the external file.

This is all. It’s not complicated; with a few lines of code we are able to load an external file and to setup a preloader.

I hope that you enjoyed the tutorial. If you have questions, suggestions, doubts about the tutorial don’t hesitate to comment.

Until next time have fun learning Flash.

To download the source files go to:Download.