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

Animation Tips and Tricks with Flash Professional
Illustration by John Hersey

Tweening a circle to a square


From:

Animation Tips and Tricks with Flash Professional

with Dermot O' Connor

Video: Tweening a circle to a square

One of my favorite techniques in Flash is shape tweening, and I think a lot of people don't use it enough, because it has a little bit of a bad reputation; it can be a little bit of flaky sometimes. So let me show you a simple animation that I have created of the sphere changing into the square. And I will show you how I did it, and how I worked around some of the problems. So the trick with really coaxing Flash to be stable in shape tweening is to use shape hints. And in this case if I hit Modify>Shape>Add Shape Hint, or Control+Shift+H, you will see my existing hints.
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

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 ...
Animation Tips and Tricks with Flash Professional
5h 16m Intermediate Aug 09, 2011

Viewers: in countries Watching now:

In this course, author Dermot O' Connor introduces a variety of real-world issues that animators commonly encounter and offers practical solutions to them in Flash. The course covers how to apply gradients to create subtle texture and light characters, reducing the flat look of most cartoons; how to simulate natural phenomenon such as wind, fire, and clouds; how to mimic 3D space; and how to add fades and transitions to create custom cuts between scenes. The course also includes a look at staggers, which can be used to create camera shake, tremor effects, and extreme character reactions.

Topics include:
  • Overlapping and animating colors
  • Creating lens flares
  • Animating hair with shape tweens
  • Animating an explosion
  • Animating smoke with particles
  • Animating a scream
  • Using Virtual Cam
  • Lighting a 3D shot
  • Animating cross dissolves
Subjects:
3D + Animation Animation
Software:
Flash Professional
Author:
Dermot O' Connor

Tweening a circle to a square

One of my favorite techniques in Flash is shape tweening, and I think a lot of people don't use it enough, because it has a little bit of a bad reputation; it can be a little bit of flaky sometimes. So let me show you a simple animation that I have created of the sphere changing into the square. And I will show you how I did it, and how I worked around some of the problems. So the trick with really coaxing Flash to be stable in shape tweening is to use shape hints. And in this case if I hit Modify>Shape>Add Shape Hint, or Control+Shift+H, you will see my existing hints.

It's added new one by doing that, which I didn't need, so I right-click on this C, and go Remove Hint. They're labeled A through Z, and you can apply them to a given point. And I've put the A's kind of at the top of the sphere, and at the two corners of the square, and that encourages the correct tweening. Now, if I remove them, you will see why I applied them. Right-click, Remove All Hints, and it's spinning. This point here, instead of tweening to this corner, is now spinning around clockwise, and we don't obviously want that. So again Control+Shift+H adds the first letter, and I apply them one at a time. I will do the A first, and then the B.

You can see it's locked in the corner. and I just keep applying them until I get what I want. You will find you'll get different results depending on where you put them, or what sequence you put them in. A quick note on this: you will find with shape hints, if you use them for long enough, at some point, Flash is going to crash. Because you will create a hint combination that it simply doesn't know what to do with. It freaks out, and it crashes. So before you start applying hints, anytime no matter how simple, even if it's only one shape hint, back up your file first. Then you can crash, and then reload.

The other thing; sometimes I hit the shortcut Control+Shift+H. The hint came up; sometimes it doesn't. I haven't had this problem too often, but when it does, just go back to the menu, and go Modify>Shape>Add Shape Hint, and that will reactivate the shortcut key. I haven't had that happened yet in CS5.5, the latest version, so maybe it's fixed. So that's that; that's the basic demonstratio. Not very exciting. So let me show you a more interesting application of the system, and this is animating the very same transition with giving it a little bit of life, and now you can see how neat that is.

You can do these effects only in shape tweening, very hard to do them in motion tweening, even with the new features like bones and things. This really is the most powerful, flexible way to mutate one form into another. Right now, we're using very primitive forms, but you can use different shapes and different layers. This could be a mouth, for example, talking. You could have teeth inside it massed out, and we will do some of that later on in the course. So important that you follow along with this I think. So let's just delete these.

I am going to recreate this from scratch so you can follow along. I am going to clear the keyframes, and now we have -- on Frame 1 just make a sphere, and on Frame 50 a square, and I am going to make a new layer. Now my layer says Layer 4; earlier it's a Layer 3 when I did this before. Don't worry; it's a default setting. If you've been playing around with Flash, it might remember your layer history differently. It doesn't matter, you can call it whatever you like. I am going to call it as Layer 2, and I am going to put some notes in here ,and hit F7 to make some empty keyframes. So what I like to do is use this as a note system for myself.

If you use traditional animation you will be used to using thumbnails, or making little notes about where you want your main actions to go. So I want this to be held as a sphere maybe for the first 10 frames, and I think I will squish him on Frame 20. And I sometimes put notes here. So, for example, I will use the Label panel, call it Squash, and on Frame 26 that will be the jump, and on Frame 28, that will be the high point. So I will just drop hp in there for high point.

On Frame 34, hit F7 again, and that will be when it begins to come down. On Frame 36, that will be the impact frame, so I will just drop a little impact on it in there. And this is just a temporary little note system to help you keep track of where all your frames are. It's very handy, when you have a complex scene, to be able to have a visible cue as to what goes where. I like this a lot. It's one of the benefits of a horizontal Timeline. So at 42 will be kind of like a little bounce up from the squash, and Frame 50 will be that.

So you don't have to do this if you don't want to, but I find it very useful. And now I am just going to hit F6 to duplicate the sphere onto a second key, and we'll start animating soon. So he turns into a square I think around Frame 28. So I am going to just grab this, hold down the Alt or Option key to copy and drag back to there, and I will just start working on it. So this is going to be the squash frame. Let's select the Free Transform tool, or hit Q on your keyboard, and let's just squash it. I am going to be pretty fast, quick, and dirty about this.

Sometimes it's good to be careful, and sometimes it's good to be a little lposer. So let's just have a bit of fun. If you feel like you're getting off-center, you might want to use the guides to guide you. It's Control+Shift+Alt+R will select the guides. So if you think you are getting off-center you might want to pop one of them down there. And then Control+Shift+Alt+R gets rid of that, because if you free up your screen, it helps to keep the center of mass right. Don't activate shape tweening yet. You want to be able to see the snaps from one key into the other.

So make sure that you are not making the volumes lose their mass. And this will be the high; he is going to be jumping high into the air on this one. So I am holding down Shift, and moving the Arrow keys. It helps to move him in bigger increments. On this frame, Frame 34, I would still have him high. So I am going to hit F6, and just move him down a little bit, and he is starting to drag. And we'll impact him on Frame 36. Let's put-in another ruler; Control+Shift+ Alt+R for the ground plane. So that's when he starts there.

Let me get rid of them again; Control+Shift+Alt+R, get rid of the ruler so now I can match the ground plane when he hits it. And squish him a little bit. As you can see, when I click and drag, I am just moving one area, if you hold down the Alt key, it will drag both together; it might save a little bit of time. So he bumps into the ground here, and then, we'll have him bounce up a little bit before he settles. So I am going to hold down the Alt or Option key. Drag Frame 50, and this is very subtle; holding the Alt key in.

So now, I've got to play it with just the keyframes, what we used to call a pose test; that's it. So I might want to push that impact a little bit. Now we can apply shape tweens and see what happens. At this point, there is a feature in Flash I want to warn you about. I have hit this before. It's a new helpful feature that isn't very helpful. If I was to right-click on this and say Create Classic Tween, it will convert everything into, like, a symbol or a group, and it causes problems.

So be very careful when you do this that you create shape tween, and not classic tween. And if you do create classic tween, and you see a little blue line around everything, you have to select each symbol and hit Control+B to break them back apart. You want, when you click on these frames, to see the little dots. If you see a blue line around them, it's not going to work. What you want to see is nice green color with that solid arrow. If you see dots in there, it means you've got a symbol, or a group, or something that's going to mess you up, and that's not going to be good.

But this is working nicely. You will see he is spinning there; right here. That's not good, we don't want that. That's a real problem. So we want to add shape hints to control that. So before you start adding shape hints, save the project. So that warning done, I am going to apply a shape hint. And I find when you find a spot on the forms, it tends to like them more than others. So I know this A and B worked before, so I am going to put them in the same place, and there we go.

Now the beauty of shape tweening, too, is if I think I want another frame, I don't have to handdraw anything; I can just let the engine take care of it. And I want to get rid of these guidelines now; I don't think we need them. So go View>Guides and click off Show Guides. Much better. So let's start using some of the nice features that we can only do in shape tweening. And you might find you hit a point where you go too far, and it starts to spin, or your shape goes flaky; Control+Z is your best friend when that happens.

You're better off going back to your original state, and back up your file. Now here he is coming down; kind of boring. Let's make him look more natural. And I am going to bend some of these a little bit. And on the squish, another good excuse here to have some fun. I love doing this; it's really nice. There used to be a classic test you would do in animation that involved taking a sack of flour, and trying to give it emotion. And this is like our version of a sack of flour. And if you are not into character animation, I strongly suggest you spend some time playing around with this sort of guy.

It's a fun way, and we'll be doing a little bit more with him, this simple square, to give you a feel for some of the potential. So let's play that. And there we go! It's a sphere squishing, and popping into a square. That will have some pretty cool applications later on. So on to the next!

There are currently no FAQs about Animation Tips and Tricks with Flash Professional.

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

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.