Star Wars Text

TEXT EFFECTS ARE ALWAYS a popular request among Flash users – specifically the “Star Wars” effect made famous during the opening scene in the original 1977 film. The effect is relatively simple to create but comes with a price: playback performance can suffer. Proceed with caution and test your animation often to make sure playback doesn’t suffer. Remember, the text must be legible without giving the reader a headache.

 

images

1 Start by typing your block of text. Try to use a simple and bold font that is easy to read. You will be transforming this text and animating it. Since it will be constantly moving, priority should be making sure it is legible and easy to read for the viewer. Select your text field and break it apart until the text becomes raw vector shapes. The amount of vector information will be substantial and will most likely cause some performance issues during playback. This is another reason to choose a font that is as simple and clean as possible as it will produce fewer vector points.

images

2 The next step is to simulate the perspective needed to provide the illusion that the text is receding. Select the Free Transform tool image and then the Distort (subselection) tool. While holding down the image key, drag one of the upper corners horizontally towards the middle of the text. Holding down the image key constrains the proportions of the transformation by distorting the adjacent corner in the opposite direction. Convert this block of text to a Graphic symbol. If you have several blocks of text, it might be best to keep them as smaller individual symbols.

images

3 Insert a new layer and convert it to a guide layer. Make sure the layer containing your text is not “guided” or linked to it. You can drag the guide layer below your text layer to prevent them from being linked together. Anything on a guide layer will not be included in the exported SWF. Flash CS4 offers a nice feature that provides the option to export or not export hidden layers. This option is accessible by going to File > Publish Settings > Flash tab. On this layer use the line tool to draw a stroke at the same angle as your text field. Copy and paste it in place, flip it horizontally and position it on the opposite side of your block of text.

images

4 Add a second keyframe and scale your text until it fits inside your guides at their smallest point. You will need to insert several frames between these two keyframes and apply a motion tween.

images

5 The final step actually breaks the one and only perspective rule this animation relies on. I also think it is the most important step since it really helps provide the illusion of the text disappearing into infinity yet it is so simple. In the very last frame of the tween, select the symbol containing the text field and using the Free Transform tool scale it vertically using one of the 2 middle handles along the top or bottom edge. In essence you will be squashing the symbol to make it flatter (do not widen it).

For smooth playback, you will need a combination of hundreds of frames and a high frame rate. The exact amount depends on the amount of text, the font style and how large (width and height) your movie is. The larger the movie, the more processor intensive it will be. Any animated effect that uses a combination of these factors can cause poor playback performance. Test often and know your target audience.

image

 

Hot Tip

You could try this effect with a block of text made in Photoshop that is distorted in the same perspective. Import the text as a bitmap with the same solid color background as your Flash movie. It may result in a more processor-friendly animation sequence but will suffer from loss of quality when scaled. Flash doesn’t scale imported bitmaps very well and the results may not be visually appealing. The trade-off is using crisp vector text with some possible performance issues during playback. Test often is your best defense.

images

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.222.239.77