Click through iframe with flash in it

Question

I have a flash inside and iFrame and i want to click through iFrame but not through flash. I have seen that, we can click through iFrame via "pointer-events: none;" but it passes everything inside iframe. Now I just want to know, that can we enable or check the mouse click in flash?

I have added an sample for my question. black dots are in a flash swf file and its in iFrame. Now when I click on transparent area then it should be clicked on underneath area that is Label buttons in this case. otherwise black dots should be clicked.

Answer 1

I think it doesn't matter if you are in iframe in this case, if I understand correctly you want a pass-through click from Flash to the underlying HTML page, but only if the click doesn't satisfy some condition (in this case, only if it's not over the black spots).

An approach would be to do it collaboratively between the Flash part and some JavaScript part in the iframe:

• Intercept the click in Flash, get coordinates and verify if it's over a black circle
• If it is, handle the corresponding logic in Flash, else proceed with the following steps
• Pass the coordinates to a JavaScript function already defined in the iframe through Flash's external interface
• Finally in the JavaScript you can do something along the lines of How to simulate a click by using x,y coordinates in JavaScript?

Answer 2

To do list :

1. Use the CSS attribute pointer-events: none; on iframe
2. Create a invisible div with ID="event-eater" that covers the elements.
3. Add Javascript below (uses jQuery) to recognizance where click happened
4. It will call actionscript method ClickPosition and based on returned result do 1 of following
   • If black area was clicked - Do nothing, click event was created in actionscript
   • If background was clicked - Temporally hide current element, and recreate click in javascript

Javascript

$('#event-eater').click(function(evt) {
    var posX = $(this).offset().left, posY = $(this).offset().top;
    var x = Math.abs(Math.round(evt.pageX - posX));
    var y = Math.abs(Math.round(evt.pageY - posY));
    var result = "["+x+", "+y+"]";
    if(document['flashInterface'].ClickPosition(result)=="true"){
        $('#event-eater').css({display:'none'});
        starter = document.elementFromPoint(evt.clientX, evt.clientY);
        $(starter).click();
        $('#event-eater').css({display:''});
    };
});

Actionscript

package
{
    import fl.events.ColorPickerEvent;
    import flash.display.MovieClip;
    import flash.external.ExternalInterface;
    public class Main extends MovieClip {
        //set this variable true if background was clicked last, false otherwise
        var wasBackgroundClickedLast:Boolean = new Boolean(true)
        public function Main() {
            //allows JavaScript to access the ClickPosition() function.
            ExternalInterface.addCallback("ClickPosition", clickPosition);  
        }
        public function clickPosition(value:String):String{
            var va= str.split(",");
            simulateClick(Number(va[0]),Number(va[1]));
            return wasBackgroundClicked.toString();
        }
        public function simulateClick(x:Number, y:Number):void
        {
            var objects:Array = stage.getObjectsUnderPoint(new Point(x, y));
            var target:DisplayObject;
            while(target = objects.pop()){if(target is InteractiveObject){ break; }}
            if(target !== null)
            {
                var local:Point = target.globalToLocal(new Point(x, y));
                var e:MouseEvent = new MouseEvent(
                    MouseEvent.CLICK, true, false, local.x, local.y);
                target.dispatchEvent(e);
            }
        }
    }
}

Small demo : Javascript eventeater with button array below it.