本文详解Flash与HTML中JavaScript的三种基本通信方式:JS调用Flash、Flash调用JS及Flash间通信。涵盖SetVariable、fscommand及LocalConnection对象的使用,提供基于Dreamweaver和Flash的完整操作步骤与代码示例,适用于Flash 4/5及MX版本。
Flash与JavaScript交互通信概述
以下示例展示了Flash与包含JavaScript的HTML文件之间进行通信的基本方法,每个示例均附带简要的操作步骤。
本文主要探讨三种基础的Flash与JavaScript通信机制:
JavaScript到Flash的通信:利用Flash播放器的JavaScript方法实现。
Flash到JavaScript的通信:通过Flash的fscommand命令实现。
Flash到Flash的通信:结合使用本地连接对象(LocalConnection)或上述两种技术的组合。
并非所有浏览器都重视脚本支持。为了实现与Flash播放器的通信,浏览器必须内置特定的钩子(hook),使Flash播放器能够进行“监听”。支持的浏览器类型如下:
Netscape Navigator 3.0至4.7x版本,以及Netscape 6.2或更高版本。
操作系统要求:Windows 95/98/NT/2000/XP或MacOS;需启用Java和LiveConnect功能。
Internet Explorer 3.0或更高版本。
操作系统要求:仅限Windows 95/98/NT/2000/XP;需启用ActiveX支持。
JavaScript到Flash的通信实现
JavaScript到Flash的通信实现
本示例演示如何利用Flash的方法,将变量从HTML页面的输入文本框传递至该页面中的Flash文件。HTML输入的数据通过Flash的SetVariable方法被传送至Flash内部。
查看在线示例:示例
下载源文件:javascript_to_flash.zip(17k)
操作步骤:
Flash制作部分
1. 新建一个Flash文件,并将其保存为javascript_to_flash.fla。
2. 使用文字工具在舞台上创建一个文本域。
3. 选中该文本域,在属性面板的下拉列表中选择“动态文本”(Dynamic Text),并在变量(variable)栏中输入“myVar”。
注意:最佳实践是使用实例名,通过myVar.text来更改myVar的值。为了简化操作并确保与Flash 4和Flash 5的兼容性,此处直接使用变量名形式。
4. 保存文件。
5. 发布生成HTML文件和SWF文件。
Dreamweaver编辑部分
接下来的工作将在Dreamweaver中进行,当然也可以使用其他HTML编辑器。
1. 打开上一步发布的HTML文件。
2. 插入生成的SWF文件以及OBJECT/EMBED标签。
(1) 选择“插入”>“媒体”>“Flash”,并选取该Flash文件。
(2) 切换到代码视图,我们需要修改选中的<OBJECT>和<EMBED>标签。
(3) 在OBJECT标签中,添加id="myFlash"属性。
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/
flash/swflash.cab#version=5,0,0,0"
width=366 height=142 id="myFlash">
注意:如果是复制粘贴代码,请确保删除不必要的换行符,否则可能导致错误;id属性也可以直接在属性面板中输入。
(4) 在EMBED标签中,添加name="myFlash"和swLiveConnect="true"属性,并确保不要使用id属性!代码应如下所示:
<embed src="javascript_to_flash.swf" quality=high width=366 height=142
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?
P1_Prod_Version=ShockwaveFlash"
name="myFlash" swLiveConnect="true">
</embed>
3. 创建表单域。
(1) 返回设计视图。
(2) 插入文本域(插入>表单对象>文本字段),如果提示是否添加表单域,请选择“是”。
(3) 将文本域的HTML标签修改为以下内容:
<input type="text" name="sendText" maxlength="45" onChange="doPassVar(this)">
每当文本域内容发生变化时,onChange事件将被触发,进而调用doPassVar()函数。
4. 创建用于传递变量值的JavaScript函数。
将以下JavaScript代码复制到<head></head>标签内:
<SCRIPT LANGUAGE=JavaScript>
<!--
function doPassVar(args){
var sendText = args.value;
window.document.myFlash.SetVariable("myVar", sendText);
}
//-->
</SCRIPT>
5. 保存文件,并按F12进行测试。
Flash到JavaScript的通信实现
Flash到JavaScript的通信实现
数据不仅可以从HTML发送到Flash,也可以反向传输。本示例演示如何应用Flash的Fscommand来发送数据到JavaScript。
查看在线示例:示例2
下载源文件:flash_to_javascript.zip(10K)
简要操作步骤:
Flash制作部分
新建一个文件,保存为flash_to_javascript.fla。
创建一个文本域,设置为“输入文本”(Input Text),勾选“border”选项以便观察,并将其变量指定为inputVar。
创建一个按钮,并在按钮上添加如下ActionScript代码:
on (release) {
fscommand ("send_var", inputVar);
}
保存文件,并导出HTML和SWF文件。
Dreamweaver编辑部分
1. 打开导出的HTML文件,修改<OBJECT>和<EMBED>标签,结果与上文一致:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/
flash/swflash.cab#version=5,0,0,0"
width=366 height=142 id="myFlash">
<embed src="javascript_to_flash.swf" quality=high
width=366 height=142
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?
P1_Prod_Version=ShockwaveFlash" name="myFlash" swLiveConnect="true">
</embed>
2. 在<Body>标签内插入以下JavaScript代码:
<SCRIPT LANGUAGE=JavaScript>
<!--
var InternetExplorer = navigator.appName.indexOf("Microsoft") != -1;
function myFlash_DoFSCommand(command, args) {
var myFlashObj = InternetExplorer ? myFlash : document.myFlash;
alert (args);
}
if (navigator.appName && navigator.appName.indexOf("Microsoft") != -1 &&
navigator.userAgent.indexOf("Windows") != -1 && navigator.userAgent.indexOf("Windows 3.1") == -1) {
document.write('<SCRIPT LANGUAGE=VBScript\> \n');
document.write('on error resume next \n');
document.write('Sub myFlash_FSCommand(ByVal command, ByVal args)\n');
document.write(' call myFlash_DoFSCommand(command, args)\n');
document.write('end sub\n');
document.write('</SCRIPT\> \n');
}
//-->
</SCRIPT>
Flash与Flash之间的通信
Flash与Flash之间的通信
通过混合使用上述两种方法,同一HTML页面中的两个或多个Flash文件可以直接相互传送消息。具体做法是:从一个Flash使用fscommand将消息发送给JavaScript,再利用Flash的JavaScript方法将消息传递给另一个Flash。
详细示例请参考:Flash影片之间的通信示例
从Flash MX版本开始,可以使用local connection对象在Flash之间传送消息。这使得位于同一HTML页面或两个不同浏览器窗口中的两个Flash影片能够相互发送消息,而无需借助JavaScript或fscommand。
详细指南请参考:在Flash MX中使用local connection对象(英文)。
本站提供的localConnection教程链接:http://www.blueidea.com/tech/multimedia/2003/739.asp
附:可控制Flash Player的JavaScript方法一览表:
Play() ---------------------------------------- 播放动画
StopPlay()------------------------------------停止动画
IsPlaying()----------------------------------- 检查动画是否正在播放
GotoFrame(frame_number)---------------- 跳转到指定帧
TotalFrames()------------------------------- 获取动画总帧数
CurrentFrame()------------------------------ 返回当前动画所在帧数(减1)
Rewind()------------------------------------- 使动画返回第一帧
SetZoomRect(left,top,right,buttom)------- 放大指定区域
Zoom(percent)------------------------------ 改变动画大小
Pan(x_position,y_position,unit)------------ 使动画在x,y方向上平移
PercentLoaded()---------------------------- 返回动画已载入的百分比
LoadMovie(level_number,path)----------- 加载动画
TGotoFrame(movie_clip,frame_number)- movie_clip跳转到指定帧数
TGotoLabel(movie_clip,label_name)------ movie_clip跳转到指定标签
TCurrentFrame(movie_clip)--------------- 返回movie_clip当前帧数(减1)
TCurrentLabel(movie_clip)----------------- 返回movie_clip当前标签
TPlay(movie_clip)--------------------------- 播放movie_clip
TStopPlay(movie_clip)---------------------- 停止movie_clip的播放
GetVariable(variable_name)----------------- 获取变量
SetVariable(variable_name,value)----------- 变量赋值
TCallFrame(movie_clip,frame_number)--- 调用指定帧上的action
TCallLabel(movie_clip,label)---------------- 调用指定标签上的action
TGetProperty(movie_clip,property)-------- 获取movie_clip的指定属性
TSetProperty(movie_clip,property,number)- 设置movie_clip的指定属性