STEP 13 combining circles AND LETTERS

Now it's time to animate. The trick here is to keep things moving smoothly enough so that the overall vibe is cool and consistent. I accomplish this by working the rhythm of the animation and varying only one or, at most, two factors, such as circle color and growth direction. The effect, hopefully, is both fluid and intriguing. The color circles lead the eye a half step ahead of the letter fade insit's a beautiful thing. Remember that distraction can be a powerful tool; use it to your advantage.

  1. Open the "shockzone" Library symbol for editing by double-clicking on the "shockzone" symbol in the library.

  2. Add a new layer by clicking the New Layer button on the Timeline Inspector.

  3. Name the layer circles or something similar.

  4. From the Library, drag an instance of one of the circle symbols onto the stage. Slide the playhead to the sixth frame so that both the circle and the "s" in shockzone are now visible, and position the circle so that it is centered over the letter.

  5. Add keyframes on frames 3 and 6 and a blank keyframe on frame 7. Your time line should look like the one shown in figure 02:24.

    Figure 02:24.


  6. Select the first keyframe and choose Modify > Transform > Scale and Rotate, or use the keyboard shortcut Ctrl-Alt-S / Cmd-Option-S to scale the circle up 125%.

  7. Choose Modify > Instance or use the keyboard shortcut Ctrl-I / Cmd-I to set the Alpha to 0.

  8. Select the third keyframe, set its Alpha to 0%, and scale it down to 22%.

    At this point you should have three keyframes of the circle. The first is larger and alpha'd out to 0, the second is in its original state, and the third is smaller and alpha'd out to 0.

  9. Using the Shift key, select both frames 1 and 3.

  10. Choose Insert > Create Motion Tween to tween all frames at once (see figure 02:25).

    Figure 02:25.


    If you rewind and play this sequence, the circle will appear to zoom in on the "s" of shockzone and disappear just as the "s" is completely visible. The next step is to bring in each letter with its own circle, varying the color, circle line width, and scale.

  11. Repeat steps 210 with the following variations:

    • Use the second circle symbol: circle4pt.

    • Use the Scale command to make the same circles small on the first keyframe and larger on the last.

    • Change the color of the line by choosing the Tint effect from the Instance Properties dialog.

  12. Continue adding a variety of circles until one exists for every letter in the word.

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 © 2008-2017.
If you may any questions please contact us: