Blinking Character

If you've just drawn a funny character in Flash Adobe and feel like animating it, why not make it blink for a starter?

Well, granted, this kind of animation may not that spectacular, but it is nevertheless good to know how to create one - especially if you can learn to create it in an eyeblink!


Note that 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. Let it be 600*400 px and set the fps to 20 or higher if you like.


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

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

[ don't use your eyeless alien just for this tutorial!]

iii. While drawing, remember to convert all the elements that your eye is composed of (ie. 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 you've got everything on one layer, then select the 45-th frame of this layer and press F8 to create a keyframe there.
If you've got more than one layer, then you will, of course, need to create a keyframe on each of them.

[ keyframe is that little black dot]

vi. Now we need to change the 45-th 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. Let's make it more eyelash-like.

[ why not shape the line? ]

viii. Use the Free Transform Tool (Q) to rotate the eyebrow 20 degrees to the left, and lower it slightly. I think 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 46-th frame and press F8 to create a keyframe 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 47-frame and press F5 two times to add two more frames. This will make our blink a little longer.


xi. Do you like the frequency of our animation? If you have set your fps to 20 like I did, the blink is performed approx. every 2.5 seconds (47/20 = 2,3 seconds). That seems OK, but you can make the intervals between the blink and "not blink" 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.

Ok, we're done with creating a simple blink.

For your better understanding, I include the FLA source:

I hope you enjoyed this tutorial. If you feel like learning some more, here are other interesting tutorials.

Cheers!