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

Fine-tuning animation for depth

From: Flash Professional CS5: Animation Projects

Video: Fine-tuning animation for depth

Once you have some basic animation in place, probably what you are going to want to do is refine that animation to potentially even simulate a real-world experience. In this particular case, if I just turn off some of the layers and just show the foreground and the background, if I hit Enter, you can see the background moves faster than the foreground, and in a real-world scenario, this wouldn't happen. I need the foreground to move faster. I am also going to add some additional depth.

Fine-tuning animation for depth

Once you have some basic animation in place, probably what you are going to want to do is refine that animation to potentially even simulate a real-world experience. In this particular case, if I just turn off some of the layers and just show the foreground and the background, if I hit Enter, you can see the background moves faster than the foreground, and in a real-world scenario, this wouldn't happen. I need the foreground to move faster. I am also going to add some additional depth.

So the first thing I am going to do is lock down that foreground and for that background, it, again, moves awfully fast, so I want to come down here to this last frame, this keyframe right here, and since this is a classic tween, I need to actually navigate down to that keyframe, and then I am just going to go ahead and move this image back to the right so it doesn't move as much. It's just going to be the fine art of moving that image and then scrubbing the Timeline.

So all I am doing is clicking up here where these numbers are, and I am really able to determine how much this moves. So I can either modify the first frame or the last frame, but now I am actually getting more of that depth. And that's looking pretty good, but there is more I can do as well. With any object, if it is in the Properties panel, then it can be animated. So what I want to do is I am going to add a blur to the background, because I want it to start out pretty sharp and then blur, and that's going to actually create some nice depth.

For the second keyframe, I am going to go ahead and select that background instance. And under Filters, I am going to add a new filter, and this is going to be Blur. I am going to change the Quality from Low to Medium, and I am just going to click and drag to the right to increase the blur of that background. That looks pretty good. In fact, let's type in about 15 pixels. All right, and if I scrub back, notice how again it's clear. And if I hit Enter, since I have added that nice filter, the background blurs out.

Since I am creating this depth, and I am playing with the focus of your eyes, this foreground image actually needs to be blurred out, since you are focusing on the background. So I am going to select that graphic, and it's going to be the same process of adding a blur. Let's make the Quality Medium, and let's make the blur about 15 pixels. Now you get that nice depth, focusing on the background, and I'll hit the Enter key, and now you can see the background blur out, and then the foreground should sharpen.

I do need to actually select the second keyframe here, and there we go. Let's bring that into focus. There we are. So let's try this one more time. Hit Enter. Background blurs out, and then you can see that image get a lot sharper. All right, so that's looking pretty good, but my next step is to really have this slow down and rest into place, because right now it just all of a sudden stops, and I want to control the easing, as it's known. So I want it to ease out, or slow down slowly as it reaches this second keyframe here.

I am going to select this tween, and if I look at the Properties panel, I can actually control the tween right in here. So I want to change the Ease to Ease Out, so that means clicking and dragging to the right. So ease out 100. Now it will really slow down into place. I am going to do the same thing for this classic tween because you can do with classic or a motion tween. Going to the Tweening properties and clicking and dragging and adjusting that ease, so now it eases out as well.

All right, so I'd say that's looking pretty darn good, and the last thing I am going to animate is this logo, because again, if it's in the Properties panel, it can be animated. With that layer selected, I am going to hold down the Shift key and press the arrow to the right, to kind of bring that into place like that. There it is. I want this logo to fade out, so it's going to start out, just as you see here, and then it's going to fade out, and it should be totally gone by the time it reaches this second keyframe.

If it's in the Properties panel, you can animate it, so I am going to select that graphic. I am going to go to Color Effect, and I am going to change the Color Effect to Alpha. And from there, I can adjust the alpha of this graphic, which is the transparency. I can take that down, and you can watch it disappear. Again, it's 100% right there, and now we can see it fade out. You get the focus on the two people, and the next step is to focus on the message as well.

So I am going to go ahead and do some cleanup to these two layers, because all that happens here is this text just pops in and so does the rectangle. So I will just click and drag this keyframe over, and I am going to make sure this is in the right position, because I am not only going to shrink up using my Free Transform tool, I am going to decrease the height of this bar right here to kind of fit that text just like that, and let's turn on that.

So that's looking a lot better. My graphics are in place, and I will create a motion tween. So it's going to start, potentially. I will just click and drag it so it will off the stage to the right, and in order to see the right side, what I can do is I can change the view to Fit in Window, and now I can sort of drag it off right-hand side like that. And then I can scrub in to about frame 80, then I can position this into place.

Now remember, I don't have to add a keyframe. Flash does that for me automatically. It adds that keyframe right there, and now I can see that that slides into place just like that. I am going to do roughly the same thing for the text. I am going to create a motion tween, and it's going to be positioned to the left and about at frame 80. I want it to slide in, so really, it's just a matter of selecting it and sliding it in, kind of like that. All right, so that slides in just like that, and then my other graphics appear, and let's just make sure the trees will also appear as well as that Replay button.

So I'd say everything looks good. The last edit I am going to do is just to make this text pop off a little more. I can add a drop shadow and again, I am just going to use Filters. Add a drop shadow, and now I can see that text better. In fact, let's blur it out a little more to kind of set it off some more. That's much better. Change the Quality to Medium. Those are the refinements I want to do this simple animation of graphics moving across the screen, but now we have created a lot more depth. In fact, if I do a test movie, you will see that depth that we have created and then that smooth motion as well.

Show transcript

This video is part of

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

25 video lessons · 23477 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.