passing through a mouse click

[jmfuo]

I have a canvas with backgroundAlpha=0 over some other components, so that I can use rollOver and rollOut to trigger some events. However, i can't get the mouse to work with the components underneath the tranparent canvas. Is there a way to pass the mouse click event on to the components underneath the canvas?

thanks,

jq

[paul.sijpkes]

You need to manually create an event listener and handler rather than using the tag attributes.

The following example creates a transparent canvas object. The event listener triggers an event handler which outputs text to the text box underneath...

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[
import flash.events.MouseEvent;

private function init() {
canvas1.addEventListener(MouseEvent.MOUSE_UP, addText);
}

private function addText(me:MouseEvent):void {
var mx:String = String(me.localX);
var my:String = String(me.localY);

outext.text += "\n Mouse X Click "+mx+"\n Mouse Y Click "+my;
}
]]>
</mx:Script>
<mx:TextArea id="outext" x="333" y="48" width="268" height="218"/>
<mx:Canvas id="canvas1" x="286" y="21" width="381" height="288" borderColor="#B7BBBC" backgroundAlpha="0" themeColor="#FF2A00" borderStyle="solid" />
</mx:Application>

[jmfuo]

Thanks very much for your example. I understand how this works with your TextArea.

In my case, I have a List which already has click actions assigned to its items. Basically, I want the list to disappear when the mouse is out of it, an reappear when the mouse is over it. For this purpose, I overlayed it with a transparent canvas, which responds to rollOver and rollOut. But then the list no longer responds to the mouse clicks. Is there a way to get the overlayed convas to pass the mouse click to the list so it responds normally again?

thanks agian,

jq

[paul.sijpkes]

You may need to extend the mx.controls.List component and add custom rollOver and rollOut eventHandlers to it, I think this is the best way to get this interaction.

Making a transparent MovieClip may have worked in Flash but I don't think it will cut it in a Flex environment.

I'll keep experimenting with this problem, as it is an interesting problem, let me know how you go on your solution.

[jmfuo]

Originally Posted by paul.sijpkes

I'll keep experimenting with this problem, as it is an interesting problem, let me know how you go on your solution.

Thanks again for your suggestions. I have a slightly inelegant work around at the moment, in that I simply surrounded the List with 3 transparent canvasses for hiding it, plus I put a canvas _behind_ it for showing it again. This works fine, but adds to the size of an on already large application.

I vaguely remember reading something about using some kind of special disabling mouse click action on an overlayed canvas, which forced it to pass the mouse click on to things underneath it. But I haven't been able to reproduce this, and perhaps I remember incorrectly

thanks

jq