Create animated eyes that blink, wink and following the mouse pointer using Flash...
Very cool effect that could be used for an intro or as an enter button for any web site...
Some simple Photoshop techniques for giving your text and little oooomph!..
An extension to the Iris Porthole effect that incorporates 3D animation, to create a reall..
In this crazy new world of web 2.0 some designs call for some bright, shiny gradient butto..
Learn how to use the Photoshop lasso tool to great effect allowin..
This tutorial will teach you some of te basic techniques for crea..
This is a very good tutorial for beginners who want to learn how ..
Informative but scary video about the history of Google, where it..
Particle Illusion is one of those cool particle effect programs t..
Learn how to create realistic animated eyes that follow the mouse, blink and even wink in flash, great for a splash page or intro
Please Scroll Down after changing page
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:
Now create two more keyframes on the top layer with the following code:
Frame (2) The _x)/12) numbers represent the amount of drag freedom, the (-12); numbers are the starting positions.
Also make sure you extend the other layers to cover the 3 frames, simply right click and choose the "Insert frame" option
Page 1 of 3
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".
I have explained breifly how the numbers at the end of this code determine firstly the degree of freedom and secondly the starting position of the elements. For the reflection I obviouslt wanted it to be slighyl offset from the eyes themsleves therefore creating the illusion of a reflection. The numbers above worked for me but feel free to have a play until you get the desired effect.
Page 2 of 3
Adding Blinking/Winking effects
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"
Now you should be viewing the timeline for this movieclip, create two layers above the first and import your new images into your flash movie, one on each of the layers using the File -> Import option. (I have my "Blink" image on Layer 2 and my "Wink" image on Layer 3
Drag the frame containing your blink image along to frame number 40, then right click and select "Create Motion Tween", then create two more keyframes 5 frames apart. Now click on both the first and last frames in this 15 frame tween and set thier Alpha Level to 0% in the "Properties" panel.
In order to greate the winking effect simple perform this same step for the layer above labeled "Wink". I have decided to start this one on frame number 100 (so if my movie was playing at 20fps, the eye would wink every 5 seconds)
Now that we have set the images in "eye_bg" to change, we must also remember that in order for the "moving_eyes" movieclip to match these changes we must also add some chanegs the masking layer.
(If you test your movie now you will see the problem, the eyes are set in the mask and are always visible even when the eyes blink)
For this you will need to return to the "moving_eyes" movie clip timeline.
Once here you should remember from earlier stages that the eyes themselves are in a mask, this mask keeps them within the chosen eye socket area, and at the moment this mask never changes.
First click on the "padlock" icon on the layer mask this will display the mask in the scene below. Then right click on the mask below and choose "Create Symbol", then choose movie clip and give it the title "eye_mask"
(Important: Also give this the same "eye_mask" instance name in the Windows -> Properties panel below). Now double click on this new movie clip to edit its timeline.
Right click on the first frame and choose the "Actions" option then put in the folllwing action script:
This will keep the mask static on the first frame until we tell it to do otherwise.
Next create a new layer, right click on frame 2 of this layer and insert a keyframe, then give this frame the title "blink" in the Windows -> Properties panel
Now insert a new key frame on frame 6 (this because the blink animation we setup in the"eye_bg" movieclip was 5 frames long) Then right click on frame 6 and give it the following action script.
Next repeat these steps and create a new layer above the previous, this time with the frame title of "Wink"
This time however set the first frame on 10 and the last keyframe on 30 (this once again relates to the "eye_bg" timeline for the 30 frame "Wink" section from stage 7
next create one more layer underneigh the wink layer.
Now right click and copy the first frame from layer 1 and paste it on to this layer. (Important: make sure remove the actions after pasting as you only want to copy the mask shapes not the actions).
Now select the shapes in the scene and use the (CTRL + B) key to break them appart, then delete the left shape (see the image above).
You will now need to get the correct shape of the visible area from the wink animation,
For this I quickly jumped back to the "eye_bg" movie clip timeline and drew around the shape using a brush tool.
I then used right click and cut this shape into the clipboard ready to be pasted into the "eye_mask" movieclip..
I then returned to the "eye_mask" and pasted it into the newley created layer at frame 15.
Now click and drag from frame 15 to frame 10 this will then be highlighted in black. Then find the "Tween" dropdown in the Windows -> Properties panel and select "Shape" from the options.
You will now need to create a few more keyframes to complete the "Wink" mask animation I have created them at 10, 15, 25, 30 to match the 20 frame sequence in the "eye_bg" movie clip
Before you continue test that your new shape tween morphs into the new shape by dragging your mouse pointer over the frames.
Also ensure that your actions match the ones shown in the above image.
Now return to the "eye_bg" movieclip timeline and create a new layer, I have labeled mine "Actions"
Now create a new keyframe level with the first frame of your blink animation (for me this was frame 40), then right click "Actions" and add the following action script:
Repeat the previous stage for the "Wink" animation (for me this was on frame 100)
Use the same actionscript code however change the "blink" instance to "wink"
Now Save and test your movie and your moving eyes should now match your blink and wink images.
Page 3 of 3
Send to a friend