I am new to AS3, and would like to trigger an as3 function from javascript.
AS3
package code {
import flash.display.MovieClip;
import flash.external.ExternalInterface;
import flash.text.TextFormat;
public class Main extends MovieClip {
public function Main() {
ExternalInterface.addCallback("changesize", this.setStyle);
}
protected function setStyle() {
var tf:TextFormat = new TextFormat();
tf.size = 15;
editabletext.setTextFormat(tf);
}
}
}
html
<html><head>
<meta charset="UTF-8">
<title>animator</title>
<style type="text/css" media="screen">
html, body { height:100%; background-color: #ffffff;}
body { margin:0; padding:0; overflow:hidden; }
#flashContent { width:100%; height:100%; }
</style>
</head>
<body>
<div id="flashContent">
<object type="application/x-shockwave-flash" data="animator.swf" width="550" height="400" id="animator" style="float: none; vertical-align:middle">
<param name="movie" value="animator.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#ffffff">
<param name="play" value="true">
<param name="loop" value="true">
<param name="wmode" value="window">
<param name="scale" value="showall">
<param name="menu" value="true">
<param name="devicefont" value="false">
<param name="salign" value="">
<param name="allowScriptAccess" value="always">
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player">
</a>
</object>
</div>
<script type="text/javascript">
var animator = document.getElementById('animator');
animator.changesize();
</script>
</body></html>
animator.changesize() gives me Uncaught TypeError: animator.changesize is not a function
I have also tried changing allowscript access between sameDomain and always. neither seems to work
It's a timing issue. The callback will only get added to the DOM once the SWF has been loaded by the Flash Player and the Main constructor is executed, but you are trying to call it immediately when the DOM is parsed.
Since the DOM is always going to be parsed before the SWF is loaded (and the callback is added) you should not assume that the SWF callback is always there and ready to be called. Instead, the SWF should call into JS when it is ready.
As mentioned in the comments, first check if ExternalInterface.available is true and test on a server (could be localhost if you set one up locally).
I also notice you have an <object> but no <embed> tag. Some browsers use the object tag, while others use the embed tag. Make sure the id and name for these tags are the same.
Even better, I recommend using swfobject as it takes care of these issues and make the code a bit cleaner. Please have a look at the SWFObject External Interface article and example
Related
After a long day of searching on the web, i didn't find any solution to my problem.
I have a problem loading an swf file in my webPage using swfObject, doesn't work in IE11 ( works fine in ie8-10, firefox and chrome)
Here's my context :
This is the initialization of the params send to IE through the swfObject
`
// For version detection
var swfVersionStr = "10.0.0";
// To use express install, set to playerProductInstall.swf
var xiSwfUrlStr = "commun/swf/playerProductInstall.swf";
//FlashVars : contains an url used for an http request that returns the crossdomain.xml file with the crossDomainPolicy...
var flashvars = {
crossdomainURL : httpOrigin + "the.url.to.crossdomain.policy.file"
};
var params = {};
params.quality = "high";
params.bgcolor = "white";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "dematMultiuploader";
attributes.name = "dematMultiuploader";
attributes.align = "middle";
swfobject.embedSWF(
"the/url/to/SWFfile.swf", "falshContentID",
"550", "280",
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
`
And here's my object tag
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550" height="280" id="dematMultiuploader">
<param name="movie" value="path/to/swf/file.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="white" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="gedemat/gecco/piece/pieceDocument.create.swf"
width="350" height="130" id="dematMultiuploader">
<param name="quality" value="high" />
<param name="bgcolor" value="white" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<!--<![endif]-->
<!--[if gte IE 6]>-->
<p>Either scripts and active content are not permitted to run or
Adobe Flash Player version 10.0.0 or greater is not installed.</p>
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer"> <img
src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
alt="Get Adobe Flash Player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</noscript>
As you can see there's no flashVars param in the Object tag for IE, could that be the problem?
May be IE changed some parameters names for IE11 like crossDomainUrl?
I tryed already to put the flashvars param in the object tag with the crossDomain url but it didn't work.
In firefox and chrome i get this error :
NetworkError: 404 not found - http://localhost:8080/crossdomain.xml
So they try to load the file directly at the root of the server without any success but it still works because the crossdomain.xml has already been loaded before this call. Maybe IE is having trouble finding this file at that particular moment? not taking into account the ones loaded before?
Any Ideas?
Found the solution!
in the official documentation of Internet Explorer 11 I found this :
The preinstalled version of Adobe Flash isn't supported on Internet Explorer 11 running on either Windows 7 SP1 or Windows Server 2008 R2 with SP1. However, you can still download and install the separate Adobe Flash plug-in.
here's the link to it : http://technet.microsoft.com/en-us/library/dn268945.aspx
Since i'm runing on Windows 7 SP1 I reinstalled and everything worked again.
http://get.adobe.com/fr/flashplayer/otherversions/
Removing the <noscript> should help.
falshContentID is not found in the html part. Remove the entire object tag and add
the below code in html area.
<div id="falshContentID"></div>
I have a webpage with several swf movies that is created in dreamweaver and outputs several object tags like such:
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="160" height="600">
<param name="movie" value="Banners Template/Example_160x600.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="9.0.45.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="Banners Template/Example_160x600.swf" width="160" height="600">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="9.0.45.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
I would like to do the following:
The Swf animation runs once through on page load(This is
currently happening)
Once user clicks a 'Replay Movie' button,
the swf it is associated with will replay until the movie finishes.
I have been trying to find some code that can utilize javascript or jQuery to either reload the contents of the object tag or replay the swf with no success. How can I replay a swf movie on jquery button click?
demo: http://jsfiddle.net/tive/Ff7Mq/
demo2: http://jsfiddle.net/tive/J6WQm/
capture the event and change the source of the file.
Or use your swf object to render the div again.
var initVideos = function () {
var divs = $("ul li a");
// bind your click event to the divs
divs.click(function (e) {
e.preventDefault(); // use this when you're triggering anchor tags
flashembed("videoArea", $(this).prop("href"));
divs.removeClass("active");
$(this).addClass("active");
});
};
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How do I make flex only consume mouse scroll and keyboard events when it's useful, and otherwise pass it on to the browser?
I'm making a web application with hotkey support, but the application utilizes flash quite heavily in the form of justin.tv stream embeds. I'm worried that once a user presses play or stop or focuses the flash field in any other way it will eat all subsequent key events before they reach Javascript. I'm worried because I know that the YouTube flash field does this; once it's focused I can't close the browser window with CTRL+W or CTRL+Tab into another tab.
Is that unique to the YouTube flash player? If not, is there anything I can do on the Javascript side to make sure focus remains on my application, allowing my hotkeys to function?
Any additional information on the topic of Javascript key events and browser plugins would be appreciated.
PS: I am aware I can deny access to the Flash field altogether by means of an invisible div overlay, but I would prefer any user to be allowed to play/stop and control the volume of the embedded stream.
This solution has only been tested on Firefox on Windows.
The main problem seems to be removing keyboard focus from Flash. Setting focus to Flash has some solutions on SO already.
After some playing around, I figured out that using jQuery (latest), you can direct focus to a form's text box, which will seize the control of keyboard input from Flash. The solution follows this process:
ExternalInterface in Flash sends a command to javascript
Javascript (using jQuery in this example) sets focus to a form text field
Javascript removes focus from Flash (using this SO method to get to the Flash object)
Here is AS3 code. (I set this up in the Flash IDE, so you will have to adjust it if using external AS3 files):
import flash.events.KeyboardEvent;
stage.addEventListener(KeyboardEvent.KEY_DOWN, displayKey);
function displayKey(keyEvent:KeyboardEvent) {
/* You can use this commented code for limiting the keys that change focus. */
/*
var modifier:String="";
var keyPressed:String="";
if (keyEvent.ctrlKey) {
modifier="Ctrl + ";
} else if (keyEvent.altKey) {
modifier="Alt + ";
} else if (keyEvent.shiftKey) {
modifier="Shift + ";
}
keyPressed=keyEvent.keyCode.toString();
// make sure to add a textfield to the stage, and name it "myTextField" to make this line work:
myTextField.text= modifier + keyPressed;
*/
if (ExternalInterface.available) {
// Limit the keystrokes using javascript by using this method:
// ExternalInterface.call("sendToJavaScript", modifier + keyPressed );
// Any keystroke will unfocus:
ExternalInterface.call("sendToJavaScript", "");
}
}
Sample HTML/Javascript code follows; you will need swfobject.js file in the same directory. Note that the id for the Flash element is the default from the Flash IDE, and the id for the text input is text1.
<!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>testFocus</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body { height:100%; background-color: #ffffff;}
body { margin:0; padding:0; }
#flashContent { width:100%; height:100%; }
.focus {
border: 10px solid #00ffff;
background-color: #ff0000;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8"></script>
</head>
<body>
<div id="outerdiv"><form id="form1">
<input type="text" value="hmmm" id="text1">test</input>
</form>
</div>
<div id="flashContent">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="1024" height="768" id="testFocus" align="middle">
<param name="movie" value="testFocus.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#0033ff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="testFocus.swf" width="1024" height="768">
<param name="movie" value="testFocus.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#0033ff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<script language="JavaScript">
$(document).ready(function() {
// just for kicks:
$('#text1').blur(function(){
$(this).removeClass("focus");
});
// handles form's text input focus (referenced by element's id):
$('#text1').focus(function() {
//alert('Handler for .focus() called.');
$(this).addClass("focus");
removeFocusOnFlash();
});
});
function removeFocusOnFlash() {
// Find the Flash container:
var f = $('#flashContent');
if (f) {
// Hide flash:
f.tabIndex = 0;
f.blur();
f.removeClass("focus");
}
}
// This is called by the Flash file:
function sendToJavaScript(value) {
// set focus on the form's text input field:
$('#text1').focus();
}
</script>
</body>
</html>
Unless Flash is activated through user interaction, it doesn't receive key events. However, once it happens, it doesn't retransmit key events to DOM. Unfortunately, even though you could trap all keys in JavaScript, you wouldn't be able in general to notify Flash when you choose too. Flash won't also receive focus through tabbing, but once it has focus, will not transfer it back to the page. There are only certain key combinations that you can't listen to in Flash (because they are handled by the browser), such as Ctrl+O for example.
But if you have control over the code executed in Flash (at least, you have to be able to load foreign SWF into your own SWF), then you could pass keystrokes to it and from it. I'm not sure about the tabstops. I think it would depend on the browser and whether it allows JavaScript to call focus().
Here's a demo, it is for the right mouse click only, but it would be similar for other key/mouse events.
I have been bashing my head against this for a while now and need some fresh eyes:
I am trying to use the youtube JS api to call a function when the embedded videos state changes. But for some reason the event dosnt seem to be firing and I'm not getting any error in the console.
HTML:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="630" height="350" id="bannerVideo">
<param name="movie" value="http://www.youtube.com/v/6Yfd1uGYgk8?enablejsapi=1&version=3&playerapiid=ytplayer" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/6Yfd1uGYgk8?enablejsapi=1&version=3&playerapiid=ytplayer" width="630" height="350">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
Javascript:
function onYouTubePlayerReady(playerId) {
//alert(playerId);
ytplayer = document.getElementById("bannerVideo");
//alert(2);
ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
//alert(3);
//ytplayer.addEventListener("click", function(){alert('click');});
}
function onytplayerStateChange(newState) {
alert("Player's new state: " + newState);
}
Example site:
http://dev.stewartknapman.com/ytPlayer/
The code I am using is a direct copy & paste from the youtube api site and I am using swf object to embed the code. I am using the static embedding because I will be changing some stuff out with php, but this shouldn't matter... right?
I moved all the code out into its own file just for testing and its hosted on my development server so it shouldn't be a sandbox issue.
I have also tried alerting after every line just to make sure the addEventListener function is not failing. (I have left the alerts in my example code but commented them out.)
After searching previous posts about this error I have found that they were all solved by adding the ID to the right element or parsing the callback function as a string. So I double and triple checking these things but that doesn't seem to be the issue.
Any help would be greatly appreciated.
Have you tried initializing the flash embed using the SWFObject method (as outlined on the YouTube API)?
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/VIDEO_ID?enablejsapi=1&playerapiid=ytplayer&version=3",
"ytapiplayer", "425", "356", "8", null, null, params, atts);
Replace your tags with the above and configure it to your setup.
PROBLEM: when i press play the audio starts but the video does not.
CODE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JW Player for Flash</title>
</head><body>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("player","9.0.98","expressInstall.swf");
</script>
<object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="468" height="262">
<param name="movie" value="player-licensed.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="flashvars" value="file=Bioshphere-Museum-of-Water.flv&image=preview.jpg" />
<object type="application/x-shockwave-flash" data="player-licensed.swf" width="468" height="262">
<param name="movie" value="player-licensed.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="flashvars" value="file=video.flv&image=preview.jpg" />
<p>Get Flash to watch this video.</p>
</object>
</object>
</body>
</html>
LIVE EXAMPLE: http://solomongiles.com/mediamar/readme.html
Solutions?
Use the script found here, http://www.walkernews.net/2008/01/11/how-to-embed-flv-flash-in-wordpress-or-html/, with new player. It works in IE. I've also added allowfullscreen="true" allowsscriptaccess="always" after the size parameters. Plays in IE but no full screen. Help with this if you can please.
Works fine here in mac/safari 4.0.3.
However I do notice one thing - your flashvars for the object and param bits don't match up. They should be the same.
Also, you make want to look into a more flexible embedding solution such as SWFObject (it helps you do player detection and will let your document validate as XHTML as well)
<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="640" height="480"><param name="flashvars" value="file=http://www.webiste.com/admin/php_uploads/video.flv&image=imgs/image_large.jpg" /><param name="movie" value="flvplayer/player.swf" /><embed src="flvplayer/player.swf" width="640" height="480" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="file=http://www.webiste.com/admin/php_uploads/video.flv&image=imgs/image_large.jpg" /></object>