swfobject

SWFObject: 基于Javascript的Flash媒体版本检测与嵌入模块

请注意: 由于法律原因,FlashObject已经更名为SWFObject,详见这里

内容导读

新功能

 

[对于急切需要下载的用户点击这里直接观看JS代码]

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

<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以及对用户体验方面非常有必要。

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需要的版本号,它可以详细到 '主版本号.小版本号.细节',例如:"6.0.65"。一般地,我们只需传入主版本即可,例如:"6"
  • background-color - Flash资源的背景色,16进制格式

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

  • quality - 画面质量,默认为"high"
  • xiRedirectUrl - 详见ExpressInstall相关
  • redirectUrl - 没有安装相应版本的播放器后自动跳转的目标地址
  • detectKey - 这是当忽略检测时,SWFObject将去url地址中查找的变量,默认值为“detectflash”,后续有详细介绍
so.write("flashcontent");

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

细节

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

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+,各种浏览器的后续版本也会继续支持

SWFObject检测Flash播放器版本从3开始到最新的版本号,而且也消灭了IE中“激活”的麻烦。这里有相关背景

SWFObject可以方便地检查版本细节,例如我们需要v.6.0 r65 (or 6,0,65,0) 来处理SWF资源,就可以添加如下代码:

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

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

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

SWFObject 范例

以上我们接触到的范例都最基础的,接下来我们列举一些其他功能,尤其是传入参数、变量这些使用频率较高的行为。

传入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支持的内联参数列表:full list of the current parameters and their possible values(adobe.com官方资源)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当然可以,以下是一个简单的 Flash 动画的制作步骤: 1. 在 Flash 软件中创建一个新的文档。 2. 选择一个场景背景,可以是一个图片或者是一个颜色。 3. 在场景中添加一个元件(MovieClip),例如一个小球。 4. 设置小球的运动轨迹,可以使用动画关键帧和运动补间来实现。 5. 添加音效和背景音乐,可以使用 ActionScript 语言来控制音效的播放。 6. 导出动画为 SWF 文件。 7. 在网页中嵌入 SWF 文件,可以使用 HTML 标签或者 JavaScript 代码来实现。 下面是一个简单的 Flash 动画示例代码,仅供参考: 1. 创建一个圆形小球 在场景中添加一个元件(MovieClip),并将其命名为 "ball"。在第 1 帧中,绘制一个圆形,然后在时间轴上添加一个关键帧。 2. 设置小球的运动轨迹 在第 1 帧和第 60 帧之间,添加一个运动补间,将小球从屏幕左侧移动到右侧。在第 60 帧处,添加一个关键帧,将小球移动到屏幕左侧,并在时间轴上添加一个关键帧。然后再添加一个运动补间,将小球从屏幕左侧移动到右侧。重复这个过程,直到动画结束。 3. 添加音效和背景音乐 在场景中添加一个音效元件和一个背景音乐元件。使用 ActionScript 语言来控制音效的播放,例如: ``` var sound:Sound = new Sound(new URLRequest("sound.mp3")); sound.play(); ``` 4. 导出动画为 SWF 文件 在 Flash 软件中选择 "文件" -> "导出" -> "导出为 SWF 文件",然后选择输出路径和文件名,点击 "导出" 按钮,即可导出 SWF 文件。 5. 在网页中嵌入 SWF 文件 可以使用 HTML 标签或者 JavaScript 代码来嵌入 SWF 文件,例如: ``` <object width="500" height="400"> <param name="movie" value="animation.swf"> <embed src="animation.swf" width="500" height="400"> </object> ``` ``` <script> var flashvars = {}; var params = { menu: "false", scale: "noScale", allowFullscreen: "true", allowScriptAccess: "always", bgcolor: "#FFFFFF" }; var attributes = {}; swfobject.embedSWF("animation.swf", "flashContent", "500", "400", "10.0.0", "expressInstall.swf", flashvars, params, attributes); </script> ``` 以上是一个简单的 Flash 动画制作的步骤和示例代码,如果您需要制作更复杂的动画,需要更加深入的研究和编程技能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值