Join Anastasia McCune for an in-depth discussion in this video Exploring cool tools for motion tweening, part of Flash Professional CS6 Essential Training.
Say hello to the monkey family. They are going to help demonstrate a number of ways you can monkey around with your motion tweens to make their effects more complex. You will notice that our frame rate is 24 frames per second and the movie is 48 frames long, so our movie is two seconds long. We have eight monkeys and the effect that each one is going to demonstrate is labeled above them. You will note that each monkey is on its own layer and the layers are named according to the effect that will be demonstrated. So here's the grow monkey and the alpha monkey and the easeIn monkey and the easeOut monkey, and so on.
Each monkey has already had a simple motion tween applied. When I scrub the playhead, you will see that all eight monkeys go from the top of the Stage to the bottom. So let's start with grow. I am going to turn the visibility of all the layers except the labels layer and the grow layer off, so we can see what we were doing. I will unlock the grow layer and now move the playhead to frame 48. I am going to select the monkey on frame 48 and press Q to bring up the transformation handles. I am going to scale the monkey up.
Now when I scrub the Timeline, you can see the monkey grow as he goes through his motion tween. So motion tweens allow you not only to move items on the Stage, you can also change their sizes they move. I am going to grab my Arrow tool and now lock and turn off the visibility of the grow monkey. I'll unlock and make visible the alpha monkey, the big boss. I will move my playhead to frame 48, select the monkey, and in the Property inspector, under Color Effect, choose Alpha.
Now I will move this slider down to 0 or you could just type in 0, so on frame 48 the monkey is totally faded out. I will scrub the Timeline to see the effect. You can see he fades out. And using this technique is very common for fading items in and out onstage. So that's it for alpha monkey. I am going to lock and hide him. Now I am going to unlock and turn on easeIn monkey. Easing affects how fast or slow an object is moving at the start and end of its motion.
To change the easing, I am going to click once on the monkey. And notice the little line on the Stage that indicates the path that he moves along. When I click on the path, the Property inspector changes to tell us information about the motion path itself. Under the Ease section, I'll click and drag on top of the 0 to the left to make the Ease -100. Or you could just type it in. I will hit Enter on my keyboard to see the effect. The monkey starts out slow and speeds up as he falls out of the tree. Ouch! Poor monkey! Gravity sucks.
So I will lock and hide the easeIn monkey and now turn on the easeOut monkey. You can guess what we are going to do here. I am going to click the monkey so that we can see the motion path and then click on the motion path itself. Now over in the Ease section in the Property inspector, I'll change the easing to 100, and I will hit Enter on my keyboard to preview the effect. The monkey starts off faster and slows down near the end of the motion tween, coming to a smooth stop. So that's it for this guy.
I am going to lock and hide him, and we will turn on the rotate monkey. So how is this monkey going to get down from the tree? Well, you don't get down from a tree; you get down from a goose. For this guy I'll click the monkey so we can see the motion path and then select the path with my arrow. In the Property inspector in the Rotate area, let's type in 2. Notice the Direction dropdown has defaulted to CW for clockwise. If you open it up, you will see that CCW for counter-clockwise is also a choice. I will stick with CW.
Now I will hit Enter on my keyboard to see the effect. Wow! That's pretty crazy. So that's enough for rotate monkey. I am going to lock and hide that layer and now unlock and turn on the path layer. For our next trick, I will click on the monkey, so we can see the motion path, and then I am going to approach it with the mouse. You will see a curved line appear next to the arrow when you get close to the path. Then I will click and drag it. You can see that you can actually curve the path. I'll hit Enter to see the effect.
It's kind of an unnatural movement for a monkey, but it's good to know that you can have something more complex than just a straight line for a motion tween path. If you click the path again, you can also move the entire path somewhere else on the Stage. I am just going to undo that change. So I am going to lock and hide path monkey and unlock and turn on the orient layer. I'll click the monkey so we can see the motion path and do a similar thing to what we just did. I will stretch this motion path kind of up and to the right.
So I will hit Enter so we can see the effect, and now I'll click on the motion path again. In the Property inspector, I am going to click this little checkbox that says Orient to path. Right away you can tell something has happened. I will hit Enter to see the effect, and we can see that the monkey's orientation now follows the motion path and he lands on his head. So the doctor says "No more monkeys jumping on the bed," but imagine if you had a rocket following a curved trajectory into space, or maybe a car driving up and down a hill. The motion is more realistic if the nose of the car points up and down the hill as it drives, and that's where Orient to path really comes in handy.
Also notice that the motion tween is now a succession of keyframes in the Timeline. Flash has added in a keyframe on each frame to account for the unique position and rotation of the monkey. I will imagine how much time that would take you to rotate the monkey frame by frame like that, by hand. So we will lock and hide this layer and unlock and turn on Swap. It will probably happen to you in your Flash career where you have got things all set up onstage, motion tweens in place, and you will find need to swap out some of your symbols onstage for something else. Maybe the design gets updated and you have to integrate new artwork, maybe you are just tired of monkeys and you're ready for something else, whatever.
It's happened to me many times where I have things all set up onstage, changes are needed, but I don't want to rebuild everything. Fortunately, it's easy to swap things out in Flash. I will click on the monkey to demonstrate. It doesn't matter which frame the playhead is on; Flash knows I'm talking about the monkey during the entire motion tween. You can see that the entire thing is selected in the Timeline. In the Property inspector, near the top, I am going to click the button that says Swap. Flash gives me a dialog box that essentially shows me what other items I have in my library.
I will select the elephant and click OK. Now I will hit Enter on the keyboard and you can see that we have an elephant in place of our monkey. Notice also that the elephant has been scaled down to match the size of the monkey that it replaced. To prove it, I am going to quickly make an extra layer and drag and drop an instance of the elephant from the library onto the Stage. You can see that it's much bigger, so Flash did that scaling down for us automatically. I am going to delete this new layer.
And now I will lock all the layers and turn the visibility of all of them on. So that's the end of our motion tweening tips and tricks, and I hope you will find them useful in your future animation projects. But of course, after all that, we can't end without testing the movie and seeing the full effect of all the monkeys and the parachuting elephant all at once, and you really do see here just how many options you have for motion tweening right within Flash.
- Choosing a document type
- Working with panels and workspaces
- Importing bitmap and vector graphics into a project
- Understanding the Timeline and frame rate
- Defining frames and keyframes
- Creating button, graphic, and movie clip symbols
- Nesting timelines
- Building shape tweens and motion tweens
- Defining inverse kinematic (IK) motion
- Applying filters, blend modes, and masks
- Integrating audio and video
- Using ActionScript code snippets
- Configuring SWF and HTML publish settings
- Publishing with AIR