Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

interactive color selector in flash

need help figuring out how to do this

9:52 pm on Nov 10, 2008 (gmt 0)

10+ Year Member

i'm working on a flash feature for my company's website. basically we make widgets that come in several different colors. three areas on each product can vary in color. i need to build a flash area where you can click on a color and have it apply itself to each area. i'm having problems getting started - how to set up the flash file, etc.

i can change the color of one area by placing each different color in a key frame, but if someone wants to change the color on two areas, it doesn't work. i feel like there should be a fairly straight forward way to do this, but i am feeling brain dead and cannot think of one.

is it a show/hide layer solution? or something involving referencing specific frames of a movie clip? i thank you very much in advance for any ideas. have i explained my problem clearly enough?

5:03 pm on Nov 11, 2008 (gmt 0)

10+ Year Member

i still really need help. i think the solution is probably fairly straight forward but i am hitting a road block. please help!
11:21 pm on Nov 11, 2008 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

There should be a color selector sample in the Flash files, or somewhere on Adobe.com, did you find that?

If you did, the trick would be creating a mask layer that masks all of the available color areas. Your color changes apply to the entire mask. I know you are using a "picker," but walk through this one to see how it would work, then modify the controls to suit.

Start by creating the mask, for the purpose of this demo let's call it "swatch". In a layer, create a perfect mask of your colored areas. Create it in Black, because black is red=0, green=0, blue=0 (you can alter the starting color later.) Tweak it until it "fits" your illustration perfectly.

Now make a movie symbol out of it, name it whatever you want, but the instance on the stage needs to be named "swatch" in the properties pane.

In the first frame of your movie - this should only be one frame long - create an actions layer, and paste the following:

swatchColor = new Color("swatch");
function setSwatchColor(){

(those are supposed to be valid vertical pipes, the character above \ on your keyboard.)

So we have created a Color() object we're referring to as "swatchColor" that will apply itself to the movie clip "swatch," set r,g, and b to zero (black,) and defined a global function that uses a short circuit eval on bitwise operator for values of r, g, and b (don't worry about what that means.)

Next, create three slider movie clips.

Create a graphic for a button for a slider control. Convert it to a button symbol. In this example, name it "slideButton."

Create a new movie symbol called "sliderMC." Place an instance of slideButton dead center in the symbol. Make sure it's set as Button type in the properties window (Button .... Instance of:slideButton.) Click the symbol and paste the following in the actions pane, so the actions apply to the button symbol itself:

_parent.dragging = true;
startDrag("",false, -50, 0, 50, 0);
on (release, releaseOutside){
_parent.dragging = false;

Note the values of startDrag: -50, 0, 50, 0 limits the movement of the slider to horizontal only and will stop at the end of the line. Just like a slider should.

Finally, create the slider. Create a new movie symbol called "slider." Draw a 100 px x 1px horizontal line dead center, with a vertical "crosshair" dead center. Place an instance of sliderMC to the far left of this line in a new layer. NAME the instance of sliderMC "slider" in the properties pane.

Now your sliders are set up. Drag three instances of the slider on the stage, no need to name them. Select the first one, we'll refer to as the red slider. In the actions pane, paste the following:

if (dragging == true){
_root.r = Math.round((slider._x+50)/100*255);

Note how this alters the variable "r" for Red.

For the next two, green and blue, click each and assign the following code.

Green slider (note the "g"):

if (dragging == true){
_root.g = Math.round((slider._x+50)/100*255);

Blue slider (note the "b"):

if (dragging == true){
_root.b = Math.round((slider._x+50)/100*255);

Run it. :-) Moving the sliders changes the values of the variables r, g, and b accordingly so when it calls the setSwatchColor function defined in frame 1 of _root, the values apply to the object on the stage we've named "swatch."

If you get this to work, it should be a simple thing to convert your current movie to apply your colors to the "swatch" which in your case would be a mask of the colored areas. To get a default startup color, you play with the initial values of r,g, and b in frame 1 of _root.

1:23 pm on Nov 12, 2008 (gmt 0)

10+ Year Member

thank you, rocknbil, for answering. your solution is really interesting and i appreciate it so much. i understand what you're saying - just couldn't think of a way to get started before and what i was doing was not working. thanks again.

Featured Threads

Hot Threads This Week

Hot Threads This Month