Flash CS6 Actionscript 3.0 button rollover forces movieclips to play uncontrollably

Question

I'm a beginner when it comes to Actionscript 3.0 for Adobe Flash CS6. I'm trying to make a basic, plain animated interactive logo for a web portfolio, and have encountered a problem while trying to fix rollOver issues with triangles in the logo. With the current coding I've learned on my own, I'm able to get the animations and reactions just fine with movie clips instead of buttons. However, the execution of this method causes the "hit-boxes" of whichever movie clip is front-most on stage to play its animation even if you're trying to mouse over a movie clip behind it.

Here is the web page in question:

http://inancarrow.wix.com/home

Notice how when you roll over the left corner or bottom corner of the yellow triangle, the blue "Games" animation or the green "Skills" animation fades in and plays instead of the yellow "Connect" animation.

I have attempted to remedy this small but annoying problem by attempting to turn the movie clips to buttons, allowing an accurate response when people mouse over the shapes. The result is that all the movie clips that have animation play uncontrollably and loop their animations. From the searching I've done, it has something to do with nested movie clips...

I've spent too much trying to figure out what is wrong and how to fix the problem by myself, which is why I'm asking for help, advice, or insight as to how to either fix the overlapping rollOver problem, or how to fix my movieClips playing uncontrollably.

Here is the code I've been using:

RedIFader.addEventListener(MouseEvent.ROLL_OVER, RedIOver);
RedIFader.addEventListener(MouseEvent.ROLL_OUT, RedIOut);
//RedIFader.addEventListener(MouseEvent.ROLL_OVER, RedIClick);

function RedIOver(event:MouseEvent):void{
    BioFadeIn.gotoAndPlay("BioFadeInOver")
    BlueAFader.gotoAndPlay("BlueAFaderOver")
    GreenAFader.gotoAndPlay("GreenAFaderOver")
    YellowNFader.gotoAndPlay("YellowNFaderOver")
}

function RedIOut(event:MouseEvent):void{
    BioFadeIn.gotoAndPlay("BioFadeInOut")
    BlueAFader.gotoAndPlay("BlueAFaderOut")
    GreenAFader.gotoAndPlay("GreenAFaderOut")
    YellowNFader.gotoAndPlay("YellowNFaderOut")
}

BlueAFader.addEventListener(MouseEvent.ROLL_OVER, BlueAOver);
BlueAFader.addEventListener(MouseEvent.ROLL_OUT, BlueAOut);
//BlueAFader.addEventListener(MouseEvent.ROLL_OVER, BlueAClick);

function BlueAOver(event:MouseEvent):void{
    GamesFadeIn.gotoAndPlay("GamesFadeInOver")
    RedIFader.gotoAndPlay("RedIFaderOver")
    GreenAFader.gotoAndPlay("GreenAFaderOver")
    YellowNFader.gotoAndPlay("YellowNFaderOver")
}

function BlueAOut(event:MouseEvent):void{
    GamesFadeIn.gotoAndPlay("GamesFadeInOut")
    RedIFader.gotoAndPlay("RedIFaderOut")
    GreenAFader.gotoAndPlay("GreenAFaderOut")
    YellowNFader.gotoAndPlay("YellowNFaderOut")
}

GreenAFader.addEventListener(MouseEvent.ROLL_OVER, GreenAOver);
GreenAFader.addEventListener(MouseEvent.ROLL_OUT, GreenAOut);
//GreenAFader.addEventListener(MouseEvent.ROLL_OVER, GreenAClick);

function GreenAOver(event:MouseEvent):void{
    SkillsFadeIn.gotoAndPlay("SkillsFadeInOver")
    RedIFader.gotoAndPlay("RedIFaderOver")
    BlueAFader.gotoAndPlay("BlueAFaderOver")
    YellowNFader.gotoAndPlay("YellowNFaderOver")
}

function GreenAOut(event:MouseEvent):void{
    SkillsFadeIn.gotoAndPlay("SkillsFadeInOut")
    RedIFader.gotoAndPlay("RedIFaderOut")
    BlueAFader.gotoAndPlay("BlueAFaderOut")
    YellowNFader.gotoAndPlay("YellowNFaderOut")
}

YellowNFader.addEventListener(MouseEvent.ROLL_OVER, YellowNOver);
YellowNFader.addEventListener(MouseEvent.ROLL_OUT, YellowNOut);
//YellowNFader.addEventListener(MouseEvent.ROLL_OVER, YellowNClick);

function YellowNOver(event:MouseEvent):void{
    ConnectFadeIn.gotoAndPlay("ConnectFadeInOver")
    RedIFader.gotoAndPlay("RedIFaderOver")
    BlueAFader.gotoAndPlay("BlueAFaderOver")
    GreenAFader.gotoAndPlay("GreenAFaderOver")
}

function YellowNOut(event:MouseEvent):void{
    ConnectFadeIn.gotoAndPlay("ConnectFadeInOut")
    RedIFader.gotoAndPlay("RedIFaderOut")
    BlueAFader.gotoAndPlay("BlueAFaderOut")
    GreenAFader.gotoAndPlay("GreenAFaderOut")
}

Thank you for your time and consideration.

Answer 1

I'm not sure I understand your problem, but if I do, this is a solution you could do:

on your roll over handlers, set other colors mouseEnabled and mouseChildren properties to false.

RedIFader.mouseEnabled = false;
RedIFader.mouseChildren = false;

then on your roll out, set them all back to true:

RedIFader.mouseEnabled = true;
RedIFader.mouseChildren = true;

This will prevent the other colors from triggering mouse events until the mouse leaves the current color.

---

If this isn't your issue, then I would suggest using dummy objects:

Create a dummy shape (with an alpha of 0), convert it to a movieClip and put it where you want the mouse over to happen. Then add the roll over/out listeners to the dummys. You probably want to set mouseEnabled & mouseChildren to false on all the color objects so they don't get in the way.

//disable all the color buttons mouse interactions
RedIFader.mouseEnabled = false;
BlueAFader.mouseEnabled = false;
GreenAFader.mouseEnabled = false;
YellowNFader.mouseEnabled = false;
RedIFader.mouseChildren = false;
BlueAFader.mouseChildren = false;
GreenAFader.mouseChildren = false;
YellowNFader.mouseChildren = false;

//add listeners to the dummys
RedDummy.addEventListener(MouseEvent.ROLL_OVER,btnRollOver);
RedDummy.addEventListener(MouseEvent.ROLL_OUT,btnRollOut);
BlueDummy.addEventListener(MouseEvent.ROLL_OVER,btnRollOver);
BlueDummy.addEventListener(MouseEvent.ROLL_OUT,btnRollOut);
GreenDummy.addEventListener(MouseEvent.ROLL_OVER,btnRollOver);
GreenDummy.addEventListener(MouseEvent.ROLL_OUT,btnRollOut);
YellowDummy.addEventListener(MouseEvent.ROLL_OVER,btnRollOver);
YellowDummy.addEventListener(MouseEvent.ROLL_OUT,btnRollOut);

function btnRollOver(e:Event):void {

    if(e.currentTarget != RedDummy){
        RedIFader.gotoAndPlay("RedIFaderOver");
    }else{
        BioFadeIn.gotoAndPlay("BioFadeInOver")
    }
    if(e.currentTarget != BlueDummy){
        BlueAFader.gotoAndPlay("BlueAFaderOver");
    }else{
        GamesFadeIn.gotoAndPlay("GamesFadeInOver");
    }
    if(e.currentTarget != GreenDummy){
        GreenAFader.gotoAndPlay("GreenAFaderOver");
    }else{
        SkillsFadeIn.gotoAndPlay("SkillsFadeInOver");
    }
    if(e.currentTarget != YellowDummy){
        YellowAFader.gotoAndPlay("YellowAFaderOver");
    }else{
        ConnectFadeIn.gotoAndPlay("ConnectFadeInOver");
    }
}

function btnRollOut(e:Event):void {
    if(e.currentTarget != RedDummy){
        RedIFader.gotoAndPlay("RedIFaderOut");
    }else{
        BioFadeIn.gotoAndPlay("BioFadeInOut")
    }
    if(e.currentTarget != BlueDummy){
        BlueAFader.gotoAndPlay("BlueAFaderOut");
    }else{
        GamesFadeIn.gotoAndPlay("GamesFadeInOut");
    }
    if(e.currentTarget != GreenDummy){
        GreenAFader.gotoAndPlay("GreenAFaderOut");
    }else{
        SkillsFadeIn.gotoAndPlay("SkillsFadeInOut");
    }
    if(e.currentTarget != YellowDummy){
        YellowAFader.gotoAndPlay("YellowAFaderOut");
    }else{
        ConnectFadeIn.gotoAndPlay("ConnectFadeInOut");
    }
}

Answer 2

For me it seems to comes from the fact that your clips are triangles, probably using pictures for the blue, green, yellow triangles and the red i (PNG format images ?...).

The fact is that rollovers on pictures tend to get dispatched even when rolling on transparent areas of a PNG, thing that is obviously happening here.

To solve that, you could try using for example that InteractivePNG class that is supposed to take care of this problem.

And if you're not using PNGs files, the solution is as easy as removing any existing vector fill, even the transparent ones, from the empty parts of your movieclips.