whazzat said 6 years ago 9/28/2005 3:27:48 PM EDT

Hello and welcome to the wonderful world of tweens!!!! Today's lesson: Motion Guides and how they make life so much easier when you're trying to animate stuff.

You probably already know about the two different kinds of tweens. There are shape tweens, which make transitions between one shape and another and generally end up looking incredibly crappy 98% of the time unless you're going for a very specific effect. That's so NOT what I'm writing about!

I'm writing about MOTION tweens!

Motion tweens can be your best friend when you're animating in Flash. But if you're not familiar with motion guides then you're probably working 10 times harder than you need to. So let's take a look at Motion Tweens and Motion Guides.

whazzat said 6 years ago 9/28/2005 3:27:48 PM EDT

First of all, when you're doing motion tweens, and pretty much whenever you're working with animation in flash, you have to observe a general habit and rule. Symbols are your best friends, too. Just about everything you make as you're animating in flash should be a Symbol. There are about a dozen reasons for this, but in the case of motion tweens it's for the sake of file size and communicating with Flash better. So now let's take a look at an example. . .

whazzat said 6 years ago 9/28/2005 3:27:48 PM EDT



Ok. I've got a gear shape on my main stage, and I've already turned it into a symbol. I want to make it move from the left side of the stage to the right side. Perfect opportunity for a TWEEN, wouldnt you say? Of course you would.



So at this point I extend the number of frames from 1 to 24 in the Timeline and create a keyframe at the end of it, then place my gear on the other side of the stage.

whazzat said 6 years ago 9/28/2005 3:27:48 PM EDT



Hooray! It's tweening! Wow, that's great! But the thrill wears off fast when you realize just how boring it is. I wish there was an easy way to make my gear look like it was ROLLING across the stage instead of just sliding like that. Oh yeah! There is!


You can highlight any frame of the tween in the timeline and go to what you'll soon discover is your favorite panel, the PROPERTIES PANEL.


Oooo look at all the goodies! You can adjust the tween type, whether or not the transition remains to scale, the "Ease" of the tween (this changes the speed of the tween from beginning to end, say for example you want the gear to start out moving slowly across the stage and pick up speed faster as it reaches its destination, you would choose "Ease In." Experiment with this, it's fun) and the Rotation of the object that's being tweened.

whazzat said 6 years ago 9/28/2005 3:27:48 PM EDT

I want my gear to roll 5 times Clockwise. So I set the tabs and settings thusly and BING...

I have a gear that rolls instead of slides!

That's pretty neat. . . for about a second. I'm sick of straight lines. I'd like my gear to look like it's being pushed into the distance along an arc. How can I do this without setting a million motion tweens or going frame-by-frame?

whazzat said 6 years ago 9/28/2005 3:27:48 PM EDT

Here's where Flash really makes things easy. I'm going to remove the tween I just made and my keyframe on frame 24 that I had for the previous example, but leave the frames. So now I have 24 untweened frames with only the first frame as a keyframe.

To create a motion guide for an object:

  • Highlight the layer on which the object rests.
  • Right-click the layer and select "Add Motion Guide."
  • A new layer appears directly above your object layer!

This layer is specifically for creating a motion guide for the layer below it. It defaults with the same number of frames as its counterpart and the frames are blank. Now to make a guide. I said I wanted the gear to move back along an arc path. So, I'll make a simple arc using the line tool.

Even though you can see the guides in the flash interface and on the stage, they will be invisible in the flash movie.

Guides are best used with lines and not shapes, but it's possible to use just about any drawing tool as a guide. Your object will just stick to the edge of a shape, but will follow a line in a more definite way. Use the line tool, the Bezier Line tool, the pencil tool, or even the outline from the cirle or square tool will work. Experiment and check it out!

whazzat said 6 years ago 9/28/2005 3:27:48 PM EDT

I have my arc guide now, and I have my symbol. Am I ready to tween? Yes! But there's one more thing to explain: SNAPPING. You'll find snapping at times to be a big inconvenience when you don't want it to run, and at times, like now, it'll be very helpful. When snapping is enabled for objects and guides, as you move an object it will naturally gravitate toward the guide in question. Experiment with the settings from the View->Snapping submenu to get a feel for what each snapping setting will do. At this point I have snapping enabled for Snap Align, Guides, and Objects.


whazzat said 6 years ago 9/28/2005 3:27:48 PM EDT

As I move my gear toward the motion guide, I can see how the REGISTRATION POINT is drawn to the guide. That's the SNAPPING factor. Remember that.

Ok, now I add a new keyframe in my object layer in the last frame of the timeline. I grab my gear (by the REGISTRATION POINT) and bring it to the other end of the motion guide.


By making sure it snaps to the end, I can be pretty sure the path is going to conform to the shape of the arc in my guide layer.


I wanted it to look like it was falling back, though, so I can scale the height and width of the gear to make it smaller.

whazzat said 6 years ago 9/28/2005 3:27:48 PM EDT

And here's the result:

Cool, right? It gets cooler. Highlight any frame in the motion tween and then open the Properties Panel again. Now we can do all that neat stuff I wrote about up top to achieve different effects. First I went to the final keyframe again and flattened my gear's height scale.

Then, by using these settings:

It now has a cool spinning/flipping effect:

whazzat said 6 years ago 9/28/2005 3:27:48 PM EDT

And by going to that final keyframe again, clicking on my gear and the opening the properties panel, I can change the color, opacity and brightness settings of the gear so it changes in transition during the tween.

Like this:

These are the basics of Motion Tweens and Motion Guides. It might seem like a lot to take in but once you get a handle on these fundamentals there's a whole lot of things you can do and it only gets more and more fun.

Keep flashing, stay cool, and enjoy!

whazzat

This tutorial is locked for new comments.