Flash tutorial on how to create a 3D perspective text effect with Flash.	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash Tutorial - 3D Perspective Text Effect

Free Flash Tutorial

With the introduction of many advanced drawing tools in Flash CS3 and Flash 8 Pro the possibility of creating great graphic effects has really taken off. It is now better for web designers to create graphics in Flash than in PhotoShop or other graphic programs. The graphic image below is less than 1KB! The equivalent image saved as a Jpeg or GIF from PhotoShop would be close to 10KB. What's more because of the way Flash saves files (in Vector file format) the image can be as wide and tall as you want and the file size will stay the same! This is not true of Bitmap type images like Jpeg and Gif images.

In this tutorial you learn to distort your text to give a perspective type effect. You will then add a gradient and a drop shadow:

Example: Download the Flash file  Draw 222a

Click by Click: If you would like to view this tutorial without all the notes: Click by Click

Step One: Setting up the Document

1. Open a New Flash Document: File > New (Ctrl N)
2. If the General Tab is not selected, select it:
3. Select Flash Document: Flash File (ActionScript 2.0) or (ActionScript 3.0)

Note: There is no ActionScript used in this tutorials so the version is not important. If you are not sure which version of ActionScript to use just default back to ActionScript 2.0. You can always change this to ActionScript 3.0 later by going to File > Publish Settings > Flash > ActionScript version.

4. Click: OK

Important Note: You will not see the Filters unless your Movie is set to be published in the Flash 8 Player.

 

5. Go to: File > Publish Settings
6. If the Flash Tab is not selected, select it:

Note: If you cannot see the Flash Tab make sure the Flash Box is selected: (look under the Formats Tab).

7. For Version select: Flash Player 8 (or up)

Note: The Flash filters will not be visible unless you select Player 8 (or up) so

8. Click: OK
   
   
9. Go to: Modify > Document (Ctrl J)
10. Set the size: 550 x 90 (or other appropriate size)

Note: If you wish set an alternative background color to the default white.

11. Click: OK
    
    
12. If your Property Inspector is closed, open it: Window > Properties > Properties (Ctrl F3)

Your settings should look similar to this:



My settings as seen in the Property Inspector.

Step Two: Creating the Text

1. Select the Text Tool:
2. Set your keyboard to: Caps Lock
3. Click on the stage and type: WEBWASP (or whatever)
4. Return to your Selection Tool:
5. In the Property Inspector select: Static Text



6. In the Property Inspector select a font like: Arial Black (or similar)
7. In the Property Inspector select Bold:
8. Change the type to a large font size like: 96

Your text is now ready.

Step Three: Applying the Gradient

In Flash you cannot apply a gradient directly to text. It first needs to be broken apart into a shape. Only when the text has been broken apart will you be able to apply a gradient color. But once this has been done you will no longer have a Font that can be edited. This means that you will not be able to change the type face or other attributes like bold & italic etc. You also will not be able to change the spelling. So before you proceed make sure that the word is spelt correctly and that you have selected a type face that you like!

1. If you text is not selected: Select Text
2. Break the text apart: Modify > Break Apart (Ctrl B)

Note: That breaks your word up into individual letters:



To create shapes of the letter it need to be broken apart once more.


3. Break the text apart: Modify > Break Apart (Ctrl B)


The word is now broken into shapes.

4. Open the Color Panel: Window > Color (Shift F9)
5. Select: Type > Linear


Gradient applied to text.

Note: Yours may look different. The pallet defaults back to the last gradient used.

6. In the Color pallet double click the left color swatch:

Note: If the swatch is not right over to the left just drag it all the way to the left:

7. Select a color. I selected: #870101



8. In the Color pallet double click the right color swatch:
9. Select a color. I selected white: #FFFFFF
10. If you have extra swatches between the left and right swatches: Pull them off


Three unwanted swatches in the centre.

The swatch colors are now correct:

Step Four: Turning the Gradient

Although the color maybe correct the gradient direction is wrong. The next step is to turn the gradient around so that it goes up and down rather than left to right. This will have to be done to the first letter then copied to the remaining letters.

1. Deselect all: Edit > Deselect All (Ctrl Shift A)
2. Select the Gradient Transform Tool:

Note: The Gradient Transform Tool maybe found behind the Free Transform Tool:

3. Select the first letter: W


The gradient is now ready to be turned.

4. Grab the Rotate Gradient Icon and turn the Gradient:


The gradient direction has now been turned.

5. Drag the Gradient Width Icon in to the edge of the letter:


The gradient width now fits the height of the letter.

Note: If the center of your gradient is not in the correct position move it:

The gradient is now in the correct position. It is time to copy the gradient attributes and apply it to the other letters.

6. Select the Eyedropper Tool:
7. Click on your corrected letter W to Copy the Gradient Fill
8. Click on the next rest of the letter to: Paste the Gradient Fill
9. Deselect all: Edit > Deselect All (Ctrl Shift A)

   

   The Gradient is now complete.

   Note: Because different letters are different shapes you may find that you need to tweak the gradient width in some individual letters. Look at the top of my S. The top appears whiter than other letters. That is because curvy letters are often taller than other letters. In this case 2.2 points taller. If you want increase the gradient width slightly for the rounded letters.
   

Step Five: Creating the Perspective

1. Select all your letters: Edit > Select All (Ctrl A)
2. Go to the Free Transform Tool:

Note: The Free Transform Tool maybe found behind the Gradient Transform Tool:

3. In the bottom of the Tool Box select the Distort Option:
4. Drag the top corners in: Distort Top Corners

Tip: Hold the Shift Key down as you drag and then both corner will pull in together.


Pulling the top corners in with the Distort Option of the Free Transform Tool.

Let go and the image distorts:



5. If needed distort the bottom corners out: Distort Bottom Corners


The perspective type of distortion is now complete.

Step Six: Creating the Drop Shadow

In Flash CS3 & Flash 8 Pro there are PhotoShop style filters that you can apply directly to Movie Clips and other objects. If you are using Flash 8 basic or earlier MX versions of Flash you will not do able to use the method described here so look at the notes.

1. If you text is not selected, select it: Edit > Select All (Ctrl A)
2. Now convert it to a Movie Clip: Modify > Convert to Symbol (F8)
3. For type select: Movie Clip
4. Click: OK
   
   
5. If it is closed, open the Filter Panel: Window > Properties > Filters
6. In the Filter Panel click:  > Drop Shadow



7. If you wish play with the Drop Shadow settings to change the appearance of the Shadow: Change Filter Settings

   Tip: Use the standard Selection Tool to select the Movie Clip. Then go Ctrl H to hide the selection. The MC is still selected but there is no blue rectangle. This makes it easier to see the changes that occur as you play with the filter settings. Otherwise the blue rectangle tends to obscure some of the detail. To make the selection rectangle visible again just press Ctrl H again.

   Play with the Filter settings to change the shadow effect:

   

The special effects that are created through the use of Flash filters and other sophisticated drawing tools enable you to achieve stylish graphic effects all created within Flash! Enjoy.

I hope you have found this useful. If so perhaps you could recommend this site to others and link to webwasp!