javascript向flash swf文件传递参数值注意细节


Posted in Javascript onDecember 11, 2012

问题:如何使用javascript向SWF文件传递参数?
在网上找了一个完整的教程,很有启发性和实用性,如下是完整实现的步骤:
配置SwfObject
Swfobject2是目前检测用户是否安装Flash的最佳方法。它被认为是‘行业标准',并且Adobe所有产品的新版本(Flex4,Flash CS5)都会使用SwfObject来检测Flash Player。
先要下载,解压ZIP文件,复制swfobject.js文件到你的web服务器上,根目录下创建名为'js'根文件夹是个不错的想法。(因此文件位置应该是http://myserver.com/js/swfobject.js)。我们会在以后创建的HTML文件中参考这个文件的。如果你想使用ExpressInstall功能(为用户提供简单的升级方法),你必须将expressInstall.swf复制到相同的文件夹下。
配置HTML文件
HTML文件包括两个Javascript。一个用来抓取来自网址的参数。这是由Matt White创建的,它虽然简单但十分有效。代码如下:

<script type="text/javascript"> 
/* Get URL Parameter in Javascript. Code from: http://mattwhite.me/11tmr.nsf/D6Plinks/MWHE-695L9Z */ 
function getURLParam(strParamName){ 
var strReturn = ""; 
var strHref = window.location.href; 
if ( strHref.indexOf("?") > -1 ){ 
var strQueryString = strHref.substr(strHref.indexOf("?")); 
var aQueryString = strQueryString.split("&"); 
for ( var iParam = 0; iParam < aQueryString.length; iParam++ ){ 
if ( aQueryString[iParam].indexOf(strParamName.toLowerCase() + "=") > -1 ){ 
var aParam = aQueryString[iParam].split("="); 
strReturn = aParam[1]; 
break; 
} 
} 
} 
return unescape(strReturn); 
} 
</script>

将如上代码放置到你的HTML文件的HEAD标签中。你同样需要将导入SWFObject脚本导入进来,代码如下:
<script type="text/javascript" src="/js/swfobject.js"></script>另一个Javascript是使用SwfObject插入SWF文件。你可以将其放置在HTML文件的任何地方。首先我们要做的是创建一个DIV标签,在没有安装合适的Flash Player时提示用户。
<div id="flashcontent"> 
<strong>This content requires Flash Player 9 (or a more recent version). 
<noscript>Make sure JavaScript is turned on. </noscript> 
You need to <a href="http://www.adobe.com/shockwave/download/index.cgi?p1_prod_version=shockwaveflash" target="_blank"> 
<span style="text-decoration: underline;">upgrade your Flash Player</span></a></strong> 
</div>

在DIV标签内你可以输入任何想输入的内容。添加图片或者反馈信息随你喜欢,因为这些内容都会被SWF文件所替换。
接下来是实现替换功能的Javascript:
<script type="text/javascript"> 
var flashvars = { test:getURLParam("test") }; 
var params = {}; 
var attributes = {}; 
swfobject.embedSWF("/articlefiles/jsvars/jsvars.swf", "flashcontent", "550", "400", "9.0.0","", flashvars, params, attributes); 
</script>

注意第二行,我们调用了Javascript函数'getURLParam',这个函数已经被插入到HTML文件中。我们所传递的名字正是希望从网址中捕获的参数名。
创建Flash文件
接下来该创建Flash文件了。将一个文本框添加到舞台上。在属性面板中设置为'动态文本',实例名为'mytextField'。通过点击'显示文本周围边框'实现在选中文本框时显示边框。
捕获传递进来的参数需要使用如下的try/catch语句:
try { 
var key:String; // This will contain the name of the parameter 
var val:String; // This will contain the value of the parameter 
var flashvars:Object = LoaderInfo(this.root.loaderInfo).parameters; 
for (key in flashvars) { 
val = String(flashvars[key]); 
mytextField.text = key+": "+val; 
} 
} catch (error:Error) { 
// what to do if an error occurs 
}

文件:jsvars_test.fla
将文件和HTML文件一并上传到服务器上。当运行文件时,你会看到文本框中的'test:'字样。
注意:如果SWF无法显示,你只看到了'升级Flash Player'字样,说明服务器上缺少某些东西。确保你已经将SwfObject文件(swfobject.js)上传到了http://myserver.com/js/swfobject.js。同时确保HTML文件中的SwfObject文件和SWF文件路径正确。如果仍然有问题,查看一下例子的源文件及路径。
接下来,试着像这样添加test参数http://www.flashmagazine.com/articlefiles/jsvars/jsvars_test.html?test=something.如果一切正常,你将会看到'test:something',表明你已经成功的将参数传递到Flash文件中。
更进一步
你同样可以设置来自SWF文件的参数。在这个例子中http://www.flashmagazine.com/articlefiles/jsvars/jsvars.html?test=something&id=someID我们同样实现了发送参数。
FLA文件包含两个分别命名为'variablesReceived'和'variablesToSend'的文本框,以及一个用来发送新参数的按钮。这个例子的HTMl文件被设置接收'test'和'id'两个参数。首先我们为第一个文本框添加一些说明性文字:
variablesReceived.text ="Variables passed in:" + " ";接下来该接收变量了:
try { 
var key:String; 
var val:String; 
var flashvars:Object = LoaderInfo(this.root.loaderInfo).parameters; 
for (key in flashvars) { 
val = String(flashvars[key]); 
variablesReceived.appendText("\t" + key + ": " + val + " "); 
} 
} catch (error:Error) { 
variablesReceived.appendText(error.toString()); 
}

这将会在第一个文本框中列举出所有的flashvars。我们在这个文件中使用到的另一个主要函数就是发送变量函数:
// Sending parameters 
function sendVariables(e:MouseEvent):void { 
// First we grab the URL of the HTML document and split it into an array 
var htmlUrl:String = ExternalInterface.call("window.location.href.toString"); 
// split the string at the questionmark 
var splitUrl:Array = htmlUrl.split("?"); 
// use only the first part (ditch existing parameters) 
var trimmedUrl:String = splitUrl[0]; 
// get the parameters we want to append to the URL 
var parameters:String = variablesToSend.text; 
// combine url and parameters with a new questionmark 
var requester:URLRequest = new URLRequest(trimmedUrl+"?"+parameters); 
// reload the page 
navigateToURL(requester, '_self'); 
}

这里我们使用了一个小小技巧,通过使用'ExternalInterface.call'捕获SWF文件插入的HTML文本的网址。Flash文件只知道指向自身的网址,这个技巧突破了这个限制。ExternalInterface在SwfObject默认情况下是被打开的,但你可以手动关闭它。

我们不需要当前网址中的参数(也就是'…?test=something&id=5′)。因此我们只保留了问号之前的部分并将其存储在'trimmedUrl'变量中以备将来之用。我们捕获'variablesToSend'文本框中的参数,并将其传递到URLRequest中。通过将request传递给'navigateToURL',浏览器会重新加载HTML页面并在'variablesReceived'文本框中显示最近提交的值对。

注意:你不能在Flash中测试它。需要将文件上传到服务器上,因为FlashVars和ExternalInterface都需要SWF被插入到浏览器中。

最后我们必须使用addEventListener为发送按钮设置调用'sendVariables'方法。
sendButton.addEventListener(MouseEvent.CLICK,sendVariables);现在你已经知道如何使用Javascript相互传递参数了。让我们用我们的所学做一些有用的事情。

创建记录状态的导航
结束之前,让我们构建一个小型菜单系统,这个系统可以高亮显示当前的点击按钮,你可以下载已完成文件或者运行案例,让我们看一下代码:
首先停止SWF的时间轴播放,为鼠标点击设置事件监听器。
stop();
// setup our 5 buttons
item1.addEventListener(MouseEvent.CLICK, gotoURL);
item2.addEventListener(MouseEvent.CLICK, gotoURL);
item3.addEventListener(MouseEvent.CLICK, gotoURL);
item4.addEventListener(MouseEvent.CLICK, gotoURL);
item5.addEventListener(MouseEvent.CLICK, gotoURL);当仍然一个按钮被点击,他们都会执行'gotoURL'函数。接下来,我们捕获来自网址的参数:

// grab variables 
try { 
var key:String; 
var val:String; 
var flashvars:Object = LoaderInfo(this.root.loaderInfo).parameters; 
for (key in flashvars) { 
val = String(flashvars[key]); 
if(key == "item"){ // If the parameter is called 'item'... 
if(val.substr(0,4) == "item"){ // ... and the name of the button starts with the characters 'item'... 
// ... we can extract the number-part of the item-name and go to the correct frame 
var frameToGoTo:Number = Number( val.substr(4,1) ); 
gotoAndStop( frameToGoTo+1 ); 
} 
} 
} 
} catch (error:Error) { 
// what to do if an error occurs 
}

正如你所看到的,这和之前的做法十分相似。但这次我们传递的参数名字为'item'。这个参数是我们点击的按钮的名字。
接下来是gotoURL函数。
// Get the new page 
function gotoURL(e:MouseEvent):void { 
// First we grab the URL of the HTML document and split it into an array 
var htmlUrl:String = ExternalInterface.call("window.location.href.toString"); 
// split the string at the questionmark 
var splitUrl:Array = htmlUrl.split("?"); 
// use only the first part (ditch existing parameters) 
var trimmedUrl:String = splitUrl[0]; 
// get the name of the button clicked and set it as a parameter 
var parameters:String = "item="+e.currentTarget.name; 
// combine url and parameters with a new questionmark 
var requester:URLRequest = new URLRequest(trimmedUrl+"?"+parameters); 
// reload the page 
navigateToURL(requester, '_self'); 
}

我们通过联合'item='字符以及点击的按钮名字创建自己的参数。然后将网址以及参数传递到navigateToURL方法中重新加载带有新参数的HTML页面。

事件是如何工作的:当一些东西被点击时我们使用addEventListener()方法监听点击事件,事件包含被点击的对象的引用。'currentTarget'属性会引用被点击的对象(e.currentTarget),这样一来我们就可以使用e.currentTarget.name获得其名字。

要成为一个完整的菜单系统,你还需要使加载新的网址,而不是像例子中使用相同的网址。你现在应该知道最基本的知识。它同时可以以多种方式运行。可以将网址当做变量存储在SWF中,从一个XML文件加载,或者更多其它的方式。因此我把这些交给你。如果你使用本教程创建了解决方案,请在评论中张贴网址,以便其他学习者可以看到它.

Javascript 相关文章推荐
HTML-CSS群中单选引发的“事件”
Mar 05 Javascript
YUI 读码日记之 YAHOO.util.Dom - Part.1
Mar 22 Javascript
jQuery-ui中自动完成实现方法
Jun 10 Javascript
jquery实现用户打分评分特效
May 28 Javascript
javascript实现禁止复制网页内容汇总
Dec 30 Javascript
Bootstrap表单布局样式代码
May 31 Javascript
Bootstrap零基础入门教程(二)
Jul 18 Javascript
JavaScript新增样式规则(推荐)
Jul 19 Javascript
详解AngularJS 模块化
Jun 14 Javascript
小程序中this.setData的使用和注意事项
Aug 28 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 Javascript
js实现点击选项置顶动画效果
Aug 25 Javascript
ajax的hide隐藏问题解决方法
Dec 11 #Javascript
ajax上传时参数提交不更新等相关问题
Dec 11 #Javascript
jQuery(非HTML5)可编辑表格实现代码
Dec 11 #Javascript
jQuery使用数组编写图片无缝向左滚动
Dec 11 #Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
Dec 10 #Javascript
ajax不执行success回调而是执行了error回调
Dec 10 #Javascript
解决js正则匹配换行问题实现代码
Dec 10 #Javascript
You might like
php中的常用魔术方法总结
2013/08/02 PHP
ThinkPHP 3.2 数据分页代码分享
2014/10/14 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
php简单创建zip压缩文件的方法
2016/04/30 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
php常用字符串查找函数strstr()与strpos()实例分析
2019/06/21 PHP
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
2013/04/08 Javascript
javascript确认框的三种使用方法
2013/12/17 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
2015/03/31 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
AngularJS表单验证中级篇(3)
2016/09/28 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
利用js的闭包原理做对象封装及调用方法
2017/04/07 Javascript
JS异步函数队列功能实例分析
2017/11/28 Javascript
js+css实现打字效果
2020/06/24 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
[50:12]EG vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
Python中字典的浅拷贝与深拷贝用法实例分析
2018/01/02 Python
python使用锁访问共享变量实例解析
2018/02/08 Python
Django1.9 加载通过ImageField上传的图片方法
2018/05/25 Python
python使用ddt过程中遇到的问题及解决方案【推荐】
2018/10/29 Python
CSS3中媒体查询结合rem布局适配手机屏幕
2019/06/10 HTML / CSS
英国Office鞋店德国网站:在线购买鞋子、靴子和运动鞋
2018/12/19 全球购物
银行门卫岗位职责
2013/12/29 职场文书
中学生爱国演讲稿
2013/12/31 职场文书
2014年元旦活动方案
2014/02/15 职场文书
施工安全协议书范本
2014/09/26 职场文书
2014年人力资源工作总结
2014/11/19 职场文书
2014年妇女工作总结
2014/12/06 职场文书
召开会议通知范文
2015/04/15 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书