Been at this all day... :(

Question

Hey everyone,
I've been really struggling with this for most the day now and haven't gotten anywhere. I've got a background behind the text that changes colour once the mouse is rolled over. However I'm trying to get the text to change colour at the same time.
The text box is slightly smaller than the background box for the time being. When I put my most over the box it changes colou rto red as expected. However, when I roll my mouse over the text box, it turns completely white. This again is expected, but not what I want. This is happening because the text is turning white as its supposed to, and the background is as well when the mouse is taken off. The about text is a button, and its default rollover state is making the background turn white as it rolls over the text layer. Is there some way prioritize the background? What needs to be changed in the code? Also the drop shadow turns off when I put my mouse over them the first time and I’m not quite sure why...
Here's my AS code:
import fl.transitions.Tween;
import fl.transitions.easing.*;
about_bg.addEventListener(MouseEvent.MOUSE_OVER, manageMouseOver);
about_bg.addEventListener(MouseEvent.MOUSE_OUT, manageMouseOut);
function manageMouseOver(event:MouseEvent):void
     var btn:SimpleButton = event.target as SimpleButton; //just assume that it is a MovieClip, change to whatever it is i.e. Button
     var color_transform:ColorTransform=btn.transform.colorTransform;
     color_transform.color=0xbf3a3a;
     btn.transform.colorTransform=color_transform;
     var fadeIn:Tween = new Tween(btn, "tint", Strong.easeOut,0,1,1,true);
function manageMouseOut(event:MouseEvent):void
     var btn:SimpleButton = event.target as SimpleButton; //just assume that it is a MovieClip, change to whatever it is i.e. Button
     var color_transform:ColorTransform=btn.transform.colorTransform;
     color_transform.color=0xFFFFFF;
     btn.transform.colorTransform=color_transform;
     var fadeOut:Tween = new Tween(btn, "tint", Strong.easeOut,1,0,1,true);
about_txt.addEventListener(MouseEvent.MOUSE_OVER, txtcolourMouseOver);
about_txt.addEventListener(MouseEvent.MOUSE_OUT, txtcolourMouseOut);
function txtcolourMouseOver(event:MouseEvent):void    
     var btn:SimpleButton = event.target as SimpleButton; //just assume that it is a MovieClip, change to whatever it is i.e. Button
     var color_transform:ColorTransform=btn.transform.colorTransform;
     color_transform.color=0xFFFFFF;
     btn.transform.colorTransform=color_transform;
     var fadeIn:Tween = new Tween(btn, "tint", Strong.easeOut,0,1,1,true);
function txtcolourMouseOut(event:MouseEvent):void    
     var btn:SimpleButton = event.target as SimpleButton; //just assume that it is a MovieClip, change to whatever it is i.e. Button
     var color_transform:ColorTransform=btn.transform.colorTransform;
     color_transform.color=0x000000;
     btn.transform.colorTransform=color_transform;
     var fadeIn:Tween = new Tween(btn, "tint", Strong.easeOut,0,1,1,true);
A pre-thanks for any help, I really, really need it. This is just so annoying!

Answer 1

Thanks! Okay, so I still haven't got it working but I know what you mean/where you're coming from. I've converted both the background and text into a single MovieClip symbol and named it 'abouttest_mc' but...argh...I'm not quite sure what to do differently in the code. I tried the mouseChildren false but it just comes up with an error. Here's my updated code, it hasn't changed much:
import fl.transitions.Tween;
import fl.transitions.easing.*;
import flash.text.TextField;
abouttest_mc.addEventListener(MouseEvent.ROLL_OVER, manageRollOver);
abouttest_mc.addEventListener(MouseEvent.ROLL_OUT, manageRollOut);
function manageRollOver(event:MouseEvent):void
     var btn:MovieClip = event.target as MovieClip;
     var color_transform:ColorTransform=btn.transform.colorTransform;
     color_transform.color=0xbf3a3a;
     btn.transform.colorTransform=color_transform;
     var fadeIn:Tween = new Tween(btn, "tint", Strong.easeOut,0,1,1,true);
function manageRollOut(event:MouseEvent):void
     var btn:MovieClip = event.target as MovieClip;
     var color_transform:ColorTransform=btn.transform.colorTransform;
     color_transform.color=0xFFFFFF;
     btn.transform.colorTransform=color_transform;
     var fadeOut:Tween = new Tween(btn, "tint", Strong.easeOut,1,0,1,true);
about_txt.addEventListener(MouseEvent.ROLL_OVER, txtcolourRollOver);
about_txt.addEventListener(MouseEvent.ROLL_OUT, txtcolourRollOut);
function txtcolourRollOver(event:MouseEvent):void   
     var btn:MovieClip = event.target as MovieClip;
     var color_transform:ColorTransform=btn.transform.colorTransform;
     color_transform.color=0xFFFFFF;
     btn.transform.colorTransform=color_transform;
     var fadeIn:Tween = new Tween(btn, "tint", Strong.easeOut,0,1,1,true);
function txtcolourRollOut(event:MouseEvent):void   
     var btn:MovieClip = event.target as MovieClip;
     var color_transform:ColorTransform=btn.transform.colorTransform;
     color_transform.color=0x000000;
     btn.transform.colorTransform=color_transform;
     var fadeIn:Tween = new Tween(btn, "tint", Strong.easeOut,0,1,1,true);
The 'about_txt.addEventListener(MouseEvent.ROLL_OUT, txtcolourRollOut);' is now an undefined property. Its inside the MovieClip...
Can anyone PLEASE help me with changing the code? I've been stuck on this for too long and its part of my final major project. It would be great if I could just send someone the file if they wanted to do it that way, what I'm wanting to do is fairly simple I'd imagine...