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 =;
      // 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.

Daily Test with Code Example

Which attribute is used in <a> tag for the address of the link?
src href rel
<a href="" title=""></a>
Which CSS property sets the type of the text font?
font-family text-decoration font-size
h2 {
What instruction selects all the <div> tags with class="cls"?
querySelector("div.cls") getElementsByTagName("div") querySelectorAll("div.cls")
var elm_list = document.querySelectorAll("div.cls");
var nr_elms = elm_list.length;       // number of selected items
Indicate the function that can be used to get the sum of values in an array.
array_sum() array_diff() array_shift()
$arr = array(1, 2, 3, 4);
$arr_sum = array_sum($arr);
echo $arr_sum;       // 10
ActionScript 3 - Change MovieClip Color

Last accessed pages

  1. Keep data in form fields after submitting the form (1893)
  2. innerHTML in PHP (1167)
  3. Add data from form in text file in JSON format (2389)
  4. innerHTML and outerHTML to Get and Replace HTML content (2397)
  5. Using file_put_contents, file_get_contents, readfile and file() (1353)

Top accessed pages

  1. PHP-MySQL free course, online tutorials PHP MySQL code (11444)
  2. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (11056)
  3. Get Attribute (ID, Class, Name, Title, Src) with jQuery (10664)
  4. PHP Chat Script (9823)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (9471)