Skip to Page Content

Chris Cassell Dot Net

• Home
• Log
• Portfolio
• Projects
• Classes
• Contact

Projects

Color Sliders in Flash

Tutorial

The structure of the movie is pretty simple. There's a movie clip with 3 sliders: "red," "green," and "blue;" a movie clip containing the colorSlider function, a dynamic text field showing the hex code, and an input field and button for setting a color. The sliders are made up of a line, and a movie clip instantiated as "dragger," which has a button on it with a startDrag action constrained to left: 0 and right: 255.

The colorSlider function takes 4 arguments: "which," the movie clip whose color changes; "redInst," the instance name of the red slider; "greenInst," the instance name of the green slider; and "blueInst," the instance name of the blue slider. The function simply grabs the x position of the dragger clip in each slider, converts it to a hexidecimal string, padding with a 0 if it's less than 16. It then uses parseInt() to convert to a decimal number from a hexidecimal number created by concatenating "0x" with the red, green and blue hex values. The color change is accomplished with the Color() object. In the first line of the function, we create a new color object called "newColor," and grab the which argument, which contains the path to the movie clip whose color is changing. The color change is accomplished via the setRGB method with our integer parsed from our hex code.

The last line of the function simply sets the value for the text field.

function colorSlider(which, redInst, greenInst, blueInst) {
  newColor = new Color(which);
  newRed = eval(redInst).dragger._x;
  if (newRed<16) {
    newRed = "0"+newRed.toString(16);
  } else {
    newRed = newRed.toString(16);
  }
  newGreen = eval(greenInst).dragger._x;
  if (newGreen<16) {
    newGreen = "0"+newGreen.toString(16);
  } else {
    newGreen = newGreen.toString(16);
  }
  newBlue = eval(blueInst).dragger._x;
  if (newBlue<16) {
    newBlue = "0"+newBlue.toString(16);
  } else {
    newBlue = newBlue.toString(16);
  }
  newColor.setRGB(parseInt("0x" + newRed + newGreen + newBlue));
  _parent.color = "#" + newRed + newGreen + newBlue;
}

The function is called with an onClipEvent(enterFrame) attached to the rgb_slider instance. The important thing to note here is that the paths in the arguments need to be relative to the instance of action.color.setter. There's an instance of action.color.setter in rgb_slider called "setter," so the function is called from setter.

onClipEvent(enterFrame) {
  this.setter.colorSlider("_parent._parent.changed", "_parent.red", "_parent.green", "_parent.blue");
}

The "set" button simply grabs the string from the input field, and divides it into 3 substrings, which are converted to decimal numbers from hexidecimal, again using parseInt, this time with the second argument 16, which indicates that it's a hex number in the first argument. After getting a decimal number, we set the x position of the appropriate slider, and the colorSlider function takes over.

on (release, keyPress"<Enter>") {
  red.dragger._x = parseInt(hex.substr(0,2),16);
  green.dragger._x = parseInt(hex.substr(2,2),16);
  blue.dragger._x = parseInt(hex.substr(4,2),16);
}

Download the source

Return to Projects