February 2, 2001

Star Wars Style Text Scrolling in Flash
Animating perspective objects

Yes this is a strange thing to write a tip about. But there were actually several postings on the Flash newsgroup asking how to do this, and I thought, "What better way to demonstrate animating of perspective text objects using FreeHand?"

This tip will hopefully, show you a great way to animate objects on the Perspective grid in Flash. It's not completely accurate, but the results are pretty nice nevertheless.

Version: 9 and above

 
 


FreeHand Steps

     

1) In a new FreeHand document, create a text box and enter in the text you wish to animate.

For this particular sample, I wanted the text to simulate the Star Wars opening scroll. To do this, I chose a bold, sans-serif font and gave it a yellow color like shown above.

 

     

2) Now make the Perspective Grid visible under the View menu -> Perspective Grid -> Show. The default grid will work just fine for this, though you may want to experiment with different grids later.

 

     

3) Select the Perspective tool and drag the text block on to the grid. While you are holding the mouse down, press the down arrow key to map the text to the bottom plane like shown above.

Placement on the grid isn't entirely important, but it's good to keep it near the bottom of the document.

 

     

4) Now draw two lines from the perspective grid intersection point on the horizon. These lines should extend all the way down the sides of the text box like shown above. These lines will act as guides later in the Flash movie.

Next select the lines and the text box and Copy them into the clipboard. Save this document and move on to the Flash steps.

Note: If you are using FreeHand 10 and Flash 5, use the Copy Special command under the Edit menu. Then choose the FreeHand 9 format.


Flash Steps

1) In a Flash movie, Paste in the copied objects. They should appear fine like shown above.

 

2) With all the objects selected, Scale them so that the top of the text is almost as wide as the movie like shown above.

Then move everything so that the text is just under where the movie stage is visible.

It's best to go under the View menu and select Movie Area when doing this kind of editing off the stage.

 

3) Next, create a new layer and name it Guides. Control-click (or Right-click) on the layer name and turn on the option Guide.

Select both lines and Cut them. Select the Guides layer and Paste in Place under the Edit menu.

I changed the color of the lines so I can see them easier.

 

4) Select the text and convert it into a Graphic Symbol by pressing F8. Give it a name and it should appear in the Library like shown above.

Now we're ready to create the animation.

 

5) Now while the graphic symbol is still selected, go under the Modify menu -> Transform -> Edit Center.

This will make the center point of the Symbol editable. Just drag it up to where the two guide lines intersect. If you have Snap to Objects turned on, this is really quite easy.

 

6) In the Timeline, give the movie a few frames to work with. Then on the layer that the text is on, click on the last frame and press F6.

This creates a new keyframe containing the same text symbol.

 

7) While this symbol is selected, activate the Scale handles. Click-drag from one of the corner handles until the symbol gets up to the top of the movie stage and shrinks enough for your needs.

Did you notice how the object scales after you changed it's center point? Pretty cool huh?

 

8) Now click on the first frame of the layer that these Text symbols sit on. Make the Frame palette visible and select the Motion tween option. Keep the options turned on that you see above.

Now test the movie to see the results.

 

Above is the final results. You will probably have to add a lot of frames to the animation so that it plays much slower. In the sample shown above, I have about 400 frames at 12 FPS. You have to be kind of careful with this effect. If you have a lot of text, it may play back kind of choppy at times on slower computers.

And finally, add a little Tween near the end that fades the text out to an Alpha value of 0 so it disappears.

This is just one simple example how to tween perspective objects using FreeHand and Flash. If you have any good ideas, send them in!