☆代码学习群简易教程（16）

动画图篇标签——“春天没来”编撰

一、认识多媒体标签：

上面是一个简单的多媒体标签。解析如下：

<“多媒体标签”或者“插入标签” 高度＝“510” 对齐方式＝居右宽度＝"660" 路径＝“具体的有效的图片地址" 品质＝“高品质” 窗口模式＝“透明窗口模式”>

注释：多媒体图片的地址一般是以 “ swf ”（一种动画文件格式）标识结尾的图片地址，也可以是以Midi（一种声音格式）、Wav（一种声音格式）、AIFF（一种声音格式）、AU（一种音乐格式）、MP3等标识结尾的地址。

多媒体标签，不用使用尾标签。（在有些网站中，可能需要使用尾标签。）

二、多媒体标签解析：

标签解析：

embed（标签名称：多媒体标签或者插入标签）

height="400"（高度=400px）

type="application/octet-stream" （类型=任意的二进制数据）

width="600" （宽度=600px）

src="动画地址"（路径=具体的有效的动画地址）

wmode="transparent"（窗口模式=透明窗口模式）

invokeurls="false" （出现URL事件时是否会启动浏览器。值为“false”时，为“不启动”。值为“true”时则为“启动”。）

quality="high" （品质=高品质）

allowScriptAccess="never" （设置防止页面跳转=外出脚本访问将始终失败。）

allowNetworking="internal" （设置防止页面跳转＝可以控制 SWF 文件对网络功能的访问）

wmode是window mode的缩写，意思为“窗口模式”。窗口模式总共有三种：window 模式、Opaque 模式与Transparent 模式。

window 模式：

默认情况下的显示模式，在这种模式下flash player有自己的窗口句柄，这就意味着flash影片是存在于Windows中的一个显示实例，并且是在浏览器核心显示窗口之上的，所以flash只是貌似显示在浏览器中，但这也是flash最快最有效率的渲染模式。由于他是独立于浏览器的HTML渲染表面，这就导致默认显示方式下flash总是会遮住位置与他重合的所有DHTML层。

Opaque 模式：

这是一种无窗口模式，在这种情况下flash player没有自己的窗口句柄，这就需要浏览器告诉flash player在浏览器的渲染表面绘制的时间和位置。这时flash影片就不会在高于浏览器HTML渲染表面而是与其他元素一样在同一个页面上,因此你就可以使用z-index值来控制DHTML元素是遮盖flash或者被遮盖。

Transparent 模式：

透明模式，在这种模式下flash player会将stage的背景色alpha值将为0并且只会绘制stage上真实可见的对象，同样你也可以使用z-index来控制flash影片的深度值，但是与Opaque模式不同的是这样做会降低flash影片的回放效果，而且在9.0.115之前的flash player版本设置wmode=”opaque”或”transparent”会导致全屏模式失效。

了解了各种模式的实现方式和意义，在以后的制作中就可以按照具体情况选择设置wmode属性的值了。

allowNetworking的属值有：all、internal和none。

属值设置为"all"（全部的意思。此属值为默认值。）时：― SWF 文件中允许使用所有网络 API（应用程序编程接口）。

属值设置为时internal时：― SWF 文件可能不调用浏览器导航或浏览器交互 API，但是它会调用任何其它网络 API。

属值设置为none时：― SWF 文件可能不调用浏览器导航或浏览器交互 API，并且它无法使用任何 SWF 到 SWF 通信 API。

AllowScriptAccess 参数可以防止从一个域中承载的 SWF 文件访问来自另一个域的 HTML 页面中的脚本。对从另一个域承载的所有 SWF 文件使用可以确保位于 HTML 页面中的脚本的安全性。

AllowScriptAccess 的属值有：sameDomain、never和always。

属值设置为sameDomain时：仅当SWF 文件和网页位于同一域中时才允许执行外出脚本访问。这是 AVM2 内容的默认值；

属值设置为never时：外出脚本访问将始终失败。

属值设置为always时：外出脚本访问将始终成功。

三、添加属性：

1、动画图片中添加“标题”属性，能够显示。

代码：

用光标指向动画图片时，会显示出“漂亮美女供欣赏”的文字。

2、动画图片中添加“边框线”属性，能够显示。

代码：

3、动画图片中添加"css定位样式"，绝大部分浏览器支持。

代码：

4、动画图片中还添加许多属性，有兴趣的朋友可自己试试。

四、多媒体标签应用：

1、欣赏多媒体图片：

把多媒体图片的地址粘贴到“浏览器”地址栏，点击浏览器地址栏右面的“箭头图标”，可全屏观赏多媒体图片。

把多媒体图片的地址粘贴到“链接标签”中，链接标签的“首标签”与“尾标签”之间输入文字或者粘贴图片标签，然后将代码“粘贴”到撰写文章处的“代码编辑”页面中，“发表”以后，点击链接文字（或者链接图片）可以欣赏多媒体图片，还可以保存多媒体图片。

欣赏与保存多媒体图片举例：http://www.360doc.com/content/12/1112/06/4127803_247317430.shtml

2、制作小模块：

应用多媒体图片制作小模块，可以把多媒体图片（即：动画图片）放入表格的单元格中，在表格标签中设置css的相对定位样式，在要放入的网页内容中设置css的绝对定位样式。把网页内容覆盖到多媒体图片上面。效果非常美观。举例如下：

http://www.360doc.com/content/13/0820/21/4127803_308614001.shtml

3、制作图书馆首页顶图

应用多媒体图片可以制作图书馆首页顶图。

举例如下：

http://www.360doc.com/content/13/0318/19/4127803_272305641.shtml

上面的顶图是：用设置了css绝对定位样式的块区控制移动标签，用移动标签控制一个一行四列的表格。表格的每个单元格中都放入了一个动画图片。

4、美化边框：

举例如下：

http://www.360doc.com/content/13/0908/07/4127803_312964527.shtml

上面的边框，是在一个二行一列的四层边框的第一个单元格中设置了一个移动标签。第二个单元格是放置网页内容的地方。第一个单元格中的移动标签控制一个一行三列的表格，表格的每个单元格中放入了一个图片，用css的外边距属性，把两个动画图片覆盖到了图片的上层。

5、装饰网页内容

举例如下：

http://www.360doc.com/content/14/0301/18/4127803_356776894.shtml

上面的网页，是在表格标签中设置了css的相对定位样式，设置了背景图片（美女图片），然后用css的绝对定位样式，把两个动画图片覆盖在背景图片的上层。

五、制作播放器：

制作播放器，一般来说，需要注册一个音乐网站。制作播放器的时候，可以有许多样式供您选择。选择的详细内容请你参阅这篇文章：

http://www.360doc.com/content/12/0927/06/4127803_238379720.shtml

注册音乐网站以后，可以制作出各式各样的漂亮播放器。举例如下：

1、有漂亮画面的播放器：

http://www.360doc.com/content/13/0208/17/4127803_264854832.shtml

2、有开关，有歌曲标题的播放器：

http://www.360doc.com/content/12/1013/20/4127803_241291713.shtml

制作成功的播放器一般是不能修改的。除非你登录你制作播放器时的音乐网站，或许可以修改；或者是你制作的播放器代码中留有修改的余地。

六、用代码制作播放器：

代码：

这是一种通用的手动播放播放器代码。所谓“通用”，是指可以“任意修改”的意思。代码中，“董文华”是歌手的名字，“十五的月亮”是“董文华演唱的歌曲”的名字。如果你想制作其他歌手的播放器，只要把这两处的名字修改一下就行了。如果你想制作自动播放的播放器，就把上面代码中的：autoPlay=false修改为：autoPlay=true 即可。

你也可以给这种播放器添加图片或者动画图片，制作成为有漂亮画面的播放器。

例如：

http://www.360doc.com/content/14/0316/14/4127803_361022240.shtml

七、网页中添加播放器

在网页中添加播放器有两种方法。

一种是显示播放器的图片。播放器的图片可作为网页的组成部分，制作成为一种漂亮的网页效果。

例如：http://www.360doc.com/content/14/0530/16/4127803_382324705.shtml

制作这种网页，可以用自动的播放器，也可以用手动的播放器。

另一种方法是应用隐藏的播放器，作为网页的背景音乐。

制作这种网页，只能用自动播放的播放器，而且要把播放器的宽度值与高度值都修改为0px。

《代码学习群简易教程》编写说明

应一些群友的要求，我于2014年3月开始编写《代码学习群简易教程》。这部教程，是在去年我撰写的《代码入门教程》的基础上改编的。

这次改编，应一些群友的要求，基本上采用了黑白版，不添加装饰，不使用边框，为的是使朋友们浏览时舒适，不刺眼，复制时也方便。

最近，又有群友提议，《教程》中的重点内容，希望用彩色文字标示。以后的教程，我将采用不同的文字颜色撰写，在《教程》的内容中，也会插入一些简单的分隔线。

这次改编，修正了《代码入门教程》中错误的地方，融入了新的心得体会，力求通俗易懂，实用性强。特别是在教程中加大了应用举例的笔墨力度，并附有比较详细的解析说明。

由于本人的代码知识水平有限，《教程》中一定还存在不少错误的地方，一定还有许多章节不能令群友们满意，希望大家阅览之后，提出宝贵的意见，本人在此深表谢意。

上面的这篇文章中，我添加了一个隐藏的播放器。在“代码编辑”页面中，可查看播放器的代码。

八、注意事项：

应用动画图片制作网页时需注意：普通图片，我们可以任意修改图片的规格。把图片的宽度设置为多少px，就是多少px；把图片的高度设置为多少px，就是多少px。而动画图片就不同了。你把它的宽度设置为600px，网页显示的效果不一定是600px。高度也是如此，你把它的高度设置为300px，网页显示的效果不一定是300px。因为动画图片的规格是按比例缩放的。

一个人所获得的知识如同一个圆。这个圆越大，不懂的问题就越多。代码学习也是如此。你钻研得越深，不懂的问题也就越多。任何一门知识都是无止境的啊！

——“春天没来”谨启

作业：

1、认识多媒体标签的表达方式。

2、认识多媒体标签中的属性属值。

3、学会给多媒体标签添加一些属性。

4、学会应用浏览器的地址栏欣赏多媒体图片。

5、应用动画图片制作一个小模块。

6、应用动画图片制作一个图书馆顶图。

7、应用动画图片美化一个边框。

8、给你的一篇文章添加一个有图片的播放器。

9、给你的一篇文章添加一个隐形播放器，作为网页的背景音乐。

10、应用通用播放器代码，制作几个你喜欢的手动播放器和自动播放器。

2014年6月1日于北京

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。