如何在aspx页面中插入swf动画

阅读: 66 评论: 0 作者: eng308 发表于 2009-10-27 13:14 原文链接

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codeBase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100%" height="100%">
        <PARAM NAME="movie" VALUE="<%=webflash%>">
        <PARAM NAME="quality" VALUE="high">
        <PARAM NAME="wmode" VALUE="transparent">
        <embed src="<%=webflash%>" width="100%" height="100%" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed></OBJECT>

把<%=webflash%>这个改成数据库获取的路径,或者直接写上路么.但是这样插入的FALSH需要手工点击激活焦点,可以利用以下方法:我整理的..

自06年4月IE升级之后,网页中的flash就需要先激活ActiveX控件才能使用。不爽。SWFObject是有效解决这个问题的js代码(原来叫 FlashObject),目前版本是1.4,完全开源的MIT License。全称是: Javascript Flash Player detection and embed script,用于将swf嵌入到网页中的 JavaScript脚本。挺好用,准备将其加入到Blog到编辑器中,代替原来使用的老代码。
一、传统方法

程序代码
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
   width="550" height="400" id="Untitled-1" align="center">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="mymovie.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="mymovie.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="mymovie" align="center" allowScriptAccess="sameDomain"
   type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

这方法是使用 object 和 embed 标签来嵌入,细心的会发现,object 的很多参数和 embed 里面的很多属性是重复的,为什么这样做?为了浏览器兼容性,有的浏览器支持 object,有的支持 embed,这也是为什么要修改 Flash 的参数时两个地方都要改的原因。这种方法是 Macromedia 一直以来的官方方法,最大限度的保证了 Flash 的功能,没有兼容性问题。但是它现在不那么好用了:无法通过验证,由于为了兼容性而嵌入的 embed 标签是不符合 W3C 的规范的。当然,如果你不在乎什么规范不规范,另当别论。

微软由于种种原因,在 sp2 后限制了 IE 的 ActiveX 的使用模式,就是在页面中的 ActiveX 有一个虚框,需要用户点击一次才能正常交互。Flash是作为一个 ActiveX 嵌入到网页中的,所以它也会受牵连,只有通过 JS 嵌入 Flash 才能解决这个问题。没有 Flash 版本检测,如果版本浏览器的flash插件版本不够,或者不能正常显示你的 swf 文件,或者会弹出一个 ActiveX 的确认安装的框——这个框对很多用户来说是很恐怖的。

二、只用 object 的方法
这种方法的名字叫做 Flash satay,最早是2002年由 Drew McLellan 发表在 A List Apart 上,后来又经过了几次完善:

程序代码
<object type="application/x-shockwave-flashdata="c.swf?path=movie.swf" width="400" height="300">
<param name="movie" value="c.swf?path=movie.swf" />
<img src="noflash.gif" width="200" height="100" alt="" />
</object>

这方法没 embed 了,可以通过验证,是标准的嵌入 Flash 的方法,浏览器兼容性也不错,看起来几乎完美,不过还是有问题的:需要一个 holder swf 来加载你的目标 swf 以保证 IE 中的 stream 能力,如果你需要通过 flashvars 来传参,或者和页面的 JS 交互,会很麻烦。同上面第二点,ActiveX的虚框问题。继续同上没有版本检测,还是有少数用户代理(比如一些版本的 safari 和一些屏幕阅读器)不认这种方式,有bug。

三、用JS嵌入的方法
用JS嵌入就是各有各的嵌入方法了,有嵌得好的有嵌得不好的。有人用 document.write 直接写,这法子说实话不大好,感觉 hack 成分多了,有点为了验证而验证的意思,而且没有体现出什么 JS 的优势。我觉得一个好的 JS 嵌入脚本,在保证 Flash 应有功能的基础上, ⒒?JS 的优势应该要有版本检测,要能很好解决可访问性问题(也就是用户在无法浏览 Flash 内容或禁用 JS 的时候应该如何处理的问题),要易于重复使用。常见的 JS 嵌入方法如:SWFObject (FlashObject),IE中没有讨厌的虚框问题了。提供了完善的版本检测功能,如果版本不够则显示其他东西,比如图片或文字。易于使用,只要在页面头加载一个 .js 文件,然后 HTML 写一个容器,里面放普通的文本或图片(用于无法显示 Flash 时显示),最后用脚本来替换这个元素里面的内容为 Flash。可以通过验证——当然这个不是重点,只是顺带效果罢了。现阶段用 SWFObject 嵌入 Flash 是最完美的方法,虽然这法子这也是由于浏览器的种种问题而作出的妥协。但它在保证 Flash 功能的前提下还利用 JS 提供了额外的好处,我们还有什么理由不用它呢?

SWFObject(FlashObject)的使用方法:

程序代码
<script type="text/javascript" src="http://www.cnblogs.com/swfobject.js"></script>
<div id="flashcontent">
这些文字将被Flash影片替换。
</div>
<script type="text/javascript">
   var fo = new SWFObject("/flashmovie.swf", "mymovie", "200", "100", "7", "#336699");
   fo.write("flashcontent");
</script>

其中设置影片属性的是这句:

程序代码
var fo = new SWFObject("/flashmovie.swf", "mymovie", "200", "100", "7", "#336699");

这6个参数是必须的,具体介绍如下:

1、swf - swf路径和文件名;
2、id - 对象ID;
3、width - 影片宽度;
4、height - 影片高度;
5、version - 指定Flash Player的版本。可以指定具体版本,例如: “6.0.65″。也可以指定主版本,例如:”6″;
6、background color - 指定Flash影片的背景色
也就是:
SWFObject("swf文件", "swf标识", "宽度", "高度", "FlashPlay最低版本号", "背景色");
下面我们来看一下我们嵌入一个flash的范例.
根据上面的基本工作方式,我们还要嵌入一些其它的参数.来满足我们一些其它的需要比如我们有一个文件名为ws.swf,我们想把它嵌入到页面中,又不至于受IE更新的影响.
1.在页面中包入swfobject.js(flashobject.js)文件
<script type="text/javascript" src="swfobject.js"></script>
一般这行代码可以写在body标签之前即可.
2.把下面这段代码加在它下方.
程序代码
<div id="flashcontent" style="width: 300px; height: 200px"></div>
<script type="text/javascript">
   var fo = new FlashObject("ws.swf", "mymovie", "300", "200px", "7", "#336699");
   fo.addParam("quality", "low");
   fo.addParam("wmode", "transparent");
   fo.addParam("salign", "t");
   fo.addParam("scale", "noscale");
fo.addParam("loop", "false");
   fo.write("flashcontent");
</script>

 

从上面的代码中我们看出,我们将要把FLASH放在id为flashcontent层中,它的宽为300高为200像素,那么应是和我们的swf文件的大小是相同的.如果你想缩放也可以是不同的.下面var fo = new FlashObject("ws.swf", "mymovie", "300", "200px", "7", "#336699");
是嵌入flash文件,在之前的内容已介绍过它里面的参数,其中的ws.swf可以是相对路径也可以是绝对路径,如你可以直接输入网站加上你的swf文件名字.

再下面的一段就是我们可以加入的参数,从上到下分别为quality质量,wmode transparent透明,salign对齐,scale缩放,loop循环等.
这样我们的嵌入过程就完成了.
如果你想使用flashVars来进行html与flash之前的通讯,使用swfobject也是很容易的,但有一点使用swfobject时只有在 swf刚一载入时传递参数.并且是以值对的形式来传递,如下:variable1=value1&variable2=value2& variable3=value3
使用方法如下:

程序代码
<script type="text/javascript">
   var fo = new FlashObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
   fo.addVariable("variable1", "value1");
   fo.addVariable("variable2", "value2");
   fo.addVariable("variable3", "value3");
   fo.write("flashcontent");
</script>

一旦这一步完成,那么所有的变量就已经传入到flash,你就可以灵活的在你的flash中的_root上使用了.deconcept flashObject还提供了可以加入其它参数的说明.你可以详细查看

详细代码:
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("test.swf", "myContent", "300", "120", "9.0.0", "expressInstall.swf");  
</script>

</head>
<body>
<div id="myContent">
<h1>Alternative content</h1>
<p>
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a>
</p>
</div>
</body>

评论: 0 查看评论 发表评论


最新新闻:
· 传盛大密签王菲 春晚实为游戏电影造势(2010-02-06 12:28)
· 商业周刊:乔布斯iPad志在云计算(2010-02-06 12:27)
· 十大最佳Ajax教程(2010-02-06 12:21)
· 微软下周不修复新IE漏洞(2010-02-06 12:18)
· Firefox 4.0演示视频曝光(2010-02-06 12:10)

编辑推荐:ASP.NET MVC 2 RC 2 发布

网站导航:博客园首页  个人主页  新闻  闪存  小组  博问  社区  知识库

posted on 2009-10-27 13:14  开始上路  阅读(2138)  评论(0编辑  收藏  举报