Flash Explained

In this easy Flash 8 Pro lesson, I will show you how to make a cool 3-D logo in a few easy steps. You will see:

• How to make primary vector shapes from static text field,
• How to apply a gradient fill to all the letters evenly,
• How to make create a 3-D effect with your text by distorting it and putting it into perspective,
• How to apply a drop shadow effect to the logo to add more depth to it and more.

You can see the final result below — the finished 3-D logo.

Making a vector shape from a static text field

1 Open a new Flash document.

2 Select the Text tool (T). Go over to the Property inspector and select the following options (list entries match the numbers in the image below):

1. Select Static Text. This option is always used for animation, graphics and other cases where text doesn't change.
2. Select a font type that you like. A word of advice here: for the 3-D logo you are going to make, you should select a strong, bold, fat font. The thin and elegant ones simply won't do the trick.
3. Enter a large size for your font: I chose 60.
4. Select any flat color now, you'll change it later to a gradient anyway.
5. In the rendering options menu, select Anti-alias for animation.

3 Click anywhere on the stage with the Text tool and type your logo word, website name, etc. Hit Esc on your keyboard once you're done with typing. A blue border will appear, delineating your static text.

4 While the text is still selected (the blue border around it tells you that it is), choose Modify > Break Apart. The text field will now be broken into characters, each of which is a static text field in itself.

5 Repeat the previous step: with all the new text fields selected, choose Modify > Break Apart again. You have just broken the text down to simple, base vector shapes.

6 Click on any empty part of the stage with the Selection tool (V) to unselect the vector shapes.

Top of page

Filling the letters with a uniform gradient fill

7 Select the Paint Bucket Tool (K). Go to the Color Mixer panel. It is probably already open by default. If not, just choose Window > Color Mixer. Make a nice blue gradient fill by executing the following steps:

1. Click on the paint bucket icon to access the fill color options.
2. Select the Linear option in the Type drop-down menu.
3. Click the small color square on the left.
4. In the color hex code input field, enter #A8CEEE. The small square that you clicked a moment ago will have a light blue color assigned to it.
5. Click on the right small square and enter #023C93 in the hex code field.

There! The linear gradient fill is ready to be used.

8 Using the Paint Bucket tool (K), click on the uppermost part of the first letter, and while holding the mouse button, press and hold Shift and start moving your mouse downwards. You will make a perfect vertical fill.

9 While the Paint Bucket tool is still active, go to the Tools panel — you will find the Options section at its bottom. Click the Lock Fill option to enable it.

10 Now just click on each of the vector letter shapes — you don't have to hold Shift or any other key, the letters will automatically fill up with the same gradient that you have applied to the first one.

The logo looks really sleek with the gradient applied uniformly.

Let me show you how to put it into perspective :).

Top of page

Adding a 3-D effect to the logo

11 Using the Selection tool (V), select all the letter shapes. Just click anywhere outside it and start dragging your mouse until you have encompassed all shapes.

12 Select the Free Transform tool (Q). In the Options section of the Tools panel, activate the Distort option.

13 Bring your mouse over the lower left handle of the selected vector shapes. It will change to a white arrow.

14 Hold down Shift on your keyboard, click and start dragging your mouse to the left. The shape will begin to distort (its lower part only). Release your mouse when you feel a sufficient level of distortion has been achieved.

15 You may repeat the above step, but for an upper corner of the shape, to add a better perspective effect to the logo.

The logo looks really cool now! But a nice shadow will cement the 3-D effect. However, filter effects cannot be applied to shapes, you must have a symbol to be able to do that. The next step explains how.

Top of page

Adding a drop shadow effect to the 3-D logo

16 With the shape selected, choose Modify > Convert to Symbol. Select Movie clip as type, call it 3-D logo or anyway you like and click OK.

17 You can apply a drop shadow effect to your logo now: go to the Property inspector and click on the Filters tab. Then click on the blue plus icon to access the available filters. Select the Drop Shadow filter from the menu that will show up.

18 Set the options for the Drop Shadow filter as shown:

1. Blur X and Y: 3.
2. Strength: 150%.
3. Quality: High.
4. Color: black.
5. Angle: 90°.
6. Distance: 7.

Leave the Knockout, Inner shadow and Hide object options unchecked.

And here's the 3-D logo in all its magnificence:

You can also invert the color in the gradient, so that the lighter hue of blue appears at the logo's bottom:

Now it looks even more three-dimensional! That's because of the small white areas appearing at the top of the letters. They were there before, but they are more apparent now because of the high contrast with the dark blue color.

How to invert the colors of the gradient? Nothing could be more easier! Just double-click on the movie clip to enter inside it, select all the letter shapes and go to the Color Mixer panel. Once there, just drag the two little blue color squares in the panel to the opposite sides of their current respective positions.

To have your 3-D logotype rendered as sharply as possible, make sure that it is positioned on round coordinates (see the X and Y fields in the image below, on the left). Also, if you have a lot of animations going on in your movie, especially if the logo is involved, you may want to turn on the Use runtime bitmap caching option. This will enable for faster animation playing.

This logo weighs just 1 KB! While as an image, it would weigh between 13 and 18 KB (depending on the type and quality of the image). Another advantage your logo has in Flash is its vector shape, which allows for scalability, without any loss to the quality. Just keep in mind that you have to change the options for the Drop Shadow filter if you are going to scale down your logo, because it would look bad if it had the same intensity applied to a smaller shape.

Have fun creating more cool 3-D shapes, and don't forget to check out my other cool Flash design tutorials!

If you are curious about animation and 3-D in Flash, see the articles on 3-D and animation from Adobe.

Download the source .fla file with the 3-D logo

Comments

Submit a comment