First time here? First time here? Newsletter Signup Newsletter
Login | Register | 651326 Members and growing! | Flash Jobs
Search tutorials
Author: Oleg Lazarenko | Website: http://www.metamorphozis.com
Creating Animated Professional Looking Preloader Step-by-step in Flash MX 2004

a. Launch Flash MX 2004

b. Create new Flash file. Click File > New…
Screenshot

c. Select Flash Document in a new window
Screenshot

d. You need to create 2 layers and in the root of your flash movie. The first layer will serve to contain the preloader itself and must be one frame width and the second one will be used to place the movie content and it must be 2 frames width. To make thing clear we will name these layers "preloader" and "content"
Screenshot

e. Now let's select "Rectangle Tool"
Screenshot

and draw shape in the first frame of the layer named "preloader"
Screenshot

f. Select the shape and right click on it. In the menu select "Convert to Symbol..."
Screenshot

then select "Movie Clip" option and press OK
Screenshot

g. Now you have included movie in the "preloader" layer. Select the movie you made and press "F9" to get access to "Action" panel.
Screenshot

It consists of 2 windows. We need 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);
  }
}

Screenshot

h. Now 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 this:
Screenshot

i. Now double click the shape to enter the included movie in the "preloader" layer. Now you see the shape as Flash Object. Select "Rectangle Tool" and draw smaller rectangle with a color different then white inside the shape (note: the second rectangle must be within the same layer as our shape)
Screenshot

Now delete the second rectangle and it's border. Select you shape and you will see that now you have a shape with the rectangle hole inside. That's was the purpose of the second rectangle: to make this hole. Through this hole the progress of downloading will be displayed.

j. Now create 2 more layers. Lets call the layer with the shape: "Shape" and "Mask1" and "Mask2" the 2 new layers. (Note: the "Shape" layer must be the first layer in a Timeline!)
Screenshot

k. Now we need to create simple mask to show the progress of downloading. 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 like you may see on the picture.
Screenshot

l. Now 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 it's appearance as it becomes invisible when we create mask effect. It must cover the hole of the main shape completely but smaller then the main shape.
Screenshot

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:
Screenshot

n. Select the last frame in the "Mask2" layer, right click and select "Insert Keyframe" to convert last frame to keyframe.
Screenshot

o. Select first frame of the "Mask2" layer and drag the rectangle so that it ended just before the hole starts.
Screenshot

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.
Screenshot

q. Select layer named "Mask1", right click and select "Mask" option.
Screenshot

Now all set 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:
Screenshot

Click "Ctrl+Enter" to see the flash movie. Upload it and when you access it you will see the preloader you just have created! If you followed the instructions carefully you should get something like the example below (.fla version).



Now when you visitors come to your website they will be able to see how long it will take to load flash. You may use the code and change everything you like in design to match your website.

Click here to download source fla file.

About the Author: Oleg Lazarenko
Production manager of
Metamorphosis Website Design Studio -
Custom design, Website Templates,
Web design Articles and Tutorials.

You may reprint this tutorial for free as long as the content, About the Author sections and all links remain unchanged.

» Level Basic

Added: 2004-10-14
Rating: 7 Votes: 74
(10 being the highest)
» Author
Oleg Lazarenko
Production manager of
Metamorphosis Website Design Studio -
Custom design, Website Templates,
Web design Articles and Tutorials.
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!

Comments

  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: work2survive
» Title: Girl Walking 1kb
» Description: Walking girl, animation just takes 1kb, using high heels shoes, and fashion model attitude.
Featured Sound Loops
Image for equalize

Audio Player

» Author: BoxCat
» Title: CPU Talk
» Description: From the cyberpunk RPG, "Nameless: the Hackers" Completely Free to use! Keywords: edm hip hop rap electronic mysterious mission hacking chase exciting spy ios ambient chilling love happy sad angry suspense
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: nathan
» Description:

A recorded sound of the Dimensional Fork Gate.