Controlling the Color of a Flash Movie Clip with Sliders

This tutorial presents a full application that creates sliders for the red, green, blue, and alpha values that control a movie clip's color:

1. Create a new Flash document and save it.

2. On the main timeline, rename the default layer as movieClips and create a new layer named actions.

3. Create a movie clip symbol and draw a circle in it. The circle should be approximately 120 x 120 pixels.

4. Return to the main timeline and create an instance of the circle movie clip on the Stage on the movieClips layer. Place the instance on the left side of the Stage. Name the instance circle_mc using the Property inspector.

5. Open the Components panel (Window Components) and drag four instances of the ScrollBar component onto the Stage on the movieClips layer. Name these instances red_sb, green_sb, blue_sb, and alpha_sb. Line them up horizontally on the right side of the Stage.

6. Select the keyframe of the actions layer and open the Actions panel.

7. Add the following code to the Actions panel and test the movie (Control Test Movie). The scrollbars are automatically colorized to indicate the color components they control. Moving the thumb sliders on the scrollbars adjusts the circle's color.

// Define a function that will initialize the scrollbar instances as sliders to
   // control the color values.
   function initSliders (  ) {

 // First, set the scroll properties of each of the scrollbars. For the red,
   // green, and blue scrollbars, the values should range from 0 to 255. Use a
   // pageSize of 120 for the color sliders to create a proportional thumb bar. 
   // The alpha range is from 0 to 100, and so the pageSize should be 47 to create
   // a thumb bar that is proportional with the other sliders.
   red_sb.setScrollProperties  (120, 0, 255);
   green_sb.setScrollProperties(120, 0, 255);
   blue_sb.setScrollProperties (120, 0, 255);
   alpha_sb.setScrollProperties(47,  0, 100);

 // Colorize the sliders themselves. Make the red_sb slider red and, similarly,
   // make green_sb green and blue_sb blue. Make the alpha_sb slider white.
   red_sb.setStyleProperty  ("face", 0xFF0000);
   green_sb.setStyleProperty("face", 0x00FF00);
   blue_sb.setStyleProperty ("face", 0x0000FF);
   alpha_sb.setStyleProperty("face", 0xFFFFFF);

 // Set the initial position for the color sliders. alpha_sb remains at 100%.
   red_sb.setScrollPosition  (127);
   green_sb.setScrollPosition(127);
   blue_sb.setScrollPosition (127);
   }

function initColor (  ) {
   // Store a new Color object in a property of circle_mc.
   my_color = new Color(circle_mc);
   circle_mc.col = my_color;

 // Store references to the four scrollbars as properties of circle_mc.
   circle_mc.red   = red_sb;
   circle_mc.green = green_sb;
   circle_mc.blue  = blue_sb;
   circle_mc.alpha = alpha_sb;
   }

// Initialize the sliders and the Color object.
   initSliders(  );
   initColor(  );

// Update the color of the circle_mc movie clip based on the slider positions.
   circle_mc.onEnterFrame = function (  ) {
   // Retrieve the current position of the color and alpha sliders.
   var r = 255 - this.red.getScrollPosition(  );
   var g = 255 - this.green.getScrollPosition(  );
   var b = 255 - this.blue.getScrollPosition(  );
   var a = 100 - this.alpha.getScrollPosition(  );

 // Set up the transformation object properties to set circle_mc's color.
   transformObj = new Object(  );
   transformObj.ra = 0;
   transformObj.rb = r;
   transformObj.ga = 0;
   transformObj.gb = g;
   transformObj.ba = 0;
   transformObj.bb = b;
   transformObj.aa = a;
   transformObj.ab = 0;
   this.col.setTransform(transformObj);
   }