虽然现在html5越来越火,但有些情况下flash还是不可替代的。作为一个前端,事先了解一些flash的相关知识,会事半功倍。
创建flash
标准写法
1
|
<object type=
'application/x-shockwave-flash'
data=
'movie.swf'
></object>
|
很简单吧。象chrome,firefox,ie新版本等高级浏览器都是支持这样的写法的。所以在未来我们可以用这种统一的试为引入flash。
不过可惜的是,理想的未来还很遥远。如你所料,老版本的ie是不支持这样写的,需要用classid和codebase两个参数,还需要一个name参数。
老版本的ie是通过 active object的方式来调用 flash的,classid就是active object的id。codebase是当浏览器没有装flash的时候可以通过codebase指定的地址去下载flash
1
2
3
|
<object classid=
"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase=
"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0"
>
<param name=
'movie'
value=
'movie.swf'
/>
</object>
|
那么怎么写能兼容绝大多数浏览器呢,一般都是用object套一个embed
1
2
3
4
|
<object classid=
"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase=
"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0"
width=
"400"
height=
"300"
>
<param name=
"movie"
value=
"movie.swf"
/>
<embed src=
"movie.swf"
quality=
"high"
width=
"400"
height=
"300"
name=
"movie"
align=
""
type=
"application/x-shockwave-flash"
pluginspage=
"http://www.macromedia.com/go/getflashplayer"
/>
</object>
|
embed也可以引入flash不过支持embed的浏览器一般都支持object,不建议用embed来引入flash。
除了直接写html也可以用js动态创建flash
用 SWFObject 来动态创建flash。可以生成符合标准的代码,还可以检测版本。
用Html直接创建和用js生成各有好处,根据实际情况来选择吧
还有几个常用参数需要了解一下
1
2
3
4
5
6
|
<object type=
"application/x-shockwave-flash"
data=
"movie.swf"
>
<param name=
"quality"
value=
"high"
>
<param name=
"wmode"
value=
"opaque"
>
<param name=
"allowscriptaccess"
value=
"always"
>
<param name=
"allowFullScreenInteractive"
value=
"true"
>
</object>
|
quality,即是影片品质的意思,分为LOW,MEDIUM,HIGH,BEST。 flash 默认为HIGH。品质高了可能会影响播放速度,所以移动设备用MEDIUM。
wmode,控制flash 显示方式。需要用html元素显示在flash之上时用opaque模式
allowscriptaccess,是否允许flash与 js交互,有never,samedomain,always三个值
allowFullScreenInteractive,允许全屏且允许交互。需要flash播放器10.3以上,不过实际上建议10.9以上。如果是低于10.3的版本只能允许全屏 参数为 allowfullscreen
让flash生效
flash是一个特殊的元素,所以浏览器对它有一些特殊的待遇。但是只要注意以下几项,就没有问题了。
给flash一个宽和高
让flash在可见区域内
不要加display:none,visibility:hidden这样的属性
如果违反了这三项之一,浏览器可能会直接忽略flash。
隐藏flash
如果想让flash生效,又不想让flash 展现,有两个推荐的方法。
用一个层把flash遮住
加样式{position:absolute; z-index:-1;}
停止flash
不能简单的 {display:none;},这是不可靠的,可能flash还在继续工作。建议让flash暴露出一个方法,让js来调用这个方法,通知flash停止运行,释放资源。如果flash没有办法暴露接口,可以直接把flash删除。
获取flash对象
adobe官方给出的代码
1
2
3
4
5
6
7
8
9
10
11
|
function
getSWF(movieName)
{
if
(navigator.appName.indexOf(
"Microsoft"
) != -1)
{
return
window[movieName];
}
else
{
return
document[movieName];
}
}
|
我测试用document.getElementById等方法获取dom的方法也是可以的。adobe给出的是兼容性最好的。
flash调用 js方法
对于8.0以上的版本都可以用 external api。很方便。
比如要调用 名为 isReady的 js 方法。
1
|
ExternalInterface.call(
"isReady"
);
|
没有external api时采用FSCommands方法。使用 fscommand() 函数,可以将消息发送到承载 Flash Player 的那个程序,例如 Web 浏览器。这个早已经不用了,知道一下就好,免得看到这个方法不知道是什么意思。
js调用 flash方法
首先flash需要把方法暴露给外部环境
比如暴露flash 的方法 getStatus给 js
1
|
ExternalInterface.addCallback(
"getStatus"
,getStatus);
|
js调用flash 需要先获取flash对象
var swf=getSWF(‘movie’);
然后就可以调用 flash暴露的方法了
swf.getStatus();
ready状态检测
js与flash互通信之前需要确保flash,js都已经ready。
根据 adobe给的例子,是这样做的:
首先准备一个 检查js 有没有ready的函数
1
2
3
4
|
function
isReady(){
....
}
|
当flash ready后去检测 js有没有ready.
1
|
var
result:Boolean = ExternalInterface.call(
"isReady"
);
|
如果没有ready,隔100毫秒再去检测,直到ready。
我解释一下为什么用这样的方法来检测。
通常情况下,flash加载的会慢些,所以用flash来检测js
js ready的含义不只是js文件已经加载,代码已经执行,而是说flash要调用的方法是可以用的,需要的数据,资源有没有准备好。
兼容老版本flash
我发现下面两条老版本的flash是不支持的
通过函数返回值传递数据
原生json支持(需要Player版本大于等于11)