From after effects to flash poetry in motion graphics - part 6 potx

To this point in the book, we have treated text with a degree of reverence. Text has been

both readable and legible and has pretty much been treated more as a communication

element than a design element. In this chapter, we take text and make it shake, wiggle,

jiggle, and otherwise bounce around the screen. In many respects, the treatment of text in

this chapter reverses the order. Text starts as a design element and then comes to rest as a

communication element.

Though we have covered the basics of working with text, this chapter digs even deeper

into what you can do, including putting text on a path. Once you have those basic skills in

place, we are going to “kick out the jams” and show you how to use text animators to add

a rather high degree of control over the text put into motion. This will also include the use

of range selectors, shapes, and one of the more fascinating tools in the arsenal: a Wiggly

Selector that randomizes the properties that apply to the text.

This chapter consists of a number of rather interesting text effects that you can apply to

your Flash projects. Each example in this chapter presents a specific effect or combination

of effects you can use in your Flash efforts. They are in no way to be regarded as the defin￾itive ways of accomplishing the effects we demonstrate. Instead, use the examples pre￾sented in this chapter as a creative spark.

Reviewing the After Effects and Flash text tools

Though Flash and After Effects have remarkably similar text capabilities, there are some

major differences between them.

The After Effects Text panel (see Figure 7-1) is quite similar to the ones found in Photoshop

or Illustrator, and it offers you a greater degree over the control of the appearance of the

text than you have in Flash. One interesting aspect of the text controls in After Effects is

that you can apply a variety of fonts and settings to the text in a text block. The thing is,

you run the very real risk of making a mess of the block. If this happens to you, select the

text block and choose Reset Character in the Character panel’s Options pull-down.

The Flash text tools, shown in Figure 7-2, become visible in the Property inspector when

you select the Text tool. The difference between the panel in Flash and its After Effects

counterpart is how text is treated in Flash. Being a web tool, Flash can use static text, the

text you see on the stage, or dynamic text, which is text added to a text box using

ActionScript. This text can be added from an external source such as an XML document or

added in the ActionScript code. Text can also be interactive in that you can assign a link to

text that opens a web page when the text is clicked on the Flash stage.

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS

230

7486CH07.qxd 11/8/06 3:48 PM Page 230

Figure 7-1. The After Effects Character and Paragraph panels. If you don’t see them, simply

click the Toggle button on the toolbar.

Figure 7-2. The Flash text tools

PLAYING WITH TEXT

231

7

7486CH07.qxd 11/8/06 3:48 PM Page 231

Exploding Flash text

In this exercise, we are going to show you how to “blow up” some text on the Flash stage.

Though Flash does not have the Effects & Presets panel contained in After Effects, you can

still achieve some interesting text effects by simply, as we are fond of saying, “letting the

software do the work.”

In Flash, text inevitably hits the stage as a single block of text. This makes it rather difficult

to scatter letters across the screen. A lesser-known feature of Flash is its ability to convert

a complex object into a series of individual objects and then move each of those objects

into its own layer. The amazing thing about this is there are really only two steps involved

in the process:

Break the object apart by pressing Ctrl+B (PC) or Cmd+B (Mac).

Distribute the selected objects to their own layers by selecting Modify ➤ Timeline ➤

Distribute to Layers.

That’s all you need to do. Once the objects are in their own layers, they can be animated

off the stage in a manner of your choosing. Here’s one way:

1. Open ExplodingText.fla in the ExplodingText folder found in the Exercise

folder of the Chapter 7 code download. You will note the only things on the stage

are an image and the word Flash.

2. Select the word on the stage by clicking it. Press the Cmd+B (Mac) or Ctrl+B (PC)

keys. The word breaks apart into individual letters. Keep breaking the letters apart

until they look like they are filled with pixels.

3. Select each letter on the stage and press the F8 key to convert each one to a sym￾bol. When the Convert to Symbol dialog box opens, name each symbol for the let￾ter selected and select Movie Clip as its type.

Dynamic text in Flash has an option not shown in Figure 7-2. When the Text Type

option is set to Dynamic in the Property inspector, an Embed button will appear beside

the Anti-Aliasing Options menu. This button will allow you to embed an entire font or

selected character from the font into the SWF file. This is a great feature to have avail￾able to you in situations where a client’s corporate font has to be used. The downside

to this is that embedding fonts also increases the final size of the SWF file. If you must

embed a font, only embed the characters used. This way the file size increase is not as

dramatic.

What is the False Bold and False Italic terminology that appears in both the Flash and

After Effects menus? Essentially what this does is to simply add a stroke around the

letters to “mimic” bold text or slant them to imitate italic text. If your font contains

such terms as Italic, Oblique, Bold, Heavy, or Extra Bold as part of its name, then use

these it in place of clicking the False Bold or False Italic button.

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS

232

7486CH07.qxd 11/8/06 3:48 PM Page 232

4. With the letters selected, select Modify ➤ Timeline ➤ Distribute to Layers. The letters

will appear on separate layers and, best of all, the layers have the same name as the

letter in the layer (see Figure 7-3). Delete the original layer named Flash by

selecting it and clicking the Trash Can in the Timeline panel.

Figure 7-3. Selecting Distribute to Layers places the individual letters on

their own layer.

5. Add keyframes at Frames 5 and 15 for each of the new layers. Add a motion tween,

starting at Frame 5, between the keyframes just added.

6. Select each letter, starting with the keyframe at Frame 15, and move them into dif￾ferent positions. With each letter selected, choose the Free Transform tool and

rotate the letter at its new position.

7. Select Modify ➤ Transform ➤ Scale and Rotate and scale each letter to 400% or

500%.

8. Add a keyframe for each layer at Frame 30. Move the letters completely off of

the stage in Frame 30, and add a motion tween between Frames 15 and 30 for the

layers.

The Break Apart command converts letters from vectors to individual bitmaps.

It is a handy command to know for text because once text is converted to a

bitmap, those nasty font substitution issues tend to disappear. That is the good

news. The bad news is the text is no longer editable.

PLAYING WITH TEXT

233

7

7486CH07.qxd 11/8/06 3:48 PM Page 233

9. When finished, drag the playback head to Frame 1 and press the Return/Enter key

to start the animation. As shown in Figure 7-4, the letters will “explode” off of the

screen.

Figure 7-4. The text seems to have, with apologies to SCTV, “blowed up

really good.”

Now that you have a basic Flash technique in your arsenal, you may be wondering, “That’s

nice, but surely there must be more I can do with it?” The answer: “Yes, there’s a lot you

can do with it.” Here are a few ideas:

Apply a blend mode to the clips on the stage. As the letters move, depending on

the mode chosen, they will take on different colors.

Apply a filter to the movie clips. For instance, apply a Bevel filter, and the letters

will take on a 3D look. Couple that with a blend mode, and you can have some

rather interesting results.

Add a keyframe at Frame 20 of each animation on the timeline. Select each movie

clip in Frame 30 and, in the Color pull-down in the Property inspector, set the alpha

value to about 3%. As the letters move off of the stage, they fade out.

Replace each letter in the movie clips with an FLV file using, say, the letters in the

word acting as a mask, in After Effects, for the blobs from the previous chapter. The

result is letter-shaped blobs in motion that change color as they move across the

stage. Be careful with this one. Scaling up an FLV file is not suggested because of

the “hit” on bandwidth. If you must scale, scale down.

Exploding text in After Effects

As you may have guessed by this point in the book, After Effects can do the job of “blow￾ing up” text with a bit more “wow” than that obtainable in Flash. For example, you may

want to use exploding text as a preloader for a Flash movie or have it “explode” into pieces

when the user rolls the mouse over the text block in Flash.

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS

234

7486CH07.qxd 11/8/06 3:48 PM Page 234