chapter03 网页设计与Web编程教案

球”从库中拖到舞台上。 从库中拖到舞台上。
步骤5：创建动画。 步骤 ：创建动画。
3.3.3 动作补间动画方法与实例
帧按F6键插入关键帧 （1）在第 帧按 键插入关键帧，按向下的方向键将 ）在第20帧按 键插入关键帧， 图形放到场偏下的位置，模拟弹球着地的样子。 图形放到场偏下的位置，模拟弹球着地的样子。为了模 拟弹球着地时被压缩的样子， 拟弹球着地时被压缩的样子，应该在随后的几帧里将图 形压缩再恢复。在第25帧处按 键插入关键帧， 帧处按F6键插入关键帧 形压缩再恢复。在第 帧处按 键插入关键帧，将图形 进行压缩，即上下端点距离缩短，左右距离拉长， 进行压缩，即上下端点距离缩短，左右距离拉长，但图 形的着地点不应该变化， 形的着地点不应该变化，所以压缩前必须记住最下端的 位置。压缩完后，将图形下移到刚才记下的位置上。 位置。压缩完后，将图形下移到刚才记下的位置上。 时间轴” （2）单击第 帧，选择菜单命令“编辑”|“时间轴”|“ ）单击第20帧 选择菜单命令“编辑” 时间轴 复制帧” 复制这一帧，再单击第30帧 复制帧”，复制这一帧，再单击第 帧，选择菜单命令 编辑” 时间轴 时间轴” 粘贴帧 粘贴帧” 把第20帧的内容粘贴 “编辑”|“时间轴”|“粘贴帧”，把第 帧的内容粘贴 过来。在这一帧上，弹球将恢复原形，准备跳起。 过来。在这一帧上，弹球将恢复原形，准备跳起。 （3）按照第（2）步的方法，将第 帧的内容复制到第 ）按照第（ ）步的方法，将第1帧的内容复制到第 50帧。这一弹球将完成一个循环。 帧 这一弹球将完成一个循环。
“组件”面板：动作集合 组件”面板：
3.2 基本绘图工具（工具箱） 基本绘图工具（工具箱）
选择工具 部分选取工具 直线工具 套索工具 钢笔工具 矩形工具 铅笔工具 刷子工具 任意变形工具 渐变变形工具 墨水瓶工具与 颜料桶工具 滴管工具 橡皮擦工具 文本工具
3.3 基本动画制作
基本动画 类型 逐帧动画 特点 对每帧画进行控制保存每一帧的数据
3.3.3 动作补间动画方法与实例
帧至第25帧之间右击 （5）在第 帧至第 帧之间右击，在弹出的快捷菜单 ）在第20帧至第 帧之间右击， 中选择“创建补间动画”命令。在第25帧至第 帧至第30帧之间 中选择“创建补间动画”命令。在第 帧至第 帧之间 右击，在弹出的快捷菜单中选择“创建补间动画” 右击，在弹出的快捷菜单中选择“创建补间动画”命令 在第30帧的属性中将 补间”设置为“动画” 帧的属性中将“ 。在第 帧的属性中将“补间”设置为“动画”，将“ 缓动”值改为60。创建后的时间轴如下图： 缓动”值改为 。创建后的时间轴如下图：
3.3.2 形状补间动画实例
例：变形文字 步骤1：新建一个文档。在“属性”面板中设置影片的 步骤 ：
大小为500×400像素，背景色为白色。 步骤2： 步骤 ：选中“工具栏”中的“文本工具”，在舞台上 单击并输入大写字母“A”，选中字母“A”，在文本“ 属性”面板中设置字体为“黑体”、字号“96”、“粗 体”、颜色为“红色”（#FF0000）。 步骤3： 步骤 ：在第10、20、30帧处分别按F6键建立关键帧， 用“文本工具”将第10帧的文字改为“B”、颜色改为“ 绿色”（#00FF00），将第20帧的文字改为“C”、颜色 改为“蓝色”（#0000FF），将第30帧的文字改为“D” 、颜色改为“黄色”（#FFFF00）。
3.3.3 动作补间动画方法与实例
动作补间动画的属性面板
“旋转”选项: 旋转”选项 无:禁止元件旋转 禁止元件旋转 自动:使元件在需要最小动作的方向上旋转对象一 自动 使元件在需要最小动作的方向上旋转对象一 次 顺时针或逆时针+N:使元件在运动时顺时针或逆 顺时针或逆时针 使元件在运动时顺时针或逆 时针旋转相应的圈数
步骤2：绘制图形。 步骤 ：绘制图形。
选择菜单命令“文件” 导入 导入” 导入到库 导入到库” 选择弹球图片后， 选择菜单命令“文件”|“导入”|“导入到库”，选择弹球图片后， 将弹球导入到库。 将弹球导入到库。 注意 在绘制时，最好是选择菜单命令“视图” 网格 网格” 显示网格 在绘制时，最好是选择菜单命令“视图”|“网格”|“显示网格 在舞台上显示网格。 ”，在舞台上显示网格。
3.3.1 逐帧动画方法与实例
步骤5： 步骤 ：调整对象位置。单击“时间轴”面板下方的“编辑多个
帧”按钮，再单击“修改绘图纸标记”按钮，在弹出的菜单中选择 “绘制全部”命令。最后执行“编辑”菜单下的“全选”命令，此 时时间轴和场景效果。此时时间轴和场景效果如下图所示。
步骤6： 步骤 ：测试存盘 。
3.3.3 动作补间动画方法与实例
两种方式： 帧 先创建好两个帧的状态， 之间建立动作补间关系。 之间建立动作补间关系。 2) 先创建好起点关键帧，然后给此帧赋予动作 先创建好起点关键帧， 补间模式，再去创建终点关键帧， 补间模式，再去创建终点关键帧，两帧之间就 建立了动作补间关系。 建立了动作补间关系。
件大小为460×290像素，“背景色”为白色。 如下图所 示。
3.3.1 逐帧动画方法与实例
步骤2： 步骤 ：创建背景图层。将当前图层重命
名为“背景”，选择第一帧，选择菜单命 令“文件|导入|导入到舞台…”，将背景图 片导入舞台中，在第8帧处按F5键插入普 通帧，使帧内容延续到第8帧。
步骤3：导入素材到库。选择菜单命令“ 步骤 ：
文件|导入|导入到库…”，在弹出的对话框 中找到素材所在的文件夹，按Ctrl+A，把 素材全部选中，再点击右下角的“打开” 按钮，这样所有的素材都导入到库中。如 左图所示。
3.3.1 逐帧动画方法与实例
步骤4： 步骤 ：将马的图片添加到舞台上。插入一个新的图层并选中第
1帧，单击库里名为“马1”的图形元件，按住鼠标左键拖动到舞台 上，然后释放鼠标，这样“马1”图形就拖到舞台上了。选中第2帧 ，按F7键插入7个空白关键帧，依次在各个空白关键帧上，分别从 库里拖出“马2”、“马3”、“马4”、“马5”、“马6”、“马7”、“ 马8”到舞台上，时间轴上所有空白关键帧都变成关键帧了。下图为 8” 导入的图片序列。
第三章 Flash CS3入门及制作实例 入门及制作实例
内容提要
3.1 3.2 3.3 3.4 Flash CS3的工作环境简介 的工作环境简介 基本绘图工具 基本动画制作 动画制作实例
3.1 Flash CS3的工作环境简介 的工作环境简介
菜单栏 时间轴 浮动面板
工具箱 舞台
属性面板
时间轴
时间轴： 时间轴：用于组织和控制文档内容在一定时间内播放的图层
3.3.1 逐帧动画方法与实例
创建逐帧动画的几种方法： 创建逐帧动画的几种方法： 1．用导入的静态图片建立逐帧动画 ． 用jpg、png等格式的静态图片连续导入到Flash中，就会建立一段逐 帧动画。 。 2．绘制矢量逐帧动画 ． 用鼠标或压感笔在场景中一帧帧的画出帧内容。 3．文字逐帧动画 ． 用文字作帧中的元件，实现文字跳跃、旋转等特效。 4．指令逐帧动画 ． 在时间帧面板上，逐帧写入动作脚本语句来完成元件的变化。 5．导入序列图像 ． 可以导入gif序列图像、swf动画文件或者利用第3方软件（如swish 、swift 3D等）产生的动画序列。
3.3.2 形状补间动画实例
步骤4： 步骤 ：分别选择各关键帧的文字，选择菜单命令“
修改|分离”，将各关键帧上的文字打散。
步骤5： 步骤 ：创建形状补间动画。分别选择第1、10、20帧
，将其“属性”面板中的“补间”设为“形状”。设置 后时间轴如图所示。
步骤6： 步骤 ：
Ctrl+Enter快捷键 预览动画
数和帧数
舞台
工作区（ 工作区（舞台的后台 ）
常用面板
“属性”面板：舞台的下方 属性”面板： 对齐” 窗口” 对齐 对齐” “对齐”面板：“窗口”|“对齐” 颜色” 窗口” 颜色 颜色” “颜色”面板：“窗口”|“颜色” 样本”面板： “样本”面板：颜色库面板 信息”面板： “信息”面板：在编辑操作的过程中为用户提供一些相关的信
息。
“场景”面板：显示了当前动画的场景数量和播放的先后顺序 场景”面板： 变形”面板：对选定对象执行缩放、旋转、 “变形”面板：对选定对象执行缩放、旋转、倾斜和创建副本
的操作 的脚本编程语言ActionScript而 “动作”面板：方便使用 动作”面板：方便使用Flash的脚本编程语言 的脚本编程语言 而 专门提供的操作界面
步骤5：测试动画。 快捷键测试动画。 步骤 ：测试动画。按Ctrl+Enter快捷键测试动画。 快捷键测试动画
3.3.4 遮罩动画方法与实例
1.遮罩和遮罩的创建 遮罩和遮罩的创建 1）遮罩及其作用 ） 遮罩动画是Flash中的一个很重要的动画类型，很多效 中的一个很重要的动画类型， 遮罩动画是 中的一个很重要的动画类型 果丰富的动画都是通过遮罩动画来完成的。 果丰富的动画都是通过遮罩动画来完成的。在Flash的 的 图层中有一个遮罩图层类型，为了得到特殊的显示效果 图层中有一个遮罩图层类型， 可以在遮罩层上创建一个任意形状的“视窗” ，可以在遮罩层上创建一个任意形状的“视窗”，遮罩 层下方的对象可以通过该“视窗”显示出来，而“视窗 层下方的对象可以通过该“视窗”显示出来， 之外的对象将不会显示。 ”之外的对象将不会显示。 动画中， 遮罩”主要有2种用途 种用途， 在Flash动画中，“遮罩”主要有 种用途，一个作用是 动画中 用在整个场景或一个特定区域， 用在整个场景或一个特定区域，使场景外的对象或特定 区域外的对象不可见， 区域外的对象不可见，另一个作用是用来遮罩住某一元 件的一部分，从而实现一些特殊的效果。 件的一部分，从而实现一些特殊的效果。
3.3.3 动作补间动画方法与实例
（4）现在为每一帧的运动加上渐变。由于重力作用， ）现在为每一帧的运动加上渐变。由于重力作用， 图形下落的时候加速，上升的时候减速，所以在第1帧 图形下落的时候加速，上升的时候减速，所以在第 帧 的属性中将“补间”设置为“动画” 缓动” 的属性中将“补间”设置为“动画”，将“缓动”值改 为-60。如下图： 。如下图：