Creating Prespective Text Effect

This method is originally written for Flash version 6.


Here's an example of a familiar type of scrolling text.

Creating the Text

Create a new Flash project.  

For this example, use movie dimension of 550px x 400px.  Then do Menu > Insert > New Symbol.  Name the symbol: TheText, set the Behavior to Graphicc.

Now you should be in the editing screen of TheText symbol.  Create a text box about the same width as the movie and type the text.  For this example, use font size of 12.  You can use any color you want, just make sure it's a different color from the movie background color (in this example, I use white as the movie background color, and black as the text color).

Distorting the Text

In this step, we're going to add perspective to the text using the Distort tool.  Before doing this step, make sure that the text is final. The text cannot be edited after this step (you'll need to redo Step 1 and Step 2 to change the text).

Select the textbox, then do Menu > Modify > Break Apart while textbox is selected.  In Flash MX, this will break apart the textbox into characters. 

Repeat Menu > Modify > Break Apart while everything is still selected.  Eventually you cannot Break Apart anymore (the Break Apart menu will be grayed out).  When this happens, stop. 

When you break apart text like this, they become vector shapes.  Vector shapes are no longer text objects, they are shapes or curves, so the text is no longer editable  The reason we need to turn the text into vector shapes is because only vector shapes can be distorted using the Distort tool.  Next, we will distort the shape to create the perspective effect.

With everything still selected, activate the Distort tool (either by clicking the tool or activating it from the menu - Modify->Transform->Distort).  If the menu is disabled, make sure you have all the shapes selected. If you've accidentally unselected the text, you can click on the layer name in the timeline to select everything.

Getting a good looking takes trial and error. You might not get it to look good on the first time, therefore you would want to copy the symbol in the library in case you want to return to a fresh copy.

You should see 8 handles (squares) around the textbox.  You can drag the four handles on the corners to change the distortion of the text.  The goal is to make the text looks like this.


One thing to watch out for is the registration mark (the cross marked in red below). Make sure that the registration mark is on the center of your text. If not, select everything and move the text.

Scrolling the Text

We will be using motion tween to simulate the text scrolling.  For this example, the scrolling will be done in the main scene timeline, but you can use a MovieClip if you want.  So, now let's go back to the main scene (Scene 1). 

Drag an instance of TheText symbol into the stage. Put it below the stage and scale it to 3 times as big. The number depends on your text, in my case, the text is 500 pixel and I scaled it to 1500 pixels. Experiment and see what looks good. You might want to zoom out so you can see the whole stage).

Insert a key frame at frame 300 or so (more frames means slower animation). On this key frame, move the The Text symbol upward so that it's above the stage and squish it (Modify->Transform->Scale).

Example shown below after squishing. The blue rectangle is the position of the text in frame 300.

Select a frame between frame 1 and the end of your movie (say frame 25) and do Menu > Insert > Create Motion Tween. This motion tween will create in-between animation so that your text will start from the bottom and scrolls up to the top, as well as gradually shrinks.

You can add variations by fading the text on the top.
Download Example FLA.