Flash CS4 mask is adversely affecting mouseEvent on unmasked underlying layer

Posted on 2010-01-04
Last Modified: 2013-11-11
I have a movieclip in the background (bkgd_mc) that has the alpha fading in and out when rolled over with mouse. This effect is created with actionscript using tween class and ROLL_OVER and ROLL_OUT mouse events.

On an upper layer, I have another movieclip (menu_mc) that has a mask applied to it so it can drop in and out of view (animation created using tween classs, and triggered by a button).

Even though the mask is only applied to the menu_mc, it seems to be disabling the 'trigger' area of bkgd_mc  wherever the mask overlaps it.

When I remove the mask, the rollover effect on bkgd_mc works just fine on the entire area of the movieclip. How can I avoid this conflict, yet still keep the mask I need applied to menu_mc?

See attached files: PNG file shows placement of mask; SWF file demonstrates problem on bottom right image... should only convert back to black and white when roll out occurs, but if you mouse around upper area of image where mask is overlapping, the tween effects happen when they shouldn't.
Question by:beemerrider130hp
    LVL 19

    Expert Comment

    you could use the scrollRect property of the menu clip:
    LVL 19

    Accepted Solution

    here's a very basic example showing how to use scrollRect to mask, with a simple animation.  just paste in frame 1's actions panel of a new FLA and run "Test Movie" - then click the textfield that says "show menu".
    var main:Sprite = new Sprite();
    main.x = 100;
    main.y = 100;
    var menu:Sprite = new Sprite();
    menu.y = 20;
    for(var i:int = 0;i<10;i++){
    	var button:TextField = new TextField();
    	button.autoSize = "left";
    	button.text = "Button No. " + i;
    	button.y = 20 * i;
    var rect:Rectangle = new Rectangle(0,200,200,200);
    menu.scrollRect = rect;
    var activator:TextField = new TextField();
    activator.autoSize = "left";
    activator.selectable = false;
    activator.text = "show menu";
    function showMenu(event:Event):void{
    	stage.addEventListener("enterFrame", oef);
    function oef(event:Event):void{
    	rect.y -= 5;
    	menu.scrollRect = rect;
    	if(rect.y <= 0) stage.removeEventListener("enterFrame",oef);

    Open in new window


    Author Comment

    Thank you for your idea. I'm very new to Actionscript, so it might take me a while to figure out how to implement this with my code to see how it will work. Is there a way to integrate tweening into the scroll action? I'd like to maintain the easing effect I currently have on the dropdown menu.

    On my original question, can you give me any possible reasons why the mask is interfering with the background movieclips that it's not even applied to? Maybe I don't fully understand the ramifications of using a mask? In this case, I can possibly use the scrollRect option to get around the problem, but I'm sure I'll encounter this situation again.

    I attached my code in case you're so inclined to help me integrate the scrollRect method, but thank you for your help so far. (navDrop_mc is the dropdown menu clip)

    //Create background rollover effect on home images by calling external Rollover Effect function saved in separate actionscript file
    //effect works by fading out b&w photo, revealing underlying color photo; then fading it back in on roll-out
    new RollOverEffect(homePhoto1_mc);
    new RollOverEffect(homePhoto2_mc);
    new RollOverEffect(homePhoto3_mc);
    new RollOverEffect(homePhoto4_mc);
    new RollOverEffect(homePhoto5_mc);
    //animated dropdown menu
    //import Tween class for functionality
    import fl.transitions.Tween;
     import fl.transitions.easing.*
     import fl.transitions.TweenEvent;
     //animate dropdown with tween properties
     var menuDownTween:Tween;
     var menuUpTween:Tween;
    //event listener for navigation dropdown button
    navDrop_btn.addEventListener(MouseEvent.CLICK, showMenu);
    //function to show dropdown menu
    function showMenu (evtObj:MouseEvent) {
    	//trace to test function
    	trace ("The Navigation button was rolled over")
    	//animate drop down menu into view, hide nav button and replace with down-arrow nav button
    	navDrop_btn.removeEventListener(MouseEvent.CLICK, showMenu);
    	navDrop_btn.alpha = 0;
    	navDrop_btn.y = 80.8;
    	navUp_btn.alpha = 1;
    	navUp_btn.y = 118.8;
    	navUp_btn.addEventListener(MouseEvent.CLICK, hideMenu);
    	menuDownTween = new Tween(navDrop_mc, "y", Elastic.easeOut, 136.6, 387.6, 3, true);
    	menuDownTween.addEventListener(TweenEvent.MOTION_FINISH, showSelected);
    //function to display red selector arrow and yellow selected button
    function showSelected (evtObj:TweenEvent):void {
    	redArrow_mc.alpha = 1;
    	sceneHM_mc.alpha = 1;
    //function to lift dropdown menu
    function hideMenu (evtObj:MouseEvent) {
    	//trace to test function
    	trace ("The dropdown menu was exited")
    	//animate dropdown menu out of view, hide alt nav button and replace with up-arrow nav button
    	navUp_btn.removeEventListener(MouseEvent.CLICK, hideMenu);
    	navUp_btn.alpha = 0
    	navUp_btn.y = 80.8;
    	navDrop_btn.addEventListener(MouseEvent.CLICK, showMenu);
    	navDrop_btn.alpha = 1;
    	navDrop_btn.y = 118.8;
    	menuUpTween = new Tween(navDrop_mc, "y", Elastic.easeOut, 387.6, 136.6, 3, true);
    	redArrow_mc.alpha = 0;
    	sceneHM_mc.alpha = 0;

    Open in new window


    Author Comment

    I just figured out that it's not the mask causing the problem. I thought it was, because when I removed it, the problem went away, but apparently I had altered another layer at the same time. I think the problem is really coming from the redArrow_mc and sceneHM_mc that are overlying that one background movieclip. I'm not yet sure WHY they are interfering with the Mouse event below because they aren't buttons and they aren't listening for mouse events themselves, but at least now I have an easier problem to solve.
    LVL 19

    Expert Comment

    remember that even if an object isn't receiving mouse events, it can still count as a rollOut/mouseOut.

    if you have an element with a rollOut handler, and another basic shape overlapping it, when the mouse contacts that overlapping object, it'll count as a rollOut.

    Author Comment

    I've noticed that is what's happening. Is there any way to control that, for future reference?

    For now, I'm going to get rid of those overlapping clips and embed them inside my menu buttons instead, since they are really being used to indicate which menu item is currently selected, and how I had it set up was a messy way to do that anyway.

    thank you
    LVL 19

    Expert Comment

    "Is there any way to control that, for future reference?"

    Not really.  If it didn't work like that, there'd be a lot of unexpected behavior.  Pretty much all scripting works like that as well (JavaScript, .NET, etc.)

    You can use a mousesMove handler on the stage, and use hitTestPoint(stage.mouseX, stage.mouseY) to see if the cursor is actually above an object, regardless of it's depth or intervening object, but that can be a resource hog if you use it one multiple objects, and would fire each time the mouse moved, not just when it entered or exited the area.

    and example might look like this (again, just paste in frame 1's actions panel of a new FLA and run "Test Movie"):
    var red:Sprite = new Sprite();;,0,200,200);;
    var blue:Sprite = new Sprite();
    blue.x = 100;
    blue.y = 100;;,0,200,200);;
    addEventListener("mouseMove", handleMouseMove);
    function handleMouseMove(event:Event):void{
    	var mouseIsOver:Boolean = red.hitTestPoint(stage.mouseX, stage.mouseY);
    		trace("mouse is over red square");

    Open in new window


    Author Comment

    Yeah, I can understand why it would work like that... it's like asking, why can't you just automatically see the background layer even when there's something on top of it? Just doesn't make a lot of sense and would be a big mess. I just thought maybe there was a way to have a particular element actively disregarded by the mouse, besides making it transparent.

    I can see how the hitTestPoint would work, but you're right, the constant firing of the function would be problematic too.

    Thanks again for your help.


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Highfive + Dolby Voice = No More Audio Complaints!

    Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

    Suggested Solutions

    I come across a lot of question about how to access things in the document class from a movieclip, or accessing something from a movieclip in the document class. It took me a while to figure this out but once I did it makes life so much easier. …
    I have found that much of my time doing support ends up being a constant repetition of the same steps to different people.  Early on I stated using web pages with Frequently Asked Questions (FAQs) to alleviate most of the burden.  Sometimes this jus…
    In this tutorial viewers will learn how to create a basic shape tween animation in Flash including shape hints for smooth animation Open a new document in Flash: Draw a shape: Select another frame (how long you want the tween to be): Right click and…
    The goal of the tutorial is to teach the user what frame rate is, how to control it and what effect it has on the video.

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now