Flash tutorials
Home 3D (2) Actionscripting (66) Animation (108) Audio (4) Drawing (7) Full flash sites (4) Getting Started (15) Navigation (25) Special Effects (61) Text Effects (38)

Simple flash header

6.9.2007, 3:57    Total views: 153917

This lesson will show you how to make simple flash header using some special flash tricks. You can apply this simple and on the same time very useful flash header on any web sites. You don't have to use action script code to make this lesson. You will also learn how to use Color Mixer Panel, how to desing animation for header and many other things. Let's go!



Step 1

Open a new flash document. Select Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to 430 pixels and the height to 148 pixels. Select any color as background color and set your Flash movie's frame rate to 24 fps. Then, click ok.





Step 2


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 140x140px. See the picture below.



Step 3

While the rectangle is still selected, go to the Color Mixer Panel (Shoetcut key: Shift+F9) and choose the following options:

1. Click on the paint bucket icon to select the Fill color.
2. Choose Linear as Type.
3. Click on the small color rectangle that is on the left side and set its color to #157400. Alpha property set to100 %
4. Click on the small color rectangle that is on the right side and set its color to #8ED200. Alpha property set to100 %.



Now, you have this:



Step 4

It's time for a little trick. Take the Free Transform Tool (Q) and rotate the rectangle like it is shown on the picture below.



Step 5

Take the Selection Tool (V) and click once on the rectangle to select it. After that, go to the Properties Panel (Ctrl+F3) below the stage.On the left side you will see Width (W) and Height (H) options. Then, for Width type 430px and for Height 148px. See the picture below.



Step 6

While the rectangle, that you just enlarged 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 have aligned the rectangle with the background. See the picture below.



Now, we have a gradient background that we will use for our header.

Step 7

Double click on layer 1 to rename its name in background.

Step 8

Create a new layer above the layer background and name it text. Select the Text Layer and take the Text Tool (A). Choose any font you like, any color and size, and type some text on the center of background. See the picture below.



For this example I have used Franklin Gothic Demi Cond as font, size 43px. For the first color, I have used #990000 and for second color I have used white color.

Step 9

Create a new layer above the text layer and name it animation.

Step 10

Take the Rectangle Tool (R) again. 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 50x300 px like it is shown on the picture below.



Step 11

After that, take the Selection Tool (V) and do like it is shown on the picture below.



Step 12

Take again the Selection Tool (V) and click once the shape that you just created to select it.After that, go to the Color Mixer Panel again (Shoetcut key: Shift+F9) and choose the following options:

1. Click on the paint bucket icon to select the Fill color.
2. Choose Linear as Type.
3. Click on the small color rectangle that is on the left side and set its color to #1E8F01. Alpha property set to100 %
4. Click on the small color rectangle that is on the right side and set its color to #B7FD13. Alpha property set to100 %.



Now, you have this:



Step 13

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



Step 14

Take the Free Transform Tool (Q) and select the shape again. After that, move the central point to the bottom of shape. See the picture below.



Step 15

While the shape is still selected, press Ctrl+C key (Copy) and after that Ctrl+Shift+V key (Paste in Place).Then, do like it is shown on the picture below.



Repeat this process until you get this:



Step 16

Take the Selection Tool (V) and click once on animation layer to select the all shapes. See the picture below.



After that, press F8 key (Convert to Symbol) to convert this all shapes into a Movie Clip Symbol.



Step 17

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



Step 18

After that, place the shapes on the position like it is shown on the picture below usign the arrows key or by mouse.



Step 19

Click on frame 700 of layer animation and press F6 key. After that, go back on the first frame and go to the Properties Panel (Ctrl+F3) below the stage. On the Left side for Tween drop down menu choose Motion, for Ease set 0 and for Rotate choose CW. See the picture below.



Step 20

Click on frame 700 of layer text and background and press F5 key.

Test your Movie (Ctrl+Enter).

We're done!

Download source file (.fla)

Have questions about this tutorial?
Visit our friendly Community Forums!
Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!

Top tutorials

1. Advanced full flash site - Part 1
Total views: 292553

2. High-tech city animation
Total views: 240545

3. Water effect
Total views: 224781

4. Photo slide show
Total views: 207511

5. Special Picture Effect
Total views: 183282



Related links