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 HTML element can be used to embed a SWF flash content?
<object> <div> <script>
<object type="application/x-shockwave-flash" data="file.swf" width="500" height="250">
 <param name="src" value="file.swf" />
 Your browser not support SWF.
</object>
Which CSS pseudo-class adds a style to an input form field that has keyboard input focus?
:active :focus :hover
input:focus {
  background-color: #88fe88;
}
Click on the instruction which converts a JSON string into a JavaScript object.
JSON.stringify(javascript_object) object.toString() JSON.parse(json_string)
var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}';
var obj = JSON.parse(jsnstr);
alert(obj.url);
Indicate the PHP function which can be used to create or write a file on server.
fopen() file_put_contents() file_get_contents()
if (file_put_contents("file.txt", "content")) echo "The file was created";
else echo "The file can not be created";
ActionScript 3 - Change MovieClip Color

Last accessed pages

  1. $_GET, $_POST and $_REQUEST Variables (29234)
  2. Node.js Move and Copy file (18617)
  3. JavaScript code and PHP (29078)
  4. OOP - Classes and objects - Create Class (1975)
  5. Simple PHP Upload Script (6807)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (281)
  2. Register and show online users and visitors (176)
  3. Read Excel file data in PHP - PhpExcelReader (157)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (155)
  5. JavaScript Course - Free lessons (128)