Flash Course: Creating Star Wars Text

Text effects are always popular with Flash users - especially the “Star Wars” effect, which became famous with the opening scene of the 1977 film. The effect is relatively simple, but it comes at a price: playback performance suffers. Use it carefully and test your animation often to make sure playback doesn’t get stuck. Make sure the text is readable without the reader having a headache.

1. Let's start by typing our text. Try using a simple, bold font that is easy to read. We will transform and animate this text. Because it will be in constant motion, it is paramount that it be spelled out and easy to read for the viewer. Select the text box and break it up until the text becomes vector graphics. The amount of vector information is essential and will most likely cause a performance issue during playback. This is also a reason to use a simple, clean-lined font, as it will result in fewer vector dots.

   

2. The next step is to simulate the perspective that is needed to make an effect as if the text is moving away. Select the Free Transform tool q and within it the Distort tool. While holding down the S key, drag one of the top corners toward the center of the text. Pressing the S button maintains the transformation ratios by distorting the adjacent corner in the opposite direction. Convert this block of text to a graphic symbol. If you have multiple blocks of text, it is best to treat them as smaller unique symbols.

   

3. Insert a new layer and convert it to a guide layer. Make sure the layer that contains your text is not attached or “guided”. You can drag the guide layer below the text layer to prevent them from being merged. Whatever the guide layer contains will not be included in the exported SWF. Flash CS5 has a good feature that lets you choose whether to export hidden layers or not. This option is available on the Flash tab of the File> Publish Settings menu. On this layer, use the Line tool to draw a line at an angle to the side of your text box. Copy and paste it in place, flip it horizontally, and then place it on the opposite side of the text block.

   

4. Add a second keyframe and resize the text until it fits between the guide lines where they constrict. We still need to insert a few frames between the two keyframes and apply a Motion tween.

   

5. The last step actually breaks the only perspective on which this animation is based. I think this is the most important step as it really helps to preserve the illusion of a text disappearing in infinity, yet it is so simple. In the last cube of the tween, select the symbol that contains the text box and then resize it vertically using the two middle handlers along the top or bottom edges. In summary, we compress the symbol to make it flatter (don’t widen).

Continuous playback will require a combination of hundreds of frames and a high frame rate. The exact number depends on it. The exact amount depends on the amount of text, the font, and how big (height x width) our film is. The larger the film, the more it will use the processor. Any animated effect that uses a combination of these factors will result in poor playback performance. Let’s test often and know what our audience will be like.

We can also try this effect in Photoshop with a block of text that has been skewed to the same perspective. We import the text with the same solid color background that our Flash movie uses. This will result in a much more processor-friendly animation, but its quality will deteriorate if you resize it. Flash does not resize imported bitmaps very well, so the result will not be visually appealing. The trade-off is the use of sharp, vector text with little potential power loss during playback. The best defense is to test often.

For more Flash tips and tricks a Tricky techniques in Adobe Flash CS5in, in the publication from which the trick read in this article can also be found.

You can see a live Flash demo on our site on March 28th where you can learn more tricks!

On the day of the broadcast, a prize draw will also start on our site, where the Tricky techniques in Adobe Flash CS5We will draw three copies of the book in in among our readers.