ActionScript 3 - Change MovieClip Color

Flash Course

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.

<p>Web development courses: <em>CoursesWeb.net</em></p>

h3 {
  padding: 2px 0.2em;
}

// gets first Div with class="cls", and shows its content
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);

if(isset($_POST["field"])) {
  echo $_POST["field"];
}