Dreamweaver CS3网页设计与制作教程 第2版 申莉莉教案 第14章新.pptVIP

第14章 动画和多媒体　　　 本章内容 14.1 案例1：创建基本动画 14.2 案例2：创建图像动画 14.3 案例3：插入Flash对象 14.4 案例4：插入视频 14.5 案例5：插入音频 14.6 插入其他多媒体对象 14.7 在HTML代码中插入多媒体 14.8 安装多媒体插件 14.9 上机实训 14.10 习题 14.1 案例1：创建基本动画 【案例目的】利用时间轴创建基本动画，物 体从画面左侧飞至右侧 。 【核心知识】应用AP Div插入对象，AP Div添加到时间轴。 14.1 案例1：创建基本动画 14.1.1 时间轴概述 14.1.2 时间轴面板 14.1.3 使用时间轴创建动画 14.1.1 时间轴概述 时间轴也称为时间线，用于排列画面的顺序，表示网页元素在不同时间的不同状态。它由通道组成，每一个通道里放置一个运动的对象。 不需要任何ActiveX控件、插件或Java程序，通过往文档中添加JavaScript代码就可以实现时间轴构建的动态效果。 14.1.1 时间轴概述 时间轴还有4项功能： 改变层的大小 改变层的可见性 改变层的叠放顺序 改变图片的属性 14.1.2 时间轴面板 选择“窗口”→“时间轴”或按快捷键Alt＋F9，即可显示时间轴面板。 14.1.3 使用时间轴创建动画 创建时间轴动画，就是首先在动画通道上添加对象构建动画条，然后构建动画条上的关键帧，最后在文档窗口中设置对象在关键帧上的位置，从而实现动画效果。 14.1.3 使用时间轴创建动画 案例分解：创建基本动画 （1）打开网页文件 （2）选择菜单“插入记录”→“布局对象” →“AP Div” （3）将插入点放置在AP Div中，选择菜单“插入记录”→“图像” （4）选中AP Div，将其拖到时间轴面板 （5）单击“确定”按钮，在时间轴面板中出现动画条，拖动最右端的关键帧标记至60帧。 14.1.3 使用时间轴创建动画 案例分解：创建基本动画 （6）在时间轴面板中选中第30帧，单击鼠标右键，在弹出的快捷菜单中选择“增加关键帧”命令，插入关键帧。选中第30帧，将AP Div拖动到相应位置。 （7）选中第60帧，将AP Div拖动到相应位置 。 （8）保存文档，按F12键预览动画效果。 14.2 案例2：创建图像动画 【案例目的】通过改变图像的源文件，创建 图像切换效果。 【核心知识】通过属性面板改变图像的源文 件。 14.2 案例2：创建图像动画 14.2.1 编辑时间轴 14.2.2 将行为应用于时间轴 14.2.3 创建图像动画 14.2.1 编辑时间轴 新建、删除及重命令时间轴 14.2.1 编辑时间轴 2．为时间轴添加动作、对象及关键帧 14.2.1 编辑时间轴 3．将已有的动画应用于其他对象 （1）单击鼠标选中要复制的动画条。 （2）选择“编辑”→“复制”命令。 （3）从时间轴下拉菜单中选择目标时间轴，并设置回放头的位置。 （4）选择“编辑”→“粘贴”命令。 14.2.2 将行为应用于时间轴 时间轴上添加行为主要用于位置和时间轴都发生变换的动画。在时间轴上使用帧的原理是当动画运动到加入行为的帧时，将自动选择行为中的事件，再由事件诱发对应的动作。如果在时间轴面板中创建了多个时间轴，可以使用时间轴行为在不同的时间轴之间进行转换。 14.2.3 创建图像动画 案例分解：创建图像动画 （1）在文档窗口中，插入图像一，并将其添加在时间轴上。 （2）选中第15帧添加关键帧，在图像的属性面板窗口处的“源文件”文本框中输入要切换的文件的URL地址。 （3）选中第30帧，用同样方法插入其他图像。 （4）保存文档。 14.3 案例3：插入Flash对象 【案例目的】在网页中插入Flash动画、Flash按钮及Flash文本。 【核心知识】插入Flash对象的方法、修改Flash对象。 14.3 案例3：插入Flash对象 14.3.1 插入Flash动画 14.3.2 插入Flash按钮 14.3.3 插入Flash文本 14.3.1 插入Flash动画 1．插入Flash动画 选择菜单“插入记录”→“媒体”→“Flash”。 2．设置Flash动画属性 单击选中插入的Flash对象，选择菜单“窗 口”→“属性”，打开属性面板 。 14.3.1 插入Flash动画 案例分解1：插入Flash动画 （1）将光标位于要插入Flash动画的位置，选择菜单“插入记录”→“媒体”