This easy lesson will show you how to create simple coloring preloader using the action script code and some special flash tips and tricks.
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 28 and click ok.
Step 2
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 18 as font size and bold it,
4. Select red 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 3
While the text 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 text with the background.
Step 4
While the text is still selected, press Ctrl+B key (Break apart) to break apart this text.
Step 5
After that, take the Selection Tool (V) and select the letter a. After that, go to the Properties Panel (Ctrl+F3) and change its color in blue. See the picture below.
Do this also for every other letter. Now, you have this:
Step 6
Press now Ctrl+A key on the keyboard (Select all) to select the all text. After that, press F8 key (Convert to Symbol) to convert this text into a Movie Clip Symbol.
Step 7
Double-click on the movie clip on stage with the Selection tool (V). You should now be inside the movie clip.
Step 8
After that, click on frame 100 and press F5 key.
Step 9
Then, create a new layer above the layer 1 and name it percent.
Step 10
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 19 as font size and bold it.
d) Select #00AEEF as color.
e) As the rendering option, select Anti - alias for readability.
Then, draw a rectangle above the loading text. In that rectangle, you will type 99%. See the picture below.
After that, for Var: type "percen1"
Step 11
After that, type in the rectangle that we have created in previous step 99%. See the picture below.
Step 12
Go back on the main scene (Scene 1).
Step 13
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.
Have a nice day!
Download source file (.fla)
