Communication between javascript and Flash - javascript

I´ve already added:
ExternalInterface.addCallback('sendToActionScript', setKeyboardFocus);
ExternalInterface.call("setFocus", 'pathfinder');
inside the init() function of my main class.
In html I have this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>pathFinder</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body { height:100%; background-color: #333333;}
body { margin:0; padding:0; overflow:hidden; }
#flashContent { width:100%; height:100%; }
</style>
<script type="text/javascript">
function getFlashMovie(movieName) {
var isIE = navigator.appName.indexOf("Microsoft") != -1;
return (isIE) ? window[movieName] : document[movieName];
}
function callToActionscript(str)
{
var fm = getFlashMovie("pathfinder");
fm.sendToActionScript(str);
}
function setFocus(id){
var f = document.getElementById(id);
f.focus();
callToActionscript('test')
}
</script>
</head>
<body>
<div id="flashContent" align='center'>
<table width="100%" height="100%" border="0" align="center" cellpadding="0"
cellspacing="0">
<tr>
<td align="center" valign="middle" bgcolor="#333333"><table width="1050" border="0"
cellpadding="0" cellspacing="0">
<tr>
<td>
<div align="center">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#versio
n=6,0,0,0"
WIDTH="1050"
HEIGHT="600"
id="pathfinder"
ALIGN="middle">
<PARAM NAME=movie VALUE="pathFinder.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#333333>
<EMBED src="pathFinder.swf" quality=high bgcolor=#333333 WIDTH="1050" HEIGHT="600"
NAME="pathfinder" ALIGN="middle" TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer" allowScriptAccess="always">
</EMBED> </OBJECT></div></td></tr></td></tr></table>
</div>
</body></html>
In the main stage I have a dynamic text field instance 'test_txt' to check if the function is called.
So after the ExternalInterface code I have:
private function setKeyboardFocus(str:String):void {
stage.addEventListener(KeyboardEvent.KEY_DOWN,checkKeysDown);
stage.addEventListener(KeyboardEvent.KEY_UP,checkKeysUp)
test_txt.text = str
}
The problem is flash doesn´t get keyboard focus ( the event listeneres of KeyboardEvent are never added ), the function setKeyboardFocus is never called.
Any help?

According to one source I found, you need to add allowScriptAccess="always" in two places.
Where you have it, in the <EMBED ... allowScriptAccess="always"> </EMBED> block.
You also need <PARAM NAME="allowScriptAccess" VALUE="always" > with the other PARAM blocks

Verify that fm is being assigned to the object or embed component. You should be able to verify this using the javascript debugging tools in Chrome or in Firefox. I think it's here where you're going wrong. This is a completely non-standard html wrapper from what I've seen myself but for the most part it appears you have things in order. One thing that is going to be wrong though is that the Object tag and information will be applied for IE, the Embed tag information will be applied for browsers that use the Netscape plugin (Firefox... well everything but IE). Also I'm not seeing an id on the Embed element, I think you need to also give this an ID like you did with the Object, I'm not sure if you'll get javascript errors if you use the same exact ID, I would probably call it pathFinderE or something like that then modify this method:
function getFlashMovie(movieName) {
var isIE = navigator.appName.indexOf("Microsoft") != -1;
return (isIE) ? window[movieName] : document[movieName + "E"];
}

Related

Not able to click on a flash object

How to click flash object inside a frame. HTML code is given below.
I found many related topics but none of them resolved my issue. So I am posting my HTML code here. I am new to selenium so please bear with me.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Visualizer Plugin</title>
<link href="../../plugins/Visualizer/resources/css/mystyle.css" rel="stylesheet" type="text/css">
<script src="../../plugins/Visualizer/resources/javascript/flex.js" type="text/javascript">
</script>
<script src="../../plugins/Visualizer/resources/javascript/PluginSupport.js?server=blt05574004" type="text/javascript">
</script>
<script src="../../plugins/Visualizer/resources/javascript/BaseController.js" type="text/javascript">
</script>
<script src="../../plugins/Visualizer/resources/javascript/Setup.js" type="text/javascript">
</script>
<style type="text/css" media="screen">
body {
margin: 0px;
overflow: hidden
}
</style>
</head>
<body scroll="no" style="background-color: transparent;" onload="initSetupScript();">
<div align="center">
<div id="flashcontent">
<object width="100%" height="100%" id="Visualizer" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
<param name="allowFullScreen" value="true">
<param name="align" value="middle">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<param name="allowScriptAccess" value="sameDomain">
<param name="type" value="application/x-shockwave-flash">
<param name="src" value="../../plugins/Visualizer/resources/swf/../../plugins/Visualizer/resources/swf/Visualizer.swf?r=7.5.00">
<param name="flashvars" value="bridgeName=Visualizer">
</object>
</div>
</div>
<script language="JavaScript" type="text/javascript">
var src = "../../plugins/Visualizer/resources/swf/Visualizer";
var id = "Visualizer";
var uri = "../../plugins/Visualizer/resources/swf/";
var flashvars = "";
var release = "7.5.00";
createSWF(src, id, uri, release, flashvars);
</script>
</body>
</html>
So you need flashcontent it not flash exactly. You can use below XPATH
//div[#id='flashcontent']//param[#name='quality']
Above xpath will return the value as quality element
Note : If above element is comes under any frame then you need to switch it first
If Selenium can't operate on Flash content. You need to use another framework for automating the Flash content like : Sikuli
Refer :
http://www.softwaretestinghelp.com/sikuli-tutorial-part-1/
http://www.sikuli.org/testimonials.html
Hope it will help you.

Cross Domain set iframe height dynamically

I have looked up many examples for cross domain iframe height but none of them were able to solve the issue.
I have an simple HTML given below. I want to resize the iframe inside it according to the height of the content.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body >
<table width="780" height="406" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#333333" style="border:1">
<tr>
<td valign="top"><table width="778" border="0" cellspacing="0" cellpadding="0">
</td>
</tr>
</table>
<iframe src="http://mywebapplication.com" width="100%" ></iframe
<table width="780" border="0" cellpadding="0" cellspacing="0" bgcolor="53575f">
<tr>
<td align="center" height="38"><span class="Footer">All Rights Reserved © ABC 2009-2012.
</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
What i Have tried
using a second javascript file added to the iframe to send a postMessage back to the parent.
HTML Page containing iframe
<iframe src="http://mywebapplication.com" width="100%" id="zino_iframe"></iframe>
<script type="text/javascript">
var zino_resize = function (event) {
alert("sds");
var zino_iframe = document.getElementById('zino_iframe');
if (event.origin !== "http://hrcraft.noviavia.com") {
return;
}
//alert(zino_iframe);
if (zino_iframe) {
alert(event.data);
zino_iframe.style.height = event.data + "px";
}
};
if (window.addEventListener) {
window.addEventListener("message", zino_resize, false);
} else if (window.attachEvent) {
window.attachEvent("onmessage", zino_resize);
}
window.addEventListener("message", myListener, false);
function myListener(event) {
if (event.origin !== "http://hrcraft.noviavia.com") {
return;
}
//do something
}
The function for sending height is also added on the master page of the mywebapplication.
I have been following this example
http://zinoui.com/blog/cross-domain-iframe-resize
Although the question is in relation to solving an issue with the OP own personal code. Their is a tried and tested library can be used to solve the issue of resizing an iframe to the contents height. This library deals with cross domain and so I think it is worth mentioning.
https://davidjbradshaw.github.io/iframe-resizer/
you place two files one in the parent one in the child (iframe)
in your parent:
<style>iframe{width:100%}</style>
<iframe src="http://anotherdomain.com/iframe.html" scrolling="no"></iframe>
<script>iFrameResize({log:true})</script>
In your child you just add this file:
iframeResizer.contentWindow.min.js
The library takes care of the resizing and also cross domain. Check the docs.

Pass URL Parameter from Javascript to Flash Object in HTML

I have no HTML knowledge, I just have a simple task that I can't seem to grasp the concept of doing.
I want to take a url parameter and pass it to a swf object. I've figured out getting the parameter via javascript, but getting that return string to the object is my issue.
<!DOCTYPE html>
<html>
<body>
<script>
function myFunction() {
return "http://www.Twitch.tv/swflibs/TwitchPlayer.swf?channel=twitch";
}
</script>
Link Example
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="800" height="600" id="mymoviename">
<embed src="#" onload="this.src=myFunction()" quality="high" bgcolor="#ffffff"
width="800" height="600"
name="mymoviename" align="" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>
</body>
</html>
Markup based on Suggested answer(still does not work)
<!DOCTYPE html>
<html>
<body>
Link Example
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
width="800" height="600" id="mymoviename">
<embed src="#" quality="high" bgcolor="#ffffff" width="800" height="600"
name="mymoviename" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>
<script>
function myFunction() {
return "http://www.Twitch.tv/swflibs/TwitchPlayer.swf?channel=twitch";
}
document.getElementById('mymoviename').src = myFunction();
</script>
</body>
</html>
You can do it by following the following steps.
Move your <script> to just before </body>
And add the below code in <script>:
Code:
function myFunction() {
return "http://www.Twitch.tv/swflibs/TwitchPlayer.swf?channel=twitch";
}
document.getElementById('mymoviename').src = myFunction();
I found this article:
http://www.permadi.com/tutorial/flashVars/
Instead of passing the javascript variable to html markup, just write the markup with the script itself. Here is the working code:
<HTML><HEAD><TITLE>Example</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
var myQueryString=document.location.search;
// remove the '?' sign if exists
if (myQueryString[0]='?')
{
myQueryString=myQueryString.substr(3, myQueryString.length-1);
}
document.write(
'<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://macromedia.com/cabs/swflash.cab#version=6,0,0,0" WIDTH="250" HEIGHT="250" id="flaMovie1"> <embed src="'+myQueryString+'" quality="high" bgcolor="#ffffff" width="800" height="600" name="mymoviename" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">\n'+
'</embed>\n'+
'</OBJECT>');
</SCRIPT>
</BODY>
</HTML>

How to detect when a Flash movie gets focus in Javascript code?

Is it possible to create a such event? If yes, how?
The markup for a flash movie is something like the next. Without changing ActionScript code of flash movie.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="32" height="32">
<param name="movie" value="file://test.swf">
<param name="quality" value="high">
<embed src="file://test.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="32" height="32">
</embed>
</object>
Yes, you can do so in JavaScript.
First, it is a good idea to use swfobject to handle cross browser Flash issues. This is a JavaScript library to control SWF objects. You can download it here: https://code.google.com/p/swfobject/downloads/list
Basic Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject - low level dynamic publishing example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
if (swfobject.hasFlashPlayerVersion("6.0.0")) {
var fn = function() {
var att = { data:"test.swf", width:"780", height:"400" };
var par = { flashvars:"foo=bar" };
var id = "replaceMe";
var myObject = swfobject.createSWF(att, par, id);
};
swfobject.addDomLoadEvent(fn);
}
</script>
</head>
<body>
<div id="replaceMe">Alternative content</div>
</body>
</html>
Next, just expand the example with an id inside the att variable like so:
var att = { data:"test.swf", width:"780", height:"400", id:"myId" };
You can access the object with getElementById() or a jQuery selector $("#myId")
Then attach an event to on focus like so:
JQuery: (recommended)
$('#myId').focus(function() {
alert('SWF is in focus');
});
or
Standard:
object.onfocus=function(){ alert('SWF is in focus'); }
You can place the player in a div, and select the div using javascipt. Also there is a more info here:
https://github.com/englandrp/Cross-browser-Flash-tabbing-and-focus-solution

Accessing an ActionScript function via Javascript

I'm trying to call a function in an action script using the ExternalInterface.addCallback API, but I can't seem to get it to work. Here's what I have:
ActionScript:
//MyClass.as
package {
import flash.display.Sprite;
import flash.external.ExternalInterface;
public class MyClass extends Sprite
{
public function MyClass()
{
ExternalInterface.addCallback('getStringJS', getStringAS);
}
public function getStringAS():String
{
return "Hello World!";
}
}
}
NOTE: I'm compiling this into an swf using the flex mxmlc compiler if that matters.
HTML/Javascript:
<!doctype html>
<html>
<head>
<title>User Identification</title>
<head>
<body>
<object id="MyClass" name="MyClass" type="application/x-shockwave-flash" data="MyClass.swf" width="1" height="1">
<param name="movie" value="MyClass.swf">
<embed src="MyClass.swf" width="1" height="1">
</object>
<script type="text/javascript">
var flash = document.getElementById("MyClass");
var str = flash.getStringJS();
alert(str);
</script>
</body>
</html>
The error I'm getting is:
Uncaught TypeError: Object #<HTMLObjectElement> has no method 'getStringJS'
I also tried adding in a timeout in case the swf file wasn't loading, but I didn't have any success with that method either.
Any thoughts?
Cheers,
Mike
I figured it out. The key way to signal the javascipt through ExternalInterface.call so we know for sure that the swf is loaded. The most "Universal" way to do this is as follows:
MyClass.as
//MyClass.as
package {
import flash.display.Sprite;
import flash.external.ExternalInterface;
public class MyClass extends Sprite
{
public function MyClass()
{
ExternalInterface.addCallback('getStringJS', getStringAS);
if (ExternalInterface.available) {
ExternalInterface.call("isConnectedFlex");
}
}
public function getStringAS():String
{
return "Hello World!";
}
}
}
index.html
<!doctype html>
<html>
<head>
<title>User Identification</title>
<head>
<body>
<object id="MyClass" name="MyClass" type="application/x-shockwave-flash" data="MyClass.swf" width="1" height="1">
<param name="movie" value="MyClass.swf">
<embed src="MyClass.swf" width="1" height="1">
</object>
<script type="text/javascript">
var flash = document.getElementById("MyClass");
function isConnectedFlex() {
var str = flash.getStringJS();
alert(str);
}
</script>
</body>
</html>
I think the issue is a matter of the flash not being loaded. I tried your code using the window.onload event and it worked for me:
The flash is the same...
HTML/JS :
<!doctype html>
<html>
<head>
<title>User Identification</title>
<head>
<body>
<object id="MyClass" name="MyClass" type="application/x-shockwave-flash" data="MyClass.swf" width="1" height="1">
<param name="movie" value="MyClass.swf">
<embed src="MyClass.swf" width="1" height="1">
</object>
<script>
window.onload = function() {
var flash = document.getElementById("MyClass");
var test = flash.getStringJS("test");
alert(test); //pops up with "Hello World!" on Firefox
};
</script>
</body>
</html>
Does that help?

Categories

Resources