Adobe Photoshop Tutorials | Flash Tutorials | 3D Studio Max Tutorials
 
Home Photoshop | Flash | 3D | Tools | Articles | Directory | Links Link to Us | Contact Us
 
- Flash Tutorials - Preloader Tutorial - By: Chad Freiling

Flash Preloader Tutorial

In this tutorial you will learn how to create the a Preloader based off of using the Total Bytes action (function). This Tutorial is for Flash MX. I consider it to have a Classification of Moderate to Advanced, Leaning toward advance. I am Assuming in this tutorial you already have a movie made, or in the works. I am also assuming that you have the basic knowledge of Flash MX and its Basic Actionscript.
- Part 1
First things first, the Stage. Set the stage to 450 x 250, Stage color doesn't matter for this.

Next, We need to create another Layer. So, you should have 2 Layers Nows. Make Sure each Layer has 2 Frames in it, then Name them as follows:

Actions - (Top Layer) - This layer will be used to place the actions for the preloader.

Loading Bar - (Bottom Layer) - This layer will be used to place the Loading Bar for the preloader.

Now on to the Loading Bar. Select the Loading Bar layer and go to Insert > New Symbol (Shift+F8), Create a new MC and name it 'bar'.

Next, Create Two new layers inside the 'bar' MC. Each with 10 Frames, Then name them as follows:

Actions - (Top Layer) - This layer will have a Stop Action on it.
Outline- (Middle Layer) - This Layer will have the Outline for the loading bar
Fill - (Bottom Layer) - This layer will have the fill color for the Loading bar. This layer will also have a few different KeyFrames on it for the motion of the bar loading.
- Part 2

Select the 'Outline' layer and then select the Rectangle Tool (r) , and Create a Wide but short rectangle with the Outline color Black and a fill color of your choice.

Next, Select the Fill Color, and Copy it then Delete it. Then Select the 'Fill' layer and Press CTRL+SHIFT+V or EDIT > Paste In Place. Now you have a Full Loading Bar. With the Fill Color still selected, Go to Insert > Convert to Symbol (F8) and name it fill.

Next, Insert a KeyFrame on Frame 10 of the 'Fill' layer. After that, go back to frame one of the 'Fill' Layer and Resize the fill bar to 50px x 16px. And Place it
to the left of the Outline. (See Images below for this part)

* Resize info Box * * Resized Fill Bar *
After you have resized the fill bar your will need to add a Motion Tween to Frame 1. So it tweens to frame 10.

Lastly on the Loading bar. Select the 'Actions' layer, Then place a Stop() action on the First Frame.

Now go back to the Main Stage. With Layer: Loading Bar selected we need to place 4 Text Fields. Two will be Static Text and the other Two are Dynamic Text.

Create the two Static Text Fields. Have one read "Bytes Loaded" and the Othr read "Total Bytes".

Next Create the two Dynamic Text Fileds. Allow these to be able to fit at least 12 charactors in length on a Single line.
Name the First one "tbytes" with a var name of the same name, then align it to the Static Field that reads "Total Bytes".
Then name the Second one "bloaded" with a var name of the same name, then align it to the Static Field that reads "Bytes Loaded"
Or arange them any way you wish, Just as long as bloaded is with "Bytes Loaded" and like wise with tbytes and "Total Bytes".

* Example for Dynamic Text Field *
- Advertisement
- Part 3
Now, Lock the Loading Bar Layer, then select the Actions Layer. Select Frame 2 and Go to > Insert > KeyFrame (F6) or right click on frame 2 and Select Insert KeyFrame.

On Frame 2 Insert a gotoAndPlay(1); action.

The following Action script will be for Layer: Actions Frame: 1.

Copy and Paste the Following Script into Frame 1 on the Actions Layer:

// tbytes = Total Bytes
tbytes = getBytesTotal()
// bloaded = Bytes Loaded
bloaded = getBytesLoaded()
/*
Basically the code below takes the Total bytes for the swf
the multiplies them by a percentage.
Example = .25 = 25% Loaded, 50 = 50% loaded. .75 = 75% loaded ect...
It then checks the Bytes Loaded to the Total Bytes, If it is Higher
than the current statement it then executes the tellTarget actionscript
*/
if (bloaded >= Number(tbytes * .25)){
tellTarget(box){
gotoAndStop(3);
}
}
if (bloaded >= Number(tbytes * .50)) {
tellTarget(box){
gotoAndStop(5);
}
}
if (bloaded >= Number(tbytes * .75)) {
tellTarget(box){
gotoAndStop(7);
}
}
if (bloaded >= Number(tbytes * .90)) {
tellTarget(box){
gotoAndStop(9);
}
}
if (bloaded == tbytes) {
tellTarget(box){
gotoAndStop(10);
}
gotoAndPlay(11);
}
// end of Script

* Final Timeline * * Text Fields *
The fla I made available [coming soon in the flash downloads section] has an added Scene that I did not tell you to add. This Scene Was added to allow for the movie to load. Otherwise it would load to quick and not have been able to view when tested. I placed a few Images and text in the Second scene to add to the size of the file. After adding a new scene with some images the next thing to do is Test the Movie. When testing the Movie, Go to View > Show Streaming. this Starts the movie over and simulates the movie loading as if it were being downloaded.
Advertisement
 
Home Copyright © 2003 - 2005, Tutorials Network. All Rights Reserved. | Advertise | Privacy Policy