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.

13 comentarii:

Post a Comment

  • Barry : March 6, 2008 at 3:49 AM

    Your tutorial is very helpful. I now have the idea to make the text fade in fully from invisible to completely visible... not using a mask but setting the opacity or alpha based on the percent of the external file that's loaded at the time. Is that property accessible from AS 3.0?

    Thanks again!

  • Biochimistu : March 6, 2008 at 4:24 AM

    I’m glad that find my tutorial helpful. Yes the alpha property is accessible in AS 3, alpha takes values from 0 to 1.Don’t forget to convert your text to a MovieClip.

  • Anonymous : March 20, 2008 at 11:14 AM

    Does this require ActionScript 3? I am using Flash 8 which only gives me access to AS2. My goal is to create a preloader that will show the status of an external PNG (or multiple PNGs) loading. Your tutorial seems to address this goal. Thanks.

  • Biochimistu : March 21, 2008 at 11:25 AM

    In this tutorial is used ActionScript 3.0.On this blog you will find a tutorial that shows how to make a preloader using ActionScript 2.0: Advanced preloader. All you have to do is to figure how to load the PNGs (it’s not so hard) and to relate that code with you needs.

  • Oxy : April 17, 2008 at 11:58 PM

    I am using your exact code and the text isn't being removed from the stage. I can see it in my movie. Am I missing something?

  • Biochimistu : April 18, 2008 at 11:41 AM

    If you have fallowed exactly the tutorial you should have no problem. Try downloading the source file and confront that with your file.

  • Flash Tips : July 4, 2008 at 6:21 AM

    Thank you very much It helped me a lot. keep posting these type of articles..

  • sol : February 27, 2009 at 9:23 AM

    EXCELENT TUTORIAL! Thank you so much.

    but I have tha same problem as Oxy and I used your downloadable file... hte logo does not dissapear... in my file nor in yours It is just hiddden behind te tv.

    What shall I do? please help me this is very important to me

  • Biochimistu : March 1, 2009 at 10:54 AM

    Hi Sol,
    Set the alpha property of the myLogo movieclip to zero :
    if (event.bytesLoaded == event.bytesTotal) {
    myLogo.alpha = 0;
    removeChild(logoMask);
    addChild(myLoader);
    }

  • sol : March 2, 2009 at 8:02 AM

    Thank you for trying to help me... I really appreciate it, none the less when the complete code is:

    var maskStart:Number = 166;
    var maskFinish:Number = 396;
    var maskMove:Number = maskFinish - maskStart;
    var myLoader:Loader = new Loader();
    var fileURL:URLRequest = new URLRequest("portaro2009.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) {
    myLogo.alpha = 0;
    removeChild(logoMask);
    addChild(myLoader);
    }
    }

    then it just doesn´t work. What I did... and I know is a terrible solution... is to put a color layer on the swf to load, so that the loader doesn´t show when the other movie is loaded. but I WOULD REALLY LIKE THE CODE TO WORK. please help me cos i have tried other ways but I couldn´t get it to work.
    once againg... thank you

  • Biochimistu : March 3, 2009 at 5:42 AM

    Hi Sol,
    The code works fine. Download again the source files, I have updated the code, now it includes this line myLogo.alpha=0;.

  • Anonymous : October 11, 2009 at 2:05 AM

    hi ! Your tuto is very good, but, very new to AS3, I've got a little problem here : it doesn't explain how to pass from one page to another inside a site, (between external SWF pages, called by buttons on stage). I'm desperate ! Thanks for any help...

  • Biochimistu : October 12, 2009 at 10:58 PM

    Take a look at this tutorial: Actionscript 3.0 Xml driven menu. It shows how to build a menu and also how to switch between external swfs.