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 相关文章推荐
理解Javascript_05_原型继承原理
Oct 13 Javascript
jQuery中校验时间格式的正则表达式小结
Sep 22 Javascript
js控制淡入淡出示例代码
Nov 12 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
Feb 27 Javascript
javascript实现input file上传图片预览效果
Dec 31 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
Mar 29 Javascript
JavaScript几种数组去掉重复值的方法推荐
Apr 12 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
Jul 27 Javascript
Vue.js快速入门教程
Sep 07 Javascript
原生JS实现的跳一跳小游戏完整实例
Jan 27 Javascript
微信小程序实现吸顶效果
Jan 08 Javascript
javascript进阶篇深拷贝实现的四种方式
Jul 07 Javascript
二级域名或跨域共享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过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
PHP二维数组排序简单实现方法
2016/02/14 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
JQuery 学习笔记 选择器之二
2009/07/23 Javascript
类似CSDN图片切换效果脚本
2009/09/17 Javascript
javascript 用原型继承来实现对象系统
2010/03/22 Javascript
6个DIV 135或246间隔一秒轮番显示效果
2010/07/24 Javascript
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
JavaScript设计模式之策略模式实例
2014/10/10 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
2016/09/03 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
2017/03/06 Javascript
angularjs中的$eval方法详解
2017/04/24 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
原生JS实现 MUI导航栏透明渐变效果
2017/11/07 Javascript
Vue组件中slot的用法
2018/01/30 Javascript
vue实现跳转接口push 转场动画示例
2019/11/01 Javascript
d3.js实现图形缩放平移
2019/12/19 Javascript
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
python正则分析nginx的访问日志
2017/01/17 Python
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
PyTorch搭建一维线性回归模型(二)
2019/05/22 Python
关于PyCharm安装后修改路径名称使其可重新打开的问题
2020/10/20 Python
基于html5绘制圆形多角图案
2016/04/21 HTML / CSS
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
MVC的各个部分都有那些技术来实现?如何实现?
2016/04/21 面试题
大学生思想汇报范文
2013/12/31 职场文书
银行简历自我评价
2014/02/11 职场文书
数控机床专业自荐信
2014/05/19 职场文书
幼儿园运动会口号
2014/06/07 职场文书
端午节寄语2015
2015/03/23 职场文书
2015年教师党员个人总结
2015/11/24 职场文书