Home arrow Flash arrow Animations and Interaction

Animations and Interaction

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.)

Author Info:
By: Bill Sanders
Rating: 4 stars4 stars4 stars4 stars4 stars / 19
July 07, 2004
  1. · Animations and Interaction
  2. · Vector Graphics Versus Bitmap Graphics
  3. · Working the Timeline
  4. · Using Shape Hints to Morph Fonts
  5. · Tweening Imported Vector Graphics
  6. · Making and Using Guide Layers
  7. · Masking Layers
  8. · Echoing Layers
  9. · Timeline Effects
  10. · Choosing Positions for a Figure
  11. · Animating the Spearman and the Buffalo

print this article

Animations and Interaction
(Page 1 of 11 )

sandersBefore 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:

  1. Open a new document and select File, Import, Import to Stage.

  2. 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.

blog comments powered by Disqus

- More Top Flash Game Tutorials
- Top Flash Game Tutorials
- Best Flash Photo Gallery Tutorials
- The Top Flash Tutorials for Menus
- 7 Great Flash Tutorials
- Adobe Creative Suite 5.5 Now Available
- Critical Flash Vulnerability Heats Up the Web
- More on Nonpersistent Client-Side Remote Sha...
- Nonpersistent Client-Side Remote Shared Obje...
- Using the Decorator Pattern for a Real Web S...
- Using Concrete Decorator Classes
- Delving More Deeply into the Decorator Patte...
- The Decorator Pattern in Action
- A Simple Decorator Pattern Example
- Decorator Pattern

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials