The Complete Tweening Tutorial

by Masquatto

A tween is a computer-generated transition between two keyframes. In simpler words, it’s Flash moving an object from point A to point B in a given set of frames, as opposed to you moving the object every frame manually.

It really all depends on your style. However, each technique has its pro’s and con’s. Tweening is simple, quick and usually smooth without much trouble, but it has less control and is often less realistic looking than fbf. Fbf movies tend to have bigger file sizes, but are less laggy in most instances. Also, having a tablet usually helps a bucket load if you’re gonna go with fbf. A tablet is basically an actual drawing pad that transfers strokes into mouse movements on your compy, so what you draw on the tablet is drawn on the screen. This helps fbf a lot, for obvious reasons. The fact that I don’t have one of these is a major factor in my decision to not use fbf often.

In the end, whichever technique you go with should include a little of the other technique. On complex movements, you’re gonna want to throw some fbf into your tweened movies, and in fbf movies, you’re going to want to tween where you just want a simple, straight, clean movement.

Before I go into that, you need to know a few rules when it comes to tweens.
- Everything motion tweened needs to be in a symbol. (shape tweening is different, we’ll get into that later)
- A motion tween should only be moving one symbol at a time on any specific layer.
- Both ends (start and finish keyframes) of the motion tween must have the same Instance of the same symbol.

Okay, with that out of the way, let’s move on to actual tweening.
Open Flash and make a shape (anything – circle, square, star, whatever). Now select it with the black arrow tool and press F8. This is the hotkey for “Convert to Symbol…” which turns whatever you’ve got selected into one symbol (a symbol is an object saved to the Flash movie’s library so that it can be used repetitively without file size stacking up too much). You will be prompted with a window that asked what you want the symbol to be named, and what its behavior will be (behavior mastering is for a different tutorial). Leave it with “Symbol 1” as a Movie Clip.
Okay, now make sure your symbol is the only thing in the frame. You can do this by hitting Ctrl+A, then Shift+[Left-click on symbol], and then DELETE. You’ve just selected everything with Ctrl+A, deselected the symbol, and deleted whatever was left in your selection.
Once the frame is all cleared up, I want you to right-click on frame 10 in the timeline and click on “Insert Keyframe.” This creates a keyframe on frame 10, and fills all empty frames since the last keyframe with regular frames. The untweened, regular frames are time fillers – they are the same as the most recent keyframe in the layer – and keyframes are where a change can take place. So now, you’ve got something like this:
[●____][●] {p3.1}
Now I want you to right-click the first keyframe block and click on “Create Motion Tween.” Now you’ve got this:
[●------→][●] {p3.2}
Left-click on frame 10 and left-click on the symbol. Move it a little in any direction you want. Now press Enter to play your movie in the Flash editor window. Your symbol should move from its point on frame 1 to its point on frame 10 in a little under a second.
That’s it – that’s how you make a tween. You give it a point A on one frame and a point B on another and tell it to connect them. Of course, there are more advanced techniques, but the main concept’s done with.

In addition to position, motion tweens can change instance properties (tint, transparency, etc.), scaling, skewing, rotating, and filters (in Flash 8). You can alter these properties with the Transform tool and the Properties panel (well, those are for Flash MX and above – Flash 5 and below use Right-Click>Transform>Scale (or rotate or whatever) for transforming and the Instance panel for the properties changing).
{p3.1} - http://img238.imageshack.us/img238/9357/tutorialpic11tg.gif
{p3.2} - http://img238.imageshack.us/img238/7981/tutorialpic28ze.gif

Shape tweens are a little weird, to be frank. They can act abnormally for no reason, and they have to be used very precisely for good results. Basically, a shape tween is a motion tween that deals with raw fills and lines – it tweens things that aren’t symbols, and the starting and ending shapes can be different, because it generates a transition between them based on edge similarities and bends. In complex objects, they usually screw up and look ugly. However, if you’re doing something like animating a blob, or possibly a mask (see Advanced Techniques), you’re going to be shape tweening (your shapes are simple, and their actual form will be changing a lot, so it’s usually good to use shape tweens there when you can).

Shape tweens are made the same way as motion tweens, but they don’t have any of motion tweening’s rules (however, your starting and ending objects should be very similar if you want it to look any good). They do no animate symbols, and there can be any number of bodies of fill or lines, technically.

There’re three main ones: guides, masks, and easing. Guides and masks are technically universal layer properties, but they go hand-in-hand with tweening.

A guide involves at least two layers. One layer is the path, and the rest are the layers that follow the path. [If you’re good with logic and observing, the uploaded source file (.fla) below should be enough to give you the gist of everything.] The top guide layer should consist of an un-intersected line formation (can by multiple lines attached to one another). The layers underneath the guide layer that are affected by it will follow the line formation if their start and end positions lie on points on the guide (affected layers are tabbed). For example, if your guide layer was an “S” shape, and you made a ball in the layer affected by it and made the ball start on the top of the S and tween to the bottom, it would follow the S-shape when moving. A bit funky, you might want to experiment with it a bit.
Guides work best when the symbol’s focus point is on the line at both the start and end of the tween. The focus point is that little circle on the symbol you see when you select it. You can move the focus point when you’ve got a symbol selected with the transform tool.
NOTE: Be sure “Snap to Objects” is activated (it’s the magnet button in the lower part of the tools window; in Flash 5 and below, you’ve gotta have the black arrow tool on for the magnet icon to show up for some reason). That way you’re sure that the object is directly placed on the line from its focus point.
I’ve uploaded a source file with a guide in it. You can find it here (works for Flash 5 and above):
freewebs.com/masquattodatabase3/guide_example.fla

Masking really isn’t too bad. It’s applied to layer like a guide – the top Mask layer affects all layers designated below it. The mask’s effect, however, is totally different.
Masking makes it so that all layers affected are only visible in areas where the masking layer has objects. So if I made a big background in the bottom layer, and the mask was just a circle in the middle, all of the background would be totally transparent except for the little middle circle area.
NOTE: If your masking layer is a blank frame, its effects will be ignored during that time period, and the underlying layers will be fully visible. Masks often use shape tweens, because it allows you to actually change the curved boundaries of the mask with a tween. However, masks can use motion tweens, and symbols (well, the first frame of the symbol in the case of a movie clip) in the mask layer will have the same effect as fill. Here’s an example source file:
freewebs.com/masquattodatabase3/mask_example.fla

Easing is the easiest of the three to utilize, but it takes some practice to master. Easing lets you choose the speed at which your object is changing during a tween. Normally, you choose between –100 and +100 (you can change it in the Properties panel or the Frame panel {p5.1}). –100 makes your tween start pretty much still, and then accelerate. +100 starts your tween off quickly and slows it down to a stop. In many instances, one will make a normal tween, then put a keyframe in the middle to divide it up into two tweens, and apply –100 to the first one and +100 to the second {p5.2}. This allows for one solid movement that eases its way into starting and stopping. I use easing in almost every tween I use, and pretty much any tween-based animator should too.
In Flash 8, there’s much more control over the easing. You can actually open up a graph (hit the Edit button next to the easing adjuster) and customize your tweens’ speed variations to your liking. In many instances, I still use the –100/+100 combo anyways – I’m not used to the whole graph editor yet.

If you want an example of all these techniques being used, you should see my clock day movie. It utilizes pretty much everything said in here (for guide and mask, look at clear up close and watch her tears). You can find it here:
http://www.newgrounds.com/portal/view/259462
{p5.1} - http://img25.imageshack.us/img25/456/tutorialpic31qv.gif
{p5.2} - http://img25.imageshack.us/img25/9271/tutorialpic49hu.gif

Yeah, there’re a few things to keep in mind:
- Use easing. Just do it.
- Work in a solid frame rate – preferably 30, or at least above 20.
- Remember that movements often have a bit of a charge up at the start and a bit of recoil at the end. If you’re going to do a big movement, make the object go back a tad first, then make him overshoot slightly, then move to where he should’ve ended.
- When you do the “double 100-easing trick”, it’s good to blur the middle keyframe, so it looks more realistic.
- Don’t be afraid to use many layers, but don’t go overboard. If you try to conserve space too much, your movie might end up being a bit plain and restrictive when it comes to animating, but too many layers can lead to being unorganized and unproductive.
- Avoid going too crazy with tweening large objects. It tends to lag up Flashplayer.