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

Animating a magic carpet jump

From: Animation Tips and Tricks with Flash Professional

Video: Animating a magic carpet jump

Now we are going to animate the jump using the thumbnails from the previous section. Let's have a look. That's a nice simple little action. So let's double-click on this, go inside, and see that most of the work has been done through shape tweening. Okay, so let's move out again, and then you will notice also that the major action of physically moving from left to right is happening on the outer Timeline with a motion tween, and that helps us to nest a lot of the tweening action that happens here in place. It makes the tweening a lot simpler in Flash.

Animating a magic carpet jump

Now we are going to animate the jump using the thumbnails from the previous section. Let's have a look. That's a nice simple little action. So let's double-click on this, go inside, and see that most of the work has been done through shape tweening. Okay, so let's move out again, and then you will notice also that the major action of physically moving from left to right is happening on the outer Timeline with a motion tween, and that helps us to nest a lot of the tweening action that happens here in place. It makes the tweening a lot simpler in Flash.

So I will show you how this is done in a little more detail. I am going to delete everything here, and reinvent the wheel. So let me get rid of all of these. I am going to remove the tweens. So we're basically back to square one, and let me show you how this is done. So I like to have the thumbnails inside the symbol of the Jump frame. So I am going to just click on this, go Copy Frames, hide it, and then go Edit. Now we can work entirely inside the carpet jump symbol. All you need for this really is a green rectangle. And we've copied the thumbnail, so let's make a new layer, and paste them in. And I think let's move the artwork to just off to one side where it won't get in our way.

I will move it down to a lower level. And if it's guided out, it won't export, so you can go to your outer layer, and it's hidden. Its a little work around that I use for hiding things away if I just want them for reference purposes, or to back up layers. Okay, so we're going to have basically 7 keyframes, and the guy is going to be in the same physical place, left to right, in the first three. So let's slap down F6; F6 on those points.

By 5, 6, and 7 he will be a little further over to this side. So let's make a keyframe here, and use Shift and the Arrow key, nudge it over maybe two or three clicks, and then hit F6 here and here. So we have two states, left and right, with 3 keyframes in each. And on Frame 4, that will be kind of between the two. So I will hit F6, and Shift+Arrow to the right maybe a couple of small moves, and then Shift and up to get the high point. And so now we have our beginnings of a very simple animation.

So now we can go in and push the secondary frames. So let's hit the Free Transform tool, or Q; on the second key, I am going to just drag down for the squash pose. Hold down the Alt key so that we symmetrically pull them to one side. Now, we have a nice transition. And the beauty of not having shape tweening activated right now is that you can see this transitions more cleanly between one and the other. I will make it a bit bolder, and this one will be the push off before it goes into the up pose.

So what I am going to do first is take the up pose -- because it's kind of the most important one, after the start and the end. And let's get that into whatever final position we want there; beautiful! Okay. Now, we need to go from the anticipation, and I am going to just push this down a little more so I can have a better idea of the final look of this. He is going from here to there, and he is going to work from anticipation, into the push, into this pose.

The problem is, when you work inside Flash, it's very hard to see where you're going from, and going to, and I like to have an idea about what my destination is. So what I am going to do is copy the up pose directly over the push off pose, so I can see where I am heading. Hold down the Alt+Option key, and drag onto this new layer. And now I am going to outline that, and padlock it. So now I know I am going from the squash, into the push off, and it's going here. So now I can begin on the Animation layer. And I feel snap on; we don't need snap. Make sure you have snap off.

Now, I can try to form my little dollar bill, or jumping green rectangle, magic carpet; whatever this guy is. We can pull him closer into that position. Now, you can see, he is heading in the right direction. So at this point he's heading into that one, the shoulder is heading into this one. It's moving fairly well. So now we can delete that little reference layer.

Looking at this now, actually, I can see I bent his back the wrong way here. In Frame 2, in my thumbnails, I had bent him that way, and that really works a lot better with this. So let's make sure that's consistent. And then we have the opposite thing happening on the way down here. This is Frame 5, where he is starting to approach the ground. So let's move into that, and we'll try to shape this. I can make another guide layer for this one too if I wanted it, but I think I can eyeball it. If you use the Bracket key, the Comma, and the Period near your spacebar, you can go back and forth a lot more easily.

That's feeling pretty good. Let me bring the shoulder down a bit. We don't want anything to stick, so you want a certain amount to movement between any two of these frames. And then Frame 6 will be the squash frame, alot like Frame 2. If you wanted to be quick and dirty about it, go to Frame 2, hold down Alt+Option and Drag. You can modify it too, of course, but it's a quicker way of getting you into the ballpark. Well, of course we have to reposition them, because this is in a different pose from over here.

So again, we can eyeball it, because he is squashing. That's not too bad. Okay, now we have our basic action posed out. Let's hide those thumbnails; we don't need them anymore. I am going to activate shape tweening. Be very careful you don't accidentally activate classic tween, or it will turn all of your frames into groups, and fake little symbols, and they won't shape tween. If that ever happens, or you do it by mistake, simply go to each symbol, and go Control+B to break it apart, and it goes back into being a shape again. And then you can change your tweening mode by right- clicking, remove the motion tweens, and go back to shape tweens.

It's very tedious, so please be careful; try it to avoid having to do it in the first place. This is a new behavior in CS4 and CS5. It didn't do that in earlier versions. So the next thing to do is, as you can see, some of the shape tweenings are misbehaving, so let's put some hints in. So Control+Shift+H, or Modify>Shape>Add Shape Hint. And as you can see, there are hints already there. That's because I deleted the original animation that we did for this course. So let's just remove all hints first and see what the new ones do. So that's fine.

As you can see, from 2 to 3 it's getting very strange. So I am going to apply some new hints. So Control+Shift+H. And I will remind you now before you do this, you really should back up your file. I don't think we will have any problems here, but shape hints will crash your computer from time to time -- or not your computer, but your Flash. Occasionally, you will create an animation the program really doesn't like. If that happens, Flash will simply choke, usually with no recovery. So you will have to restart the program and you will lose your work.

So I don't want that to happen to you. So as you can see here, I've put down 4 keyframes: A, B, C, D. And that works really nicely. Sometimes it won't work; if I had put A, B, C, D in that direction, it may not have worked. But for a simple shape like this, usually I will put down one, and if it makes the tweening better, then I know I am good, and I can move to the second one, and third, and the fourth, and so forth. Sometimes I get to the point where I'll just delete them all, and maybe start up here. I could go A, B, C, D. There is really no rhyme or reason; I can't give you one.

It's just something that you have to be a little patient with. But I have found very rarely can I not make something work, or at least get it close enough to be usable. So now I am just going to keep going, and apply the rest of these little things. It can be confusing, because you are applying the shape hints of one key over the shape hints of a previous one, but you will get used to it. I think the end results are well worth it. So as you can see from 5 to 6; same problem. So I could put down one key, one hint rather. And as you can see that's the effect of a single shape hint, and if I put down one more, you will see it will tighten it up a little bit more.

Sometimes one hint is enough, which is really nice when it happens. But in this case, this little guy, he needs all four. Now, whatever version of Flash you are using might be a little bit different, but they should work. I've used hints for years. And then into the final; great! That's it! Let's look at it again; super! So let's go to the outer Timeline, and big problem right now is he is kind of jumping in place, and we want him to jump across the screen.

So I am going to hit F6 here, F6 there, and I am going to hold down Shift, move the Arrow key four or five clicks that way, and I am going to activate classic tween, and now we have the horizontal jump. If you wanted to increase the vertical of the jump, hit F6 there, and push it up a couple, and you can then modify that. So this is also a good example of nesting your shape tweens inside a motion tween, which is one of the major processes that I use. One other thing to watch out for when you apply shape hints: be sure you are working on the right layer.

It's very easy to have this layer active, and you're applying hints, and you think you are applying them to this layer, and you're really applying them to a hidden layer. That can happen, and it's a waste of your time. So do always make sure that when you apply hints that you're working on the right layer that you're intending. And then you can create pretty nice little animations like this, with a lot of personality, with not that much work on your part. So I think we're ready to move on to some more interesting shape tween animation with the magic carpet.

Show transcript

This video is part of

Image for Animation Tips and Tricks with Flash Professional
Animation Tips and Tricks with Flash Professional

46 video lessons · 13397 viewers

Dermot O' Connor
Author

 
Expand all | Collapse all
  1. 6m 35s
    1. Welcome
      1m 4s
    2. Using the exercise files
      51s
    3. Common keystrokes and shortcuts used in this course
      4m 40s
  2. 1h 24m
    1. Understanding video versus SWF
      2m 30s
    2. Overview of shortcuts, extensions, and setup
      6m 27s
    3. Understanding linear and radial gradients
      2m 39s
    4. Overlapping and animating the colors
      3m 53s
    5. Lighting a scene
      10m 24s
    6. Creating lens flares
      10m 40s
    7. Animating ripples
      7m 2s
    8. Creating a gradient globe
      11m 41s
    9. Creating a gradient bottle
      10m 26s
    10. Applying gradients to a character's eye
      10m 2s
    11. Applying gradients to a character's skull
      8m 49s
  3. 56m 53s
    1. Tweening a circle to a square
      10m 9s
    2. Using thumbnails
      4m 39s
    3. Animating a magic carpet jump
      10m 12s
    4. Setting up a magic carpet walk cycle
      7m 41s
    5. Animating a magic carpet walk cycle
      9m 33s
    6. Shape tweening hair
      3m 50s
    7. Intro to overlapping hair
      1m 57s
    8. Animating overlapping hair
      8m 52s
  4. 1h 8m
    1. Animating waves
      8m 7s
    2. Animating clouds
      7m 48s
    3. Animating a flame
      11m 38s
    4. Animating an explosion
      9m 1s
    5. Adding in-betweens to the explosion
      4m 36s
    6. Adding explosion clusters
      6m 43s
    7. Optimizing the explosion
      7m 30s
    8. Animating smoke with particles
      12m 45s
  5. 32m 18s
    1. Introduction to staggers
      1m 5s
    2. Animating a simple stagger
      5m 8s
    3. Animating a diving board
      6m 15s
    4. Animating a tremor
      5m 56s
    5. Animating a scream
      7m 12s
    6. Refining the scream
      6m 42s
  6. 47m 49s
    1. Introduction to Virtual Camera
      5m 4s
    2. Animating parallax
      6m 9s
    3. Animating a crane shot
      6m 26s
    4. Animating a zoom and rotate shot
      9m 30s
    5. Animating a track shot
      11m 0s
    6. Lighting a 3D shot
      9m 40s
  7. 19m 48s
    1. Animating a cross dissolve
      6m 10s
    2. Animating a wipe
      3m 34s
    3. Animating a fadeout
      10m 4s
  8. 20s
    1. Goodbye
      20s

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 Animation Tips and Tricks with Flash Professional.

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.