第9章 时间轴动画及行为
帧的动画
/webnew/
第9章
9.1 9.2 9.3 9.4 9.5
创建网页动画
网页动画利器——时间轴 将时间轴与行为结合起来 用插件实现层动画效果 精彩的网页过渡效果 上 机 实 战
/webnew/
修改时间轴动画
1. 改变动画时间 要改变整个动画时间，其具体操作如下。 (1) 单击相应的动画条，可以选中一个动画条。 (2) 拖动动画条最右端的关键帧标记，将它左右拖动，如图9.9所示，这时动画条长度 会发生变化，同时上面所有的关键帧标记也按照比例移动相应的位置。如果希望保持所有 中间位置的关键帧不动，可以按住Ctrl键，再拖动结束帧标记。 要改变动画局部的播放时间，即改变关键帧之间的动画播放速度，其具体操作如下。 (1) 单击相应的动画条，可以选中一个动画条。 (2) 在动画条上左右拖动相应的关键帧标记。 要改变动画起始时间，其具体操作如下。 (1) 单击相应的动画条，可以选中一个动画条。 (2) 将动画条在动画通道上左右拖动。 2. 改变动画对象 要改变动画条对应的对象，其具体操作如下。 (1) 单击相应的动画条，可以选中一个动画条。右击，在快捷菜单中选择【改变对象】 命令，这时会打开如图9.10所示的对话框，提示用户选择新对象。 (2) 选择新对象，单击【确定】按钮确定操作，即可改变动画条对应的对象。
/webnew/
9.1.1
【时间轴】面板
时间轴主要是通过【时间轴】面板构建的。用户可以选择【窗口】|【时间轴】 命令，如图9.1所示，或按Alt+F9组合键，即可以显示如图9.2所示的【时间轴】 面板。 从图9.2可以看出，【时间轴】面板主要由时间轴下拉列表框、行为通道、动画 通道、动画条、控制按钮和控制选项等部分组成。 下面介绍【时间轴】面板上的主要元素。 【时间轴下拉列表框】主要用于控制哪条时间轴显示在【时间轴】面板上。在 下拉列表中，可以选择不同的时间轴，可以在【时间轴】面板上显示不同的时 间轴设置。 在【行为通道】上，将显示为时间轴上相应时间中所附加的行为，浅蓝色的方 块表示存在行为。 在【帧数】这一行中，显示时间轴上不同时间对应的动画帧。 【回放头】是位于帧数行上的红色方块，它表明当前的动画放映的位置，通过 在【时间轴】面板上拖动回放头，可以在文档窗口中看到相应时间上动画放映 的状态。同时，当前回放头所在的帧位置会显示在【时间轴】面板上方的前进 箭头按钮和后退箭头按钮之间的文本框中。
第9章 时间轴
第9章 时间轴 章 时间轴
9.2 认识时间轴面板
• 在Dreamweaver 8中，通过选择“窗口”菜单中的 “时间 8中 通过选择“窗口” 命令或使用组合键ALT+F9 ALT+F9， 轴”命令或使用组合键ALT+F9，就可以打开如图所示的时 间轴面板。 间轴面板。
第9章 时间轴 章 时间轴
9.2 认识时间轴面板
第9章 时间轴ቤተ መጻሕፍቲ ባይዱ章 时间轴
9.4编辑时间轴 9.4编辑时间轴
(2)通过在时间轴面板中任意位置右键单击， (2)通过在时间轴面板中任意位置右键单击，弹出快捷菜单如 通过在时间轴面板中任意位置右键单击 9.7所示 所示。 图9.7所示。
第9章 时间轴 章 时间轴
9.4编辑时间轴 9.4编辑时间轴
(3)通过使用“修改” 时间轴” (3)通过使用“修改”菜单中 “时间轴”命令如图所示进行编 通过使用 辑。
第9章 时间轴 章 时间轴
9.3创建时间轴动画 9.3创建时间轴动画
（5）将时间轴面板中自动播放和循环勾选上，通过浏览器即 将时间轴面板中自动播放和循环勾选上， 可看到动画效果。这样一个简单的时间轴动画就做好了。 可看到动画效果。这样一个简单的时间轴动画就做好了。
第9章 时间轴 章 时间轴
9.4编辑时间轴 9.4编辑时间轴
第9章 时间轴 章 时间轴
09时间轴
9.3 对时间轴动画的编辑
（2）改变关键帧位置 ） 如果想使层能够更快些或更慢些到达关键帧 位置，可在动画条中向左或向右移动该关键帧。 位置，可在动画条中向左或向右移动该关键帧。
9.3 对时间轴动画的编辑
（3）改变动画的起始时间 ） 如果想改变动画的开始时间， 如果想改变动画的开始时间 ， 可选择和该动 画相关联的一个或所有动画条（ 画相关联的一个或所有动画条 （ 选择的同时按住 shift键即可选中多个动画条 ） ， 然后将选择的动 键即可选中多个动画条） 键即可选中多个动画条 画向左或向右拖动。 画向左或向右拖动。
例2 制作曲线运动的动画
（1）先插入层，打开“时间轴”面板 ）先插入层，打开“时间轴” 插入 布局对象 层；窗口 时间轴 时间轴” （ 2） 选中层 ， 单击 “ 修改 ” “ 时间轴 ” “ 录制 ） 选中层， 单击“ 修改” 层路径” 层路径” （ 3）拖动该层绘制运动路径 ， 完成后会自动出现动 ） 拖动该层绘制运动路径， 画条。 画条。 （4）保存预览 ）
9.3 对时间轴动画的编辑
（1）改变动画条长度 ） 如果想使动画延长， 可拖动最后的帧标识。 如果想使动画延长 ， 可拖动最后的帧标识 。 此时该动画的所有关键帧也会相应地调整， 此时该动画的所有关键帧也会相应地调整 ， 以保 持各关键帧之间的相对位置不变。改变动画条长 持各关键帧之间的相对位置不变 。 度只是改变动画的播放时间长度， 度只是改变动画的播放时间长度 ， 不会改变动画 运动轨迹的长度。 运动轨迹的长度。
9.2 利用Dreamweaver制作时间轴动画 利用 制作时间轴动画
例1 制作直线运动的文字
（1）先插入层 ） 插入 布局对象 层 2）打开“时间轴” （2）打开“时间轴”面板 窗口 时间轴 （3）确定层的起始位置后，把层拖入到时间轴中 ）确定层的起始位置后， （4）拉长该层所占时间长度 ） （ 5） 点击时间轴上的最后一帧 ， 在编辑窗口中把层 ） 点击时间轴上的最后一帧， 拖动到停止位置。 这时候会出现一根斜线的路径） 拖动到停止位置。（这时候会出现一根斜线的路径） （6）保存预览 ）
《网页设计与制作》(第二版)电子第五章时间轴与行为PPT课件
同时在时间轴面板中自动生成动画条 ：
（4）此时拖动时间轴面板上的回放头，就可以欣赏 动画效果。如果动画不符合要求，可以继续修改 动画相关的属性，直到满意为止。
5.2 行为
行为可以让用户不用手工编写代码，就能够制作出具有 强大的交互功能和丰富的动态效果的网页。
一.行为控制器 二.事件菜单 三.动作菜单 四.常见行为举例
（1）时间轴下拉菜单：在该下拉菜单中选择要控制的时间 轴。
（2）回放头：即时间轴面板中的红色方块。拖动回放头， 可以在页面显示动画效果。
（3）帧编号：显示时间轴上帧的编号。 （4）行为通道：在该通道中显示时间轴在各时间段的行为。 （5）动画条：显示对象的动画轨迹。 （6）关键帧：通过关键帧确定时间轴上某时刻的属性。动
2 OnAfterUpdat 图像，页面等 e
3 OnBeforeUpda 图像，页面等 te
4 OnFocus
按钮，链接和文本框等
5 OnBlur
按钮，链接和文本框等
6 OnClick
所有对象
7 On DblClick 所有对象
8 OnError
图像，页
一.行为控制器
1.调出行为控制器
▪ 单击快捷工具栏内的“行
为”图标，或单击“窗 口”→“行为”菜单命令， 即可调出“行为”对话框， 即行为控制器 。
行为控制器
2.选择目标浏览器
▪ 设计的各种精彩的动态交 互动作最终需要用户在浏览 器中观赏，而不同的浏览器 中可以使用的行为也不尽相 同。所以在使用行为前需要 选定目标浏览器。
链接图像和文字等
当焦点在对象上，按键处于按下状 态时
18 OnKeyPress
链接图像和文字等
当焦点在对象上，按键按下时
《创建时间轴动画》PPT课件
1 藤蔓式填充
2 网格填充
3 对称刷子
网格填充
• 单击“Deco工具”按钮，在属性面板的 “绘制效果”选项卡中的下拉列表中选择 “网格填充”模式，在工作区中单击鼠标， 则图案将以网格的方式填充整个区域。
对称刷子
• 选择“Deco工具”，在属性面板的“绘制效果”选项卡 中的下拉菜单中选择“对称刷子”模式，在工作区中单 击鼠标，则图案将以对称的形式填充整个区域。在工作 区中出现一个轴线，同时在属性面板的“高级选项”选 项卡中的下拉菜单中提供了4种模式，选择不同的模式， 图案的对称形式和调整形式也会有所不同
⑤再次按F7键在时间轴的第4帧上新建一个关键 帧，然后将画有昕昕微笑表情的元件“head” 拖到舞台上，然后单击“任意变形工具”按钮 将元件“head”旋转一定角度。
⑥用鼠标右键单击舞台空白处，将帧频改为5fps。 按Ctrl+Enter组合键预览动画效果，即可形成一 个昕昕微笑点头的动画效果。
⑦选择“文件”|“保存”命令将该fla文件保存。
过”、“按下”、“单击”。 • 影片剪辑元件 ：本身就是一段小动画，可以包含交互控制、声音甚至嵌套其他影片剪
辑的实例，是用途和功能最多的元件。
建立元件
建立元件的方法
将现有的矢量 对象转换成元 件 （快捷键：F 8）
使用元件编辑 模式建立元件 （快捷键：Ct rl+F8）
复制元件
• 创建元件后，用户可以在文档中重复使用它的实例，并修改单个实例的以下实例 属性，而不会影响其他实例或原始元件。
步骤详解
④选中扇片图层第1帧，再按住Shift键同时单击第18 帧即可全选所有关键帧。然后右击鼠标出现快捷 菜单，选择“复制帧”命令。在第30帧处右击鼠 标出现快捷菜单，选择“粘贴帧”命令，即可把 第1~18帧内容复制到第30~47帧处。在第30~47帧 全选中的情况下右击鼠标出现快捷菜单，选择 “翻转帧”命令，把第1~18帧的状态翻转过来。 在第60帧右击鼠标出现快捷菜单，选择“插入帧” 命令进行延时。
矿产
矿产资源开发利用方案编写内容要求及审查大纲
矿产资源开发利用方案编写内容要求及《矿产资源开发利用方案》审查大纲一、概述
㈠矿区位置、隶属关系和企业性质。
如为改扩建矿山, 应说明矿山现状、
特点及存在的主要问题。
㈡编制依据
(1简述项目前期工作进展情况及与有关方面对项目的意向性协议情况。
(2 列出开发利用方案编制所依据的主要基础性资料的名称。
如经储量管理部门认定的矿区地质勘探报告、选矿试验报告、加工利用试验报告、工程地质初评资料、矿区水文资料和供水资料等。
对改、扩建矿山应有生产实际资料, 如矿山总平面现状图、矿床开拓系统图、采场现状图和主要采选设备清单等。
二、矿产品需求现状和预测
㈠该矿产在国内需求情况和市场供应情况
1、矿产品现状及加工利用趋向。
2、国内近、远期的需求量及主要销向预测。
㈡产品价格分析
1、国内矿产品价格现状。
2、矿产品价格稳定性及变化趋势。
三、矿产资源概况
㈠矿区总体概况
1、矿区总体规划情况。
2、矿区矿产资源概况。
3、该设计与矿区总体开发的关系。
㈡该设计项目的资源概况
1、矿床地质及构造特征。
2、矿床开采技术条件及水文地质条件。
第9章 层、行为与时间轴
在时间轴面板中： 时间轴选单：显示目前所编辑的时间轴名称。 播放头： 红色的播放头指示在网页中显示的是哪一帧。 动画条：即图中的Layer11，Layer12，可显示每个层对象
的持续时间。 关键帧：动画条中的小圆圈是关键帧。 帧数：显示播放头的位置。
：回转，可将播放头移到时间轴的初始帧。 ：后退，将播放头往左移动一帧。 ：前进，将播放头往右移动一帧。 FPS：播放速度。每秒种播放的帧数。 自动播放：当网页载入到浏览器时使当前时间轴自动播 放。 循环：当网页载入到浏览器时使当前时间轴循环播放。
为了避免显示错误，可以先用图层来快速创建复杂 的页面布局，然后再把图层布局转换为表格布局。需要 时，也可以进行图层和表格的相互转换，以调整布局和 优化页面设计。
1、 将图层转换为表格
在Dreamweaver MX中，先用图层来制作一个页 面，选择“修改”|“转换”|“层到表格”命令，弹出 “转换层为表格”对话框，根据需要对以上各项进行 设置，设置完毕单击“确定”按钮。
层是在制作网页中经常用到的对象，元素的定位就是一个简单的 应用。用表格来对网页进行排版非常方便，但有时需要在文字上放一 些图片之类的元素，表格就不能胜任了，这时就可以利用图层来排版。
图层可以重叠地放置，制作出层叠的效果。也可以控制层的显示 或隐藏，实现交互技术。配合时间显的使用，还可以同时移动一个或 多个图层，轻松制作出动态效果。
Dreamweaver 网页设计
第9章 层、时间轴与行为
【学习概述】
层、时间轴、行为可以说是网页设计 中革命性的技术。搭配使用层、时间轴、 行为可以制作出活泼多样的动态页面以 及效果惊人的互动网页。
通过本章学习，应该掌握以下内容：
1. 认识图层 2. 图层的基本操作 3. 图层的管理 4. 图层与表格的相互转换 5. 时间轴、行为等。
08行为与时间轴
13
8.4
向页面中添加基本行为
8.4.4 检查表单
利用【检查表单】动作可以为表单中各元素 设置有效性规则，并检查指定文本域的内容 以确保用户输入正确的数据类型
使用【检查表单】动作的操作步骤如下：
1. 首先在文档中插入表单和文本域。
2. 然后执行下列步骤之一：
如果要在用户填写表单时验证单个文本域， 选取一个文本域，打开【行为】面板。
如果要在用户提交表单时验证多个文本域， 单击文档窗口左下角标签选择器中的<form> 标签并打开【行为】面板。
14
8.4
向页面中添加基本行为
8.4.4 检查表单
3. 从【添加行为】下拉列表中选择【检查表单】 动作。
4. 重复以上操作检查其他的文本域。
5. 单击【确定】按钮，在【行为】面板中选择适 当的事件。
或者在【播放声音】域中输入声音文件的路 径和名称。单击【确定】按钮。 4. 在【行为】面板中选择适当的事件。
19
8.4
向页面中添加基本行为
8.4.9 显示弹出式菜单
使用【显示弹出式菜单】行为来创建或编辑 Dreamweaver弹出菜单，或者打开并修改已插入 Dreamweaver文档的Fireworks弹出菜单 。
5
8.2 行为的概述
行为是动作和触发该动作的事件的结合体 1. 事件
事件是触发动态效果的原因，它可以被附加在各 种页面元素上，也可以被附加到HTML标记中。
2. 动作 动作其实是一段网页上的JavaScript代码，这些 代码在特定事件被激发时执行，从而实现访问者 与Web页进行交互，以多种方式更改页面或执行 某些任务。通过动作来完成动态效果，如：打开 浏览器窗口、显示或隐藏层、播放声音等都是动 作。
第9章 时间轴动画及行为
图9.3 移动层轨迹到动画结束位置
9.2 创建并修改时间轴动画
在定义了时间轴的基本参数后，仍然可以使用时间轴添加帧、删除帧、 增加关键帧，增加、删除、改变对象，改变动画开始时间等。具体如下： 添加或删除关键帧 移动某一关键帧的层的位置 移动某一关键帧的播放时间 更改动画开始时间 延长动画的播放时间 动画的自动播放和循环播放 重命名时间轴 移动整个动画轨迹的位置
9.3 行为的基本概念和操作
9.3.2 显示和设置事件
onMouseMove(IE3，IE4，IE5)：当鼠标在指定元素上移动时，在该页 面元素上就会触发该事件。 onMouseOut(NS3，NS4，IE4，IE5)：当将鼠标在指定元素上移开时， 在该页面元素上就会触发该事件。 onMouseOver(NS3，NS4，IE3，IE4，IE5)：当鼠标第一次移动到 指定元素时触发该事件。该事件通常用于链接。 onMouseUp(NS4，IE4，IE5)：当按下的鼠标按键被释放时触发该事件。 onMove(NS4，IE5)：当窗体或框架移动时触发该事件。 onReadStateChange(IE4，IE5)：当指定元素的状态改变时触发该事 件。 onReset(NS3，NS4，IE3，IE4，IE5)：当表单内容被重新设置为默 认值时触发该事件。 onResize(NS4，IE4，IE5)：当访问者调整浏览器或框架大小时触发该 事件。 onRowEnter(NS4，IE4，IE5)：在当前捆绑数据源的当前记录指针改 变时触发该事件。 onRowExit(NS4，IE4，IE5)： 在当前捆绑数据源的当前记录指针改变 后触发该事件。
9.3 行为的基本概念和操作
9.3.3 行为的添加和编辑
《Flash动画制作课程》制作高级动画—时间轴特效、滤镜、混合模式动画教案
《Flash动画制作课程》制作高级动画—时间轴特效、滤镜、混合模式动画教案第一章：时间轴特效动画概述1.1 教学目标让学生了解时间轴特效动画的概念和作用。
让学生掌握时间轴特效动画的基本制作方法。
1.2 教学内容时间轴特效动画的定义和分类。
时间轴特效动画的制作流程。
时间轴特效动画的应用场景。
1.3 教学步骤1.3.1 导入：通过实例展示时间轴特效动画的效果，引发学生兴趣。
1.3.2 讲解：讲解时间轴特效动画的定义、分类和制作流程。
1.3.3 演示：教师演示时间轴特效动画的制作方法。
1.3.4 练习：学生跟随教师一起制作一个简单的时间轴特效动画。
第二章：滤镜应用2.1 教学目标让学生了解Flash中滤镜的基本概念和作用。
让学生掌握滤镜的添加、删除和修改方法。
2.2 教学内容滤镜的分类和效果。
滤镜的添加和删除方法。
滤镜属性的修改。
2.3.1 导入：通过实例展示滤镜效果，引发学生兴趣。
2.3.2 讲解：讲解滤镜的分类、效果和基本操作。
2.3.3 演示：教师演示如何添加、删除和修改滤镜。
2.3.4 练习：学生跟随教师一起对动画对象添加滤镜效果。
第三章：混合模式动画3.1 教学目标让学生了解混合模式的基本概念和作用。
让学生掌握混合模式的设置和应用方法。
3.2 教学内容混合模式的分类和效果。
混合模式的设置方法。
混合模式在动画中的应用场景。
3.3 教学步骤3.3.1 导入：通过实例展示混合模式动画的效果，引发学生兴趣。
3.3.2 讲解：讲解混合模式的概念、分类和效果。
3.3.3 演示：教师演示如何设置和应用混合模式。
3.3.4 练习：学生跟随教师一起制作一个混合模式动画。
第四章：制作飘落效果动画4.1 教学目标让学生了解并掌握飘落效果动画的制作方法。
让学生能够灵活运用时间轴特效、滤镜和混合模式制作动画。
飘落效果动画的构思和设计。
飘落效果动画的制作流程。
飘落效果动画的优化和调整。
4.3 教学步骤4.3.1 导入：通过实例展示飘落效果动画的效果，引发学生兴趣。
行为和时间轴99页PPT
选中层对象，在对应的浮动面板中，设置层的显示项为 Hidden，即层对象初始的可见性为隐藏
7. 为层添加动作 选中amuse层对象，然后在行为面板中，为这个层对象添
加两个显示-隐藏层动作。第一个动作是使amuse可见， 触发事件是onMouseOver。然后再添加一个使amuse层隐 藏的显示-隐藏层动作，触发事件设为onMouseOut。
边距设置为-140px。
5. 添加动画对象 用鼠标拖拽层Layer2对象，将其拖拽到时间轴浮动面板中。在结束
关键帧上，将层Layer2对象拖拽到层Layer1右面，即设置层 Layer2“左”边位置为600px。并选定“自动播放”和“循环”选项。
6. 设定暂停播放 选中层Layer2，展开行为面板并打开面板菜单，选中命令“时间
6. 外观选项卡设置如下：
7. 切换到“高级”页，设定弹出式菜单无边框，其他项目为默认值。 无边框
8. 切换到位置页，设定“菜单 位置”为第二项，即“低于 且位于触发器的左边缘” ； 下面的“X”、“Y”栏用于 指定菜单相对于文字链接左 上角的位置，这里设置如图； 然后选中“在发生 onMouseOut事件时隐藏菜 单”选项
在行为面板添加 “打开浏览器窗口”行为动作，打开对 话框：
触发事件设置为onDblClick，即当鼠标双击文本的 时候，弹出新的浏览器窗口。
三、制作弹出式菜单
菜单的好处在于可以把很多暂时不需要的命令隐藏起来， 只有当鼠标点击菜单条时，才能以下拉菜单的形式显示这 些隐藏的命令。
Dreamweaver MX中提供的“显示弹出菜单”和“隐藏弹 出菜单”就能够设计这样的菜单效果。
1 行为的事件和动作
在Dreamweaver MX中设 计行为是通过行为面板来 实现的 .
《动态时间轴》课件
时间轴的应用场景
01
02
03
04
时间轴在多个领域都有广泛的 应用，如历史研究、科学实验
、项目管理等。
在历史研究中，时间轴用于梳 理历史事件的发展脉络，帮助 学生或研究者更好地理解历史
进程。
在科学实验中，时间轴用于记 录实验过程和数据变化，有助 于分析实验结果和得出结论。
在项目管理中，时间轴用于规 划项目进度和任务安排，有助
动态时间轴的设计和制作技术将不断进步，出现 更多的专业工具和平台，提高制作效率和可视化 效果，同时也会降低制作门槛，让更多的人能够 参与到动态时间轴的制作中来。
感谢观看
THANKS
THE FIRST LESSON OF THE SCHOOL YEAR
个人成长经历的动态时间轴
总结词
记录个人成长的历程
详细描述
以动态时间轴的形式，将个人成长过程中的重要事件、节点和转折点按照时间顺序呈现出来，形成一 条完整的个人成长历程线，帮助观众更好地了解个人成长的轨迹和心路历程。
公司发展历程的动态时间轴
总结词
展示公司的发展轨迹和成就
详细描述
通过动态时间轴的方式，将公司的发展历程、重要产品或服务的推出、市场拓展、管理 层变动等关键节点按照时间顺序呈现出来，形成一条完整的发展轨迹线，帮助观众更好
时间轴是一种可视化工具，用于 表示时间跨度中的事件、进程或 历史发展。
02
它以线性的方式呈现时间，可以 清晰地展示事件之间的先后关系 和时间顺序。
时间轴的分类
根据时间轴的表现形 式，可以分为静态时 间轴和动态时间轴。
动态时间轴则通过动 画或交互方式展示时 间变化，更加生动形 象。
静态时间轴通常以平 面形式呈现，主要用 于展示历史事件或进 程。
二维动画制作第9章 按钮的应用
课堂学习目标
创建按钮元件 按钮的四个状态 四个状态帧的用途 实例
9.1 创建按钮元件
• 按钮实际上是四帧的交互影片剪辑。当为元件选择按钮行 为时， Flash 会创建一个四帧的时间轴。前三帧显示按钮 的三种可能状态，第四帧定义按钮的活动区域。时间轴实 际上并不播放，它只是对指针运动和动作做出反应，跳到 相应的帧。要制作一个交互式按钮，可把该按钮元件的一 个实例放在舞台上，然后给该实例指定动作。必须将动作 指定给文档中按钮的实例，而不是指定给按钮时间轴中的 帧。
• 指针经过：表示指针移到按钮上时的状态，在该帧上 要插入关键帧，再创建指针移动过按钮时的状态。一 般该帧相对于弹起帧应有所改变。如可以定义当鼠标 指针移到按钮上时按钮变色或放大等。对于文字按钮 可以定义当鼠标拖动到按钮上时，文字变亮等效果。
• 按下：表示按下按钮时的状态。在该帧上也需插入关键 帧，再创建鼠标按下按钮的状态。对于图形按钮来说， 定义按钮被按下的效果比未被按下要小一些，这样当按 下按钮时，按钮自动缩小，出现动态效果。
（9）完成之后，选择“编辑”/“编辑文档”。从“库”面板中 拖出按钮元件即可在文档中创建该元件的实例。
9.2 按钮的四个状态
• 若在“新建元件”对话框中选择“按钮”项则进入按钮编 辑工作区，工作区上方出现图标，并且时间轴由“弹起” 、“指针经过”、“按下”、“点击”四部分组成 。
9.3 四个状态帧的用途
时间轴中四个状态帧的用途如下：
• 弹起：表示鼠标指针未移到按钮上时的状态，即是按 钮的正常状态。该帧是空关键帧，单击该帧可以创建 按钮的状态。
（5）单击标示为“指针经过”的第二帧，然后选择 “时间轴”/“关键帧”。Flash 会插入复制了“一般” 帧内容的关键帧。
动画设计教学大纲
《动画设计》教学大纲一、课程基本信息二、课程性质和任务课程的性质：本课程是计算机应用技术专业的专业方向课，本课程侧重于二维静态动画的设计与制作。
是一门实践性和实用性都很强的课程，同时也是学习计算机网页设计等其它课程的基础。
课程的任务：本课程主要介绍动画设计的基本概念、基础知识，及元件和实例在设计动画时的应用。
主要任务是使计算机应用技术专业的学生能够掌握二维动画计算机的基础和技能，能够通过一学期的学习不断提高自己的自学能力拓展自己的知识视野为将来的生活以及工作服务。
三、学时分配表四、教学内容及基本要求第1章 Flash操作基础 8学时(理论4，上机4) 【教学目的】1.熟悉Flash操作基础2.掌握Flash工作界面的调整方法3.理解网格、标尺和辅助线的使用方法；4.了解创建简单动画的方法和过程【教学重点和难点】重点：1. Flash工作界面；2.网格、标尺和辅助线的使用方法；难点：动画的方法和过程；【主要教学内容】第1章Flash操作基础1.1 熟悉Flash界面1.1.1 Flash界面简介（了解）1.1.2 文档选项卡（掌握）1.1.3 时间轴（了解）1.1.4 工具面板（掌握）1.1.5 舞台（掌握）1.1.6 常用面板（掌握）1.1.7 设计类面板（掌握）1.1.8 开发类面板（了解）1.1.9 其他面板（了解）1.1.10 网格、辅助线与标尺的使用（掌握）1.2 实例——制作雄鹰俯冲而下的动画1.2.1 新建一个动画文档（理解）1.2.2 创建图形元件（了解）1.2.3 创建动画运动的效果（理解）1.3 习题与上机操作第2章 Flash绘图基础8学时(理论4，上机4) 【教学目的】1.理解矢量图的特点2.掌握Flash绘图工具的使用方法3.掌握各种绘图工作的相关属性设置4.掌握合并对象的应用5.理解复杂图形的绘制技巧【教学重点和难点】重点：1. Flash绘图工具的使用方法；2.各种绘图工作的相关属性设置；3.合并对象的应用；难点：1.各种绘图工作的相关属性设置；2.复杂图形的绘制技巧；【主要教学内容】2.1 位图与矢量图2.1.1 位图图像（理解）2.1.2 矢量图像（理解）2.2 基本绘图工具的使用2.2.1 线条的绘制与修改（掌握）2.2.2 任意变形工具（掌握）2.2.3 铅笔工具（掌握）2.2.4 刷子工具（掌握）2.2.5 钢笔工具和矩形工具（掌握）2.2.6 椭圆工具和矩形工具（掌握）2.2.7 实例——绘制心爱的小屋（理解）2.3 其它绘图工具的使用2.3.1 填充变形工具（熟练掌握）2.3.2 套索工具（熟练掌握）2.3.3 橡皮擦工具（掌握）2.3.4 实例——五角红星的制作（理解）2.4 对象的合并2.4.1 合并对象的应用（掌握）2.4.2 实例——利用合并对象制作Logo（理解）2.5 实例——绘制盆景2.5.1 绘制仿古的木质花盆（理解）2.5.2 绘制花（理解）2.5.3 绘制泥土（理解）2.6 习题与上机操作第3章动画制作基础 12学时(理论6，上机6) 【教学目的】1.了解动画的基础知识；2.掌握基于帧的动画制作方法；3.掌握形状补间动画与动作补间动画的制作；4.掌握遮罩动画的制作；5.掌握动画引导路径的制作；【教学重点和难点】重点：1. 基于帧的动画制作方法；2. 形状补间动画与动作补间动画的制作；3. 遮罩动画的制作；4. 动画引导路径的制作；难点：1. 形状补间动画；2. 遮罩动画的制作；3. 引导路径的制作；【主要教学内容】3.1 Flash动画基础3.1.1 与Flash文档相关的文件类型（了解）3.1.2 时间轴（理解）3.1.3 场景（理解）3.1.4 动画元素（理解）3.1.5 元件与实例（了解）3.2 逐帧动画3.2.1 创建逐帧动画的方法（理解）3.2.2 绘图纸（理解）3.2.3 实例——飞翔的老鹰（理解）3.2.4 实例——制作会旋转的动画（理解）3.3 形状补间动画3.3.1 形状补间动画基础（了解）3.3.2 形状补间动画的【属性】面板（理解）3.3.3 使用形状提示（理解）3.3.4 实例——添加形状提示（理解）3.3.5 实例——珍惜水源（理解）3.4 动作补间动画3.4.1 动作补间动画的概念（理解）3.4.2 动作补间动画的属性设置（掌握）3.4.3 实例——网站横幅广告的制作（理解）3.5 遮罩动画3.5.1 遮罩动画的概念（理解）3.5.2 创建遮罩的方法（掌握）3.5.3 应用遮罩时的技巧（理解）3.5.4 实例——辉光文字（理解）3.5.4 实例——制作星光闪闪的动画（理解）3.6 引导路径动画3.6.1 创建引导路径动画的方法（掌握）3.6.2 应用引导路径动画的技巧（理解）3.6.3 实例——制作光芒四射的文字（理解）3.6.4 实例——神奇的海底世界（理解）3.7 习题与上机操作第4章元件和实例8学时(理论4，上机4) 【教学目的】1.了解元件、实例的概念；2.掌握元件的制作方法；3.熟悉Flash元件库；4.掌握交互式动画的创建方法；5.掌握按钮的应用；【教学重点和难点】重点：1. 元件的制作方法；2. 交互式动画的创建方法；难点：1. 按钮的应用；【主要教学内容】4.1 元件和实例概述4.1.1 元件（理解）4.1.2 实例（了解）4.1.3 几种特殊的元件和实例（熟练掌握）4.1.4 元件的类型和创建元件的方法（掌握）4.2 元件库的管理和使用4.2.1 概述元件库（了解）4.2.2 元件的一些最基本管理方法（掌握）4.2.3 灵活使用元件库（理解）4.2.4 共享元件库的使用（理解）4.3 深入学习元件和实例4.3.1 两种不同的编辑界面（了解）4.3.2 元件和实例的内在关系（理解）4.3.3 元件和实例的属性详解（理解）4.3.4 什么是分离与组合（了解）4.3.5 元件类型的转换与实例对象的交换（理解）4.4 按钮的应用4.4.1 新建按钮元件（掌握）4.4.2 创建按钮（掌握）4.5 精彩实例4.5.1 制作三维空间效果（理解）4.5.2 隐藏按钮元件——制作交互界面4.5.2 鼠标看画（理解）4.6 习题与上机操作第5章在Flash中添加声音和视频4学时(理论2，上机2) 【教学目的】1.理解在Flash动画中如何导入声音；2.掌握声音的编辑与压缩方法；3.掌握视频的导入方法；4.理解对视频的控制使用；【教学重点和难点】重点：1. 声音的编辑与压缩方法；2. 视频的导入方法；难点：1. 视频的控制使用；【主要教学内容】5.1 声音的处理与应用5.1.1 实例——会发声的按钮5.1.2 设置和编辑声音的属性（掌握）5.1.3 声音的压缩（了解）5.1.2 声音回放的控制方法（理解）5.2 导入和控制视频5.2.1 Flash所支持的视频类型（了解）5.2.2 导入视频（掌握）5.2.3 利用行为控制视频（理解）5.2.4 任务3：学生成绩分析图表（理解）5.3 习题与上机操作第6章动作脚本入门4学时(理论2，上机2)【教学目的】1. 了解动作脚本的功能；2. 熟悉动作脚本的多种输入方法；3. 掌握动作脚本的基本语法；4. 熟悉动作脚本的常用命令和编写方法；【教学重点和难点】重点：1. 动作脚本的多种输入方法；2. 动作脚本的基本语法；难点：1. 动作脚本的基本语法；2. 作脚本的常用命令和编写方法；【主要教学内容】6.1 使用动作面板6.1.1 动作面板介绍（了解）6.1.2 管理影片中的动作脚本（掌握）6.2 ActionScript编程基础6.2.1 ActionScript程序中的变量（理解）6.2.2 ActionScript程序中的常量（理解）6.2.3 关于函数（了解）6.2.4 语法规范（理解）6.3 事件和事件处理函数6.3.1 事件的分类和方法（理解）6.3.2 事件处理函数on( ) （理解）6.3.3 事件处理函数方法（了解）6.3.4 事件侦听器（了解）6.3.5 按钮事件和影片剪辑事件（理解）6.4 基本命令和程序结构控制6.4.1 时间轴控制命令（掌握）6.4.2 浏览器和网络控制命令（理解）6.4.3 程序流程结构控制（理解）6.4.4 Flash中的常用对象（了解）6.5 习题与上机操作第7章深入学习动作脚本 4学时(理论2，上机2)第7章深入学习动作脚本 1827.1 影片剪辑控制 1827.1.1 影片剪辑属性控制 1827.1.2 复制电影剪辑命令 1887.1.3 影片剪辑的路径 1897.1.4 startDrag()和stopDrag() 1917.2 用键盘控制动画 1927.2.1 详解键盘对象的方法 192 7.2.2 键盘控制实例1 1947.2.3 键盘控制实例2 1967.3 声音控制和智能动画片段 198 7.3.1 滑杆控制声音音量 1987.3.2 智能动画片段 2037.4 精彩实例 2077.4.1 星星跟我走 2077.4.2 色彩变幻 2117.5 习题与上机操作 216第8章文本字段与组件 2188.1 动态文本和输入文本 2188.1.1 动态文本 2198.1.2 输入文本 2238.2 组件 2238.2.1 添加和设置组件的方法 224 8.2.2 用动作脚本控制组件 225 8.2.3 UI组件详解 2278.3 习题与上机操作 241第9章时间轴特效和行为 243 9.1 时间轴特效 2439.1.1 认识时间轴特效 2449.1.2 实例——制作爆炸效果 245 9.1.3 时间轴特效设置 2479.1.4 时间轴特效的扩展 2489.2 滤镜的应用 2489.2.1 滤镜的添加和删除 2499.2.2 滤镜的种类和参数 2519.2.3 实例——快乐青草地 253 9.3 行为和行为面板 2559.3.1 行为面板介绍 2569.3.2 使用行为控制影片剪辑 2569.3.3 使用行为控制视频播放 2579.3.4 使用行为控制声音播放 2589.3.5 实例——随意拖动加载的图像 2589.4 习题与上机操作 263第10章模板的应用及动画发布 26510.1 使用模板 26510.1.1 模板类型 26510.1.2 创建模板 26610.1.3 保存模板 26610.1.4 模板应用实例 26710.2 发布动画 26910.2.1 动画发布前的测试 26910.2.2 动画发布 27010.2.3 Flash参数说明 27010.2.4 HTML参数说明 27210.2.5Flash版本检测 27510.3 习题与上机操作 275第11章综合实训——动感十足的MTV制作 277 11.1 准备动画素材 27711.1.1 Flash MTV实例中的一组动感画面 277 11.1.2 音乐素材的准备和前期处理 27811.2 歌词与音乐的同步 28111.2.1 音乐的导入和编辑 28111.2.2 流类型的音乐设置 28311.2.3 歌词与音乐同步的方法 28411.2.4 制作动感画面 28711.3 动画预载的制作方法 28811.3.1 制作动画预载画面 28811.3.2 制作MTV动画预载画面 29211.4 习题与上机操作 295【教学目的】1.掌握在Excel中嵌入Word表格2.掌握在Word中插入Excel表格；3.掌握在PowerPoint中插入Excel图表；【教学重点和难点】重点：掌握在PowerPoint中插入Excel图表；难点：运用实例掌握Office组件的综合应用；【主要教学内容】7.1 Word、Excel和PowerPoint的相互调用7.1.1 在Excel中嵌入Word表格（了解）7.1.2 在Word中嵌入Excel表格（了解）7.1.3 在PowerPoint中插入Excel图表（了解）7.1.4 在Word和PowerPoint之间的转换（了解）7.2 综合实例1：毕业论文7.2.1 案例分析（了解）7.2.2 操作步骤（了解）7.2.3 操作技巧（了解）7.3 综合实例2：暑期社会实践报告的演示文稿7.3.1 案例分析（了解）7.3.2 操作步骤（了解）7.3.3 操作技巧（了解）7.4 本章小结7.5 课后习题第8章常用工具软件 4学时(理论2，上机2) 【教学目的】1.了解系统工具软件的使用方法；2.了解网络工具软件的使用方法；3.了解多媒体工具软件和其他工具软件；4.了超级兔子的安装和使用；5.了Windows优化大师的安装和使用；6.掌握WinRAR的安装和使用；【教学重点和难点】重点：虚拟光驱Daemon的安装和使用；难点：1.利用Ghost安装系统；2.利用Ghost还原系统；【主要教学内容】8.1 系统工具软件8.1.1 超级兔子（了解）8.1.2 Windows优化大师（了解）8.1.3 克隆硬盘Ghost（熟练掌握）8.2 其他工具软件8.2.1 文件压缩软件WinRAR（掌握）8.2.2 光盘刻录Ahead nero（掌握）8.2.3 虚拟光驱Daemon（理解）8.3 课后习题五、本大纲尚需说明的问题1、本课程理论和实习比例为1:1；2、利用现代化教学手段；课程全部内容均在多媒体教室中完成，将传统的黑板教学与多媒体教学相结合。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
9.3 行为的基本概念和操作
9.3.1 行为面板
在Dreamweaver8中，进行附加行为和编辑行 为的操作都将使用到“行为”面板，选择菜单栏 中的“窗口”|“行为”命令打开该面板，如图9.5 所示。 在“行为”面板上由6个按钮，分别是： ：显示已经设置的事件。 ：显示所有可以设置的事件。 ：显示可以发生的动作菜单,从中选择一个动作将 打开该动作相应的参数设置对话框，如图9.6所示。 ：从行为列表中删除选中的动作及其相关的事件。 和 ：可以改变行为列表中动作发生的顺序。
第九章 时间轴动画及行为
1
2 3 4 5
9.1 时间轴面板的打开
9.2 创建并修改时间轴动画
9.3 行为的基本概念和操作
9.4 使用Dreamweaver内置行为 制作特效 9.5 课堂实例
Company Logo
9.1 时间轴面板
时间轴是根据时间的流逝移动图层位置的方式 显示动画效果的一种动画编辑界面，可以通过 在时间轴面板中更改层的位置、大小、可见性 和层叠顺序来控制网页内容在一定时间内播放 的帧数、图层及其属性从而实现各种网页动画 特效。
9.2 创建并修改时间轴动画
【例9.3】通过添加关键帧更改时间轴动画轨迹。 打开【例9.1】中创建的文档“example9_1.html”，将其另存为 “example9_3.html”。 在动画条中选择要添加关键帧的位置，按右键，在快捷菜单中选择 “添加关键帧”，动画条上多了一个关键帧。 选中此关键帧，文档窗口中出现层layer1在此关键帧时的位置，拖 动层可以改变动画轨迹。 重复步骤(3)，直至动画轨迹达到预期效果为止。 在时间轴面板上选择“自动播放”复选框，保存文档，按F12可以预 览页面上的动画效果。 当一个网页中包含多个动画时，可以创建多个动画通道来管理这些动 画，时间轴面板如图9.4所示，多时间轴动画的管理方法同上。
图9.2 移动层到动画结束位置
9.2 创建并修改时间轴动画
【例9.2】创建沿拖动轨迹移动层的时间轴动画 在文档example9_2.html中插入一个层 Layer1,并在层上插入图像“book.jpg”。 将层移动到动画开始的位置。 选择菜单命令“窗口”|“时间轴”，打开时间轴面 板。 选择层layer1，层的周围将出现调整柄。 选择菜单命令“修改”|“时间轴”|“录制层路 径” 。 在页面上拖动层以创建轨迹，到达动画应停止的点 时释放该层，系统会自动记录下拖动层时的运动轨 迹。如图9.3所示。 层的名称和动画条自动出现在动画通道中。 选择“自动播放”复选框，保存文档，按F12可以 预览页面上的动画。 可以修改“Fps”值调整动画播放的速度，数值越 大，动画播放速度越快，但目前大多数浏览器都不 能支持15Fps以上的动画速度。
9.3 行为的基本概念和操作
9.3.3 行为的添加和编辑
为对象添加行为动作时，可以一次为每个事件关联多个动作，动作的 执行按照在“行为”面板列表中的顺序执行。 【例9.4】为页面example9_4.html中的对象添加“播放声音”行为 并 进行编辑。 选择要添加行为的对象，如果是整个页面，则在文档窗口的左下角单 击<body>标签；如果选择一个段落，则单击<p>，如图9.8所示。 所选择对象相应的HTML标签出现在“行为”面板的标题栏中，单击 按钮，在弹出的菜单中选择动作“播放声音”命令，此时将打开该动 作的对话框，如图9.9所示，在对话框中通过“浏览”按钮选择音频 文件。 单击“确定”按钮后，在事件列表中出现触发该动作的默认事件，可 以选择其它事件来改变当前默认的事件。 这时选定的行为就被添加到网页中了， 按F12键可以对当前添加的效果进行 图9.9 播放声音 预览。
9.3 行为的基本概念和操作
9.3.2 显示和设置事件
onMouseMove(IE3，IE4，IE5)：当鼠标在指定元素上移动时，在该页 面元素上就会触发该事件。 onMouseOut(NS3，NS4，IE4，IE5)：当将鼠标在指定元素上移开时， 在该页面元素上就会触发该事件。 onMouseOver(NS3，NS4，IE3，IE4，IE5)：当鼠标第一次移动到 指定元素时触发该事件。该事件通常用于链接。 onMouseUp(NS4，IE4，IE5)：当按下的鼠标按键被释放时触发该事件。 onMove(NS4，IE5)：当窗体或框架移动时触发该事件。 onReadStateChange(IE4，IE5)：当指定元素的状态改变时触发该事 件。 onReset(NS3，NS4，IE3，IE4，IE5)：当表单内容被重新设置为默 认值时触发该事件。 onResize(NS4，IE4，IE5)：当访问者调整浏览器或框架大小时触发该 事件。 onRowEnter(NS4，IE4，IE5)：在当前捆绑数据源的当前记录指针改 变时触发该事件。 onRowExit(NS4，IE4，IE5)： 在当前捆绑数据源的当前记录指针改变 后触发该事件。
图9.4管理多个时间轴动画
9.3 行为的基本概念和操作
有很多优秀的网页，它们不只包含文本和图像，还有许多其他交互式 的效果，例如当鼠标移动到某个图像或按钮上，特定位置便会出现相 关信息，又或者一个网页打开的同时，响起了优美的背景音乐等。这 使用的就是本章中将要介绍的内容，Dreamweaver 8的另一大功 能——行为，使用它，网页中将会实现许多精彩的交互效果。 行为是为响应某一具体事件而采取的一个或多个动作。当指定的事件 被触发时，将运行相应的JavaScript程序，执行相应的动作。所以 在创建行为时，必须先指定一个动作，然后再指定触发动作的事件。 行为是针对网页中的所有对象，要结合一个对象添加行为。例如，当 某个浏览者将鼠标移动到某一图像或文字上,浏览器就可能生成一个 onMouseOver(鼠标滑过)事件，如果用户事先设定了某个动作,此 事件将调用相关的JavaScript功能，JavaScript功能则激发相应 的动作发生,如弹出一个提示框或在状态栏中显示相关信息。 Dreamweaver 8提供了20多个行为动作,如果读者需要更多的行 为，可以到MacromediaExchange官方网页 (/cn/exchange)以及第三 方开发人员站点上进行搜索并且下载。
ห้องสมุดไป่ตู้
onChange(NS3，NS4，IE3，IE4，IE5)：当网页上的元素内 容发生改变时触发该事件。例如，当用户在菜单中选择了一个项目， 或者修改了文本区中的数值，然后在页面任意位置单击均可触发该事 件。
9.3 行为的基本概念和操作
9.3.2 显示和设置事件
onClick(NS3，NS4，IE3，IE4，IE5)：当访问者单击指定的元素(如 超链接、图片、图片影像、按钮)时触发该事件。 onDbClick(NS4，IE4，IE5)：当访问者双击指定元素时触发该事件。 onError(NS3，NS4，IE3，IE4，IE5)：当浏览器在网页或图像载入产 生错误时触发该事件。 onFinish(IE4，IE5)：当选取框中的内容完成一次循环时触发该事件。 onFocus(NS3，NS4，IE3，IE4，IE5)：当指定元素被访问者交互时 触发该事件。 onHelp(IE4，IE5)：单击浏览器上的Help按钮或者选择菜单中的Help 命令时触发该事件。 onKeyDown(NS4，IE4，IE5)：当按下任意键的同时触发该事件。 onKeyPress(IE4，IE4，IE5)：当按下和松开任意键时触发该事件。相 当于onKeyDown与onKeyUp事件的联合。 onKeyUp(NS4，IE4，IE5)：当按下的键松开时触发该事件。 onLoad(NS3，NS4，IE3，IE4，IE5)：当一幅图像或网页载入完成时 触发该事件。 onMouseDown(NS4，IE4，IE5)：在尚未释放之前按下鼠标左键时触 发该事件。
图9.5“行为”面板
9.3 行为的基本概念和操作
9.3.2 显示和设置事件
如图9.7所示，菜单中列出了所选行为所有可以使用的的触发事件， 用户可以根据实际需要进行设置。下面将介绍Dreamweaver中的 一些主要事件，其中IE代表Internet Explorer浏览器， NS代表 Netscape浏览器，后面的数值为版本号。
图9.3 移动层轨迹到动画结束位置
9.2 创建并修改时间轴动画
在定义了时间轴的基本参数后，仍然可以使用时间轴添加帧、删除帧、 增加关键帧，增加、删除、改变对象，改变动画开始时间等。具体如下： 添加或删除关键帧 移动某一关键帧的层的位置 移动某一关键帧的播放时间 更改动画开始时间 延长动画的播放时间 动画的自动播放和循环播放 重命名时间轴 移动整个动画轨迹的位置
9.3 行为的基本概念和操作
9.3.2 显示和设置事件
onScroll(IE4，IE5)：当访问者使用滚动条向上或向下滚动文档内容时触 发该事件。 onSelect(NS3，NS4，IE3，IE4，IE5)：当访问者选择文本框中的文 本时触发该事件。 onStart(IE4，IE5)：当编辑框中的内容开始循环时触发该事件。 onSubmit(NS3，NS4，IE3，IE4，IE5)：当访问者提交表格时触发该 事件。 onUnload(NS3，NS4，IE3，IE4，IE5)：当访问者离开页面或者从当 前页面退出时触发该事件。
Company Logo
9.1 时间轴面板
9.1.1 时间轴面板的打开
在Dreamweaver 8.0主界面的默认显示中是不显示时间轴面板的， 如果想使用它，选择一个图片或者一个层之后，选择“窗口”|“时间轴” 命令，即可打开时间轴面板，如图9.1所示。
图9.1 时间轴面板
9.1 时间轴面板
9.1.2时间轴面板功能 时间轴上所集成的功能非常多，下面介绍时间轴各部分的名 称及作用。