Help with colouring in game

Hey I'm creating an number of games for my HSC major project and I'm having trouble with creating a colouring in book. This is the code I have:

red_btn.addEventListener(MouseEvent.CLICK, pickColour);
white_btn.addEventListener(MouseEvent.CLICK, pickColour);
blue_btn.addEventListener(MouseEvent.CLICK, pickColour);
green_btn.addEventListener(MouseEvent.CLICK, pickColour);

function pickColour(evt:MouseEvent) {
if (evt.target.name=="red_btn") {
arrow_mc.y=133;
}
if (evt.target.name=="white_btn") {
arrow_mc.y=179;
}
if (evt.target.name=="blue_btn") {
arrow_mc.y=221;
}
if (evt.target.name=="green_btn") {
arrow_mc.y=264;
}
}
middle_mc.useHandCursor=true;
middle_mc.buttonMode=true;
reflection1_mc.useHandCursor=true;
reflection1_mc.buttonMode=true;
reflection2_mc.useHandCursor=true;
reflection2_mc.buttonMode=true;

middle_mc.addEventListener(MouseEvent.CLICK, changeColour);
reflection1_mc.addEventListener(MouseEvent.CLICK, changeColour);
reflection2_mc.addEventListener(MouseEvent.CLICK, changeColour);

function changeColour(event :MouseEvent) : void
{
trace(event.target.name);
event.target.transform.colorTransform=changeToColo r;
}

var red:ColorTransform = new ColorTransform(0,0,0,0,255,0,0,255);
var blue:ColorTransform = new ColorTransform(0,0,0,0,0,0,255,255);
var green:ColorTransform = new ColorTransform(0,0,0,0,0,255,0,255);
var white:ColorTransform = new ColorTransform(0,0,0,0,255,255,255,255);

var changeToColor:ColorTransform = new ColorTransform();
changeToColor=red;

function pickColor(evt:MouseEvent) {
if (evt.target.name=="red_btn") {
changeToColor=red;
arrow_mc.y=133;
}
if (evt.target.name=="white_btn") {
changeToColor=white;
arrow_mc.y=179;
}
if (evt.target.name=="blue_btn") {
changeToColor=blue;
arrow_mc.y=221;
}
if (evt.target.name=="green_btn") {
changeToColor=green;
arrow_mc.y=264;
}
}


It works although when I test the movie no matter what colour the player chooses it always colours in red, I have no idea why this is happening can someone please help?

Here's what I got to work:

Actionscript Code:

changeToColor=white

red_btn.addEventListener(MouseEvent.CLICK, pickColor);
white_btn.addEventListener(MouseEvent.CLICK, pickColor);
blue_btn.addEventListener(MouseEvent.CLICK, pickColor);
green_btn.addEventListener(MouseEvent.CLICK, pickColor);

middle_mc.useHandCursor=true;
middle_mc.buttonMode=true;
reflection1_mc.useHandCursor=true;
reflection1_mc.buttonMode=true;
reflection2_mc.useHandCursor=true;
reflection2_mc.buttonMode=true;

middle_mc.addEventListener(MouseEvent.CLICK, changeColour);
reflection1_mc.addEventListener(MouseEvent.CLICK, changeColour);
reflection2_mc.addEventListener(MouseEvent.CLICK, changeColour);

function changeColour(event :MouseEvent) : void
{
trace(event.target.name);

event.target.transform.colorTransform=changeToColor;
}

var red:ColorTransform = new ColorTransform(0,0,0,0,255,0,0,255);
var blue:ColorTransform = new ColorTransform(0,0,0,0,0,0,255,255);
var green:ColorTransform = new ColorTransform(0,0,0,0,0,255,0,255);
var white:ColorTransform = new ColorTransform(0,0,0,0,255,255,255,255);

var changeToColor:ColorTransform = new ColorTransform();


function pickColor(evt:MouseEvent) {
if (evt.target.name=="red_btn") {
changeToColor=red;
arrow_mc.y=133;
}
if (evt.target.name=="white_btn") {
changeToColor=white;
arrow_mc.y=179;
}
if (evt.target.name=="blue_btn") {
changeToColor=blue;
arrow_mc.y=221;
}
if (evt.target.name=="green_btn") {
changeToColor=green;
arrow_mc.y=264;
}
}

You left a letter out of one of your usages of changeToColour/Color. I also combined the arrow moving and the color picking functions because you duplicated the arrow's y position twice. I can e-mail you the working swf if yours is still being evil, drop me a pm with your email.

Ah THANK YOU SO MUCH!
It worked except for one thing all the colours work well but the green button colours blue!? haha I have no idea why this is happening.

The code works right on my version of it, try checking your button names and the default "changeToColor" variable value to see if the default changeToColor matches the default arrow position.

Also try reviewing your function pickColor(evt:MouseEvent), and make sure the color changes match the button names. It's easy to flip stuff around while editing.

Yep got it working thanks for the help.
Just another question, I want to apply this to other frames with different images but obviously I cannot just copy and paste because alot of duplicated functions and errors happen. I've been trying to figure out how to do this but I'm having alot of trouble I don't know which parts of the code I need for the rest of the frames.

Don't repaste the actionscript, it can run over and over again from it's home keyframe.

On the actionscript keyframe, insert more frames so there's as many frames as you have coloring pictures, but only one keyframe with actionscript within it.

Cut and paste your middle_mc and reflection mc's to their own layer. They should only exist for one keyframe. Insert a new keyframe after your first coloring page. On the next coloring keyframe frame name you movieclip instances THE EXACT SAME as the first page! That way, the second coloring page can be run using the same set of controls as the first one. You only need one copy of the actionscript, and you just follow the same set of naming conventions.

middle_mc.addEventListener(MouseEvent.CLICK, changeColour); would work for the middle_mc on frame one, and on frame two, and on frame three, even though each is a totally different movieclip as long as they have the same instance name and are separated by keyframes.

To navigate the movie, put a stop(); on each coloring keyframe and add previous and next frame navigation buttons on the stage.

Okay I did exactly what you said but it is only working for the first frame:(

It does work--my test file ran fine using your script.
Can you private message me on this forum with your e-mail, that way you could e--mail me the FLA file? My guess is that it only needs something dumb, like a blank keyframe moved or code pasted in a different spot.