第 11 单元 流媒体 课程目标: 掌握在网页中使用动画、音频、视频技术 建议学时:理论2学时,实践2学时。 11.1 使用动画 11.1.1 插入GIF动画 GIF动画也是网页设计中常用到的一种动画类型,制作GIF动画的软件也很多,如Photoshop套装软件中的ImageReady、Firework等均可很容易地制作GIF动画。GIF动画是以.gif文件格式存储的,在Dreamweaver8中可直接插入。 在Dreamweaver8中将GIF动画视为图像对待,插入GIF动画与插入一般的图像相同,插入后仅显示GIF动画中的第一帧,可以预览时看到其动画效果。 11.2.1 插入FLASH动画 Micromedia公司的FLASH动画制作软件功能强大,广泛用于制作网页动画和多媒体作品,由于其采用矢量图形式,制作完成的动画文件较小,同时支持边下载边播放,比较适合于在网上传播。在网页设计中常常使用到FLASH动画,以增加网页的动态效果。 (1)在网页中插入FLASH动画与插入普通的图像类似,执行菜单【插入】—【媒体】—【FLASH】,打开选择要插入的FLASH动画文件对话框。 (2)在对话框中选择FLASH文件(*.swf),即可将FLASH动画插入到插入点位置,出现FLASH动画占位符,如图11-1所示。 图11-1 插入FLASH动画 (3)单击【占位符】,在属性面板还可以进一步设置对象名、自动播放、参数等。如图11-2所示。 图11-2 FLASH动画属性面板 (4)在网页中还常常使用一种透明FLASH动画,把FLASH动画效果加在某个图像上,如图11-3、11-4所示,11-3是一个黑色背景的FLASH动画,要将其加放在图11-4上,可将图11-4设置为一表格(1行1列)的背景,然后再插入图11-3的FLASH动画。但此时需要在属性面板按下【参数】按钮,在出现的对话框中增加一个参数“w mode”,并设其值为“transparent”(透明),如图11-5所示,设置透明后的效果如图11-6所示。 图11-3 FLASH动画 图11-4 Banner图形示例 图11-5 设置FLASH透明参数 图11-6 设置FLASH动画透明后与图像的叠加效果 插入的FLASH动画为什么不像GIF动画一样显示出画面,而是显示占位符呢?打开插入FLASH动画后的网页HTML代码,会发现插入FLASH动画后的代码如下: