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

Adding preset animation

From: Creating a First Web Site with Flash Professional CS5

Video: Adding preset animation

Flash makes it easy to add animation to any project and that's what I want to do with each section here. I want to actually animate in the background in a cool way and I'm going to use motion presets to do this. But the first thing I'm going to do is I'm just going to go ahead and turn off, basically hide the content for each section because I just don't want it to get in the way. I'll just kind of turn those off really fast, just to get this set up. I'll go back to this home bkgd layer here, and I'm going to go ahead and change my view, let's say to about 50%.

Adding preset animation

Flash makes it easy to add animation to any project and that's what I want to do with each section here. I want to actually animate in the background in a cool way and I'm going to use motion presets to do this. But the first thing I'm going to do is I'm just going to go ahead and turn off, basically hide the content for each section because I just don't want it to get in the way. I'll just kind of turn those off really fast, just to get this set up. I'll go back to this home bkgd layer here, and I'm going to go ahead and change my view, let's say to about 50%.

Again, I want this to kind of slide on or animate in, in some cool way. And again, I'm going to do that using motion presets. So I'm going to go to Window, down to Motion Presets. That opens up this Motion Presets panel, and I'll just nest if off to the side, so it's sort of out of the way. And I'm actually given this Default Presets folder. So if I open that up, you can see all of these really cool animation you can use. So I'm just going to arrow key down and check out some of these. So there are some fly-ins with a blur, there are some fly-ins without a blur, and there is all sorts of cool presets in here.

There's a pulse, even smoke, definitely pretty nice, even if you want it to have something twirl in, in a 3D way. So I encourage you to kind of check out all of these presets. They are definitely pretty cool. But I don't really want to overdo it with this. I just want to have this fly in from the right. So, with that background selected, I'm then going to select to my preset and then I'm going to click this Apply button, and it adds that motion tween. Here's my motion path right here that you can see on my Stage and notice how it gives me this motion tween up here as well, okay.

So I want to go ahead and adjust the time, because as you can see it actually adds this animation, but it spills over into the other sections. So I'm just going to click and drag on that second keyframe to shorten it up, so that only exists within this amount of time. All right, so it's not really positioned correctly either, so I'm going to go about Frame 19. This is sort of its resting location. And what I can do is I can select this motion path, and I can move the entire motion path.

So I can move that whole animation over, so it does rest into place exactly where I want it to be. So again I'll click on Frame 10 and I can just kind of scrub through, but you can see that it slides in. Now, I can also edit this motion path. So I'm just going to click on the background, just to deselect it, and what I can do is I can roll over this starting point right here. This is the starting keyframe. And I can stretch it out.

So now my animation is going to sort of start further out and then still end up in the same position. Much more dramatic, but that's sort of more of what I want. So I'm going to continue to do that for some of these other sections. I'm going to select this about bkgd, and I'm going to have it say come in from the bottom, and I'll click Apply. You can see it gives me this motion path, this motion tween in here. I can go ahead and grab that second keyframe and click and drag it so again it exists and it sort of happens over these 10 frames.

I can also select that motion tween. It might be kind of hard to see it depending on at the layer color, but I can go ahead and move that down as well. All right, so that looks pretty good. Let's move on in the next one. Since this one is kind of more of sky theme, we have these balloons come in from the top. So again, select your move clip, then the tween, then click Apply, and you can see that it does animate. But what I need to do is of course shorten this up again like that and then move the tween.

Now remember, regardless of what tween you've applied, you can always not only adjust the tween, but you can also adjust the position of the Start or End to keyframes here, so I can just go ahead and move that. So now again, it's going to be much more dramatic when it comes in. There's something else I can do as well though, because with this motion path here I can not only sort of move the position of the start keyframe, or any keyframe for that matter, but what I can do is if I click off of it, I can roll over that line using my Selection tool, I can roll over that line, and as I roll over it, it gives me that curved line.

It's basically saying, hey you know what, you can curve this motion path. So again, I'm just going to click and drag, and you can see now I can bend the motion of this object. So now, it's actually going to kind of come in at a curve. So that might be kind of cool. I'll select Frame 30 and I'll just kind of scrub through, and you can see it sort of comes in at a little bit more of an angle. So again, you can do that for any motion path. All right, here's is my last one. I'm going to select that background, and I'm going to have it, coming from the left, select that tween, click Apply, and now I can see that it does give me this motion tween up here, which I need to shorten like that and then I need to make sure it's positioned accordingly.

So again, use motion presets to kind of get you started and the you can sort of further manipulate it by editing the keyframes, maybe making the animation happen longer, and again by rolling over that line you can always sort of bend to that motion path as well and create something even more interesting, like bend that down like that. So definitely, it's pretty nice. I'll go to Frame 40, I'll hit Enter, and you can see that sliding like that. So, when you add these motion paths, notice my Timeline is pretty squared away, except for these frames that are kind of sticking out, out here.

And personally, these kind of annoy me because no content exists beyond this point. So, I can select all of these frames here, sort of this chunk, and I can right click and what I can do is just Remove Frames. There we go. Now it's actually not going to sort-of play beyond the Frame 50. So let's just do a Control > Test Movie. I'll test it out. You'll get this message on occasion, just hit OK, and you can see all that content sort of slide in.

This happens really fast. In fact, it's can kind of annoying. So, if you want to extend out animation, and that's pretty easily done as well. In fact, if I want to double the length of this animation, what I can do is I can select all these frames like that, just do a click and drag, selected all these keyframes. And now if I right click, instead of removing frames like I did before, I can do Insert Frame. Insert Frame, that stretches it out, now that animation is going to happen over the course of, you know, maybe a second.

But again, I want to do this for all the sections. Just do a click and drag to select and insert a frame. So, this is a great way to sort of extend out your Timeline, Insert Frame, and just be aware that I've this nav folder. So I'm also stretching out all of this navigation here as well. So that's why I'm selection up so high, but again I'm selecting this big chunk here, Insert Frame. Now everything actually is going to have a slower pace to it and it's going to be easier to kind of see the transition.

So, Control > Test Movie and test it out, and now we can see everything happens slower. And again, somehow that motion tween with that curve, and it looks actually pretty nice. I have some variety but again it all started from the motion presets that I was able to select, use, and modify to my liking.

Show transcript

This video is part of

Image for Creating a First Web Site with Flash Professional CS5
Creating a First Web Site with Flash Professional CS5

34 video lessons · 28229 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 Creating a First Web Site with Flash Professional CS5.

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.