JavaScript Onclick Event Over Flash Object

javascript onclick event over flash object

It is best to think of all swf's as having a z-order of infinity. Flash is on top and there is very little which can be done to stop that. On the other hand, if you have access to the code of the SWF itself, or if you can use another swf to load your current swf, you'll be able to use a couple of different Flash commands to address the JavaScript of the page. (ExternalInterface is your best bet).

//This is what your AS code should look like:
import flash.external.ExternalInterface;
import flash.events.MouseEvent;

root.addEventListener( MouseEvent.CLICK, useExternal, true );

function useExternal( event:MouseEvent):void
{
    //swfClickFunction is defined in JavaScript
    ExternalInterface.call( "swfClickFunction" );
}

Another alternative solution using onmousedown instead of onclick is provided by Darwin below.

Click to Flash object via JavaScript

Yes and no. You can use the ExternalInterface to simulate click events in your Flash project, provided they don't care about the event source (i.e. human or not).

However, one of the features in Flash that's particularly obtuse about the click event source is the File Selection dialog. It's not possible to trigger that without a real click from a real user (as far as the browser is concerned); this would actually be a potential security risk if possible. If I remember correctly, this was possible before FP 9 and we exploited this behavior for our file uploader. This started to cause issues once they fixed it, but I'm glad they did so :)

The typical way to overcome this limitation is by creating a transparent Flash object and positioning a layer over it that shows a button image; the click event will eventually hit the Flash object and trigger a user click event.

How to have onClick Javascript event on Flash object

There is no need to use Javascript if you want Google Analytics within Flash. There is library for that:

http://code.google.com/intl/sk/apis/analytics/docs/tracking/flashTrackingIntro.html

I've done it many times using it and it works perfectly.

playGame.addEventListener( MouseEvent.CLICK, onButtonClick ); 
function onButtonClick( event:Event ):void 
{     
  tracker.trackPageview( "/started-game");
  //if user started game you'll see it as an access of subpage "/started-game" in your Analytics account

} 

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

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.

Detect Flash object click in JavaScript

Thank you Marty Wallace and Darwin!

<div id='flash'>
<object>
<param name='wmode' value='transparent' />
<embed src='foo.swf' wmode=transparent allowfullscreen='true' allowscriptaccess='always'>
</embed>
</object>
</div>

<div id='output'></div>

<script type='text/javascript'>
$('#flash').mousedown(function (e){
    $('#output').append('<br>X: ' + e.pageX + ' ; Y: ' + e.pageY);
});
</script>

After testing, the XY coordinates of any clicks on the Flash object will be accurately printed to the screen and mouse interaction with the Flash object will proceed as normal.

invoke flash click event from javascript

You can expose (invoke) your flash functions from javascript by using the ExternalInterface class and adding a callback.

AS3 (flash) code:

ExternalInterface.addCallback('nameForJStoCall',flashFunctionName);

JS code:

document.getElementById('ZeroClipboardMovie_1').nameForJStoCall(yourParametersIfNeeded);

For more detailed examples: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/external/ExternalInterface.html

You cannot however

tell flash to dispatch true click events externally (for security reasons). Things like invoking fullscreen mode, or a FileReference box will not work unless an element is actually clicked in flash.

Flash (swf object) on click

You need to use ExternalInterface to push the flash button's click event out to your javascript function, I think it swallows all clicks otherwise.

http://www.adobe.com/livedocs/flash/9.0/ActionScriptLangRefV3/flash/external/ExternalInterface.html

Track a click on a flash movie (object / embed) with jQuery

If you have access to the source of SWF, you can use ExternalInterface to communicate with the containing html page.

//inside the flash movie:
stage.addEventListener(MouseEvent.CLICK, onClick);
function onClick(e:MouseEvent):void
{
   ExternalInterface.call("handleFlashClick", [parameters to the method]);
}

//javascript in the containing html page
function handleFlashClick()
{
  //call the jQuery method here.
}

---

Related Topics