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..
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.
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.
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.
+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..
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?
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 :)
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post