JS代码嵌入Flash

 

                                                        SWFObject的用法

SWFObject的使用是非常简单的,只需要包含 swfobject.js这个js文件,然后在DOM中插入一些简单的JS代码,就能嵌入Flash媒体资源了。

一、优点:

1、SWFObject 的灵活性非常好。完全可以事先写好HTML的其他部分,最后再回过头来添加Flash内容。这样可以确保在客户端没有Flash的情况下,用户不会一无所获;也可以确保针对搜索引擎,做了什么样的关键词优化。完全不用像以前那样担心客户端的各种状况;

2、SWFObject兼容当前各种主流浏览器,如:PC上的IE5/5.5/6, Netscape 7/8,Firefox, Mozilla, and Opera。Mac上的IE5.2, Safari, Firefox, Netscape 6/7, Mozilla, and Opera 7.5+,各种浏览器的后续版本也会继续支持;

3、SWFObject检测Flash播放器版本从3开始到最新的版本号,而且也消灭了IE中“激活”的麻烦;

4、SWFObject可以方便地检查版本细节,例如我们需要v.6.0 r65 (or 6,0,65,0) 来处理SWF资源,

就可以添加如下代码:

       var so = new SWFObject(”movie.swf”, “mymovie”, “200″, “100″, “6.0.65″, “#336699″);

5、SWFObject的版本检测可以人工忽略。如果在特定环境下不希望SWFObject检测版本号,那么只需要传递一个参数在HTML页面中,就可以了。SWFObject可以捕获这个参数并且跳过检测,直接写入Flash嵌入代码到DOM中。用于忽略版本检测的变量名“detectflash”,以下是一个例子:

        <a href=”mypage.html?detectflash=false”>Bypass link</a>

二、使用说明:

       script type=”text/javascript” src=”swfobject.js”></script>

       <div id=”flashcontent”>

       This text is replaced by the Flash movie.

        </div>

          <script type=”text/javascript”>

         var so = new SWFObject(”movie.swf”, “mymovie”, “200″, “100″, “7″, “#336699″);

         so.write(”flashcontent”);

         </script>

  详细说明:

⑴、“<div id=”flashcontent”>[...]</div>”:

      为SWF资源预留一个HTML结点。这个HTML结点内的所有内容都会在客户端被Flash资源替换,当客户端没有安装Flash播放器的        时候,这些内容会显示出来。这一特色在SEO以及对用户体验方面非常有必要。

(2)、“var so = new SWFObject(swf, id, width, height, version, background-color [, quality, xiRedirectUrl, redirectUrl, detectKey])”:

    创建一个新的SWFObject实例,并且传入一下参数:

   swf - SWF文件路径;

id - 为这个SWF文件分配的id值,它将用于给embed与object标签设定name属性,以便于可以支持swliveconnect的功能,如动态传入变量;

width - 宽度;

height - 高度;

version - FlashPlayer需要的版本号,它可以详细到 ‘主版本号.小版本号.细节‘,例如:“9.0.28“。一般地,我们只需传入主版本即可,例如:“9″。

background-color - Flash资源的背景色,16进制格式

此外,还有如下可选参数:

quality - 画面质量,默认为“high”;

xiRedirectUrl - 如果的Flash影片在弹出窗口中,或者希望用户在完成了ExpressInstall后重定向到其他地址,可以采用xiRedirectUrl属性,来自动完成这一步骤。例如:

    <script type=”text/javascript”>

    var so = new SWFObject(”movie.swf”, “mymovie”, “200″, “100″, “8″, “#336699″);

    so.useExpressInstall(’expressinstall.swf’);

   so.setAttribute(’xiRedirectUrl’, ‘http://www.example.com/upgradefinished.html’); // must be the absolute URL to      your site

so.write(”flashcontent”);

</script>


redirectUrl - 没有安装相应版本的播放器后自动跳转的目标地址;

detectKey - 这是当忽略检测时,SWFObject将去url地址中查找的变量,默认值为“detectflash”;


(3)、so.write(”flashcontent”):

将Flash资源应用到DOM里,在浏览器显示出来;

 

三、范例:

1、传入Flash内联参数的简单范例

<script type=”text/javascript”>

var so = new SWFObject(”movie.swf”, “mymovie”, “200″, “100%”, “7″, “#336699″);

so.addParam(”quality”, “low”);

so.addParam(”wmode”, “transparent”);

so.addParam(”salign”, “t”);

so.write(”flashcontent”);

</script>

这里可以看到Flash支持的内联参数列表:http://kb2.adobe.com/cps/127/tn_12701.html(adobe.com官方资源)


2、采用“Flashvars”参数传入变量

用Flashvars是在预加载Flash时传入数据的最佳做法,语法格式与GET变量串非常类似,如:variable1=value1&variable2=value2&variable3=value3SWFObject帮助您将这项工作变得更加明确化

<script type=”text/javascript”>

var so = new SWFObject(”movie.swf”, “mymovie”, “200″, “100″, “7″, “#336699″);

so.addVariable(”variable1″, “value1″);

so.addVariable(”variable2″, “value2″);

so.addVariable(”variable3″, “value3″);

so.write(”flashcontent”);

</script>

这些变量将会保存在root这个MovieClip对象里。

SWFObject还可以方便地直接从URL中接受参数传入Flash中,例如你有这样一个URL:http://www.example.com/page.html?variable1=value1&variable2=value2。采用getQueryParamValue()方法你就可以轻松获取这些参数,并将它们传入Flash,例如:

<script type=”text/javascript”>

var so = new SWFObject(”movie.swf”, “mymovie”, “200″, “100″, “7″, “#336699″);

so.addVariable(”variable1″, getQueryParamValue(”variable1″));

so.addVariable(”variable2″, getQueryParamValue(”variable2″));

so.write(”flashcontent”);

</script>

getQueryParamValue()方法同样可以获取JavaScript的Location对象的hash值“location.hash”来与swf内部进行通信。


3、在SWFObject中应用Express Install(利用官方自动升级接口)

SWFObject全面支持AdobeFlash播放器的自动升级功能(从6.0.65起的FlashPlayer支持在swf内部自动升级!),这样用户完全不用离开网页就能完成播放器的升级了。

首先,上传官方的expressinstall.swf到服务器上,然后使用useExpressInstall方法指定这个swf文件的地址就可以了,例如:

<script type=”text/javascript”>

var so = new SWFObject(”movie.swf”, “mymovie”, “200″, “100″, “8″, “#336699″);

so.useExpressInstall(’expressinstall.swf’);

so.write(”flashcontent”);

</script>

可以安装一个低版本的Flash播放器然后测试效果;

在SWFObject原文件压缩包中可以找到具体的使用细节,可以自己定制ExpressInstall的流程。

如果Flash影片在弹出窗口中,或者希望用户在完成了ExpressInstall后重定向到其他地址,可以采用xiRedirectUrl属性,来自动完成这一步骤。例如:

<script type=”text/javascript”>

var so = new SWFObject(”movie.swf”, “mymovie”, “200″, “100″, “8″, “#336699″);

so.useExpressInstall(’expressinstall.swf’);

so.setAttribute(’xiRedirectUrl’, ‘http://www.example.com/upgradefinished.html’); // must be the absolute URL to your site

so.write(”flashcontent”);

</script>

因为Dreamwaver每次插入动画flash的时候,系统总是自动加载并插入一大段代码并生成AC_RunActiveContent.js的文件。为了简化其中的代码,所以自行把代码重新整理了一下,使其每次插入动画的时候,只需要写入短短一行代码(例如:<script type="text/javascript">swf(455,200,'仿新浪焦点图','focus');</script>),就可以达到跟Adobe官方同样的效果。已经测试过了,兼容所有浏览器。如果有些浏览器显示不出来,可能因为动画的版本和浏览器支持的flash动画版本不一致所致。 对比:原来插入一个flash代码。 <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script> <script type="text/javascript"> AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','title','仿新浪焦点图','name','仿新浪焦点图','width','455','height','200','id','仿新浪焦点图','src','focus','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','focus' ); //end AC code </script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" title="仿新浪焦点图" name="仿新浪焦点图" width="455" height="200" id="仿新浪焦点图"> <param name="movie" value="focus.swf" /> <param name="quality" value="high" /> <embed src="focus.swf" width="455" height="200" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="仿新浪焦点图"></embed> </object></noscript> 而现在只需要写<script src="swf.js" type="text/javascript"></script><script type="text/javascript">swf(455,200,'仿新浪焦点图','focus');</script>就可以达到同样的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值