Toxiclab.org

Attractive preloader by picture

2.6.2007, 23:26
Submited in: Flash | Total Views: 65512

See this lesson and learn how to create attractive preloader using the picture and action script. You will also learn how to convert an image into a Movie Clip Symbol, how to apply on it alpha effect, how to convert any layer into a mask, how to create percent for preloader and more.

Example:



Step 1

First of all, download my picture that we will use for this example.





Step 2


Create a new flash document and choose File > Import > Import to Stage. In the file explorer window that appears, find the picture that you just downloaded, select it and click open.

Step 3

While the picture 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.



Step 4

After that, while the picture is still selected, press again F8 key (Convert to Symbol) to convert this picture into a Movie Clip Symbol.



Step 5

Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 300 pixels and the height to 200 pixels. Select #f8f8f2 as background color. Set your Flash movie's frame rate to 22 and click ok.



Step 6

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



Step 7

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

Step 8

Take the Selection Tool (V) and click once on the picture (new made Movie Clip)  to select it and go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Alpha in it and put it down to 35 %.



Step 9

Click on frame 100 and press F5 key.

Step 10

Go back on the first frame and press Ctrl+C key (Copy), to copy this picture. After that, create a new layer above the layer 1 (layer 2), select it and press Ctrl+Shift+V key (Paste in Place).

Step 11

Take again the Selection Tool (V) and click once on the picture that you just copied to select it. After that, go again to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see again the Color menu. Select Alpha in it and put it down to 100 %.



Step 12

Create a new layer above the layer 2 and name it mask.



Step 13

Select the mask layer and take the Rectangle Tool (R). Then, block the Stroke Color, for fill color choose any color and draw a rectangle about 150x100px and place it on this position:



Step 14

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



Step 15

Click on frame 100 of layer mask and press F6 key. After that, move the rectangle using the arrows key or by mouse on this position:



Step 16

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 17

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



Step 18

Create a new layer above the mask layer and name it percent.

Step 19

Select the percent layer, takle the Text Tool (A) and click somewhere below the picture. Then, go to the Properties Panel again (Ctrl+F3) and select the following options:

a) Select a Dynamic Text field.
b) Select a Trebuchet MS font.
c) Choose 16 as font size and bold it.
d) Select black as color.
e) As the rendering option, select Anti - alias for readability.
f) For Var: type "percen1"



After that, type 99% below the picture. See the picture below.



Step 20

Go back on the main scene (Scene 1).

Step 21

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.

Cheers!

Download source file (.fla)

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

Browse by category


Most popular tutorials


Resources Worth visiting


Friends