Home Flash & Swish Flash Tutorials Love Preloader

Love Preloader

Author: AbTuts.com More by this author

Added: Feb 14, 2008 Rating:

Level: Experienced Software: Flash

Step 1

Create a new document in Flash. Select Modify > Document (shortcut key: Ctrl+J ). Select white as background color and click ok.

Step 2

Take the Pencil Tool (Y), go to the Pencil Tool Options and choose Smooth. See the picture below.

Step 3

In the Colors portion of the Tool panel, for Stroke color choose red color and draw a five little red "hearts" and place it on the position like it is shown on the picture below.

Step 4

Take the Paint Bucket Tool (K), in the Colors portion of the Tool panel, for Fill color choose again red color and paint the "hearts". See the picture below.

Step 5

Select the all "hearts" (Ctrl+A) and press F8 key (Convert to Symbol) to convert this "hearst" 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

Click on frame 100 and press F5 key.

Step 8

Create a new layer and name it progress bar.

Step 9

Select progress bar layer, 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 about 80x15 px and place it on the position like it is shown on the picture below.

Step 10

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

Step 11

Click on frame 100 of layer progress bar and press F6 key. Then, using the mouse or by arrow keys, place the rectangle on the position like it is shown on the picture below.

Step 12

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 13

Select progress bar layer and convert it to a mask by right-clicking on the progress bar layer and selecting Mask. See the picture below.

Step 14

Create a new layer above layer progress bar and name it percent.

Step 15

Select the Text tool (T).In the Properties Panel (Ctrl+F3) below the scene, choose Dynamic text and type somewhere below the preloader 99%. See the picture below.

Step 16

Go back in Properties panel below the scene and for Var: type per.

Step 17

Go back on the main scene (Scene1), take the Selection Tool (V), click once on the preloader to select it, open the Action Script Panel (F9) and 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);
per = ""+percent+"%";
gotoAndStop(percent);
if (loaded == total) {
_root.gotoAndPlay(2);
}
}

Step 18

Create a new layer and name it loading. Select the Text tool (T), in the Properties Panel (Ctrl+F3) below the scene, choose Static Text. Choose any font you like and type somewhere above the preloader "loading". See the picture below.

Step 19

Take the Selection Tool (V), click once on the loadign text to select it and press F8 key to convert it into a Movie Clip symbol.

Step 20

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

Step 21

Press F6 key seven times. After that, click on every second frame and press delete key on the keyboard.

Step 22

Go back on the main scene (Scene 1), click on the first frame of layer preloader, go to the A.S.Panel (F9) and enter this code:

stop();

We're done!

To see how preloader works, Create a new layer above layer loading and name it picture. Click on frame 2 of layer picture and press F6 key. Then in Actions Panel enter this code:

stop ();

While you're still on frame 2, press Ctrl+R key (Import to Stage), and Import any large picture.