Can click event handlers in a Flash object react to click events delegated by JavaScript from another DOM element?

Question

I have a canvas element positioned absolutely over a Flash object of the same dimensions. I want to be able to click on the canvas element and dispatch that event - or, more correctly, an imitation of that event - to the Flash object underneath.

I added an event listener to the Flash object so I know that the event is being successfully dispatched to the Flash object. The problem is that the Flash object simply doesn't react to it (e.g. clicking in the region of the giant 'play' button doesn't play the video).

Can Flash objects react to events in this fashion? Is there something special about Flash in the DOM that requires something other than JavaScript event delegation to activate responses from it?

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>Delegating click events from a DOM element to an underlying Flash object</title>
    </head>
    <body>
        <object type="application/x-shockwave-flash" name="StrobeMediaPlayback" data="assets/StrobeMediaPlayback.swf" width="640" height="480" id="StrobeMediaPlayback" style="visibility: visible; position: absolute; top: 0; left: 0;">
            <param name="allowFullScreen" value="true">
            <param name="wmode" value="transparent">
            <param name="flashvars" value="src=http://mediapm.edgesuite.net/strobe/content/test/AFaerysTale_sylviaApostol_640_500_short.flv&autoPlay=false&verbose=true&controlBarAutoHide=false&controlBarPosition=bottom&poster=assets/images/StrobeMediaPlayback.png">
        </object>
        <script type="text/javascript">
            var smp = document.getElementById('StrobeMediaPlayback');
            smp.addEventListener('click', function (e) { console.log('CLICK'); }, false);
            addCanvas();
            
            function addCanvas() {
                canvas = document.createElement('canvas');
                canvas.width = 640;
                canvas.height = 480;
                canvas.style.position = 'absolute';
                canvas.style.top = '0px';
                canvas.style.left = '0px';
                canvas.addEventListener('click', function (e) { evt(smp, e); }, false);
                ctx = canvas.getContext('2d');
                document.body.appendChild(canvas);
            }
            
            function evt(el, e) {
                var event = document.createEvent('HTMLEvents');
                event.initEvent(e.type, true, true);
                for (var key in e) {
                    event[key] = e[key];
                }
                el.dispatchEvent(event);
            }
        </script>
    </body>
</html>

braitsch · Accepted Answer · 2012-06-15 21:54:44Z

1

Use ExternalInterface to communicate between your SWF and the DOM.

You can create a function inside your SWF and then call that ActionScript function from JS using:

ExternalInterface.call( functionInsideYourSWF )

In your case you would call your ActionScript function when someone clicks on your canvas element, then have Flash handle that click event internally with whatever you define inside your ActionScript function, e.g. play your video.

edited Jun 15, 2012 at 21:54

answered Jun 15, 2012 at 21:44

braitsch

15.4k5 gold badges45 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

natlee75 Over a year ago

Thanks for your response, @braitsch! We'll look into this suggestion. I was hoping that there was a more JavaScript based way to do this, but it seems more and more like we'll have to go down this route having the Flash object define the handlers internally. Thanks again!

braitsch Over a year ago

You're welcome, I've been a Flash developer for 10 years and this is the way to communicate between Flash and the DOM. If you found this helpful go ahead and accept this as the answer. Cheers.

natlee75 Over a year ago

I've accepted the answer because it does resolve the general question I have. It unfortunately doesn't work for our specific case, which is to activate fullscreen mode for a video playback Flash app. In this case, security is an issue so Flash seems to require that the Flash object itself is the direct target of the click event. Any attempts we've made to "delegate" the click event from another DOM element to the Flash object results in JavaScript recognizing the event but the Flash object not reacting to it. Any suggestions of how to get around this? :-)

braitsch Over a year ago

If you have an ActionScript function inside your Flash movie that is telling your video to play fullscreen it shouldn't matter how that function is invoked. If you're able to post your code somewhere I can help you figure this out.

natlee75 Over a year ago

Unfortunately the Flash code isn't mine... I'm just interfacing with it. The problem stems from security issues so the programmatic invocation of Flash fullscreen mode is blocked... it needs to be invoked via an explicit event from the user.

Collectives™ on Stack Overflow

Can click event handlers in a Flash object react to click events delegated by JavaScript from another DOM element?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related