Realistic Animated Eyes in Adobe Flash

The first step is to choose your eye images, I found this selection on a FREE stock photo website which was perfect for what I needed. (Alternatively you could also use a picture of a friends face ha ha)

Open you're chosen image in Adobe Photoshop and resize it using the Image -> Image Size option to your required width and height, for mine it was width 670 x height 200.

Then use the Polygon Select Tool to select the inside area of the eye then use the delete brush to carefully remove the iris/pupil area of the eye. Then save this file with the File -> Save for Web option then select JPG from the right dropdown with a quality setting of about 85 and save the file as eyes.jpg

Next open up your chosen eye image (to find my version I did various searches on google and some FREE stock photo sites, but you can download my versions in the downloads section) I decided to resize and save my iris as width 80 x height 80 pixels, I saved this image as a PNG with a transparent background, but you can save as a JPG if you wish.

Next load up Adobe Flash and Import your new images using the File -> Import option. Before importing the iris image be sure to create a new layer above the first and left click the first frame, this will import the second image into the new layer above the eye layer. Position the iris image to the right hand side over the inside eye area.

Left click on the iris image press CTRL + C to copy, then CTRL + V to paste . Now move this new copy over to the left hand side. Next make sure you have both of the images selected you can hold down the SHIFT key for this, then right click on either and select "Create Symbol" give them a name e.g. "moving_eyes" set them as a "Movie Clip" then click "OK"

Once you have created this symbol ensure that it is selected, then go down to the "Properties" panel and give this clip a global instance name (naming movies basically gives them the ability to be used in the world of action-script as in enables you to control or find the path of a movie from code, I will explain more as we go on) if you do not see a properties panel you can open it by going to the Window -> Properties menu.

Now double click on your new "moving_eyes" movieclip, this will take you into the movie clip timeline. Now you will need to perform the same steps again, i.e. click both of the iris images and create them as a symbol this time name them "eyes" and once created give them an instance name of "eyes" in the properties panel. This creates a main movie "moving_eyes" with another movie inside called "eyes"

Now you will need to create a mask for your new "eyes" movie, so create another layer above the first then use a standard brush tool to draw out the inside eye area (this will be the area where the eyes are visible) after you've done this for both the left and right eye right click on the layer name and select "Mask".

Now to complete the mask, you will need to click on the layer below that contains the "eyes" movie clip, then hold down the left mouse button and drag it up jus underneight the masked layer. The layer underneith should then change to a green icon, and you should end up with something simular to the image above.

Create a new layer, then right click on the first frame of this layer and click "Actions" then add the following code:

Frame (1)

Now create two more keyframes on the top layer with the following code:

Frame (2)setProperty("_level0.moving_eyes.eyes", _x, ((drag._x)/12)-12); setProperty("_level0.moving_eyes.eyes", _y, ((drag._y)/12)-2); The _x)/12) numbers represent the amount of drag freedom, the (-12); numbers are the starting positions.

Frame (3)

Also make sure you extend the other layers to cover the 3 frames, simply right click and choose the "Insert frame" option

Providing you followed all the steps correctly, you can now test your movie using the Control -> Test Movie option.

Now is also a good time to save all of your hard work.

The next stages of this tutorial are optional effects.

In order to create the eye reflection effect you will need to be using flash 8 or above, this version includes additional effects allowing us to blur the reflection effect making it seem more realistic, you can try and do this in other versions of flash but without these effects it will not look as good.

First you simply need to make sure that you are on the "moving_eyes" movie clip timeline. Now create a new layer above the one containing the "eyes" then click the eye icon on the mask to hide it

Now Create a circle using the circle tool, once you have made your circle you will need to double click on the outer edge. This will select the line edge section of any shape. Next you will need to resize this line edge using the resize tool on the left tool panel.

Resize it to about 50% of orignal size then center in the middle of the circle shape (you can use the arrow keys on the keyboard for this).

Once centered double click on the center of the circle this should then select both the inside shape and the edge line. Now hit the "Delete" key and you should be left with a thin donut shape

Place this donut over the left iris image, then copy it and place the copy over the right iris image (using the same methods in previous steps). Next ensure that you have selected both of the donut shapes then right click and choose the "Create Symbol" option, then name this new symbol "reflection".

(Important, also give this new symbol an instance name in the Windows -> Properties panel).

Now that this has been created as a symbol, Flash 8 allows you to add effects. You will need to open the Windows -> Filters panel, this should display towards the bottom of the screen. Ensure that you have the new reflection movie selected and click the plus symbol for "Add Filter" on the filters panel, then choose Blur. As you can see this is the perfect effect for what we want to accomplish, in the end I set my blur x and y values to 12.

Now that your reflection movie has the right look you will need to give it an instance name of "reflection" in the Windows -> Properties panel.

Now you will need to re-visit the action you created on the first frame of your "eye_holder" movieclip timeline. Copy the actions that are already there and paste them below, for these two new lines of code edit the instance names changing the word "eye" to "reflection".

To create the blinking, winking effect you will need to return to Adobe Photoshop and prepare your other images. In order to match your new images with the eye position, I opened the original image then created another Photoshop layer and used the opacity settting to help me see where the eye sockets where in relation to the original, I then gradually sized and positioned them.

You should now have two additional images both with the same width and height settings as the original, for mine this was width 670 x height 200 pixels. Save these as JPG files using the "Save For Web" option as before.

Next return to your flash movie, and make sure that you are viewing the main timeline (you may need to click the "Scene 1" button towards the top left of the timeline area) Once there select your original background image, right click "Create Symbol" and give it the name "eye_bg"