Advertisement
  1. Code
  2. Animation
Code

Quick Basix: Random Animated Blinking

by
Difficulty:BeginnerLength:ShortLanguages:

Even when you're animating on the timeline a touch of ActionScript can enhance what you're doing. In this Quick Tip we're going to use a single line of AS3 to add animated realism in the blink of an eye!


Step 1: Open Your Eyes

Grab the source files and open "basis.fla". On the stage you'll find the "head" movieclip, which comprises two layers containing the movieclips "face" and "eyes".

Of course, if you want to start from scratch, using your own graphics, you're welcome to do so..

Quick Basix: Random Animated Blinking

Step 2: The Eyes Have it

We're going to make the eyes blink periodically, so begin by double-clicking the "eyes" movieclip to enter its timeline.


Step 3: Blinkered View

Lengthen the timeline by adding a keyframe at frame 80 on the "eyes" layer. This is where we're going to place the eyes in their "blinked" state.

Quick Basix: Random Animated Blinking

Delete the open eyes from the stage and turn your attention to the library. In there, you'll find "eyesClosed" which you can position on stage where the "eyesOpen" movieclip previously was.

With your eyesClosed selected, hit F5 to add a few more frames. Add as many as you want; doing so will increase the time your character's eyes spend closed during any given blink. 3 frames is fine in our case.

Test your movie (Command/Ctrl + Enter) to get an idea of the blinking effect you've created.

The playhead moves along the timeline causing periodical blinking. Perfect! Right? Well not exactly. The uniform blinking would suggest that our character is either a robot or missing his frontal lobe.


Step 4: Randomeyes

Let's improve the effect by randomising the blinking.

Add a second layer to the "eyes" movieclip, label it "actions" and lock it. Select the first frame and enter the following snippet in the actions panel (Window > Actions):


Step 5: Eye Examination

What does this snippet actually do? Well, the gotoAndPlay(); action sends the playhead along the current timeline, to whichever frame number we define within the braces. The contents within our braces will give us our frame number.

The Math.random() method will return a number between 0 and (though not including) 1. This is multiplied by totalFrames, a property of our movieclip - the amount of frames within it (in our case 83). uint() neatens up the outcome of our random number * totalFrames, by rounding down and giving us an integer.

The lowest integer we can expect is 0, since uint(0*83) is 0.

The highest integer we can hope for is 82, since uint(0.9999999999*83) is 82.

Therefore, we +1 to finish things off, giving us a destination frame somewhere between 1 and 83.

Once the playhead reaches the end of our timeline, it returns to frame 1 and is once again sent to a random frame.

Check the movie again!

Our character is still blinking, but now at irregular intervals, which looks far less lobotomised.

The effect becomes even clearer with two instances of our character on stage. In the example below, we have two different characters, but both make use of exactly the same "eyes" movieclip:

I'm not saying these two look like they've got it totally together, but you get the idea..


Improved Eyesight

This is a really simple end result, why not see if you can improve it?

  • Have a play with the timing; alter the framerate and number of frames within your blinking movie.
  • Why not try and alter the snippet to prevent the playhead from jumping to within the blinking action itself?
  • Perhaps you could even prevent the animation from blinking too rapidly in succession?

Conclusion

You've finished! This is a straight-forward and commonly used technique, but moving the playhead to random frames can be applied in thousands of situations. I hope you find use for it :)

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.