|
Written by Rawpulse
|
|
Monday, 07 May 2007 |
|
Design a simple flash preloader, a useful script which runs while your main script loads
Step 1
Open Flash and start a new project
with dimension of 200 X 100px. Select white as background color. Set
your Flash movie's frame rate to 24 and click ok.
Step 2
Take
the Oval Tool (O). 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 #F80000
and draw a three circle like it is shown on the picture below.
Step 3
After that, take the Line Tool (N). Select a #F80000 as line color, and choose Solid as type of line, with thickness set to 0.5
Then, draw this shapes,
Step 4
Take
the Paint Bucket Tool (K). For Fill color set #F80000 and paint the
shape that we just created in previous step. See the picture below.
Now we have designed our preloader, and it's time for animation.
Step 5
Press
Ctrl+A key (Select all) and after that press F8 key (Convert to Symbol)
to cnvert this shape of preloader into a Movie Clip Symbol.See the
picture below.
Step 6
Double-click on the movie clip on stage with the Selection tool (V). You should now be inside the movie clip.
Step 7
Double
click on layer 1 to rename its name in shape. After that, click on
frame 100 and press F5 key. Then, create a new layer above the shape
layer and name it mask.
Step 8
Select
tha mask layer and take the Rectangle Tool (R). 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 any color and draw a "rectangle" and place it on
the position like it is shown on the picture below.
Step 9
Click
on frame 100 and press F6 key. After that, place the rectangle over the
shape using the arrows key or by mouse. See the picture below.
Step 10
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 11
Select mask layer and convert it to a mask by right-clicking on the mask layer and selecting Mask.
Step 12
Create a new layer above the mask layer and name it percent.
Step 13
Select
perecent layer and Take the Text tool (T). Then, go to the Properties
Panel (Ctrl+F3) below the stage, and select the following options:
a) Select a Dynamic Text field.
b) Select a Lucida Sans font.
c) Choose 11 as font size and bold it.
d) Select #323232 as color.
e) As the rendering option, select Anti - alias for readability.
f) For Var: type "percen101"
Then, type somewhere below the shape 99%. See the picture below.
Step 14
Go back on the main scene (Scene1).
Step 15
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);
percen101 = ""+percent+"%";
gotoAndStop(percent);
if (loaded == total) {
_root.gotoAndPlay(2);
}
}
We're
done with the prelaoder. To see how it works, click on the first frame
and go again to the A.S.panel. Then, enter this script inside the
Actions panel:
stop ();
After that, create a new layer
above the prelaoder layer. click on the second frame and press F6 key.
After that, Import, place, create any animation, image, movie. Then,
click again on the second frame and type again stop(); inside the
Actions panel.
|
|
Last Updated ( Monday, 07 May 2007 )
|
