How to Create a Windows 98 Loading Bar Animation in Flash

Posted on February 10, 2014 in Flash Category

In this tutorial you will learn how to create a Windows 98 loading bar animation in Flash with two types of loading bar: rectangle bars and full bar. This tutorial will include only the loading bar animation to use it as your preloader in your projects.

Step 1 - Document Settings

Go to File - New, select Action Script 2.0 and create a new document. Set the FPS to 30, size to 800 x 400 pixels (or any size you want) and stage background color to #D2CFC7. See the image below.


Step 2 - Creating the Background for Loading Bar

Select the Rectangle Tool (R) with Fill Color same as background, Stroke/Border Color Black and draw a rectangle on the stage.

With the Selection Tool (V) make sure to select the whole rectangle, including borders (or you can simply double click in the center of your rectangle and it will select the borders too). Check the picture below:


In the Properties Panel (CTRL + F3) set the Width 600 px, Height: 44 px and very important, make sure X and Y have fixed values (with zero decimals) because objects will appear with a thiner border. You can check the image below.


Great, now with the Selection Tool (V) select the bottom and the right border (holding SHIFT key) and change their color to white select-stroke-color. Select again the whole rectangle (including borders), right click on it and select Convert to Symbol (or press F8). Select Type: Movie Clip and click OK (symbol name doesn't matter). Check the image below:


Step 3 - Creating the Loading Bar

To create the loading bar we will repeat the same steps and create a new rectangle with Fill Color #142568 and without border. To disable the border, click on the Stroke Color and select the icon no-stroke-no-border near the alpha option

Set the Width and Height the same as the Loading Bar Background, but with 4 pixels less on both. If you have the shape selected, press F8 to convert it to Movie Clip Symbol. Once you're done, move the object in the center of the loading bar background. You can check the image below.


Step 4 - Animating the Loading Bar

To have a better control of our objects, we should group them into a single movie clip. So we should have a "box" and inside 2 objects, the loading bar and his background. To do that, make sure to select both objects and same as above, right click or press F8 to convert them to symbol movie clip.

Now double click on your new group. It will go inside the "box" so you can manage the objects and layers. To see the location in which object or movieclip you are, check the object location bar objects-timeline-bar.

As you can see the blue bar must stay above the background, so in this case select the blue bar and cut it (CTRL + X). Create a new layer new-layer-flash, select the first frame, right click on the stange and Paste in Place the blue bar (CTRL+SHIFT+V). See the image below.


Suppose that the animation should be from 0 to 100 percent, so in this case, click on frame 100 from Layer 2, right click and Insert a Keyframe (or press F6). On Layer 1, right click on frame 100 and Insert a Frame (or press F5). You should have this:


Now click on Frame 1 in Layer 2, select the blue bar and set the Width to 1 pixel. This frame will have the bar with 1 pixel and the frame 100 will have the bar with the full size. To make the animation working, right click on frame 1 and select Create Classic Tween. Check the image below.


Final Results

Windows 98 Loading Bar - Final Results

To create the second loading bar, watch the video tutorial. It may also help you to understand the steps above.

Source Files

Related Articles
Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.

− 3 = three

Subscribe by E-mail

HTML-TUTS is built under the mighty WordPress platform.