Hi everyone, and welcome to our Aroha media video tutorials. In this tutorial, we are going to show you how to add a simple preloader to your external flash movie. These loaders are custom indicators that inform the viewer that content is being loaded into the flash player and informs the viewer the status of the loading. Let's start off by creating a new Flash movie with the ActionScript version 3.0 for a lightweight pre loader animation, our pre loaded file is going to have two things, the content and the action script out of them. The first thing we'll start with is the loader content. Pick the text tool and type loading on the stage.

Size and color of this text completely depends on your choice. Name this slide As loader, press Ctrl plus K to open the Align panel and get the text center aligned to the stage. convert this text into movie clip symbol type. For this, press f8 as a shortcut key, name this symbolic loader without extending any of the frames for this here, directly step inside this loader symbol. A simple animation will be worked out here, named this layer text. Press f6 on next frame and add a.in the text.

Add two more such dots on additional key frames as seen in the video. Each don't add it on an additional key frame. So a simple loading animation is done. to refer to this loader in ActionScript. We need to assign an instance name to it while your bar is select Did set load underscore MC as its instance name, test the movie to view the animation part. Press Ctrl plus S to save your file before further modifications name it loader.

Here you will notice that we have already a simple animated file ready with us named animation. This animation file should be loaded in our loader dot SWF file. Both the Flash files are saved in the same directory path. We now have our loading animation ready. So add another layer as action and press f9 on the only frame on it to open the Actions panel. We are going to code our loader now.

First of all, we will add a start load function in which all the loading process for the file will be coded. Now, we need a first video here, in which we will load the URL. This will be a loader variable. Add another variable for URL. This will send a request to the actual file to be loaded. Type the name of file URL here, that is animation dot SWF.

Now add the code for the action to happen after the loading part. Content loader info is the class that keeps track of some information about what's being loaded. Next, we will add the script for what action should happen during the loading progress. In this action script, the on progress handler function will be called on progress event. This creates an event object that contains information about the progress event. Now, the script for the loader to inform which URL is to be loaded.

For this URL, a variable is used. Here, the start load function ends. The next function we need to add is of the progress handler. This function starts when the download process begins in this Which animation should be played during the loading progress will be defined here at the instance name of the animated loader to be played that is, load underscore MC. Next will be the on complete handler function in which the part after the loader animation will be explained. This is dispatched when the file download process is finished load event current target content onload event the content on the current target is loaded.

That means the current target will actively process the event. We also don't need the The loader to be displayed when the file is completely loaded. So, adding a code to remove it this is complete on handler function. Now, add an action script to execute the start load function. Close this panel and press Ctrl plus Enter to test the movie as wF is directly playing the animation file. So, to view the loader Go to View simulate download.

Now, you see that loading part before this ball animation as this ball animation file is not that heavy, so that loading part is done very quickly. So finally, first the loader loads. Then loader is removed and the animation file is played as per the ActionScript. You can try it using any heavy animated file for better understanding This is one of the basic loaders. Let's see one more loader type with additional animation. Get a new Flash file for a new loader named the default layer as loader.

And on this frame, draw a rectangle like this. From the Properties panel, modify its width 200 as it will refer to hundred percent loading animation. Open aligned box by pressing Ctrl plus K and get this rectangle center aligned to the stage. Press f8 and convert this rectangle into a movie clip symbol. Also name it loader. Double click to enter this new symbol.

Our bar graphic is now on stage where we'll need its outline to be separated on a different glare. So, cut and paste in place on a new layer, named this outline layer as border and bar layer as color. This color is the part which will expand as the loading process. So, to show that way, add another layer as mask about the color layer and paste the same color bar on this mask layer to hide the mask layer to select the color bar. Press f8 and convert this color again into a new movie clip. shift its registration point to center left and name it color to interact with the ActionScript.

Set its instance name as color underscore MC. Now right click on the mask layer to add the mask effect. Exit to main scene here to this loader will be needed in ActionScript. So given instance named as load underscore MC. Before moving ahead, save this file as loader in the same folder path, where the animation file is saved. This animation file is supposed to be loaded after the loader.

Now, add another new layer for the action script. So, name it action on this action blank frame, open the action panel. Similar to the first loader we have already created here, all the action script part all three start load on the progress handler and on the complete handler functions, and at the end of the script to call the function on start load. The only change here will be in the on progress handler function part. As said earlier, this function starts when the download process begins. In this, which animation should be played during the loading process.

Progress will be defined. So, for this file, it's a different loader. According to this loader animation, the color will show the film progress till it reaches the outline. First, we will start with a variable named percent in which numerical values will be stored. That means, the value from the loaded file size divided by actual full file size will be stored in this variable bytes loaded is the class divided by bytes total class. This shows the information till now loaded divided by total information to be loaded this way we get the percent value.

Now, according to this value outline box should be filled in proper proportion. So, add one more script to it The actual value of the percentage is shown between 0.1 to one formats, but we need to show the percentage between zero to hundred. For that, we need to multiply the percent value by 100. Rest everything is added. Let's test the movie. You can import any large animation or video from the same path as well.

To view how the preloader works, go through view, simulate download, or just press Ctrl plus enter twice to do the same thing. You can see the color bar progressing till the animation file loads. Similarly, you can create your own shapes and stylish loaders for your files. That's it. We are done for now. We hope that you learn something new from it.

Thank you for watching.