Blinking Character

You have certainly heard about such things in your life: Simple, yet effective. This is the case with an eye blink, performed on an otherwise lifeless character.

While this kind of animation may not the most spectacular thing you have ever seen, it is still good to know how to create one—especially if you can learn to create it in an eyeblink! :-)

Note: In this tutorial we will focus on creating a very simple blink, consisting of only from 2 to 3 frames.

Let's start

i. Create a new Flash document, 600x400, set the fps to 20 or higher.

ii. Draw a character that has the eyes—otherwise, this tutorial will be difficult to complete :-)

Note: If you would like to learn to draw in Flash, please visit this page.

So, as mentioned, refrain from using your eyeless alien just for this tutorial! :-)

iii. While drawing, remember to convert (F9) all the elements that your eye is composed of (i.e. eyebrow, pupil, eyelids, eyelash, etc.) to a Movieclip.

The reason for this is that all animations within Movieclips are looped , and that's exactly what we want.

iv. Double click on the Movieclip that combines all the "eye components" to work inside it.

v. If all of your Movieclips ("eye components") are located on one layer, select the 45-th frame of this layer and press F6 to create a key frame there.

If, on the other hand, all of the Movieclips has its own layers, then you will, of course, need to create a key frame on each of them.

[ keyframe is that little black dot]

vi. Now we need to change the 45th frame. To receive the desired effect, just delete the pupil, eyeball and upper and lower eyelid. Leave the rest unchanged.

[ delete some of the "eye components" ]

vii. Let's now draw the eyelash. With your Line Tool (N), draw a black horizontal line and then curve it upward, like shown in the below picture.

[ use your Line Tool to draw the eyelash ]

vii. With the line selected, go to Edit>Shape>Convert Lines to Fills to convert it to a fill. Once the line is a fill, we are able to shape it. Let's make it more "eyelash-like".

viii. Use the Free Transform Tool (Q) to rotate the eyebrow 20 degrees to the left, and lower it slightly.

Hmmm, I believe something like this happens to your eyebrows when you're blinking, doesn't it?

Also, it's not a bad idea to play around with the eyelids. You will want to drag the lower eyelid a few pixels up and the upper eyelid—down.


ix. I think we could go ahead and create another keyframe. Select the 46th frame and press F6 to create a key frame there. The only changes that we will make on this keyframe is we're only going to lower the eyebrow slightly.


x. Next, select the 47th frame and press F5 two times to add two more frames. This will make our blink a little longer.

A few things we can fine-tune...

Do you like the frequency of our animation? If you have set your fps to 20 like I did, the blink is performed approximately every 2.5 seconds. That seems OK, although we could make the intervals a little longer. All you have to do is just add some more frames by selecting any frame between 1 and 45 and pressing F5. That's it.

OK! Looks like we are done now. I know: I did include too few images here or there. I'm sorry for that. Hope that you have managed to understand this tutorial well nevertheless. Oh, and that you have enjoyed it, too :-)

Below you can download the fla. source.

Cheers!