?
Solved

Flash CS4 mask is adversely affecting mouseEvent on unmasked underlying layer

Posted on 2010-01-04
8
Medium Priority
?
516 Views
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.
OPID-lovejoy-working-SceneHM.swf
screenshot-mask-placement.png
0
Comment
Question by:beemerrider130hp
  • 4
  • 4
8 Comments
 
LVL 19

Expert Comment

by:moagrius
ID: 26177594
you could use the scrollRect property of the menu clip:  http://help.adobe.com/en_US/AS3LCR/Flash_10.0/flash/display/DisplayObject.html#scrollRect
0
 
LVL 19

Accepted Solution

by:
moagrius earned 500 total points
ID: 26177656
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;
addChild(main);

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;
	menu.addChild(button);
	button.y = 20 * i;
}

var rect:Rectangle = new Rectangle(0,200,200,200);
menu.scrollRect = rect;
main.addChild(menu);

var activator:TextField = new TextField();
activator.autoSize = "left";
activator.selectable = false;
activator.text = "show menu";
activator.addEventListener("click",showMenu);
main.addChild(activator);

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

0
 

Author Comment

by:beemerrider130hp
ID: 26183183
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

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:beemerrider130hp
ID: 26183835
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.
0
 
LVL 19

Expert Comment

by:moagrius
ID: 26184479
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.
0
 

Author Comment

by:beemerrider130hp
ID: 26185362
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
0
 
LVL 19

Expert Comment

by:moagrius
ID: 26185448
"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();
red.graphics.beginFill(0xFF0000);
red.graphics.drawRect(0,0,200,200);
red.graphics.endFill();
addChild(red);

var blue:Sprite = new Sprite();
blue.x = 100;
blue.y = 100;
blue.graphics.beginFill(0x0000FF);
blue.graphics.drawRect(0,0,200,200);
blue.graphics.endFill();
addChild(blue);

addEventListener("mouseMove", handleMouseMove);

function handleMouseMove(event:Event):void{
	var mouseIsOver:Boolean = red.hitTestPoint(stage.mouseX, stage.mouseY);
	if(mouseIsOver){
		trace("mouse is over red square");
	}
}

Open in new window

0
 

Author Comment

by:beemerrider130hp
ID: 26185602
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.

0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Recently, I was asked to recommend a tracking system to be implemented on a clients website. As the entire site was built on flash, my first thought was to suggest custom built tracking system. However, our company at that point of time didn't h…
I have been doing hardcore actionscripting for some time; and needless to say I have faced a lot of problems in just understanding others' code rather than understanding what the code executes. A programmer's life can become hell when there are a lo…
The goal of the tutorial is to teach the user how to select which audio input to use. Once you have an audio input plugged into the laptop or computer, you will go into the audio input settings and choose which audio input you want to use.
This Micro Tutorial will teach to how to utilize bit rate in Adobe Flash Media Live Encoder.

850 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