See how to create modern preloader in flash 8 using the Action Script.



Step 1

Create a new flash document and set Width and Height to 300x225px. Frame rate set to 26fps (Frames per Second).



Step 2

Take the Ractangle Tool (R) and under Stroke color set this color: #93D82A. Fill color must be switched off and under Corner Radius set 3 points. See the picture below.



Then, draw a "preloader" like it is shown on the picture below.



Step 3

While your "preloader" is still selected, open the Align Panel (Ctrl+K), click on Align to stage icon, after that on Align horizontal center and Align vertical center icon, to precisely center your "preloader" with background.

Step 4

After that, press F8 key to convert it into a Movie Clip.



Step 5

Then, while your "preloader" is still selected, open the Action Script Panel (F9), and paste this script:

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

Step 6

After that, open the Properties Panel (Ctrl+F3), choose Filters > plus icon > Drop Shadow, and set the options from the picture below.





Step 7

Double click on a new made Movie Clip (preloader) or choose right click and Edit in Place to go in its inside.



Step 8

Lock layer 1, insert a new layer and name it progress. Then, take the Rectangle Tool (R), Stroke color must be switched off, under Fill color set this color: #C11204, and draw a "progress bar" within preloader. Look at the picture below.



Step 9

While your "progress bar" is still selected, press F8 key to convert it into a Movie Clip.



Step 10

Now, we'll copy the "progress bar", so press Ctrl+C key (copy), insert a new layer, name it mask and press Ctrl+Shift +V (Paste in Place).

Step 11

Then, using the arrows key on the keyboard, move that "progress bar" that we have just copied on the place like it is shown on the picture below.



Step 12

Click on frame 100 of progress layer and layer 1 and press F5. Then, go back on mask layer, select it, click on frame 100 and press F6 (keyframe).



Step 13

Then, move your "progress bar" on the position where we have placed the first "progress bar" (within preloader).



Step 14

Go back on the first frame of layer mask, select it, open the Properties Panel and under Tween choose Motion.



Step 15

Select the mask layer and choose right-click and select mask to turn the layer into a mask.



Step 16

Insert a new layer and name it percent.



Step 17

Take the Text Tool (T), in Properties Panel set a Dynamic text and somewhere beneath the preloader type 99%. See the picture below.



Step 18

After that, in Properties Panel under Var, type: perc



Step 19

Go back on the main scene (Scene1), click on the first frame, open the Action Script Panel (F9), and paste this script:

stop();

Step 20

Insert a new layer and name it picture.

Step 21

Click on frame 2, press F6, and Import any picture.

Step 22

After that, click again on frame 2, open the Action Script Panel (F9), and paste this script:

stop();

We're done!

Download source file (.fla)

Have questions about this tutorial? Visit our friendly Community Forums!