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.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which attribute specifies the HTTP method (GET, POST) used to submit the form-data?
action method value
<form action="script.php" method="post"> ... </form>
Which CSS property allows to add shadow to boxes?
background-image box-shadow border-radius
#id {
  background-color: #bbfeda;
  box-shadow: 11px 11px 5px #7878da;
}
Which function removes the first element from an array?
pop() push() shift()
var fruits = ["apple", "apricot", "banana"];
fruits.shift();
alert(fruits.length);           // 2
Indicate the function that can be used to check if a PHP extension is instaled.
function() filetype() extension_loaded()
if(extension_loaded("PDO") === true) echo "PDO is available."
ActionScript 3 - Change MovieClip Color

Last accessed pages

  1. Awareness - by Anthony de Mello (6383)
  2. PHP-MySQL free course, online tutorials PHP MySQL code (69612)
  3. Check if table exists in database (10159)
  4. Get Mime Type of file or string content in PHP (6280)
  5. Area and Perimeter Calculator for 2D shapes (10190)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (129)
  2. PHP-MySQL free course, online tutorials PHP MySQL code (15)
  3. CSS cursor property - Custom Cursors (13)
  4. PHP Unzipper - Extract Zip, Rar Archives (13)
  5. The Mastery of Love (11)