Create Flash Website (part 1)

Part 1

Preloader and preloader animation

Step 1

Cretae a new flash document. Select Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to 450 pixels and the height to 400 pixels. Select #EBFBDD as background color. Set your Flash movie's frame rate to 24 and click ok.



Step 2

Double click on layer 1 to rename its name in background. After that, create a new layer above the background layer and name it preloader.

Step 3

Lock backgroud layer, select the preloader layer and the the Rectangle Tool (R). Then, go to the Properties Panel (Ctrl+F3) below the stage and choose the following options:

1. Enter #BAF088 for the stroke color
2. Enter white for the fill color.
3. Select Solid as the type of outline, with the line thickness set to 2.
4. Turn on the Stroke hinting option to get rid of any blurry edges while drawing.



Then, draw a rectangle about 128x8 pixels. See the picture below.



Step 4

While the rectangle is still selected, go to the Align Panel (Ctrl+K) and set the following options:

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.



Now, you just aligned the rectangle with the background.

Step 5

While the recatngle is still selected, press F8 key (Convert to Symbol) to convert this rectangle 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. After that, create a new layer above the layer 1 and name it line.

Step 8

Go back on layer 1, take the Selection Tool (V) and select only the fill color of rectangle. See the picture below.



Step 9

While the Fill color (Line) that you just cuted and pasted in layer line, is still selected, press Ctrl+C key (Copy). Then, create a new layer above the line layer and name it mask. Select it and press Ctrl+Shift+V key (Paste in Place).

Step 10

Click on frame 100 of layer mask and press F6 key. After that, go back on the first frame and place the line (Fill Color) on the position like it is shown on the picture below, using the Selection Tool or by arrows key.



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 mask layer and convert it to a mask by right-clicking on the mask layer and selecting Mask.



Step 13

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

Step 14

Select perecent layer and Take the Text tool (T).Then, in the Properties Panel (Ctrl+F3) below the stage, select the following options:

a) Select a Dynamic Text field.
b) Select a Trebuchet MS font.
c) Choose 12as font size.
d) Select #38680D as color.
e) As the rendering option, select Anti - alias for readability.
f) For Var: type "perc1"



Then, type somewhere above the rectangle 99%. See the picture below.



Step 15

Create a new layer above the percent layer and name it text. After that, take the Text Tool (T) and go to the Properties Panel below the stage. Then, set the following options:

1. Select a Static Text field.
2. Select a Trebuchet MS font and bold it.
3. Choose 9 as font size.
4. Select #38680D as color.
5. As the rendering option, select Anti - alias for readability.



Type somewhere below the rectangle "Loading...". See the picture below.



Step 16

Go back on the main scene (Scene 1). 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:

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

We're done with preloader and it is time for preloader animation. Let's go