| |
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!
|
|