Home/ Questions/Q 8085713
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T18:12:58+00:00

I have a canvas element positioned absolutely over a Flash object of the same

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0