Creating a Professional Looking Animated Preloader

By Oleg Lazarenko
2005-03-16


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:



Tutorial Pages:
» Professional Flash Preloader
» Flash Preloader Cont'd

Related Tutorials: » Flash Race Car Tutorial » Flash Momentum Tutorial » Customized Cursor in Flash MX 2004 » Dropdown Menu in Flash MX 2004 » How to Change the Movie Visibility Using Action Script in Flash MX 2004 » Changing Colors for the Flash Movie in Flash MX 2004