Super Text Effect

images

SO OFTEN THE simplest of animation techniques is the most effective visually. Take this simple website introduction for Superbusy Records as an example of simplicity at its finest and how to get the most bang for your buck with the basics of Flash animation. The text animation is comprised of basic motion tweens and scaling, and the bee animation takes advantage of some old school blurring with a linear gradient. Timing is everything and the fast-paced editing of this animation makes it look more complicated than it truly is.

 

images

1 Start off with a text field set to Static and type in your text. Nothing fancy here, just some basic text to get you started.

images

2 Break apart the text field once using imageimage imageimage and each letter will be broken apart but still editable. Break apart twice to convert your text to raw vector shapes. Your text will no longer be editable once broken down this far. You can choose to break apart only once if you think you might want to edit the text at a later time.

images

3 Select each letter individually and convert each to a Graphic symbol. Once all letters are converted, select them all, right-click over them and select Distribute to Layers from the context menu.

images

4 Select all layers on a frame somewhere down the timeline (frame 30 will do) and insert a keyframe for every layer by hitting the F6 key. Go back to frame 1 and select your first letter. Use the Scale and Rotate (Ctrl + Alt + S) to scale it to 400% or greater.

images

5 Apply a motion tween to animate this letter scale from 400% to 100%. Select the keyframe in frame 30 and move it to around frame 5. Play back to test the speed based on your frame rate. Adjust the tempo as necessary by adding or removing frames in the motion tween.

images

6 Repeat this procedure for each letter. Then stagger each letter’s animation by sliding the motion tween down the timeline so each letter animates into place one after the other. Your timeline tweens should resemble a staircase.

images

7 The bee graphic is introduced using a simple linear gradient first, then the bee “pops” into position. This technique is identical to the “Flying text” topic in Chapter 4.

images

8 The bee is a movie clip containing a very simple, two-framed animation of the wings. The original wing is replaced with a radial to provide the illusion that it is blurred because it is moving faster than our eye can see.

images

9 The blur animation is comprised of only two frames with the radial gradient slightly rotated between them. The looping of these two frames at 30 frames per second is enough to convince us that they are oscillating at a very high speed. Adding the appropriate sound effect makes it even more convincing.

 

image

Hot Tip

You may want to break apart your text into raw vector shapes if you plan on sharing this FLA with someone else on a different computer. If the font you use is not installed on the other machine, then Flash will substitute that font for the default font or a font of your choice. If this project is for a client and they request the FLA, you should make sure they have the same font you are using or break apart the text into shapes.

image

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

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