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

Animating an eye blink using shape tweening

From: Flash Professional CS5: Character Animation

Video: Animating an eye blink using shape tweening

Okay, so it's time to animate for the first time on our character by making the character blink. So, let's open the file. It's in your Chapter 3 - rigged character folder. So, let's open character_rig_ 01 and here is our character. Let's a little bit of housekeeping from the previous area where we modeled the eye. We left the eye symbol outside so let's just drag that into the head parts folder and get that clean. Anytime, you create a head symbol, put it there. Body parts go in here. So let's double-click on the head symbol and let's zoom in, get up nice and close to the eye.

Animating an eye blink using shape tweening

Okay, so it's time to animate for the first time on our character by making the character blink. So, let's open the file. It's in your Chapter 3 - rigged character folder. So, let's open character_rig_ 01 and here is our character. Let's a little bit of housekeeping from the previous area where we modeled the eye. We left the eye symbol outside so let's just drag that into the head parts folder and get that clean. Anytime, you create a head symbol, put it there. Body parts go in here. So let's double-click on the head symbol and let's zoom in, get up nice and close to the eye.

There is our eye level. So let's double- click on that, get inside, and you can see it's the same color now as the head so let's fix that. We'll go Preview Mode > View > Anti- Alias and that shades out the head layer so I can see better area of where we are working. Go in tighter again. So, the link to start looking at now is a frame rate 24 frames per second is the one that my project defaulted to. I think we are better off working at 30 because most computers are playing at 30 these days and that 24 is a bit of throwback to the old days of film.

So let's set out to 30 and I am going to make the eye blink about 9 frames long. Let me select these and hit F5. So, it's going to go from the open position what you see here to a closed position and back to an open position. So in frame 9 let's hit F6 and make two more keyframes and let's hit F6 on frame 5 to make two more keyframes and these will be change. These will be our close position. So, let's just work with the eyelash layer. If you find you have a lot of layers just use the first one you are going to be working one, whichever is the most important.

So, in this case that's the eyelashes upper. Let's pull these down until we find a position that looks good. And let's see how that tweens. And that's beautiful. So that's our upper eyelash level. Now, we can smooth out this line as we like. If you think the curve needs to be changed or lowered. Always watch out with the corners. If you think that the tweening is starting to go little funky you might have to add some more shape hints in there. That can happen.

So I am going to push this to make sure that we can really be confident that the shapes are solid. It's still looking good and let's put that into outline. We'll go into the back into the closed position. Now, we are going to match the skin layer. That's going to go beneath the lashes. That will cover the white of the eye. Let's put snap on and snap to the corners and we can put Snap off for this and then pull this down. Now, we can look at the underlying layer in full mode.

This little white sliver that you see here we can't allow that. So let's cover that up. Now, let's start the shape tweening backend, Insert Shape Tween and that's it. Again, if you find that the shapes are going wonky and strange then go Modify > Shape > Add Shape Hints and you'll get your little A, B and C circles that you can apply to different parts. I will warn you since we are starting to get into animation with shape hints, always before you begin to apply shape hints save your project file.

It is a little bit unstable and I have had shape hinting crash the program on me. If you make a form that the programs doesn't like it can crash very, very quickly and you will not be able to save your project. I will repeat this pretty much every time we do shape hinting on this course. It's a small inconvenience and it's not a big price to pay, but just be very thorough before you embark on any adding of shape hints. Always save your project. So, now we've got our down positions done, time to do the lower eyelid and lower eyelash.

Of course, we don't want to be seeing these things on the lower position because they'll make the character look a little bit sleepy, so they'll pop in on this frame here. So, what we will do is we will pose them on the first frame but when they are complete, we will move that to the second frame and it will go to white on the first and the final frame. So, when we trigger the blink they'll pop in on the second frame. Actually, I am noticing a little thing here where the skin is appearing beneath the eyelid, so you might want to play with that. Let's see if we can...

So, what I am going to do is change the line that describes the skin layer. Let me move it up a little bit, so we prevent that overlap from happening. It's such a fast action, I doubt anybody would have noticed it, but still it's good form to keep your eye open with things like that. Let's zoom out again, all right. Let's do the little lower eyelash layer. So, I'll do the closed position first. Actually, let's see I'll do the open position first. That's really a matter of personal preference I think.

So, I am holding down the Alt+Option key to create our line for the lower level. Snap on to snap those two points; snap off again for the little sliver shape. Now, let's do the closed shape. Snap on for this. I am going to drag this up so that's beneath. If we go into outline mode for this that will help us position this outline a little better. Let's copy this line here and now let's activate shape tweening. That's nice! Now, you can see the lower eyelash layer is working great so let's go in and match the color.

So, I am going to grab the color with the eyedropper from the upper layer, apply that to the lower layer, and now I am going to finish with the lower eyelid. Let's just copy. I am just selecting these and Alt+Option+dragging to copy. So, the real change here, we'll copy the skin color, eyedropper to that, copy that on to the lower eyelid.

Now let's look at the closed position. I am going to drag this down again so that we simply mask out the white of the eye and that's tweening beautifully. There is nothing spinning around or going crazy. Again, if there were shape hints, they are your friend, but in this case we don't need them. The last step now will be to get rid of the lines. We will have to zoom out. Hit the Erase tool. Let me select Erase Lines and go to each keyframe and just be thorough and make sure you are painting out the entire area. Next key.

The nice thing about this is it really makes sure that you are getting rid of everything. And still check if you made any mistakes. It just might come in but we are still looking good. Of course, the last step will be to -- don't forget we want to be seeing the lower eyelid on the white open frame. So I am going to hit 7 there to put in some blanks and then we are good. As you can see it's popping off there nicely. So, now we need to duplicate these frames on to the left eye,which is you remember from the previous class was a copy of the right one simple reversed.

So, let's copy these frames and let's paste them in here and right-clicking to do all these operations and then play the test, very nice. So, on the outer head symbol, the final, let's give to this empty DoD layer. Now I am going to add a few more blank frames down here, clicking at 5 and making sure that your eye symbol is set in the Properties panel to either Loop or Play Once, as both should be set to Loop or Play Once.

Now, we can play the scene. Both eyes look good. They are not at strange angles. There is one last thing I am going to do and this is a super fine tune. You might have noticed that it's very hard to se the closed position. So, it's not a bad idea to hold out for an extra frame. The quick and dirty way to do it and actually the easiest way to do it is to select this column of frames and hold down Alt+Option and drag and then you duplicated it and then I'll add a F5 to add a few blank frames in here.

Now, it will be much easier to see that. And we are done. Oops! One last change. It has to be duplicated on to the other eye, same procedure. Hit the F5 to add that frame and there we go. Then one last little thing. Make sure that the eye are slightly closed aren't looking weird and that's looking good. So that's it. So, now it's time to move on and we will work on the mouth.

Show transcript

This video is part of

Image for Flash Professional CS5: Character Animation
Flash Professional CS5: Character Animation

83 video lessons · 21493 viewers

Dermot O' Connor
Author

 
Expand all | Collapse all
  1. 3m 25s
    1. Welcome
      1m 9s
    2. Using the exercise files
      39s
    3. Prerequisites
      1m 37s
  2. 34m 58s
    1. Creating Flash-friendly character design
      4m 57s
    2. Animation rendering: SWF or AVI
      2m 24s
    3. Understanding line tool drawbacks when animating
      7m 7s
    4. Using uniform project scales in Flash
      3m 40s
    5. Finding helpful extensions for Flash
      2m 46s
    6. Using commands and keyboard shortcuts
      9m 53s
    7. Setting up your workspaces
      4m 11s
  3. 1h 35m
    1. Understanding character rigging
      2m 0s
    2. Exploring underlying structure in character rigging
      4m 27s
    3. Vectorizing the character body
      6m 22s
    4. Outlining colors in an animated character
      6m 15s
    5. Vectorizing the hands
      6m 43s
    6. Vectorizing the head
      4m 47s
    7. Outlining the head
      8m 20s
    8. Adding finishing touches with hair
      2m 11s
    9. Colorizing the character head
      7m 28s
    10. Colorizing the body
      5m 33s
    11. Applying gradients
      6m 18s
    12. Symbolizing and pivoting the body parts
      10m 47s
    13. Pivoting the head
      4m 42s
    14. Rigging the mouth
      10m 49s
    15. Rigging the eye
      8m 33s
  4. 52m 22s
    1. Tween types: Shape vs. motion
      5m 41s
    2. Combining motion and shape tweening
      4m 31s
    3. Animating an eye blink using shape tweening
      10m 2s
    4. Rigging a mouth in Flash for dialogue and expressions
      5m 30s
    5. Creating a D mouth
      12m 29s
    6. Creating an F mouth
      6m 58s
    7. Getting the polished look
      7m 11s
  5. 1h 2m
    1. Overview of the head turn
      2m 13s
    2. Preparing the rig
      8m 15s
    3. Posing the rig
      7m 17s
    4. Animating the head movement
      11m 5s
    5. Animating the body movement
      12m 9s
    6. Animating the head turn
      11m 28s
    7. Adding finesse to the head turn
      9m 34s
  6. 2h 44m
    1. Introducing the walk
      1m 5s
    2. Creating a profile view
      8m 30s
    3. Creating the head in profile
      10m 10s
    4. Creating the hand
      6m 57s
    5. Creating hand symbols
      8m 32s
    6. Reviewing the walk
      3m 6s
    7. Prepping the walk
      8m 33s
    8. Setting up the contact poses
      6m 45s
    9. Creating secondary contact poses
      9m 38s
    10. Finishing up the contact poses
      6m 48s
    11. Creating the passing poses
      9m 39s
    12. Finishing the passing pose
      5m 56s
    13. Animating the recoil position
      10m 9s
    14. Animating the high point of the walk
      9m 24s
    15. Adding in-betweens
      8m 31s
    16. Rigging the shoes
      8m 27s
    17. Animating the shoes
      11m 58s
    18. Animating the character's head movements
      8m 29s
    19. Fine-tuning the animation
      9m 0s
    20. Nesting the hand symbols
      8m 39s
    21. Repositioning the walk
      4m 11s
  7. 1h 32m
    1. Introducing the walk in place
      1m 30s
    2. Setting up contact poses
      10m 4s
    3. Creating the passing poses
      7m 14s
    4. Creating the recoil positions
      8m 11s
    5. Animating the head's high point
      4m 9s
    6. Tweening the legs
      5m 11s
    7. Tweening the arms
      10m 27s
    8. Setting the placement of the foot
      9m 9s
    9. Animating the shoes
      7m 52s
    10. Animating the hair
      6m 9s
    11. Creating secondary hand actions
      8m 48s
    12. Animating the torso
      6m 27s
    13. Repositioning the walk
      7m 17s
  8. 54m 9s
    1. Understanding dialogue
      49s
    2. Using the A-F system of six set mouth shapes
      4m 23s
    3. Animating dialogue using the mouth rig
      14m 30s
    4. Integrating the dialogue with the head turn
      5m 35s
    5. Animating the jaw
      6m 59s
    6. Creating an angry dialogue mouth
      7m 43s
    7. Finishing the angry dialogue mouth
      6m 38s
    8. Integrating acting techniques
      1m 51s
    9. Tips on facial expressions
      5m 41s
  9. 36s
    1. Goodbye
      36s

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 Flash Professional CS5: Character Animation.

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.

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.