Changing the color of Objects

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.

Place the brush over the colors and then click on the clown to color in.

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 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.

One button colors two objects

Close    To Top
  • Prev Article-Flash:
  • Next Article-Flash:
  • Now: Tutorial for Web and Software Design > Flash > Basic > Flash Content
    Photoshop Tutorial
     

    Special Effect

      3D Effect
      Photoshop Articles
    Programming Tutorial
     

    C/C++ Tutorial

      Visual Basic
      C# Tutorial
    Database Tutorial
     

    MySQL Tutorial

      MS SQL Tutorial
      Oracle Tutorial
    Geek Tutorial
     

    Blogging Tutorial

      RSS Tutorial
      Podcasting Tutorial
    Graphic Design Tutorial
      Coreldraw Tutorial
      Illustrator Tutorial
      3D Tutorials
    Webmaster Articles
     

    Domain Service

      Web Hosting
      Site Promotion
    Java Tutorial/ Articles
     

    Java Servlets

      JavaEE Tutorial
     

    JavaBeans Tutorial

    XML Tutorial/ Articles
     

    XML Style

      AJAX Tutorial
      XML Mobile
    Flash Tutorial/ Articles
     

    Flash Video

      Action Script
      Flash Articles
    OS Tutorial/ Articles
      Linux Tutorial
      Symbian Tutorial
      MacOS Tutorial
    Personal Tech
      Hardware Tutorial
      Software Tutorial
      Online Auction