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 · 23496 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
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Flash Professional CS5: Animation Projects.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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.