Flash与JavaScript交互通信基础教程

作者:闭包旅人

时间:2026-10-22

浏览:257

本文详解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的指定属性


实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章