Introduction: How to Use Motion Tweens in Flash CS5
Tween - (noun) - A word used to describe a person who is neither a young child nor an adolescent, one of an age in the range of 8 to 12 years old or a similar range (thank you Wikipedia).
Tween - (verb) - To generate intermediate frames in an animated sequence so as to give the appearance of smooth movement (also thank you Wikipedia)
So Sherlock, can you guess what kind of tween we're going to be talking about today? If yes, then congratulations, though I wouldn't get too excited, even my cat could figure that out. If no, then I have a query for you: How did you even boot up your computer?
Okay, okay, all mockery and abuse aside, I can admit that definition was a bit cryptic. what a motion tween, or inbetween is, are frames that are generated by moving, scaling, and rotating (or other, those are just the most common) a shape to create an animation. You know that frustrating feeling you have when all you want to do is animate a car driving by, but you have the draw is frame by frame, just to get the dang thing to slide from one place to another? That's what motion tweens are here to fix, just draw your thing, make it a shape, mess around with it, and you got yourself an animation, huzzah!
So I hope this Instructable serves you well in your journey to becoming an esteemed animator. Don't get frustrated and give up, if my words don't make sense to you, I won't go cry if you watch or read other tutorials (actually, do that, it can't hurt). But enough blah, blah, blah, ONWARD TO STEP ONE!!
Step 1: A New Beginning
Hello there! Not deterred by my abuse I see, well, you'll learn soon enough. But I digress, we're here to learn about inbetweens and Flash, no nonsense here!
So just to get going, go ahead and start up Flash and open a new ActionScript3.0 document. Once that's loaded, you'll have a nice blank white stage. If you need someone to go over basic tools and functions with you, you can find all that in one of my previous Instructables here. For now, I'll just go over some quick things. Depending on what you plan to make your animation for, you may want to change the proportions. I just left them standard, but as you'll see later, that left two large black spaces on either side of my video when I uploaded it to Youtube. If you want to make it look nice on Youtube or other video sharing sites like Vimeo, you may want to change your proportions to 1280x720, rather than the standard 550x400.
Also you have the option to change your stage colour. The stage is the background that you draw on top of when you animate. I plan to animate some clouds in the sky, so I'm changing mine to blue. To change the colour, just click on the box labeled Stage, it should be white by default.
Now you're ready to create your masterpiece, so let's move on to Step 2 !
Step 2: Create a Beautiful Shape
Just to show a simple motion tween, before we get too complicated, I've decided to animate clouds. But first I have to draw them. Since they will be blowing in the wind, I'm drawing a long series of clouds so as I don't run out of clouds as the animation progresses. Of course you will want to draw off of your stage if you're doing something like I am, there's no angry nun waiting to rap your knuckles with a ruler for colouring outside the lines (actually I encourage it, stick it to the Man, YEAH!).
Anyway, once you've drawn your shape and you're satisfied, make sure the entire layer it's on is selected, right click it, and then select Convert to Symbol. Give it a nice name and now you're ready to start the fun part!
Step 3: Using Motion Tweens
Alright, so you've got your shape named and ready to go. To make a motion tween, just right click your symbol, and choose Create Motion Tween. Now the length of your frame should increase. The next part is easy if you understand it, so I know you'll pick it up quickly.
Click the first frame in your tween. Place your shape where you want it to start, for example, if it's a car driving across the stage from right to left, place it on the right side of the stage. Now go to where you want your tween to end (how long it will be is determined by this obviously). Once you're where you want to end, click and drag your shape to where you want it to be at the end (for the car example, it would be the left side of the stage). A green line should appear between your starting point and ending point. If your shape is getting smaller or larger (if it's moving closer or farther away perhaps), then you can accommodate this by just selecting the last frame and transforming it as you normally would. The same goes for rotating. The change will be gradual over the course of the tween.
Hit enter to see if your tween has worked. If all's gone well, you should see your shape moving from the start to end point, and following everything you told it to do.
It makes much more sense to see it with your own eyes, so here's a link to a video showing my tween in action!
In the next Step, I will show you how to get a little more complicated, but don't get too worried, it's not science-y at all.
Step 4: Bending Paths and Using Properties
A straight path is fine, but it's not exactly dynamic is it? Lets see if we can spice it up a little, blow the socks off all those grannies!
To illustrate a curved path, I drew a new little shape, this time a leucistic axolotl (that's pronounced loo-sis-tic axe-o-lot-ul for those of you who are going to be bothered by that). I'm going to call him Wolfe for short, I think it's a cute name for him. So, I drew him a bit off the stage, and I've decided that he's going to fly in (did I mention he's a flying axolotl?) from the top right corner of the stage, and then take off like a graceful swan of the air. Now let's get started.
So, once you've made another shape that you're happy to goof around with, do the same you did with the last one, turn it into a symbol and then create a motion tween. You can decide the size and orientation of the first and last frames just like before. I've decided that he is small on the first frame, but very large on the last, because he is moving toward the foreground. Once I've dragged his to where I know I want him to end, and he's the right proportions, I'll just check to see it's worked, just like last time.
Did it work? Good, now the difference from last time, is that you'll be changing the path. If you scroll your mouse over the green path line, you'll see that a little U shaped icon appears beside your cursor. Use this to bend your line any way you'd like. This helps to make the animation look a little more realistic.
And while we're on the topic of reality, you might be wondering, "Well, how do I change the speed my shape travels at?" There are two ways to do this. The first way is to create multiple tweens to a keyframe (a keyframe is a frame that has the black dot on it, an it's fully of just plain frames). To do this, you put your shape where you want it to start, then you go to the place in the keyframe where you want your shape to start slowing down or speeding up (if it's later in the keyframe, it will be slow and then fast, an vice versa). Once you've selected it, move your shape there. Then you can go to the very end of the frame and add the next tween. This method is also used when you want a shape to travel in a zigzag pattern, or perhaps bounce like a ball. The SECOND way you can do it, is by using the Ease function in Properties. When you have the first frame of the keyframe with your tweens in it selected, you will see the Properties window in the far right of your screen. This has options like Ease, Rotation and Path. Ease can be very useful, the higher the number, the more it will slow down toward the end of its course. I find that it's never really enough to make a huge impact though, but it's a nice sentiment all the same. The Rotation option is something you can use if you want your shape to spin. This may be good for titles or things like that, but remember that it's much more violent looking than just rotating your shape by hand. Path is just the math for your path, it's all crazy parabola stuff. This is useful if you want to transform your whole path at once. Play around with some of the functions to see what you like.
(By the way, please kindly ignore the comment on the third picture that says "used onion skin". I have a drunk evil twin who likes to write things on my work, but then she realizes that she made a mistake, SO SHE'S SORRY, OKAY, JUST LEAVE IT ALONE! thanks)
Step 5: Make It Awesome
And that's all there really is to it. NOW GO FORTH AND MAKE BEAUTIFUL TWEEN ANIMATION! Just kidding (not really), but do use this information to your advantage. You'd be amazed what kind a artistic genius you can achieve with just some simple tweens. Make things your own, play around with the program, THE WORLD IS YOUR OYSTER! Unless you're allergic to shellfish, and then I'm sure we can find a substitute of...pastrami or something (but I'm sure no one would want to sniff you after living in a world made of pastrami--BUT I'M RAMBLING) ...The point is you're really great, and I know we don't know each other, but if we did, I'd probably like you (unless you smell like pastrami). So make something that, theoretically, if we were friends, would make me proud of you.
You can see the finished product of this Instructable here.
We have a be nice policy.
Please be positive and constructive.