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.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which attribute specifies the URL address where to send the form-data?
method action name
<form action="script.php" method="post"> ... </form>
Which CSS property can be used to break lines in the middle of words?
word-wrap line-height font-size
#id {
  width: 100px;
  word-wrap: break-word;
}
Which function sorts the elements of an array into alphabetical order, based on the string values?
pop() sort() shift()
var tutorials = ["php", "html", "css", "flash"];
tutorials.sort();
alert(tutorials[0]);          // css
Indicate the function that returns the value of the last element into an array.
current() next() end()
$code = array(10=>"Perl", 20=>"PHP", 21=>"Python", 30=>"JavaScript");
$last = end($code);
echo $last;      // JavaScript
ActionScript 3 - Change MovieClip Color

Last accessed pages

  1. Get the value of the selected /checked checkboxes in a form (918)
  2. TV-Screen shape with CSS (74)
  3. Doodle God 2 (9)
  4. PDO_MySQLi class (40)
  5. Strategy Games (44)

Top accessed pages

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