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

Animating the eye blink

From: Rigging a Face in Flash Professional

Video: Animating the eye blink

Nothing looks weirder than somebody who doesn't blink, so it's time that we gave this guy a blink to do. So let's go and start again. I like to favor the right side. You can pick one or the other, but again, whatever you do, be consistent. So my approach is do the right side first, then repurpose it to the left side, and that way know what your primary approach is going to be every time. So in this case let's go onto the right time, and we need to make some simple placeholder symbol-- for now, something very similar to the eyeball itself. So let's just click on that. Ctrl+C to copy, paste in place here, and let's hit F8 to make this into its own symbol, because obviously, we don't want the animation to happen on this external timeline.

Animating the eye blink

Nothing looks weirder than somebody who doesn't blink, so it's time that we gave this guy a blink to do. So let's go and start again. I like to favor the right side. You can pick one or the other, but again, whatever you do, be consistent. So my approach is do the right side first, then repurpose it to the left side, and that way know what your primary approach is going to be every time. So in this case let's go onto the right time, and we need to make some simple placeholder symbol-- for now, something very similar to the eyeball itself. So let's just click on that. Ctrl+C to copy, paste in place here, and let's hit F8 to make this into its own symbol, because obviously, we don't want the animation to happen on this external timeline.

So let's put the pivot point to that side. I am going to call it eye right lid. You can call it blink, but I like to call it by what it is. It's a lid that blinks. So this makes more sense to me. Click there. Let's fix the pivot. So Free Transform tool with Snap on Snap to Objects, and let's put that there. It's really important that we get the eyelid traveling very tightly with the eyeball. Now that that's done, we can double-click to enter the symbol, and let's make some layers. Now this thing is just there is a placeholder, so we can hide that.

Now let's make three more: one, two, three. And the top layer will be the upper eyelid, the middle layer will be the lashes, and the bottom layer will be the lid lower. So what we want to do now is to create a geometry or a shape that will be as simple as possible and easier to tween. So what I'm going do with this actually is go back out a little bit, because the main point for this for me is the point here; it's that pivot. I'm not worried about the internal eyeball.

I am just going to move that a little bit to the right. Now, let's go back inside. And this is where I am going to start the upper eyelid from. So let's start with lid lower, and with the Rectangle tool and again, let's get rid of the outer line, get rid of that. And this is going to be like the skin color, but a little bit darker. So let's pick, I see that this turquoise color down. Just a dark skin color will do for now. And I want this corner to be absolutely spot-on that crosshair.

So let's put Snapping on for the grid, and you can feel it go on. It's nice. It's really nice when you feel it really connect with that. And then I am just going to switch off All Snapping for the moment, and just pull this up. I really want to get this exact, and that means hiding the eyebrows. So let's go back out, click on eyebrow, hide it. I am going to go back in here. Once again, taking care that flash doesn't helpfully snap away this point, because we need this point and this point, this point in particular, to be able to control the animation for the blink. That's good.

Perfect. So let's make a second key. What I am going to do, actually, is let's make two more here. I am not going to worry too much about the timing right now. This is going to be the closed eye. This will be the open one. So I am going to go to the closed position and drag this down, and now let's activate Shape Tween. Right-click on the keyframes and select Create Shape Tween, and that's it.

That's how we will do it. Now I didn't put this on the lid lower, but I think this will be more like the upper eyelid. I am not quite sure yet, so let's just move it up there for now, and let's put some blank frames in here. When you are working like this say, you basically were working on layers, and it can be confusing. There's no way around it. It's a little trial and error. It's not too difficult to figure out what is going to work and what isn't. So what we need now is another layer that will describe the black for the eyelashes.

So let's select that layer by clicking on here, hold down Alt or Option, and drag this down. And the eyelashes we want to be black, so let's select a black fill for that, and then let's color all these. Now if we hide that, we see the entire area turning black. That's obviously not what we want, so let's padlock that. Now the upper eyelid will give us this effect if we smooth this up to here.

The beauty of this method, by using two different color layers, Flash does some things very poorly, and one thing that it does very poorly is shape tween these very, very thin crescent shapes. It's much better at shape tweening big shapes with wide areas. So by this process, what we have done is we have created the illusion that we shape tweened a very narrow slice when we have done nothing of the kind, and that also gives us really, really nice control over the weight. We can actually make the eyelashes disappear completely at the top of the eye. Then the other thing that we need to do is, well, we can actually show some eyelashes up here.

That's great. And we want to copy this to the end, so select those two, hold down Alt+Drag or Option+Drag. See the little plus sign showing I'm copying. And the lower level here also needs an eyelid for the bottom of the eye, so let's do that. And again, just double-click to get rid of that outline. Snap on. And let's go to outline on this, snap off.

You should be getting the idea by now that the essential process is fairly repetitive, even the same essential steps over and over again. Let's get rid of this point here. We don't need that, so that will combine it. Snap off again. Hold down Alt+Option to pull the line to a new point. And let's just check to make sure that we haven't lost control. That's great. Hold down Alt or Option, we will drag that to here and pull that up. And then just copy the start frame at the end, select these keyframes, Create Shape Tween, and now switch Outline mode off, and there we go.

Now the one thing that you will notice with this is that it's so fast that sometimes you can barely see the closed state. So one thing I like to do is to take the closed eye and duplicate it. It helps that closed position to read a bit more. You can even make three or four or five frames, as many as you like. That's the beauty of doing this. You can make these eye blinks as slow as possible or as fast as possible. It's entirely up to you. Once you have the shape tweening done, you see how simple that is. So instead of doing that, what I want to do is just to create, for now, a really nice straightforward eye blink.

So let's put a wide-open frame on frame 1. We will put the beginning of the blink on frame 2. We will put these two frames here on frames, let's see, 6 and 7, and you can see their frame number down here. And we will end the blink on frame 10. Then we'll go to a blank frame, hit F7 and now we can remove these. And if you're really picky, you can even get clean up that little tweens that we don't need there.

And that's really, really nice. Also, we can get rid of that little placeholder that we created, if you remember, at the beginning. We don't need that now. To finish it off, we will just color the layers too, so that if you ever have to look at this in Outline mode you're all set. Now when we go back out, let's put the eyebrow back on.

That's beautiful. Then one last step remains, luckily not too difficult. We will duplicate this for the other side. Ctrl+C, Ctrl+Shift+V. Now a lot of people at this point would simply take this eye blink and flip the symbol horizontally. Again, don't do that. Much better to right-click on this, duplicate the symbol, make it eye left lid, OK. We go into that symbol.

Now if you obviously, it you play it, it's the wrong side. So what we want to do is to select all these frames and flip them horizontally. Not a fun thing to do one by one, but fortunately, we can do it in bulk. Down here we can edit multiple frames and drag the markers so that they cover everything. Modify > Transform > Flip Horizontal. We didn't see much happen there, but they flipped the other way around, so we can actually go to Outline mode; it'll help to position them properly.

And that looked good. So let's switch this off. So we see just single frames again, and there we go. No symbol flipping occurred, and we still get the same result. And we maybe had to add a few more seconds of work editing multiple frames rather than flipping one symbol, but you will understand later on why this is really, really important. And last thing to do is right now these symbol are set to Loop. That's going to look really weird.

So for now I will just set them back to Single Frame, and we are done with the eye blink. In the next chapter, we will move on to the mouth and look at bring him into life by making him speak.

Show transcript

This video is part of

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

44 video lessons · 5930 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 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.