New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Making an object move

From: Flash Professional CS5: Animation Projects

Video: Making an object move

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.

Making an object move

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.

Show transcript

This video is part of

Image for Flash Professional CS5: Animation Projects
Flash Professional CS5: Animation Projects

25 video lessons · 23413 viewers

Paul Trani
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.