Oct 25

Flash Preloader Tutorial

Tue, 10/25/2011 - 17:04 — julie

Most of the flash applications on the internet are very rich in content and this makes their file size quite large as compared to other components in a website. If a user visits a webpage with some heavy flash content then it might take some time before the flash components actually appears. This can be disastrous because it might make users navigate away from the site even before they see it. To solve this problem we make use of preloaders. A preloader is light weight and it appears on screen quickly and shows the user how much of the flash content has been loaded. By making interesting and interactive preloaders, developers can make the users wait on the website long enough for the flash content to be completely loaded.

Before we start making the Flash preloader, I want you to know that you need to have basic flash knowledge and a little bit of know-how of ActionScript 3.0 in order to understand this tutorial.

Now let’s start of by creating a new ActionScript 3.0 application in Flash. We need to make a new MovieClip containing the animation of the preloader. Press ctrl+F8 to open the new symbol creation dialogue, you can give your animation any name but you need to choose Movie Clip as the type of the symbol.

In this Movie Clip, I create a shape tween of a rectangle which changes its width on a span of 100 frames. If you don’t know how to do this step then you can refer to my Flash Animation Tutorial.

We have given the Flash animation a length of 100 frames because we want each frame to correspond with a load percentage. i.e. When the flash content loads from 1-100 % , the animation will move from 1-100th frame.

Now let us go back to the main timeline and place Movie Clip on the stage. After we do that we need to give the Movie Clip a variable name in order for the code to be able to identify it. I name my Movie Clip as “preloader_mc”.

The next step is to add the ActionScript code to the application. Create a new layer for the code and on the first frame, press F9 to open the Actions window and paste the following code there.

stop();

preloader_mc.stop();

loaderInfo.addEventListener(ProgressEvent.PROGRESS,processLoader);

function processLoader(e:ProgressEvent){

var percentLoaded:int = (e.bytesLoaded/e.bytesTotal)*100;

preloader_mc.gotoAndStop(percentLoaded);

if(percentLoaded==100)

                play();

}

Let me take you step-by-step through the above code. The first line will stop the main timeline from playing .The second line preloader_mc.stop() stops the preloader from moving, because by default any Movie Clip will start to play automatically and we don’t want that. The third line adds and event listener to the loaderInfo object. The loaderInfo is an object which is present in all the Flash Applications by default and it contains all the details about the amount of the data loaded. Our event listener is listening for the event ProgressEvent.PROGRESS , this event is dispatched each time the amount of loaded data changes. The event listener calls the processLoader function each time the ProgressEvent.PROGRESS event is dispatched. The processLoader function is responsible for translating the loaded amount of data visually on to the preloader. In the first line in that function we use a simple formula to find out the percentage of data loaded. The e variable is an instance of the ProgressEvent and e.bytesLoaded contains the amount of bytes that have currently been loaded. Similarly e.bytesTotal contains the total amount of bytes that are there in the application. The next line changes the current frame of our preloader_mc Movie Clip to the percent loaded. E.g. if the percent loaded is 53 then the preloader_mc will move to frame 53. In the next two lines we check that if the application has been completely loaded, if it is completely loaded then we move on to the next frame. The next frame will contain the actual content of our application.

This is it. You have successfully created a Flash preloader. If you test your Flash application now, you will not see the preloader move. You will only see it completely filled up. This is because our application is too small in size to take some time to load and also because the application is on our local machine and loading from the local machine is very fast. If you want to see the preloader in action then put some heavy content like images and movies on the second frame of your application and upload it to some online location. If you don’t want the hassle of uploading it to some online location then Flash has a build in option which lets you simulate the application as if it were being run on some online location. To simulate download, press Ctrl+ENTER and when the application runs then go to View in the menu and check Simulate Download. You can also set the speed of internet connection by going to view>Download Settings .

Now that you have learned the basics of making a Flash preloader,  you can get creative and make unique and interactive variations of this preloader.

Found this Flash Preloader tutorial too hard? Don’t worry, you have an easy way out. Check out Wix, an awesome free Flash website builder.

Copyright 2009. E-mail Me
Auto Spare Parts