jQuery swfobject AS3 ExternalInterface not working - javascript

As you can tell by the title, I am having some trouble with AS3 ExternalInterface and jQuery / swfobject.
ActionScript :
if (ExternalInterface.available) {
ExternalInterface.call('init');
ExternalInterface.addCallback('testFunc', returnFunc)
}
function returnFunc():void {
ExternalInterface.call('alertFunc');
}
jQuery:
function init() {
alert('init');
$('#swf_object').testFunc();
}
function alertFunc() {
alert('finished');
}
Obviously that implies the object has the id 'swf_object'
I have also tried getting the object by the following:
document.getElementById('swf_object')
document.getElementById('swf_object')[0]
$('#swf_object')[0]
To no avail.
It's giving the first alert ('init') but then not doing the last one. I'm completely baffled and hope someone can point out my mistakes! (there's bound to be a massively obvious one somewhere)

The problem is that you're calling out to the JavaScript init() which calls the Flash testFunc() before you're made testFunc available (which happens only after the call out to init() completes).
To fix this, simply swap the two lines to this:
ExternalInterface.addCallback('testFunc', returnFunc); // Needs to be available before it's used
ExternalInterface.call('init');
As for getting the Flash object in JavaScript, you can do it directly with document.getElementById('swf_object'), but it's possible using jQuery too:
var swf = $('#swf_object').get(0); // Get the actual object without the jQuery wrapper

Related

jquery classes and subclassing

I'm currently working on an existing project trying to figure out what is what.
I have this piece of code that I'm wondering what it actually does and how to call a specific function in this class:
(function fileactions($) {
$(function init() {
$(document).bind('file-delete', fileDelete);
}
function fileDelete() {
alert('do something');
}
function callThisFunction() {}
})(jQuery);
So I've been working like above as that code was already there, but now I need to call the function callThisFunction() from outside the fileactions object (is it even an object?).
I'm far from a javascript expert, as far as I could tell from google that this is a way of subclassing?, does this mean I'm extending jQuery with the function created in fileactions?
The fileDelete method is simple, I can just trigger an event and it'll work, and so far I've only needed functionality like that.

Cannot Call a Flash Function from Javascript

I've been all over here and can't find an answer. I have a .swf sitting in an HTML page and I am trying to call a function inside of it from javascript. I can talk out from flash to the javascript but I can't get it to talk back in. I know I am targeting the object properly because I use console.log() on it and confirms what it is targeting.
I'm triggering the test from flash, calling a javascript function from inside the .swf, and having that function call the internal Flash function.
Flash Code:
//adds callback
ExternalInterface.addCallback("sendToFlash", flashTalkedTo);
//function called by the callback
public function flashTalkedTo():void{
//runs another function in javascript to log a string
ExternalInterface.call("callMe")
}
//calls javascript that tries to talk to Flash
ExternalInterface.call("catchFromFlash")
Javascript Code:
//function called by Flash that initiates
function catchFromFlash(){
talkToFlash()
}
//function that tries to talk to flash
function talkToFlash(){
document.getElementById('Noodleverse').sendToFlash()
}
//function called by Flash in the end to confirm call made
function callMe(){
console.log("Call Me")
}
Any help works, thanks!
Flash, and plugins in general, are a little bit fiddly. They don't behave quite like normal elements, and their functions don't behave quite like normal functions. For example, you can't save the element into a value and call a function from that. You also need to be careful because in some browsers the object is used and in others the embed is used.
The best way to call a function is to use swfobject (https://code.google.com/p/swfobject/) to abstract everything. Personally though, I use this (based on experience, maybe somebody can offer improvements):
HTML:
<object id="myplugin" ...>
...
<embed name="myplugin" ... />
</object>
JavaScript:
var o1=document.myplugin;
if(o1&&!!o1.myFlashFunction){
return document.myplugin.myFlashFunction(); // DO NOT USE o1 here. It will fail.
}
var o2=window.myplugin;
if(o2&&!!o2.myFlashFunction){
return window.myplugin.myFlashFunction(); // DO NOT USE o2 here
}
The first case (document) is for most new browsers. For example, Chrome will find the embed object. The second (window) is for IE and finds the object (IE, at least old IE, ignores embed). I'm not 100% sure the second is needed, because IE might also work with document, so call that voodoo code. Also window.myplugin will give an array of all matching elements in Chrome, FireFox, etc. (but we expect those to already be taken care of)

AS3 - ExternalInterface.addCallback, Access of undefined property

I am trying to use javascript to run AS3 functions. When I attempt to compile I'm getting an "Access of undefined property" error message.
I've read a few things online about this but I'm still not understanding it. I want to have the flash file always listening for javascript.
Here is my AS3 code:
ExternalInterface.addCallback("song4", PauseMusicExt);
And my Javascript & HTML:
function returnVar3(song3) { return this[song3]; }
<input type="submit" name="playButton" id="playButton" value="Submit" onClick="returnVar('song3')"/>
Edit: Here is the pauseMusic function:
function pauseMusicExt():void
{
songPosition = channel.position;
channelSilence.stop();
channel.stop();
channel2.stop();
btnPlay.mouseEnabled = true;
}
I'm not sure about the extend of your app but you've got your addCallback function parameters mixed up..
See the doc, the first parameter is the name you want to expose the function as to javascript, the second is the actual internal AS3 function you want to trigger.
So the declaration should likely be something like:
ExternalInterface.addCallback("song4", pauseMusic);
(assuming that your function in the same scope as where you call addCallback)
That statement will create a "song4" method that you can call on your flash dom object
var fl = document.getElementById('myflashobject');
fl.song4()
After there's the issue that pauseMusic want a parameter (looks like you've made it a mouse event handler). You probably want to have a clean method that doesn't require a parameter like an internal as3 event param. Rewrite pauseMusic so it doesn't require it (you might need to create another method to handle the mouse event internally - like onPause(evt:MouseEvent), which then calls pauseMusic.
Edit: I don't know if a lot of people thought about doing that, but you can also totally use external interface to call firebug's console.log function to send messages to Firebug from flash (it's really helpful for debugging ExternalInterface issues, or any other flash problems - see the ExternalInterface.call function)
Hope u want to pause the audio player.
AS code :
ExternalInterface.addCallback("sndToAS",rcvdFmJS);
function rcvdFmJS(val){
if (val == "pause"){
audioPause();
}
}
JS code :
document.getElementById("movie").sndToAS("pause");

referencing the html object that made the ExternalInterface.call to the javascript function called

i apologize if my terminology is off, my actionscript skills are pretty weak sauce.
so, i have some actionscript that makes a
ExternalInterface.call('someFunction');
call.
is it possible to reference the html object that made the call to someFunction directly using the ExternalInterface.call call?
Assume that the object that makes the call also has some Callbacks (via ExternalInterface.addCallback) that are accessible via javascript.
Currently:
Actionscript source
ExternalInterface.call("someFunction");
ExternalInterface.addCallback("someCallback",someASfunction);
Javascript source
function someFunction(){
document.getElementById('idOfSWFObject').someCallback();
}
I'm thinking there must be a way of:
Actionscript source
ExternalInterface.call("someFunction",THE_OBJECT_MAKING_THE_CALL);
ExternalInterface.addCallback("someCallback",someASfunction);
Javascript source
function someFunction(o){
o.someCallback();
}
once again, sorry about the terminology. tried to lace it with as many keywords for future searches.
thanks!
I guess you are talking about ExternalInterface.objectID. This property returns an id associated with flash container in object or embed tag.
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/external/ExternalInterface.html?filter_flex=4.1&filter_flashplayer=10.2&filter_air=2.en#objectID
I suggest that you should also pass the name of "someCallback" to you JS method. This way there will be no need to hardcode it in JS.
Here's an example
// Actionscript source
const jsMethodName:String = "someFunction";
const asCallbackName:String = "someCallback";
ExternalInterface.call(jsMethodName+"(document.getElementById("++")"++");");
ExternalInterface.addCallback(asCallbackName,someASfunction);
// Javascript source
function someFunction(flashId, callbackName)
{
var flashContainer = document.getElementById(flashId);
flashContainer["callbackName"]();
}
EDIT: If you really want to get a reference to flash DOM object in someFunction arguments, you may achieve it in a bit tricky way (I would rather not, but just for your interest).
// Actionscript source
const jsMethodName:String = "someFunction";
const asCallbackName:String = "someCallback";
ExternalInterface.addCallback(asCallbackName,someASfunction);
ExternalInterface.call(
"function(){"+
jsMethodName+"("+
"document.getElementById('"+ExternalInterface.objectID+"'),"+
"'"+asCallbackName+"'"+
");"+
"}"
);
// Javascript source
function someFunction(flashContainer, callbackName)
{
flashContainer[callbackName]();
}
This way you inject some JS code from flash into js. It works, but looks messy.

how to read a global javascript variable from actionscript

Given that there is a global javascript variable on my web page named myVar, how can I access the value of the variable myVar from within my flash movie using javascript?
I see plenty of examples of using external interface in order to execute javascript from actionscript, but I am unable to find examples of returning values back into the flash movie using actionscript.
Thanks in advance. I hope my question is clear enough.
ExternalInterface works by allowing JavaScript to invoke an ActionScript function in the movie, and vice-versa. You can optionally receive a return value back from the invoked function. Here's a very simple example:
JavaScript:
<script language="JavaScript">
function getMyVar()
{
return myVar;
}
</script>
Flash/AS:
import flash.external.ExternalInterface;
var result:string = ExternalInterface.call("getMyVar");
You can also provide an anonymous function that returns your global variable value to the ExternalInterface.call method as follow:
ExternalInterface.call("function(){ return myGlobalVariable; }");
I've noticed Rex M's answer is a bit incomplete.
He was right about using...
import flash.external.ExternalInterface;
var result:string = ExternalInterface.call("getMyVar");
Then in your javascript you can use
<script language="JavaScript">
function getMyVar() {
return myVar;
}
</script>
However in order to use this, the flash movie must be in an html accessed over http. Not using file://
Here is a tutorial for communicating from actionscript to javascript and vice versa.
http://www.youtube.com/watch?v=_1a6CPPG-Og&feature=plcp
You can also do this:
ExternalInterface.call("eval","getVar=function(obj){return obj}");
var yourVar:String = ExternalInterface.call("eval","getVar(JSvar)");

Categories