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

Putting together a head rotation

From: Rigging a Face in Flash Professional

Video: Putting together a head rotation

Now that we have our rig done, I am going to show you how you would begin to animate with the rig, and these are simple scenes, I'm not going to do these as extremely detailed animation tutorials, but I'll show you the general principles of how you can work with the symbols that we've worked so hard to make. So, let's work with the clock symbol. I think we can do some very interesting stuff with this. So right-click on that and go Duplicate, and I want to call this one space, test, hd for head, let's call it reaction, hit OK. And I want this animation to happen inside of its own symbol because we're going to be breaking the symbol apart in some very small ways, so never do that directly on the stage, always nest your animation inside another symbol.

Putting together a head rotation

Now that we have our rig done, I am going to show you how you would begin to animate with the rig, and these are simple scenes, I'm not going to do these as extremely detailed animation tutorials, but I'll show you the general principles of how you can work with the symbols that we've worked so hard to make. So, let's work with the clock symbol. I think we can do some very interesting stuff with this. So right-click on that and go Duplicate, and I want to call this one space, test, hd for head, let's call it reaction, hit OK. And I want this animation to happen inside of its own symbol because we're going to be breaking the symbol apart in some very small ways, so never do that directly on the stage, always nest your animation inside another symbol.

So go Insert > New Symbol, and we'll call this one the body for the head, I'll call it body for the test hd reaction, and that will be the outer container that holds that. So let's just drag the test hd in here, and we'll call this layer head, and you notice when you click on this that the rotation pivot is not really in the very default place. So let's, for the moment, just copy it to the actual center of the skull area, right there, and then we'll just center up the whole neck around the cross at the bottom, great.

So first thing I want to do before we do anything is click inside this, and we're kind of running out of screen. So let's go to Window > Workspace, and let's switch to rigging_face_vertical and then holding down the Spacebar let's re-center that. And what I want to do here is to go from, start in this position, as if he is looking screen right and then he scrunches up, he will blink here like on frame 5, he will reacts like he has heard something to this side and then he will settle.

So with that effect let's start cleaning up the Timeline. So this reference folder we actually don't need that anymore, get rid of that. And let's just start removing all of the frames that we don't need at all. So for 3 and 4 we can clear keyframe on these and next we're going to 9 and 10, so we can select 5, 7, and 8, right-click Clear Keyframe, and let's select all the stuff at the end and go Clear Keyframe. And the other thing we have to do, I want to go from 2 to 5, to 10 to 9, so let's select all these and drag them over to here, and I want the turn to be quicker, not too slow, from 5 to 10 like fast, like what's happening.

So let's just have a look at this and get rid of some of these empty frames at the end, and now let's Play. A bit slow at the beginning, so let's get rid of some of these. So he has heard something and reacts, that's the idea. You notice immediately that we have the familiar shape tweening errors are creeping in, that's because we've been cutting layers that had hints, some of these hints are calling on frames that no longer exist, and we're playing frames out of sequence, so other issues are going to arise.

So we can patch these as we proceed, so let's have a look, if there is anything that needs fixing between the first two, I think they look really stable. So the issues come in between 5 and 10. So let's have a peep through here, the jaw certainly. So let's just click off this, and we will play the skull, looks fine. The hair, funky, so what I am going to do is add some hints to that. Every time we do so, we'll open the Properties panel, and then Label, put in a little empty space, hit Enter, and that puts a red flag so you know hints are here.

And with this junk I think we know by now he needs five hints, usually in this pattern. And again, back up your project before you start applying hints because crashes do occur when you do this, and that goes a little haywire. There we go. What will happen is as you begin working with this you will get faster, and it will become second nature. It may seem like an awful lot of work to go through just to get these effects, but this is what it takes to break you out of static symbol animation, which is kind of the bane of Flash animation where people just make one static symbol and they motion tween it and then dread words of producers everywhere it looks flashy.

So we're trying to break out of that flashy look here. Again don't forget to put our little shape hint reminder wherever it's needed, and I think the jaw is going to need one too, yep. So let's pop them in here, two will work, and as you become familiar with the rig you become familiar with the trouble spots, and you can get faster with anticipating them and ironing them out, the eyes will be fine, okay so let's look at that. The hair on the top, this little fellow, he needs a bit of help.

So I am going to add another one of our little labels here, and we need three hints for this guy. They are different on the other side, but don't worry we'll just deal with that. As long as Flash can tween them okay, we'll be all right, keep moving over, great. So I've just corrected all of the little glitchy bits, there is one little bit on the jaw right here I can see it, so let's fix that just to be thorough, and if you select the wrong layer like here, you'll see the hints for the hair top when you are really looking at the jaw, so be careful that you don't accidentally work on the wrong layer.

When you see stuff like this happening right here, that edge flickering. It means that one of your hints could be slightly out of position, so I pull them off, pull them back on, still happening so maybe the problem is here, gotcha! And let's see, it could be a problem here as well, well, it's still there. Another thing that we can do is simply go Remove All Hints and add two new. It's possible that some extra points were generated along the way and does happen, so we may have to clean, do a little bit of clean up.

Well, that has fixed it, okay, super. So let's look at the whole thing one more time, there we go. Now you can probably see--it looks a little bit funky--and there are still a couple of things going on like problems with the layering of the ear, so let's see if I can fix that. So this ear here is popping off, so we can do little things, like let's make sure our Snap to Objects is off so we can move this a little more smoothly. Let's see, how about we get rid of that ear, let's give him like a couple of more frames. Put in the keyframe there. Don't feel like you slavishly have to follow the existing rig, I mean you can still make alterations to it to move things in or out, I am going to pop it off at that point right there on this frame, and now we have this ear popping in here, so we need to have that taken care of.

So we have ear left on this side, there is an ear left down here. So let's copy that, see if this will work onto the upper level, and it's coming in, in a weird way, so let's move that out to here. That is a little more elegant, not so eye-catching. You can finesse this, I'm not going to get totally tied up in correcting every little tiny thing here, but-- and I notice there is a little issue around here with the hair. But for now this is looking a lot better. So let's go into the outside symbol, the body test hd reaction scene, and now we have the head by itself on its own timeline, and it's nested inside this symbol, so we have the Library panel, we have the body hd test reaction, which holds the head reaction scene.

Let's be sure that we're inside the body scene, there should be one layer for the head. What I want to do now is to separate the neck from the head comp or the head symbol onto this layer here. So let's make a layer, call it neck, and we are going to go into the head turn symbol that we've just created. Let's copy just one of these neck symbols, Ctrl+C, go back into the body symbol, paste it here Ctrl+V. Let's put it in outline so we can actually position it a bit better, looks good, now put it beneath, and now we go into the head.

We keep the neck layer but just Guide it out, and now we go back into the body, and what you see now is we have the head in a nested symbol above the neck and both of these now can be manipulated separately from one another. So what we have to do is synchronize the animation of the head with the animation inside this symbol. So what we do is select the labels level, right-click, Copy Frames then go back out one and make a new layer and paste those frames and extend the timeline.

And click on the symbol and make sure in the Properties panel it's set to Loop or Play Once, and that way you'll see this move, you don't want to set to Single Frame. And the beauty of it is--let's put the neck back on so we can have something to judge against. I am going to make keyframes for 5, 10, and 9. And on frame 5 let's push it down, let's do something drastic with it. On frame 10 push it higher and on frame 9 a little lower, and as you feel like I go into Free Transform and just tilt these to where you think you'll have a better position or a better pose, something more interesting to look at.

I am going to tilt the head back up here, and now we'll just activate Classic Tweens and have a look at this. I think we can probably move the head over a bit. Don't worry about the neck break we'll fix that in a minute and move that over a little bit. And again, don't feel like you have to follow exactly what I'm doing. This is great fun, once you have the nested symbol working for you, then you can go really wild with it. So once we have that roughly done, padlock that, and now I am going to make new keyframes for the new neck and Create a Shape Tween, and now you can put the head into Outline mode, and you can adjust the neck layer to fix any of these little breaks and things that have happened, especially here.

I am trying not to move these two points down here, I am imagining that they're attached to an invisible body. Now let's see how that looks. And again of course, more hints required because in the extremity of this animation. So maybe we might want to pull it back in a little bit, and pull the head back just a tad. Lock that, fix that little piece of neck sticking out and yeah we will have to put some hints in here, so Ctrl+Shift+H, and I think let's try them down here A and B two will work. [00:11:1.47] No, put them at the top, and we need to fix these here as well, there we go, and there is our scene.

We can add details to this, for example, once you know that this is going to be the range of motion we can do things like squish the eyebrows down and again this can be corrected out in a minute. Oops! We have gone walkabout. Let me find my scene, we are in the Library panel, body test reaction. And in the up shot obviously it would be nice if we could push the eyebrows up, I need to push the nose up. In the down position maybe bring the nose down a bit more, and let's see what that feels like.

You find you can really exaggerate the different elements much further than you felt you could when you were actually setting up the clock and then the final touches things that will really add to it. The eyelids, for example, I would duplicate these and call it--let's say test reaction--and once again copy these frames, the labels, go into this, and inside the eyes. I won't go into too many details with this, because this is getting quite heavy. But we can make sure that our eyes are blinking on the down position, and we'll do the same thing with the left eye.

Don't make these changes to the original one, so we'll Duplicate that symbol and call it test reaction. Make a new layer and paste those frames, and now we set these under Looping to Play Once on frame 1, and we're on frame 9 here, on this one we set them to Properties > Play Once, frame 9, and we'll do the same thing with the left eye, and we want the eyes to be closed on frame 9 on the most down one, so let's go into those symbols again and make sure that they are.

Yep, I know what the problem was. On this one just right-click on it, Swap Symbol and make sure it's the test reaction one, there we go and the same for the other. There is a slight difference, the blink starts on frame 9 on this one, and it should match on this one, so let's just move this up by one, there we go. And again back into or auto clip, and now we have an eye blink in the nice little reaction scene.

That is in general outline how you would begin to use something like the clock rotation. To get right, I look at, and I see a very rich animation that's starting to really break away from the dreaded flat Flash symbol pushing look that I think people are getting tired off. It's nice to have the option to be able to do something that's a little more dimensional and feel a lot more real. So I recommend you play with this a lot and push the head turns and see what kind of effects you can get with it. So with that we'll move on to another example.

Show transcript

This video is part of

Image for Rigging a Face in Flash Professional
Rigging a Face in Flash Professional

44 video lessons · 6196 viewers

Dermot O' Connor
Author

 
Expand all | Collapse all
  1. 14m 16s
    1. Introduction
      42s
    2. What you should know
      2m 0s
    3. Setting up Flash
      8m 35s
    4. Dos and don'ts
      2m 59s
  2. 59m 26s
    1. Establishing the directions
      7m 9s
    2. Setting up layers for the head
      6m 58s
    3. Drawing the head
      19m 2s
    4. Creating the mouth
      11m 27s
    5. Drawing the eyes
      4m 31s
    6. Animating the eye blink
      10m 19s
  3. 48m 0s
    1. Creating happy mouth dialogue shapes, part one
      10m 24s
    2. Creating happy mouth dialogue shapes, part two
      7m 43s
    3. Creating mad or sad mouth dialogue shapes
      10m 7s
    4. Creating neutral mouth dialogue shapes
      7m 36s
    5. Building unique mouth shapes
      12m 10s
  4. 29m 27s
    1. Creating jubilant expressions
      11m 47s
    2. Creating furious expressions
      6m 4s
    3. Fine-tuning expressions
      11m 36s
  5. 1h 9m
    1. Clock rotation demonstration
      2m 23s
    2. Creating the twelve-o'clock pose
      9m 2s
    3. Creating the six-o'clock pose
      5m 19s
    4. Creating the three-o'clock pose
      10m 16s
    5. Creating the nine-o'clock pose
      9m 35s
    6. Creating the remaining poses
      13m 17s
    7. Fine-tuning the head rotation
      11m 54s
    8. Fixing layering issues
      7m 42s
  6. 2h 10m
    1. Introducing the turnaround
      2m 55s
    2. Creating the B head (3-quarter)
      6m 45s
    3. Creating the C head (profile)
      8m 51s
    4. Creating the D head (3-quarter rear)
      13m 2s
    5. Creating the E head (rear)
      8m 59s
    6. In-betweening symbols manually
      9m 58s
    7. Creating the H head
      6m 41s
    8. Creating the G head
      11m 33s
    9. Creating the F head
      19m 18s
    10. Creating the B mouth (3-quarter)
      13m 41s
    11. Creating the C mouth (profile)
      14m 33s
    12. Adding detail to the C mouth
      7m 42s
    13. Creating other mouths
      6m 28s
  7. 54m 24s
    1. Putting together a head rotation
      14m 29s
    2. Moving frames between symbols to make a rotation
      10m 23s
    3. Using the rig with audio
      14m 59s
    4. Adding expressions to the animation
      14m 33s
  8. 1m 0s
    1. Goodbye
      1m 0s

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.

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 Rigging a Face in 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 preferences from 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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

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.