Professional Flash Preloader
a. Launch Flash MX 2004
b. Create new Flash file. Click File > New…
c. Select Flash Document in a new window
d. You need to create 2 layers in the root of your flash movie. The first layer will serve to contain the preloader and must be consist of one frame, the second one will be used to place the movie content and we need 2 frames in that later. To make thing easier we will name these layers “preloader” and “content”
e. Select “Rectangle Tool”
and draw shape in the first frame of the layer named “preloader”
f. Select the shape and right click on it. In the menu select “Convert to Symbol…”
then select “Movie Clip” option and press OK
g. Now you have included movie in the “preloader” layer. Select the movie you have made and press “F9” to get access to “Action” panel.
It consists of 2 windows. We need to use the right one to continue.
Click on the shape then copy the following code and paste it in the right window:
onClipEvent (load) {
total = _root.getBytesTotal();
}
onClipEvent (enterFrame) {
loaded = _root.getBytesLoaded();
percent = int(loaded/total*100);
text = percent+”%”;
gotoAndStop(percent);
if (loaded == total) {
_root.gotoAndPlay(2);
}
}
h. Select the “preloader” layer (you must see that the code disappear from the right window) and type stop(); in the right window. If you did everything correctly you should get something like the picture below:
Flash Preloader Cont’d
i. Double click the shape to enter the included movie in the “preloader” layer. Now you can see the shape as Flash Object. Select “Rectangle Tool” and draw smaller rectangle with a color different from the white inside the shape (note: the second rectangle must be within the same layer as our shape)
Now delete the second rectangle and its border. Select you shape and you will see that now you have a shape with the rectangle hole inside. That was the purpose of the second rectangle: to make this hole. Through this hole the progress line will be displayed.
j. Create 2 more layers. Lets call the layer with the shape: “Shape” and two new layers we name “Mask1″ and “Mask2″. (Note: the “Shape” layer must be the first layer in a Timeline panel!)
k. Now we need to create simple mask to show the downloading progress. We need to create some more new frames for 3 layers we have. Select all 3 layers, right click and select “Insert Frame” option. You need to make 15 new frames for each layer similar to the picture below.
l. Select layer named “Mask1″, then select “Rectangle Tool”, set the background color to black and draw big rectangle under the main shape. Do not worry about its appearance as it will become invisible after we create mask effect. It must cover the hole of the main shape completely but it should be smaller then the main shape.
m. Select layer named “Mask2″ and draw one more rectangle. On the example picture we disable the big black rectangle so that you could see how the second rectangle must be made:
n. Select the last frame in the “Mask2″ layer, right click and select “Insert Keyframe” to convert last frame to keyframe.
o. Select first frame of the “Mask2″ layer and drag the rectangle so that it ended just before the hole starts.
p. Now select all frames of the “Mask2″ layer, right click and select “Create Motion Tween” You have created the animation to show the download process.
q. Select layer named “Mask1″, right click and select “Mask” option.
Now all set up for preloader. Double click anywhere outside the working area to return to the root of your movie.
r. Select “content” layer, click “File –> Impotr…–> Import To Stage” and insert any picture you like to be in your content movie.
s. Now select the “content” layer (you must see that the code disappear from the right window) and type
stop();
The Timeline must be like this now:
Click “Ctrl+Enter” to see the flash movie. Upload it and when you access it you will see the preloader you just have created first and then the content of your movie!
Now when you visitors come to your website they will be able to see how long it will take to downlod flash. You may use the code and change everything you like in design to match your website.
Click here to download source fla file.
No Responses to “Creating a Professional Looking Animated Preloader”