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

Nesting animations

From: Flash CS4 Professional Tools for Character Animation

Video: Nesting animations

In this movie, we will look at nesting an animation to make the monster's claw open and then snap shut. If you are following along, go ahead and open up Nesting_Animations.fla from the Chapter_02 folder. You can also just create any movie clip on the Stage. Double-click the monster to enter its timeline and then we will take a look at the monster's timeline. It has three layers: Left Claw, the Monster layer and the Left Arm layer. The left claw layer is a movie clip. It's an instance of LeftClaw. Now I will double-click the Left Claw movie clip to enter its timeline. Inside of the Left Claw movie clip, there are two movie clips. One of them is called the RightSide, which is the right side of the claw and the other one is called LeftSide, which is the left side of the claw.

Nesting animations

In this movie, we will look at nesting an animation to make the monster's claw open and then snap shut. If you are following along, go ahead and open up Nesting_Animations.fla from the Chapter_02 folder. You can also just create any movie clip on the Stage. Double-click the monster to enter its timeline and then we will take a look at the monster's timeline. It has three layers: Left Claw, the Monster layer and the Left Arm layer. The left claw layer is a movie clip. It's an instance of LeftClaw. Now I will double-click the Left Claw movie clip to enter its timeline. Inside of the Left Claw movie clip, there are two movie clips. One of them is called the RightSide, which is the right side of the claw and the other one is called LeftSide, which is the left side of the claw.

What we want to do is animate these rotating open. But if I rotate them right now, they hinge around the center. That's because of the circular area called the Transformation Point. When you select and armed it with the Free Transform tool or multiple objects, you will see a transform point or a little circle in the center of that object. If you move that transformation point, then you can redefine what axis you can rotate around when you rotate the object. So I will move the Transformation Point on the left claw to the bottom right of the claw. Now when I rotate the left claw it hinges around that transformation point.

So I will open the claw a little bit and then I will select the right claw and I will do the same thing. So I will move the transformation point down to the bottom and then open the claw just a little bit. Noticed that there is a little bit of a gap in between the two claws. I am going to select the right claw and then use my keyboard, pressing the Left Arrow to close that gap. Now I am ready to create a motion tween animation. I will do that by selecting the right claw, right-clicking and choosing Create Motion Tween. Now you may not be familiar with this method, as you may have only created motion tweens on the timeline. This method allows you to create motion tweens based on objects. So you can just Right-click or Ctrl-click any symbol and choose Create Motion Tween like this and first we will create a motion tween just like you would on the timeline.

So I will go back to frame one, Right- click or Ctrl-click the left claw and then select Create Motion Tween. So now I have two open claws here. Now what I want to do here is create Property Keyframes for the rotation properties on the last keyframe of this animation for both claws. Because I actually want to start out the animation with the claw closed then have it opened and a kind of snap shot at the beginning. So what I am going to do is Right-click or Ctrl-click the last frame on Layer 2 and then choose Insert Keyframe Rotation. I will do the same thing for the last keyframe of Layer 1. Right-click or Ctrl -click, Insert Keyframe > Rotation. Now I will go back to frame one and then I have to find what the claw looks like when it's closed.

So I will select the left side, rotate it in, select the right side rotate it in. Everything looks good. Scrub the playhead to preview the animation and that looks nice and fancy. So I will test the movie using Command+Return or Ctrl+Enter and see the animation works. It just a little bit robotic. So we'll add some easing to make it feel little bit more natural. I am going to add ease in so the claw will shut and then slowly open at first and then quickly open towards the end. To do that I will select the tween in Layer 2, jump over to the Motion Editor and for my Basic Motion, I will set the easing to Simple (Slow). With that easing set, I will scroll down and define my Simple (Slow) ease. I will do that by dragging the slider all the way to the left. So I want a value of -100 because remember I want the animation to be slow at the beginning and faster at the end. So that's ease in or a negative value.

Let's do the same thing for the other claw. Jump over the timeline, select the Layer 1 tween. Go to the Motion Editor, define the easing for Basic Motion as Simple (Slow), then set the Simple (Slow) easing to Ease In. Now let's test the movie. We will preview the more realistic animation. Command+Return on the Mac, Ctrl+Enter on the PC and there is our animation in action. So now I will close the Preview Window. So by nesting animations and adding easing you can add more realistic motion effects to your animations.

Show transcript

This video is part of

Image for Flash CS4 Professional Tools for Character Animation
Flash CS4 Professional Tools for Character Animation

38 video lessons · 24429 viewers

Todd Perkins
Author

 
Expand all | Collapse all
  1. 2m 44s
    1. Welcome
      42s
    2. Using the example files
      46s
    3. Getting into this course
      1m 16s
  2. 39m 5s
    1. Reviewing motion tweens
      2m 32s
    2. Adjusting motion tweens in the Property Inspector
      3m 55s
    3. Working property keyframes
      5m 18s
    4. Controlling easing in the Motion Editor
      3m 28s
    5. Creating custom easing in the Motion Editor
      4m 36s
    6. Squashing and stretching with custom easing
      5m 33s
    7. Adding shadows
      2m 6s
    8. Encapsulating animations
      2m 39s
    9. Randomizing animations with graphic symbols
      2m 16s
    10. Stretching animations
      1m 31s
    11. Saving for previous versions of Flash
      1m 50s
    12. Converting animations to ActionScript code
      3m 21s
  3. 19m 43s
    1. Adding a perspective shadow
      3m 40s
    2. Nesting animations
      4m 26s
    3. Syncing audio
      4m 8s
    4. Adding 3D rotation
      5m 38s
    5. Using 3D layers
      1m 51s
  4. 17m 9s
    1. Animating a bone system
      3m 22s
    2. Adding easing to an armature animation
      1m 39s
    3. Creating complex armature animations
      2m 25s
    4. Creating bounce
      2m 53s
    5. Adding bones to shapes
      3m 19s
    6. Adding 3D animation to a spider
      2m 19s
    7. Creating interactive bones
      1m 12s
  5. 19m 2s
    1. Animating masks
      4m 3s
    2. Animating masked content
      5m 7s
    3. Creating shadows with masks
      4m 29s
    4. Creating an iris effect using masks
      5m 23s
  6. 7m 30s
    1. Saving motion presets
      1m 43s
    2. Exporting and importing motion presets
      3m 19s
    3. Applying and adjusting motion presets
      2m 28s
  7. 11m 40s
    1. Understanding walk cycles
      2m 45s
    2. Creating a walk cycle
      5m 16s
    3. Adding body movement
      3m 39s
  8. 19s
    1. Goodbye
      19s

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.