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

Professional logo designin and animation

18.3.2007, 16:36    Total views: 39634

I will show you how to make a Professional logo in flash 8 with no Action Script. You will also learn:

1. How to design a logo.
2. How to animate it.
3. How to use Color Mixer Panel.
4. How to use Advanced color settings



Step 1

Open a new Flash document.

Step 2

Go to Modify > Document. In the Document Properties dialog box that appears, set the Frame rate (speed of your movie) to 26 fps. Set the Background color to #EAEAEA. Set the width of your document to 250pixels and the height to 100 pixels. Click ok.



Step 3

Select the Oval tool (O). Block the Stroke color. Select any color for the Fill color and draw a 80 by 80 pixel circle on the stage. See the picture below.



Step 4

While the circle is still selected, go to the Color Mixer panel (Window > Color Mixer). Make the following selections:

1. Click the paint bucket icon to have the fill color selected.
2. In the Type menu, select the Radial option.
3. Click on the inner color of the radial fill (the square on the left side of the gradient bar) and enter #FFCD00 as its color code.
4. Click on the square on the right side of the gradient bar and enter #FF6300 as its color code.



Now you have this:



Step 5

Go back again to the Color Mixer Panel and create a 3 new squares on the gradinet bar and set its colors and place it on the position like it is shown on the picture below.



Now, you get this:



Step 6

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

Step 7

Create a new layer above the logo layer and name it line.

Step 8

Select the line layer, take the Line Tool (N), select a white as line color, and choose Solid as type of line, with thickness set to 2. See the pictur below.



Step 9

After that, draw a three lines over the logo, like it is shown on the picture below.



Step 10

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

Step 11

Select the Text layer, Take the Text Tool (A) and go to the Properties Panel (Ctrl+F3) below the stage. Then, choose the following options:

1. Select a Static Text field.
2. Select a Trebuchet MS font.
3. Choose 28 as font size.
4. Select #35679A as color.
5. As the rendering option, select Use device fonts.



Then, type from the right side of logo "company". See the picture below.



Step 12

Take again the Text Tool (A). Select #FF6703 as color and choose the all other options from the previous step. Then, type under company text "name". See the picture below.



Step 13

Now we have designed our professional logo. It's time for animation.

Step 14

Click on frame 12 of layer text and press F6 key. After that, press F6 key nine times. Then, click on every second keyframe and press delete key on the keyboard. See the picture below.



Step 15

Click on frame 100 of layer text and press F5 key.

Step 16

Lock text layer, unlock logo layer, take the Selection Tool (V), select the logo (circle) and press F8 key (Convert to Symbol) to convert this logo into a Movie Clip Symbol.





Step 17

Click on frame 8, 15 and 25 of layer logo and press F6 key (Keyframe). After that, go back on frame 15, take the Selection Tool (V), click once on the logo (Movie Clip) to select it and go to the Properties Panel below the stage.On the right, you will see the Color menu. Select Advanced in it, click on Settings button and set the following options:



Then. click ok.

Step 18

Now, you get this:



Step 19

Right-click anywhere on the gray area between frame 8 and 15 and frame 15 and 25 on the timeline and choose Create Motion Tween from the menu that appears.See the picture below.



Step 20

Click on frame 100 of layer logo and line and press F5 key

Test you're movie (Ctrl+Enter).

Good luck!

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: 221534

2. Water effect
Total views: 166040

3. Photo slide show
Total views: 153641

4. High-tech city animation
Total views: 151459

5. Special Picture Effect
Total views: 146246

Related links