Animations and Interaction
(Page 1 of 11 )
This chapter provides a quick review of animation basics and the fundamentals of tweening then discusses vector graphic vs. bitmap graphics, working the Timeline and Timeline effects, masking layers and coordinating animated parts. (Chapter 4 from the book,
Macromedia Flash MX Professional 2004 by Bill Sanders, Sams, 2004, ISBN 0672326051.)
Before we discuss the techniques of animation using Flash tools, you need to understand something about the model of animation on which Flash is based, which will help you both in understanding animation and how to use the Flash tools to achieve animation.
Studies in animal and human locomotion led to an understanding of the movement and position of limbs. By reproducing the sequence of these positions, it became possible to reproduce the animated movement. All that was required was some method of rapidly showing one image after another.
Prior to the invention of motion picture technology, Eadweard Muybridge experimented with multiple image action shots by having people and animals pass by a battery of 12 cameras. As they moved in front of each camera, it was triggered so that the motion would be caught in different positions. The immediate impact of Muybridge's experiment, beginning in 1878, was to change the conceptions of how people and animals actually positioned their bodies and limbs during motion.
Using 12 images from Muybridge's work formatted as JPEG images, you can reproduce the motions of the people and animals that predate motion pictures. Using sequential filenames, beginning with horse1.jpg and ending with horse12.jpg, I was able to use the same images from over 100 years ago and create a smooth animated moving horse in Flash. (The images are available at http://www.sandlight.com if you want to use them.) The following steps are used:
Open a new document and select File, Import, Import to Stage.
Select the folder where you have the horse images stored and select horse1.jpg. As soon as you make that selection, a message box appears and asks whether you want to import all the images to be part of a sequence. Click Yes.
That's it. Flash Pro automatically creates keyframes and sequentially places the images in individual frames, as shown in Figure 4.1.
Figure 4.1 - The sequence of images is placed into 12 keyframes.
Looking at the images from left to right and top to bottom in Figure 4.2, you can see the different positions of the horse as it walks in front of Muybridge's battery of cameras. They don't appear to be especially sequential, but when they're placed into the Flash Timeline panel and played, the amount and quality of the animation is truly remarkable.
Figure 4.2 - The 12 images of a moving horse from Muybridge's battery of cameras.
Although technology today is light years ahead of the battery of cameras used to record animal and human locomotion in Muybridge's day, the principles of animation haven't really changed. By creating a sequence of images that displays the correct relative positions of torso, head, arms, legs, and feet, the animation appears to move in a realistic manner. The section "Coordinating Animated Parts" at the end of this chapter examines the animator's art of re-creating natural movement. First, though, we need to review the main built-in Flash Pro animation tools and processes.
 This chapter is from Macromedia Flash MX Professional 2004, by Bill Sanders (Sams, 2004, ISBN: 0672326051). Check it out at your favorite bookstore today.
Buy this book now. |
Next: Vector Graphics Versus Bitmap Graphics >>
More Flash Articles
More By Bill Sanders
