ActionScript 3 - Change MovieClip Color

In this Flash - AS3 tutorial you will learn how to change the color of a movie clip in Actionscript 3.0 using the ColorTransform class.
The ColorTransform class lets you set the color values in a display object.
First, you must use the new ColorTransform() constructor to create a ColorTransform object, then use the color property of this object to set the color, and then apply this object to: the_MovieClip.transform.colorTransform .
Here's the code:

// new ColorTransform object
var obj_color:ColorTransform = new ColorTransform();

// setting the new color we want (in this case, blue)
obj_color.color = 0x0000ff;

// applying the transform to our movieclip (this will affect the whole object including strokes)
the_MovieClip.transform.colorTransform = obj_color;

Let's see a practical example. Four buttons will be used to change the color of a square converted into MovieClip; each button with its color.

Here's how to do this Flash presentation:
  1. Open a new Flash AS3 file. Select the Rectangle Tool and drag a square on the stage.
  2. Now we convert the square into a Movie Clip Symbol.
    Make sure the square is selected, click Modify - Convert to Symbol (or F8), choose the Movie Clip Type option, and click OK.
  3. With the square selected, open the "Properties panel", and give it the instance name: sqr (into the text field with <Instance Name>).
  4. Select the Oval Tool and draw a circle on the stage, under the square.
  5. Now we convert the circle into a Button.
    Make sure the circle is selected, click Modify - Convert to Symbol (or F8), choose the Button Type option (you can also give it a name, for example "Buton"), and click OK.
  6. With this circle selected, open "Properties panel", and give it the instance name: b_red (this button wiill be used to change the color of the square to red).
  7. Now we add another three circle-button instances on the stage, for other colors: green, yellow, and blue.
    Open the "Library Panel", click on the Button Symbol and drag it on the stage, this is a new instance of that button. Click and drag another two instances.
    - Place the square and the circles (buttons) like in the presentation above.
  8. Now we give a distinct instance name for each circle-button on the stage.
    Select the first circle (with "Selection tool"), open the "Properties panel", and give it the instance name: b_green (this button wiill be used to change the color of the square to green).
    Select the second circle, and give it the instance name: b_yellow (in the "Properties panel").
    Select the third circle and give it the instance name: b_blue .
    - We let the buttons without adding a color for each one on the stage, becouse we'll create the colors with ActionScript.
  9. Now we'll write the ActionScript code that adds a color to each button, and will change the color of the square when a button is clicked (for explanations, see the comments in code).
    Click on Insert -> Timeline -> Layer to create a new layer in Timeline (Layer 2). Double-click on its name in the Timeline and change it to "Actions".
    - It's a good practice to have a separate Layer, with a specific name, for ActionScript code.
    Right-click on the first Frame in the Actions Layer and choose Actions. Flash will open a panel for ActionScript code.
    Copy the code below and add it in that panel:
    // an Array with the instances of the buttons
    var btts:Array = [b_red, b_green, b_yellow, b_blue];
    
    // sets an object with colors for each button
    var set_colors:Object = {'b_red':0xff0000, 'b_green':0x00ff00, 'b_yellow':0xffff00, 'b_blue':0x0000ff};
    
    // sets a ColorTransform object
    var obj_color:ColorTransform = new ColorTransform();
    
    // traverse the "btts" array with button instances
    for(var i:int=0; i<btts.length; i++) {
      // set the color to each button
      obj_color.color = set_colors[btts[i].name];
      btts[i].transform.colorTransform = obj_color;
    
      // register CLICK event for each button
      btts[i].addEventListener(MouseEvent.CLICK, changeColor);
    }
    
    // function called by CLICK events
    function changeColor(evt:Event):void
    {
      // get the instance name of the clicked button
      var b_name = evt.target.name;
    
      // set and change the square (sqr) color
      obj_color.color = set_colors[b_name];
      sqr.transform.colorTransform = obj_color;
    }
    
    - If you want to have less or more buttons, just modify the Array "btts" and the object variable "set_colors", by reducing or adding new instances and colors, acording with the buttons on the stage.
  10. Save this Flash document and press "Ctrl+Enter to see the presentation."

- To download the FLA file with the example presented in this tutorial, click: Tutorial Change MovieClip Color.