Easing preloader

Date: 12.2.2007, 15:28    Total views: 45180

Using this thoroughly explained, detailed flash lesson, you will see how to create very trendy and modern flash preloader using the action script code and some special flash tips and tricks. Using this lesson, you will also learn how to design trendy preloader, how to convert it into a movie clip symbol, how to apply action script code on it and much, much more!


Step 1

Start Flash. Select Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to 200 pixels and the height to 150 pixels. Select white as background color, for Frame rate set 24 fps and click ok.





Step 2

Select the Text tool (T) . In the Properties Panel (Ctrl+F3) , select the following options:

a) Select a Static Text field.
b) Select a Arial Black font.
c) Choose 18 as font size.
d) As the rendering option, select Anti - alias for readability.
e) Select #191919 as color.



Then, type on the stage "LOADING". See the picture below.



Step 3

Take the Rectangle tool (R).In the Properties panel (Ctrl+F3), for Stroke color choose No stroke, for Fill color choose #D3D3D3 and from the right side of "LOADING" draw a rectangle about 50x5 pixels. See the picture below.



Step 4

While the Rectangle Tool (R) is still selected, draw another "rectangle" about 50x2 pixels, above the first "rectangle", but for this time, for Fill color choose #777777. Look at the picture below!



Step 5

Press Ctrl+A key (Select All), to select a preloader and after that press F8 key (Convert to Symbol), to convert it 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. See the picture below.



Step 7

Click on frame 100 and press F5 key.

Step 8

Create a new layer and name it percent.

Step 9

Select the Text tool (T). In the Properties Panel (Ctrl+F3), select the following options:

a) Select a Dynamic Text field.
b) Select aArial Black font.
c) Choose 15 as font size.
d) Select #646464 as color.
e) As the rendering option, select Anti - alias for readability.
f) For Var: type "percent99"



After that, type somewhere above the "rectangle" (See step 3 and 4) 99%. See the picture below.



Step 10

Click on frame 100 and press F5 key.

Step 11

Go back on the main scene (Scene1), take the Selection Tool (V) and click once on the "preloader" to select it.Then, press F9 or select Window > Actions to open the Actions panel. Enter the following ActionScript code inside the Actions panel.

onClipEvent (load) {
total = _root.getBytesTotal();
}

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

Step 12

Click on the first frame and enter the following ActionScript code inside the Actions panel.

stop();

Step 13

Create a new layer, click on frame 2 and press F6 key. After that Import (Ctrl+R) any large picture. Click again on frame 2 and enter the following ActionScript code inside the Actions panel.

stop();

Test your Movie (Ctrl+Enter).

Have a nice day!

Download source file (.fla)