MATLAB教程 第14章简单动画制作.ppt

返回总目录 第14章简单动画制作 了解动画掌握制作逐帧动画的方法掌握制作补间动画的方法掌握制作交互动画的方法 教学目的 动画简述 逐帧动画 补间动画 本章内容 交互动画 动画的类型关于帧 动画简述 14 1动画简述 动画的类型 逐帧动画 制作好每一帧画面 然后生成动画效果 传统的动画都是这样做出来的 补间动画 制作好若干关键帧的画面 由Flash通过计算生成中间各帧 使得画面从一个关键帧过渡到另一个关键帧 过渡动画又分为运动过渡动画和变形过渡动画 关于帧 1 选择 修改 文档 命令 打开 文档属性 对话框 2 在 文档属性 对话框中 设置动画大小为450px 350px 单击 确定 按钮 关闭 文档属性 对话框 这时在时间轴面板中会自动创建一个空白关键帧 关于帧 3 选择 插入 时间轴 图层 命令 新建一个 图层2 这个 图层2 位于当前状态 4 单击工具栏中的矩形工具 在场景中绘制一个矩形 这时就创建了一个关键帧 时间轴上的白色小圆点也将变为黑色 关于帧 5 选中绘制的矩形 然后选择 修改 组合 命令 组合图形 6 在第20帧上右击 从弹出的快捷菜单中选择 插入关键帧 命令 这时将在该帧插入一个关键帧 关于帧 7 单击第20帧 然后将选中的矩形随意移动一个位置 8 在第1帧上右击 从弹出的快捷菜单中选择 复制帧 命令 复制选中的帧 9 在第40帧上右击 从弹出的快捷菜单中选择 插入空白关键帧 命令 创建一个空白帧 10 再次在第40帧上右击 从弹出的快捷菜单中选择 粘贴帧 命令 将复制在Windows剪贴板中的帧粘贴到该帧 这时将又形成一个关键帧 关于帧 11 在 图层2 时间轴的第1帧上右击 从弹出的快捷菜单中选择 创建补间动画 命令 再在第20帧上右击 从弹出的快捷菜单中选择 创建补间动画 命令 这样即可创建从第1帧到第20帧的动画 12 用同样的方法制作第20帧到第40帧之间的动画 关于帧 13 在 图层1 上单击第l帧 然后选择 文件 导入 导入到舞台 命令 弹出 导入 对话框 选择一幅图像 将其导入舞台作为动画的背景 这时的时间轴面板如图所示 关于帧 14 在 图层1 的第40帧上右击 从弹出的快捷菜单中选择 插入帧 命令 这时将把第1个关键帧扩展到2 40帧 此时的时间轴面板如图所示 创建逐帧动画创建逐帧动画实例 逐帧动画 14 2逐帧动画 创建逐帧动画 1 在时间轴面板中选择合适的层或创建一个新层 2 选择第1个关键帧 如果选择的帧不是关键帧 可以选择 插入 时间轴 关键帧 命令 使它成为关键帧 3 使用工具栏中的各种工具或导入文件 在舞台中制作动画第1帧的动画内容 4 在时间轴面板单击相同层的当前帧右边一帧的单元格 然后选择 插入 时间轴 空白关键帧 命令 插入一个空白关键帧 5 在场景中绘制图形 作为第2个关键帧 6 重复上面两个步骤 一帧一帧地增加新的关键帧 直到完成全部动画所需的帧 7 选择 控制 播放 命令或 控制 测试影片 命令 播放动画 创建逐帧动画实例 1 新建一个Flash文件 设置文档属性为400px 300px 2 单击工具栏中的文本工具 并在属性面板中设置文字的大小为96 单击 切换粗体 按钮和 居中 按钮 3 在舞台中输入数字5 如图所示 创建逐帧动画实例 4 单击第2帧 然后选择 插入 时间轴 关键帧 命令 插入一个关键帧 在舞台中输入4 5 重复上一步 创建数字3 2 1和文字GO 6 选择 控制 测试影片 命令 测试制作的电影 如图所示为电影中的一帧 7 选择 文件 保存 命令 保存文件 或选择 文件 导出影片 命令 导出影片 运动补间动画形状补间动画 补间动画 14 3补间动画 运动补间动画 1 选择一个空白帧 在场景中绘制一个图形对象 或创建一个元件实例 2 选择 插入 创建补间动画 命令 将绘制的图形对象转换成图形元件 Flash自动将其命名为 补间1 3 在时间轴的另一帧 动画停止帧 右击 从弹出的快捷菜单中选择 插入帧 命令 增加多个帧 这时时间轴面板中帧区域为虚线 如图所示 创建运动补间动画 运动补间动画 4 单击动画的最后一帧 并把场景中的对象移动到动画的目标位置 这时动画的最后一帧将自动成为关键帧 在时间轴的帧区域将显示为箭头 如图所示 创建运动补间动画 运动补间动画 5 要设置动画运动过程的渐变属性 可以在运动补间动画的箭头跨越的任意帧上单击 然后选择 窗口 属性 命令 打开关键帧的属性面板 如图所示 创建运动补间动画 运动补间动画 1 创建一个运动过渡动画 2 选择 插入 时间轴 运动引导层 命令 创建一个运动引导层 3 使用铅笔 椭圆 矩形或笔刷工具画出一条路径 4 在起始帧 把对象移到路径起始点 在结束帧 把对象移到路径结束点 5 如果要在运动时保持对象与路径的相对方向不变 可以单击时间轴面板中运动过渡动画箭头跨越的蓝色背景的任意帧 然后在属性面板中选中 调整到路径 复选框 创建按指定路径运动的动画 形状补间动画 6 在 混合 下拉列表框中可以进行如下设置 分布式 在此种方式下 可以使动画过程中新创建的中间过渡帧的图形比较平滑 角形 在此种方式下 创建的过渡帧中的图形更多地保留了原来图形的尖角或直线的特征 如果关键帧中图形没有尖角 则这两种方式无区别 7 调节 缓动 滑动杆 设置变形的加速度 如果把 缓动 中的滑块向下移 为负 在变形的过程中 开始变化比较缓慢 而后变化速度会加快 如果将其上移 为正 开始变化比较快 而后变化速度会减慢 滑块越接近两端 这种效果越明显 如果滑块处于中间位置 变形过程将以匀速进行 创建形状补间动画 形状补间动画 1 在时间轴面板单击层名称 使其成为当前层 然后选择一个空白的关键帧作为动画的开始帧 2 单击工具栏中的绘图或文本工具 任意创建一个图形 作为形状补间的第1帧图形 3 在开始帧后面的若干帧处插入一个空白关键帧 把它作为变形的第2个关键帧 这一帧一定要与起始帧在同一层上 4 在第2个关键帧中创建变形后的图形 5 在时间轴面板单击第1个关键帧 然后在属性面板的 补间 下拉列表框中选择 形状 选项 如图所示 创建形状补间动画 形状补间动画 8 设置完毕 在时间轴面板中可以看到从起始帧将出现一个箭头 背景变为浅绿色 如图所示 创建形状补间动画 形状补间动画 如果将变形线索按照逆时针方向从图形的左上角位置开始 则变形效果更好 要使用变形线索 其操作步骤如下 1 打开一个变形动画 选择变形动画的第1个关键帧 2 选择 修改 形状 添加形状提示 命令 这时在舞台中将出现一个红颜色的圆圈 圆圈里面有一个字母a 3 将圆圈移到希望标记的位置 4 选择变形动画的最后一个关键帧 可以看到在最后一帧的图形上也有一个红色的圆圈 圆圈中的字母也是a 5 把这个圆圈移到相应的位置 圆圈将变为绿色 这时如果单击第4帧 可以看到标记的小圆圈变为黄色 6 播放动画 可以看到在起始关键帧中标记的点 变形后该点是在结束帧中标记的位置 7 重复以上步骤 根据需要添加其他变形线索关键点 使用变形线索 交互按钮组件的使用ActionScript简介 交互动画 14 4交互动画 交互按钮 1 单击 文件 新建 命令 新建影片文件 2 单击 插入 新建元件 命令 出现 创建新元件 对话框 在 名称 文本框中输入元件名 在 类型 区内选中 按钮 单选按钮 创建文字按钮 交互按钮 3 单击 确定 按钮 进入按钮元件动作编辑窗口 单击时间轴上的 弹起 帧 然后单击工具箱中的 文本 工具 并在 属性 面板中设置字体为ArialBlack 字号为80 颜色为蓝色 然后在舞台上输入文本button 创建文字按钮 交互按钮 4 分别单击 指针经过 帧和 按下 帧 按F6键 复制 弹起 帧中的内容 5 单击 指针经过 帧 利用工具箱中的 箭头 工具选定文本 然后将文本颜色改为黑色 如图所示 创建文字按钮 交互按钮 6 选定改为黑色的文本 按Ctrl C组合键复制该文本 然后单击 按下 帧 再按Ctrl V组合键进行粘贴 如图所示 创建文字按钮 交互按钮 7 选定黑色的文本 然后单击 修改 排列 移到底层 命令 并将该文本移到蓝色文本的下面 调整两者的位置 形成如图所示的阴影效果 创建文字按钮 交互按钮 8 右击 点击 帧 从弹出的快捷菜单中选择 插入空白关键帧 命令 然后利用工具箱中的 矩形 工具 绘制一个按钮感应鼠标指针的范围 如图所示 创建文字按钮 9 单击舞台左上方的 场景1 按钮 切换到场景编辑窗口 单击 窗口 库 命令打开 库 面板 将button按钮元件拖到舞台上 创建一个实例 交互按钮 1 单击 文件 新建 命令 新建影片文件 2 单击 插入 新建元件 命令 弹出 创建新元件 对话框 在 名称 文本框中输入 确定 在 类型 区内选中 按钮 单选按钮 单击 确定 按钮 进入 确定 按钮元件编辑窗口 3 单击工具箱中的 矩形 工具 设置填充颜色为白黑渐变色 然后绘制一个矩形 如图所示 创建图形按钮 交互按钮 4 单击工具箱中的 箭头 工具 选定整个矩形 单击 修改 组合 命令 将其组合为一个整体 5 分别右击 指针经过 帧和 按下 帧 从弹出的快捷菜单中选择 插入关键帧 命令 将 弹起 帧的矩形复制到这两个帧中 6 右击时间轴上的 图层1 图层 从弹出的快捷菜单中选择 插入图层 命令 在 图层1 上新建 图层2 7 单击 图层1 上的 指针经过 帧 按Ctrl C键复制矩形 然后单击 图层2 上的 指针经过 帧 按Ctrl Shift V组合键将圆形粘贴到当前位置 图14 23 缩放和旋转 对话框 8 选定粘贴后的图形 单击 修改 变形 缩放和旋转 命令 出现如图所示的 缩放和旋转 对话框 创建图形按钮 交互按钮 9 在 缩放 文本框中输入75 在 旋转 文本框中输入180 单击 确定 按钮 如图所示 创建图形按钮 交互按钮 10 分别右击 图层2 的 指针经过 帧和 按下 帧 从弹出的快捷菜单中选择 插入关键帧 命令 11 右击时间轴上的 图层2 图层 从弹出的快捷菜单中选择 插入图层 命令 在 图层2 上新建 图层3 12 在 图层3 的 按下 帧中添加文本 确定 如图所示 创建图形按钮 交互按钮 13 单击舞台左上方的 场景1 按钮 返回到场景编辑窗口 从 库 面板中将 立体按钮 拖到舞台上 14 单击 控制 测试影片 命令 即可查看按钮效果 创建图形按钮 交互按钮 1 单击 文件 新建 命令 新建一个影片文件 2 单击 插入 新建元件 命令 创建一个图形元件 命名为 钟摆 然后在舞台上绘制如图所示的钟摆 制作动态按钮 交互按钮 3 单击 插入 新建元件 命令 创建一个影片剪辑元件 命名为 钟摆运动 然后从 库 面板中将 钟摆 拖到舞台上 4 分别右击 图层1 的第4帧 第12帧和第16帧 从弹出的快捷菜单中选择 插入关键帧 命令 5 单击第4帧 选定舞台上的钟摆 然后单击 修改 变形 缩放和旋转 命令 出现如图所示的 缩放和旋转 对话框 在 旋转 文本框中输入45 然后单击 确定 按钮 制作动态按钮 交互按钮 6 单击第12帧 选定舞台上的钟摆 然后单击 修改 变形 缩放和旋转 命令 在出现的 缩放和旋转 对话框中 将 旋转 文本框中的数值改为 45 然后单击 确定 按钮 7 右击 图层1 的任意帧 从弹出的快捷菜单中选择 选择所有帧 命令 再次右击 从弹出的快捷菜单中选择 创建补间动画 命令 此时 按Enter键 会发现钟摆在左右摆动 8 单击 插入 新建元件 命令 创建一个按钮元件 命名为button 然后从 库 面板中将 钟摆 拖到舞台上 如图所示 制作动态按钮 交互按钮 9 右击 指针经过 帧 从弹出的快捷菜单中选择 插入空白关键帧 命令 然后从 库 面板中将 钟摆运动 影片剪辑拖到舞台上 10 单击时间轴下的 绘图纸外观 按钮 然后调整 弹起 与 指针经过 帧中图形的位置 使它们重合在一起 如图所示 制作动态按钮 交互按钮 11 单击舞台左上方的 场景1 按钮 返回到场景编辑窗口 从 库 面板中将button按钮元件拖到舞台上 12 单击 控制 测试影片 命令 打开影片测试窗口 观看按钮动画效果 13 此时可以返回到舞台上 为钟摆绘制一个背景 使其更加逼真 制作动态按钮 组件的使用 用户界面组件 Accordion组件 一组垂直的互相重叠的视图 视图顶部有一些按钮 利用这些按钮可以在视图之间进行切换 Alert组件 一个窗口 用于给用户提出向题并提供按钮来捕获用户的响应 Button组件 一个大小可调整的按钮 可使用自定义图标 CheckBox组件 允许用户进行布尔型选择 真或假 ComboBox组件 允许用户从选择列表中选择一个选项 该组件可以在列表顶部有一个可编辑的文本字段 以允许用户搜索此列表 DateChooser组件 允许用户从日历中选择一个或多个日期 DateField组件 一个不可编辑的文本字段 并带有日历图标 当用户在组件边框内的任何位置单击时 就会显示一个DateChooser组件 DataGrid组件 允许用户显示和操作多列数据 Label组件 一个不可编辑的单行文本字段 List组件 允许用户从滚动列表中选择一个或多个选项 Loader组件 一个包含已载入的SWF或JPEG文件的区块 组件的使用 用户界面组件 Menu组件 允许用户从列表中选择一个命令 它是一个标准的桌面应用程序菜单 MenuBar组件 水平的菜单栏 允许将菜单组合使用 以便处理键盘和鼠标输入 NumericStepper组件 可单击的箭头 单击它们可以增加或减小数字的值 ProgressBar组件 显示一个过程 通常是加载过程 的进度 RadioButton组件 允许用户在相互排斥的选项之间进行选择 ScroolPane组件 使用自动滚动条在有限的区域内显示影片 位图和SWF文件 TextArea组件 一个可随意编辑的多行文本字段 TextInput组件 一个可以随意编辑的单行文本输入字段 Tree组件 允许用户处理分级信息 Window组件 一个可拖动的窗口 带有标题栏 题注 边框和关闭按钮 用于向用户显示内容 UIScrollBar组件 允许将滚动条添加至文本字段 组件的使用 媒体组件 FLVPlayback组件 可以容易地将视频播放器包括在Flash应用程序中 以便通过HTTP从FlashVideoStreamingService FVSS 或从FlashCommunicationServer FCS 播放渐进式视频流 MediaController组件 在应用程序中控制媒体流的播放 MediaDisplay