Flash: Bend and Snap: Using Shape Tweens to do something different with Adobe Flash
 |
|
Step 1: Shape tweens are great for getting some unusual tweens, this is a really simple technique that will get you a more advanced looking animation. It works great as a mask or as part of a transition.
To begin with create a new 200x200px document with a frame rate of about 40. On your stage draw a small, square, red box of proportions:20px x 20px, in the middle of your stage. Then create a keyframe at frame 20 and use the Transform (Q) tool to increase the size of the box to 160px x 160px. Now click on the timeline between the two frames and in the properties panel down the bottom choose 'Tween: Shape Tween'. To get a nice flow on the tween you can add some 'Easing', I've set mine to 100 Out (see Figure 1).
You should now have a nice little increasing square animation as shown in Figure 2.
Figure 1: A bit of easing makes for a better animation...
Figure 2: A nice, simple animation.
Step 2: Now while that looks nice enough, its not very interesting. So now add a keyframe to frame 25 and a 'Shape Tween' between frames 20 and 25, again with '100 Out' Easing. Of course nothing happens between these two frames right now. So go back to frame 20 (where your second keyframe is) and now we alter our shape a little.
Make sure you have the Selection tool (V) selected (this is the regular black arrow tool). Move your cursor over the top edge of the square, you should see the arrow change so that it has a dotted curve underneath (see Figure 3) This means you have the edge under the cursor. At that point press down with your mouse to grab the edge and you can bend it however you wish. Just pull the edge up so it curves out (see Figure 4)
Figure 3: Grab that edge
Figure 4: Bend it out.
Step 3: Do the same to each of the other three edges so that you have a somewhat distored square as in Figure 5. Now if you watch your animation again, it should be a nice little tween, see Figure 6.
Figure 5: Not quite a square anymore
Figure 6: Pop!
Step 4: Now with a bit of imagination you can do a few variations on this animation. We next keyframe at 40 and 45, then copy and paste frame 1 back at frame 60 to make the animation loop. Add Shape Tweens between frame 40 and frame 45 and also between 45 and 60. Now this time at frame 45 we take the edges in this time as shown in Figure 7.
And put it together and we have a spiffy little animation, see Figure 8.
Figure 7: Curving back inwards
Figure 8: ... and Voila!.