Toxiclab.org

Yellow rectangular preloader

26.2.2007, 23:58
Submited in: Flash | Total Views: 42812

Read this tutorial and see how to create yellow rectangular preloader in flash 8. To create this tutorial you will also learn how to use Action Script code and apply it on the preloader, becouse it is essential for this tutorial.



Step 1

Open Flash and start a new project with dimension of 300 x 200px. Select #F8F8F2 as background.



Step 2


Take the Rectangle Tool (R), go to the Properties Panel (Ctrl+F3) below the stage and choose the following options.

1. Enter #7AD428 for the stroke color
2. Enter #E8FF01 for the fill color.
3. Select Solid as the type of outline, with the line thickness set to 1.
4. Turn on the Stroke hinting option to get rid of any blurry edges while drawing.



Then, draw a rectangle about 100x7 pixels. See the picture below.



While the rectangle is still selected, go to the Align Panel (Ctrl+K) and set the following options:

1.Make sure that the Align/Distribute to Stage button is turned on,
2.Click on the Align horizontal center button and
3.Click the Align vertical center button.



Now, you just aligned your rectangle with the background.

Step 3

While the recatngle is still selected, press F8 key (Convert to Symbol) to convert this rectangle into a Movie Clip Symbol.



Step 4

Double-click on the movie clip on stage with the Selection tool (V). You should now be inside the movie clip.



Step 5

Click on frame 100 and press F5 key. After that, create a new layer above layer 1 (layer 2).

Step 6

Lock layer 1, select layer 2 and take the Rectangle Tool (R) again.In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color choose #221E1F and draw a rectangle within the first rectangle about 98x4 px. See the picture below.





Step 7

While the rectangle is still selected, press F8 key (Convert to Symbol) to convert this rectangle into a Movie Clip Symbol.



Step 8

Click on frame 100 of layer 2 and press F5 key.

Step 9

Create a new layer above layer 2 and name it mask.

Step 10

Take again the Rectangle Tool (R),for Fill color choose red and draw again a rectangle 98x4 px, and place it on the position like it is shown on the picture below.



Step 11

While the rectangle is still selected, press F8 key to convert this rectangle into sa Movie Clip Symbol.



Step 12

Click on frame 100 and press F6 key. Then, using the mouse or by arrows key,place the rectangle on the position like it is shown on the picture below.



Step 13

Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appears.



Step 14

Select mask layer and convert it to a mask by right-clicking on the mask layer and selecting Mask.



Step 15

Create a new layer above mask layer and name it percent.

Step 16

Select perecent layer and Take the Text tool (T). In the Properties Panel (Ctrl+F3), select the following options:

a) Select a Dynamic Text field.
b) Select a Trebuchet MS font.
c) Choose 9 as font size.
d) Select #221E1F as color.
e) As the rendering option, select Anti - alias for readability.
f) For Var: type "perc2"



Then, type somewhere above the rectangle 99%. See the picture below.



Step 17

Create a new layer above percent layer and name it text. After that, take the Text Tool (T) and go to the Properties Panel below the stage. Then, set the following options:

1. Select a Static Text field.
2. Select a Trebuchet MS font and bold it.
3. Choose 9 as font size.
4. Select black as color.
5. As the rendering option, select Use device fonts



Step 18

Type somewhere below the rectangle "Loading...". See the picture below.



Step 19

Go back on the main scene (Scene 1). Take the Selection Tool (V), click once on the "preloader" to select it and open the Action Script Panel (F9). Then, enter the following Action Script code:

onClipEvent (load) {
total = _root.getBytesTotal();
}

onClipEvent (enterFrame) {
loaded = _root.getBytesLoaded();
percent = int(loaded/total*100);
perc2 = ""+percent+"%";
gotoAndStop(percent);
if (loaded == total) {
_root.gotoAndPlay(2);
}
}

We're done!

Enjoy!

Download example

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category


Most popular tutorials


Resources Worth visiting


Friends