Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more 3D + Animation and personalized recommendations.Start Your Free Trial Now
- View Offline
- Creating graphics and reusable assets
- Importing graphics
- Making an object move
- Animating a mask
- Using and customizing motion presets
- Morphing shapes
- Animating in 3D
- Adding bones to a character
- Controlling the Timeline with ActionScript
- Randomizing content
Skill Level Intermediate
Most of these graphics are now set up and ready to be animated. Let's take, for instance, this background. Well, I want to animate in this background using a certain type of tween, and then I'm also going to animate in this foreground as well, including some other graphics using a different type of tween. And you are probably wondering, what is a tween? Well, it's moving an object between one point and another. What you need to do, if you want to create a tween, is you need to define those two points.
So currently I have this first keyframe right here, which defines the position, location, and various other properties for this background. So my next step is to insert another keyframe that defines this object at a different place. But before I even do that, I need to just make sure this is the only graphic on this layer. So again, the goal is to always have each graphic on its own layer, if you're going to animate it.
That's rule number one. Rule number two is to make sure that it is an instance of a symbol. So, if I select this graphic, I can look in my Properties panel, and it says it's an instance of the background. So again, it's the only thing on the layer, and it is an instance of a movie clip in this case. So now I can go ahead and define the second keyframe. So what I am going to do is I'm going to select, say, about frame 24, and I'm going to insert a keyframe.
It adds that keyframe right there. And what this keyframe does is it stores information and various properties for this object at that point in time. So what I can do is I can just go ahead and move this background, move it over kind of like that. Okay, so that's what's stored in this keyframe now. So the first keyframe, it's right here; the second keyframe, it's at this location. Now all I need to do is create a tween in between those two keyframes.
So you can do a Ctrl+click on the Mac or right-click, and I can select Create Classic Tween. So this is what I'm going to create initially. It's just a classic tween. And what happens is Flash adds this tween in - it's actually this arrow - that basically says it's moving from point A to point B. So if I hit the Enter key, I can see it slide across the stage. That's exactly what I want, and it looks great. I can go down to the second keyframe and maybe move this background a little less, so it's not as drastic of a move. And I can go ahead and click on Frame 1 and hit Enter, and it moves slower.
Okay, so it doesn't move as far. Another thing I can do is I can even select this keyframe and move it clear down here to the end. Okay, now it will constantly move, even as these other graphics appear as well. So you can manipulate where the keyframe is, as well as what is on this keyframe, such as the position. Pretty much anything in the Properties panel can be animated. In this case, all I am animating is the position.
All right, but again, that enables me to animate the background. I can see that background get moving. And what I want to do next is I want to animate this foreground. So I'm going to go ahead and unlock the foreground, and I'll lock the background. In fact, I'll just take this first keyframe and drag it down here to the very first frame. And want I'm going to do is I'm going to use the new motion tween available in Flash CS4 and CS5. All I'm going to do is, again, remember, that that I do have this graphic on its own layer, and it is an instance of a movie clip, so those are my two rules I need to keep in mind, and then all I need to do is do a right-click.
I'm going to select Create Motion Tween. It turns this layer blue, and it's basically saying, hey you know what? I'm now ready to be animated. So that's all I have to do is I just have to turn it on. I can go down, maybe scrub down to the end of this timeline here, and then all I need to do is move the graphic. I am going to go ahead and turn off these other layers because it's kind of hard to see what I'm animating. But I moved this graphic, and look what it does is it gives me this motion line.
This is actually a motion path. But you can see how I can adjust the distance that it animates. It gives me this motion path, a nice visual showing me where it's moving. And not only that, it's editable as well. What I can do is I can actually grab that end motion and move that on down. Say, for instance, for the start position, I can grab that end of the motion path and stretch that out. So now it starts at a different location, actually further to the right.
I don't have to keep bouncing between keyframes in order to manipulate the motion, because again, I have this nice motion path. So I'm going to go ahead and hit enter, and you can see that sort of slowly move across the screen. Let me just kind of move this over to the right a little bit more, and now it's going to move at a different rate than the background. But I'm going to go ahead and add a couple more tweens in here. Again, I'll use the motion tween because, let's face it, it is easier. And what I can do is I can maybe move this blank keyframe down to about frame 60.
For this logo, it's the same process. I want to make sure it's a movie clip in this case, or at least an instance of a symbol, and it's on its own layer, and then I can just right-click and Create Motion Tween. From there, what I can do is determine where I want this logo to move. So I can just click and drag it over, just like that. Point A, point B, and then it disappears. So I might even want to push this clear off of the stage, and I'll just use my arrow keys to finish this out.
I'll hold down the Shift key move to move it in increments of 10, but now I have that sort of sliding out. Now this is really starting to come together. That's just a quick example of how to create two different tweens: the Classic tween and the Motion tween, but really my next step is to start to fine-tune this animation.