-----------

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 itView it!
Take a look at a clever Flash animation by Alan Becker: Animator Vs. Animation (2006).

try itTry It!
Read How Web Animation Works at How Stuff Works online.

Also explore a few sample Flash animation products:
How Cells Divide from 18 Ways to Make a Baby at PBS NOVA
Moving Targets, Olympics
from Runaway Universe at PBS NOVA
Growth of a Nation
at Animated Atlas

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

Armature Tweens (aka bone tweens). Inverse kinematics (IK) is a way of animating an object or set of objects in relation to each other. This is done using an articulated structures of 'bones' within the object(s). Use of the bone tool allows lets you add an articulated structure within the visual object and then connect naturalistic movements to those bones. When one bone is moved, the other connected bones move in relation to that initiated movement. When animating using inverse kinematics, you specify the start and end positions of objects and the software creates natural movements.

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.

eyeFor those who gain ideas and skills best by reading, begin with Animation Learning Guide for Flash from Adobe. This section has lots of examples and ideas for creating Flash animation.

Next explore the tutorial information within Timelines and Animation for Flash CS5 from Adobe.

It's sometimes easier to learn about animation by watching videos. There are many available online but the best starting place for visual learning is the lynda.com tutorials. More about that immediately below.

eyeWatch It!
If video tutorials are a preferred way of learning how to create animations with Adobe Flash CS5, go first to IT Training's Lynda page. Proceed to the lynda.com tutorials (link near top of entry page; redirect to login page). Look within Flash Professional CS5 Essential Training with Todd Perkins (Listed / linked on 2nd page of the index - within the Adobe CS5 section). There is a section devoted entirely to animation; that may be all you need. Specifically look for:

Flash Professional CS5: Animation Projects (Sept 2010) by Paul Trani - entire online course devoted to animation

You also may want to return to Flash Professional CS5 Essential Training (Apr 2010) by Todd Perkins
Section 8 - Creating Frame-by-Frame Animations
Section 9 - Creating Shape Tweens
Section 10 - Working with Motion Tweens and the Motion Editor
Section 11 - Fine Tuning Motion Tweens
Section 12 - Adding Inverse Kinematics with the Bone Tool
Section 13 - Creating Classic Tweens - includes easing

Also available at AdobeTV:
Altering the Curve of a Motion (3:33 min)
Animating a Still Part 1
with Dennis Radeke (11:30 min)
Animation Basics in Adobe Flash CS5 (9:53)
GS-09 Creating a Motion Tween (2:31 min)
Using Spring Properties with IK Bones (7:50 min)

If more information, ideas, or review of techniques is needed; explore some of these video tutorials at YouTube for Adobe Flash CS5 by Lil Red Head Studio:
3D Rotation / Translation Tool (6:12 min) - dynamic 3D effects in Flash.
Applying Bones to Images and Photoshop Files (3:35 min)
New Bone Tool, The (length 5:22 min)
How to Create a Scrolling Background (11:34 min)
How to Do a Walking Animation (17:02 min) - do looping walking animation using the bone tool and symbols
Introduction to Video Game Sprites (4:50 min)
Making a Character Blink (8:57 min)
Putting a Symbol into Another Symbol (3:07 min)
Syncing Animated Mouths to Voices (10:12 min)

Find several longer length video tutorials about animation techniques listed at the bottom of this webpage within the Learn More section.


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 Animation Concepts (adapted from Tony White's The Animator's Handbook) and The Twelve Principles of Animation at Wikipedia.

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 Anime website at Wikipedia to learn a little about this type of animation.

Let's explore a few cool techniques for using animation in Flash. These online tutorials were found and suggested by former students in this Flash class:

Morphing. There are many ways to create an interesting visual morph. Try the following tutorials for help: Morphing Effect in Flash (Shape Tween) at Republic of Code and Shape Morphing by Eddie Carroll at Flash Kit.

Tweening. There are good online resources for tweening: Motion Guide Tween at Echo Echo and Flash Tweening at W3Schools.

Animation Basics. It's fun to tween. Flash Animation Basics at SmartWebby is a good tutorial on animation.

Movie Clips. Once you've developed some animation, consider creating movie clips that can be reused within a project or incorporated into different projects. For ideas about developing movie clips, go to Flash Movieclip Symbols from SmartWebby and Creating Movie Clips at Flashexplained.

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 Animation at ToxicLAB.

Animation Needs. Looking to make figures dance? Visit Flash Tutorial Beginner - Onion Skinning at Web Developers Notes and Flash Tip: Onion-Skinning Animation at About.com. Check out the dancers!

Bouncing Balls. There are resources to help people create bouncing balls including Bouncing Fall at Macloo, How to Create a Bouncing Ball Animation in Flash at WonderHowTo and Creating a Bouncing Ball with Shape Tweening by Katherine Ulrich at PeachPit Press.

Animating Puppets. For some fun, try animating puppets! Watch Flash CS4 Animating Puppets (Uses IK tools) at Adobe Layers Magazine.

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 ( Note: A few of the resources were designed for earlier versions of the software, but techniques still apply to the current Flash software):

Longer-length Video Tutorials
You can decide if you need to view these more in-depth tutorial presentations.

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

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

Return to the Top