Change eye color using the AS!

7.1.2010, 12:31
Submited in: Flash | Total Views: 11860

Using this thoroughly explained, detailed flash lesson, I will explain to you how to change eye color using the Action Script code. Using this lesson, you will also learn how to convert any object into a movie clip symbol, how to create instance name and much more!


Click on black or purple button to change the eye color!

Step 1

First, save the image below that we will use for this lesson.

Step 2

Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the dimensions of your document as the dimensions of image(400x321 px). Select any color as background color.

Step 3

Call the current layer image. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!

Step 4

Choose now File > Import > Import to stage (Ctrl+R) and import the image that you just saved in step 1 into a flash stage. While the photo is still selected, go to the Align Panel (Ctrl+K) and do the following:

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.

Step 5

Create a new layer above the layer image and name it eyes.

Step 6

Select eyes layer and take the Oval Tool (O). In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color choose any color and draw a circle shapes over the eyes. See the picture below!

Step 7

While the circle shapes is still selected, hit F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.

Step 8

While the new made Movie Clip is still selected, go to the Properties Panel below the stage. On the left side, You will find the Instance name input field there. Call this Movie Clip "CircleShape_mc". See the picture below!

Step 9

Create a new layer above the layer eyes and name it button 1.

Step 10

After that, select the button 1 layer and create a black button like it is shown on the picture below!

Step 11

Select the Selection Tool (V) and click once on the button to select it. After that, go to the AS panel (F9) and enter this code inside the actions panel:

on (release)
colorchange = new Color("/CircleShape_mc");

We're done!

Apply this process also for every other color.

Please enjoy!

Download example

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category

Most popular tutorials