Toxiclab.org

Advanced valentine flash preloader

6.10.2008, 17:38
Submited in: Flash | Total Views: 7917

This, step by step lesson, will show You how to create advanced valentine flash preloader, using the action script code. Using this lesson, you will also learn how to design valentine preloader using a flash tools for drawing, how to animate it and how to apply action script code on it. Let's go!



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

Using the flash tools for drawing, draw a hearts like it is shown on the picture below!



Step 4

Select now, the all "hearts" (Ctrl+A) and press F8 key (Convert to Symbol) to convert this "hearst" into a Movie Clip Symbol.



Step 5

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



Step 6

Click on frame 100 and press F5 key.

Step 7

Create now a new layer above the layer 1 and name it progress bar.

Step 8

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 9

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



Step 10

Click on frame 100 of layer progress bar and press F6 key. Then, using the mouse or by arrow keys, place the rectangle over the hearts. See the picture below!



Step 11

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 12

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 13

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



Step 14

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



Step 15

Go back again to the  Properties panel below the stage and for Var: type per.



Step 16

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 17

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



Step 18

Take the Selection Tool (V) and click once on the loadign text to select it. Then, press F8 key (Convert to Symbol) to convert this loading text into a Movie Clip symbol. See the picture below!



Step 19

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



Step 20

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



Step 21

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, import any picture into a flash library. After that, create a new layer above the layer loading and name it picture. Click then on frame 2 of layer picture and press F6 key. While you're still on frame 2, move your picture from the library on the stage. Then, click again once with Selection Tool on frame 2 and go  to the Actions Panel and enter this code:

stop ();

We're done!

Have a nice day!

Download example

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category


Most popular tutorials