|
|
Simple green preloader - ActionScript Webmaster Tips, Knowledge Base Webmaster Tools
| Home > ActionScript > Simple green preloader | |
| | Category | : ActionScript | | Written by | : Admin | | Date | : 2008-11-10 | | Rating | : 0  | Voted : 0 times | | Hit | : 232 | | | | |
|
Step 1
Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set your dimensions as whatever you like. Select white as background color.Set your Flash movie's frame rate to 26 and click ok.
Step 2
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 #83BB00 and draw a “rectangle” about 110x45px. See the picture below.
Step 3
While the rectangle is still selected, go to the Align Panel (Ctrl+K) and do the following:
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 have aligned the rectangle with the background.
Step 4
Take the Text Tool (A) and go to the Properties Panel (Ctrl+F3) below the stage. Then, choose the following options:
1. Select a Static Text field ,
2. Select a Comic Sans MS as font.
3. Choose 14 as font size and bold it,
4. Select white as color,
5. As the rendering option, select Use Anti-alias for readability.
Then, type loading and place that text on the position like it is shown on the picture below.
Step 5
Take the Selection Tool (V) and select the text and rectangle, or just press Ctrl+A key (Select all). After that, press F8 key (Convert to Symbol) to convert this rectangle and text into a Movie Clip Symbol.
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
After that, click on frame 100 and press F5 key.
Step 8
Then, create a new layer above the layer 1 and name it percent.
Step 9
Select percent layer, takle the Text Tool (A) and go to the Properties Panel again (Ctrl+F3) and select the following options:
a) Select a Dynamic Text field .
b) Select a Comic Sans MS font.
c) Choose 14 as font size and bold it.
d) Select white as color.
e) As the rendering option, select Anti - alias for readability.
Then, draw a rectangle on the right side of loading text. In that rectangle, you will type 99%. See the picture below.
After that, for Var: type "percen1"
Step 10
After that, type in the rectangle that we have created in previous step 99%. See the picture below.
Step 11
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 inside the actions panel:
onClipEvent (load) {
total = _root.getBytesTotal();
} onClipEvent (enterFrame) {
loaded = _root.getBytesLoaded();
percent = int(loaded/total*100);
percen1 = ""+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 on frame 2. Then, click again on the second frame and type again stop(); inside the Actions panel.
|
|
