Free Flash Tutorials	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash Tutorial - Changing the color of Objects

Free Flash Tutorial

The aim of the tutorial is to learn how to change the color of something when somebody clicks a button. To see an imaginative and educational way of using this, look at the sample file: Paint Canada or click here to see how to make a coloring in book.

Example: Download the Flash file  Beg 011a

Step One: Creating an Object

You need something to change color. I just typed 'color me' but you could have any drawing or imported clip art.

1. Place your object on the main stage (if it isn't already).
2. Highlight your object.
3. Convert the object to a symbol: Go to Insert > Convert to Symbol.
4. Type the name: color MC (or anything appropriate).
5. Select Movie Clip as the behavior.
6. Click OK.

Step Two: Name your new Instance

1. Open the Property panel by going to: Window > Property.
2. With the Instance of the new symbol still highlighted give your object an Instance Name by typing in the Property panel: colorMe

Step Three: Place buttons on the stage

1. You need a number of buttons, at least one. Create these buttons or drag them out of: Window > Common Libraries > Buttons. I used some of the Ovals from the Common Library (Learn how to create buttons).
2. Place your buttons on the main stage.

Step Four: Assigning Actions to your Buttons

1. Select one of the buttons.
2. Press F9 to open the Actions panel.
3. Select Normal Mode from the View Options button .
4. Click on the Plus button .
5. Select: Actions > Variables > set variable.
6. In the Variable option above the ActionScript type in the name: Picasso
   Note: You could type anything, it is simply a way to get the computer to remember something. When the PC next comes to the word Picasso it already knows what it means. It is the same as algebra X = 1+2. Except that I use Picasso instead of x. This is normal in ActionScript because X and Y are used as coordinates.
7. For the value type in: new Color(_root.colorMe)
8. Select Expression at the end of the Value box (the lower of the two Expression boxes).
   
   
   Your ActionScript should look similar to this.
   
   Note: The brackets around the words (_root.colorMe) are the roundish parentheses() not curly braces {}.
   
   
9. Click on the Plus button .
10. Select: Objects > Movie > Color > Methods > setRGB.
11. In the options above the ActionScript, select Object and type in the name of your variable: Picasso
12. In the Parameters box type in 0x (zero x) then the Red Green Blue, hexadecimal number, for the color you want. I typed in 0xff9966
    
    Note: You must type 0x (zero x). Do not type Ox, as in the animal, as you will be an Ox and your code will not work!
    
    Note: ff9966 is the hexadecimal code for a golden brown color. ff represents the color value of the red, 99 the green and 66 the blue. If you need to see a hexadecimal color chart click here.
    
    
    
    Your code should now look similar to this.

Step Five: Finish off the other Buttons

The code for the other buttons is identical except for the RGB color value.

You are now ready to save and test your movie: Control > Test Movie

For an intermediate tutorial on color change: click here

Below is another example of using this change color technique.

Example: Download the Flash file  Beg 011b

One button colors two objects.