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

StackOverflow https://stackoverflow.com/questions/11058544

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>
Was it helpful?

Solution

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top