|
|
|
How to tackle complex animation tasks in Flash
FLASH answers a designers’ cravings for more graphics and more control of those graphics by providing a way to deliver vector images over the web. This article will teach you about using Flash to create complex animation which will go a long way toward helping you create an expressive, creative and exciting websites. Okay! So fire up your computer, open your mind and get ready to turn and burn!
I assume you know how to manipulate objects and animate them one at a time, in a single layer. To create complex animated movies, you are going to need to work with multiple objects, multiple layers and even multiple scenes. With these techniques, you can really start to bring your animations to life.
Animating multiple motion tweens
Flash can motion-tween only one object per layer. In order to tween multiple objects simultaneously you have to put each one on a separate layer. To get a feel for tweening multiple objects, try combining three simple motion tweens to create a game of Ping Pong. One layer contains the ball; the other layers each contain a paddle.
Setting up three objects in separate layers:
1. Add two new layers in a Flash document, this gives you a total of three layers in the movie.
2. On the stage, in first layer, use the oval tool to create a circle; in second layer use the rectangle tool to create a paddle; then copy the paddle and paste the copy into the third layer.
Setting up the tween in all layers with one command:
1. In the Timeline, select Frame 1 in all the three layers.
2. From the insert menu, choose Create Motion Tween.
3. In the Timeline, select Frame 20 in all three layers.
4. From the insert menu, choose Frame. Flash extends the motion tween through Frame 20 on all three layers, placing a dotted line across the frames to indicate that they are part of an incomplete motion tween. You need to reposition the objects and create key frames to complete the tweens.
Adjusting the positions of the tweened objects:
1. Position the play head in Frame 5
2. On the stage, drag the ball to the approximate location where it should connect with one of the paddles for the first hit. Flash creates a key frame (in Frame 5) for the ball in its new location. Flash completes the motion tween between Frame 1 and Frame 5 of the Ball layer and leaves the broken-tween line in all the other frames.
3. On the Stage, reposition the first paddle object so that the paddle connects with the ball for the first hit.
4. In the Timeline, position the play head in Frame 10.
5. On the Stage, drag the ball object to the approximate location where you want the ball to connect with a paddle for the second hit.
6. On the Stage, reposition the second paddle object so that the paddle connects with the ball for the second hit.
7. Repeat steps 1 through 6 to make the ball connect with each paddle one more time.
Please note that to position objects on the Stage with greater precision than dragging allows, use the Object Inspector to position the objects using x and y coordinates.
Tweens in multiple-part objects
An important thing to remember about complex shape tweens is that Flash deals most reliably with a single shape tween on a layer.
In the following exercises, you create a crude flame tween.
Creating shape tweens on separate layers:
1. Add two new layers in a Flash document, this gives you a total of three layers in the movie.
2. On the Stage use the oval tool to create three concentric oval shapes. In the bottom layer, create a large oval; in the middle layer, create a medium oval (center it over the first oval); in the top layer, create a small oval (center it over the medium oval). Give each oval a different color.
3. Select Frame 5 in all the three layers.
4. From the insert menu, choose key frame.
5. In the Timeline, select Frame 1 in all three layers.
6. From the Modify menu, choose Frame to display the Frame Properties dialog box.
7. From the Tweening pop-up menu, choose Shape.
8. Flash gives the shape-tween property to frames 1 through 4 on all three layers. To create flickering flames, you need to reshape the ovals in Frame 5.
9. In the Timeline, position the play head in Frame 5.
10. On the Stage, edit the circles to create flame shapes.
11. Play the movie to see the animation in action.
Flash handles the shape-tweening of each layer separately.
Reversing frames
In the candle flame that you created in the preceding section, you might want the flame to grow larger and then shrink back to its original size. As the shrinking phase is just the reverse to the growing phase, you can have Flash reverse the order of the frames .
To reverse the order of frames:
1. In the Timeline, select all five frames on all three layers.
2. In one of the selected frames, right-click and choose Copy Frames from the contextual frame-editing menu.
3. In the Timeline, select Frame 6 in all the three layers.
4. In one of the selected frames, right-click and choose Paste Frames. Your movie now contains two back-to-back animation sequences of the growing flame.
5. In the Timeline, select frames 6 through 10 on all three layers.
6. From the Modify menu, choose Frames > Reverse.
Tweening with frame-by-frame
You cannot rely on Flash to do all the work of creating in-between frames that capture the movement you want. You can combine Flash’s tweening with your own frame-by-frame efforts.
In the preceding section, you created a very crude version of a flickering flame. In the following exercises, you refine it.
Converting in-between frames to key frames:
1. In the Flash document that you created in the preceding section, position the play head in Frame 2.
The first step in this tween is not particularly effective, the central flame portion seems to be a bit too far to the side. You can improve the motion by adding shape hints, or you can create a new key frame to refine the animation.
2. Select Frame 2 in all the three layers.
3. From the insert menu, choose key frame. You are now free to edit the contents to improve the tweening action. If you want to create a smoother motion, expand the tween between key frame 1 and 2.
4. To add more in-between frames, position the play head in Frame 1.
5. From the insert menu, choose Frame.
Tip: Flash limits you to one color change per tween sequence. To speed the process of making several color changes, set up one long tween that goes from the initial color to the final color. Then selectively convert in-between frames to key frames so that you can make additional color changes.
Using animated masks
You can use any of the three types of animation on a mask layer: frame-by-frame, motion tweening or shape tweening.
To get a hang of the technique, try animating a mask that creates a growing rainbow.
Creating an animated mask:
1. Add a second layer to a new Flash document.
2. In Frame 1 of the bottom layer, on the stage, use the oval tool to draw a perfect circle with a radial-gradient fill. To create a rainbow effect, use a gradient that has distinct bands of colour.
3. Erase the bottom half of the circle.
4. In the Timeline, right-click the top layer.
5. Choose Mask from the contextual menu.
Flash converts the layer to a mask, links the bottom layer to the mask and locks both layers.
6. Unlock both layers.
7. On the Stage, in Frame 1 of the top layer, draw a rectangle just below the bottom of the rainbow.
The rectangle is your mask object. Any objects that lie below the rectangle on a linked layer appear; everything else is hidden.
8. Convert the rectangle to a symbol or group.
9. With the rectangle selected on the Stage, choose Modify > Transform > Edit Center and reposition the crosshair that indicates the center of the object. Use the arrow tool to move the crosshair straight up until it rests in the middle of the top edge of the rectangle. Then you can easily rotate the rectangle so that it swings up and over the rainbow.
10. In the Timeline, in the bottom layer, select Frame 15 and choose Insert > Key frame.
11. In Frame 15, with the rectangle selected on the Stage, use the Rotate modifier of the arrow tool to reposition the rectangle so that it completely covers the rainbow object.
12. In the Timeline, in the top layer, double-click Key frame 1 to access the Frame Properties dialog box.
13. In the Tweening tab of the Frame Properties dialog box, from the Tweening pop-up menu, choose Motion; from the Rotate menu, choose Clockwise.
14. Lock both layers and then play the movie.
The writer is a young geek
|
|
|
|
