Recipe 3.9 Controlling a Movie Clip's Color with Sliders
This recipe presents a full
application that creates sliders for the
red, green, blue, and alpha values that control a movie
clip's color:
Create a new Flash document and save it. On the main timeline, rename the default layer as
movieClips and create a new layer named
actions. Create a movie clip symbol and draw a circle in it. The circle should
be approximately 120 x 120 pixels. 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. 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. Select the keyframe of the actions layer and
open the Actions panel. 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);
}
|