Toxiclab.org

Green preloader

21.12.2006, 10:48
Submited in: Flash | Total Views: 54544

In this lesson, I will explain to you how to create advanced flash preloader, using a five cube and Action Script. You will also learn how to convert progress layer into a Mask layer, how to create a cube using the Rectangle Tool (R) and more.


Step 1

Open a new Flash document. Select Modify > Document (shortcut key: Ctrl+J ).
Set the width of your document to 250 pixels and the height to 150 pixels. Set #F8F8F2 as background color and click ok.

Step 2

Take the Selection Tool (V), and double Click on layer 1 to rename its name in preloader.

Step 3

Take the Rectangle Tool (R), click on Stroke color and choose No stroke, under Fill color set #A1958A, and draw a five "cube" 10.2x10.2 px, which will represent a preloader. See the picture below.





Step 4

Press Ctrl+A key to select the preloader ("five cube"), and after that press F8 key (or select Modify > Convert to Symbol ) to convert this preloader 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. See the picture below.



Step 6

While the preloader ("five cube"), is still selected, press again F8 key to convert it again into a Movie Clip Symbol.



Then, click on frame 100 and press F5 key.

Step 7

Insert a new layer and name it progress.

Step 8

Take the Rectangle Tool (R) again and draw a "rectangle" 63x19px this color #A1958A. After that set it on the left side of preloader ("five cube") on stage. See the picture below.



Step 9

Select the progress layer and press F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.



Step 10

Click on frame 100 and press F6 key (Keyframe). After that, using the mouse, or by arrows key on the keyboard, move it ("rectangle"), over the preloader ("five cube"). 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 layer and convert it to a mask by right-clicking on the progress layer and selecting Mask.



Step 13

Insert a new layer above progress layer and name it percent.



Step 14

Select the Text tool (T).In the Property inspector below the scene, choose Dynamic text (see left part of the image below), and type somewhere above the preloader 99%. See the picture below.



After that, go back in Property inspector below the scene, and for Var: type percen1. Look at the picture below!



Step 15

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 paste this script:

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);
}
}

Step 16

Insert a new layer,and name it loading. Select the Text tool (T).In the Property inspector below the scene, choose Static Text.

Choose any font you like, and type somewhere below the preloader "loading".

Step 17

Select the loading layer and press F8 key to convert it into a Movie Clip Symbol.



Step 18

Double-click on the movie clip (text) on stage with the Selection tool (V).

Step 19

You should now be inside the movie clip. Press F6 key nine times. After that, click on every second frame and press delete key on the keyboard.



Step 20

Go back on the main scene (Scene 1), click on the first frame of layer preloader, open the A.S. Panel and type:

stop();

Step 21

We're done with the preloader. To see how it works, Insert a new layer above layer loading and name it picture. Click on frame 2 of layer picture, and press F6 key. Then in Action Script Panel type:

stop();

Step 22

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

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