animation interaction multimedia

flashlight logo
AIM your flash project
 

Course
Information

Syllabus

Calendar

Requirements

CourseQuest

Workshop

Course
Resources

Exploration

Projects

Applications

Approaches

Evaluation

Basics

Animation

Interaction

Multimedia

Planning

Issues

Packaging

 

Animation

girl with paper airplaneFlash is often associated with animation. With relatively little effort, you can create very sophisticated projects.

Animation is the act of creating activity or motion. Most people think of animated cartoons such as television shows and movies. However Flash can also be used to create learning resources and exciting promotional materials.

The key to effective animation is restraint. Although we could have cool animations flying around on this page, it would distract from this text. Be sure the animation is effective, efficient, and appealing. In other words, it should be used to meet a need rather than simply add glitz to a project.

The following links take you to the resources on this page.

try itTry It!
Explore How Cells Divide, Moving Targets, How Stuff Works Animation Tour, Olympics, and Animated Atlas: Growth of a Nation. Notice that the projects use animation to create different kinds of effects. What do you like and dislike about their use of animation? What kinds of animation would you like to create?

Return to the Top

Animation in Flash

Flash contains great tools for creating a variety of animations. Flash offers four ways to create animation.

Frame-by-Frame. The most flexible approach is called frame-by-frame animation. With this type, the developer makes small, individual changes to objects on the Stage within every frame. Although effective, this can be very time-consuming. If you’ve tried making a flip-book or creating claymation, you’re familiar with this approach. Since Flash is a frame-based program, it’s easy to move from frame-to-frame to make these changes. With frame-by-frame animation, you can make incremental changes in the placement of the object to give the appearance of motion (i.e., swinging pendulum, playing on seesaw, or raft floating on water). In addition, you can change the object itself, so it looks like it had been transformed (i.e., pumpkin turns into a jack-o-lantern, a frown turns into a smile, a plant grows).

Tweening is a technique used to make animation much easier. The developer identifies a start point and end point, then the software figures out the positions of the objects “between.” Flash contains two types of tweens: motion tweens and shape tween.

Motion Tweening. Motion tweens move objects from one place on the Stage to another. For example, we’ll move the airplane across the Stage. The developer places an object at the starting point at a Keyframe. Then, creates a Keyframe somewhere along the Timeline and moves an instance of the object to the end point. The creator returns to the beginning frame and chooses the motion tween option. The software then moves the object on a direct path from the beginning to the ending point. Flash provides options to tweak the tweening so that it looks more realistic. For example, motion guide can be used to move the animation along an established line so it looks like a plane is taking off. Easing is used to make it look like a ball is really bouncing.

Shape Tweening. Shape tweens morph one image into another image. For example, we’ll change the shape of the cloud as is moves across the Stage. You could also change circles into stars, a seed into a plant, or a bike into a car. Keep in mind that shape tweening only really works well with the vector graphics. In other words, Flash shape tweening won’t work well on a photograph of a human face, but it would work for a line-based smiley face.

ActionScript. Besides frame-by-frame and tweening, objects can be animated using ActionScript. In addition to animation, scripting is also used for highly interactive projects such as video games and simulations. Finally, you can also choose from pre-built animations provided by Flash. We'll talk more about this option in the Interaction section of the course.

If you want to use the same animation a number of times within a project, you may want to create a Movie Clip. Also, if you want to have animation within animation (called nested), then you may want to use the Movie Clip symbol. For example, we could have many hot air balloons rising taking off the ground. Rather than creating many separate balloon animations, we could just use different instances of a balloon movie clip.

eyeExplore the Animation Learning Guide for Flash CS4 Professional from Adobe. This section has lots of examples and ideas for creating Flash animation.

Read Creating a Simple Animation in Flash by Doug Winnie for a simple introduction.

eyeWatch It!

It's sometimes easier to learn about animation by watching videos. There are many available online, but the tutorials from Layers are new and easy.

Watch New Timeline Animation in Flash CS4 from Layers. Flash CS4 has a new, easy way to create animation.

Watch Flash CS4 Motion Easing from Layers. This is a great tutorial that will demonstrate how to create motion easing.

Watch Flash CS4 Motion Tweening from Layers. Learn to use motion tweening.

Watch Flash CS4 Motion Editor from Layers. You'll learn to create a banner ad.

Watch Flash CS4 New Features: Understanding the New Tween Model from Lynda.com.

Watch Simple Motion with Flash CS4 from YouTube.


Return to the Top

 
 
   

Types of Animation

Some Flash developers are particularly interested in specific applications of animation. For example, they may be interested in developing cartoons, television programs, or web content.

Skim The Twelve Principles of Animation and Animation Concepts.

Anime is an animation style that originated in Japan. You've probably seen Anime used in graphic novels, computer games, and television cartoons.

Skim the Understanding Anime website to learn a little about this type of animation.

Let's explore a few cool techniques for using sounds in Flash. These were suggested by students in the Flash class:

Morphing. There are many ways to create an interesting visual morph. Try the following tutorials for help: Make a picture morph and Shape morphing. - D. Jackson & K. Pizarek, Spring 2006

Tweening. There are some great online resources for tweening: Echo Tweening. -

Animation Basics. It's fun to tween. SmartWebby has a good tutorial on animation. - K. Pizarek

Movie Clips. Once you've developed some animation, consider creating movie clips that can be reused within a project or incorporated into different projects. Go to Creating Movie Clips in Flash for ideas.

Random Elements. From snowflakes falling to rockets launching, there are many times when you want your animation to occur at random places. Go to Random Snowflakes for ideas. - M. Witt

Animation Needs. After examining the TeacherConnect! website, the figures at the bottom called out to me. They needed to dance. The question is how? Try onion skinning as a technique. I looked up some helpful resources on this including Web Developers Notes and Flash at About. Check out the new dancers!

Bouncing Balls. There are many resources to help people create bouncing balls including Macloo, OnePine (PDF)

Animating Puppets. For some fun, try animating puppets! Watch Flash CS4 Animating Puppets.

Return to the Top

   

Create an Animation Project

Now that you know the basics, it's time to create your own projects. Rather than starting with something complex, consider a simple project. Some ideas below will get you started.

balloons rising seesaw moving rafting plant growing sports stick people
car driving boat and waves jack o-lantern planets moving city growing
leaf falling pendulum swinging snowperson puzzle pieces moving volano erupting
coin flipping lights turning on/off snow skiing building blocks cells dividing
thermometer rising parachute from plane seasons changing fireworks sun rising
   

try itTry It!
After reading and completing Chapter 3: Animation (PDF document) from AIM your Flash Project. Create your own simple animation project.

Return to the Top

   

Learn More

If you'd like to learn more about creating basic Flash graphics and animations, explore some of the following off-site, online resources (remember some of these resources were designed for earlier versions of the software):

The following websites contain examples and animations you can incorporating into your project. Some are free and some are fee-based.

  • Freezer.com - a collection of editable vector artwork that can be placed in projects.

Return to the Top