STEP 11 animating the text, PART 2


The "shockzone" element uses a different style of animation. In addition to fading up the letters linearly, from left to rightanother element is used to draw focus to each letter. As a letter becomes visible, a circle interacts with it, either growing toward it or shrinking away from it.

setting up the frames

Next you need to work with the Timeline to set up the frames for the animated text. Here is the process:

  1. In the shockzone symbol Timeline, if you haven't already, apply the steps found in the previous sections "Converting Letters to Symbols" and "Adding Frames and Tweens." Your Timeline should resemble the one shown in figure 02:20.


    Figure 02:20.

    graphics/02fig20.jpg


  2. Select the first keyframe in the first layer, the "s."

  3. Choose Modify >Instance or press Ctrl-I / Cmd-I to display the Instance Properties dialog. Set the Alpha to 0.

  4. Repeat steps 2 and 3 for each layer, setting all initial keyframes to 0 Alpha (transparent), but this time, scale each letter down 22%.

    I wanted a slightly more subtle fade up here.

  5. In the second layer (the "h"), highlight the range of frames between the two keyframes, inclusivethat is, from frame 1 to frame 6.

  6. Drag the frame range one frame over so that it starts on frame 2.

    As you move away from the first frame, Flash automatically adds a blank keyframe at frame 1 of that layer.

  7. Repeat step 5 for each layer, moving the frame range one frame higher than the frame on which the previous layer starts in a stair-step -like fashion, until your Timeline resembles the one shown in figure 02:21.


    Figure 02:21.

    graphics/02fig21.jpg


If you move the playhead across the Timeline you'll see the word "shockzone" fade up, one letter at a time across the screen, in just over one second.



Flash Web Design The Art Of Motion Graphics
Flash Web Design oder: the art of motion graphics
ISBN: 3827256623
EAN: 2147483647
Year: 2005
Pages: 192

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net