MOTION TWEENING

 

Remember that master animators only draw the first and last frame of an animation sequence. A little lackey animator fills in all the frames in-between. The act of filling in all the frames in-between is called "tweening".

Flash tweens with a process called Motion Tweening. Basically, youll have two keyframes with the same symbol on each. If theres any difference between the two symbols, Flash will fill in the needed animated steps to move the symbol from the start keyframe to the end keyframe. Flash can change the symbols position, size, color, or opacity. The animation will appear smooth.

 

Before you Start

It can be easy to make a mistake when animating in Flash. If you leave out one step, your animation will not wirk. Be careful when building your first couple of animations. If you mess up, its usually easier undo (ctrl/cmd + Z) than to try to fix your mistake. Back up until youre back where you started, and try again. Later when you become more comfortable with Flash youll know where you went wrong and youll be able to fix your mistakes.

 

Two Big Motion Tween Animation Rules

There are two big motion tweening rules that you must abide by at all times. Theyre important.

1. To animate an object, it must be a symbol.
   If its not a symbol, it wont work.
2. You can only animate one object on a layer at the same time.
   Its very important to select the correct frame on the correct layer when working with Flash.
   If you want two objects to move around at the same time, theyll have to be on separate layers.
   After one animation on a layer finishes its okay to start another animation on the same layer

 

Two More Big Motion Tween Animation Rules

Okay, theyre the same rules. But read them again. Theyre that important.

1. To animate an object, it must be a symbol.
   If its not a symbol, it wont work.
2. You can only animate one object on a layer at the same time.
   Its very important to select the correct frame on the correct layer when working with Flash.
   If you want two objects to move around at the same time, theyll have to be on separate layers.
   After one animation on a layer finishes its okay to start another animation on the same layer.

 

To Animate with Motion Tweening

1. Click the frame you want the animation to start on.
2. Insert a keyframe (F6 or INSERT-> KEYFRAME)
   If there isnt a symbol in the layer you are working with, your keyframe will be blank.
   Youll need to create a symbol (draw a shape-> select it-> F8), or drag one from the library

3. Click the frame you want the animation to end on.
4. Add a keyframe.
   The screen will look exactly the same. You havent changed anything yet, so the new keyframe has the same properties as the old one.
5. Move or modify the object
   You can change its shape, size, or location.

 

6. Click the first keyframe in your new animation sequence.
   Youll set the tweening on the first keyframe of the pair.
   If you later add more keyframes to the layer, your second keyframe will become the first keyframe of another sequence pair.
   
   
7. Open the Frames Panel
   (WINDOW-> PANELS-> FRAMES)

8. Select Motion Tweening

 

Thats it! An arrow with a light blue colored background should now connect your keyframes.

 

Play your animation!

The first couple of times you tween, youll want to follow these steps exactly. Remember to make sure your object is a symbol!

 

Tweening Options

When you set a tween, you can set an object to rotate, or to ease in or out of an animation.

Easing

Easing controls the speed of the motion tween. If an object is set to ease in, the animation will go slower at first. If an object eases out of an animation, it will slow down at the end of the sequence. Easing is useful to allow a symbol to "softly park" itself or to approximate gravity effects.

 

Rotate

You can rotate an object but be careful. If you rotate it too fast, most smaller processors wont be able to handle the animation. The whole Flash movie will appear choppy and slow.

 

Fading In or Out

Nobody likes things that just BAM! jump right out at them. We like things to arrive in a more natural way. You can quickly fade an object in to create a pleasing entrance. You can also fade an object out upon exit. Fading is a very useful tool that Flash designers make use of quite often.

 

You can fade an object in two different ways. You can change it to match the background color, or you can actually make it see-through. It is much easier on a users processor if you fade to the background color, but sometimes an image will be positioned over a pattern or another object and will need to fade to transparency. Check out web design course and watch how the whole interface fades in after the intro...

 

To Fade An Object Out

Tween as described above, when it comes time to move or modify the symbol (STEP 5, ABOVE):

1. Open the Effect Panel (WINDOW-> PANELS-> EFFECT),
2. To Fade to Transparent
   Choose alpha and set desired transparency percentage

or

To Fade to The Background Color
Choose Tint and select the desired color from the color window.

 

 

Then proceed to step 6 in the above tweening steps.

 

To Fade an Object In

Fading in just means that the object is invisible on the first frame of the sequence instead of the second.

1. Click the First frame in your tween.
2. Click the symbol on the screen
3. Change its alpha or tint

 

Tips for Processor Friendly Animations

A computer is not a TV. A television automatically changes color on the screen according to electrical flow generated by an amplified signal from the broadcaster. Its a machine built to do one thing, show you pictures and sound. A signal comes in and hits mechanical parts specifically built to handle it.

A computer is a wonderful tool because it has no set purpose. A computer can do anything its programmed to do. The possibilities are endless. Because a computer is left open-ended, programmers must figure out how to make it function like a number of different devices using mathematical algorithms. When displaying a Flash movie, your computer must accept downloaded data and use the processor to interpret it and make something happen. When your computer processes and runs a Flash Movie, it must keep track of each individual symbol, button, and element. It must also correctly display each element on the screen. If there is a lot of fast or complicated motion, smaller processors cant handle it, and things slow down. Animations often download very quickly but then get bogged down in the users computer.

�.       Try not to animate too many things at the same time.

�.       Very quick animations are hard for a processor to handle.

�.       Symbols moving across a background color are easier for a processor than symbols moving across objects. Text moving across a bitmap is the hardest.

�.       Use tint fades over alpha fades whenever possible.