Flash tutorial training on Perspective Text Effect.	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Click by Click: 3D Perspective Text Effect

Full Version: This is a shortened click by click version of a: Full Length Tutorial

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 Beg 222a

Full Tutorial: If you would like to view the tutorial with notes: Full Tutorial

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)
4. Click: OK
   
   
5. Go to: File > Publish Settings
6. If the Flash Tab is not selected, select it:
7. For Version select: Flash Player 8 (or up)
8. Click: OK
   
   
9. Go to: Modify > Document (Ctrl J)
10. Set the size: 550 x 90 (or other appropriate size)
11. Click: OK
    

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

Step Three: Applying the Gradient

1. If you text is not selected: Select Text
2. Break the text apart: Modify > Break Apart (Ctrl B)
   
3. Break the text apart again: Modify > Break Apart (Ctrl B)
4. Open the Color Panel: Window > Color (Shift F9)
5. Select: Type > Linear
6. In the Color pallet double click the left color swatch:
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

Step Four: Turning the Gradient

1. Deselect all: Edit > Deselect All (Ctrl Shift A)
2. Select the Gradient Transform Tool:
3. Select the first letter: W
4. Grab the Rotate Gradient Icon and turn the Gradient:
5. Drag the Gradient Width Icon in to the edge of the letter:
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)
   

Step Five: Creating the Perspective

1. Select all your letters: Edit > Select All (Ctrl A)
2. Go to the Free Transform Tool:
3. In the bottom of the Tool Box select the Distort Option:
4. Drag the top corners in: Distort Top Corners
5. If needed distort the bottom corners out: Distort Bottom Corners

Step Six: Creating the Drop Shadow

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

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

Full Version of this: Tutorial