Javascript与flash交互通信基础教程


Posted in Javascript onAugust 07, 2008

下面是一些在Flash和使用Javascript的HTML文件直接通信的示例,每个示例都有简略的步骤

本文讨论了3种基本的Flash/Javascript通信方式:
Javascript 到 Flash的通信----使用Flash播放器的javascript方法
Flash 到 Javascript的通信----使用Flash的fscommand
Flash 到 Flash的通信----------使用本地连接对象或综合上2种技术

并不是所有的浏览器都很重视脚本.为了和Flash播放器通信,浏览器必须有内置的钩子以便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的通信

这个例子演示了如何使用Flash的method把变量从HTML的input text 发送到该页面中的Flash文件中.HTML input的数据通过Flash的SetVariable方法传送到Flash文件中.

查看示例:示例 
下载源文件: javascript_to_flash.zip(17k)

步骤:

Flash中
1.新建一个文件,保存为javascript_to_flash.fla
2.用文字工具在舞台上创建一个文本域
3.选择这个文本域,在属性面板中,从下拉列表中选择动态文本(Dynamic Text),在变量(variable)栏填上"myVar"
注意:最好的习惯是使用Instance,用myVar.text更改myVar的值.为了简单起见和兼容Flash4和Flash5,我们使用的是变量名的形式.
4.保存文件
5.发布HTML文件和SWF文件

Dreamweaver中
下一步的工作转移到Dreamweaver中了,当然也可以是其他的HTML编辑器
1.打开上一步发布的HTML文件
2.插入生成的SWF文件和OBJECT/EMBED标签
(1) Insert>Media>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) 插入文本域(Insert> Form Object> Text Field),如果询问是否添加表单域,选择是
(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的通信

从HTML可以发送数据到Flash,反过来也可以. 这个例子演示了如何应用Flash的Fscommand来发送数据到Javascript.

查看示例:示例2 
下载源文件: flash_to_javascript.zip(10K)

简要步骤:
Flash中
新建一个文件,保存为flash_to_javascript.fla
创建一个文本域,设置成输入文本(Input Text),选择"border"以便我们能看到他,指定他的变量为inputVar
创建一个按钮,在按钮上添加如下的as:

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. 插入如下的Javascript到<Body>标签内:
<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的通信
通过上面两种方法的混和使用,同一HTML中两个或者更多的Flash直接可以相互传送消息. 从一个flash使用fscommand传送消息给Javascript,使用Flash的Javascript methods把消息传给另外一个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)---call指定帧上的action 
TCallLabel(movie_clip,label)----------------call指定标签上的action 
TGetProperty(movie_clip,property)--------获取movie_clip的指定属性 
TSetProperty(movie_clip,property,number)-设置movie_clip的指定属性

Javascript 相关文章推荐
得到文本框选中的文字,动态插入文字的js代码
Mar 07 Javascript
用javascript实现画板的代码
Sep 05 Javascript
thinkphp中常用的系统常量和系统变量
Mar 05 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
javascript实现行拖动的方法
May 27 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
JS将网址url转化为JSON格式的方法
Jul 02 Javascript
微信小程序实现分享到朋友圈功能
Jul 19 Javascript
vue用递归组件写树形控件的实例代码
Jul 19 Javascript
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
二级域名或跨域共享Cookies的实现方法
Aug 07 #Javascript
Div Select挡住的解决办法
Aug 07 #Javascript
js模拟弹出效果代码修正版
Aug 07 #Javascript
top.location.href 没有权限 解决方法
Aug 05 #Javascript
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
Aug 05 #Javascript
很可爱的输入框
Aug 03 #Javascript
javascript之更有效率的字符串替换
Aug 02 #Javascript
You might like
PHP中如何调用webservice的实例参考
2013/04/25 PHP
解析php中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
php比较两个绝对时间的大小
2014/01/31 PHP
PHP 中使用ajax时一些常见错误总结整理
2017/02/27 PHP
得到文本框选中的文字,动态插入文字的js代码
2007/03/07 Javascript
为jQuery.Treeview添加右键菜单的实现代码
2010/10/22 Javascript
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
JS定时器实例
2013/04/17 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
2013/11/17 Javascript
javascript学习笔记(七)Ajax和Http状态码
2014/10/08 Javascript
微信小程序 登陆流程详细介绍
2017/01/17 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
纯JS实现可用于页码更换的飞页特效示例
2018/05/21 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
2020/07/28 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日小组赛B组Effect VS Secret
2018/03/30 DOTA
Django ImageFiled上传照片并显示的方法
2019/07/28 Python
Python pip install之SSL异常处理操作
2020/09/03 Python
用python对excel进行操作(读,写,修改)
2020/12/25 Python
CSS3等相关属性制作分页导航实现代码
2012/12/24 HTML / CSS
实例教程 一款纯css3实现的数字统计游戏
2014/11/10 HTML / CSS
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
HTML5实现移动端点击翻牌功能
2020/10/23 HTML / CSS
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
Fossil美国官网:化石手表、手袋、首饰及配饰
2019/02/17 全球购物
橄榄树药房:OLIVEDA
2019/09/01 全球购物
电大自我鉴定范文
2013/10/01 职场文书
大学总结自我鉴定
2014/01/18 职场文书
医生进修自我鉴定
2014/01/19 职场文书
我的动漫时代的创业计划书范文
2014/01/27 职场文书
三八妇女节趣味活动方案
2014/08/23 职场文书
幼儿园教师暑期培训心得体会
2016/01/09 职场文书
go xorm框架的使用
2021/05/22 Golang
Python并发编程实例教程之线程的玩法
2021/06/20 Python