FLASH CLASSROOM TUTORIAL - MAKE A CHARACTER WITH INTERACTIVE EYES IN FLASH 8

MAKE A CHARACTER WITH INTERACTIVE EYES THAT FOLLOW THE MOUSE 360 DEGREES
In this tutorial you will learn how to create a character with with interactive eyes that move the full 360 degrees to follow the mouse. This is a great way to make living books and animation sequences interactive. LETS GET STARTED 1. Open a new file in Flash by selecting File > New. 2. In the timeline, you will see a layer that is named Layer 1. Double click on the name of this layer and type in character. 3. On this layer, draw the character you wish to use. Leave the eyes off at this stage. 4. Once you are happy with the character, lock the character layer by clicking on the white dot that is underneath the lock symbol on the character layer. 5. Add a layer by selecting the Add New Layer button that is located at the bottom left hand corner of the timeline. 6. Double click on the text Layer 2 and rename it eyes. Your timeline should look like the one shown here on the right. 7. On the eyes layer, draw the white of the eyes (as shown here). 8. Select the white of the eyes and press F8 to open the Convert to Symbol box. Enter eyes for the name of the symbol and select the Movie clip behaviour. 9. Select the eyes and then right click on the mouse to open up the context menu. From this menu, select the Edit in Place option. (shown at the right). If you look just above the timeline, you will see that you are now editing the eyes symbol.

The Flash Classroom www.flashclassroom.com Tutorial by Kristine KopelkePage 1 of 5

FLASH CLASSROOM TUTORIAL - MAKE A CHARACTER WITH INTERACTIVE EYES IN FLASH 8

10. In the timeline of the eyes symbol, you will see a layer that is named Layer 1. Double click on the name of this layer and enter the name eyeballs. 11. On the eyeballs layer draw the whites of the eyes. 12. Add a layer by selecting the Add New Layer button that is located at the bottom left hand corner of the timeline. 13. Double click on the text Layer 2 and rename it pupils. Your timeline should look like the one shown here on the right. 14. Draw the pupils for the eyes on the pupils layer. 15. Select the left pupil and convert it to a symbol by pressing F8. Name the pupil leftpupil and give it the Movie clip behaviour. 16. Select the right pupil and convert it to a symbol by pressing F8. Name the pupil rightpupil and give it the Movie clip behaviour. ADDING INSTANCE NAMES Even though we have converted our pupils to movieclip symbols, we need to give them instance names in order for the actionscript we write in the next step to be able to manipulate them. 17. Select the leftpupil movieclip symbol you created in the previous step. In the properties panel, give this symbol an instance name by typing in the text leftpupil in the instance name text field. 18. Repeat this process with the rightpupil movieclip symbol. To enable the actionscript to work, you will also need to give the eyes movieclip an instance name. To do this, follow the next two steps. 19. Just above the top left corner of the timeline, you will be able to see a link that says Scene 1. Select this link to return to the main stage. 20. Select the eyes movieclip symbol. In the properties panel, give this symbol an instance name by typing in the text eyes in the instance name text field.

The Flash Classroom www.flashclassroom.com Tutorial by Kristine KopelkePage 2 of 5

FLASH CLASSROOM TUTORIAL - MAKE A CHARACTER WITH INTERACTIVE EYES IN FLASH 8

ADDING THE ACTIONSCRIPT We are now going to add the actionscript that will make the pupils follow the movement of the mouse. 21. Select the eyes movieclip symbol and press F9 to open up the Actions Panel. 22. In this panel, type in the following script.

23. If you have followed all of the steps correctly, your character should now have eyes that will track your mouse movement. To check this, select Control > Test Movie.

The Flash Classroom www.flashclassroom.com Tutorial by Kristine KopelkePage 3 of 5

FLASH CLASSROOM TUTORIAL - MAKE A CHARACTER WITH INTERACTIVE EYES IN FLASH 8

PUBLISH & SHARE YOUR FILE If you are satisfied with your character and the eye movement, you can save and publish your work by following the steps below. 24. Save your work by selecting File > Save. 25. Turn your flash file into an activity that can be played on any computer by publishing it in different file formats. To do this select File > Publish Settings. The box shown below will appear.

26 . Tick the file formats you want and click on the Publish button. These files will be saved in the same location you saved your original file. If you want your file to be a standalone file that can be played on Windows or Macintosh machinesensure you check the Windows Projector (.exe) and Macintosh Projector (.exe) format options.

The Flash Classroom www.flashclassroom.com Tutorial by Kristine KopelkePage 4 of 5