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

Start learning with our library of video tutorials taught by experts. Get started

Flash Professional CS5: Animation Projects
Illustration by John Hersey
Watching:

Creating animation inside animation


From:

Flash Professional CS5: Animation Projects

with Paul Trani

Video: Creating animation inside animation

The great thing about symbols is that they contain their own timeline. That means you can animate the contents of the symbol while animating the symbol itself. And that's what I am doing with this fish. I can have the fins flap while it animates across the screen. So I have this Background layer locked, and what I am going to do is I am going to select all the parts of this fish and drag it into the library. And I'm going to convert the convert this to a movie clip, and it can be called fish.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Flash Professional CS5: Animation Projects
2h 31m Intermediate Sep 15, 2010

Viewers: in countries Watching now:

In Flash Professional CS5: Animation Projects, Paul Trani shows how to create dynamic and visually rich animations in Flash Professional CS5. This course demonstrates how to create and import assets, and then take those assets and bring them to life with dynamic motion. It also shows how to create more unique and natural movement by adding special effects, 3D, masks, and even bones to animate characters. Exercise files accompany the course.

Topics include:
  • 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
Subjects:
3D + Animation Animation Projects
Software:
Flash Professional Illustrator
Author:
Paul Trani

Creating animation inside animation

The great thing about symbols is that they contain their own timeline. That means you can animate the contents of the symbol while animating the symbol itself. And that's what I am doing with this fish. I can have the fins flap while it animates across the screen. So I have this Background layer locked, and what I am going to do is I am going to select all the parts of this fish and drag it into the library. And I'm going to convert the convert this to a movie clip, and it can be called fish.

So there's my movie clip. So if I double- click on this fish, notice that I have a new timeline right in here. And notice that I'm inside of the fish movie clip. So let me just zoom in on the contents here. So, notice it contains different movie clips and my first goal is to put all of these movie clips on their own layer because they're all on layer 1. Well, what I can do is with my Selection tool, I am going to select all these graphics.

I will do a right-click, and I'll distribute to layers. That takes all the content and distributes it to layers. So I have the fin, the body, and then the tail. In fact, I don't even need this layer 1, so I'll click that trashcan and delete it. So I do want to animate couple of different body parts, so I am going to go ahead and extend out the timeline for these three layers to about frame 15, just by doing a right-click, and Insert Frame.

Currently, nothing is happening. I am hitting the Enter key and nothing is going on, but I do want to animate, starting with the fin. So I want the fin to actually pivot from the right side. So in order to do that, I need to move this registration point right here. So I am going to go ahead and select my Free Transform tool. I'm able to move that registration point just to the right side, just like that. And now, when I scale it, or whatever, you can see that it's going to pivot it from that point. I have it set up.

Now all I need to do is do a right- click, and create a motion tween, so it turns that layer blue. Now, in about 7 frames, well that's when I can adjust this. So maybe I'll sort of scrunch it in, and maybe I'll even skew it so if I roll over that line right there, I can sort of skew it down if I want to. Something like that, so it animates at an angle, so starting position, ending position.

And then I need to scroll out to frame 15 and then bring that back into place, kind of like that. Ending position. Starting position. We can see that fin flap. Looks pretty darn good. Now, let's go ahead and take the tail, and we're going to do the same thing. Again, using Free Transform tool, I can move that registration point, just like that. I'll do a right-click and create a motion tween.

And it's the same process of going in about 7 frames and then sort of scrunching up the tail. Let's make it a little more dramatic, maybe kind of like that. And I can skew it if I want to put it at an angle and then frame 15, I can bring it back like that and then stretch it back out. And notice how the ending frame and the first frame are the same. You can also use your Transform panel. So if go to Window, down to Transform, I can open up that Transform panel.

And as you'll notice, the width isn't quite 100%, so I can type into 100% right there. Notice this skew. It says 1.8. Well, I want that to be 0. I can enter in 0, right there. So if you want exact control you can use your Transform panel. But what I have going on now, if I just hit the Enter key, you can see that the fin and the tail are kind of flapping appropriately. So let's go back to scene 1. I am going to click on scene 1. And my timeline in scene 1 is just 1 frame.

So if I do a test movie, we should see that fish animate. And I'm pointing that out to you because it shows that the timeline for a movie clip is independent of the main timeline. I can have this be a pretty robust animation, and yet it will play through, regardless of what's going on on the main timeline. So my next step is to move this fish across the screen.

But what I am going to do is I'm actually going to take this fish right here, and I'm going to drag him into the library. And I'm going to make this new movie clip symbol, and I am going to call it fish animation. This is going to be a symbol that's going to contain my fish animation. Select OK. Now, I am going to just change my view so I can see everything. So I'm going to do a Show All. Now I can see the entire screen, all the content.

And what I want to do now is just kind of position this sort of off to the side over here. But remember, this is my fish animation movie clip, and I haven't animated anything in here. So I am going to double-click on that fish, and this is the fish animation movie clip. And what I can do in this movie clip is I can animate this fish. So I am going to animate him across the screen, let's say in about to 30 frames. So I'll extend the timeline by selecting Insert Frame.

And starting position is going to kind of off the screen over here. And I can go ahead and do a right-click, and create a motion tween, because I want him to move from over here, clear over to about frame 30. So now I can drag him right over here to this side of the screen. And if I scrub the timeline, you can see the fish go. In fact, if I hit Enter, you can see he goes pretty fast. So I am going to go ahead and extend out this timeline just by clicking and dragging on the right side.

So there's my fish moving across the screen. Again, we're inside of fish animation. And you know what's inside of this fish is, of course, my animation of the fins, so we're three levels deep. But again, I have an animation that's inside of another animation. My main timeline is still only one frame long. So let's do a test movie.

See my fish swim across the screen. All right, that looks pretty good. But you might be wondering, why did I put this fish animation in its own movie clip? Well, I did that so I can add multiple fish. So, I'm going to go ahead and extend my main timeline out to about 40 frames, and I am going to add a new layer. And on this new layer, I am going to drop on another fish, and I am going to use that fish animation.

So I can drop on another fish, right here on this new layer, that I will evenly name to fish. And with this new fish, I can have that new fish coming at about frame 10. Another thing I can do, since this is another instance of the movie clip, is I can scale it up, and that manipulate this all I want. This might be even larger than that. There is my larger fish that's going to enter at about frame 10.

I can do that a couple more times if I want to. I'll just do it one more time. Again, drop on a fish, and this one's going to be smaller so I'll shrink it down, and then position it, say, right there. And lastly, I will move that movie clip in. These three animations are going to play, but I still need to extend out this main timeline a little more, just so each one of these animations have time to play, because my main timeline loops through.

So I am just going to go ahead and scrub down here to about frame 100 and insert a frame. So that's how long my timeline is, so these three fish will play. So let's go ahead and try this out. I'll do a test movie. There is my three fish, and they actually go pretty fast. And this one actually disappears sooner, but take a look at what happens. These movie clips actually loop.

So if you have animation inside of a movie clip, it's going to loop over and over again. So this is just a quick example of how you can animate the contents of the movie clip, and then turn around and animate the movie clip itself, and use it as many times as you want.

There are currently no FAQs about Flash Professional CS5: Animation Projects.

 
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.
Upgrade now


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 Upgrade now

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

Notes cannot be added for locked videos.

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.