网页动画设计与制作FlashMX2004 项目8-按钮与交互的设计.ppt

网页动画设计与制作Flash 项目八按钮与交互的设计 项目八按钮与交互的设计 项目背景 小张已经掌握了一般的动画的设计方法 并为公司制作了几个简单动画 这时 新的任务摆在了他的面前 公司需要设计一些能够由用户自主控制的复杂动画 包括 地下宝藏 的各类按钮 网站中的鼠标跟踪功能 转动的眼球 动画以及CS中的 描准镜 功能等 项目分析 1 按钮的功能与基本制作方法是怎样的 2 如何应用按钮的功能与用户实现交互 任务分解 任务1 设计动画按钮 任务2 设计隐形按钮 任务3 设计动画的交互功能 任务1设计动画按钮 了解按钮元件的构成 制作 地下宝藏 之 网罗店铺 按钮 制作 地下宝藏 之 神奇测试 动画按钮 1 理解按钮元件的构成 1 第一帧是 弹起 状态 代表指针没有经过按钮时该按钮的状态 2 第二帧是 指针经过 状态 代表当指针滑过按钮时该按钮的外观 3 第三帧是 按下 状态 代表单击按钮时该按钮的外观 4 第四帧是 点击 状态 定义响应鼠标单击的区域 此区域在SWF文件中是不可见的 2 制作 地下宝藏 之 网罗店铺 按钮1 1 新建Flash文件 命名为 网罗店铺 2 执行 插入 新建元件 命令 创建图形元件 蜘蛛 3 使用 线条工具 绘制直线蛛网 再用 选择工具 将蛛丝的弧度调整好 4 使用 椭圆形工具 和 铅笔工具 绘制蜘蛛 完成元件 5 执行 插入 新建元件 命令 创建图形元件 发光 6 使用 椭圆形工具 按住Shift键的同时绘制一个比蜘蛛身体略大的正圆 7 使用 颜料桶工具 采用放射状渐变色为圆形着色 起始色和中间过渡色均为橙色 FF9900 注意最终色仍然是橙色 FF9900 但透明度为0 完成元件 8 执行 插入 新建元件 命令 创建图形元件 网罗店铺 9 使用 矩形工具 绘制长方形 10 使用 颜料桶工具 采用线性渐变色为矩形着色 起始色和中间过渡色均为白色 FFFFFF 注意最终色仍然是白色 FFFFFF 但透明度为0 2 制作 地下宝藏 之 网罗店铺 按钮2 11 使用 文本工具 输入文字 网罗店铺 采用幼圆字体 粗体 黑色 大小与矩形相宜即可 完成元件 12 执行 插入 新建元件 命令 创建按钮元件 宝藏 13 单击并设置按钮第一帧 弹起 将元件蜘蛛拖入 并对齐到元件中心 14 单击并设置按钮第二帧 指针经过 插入关键帧 自动复制了第一帧的蜘蛛以后 再将发光和网罗店铺元件拖入 摆放到合适的位置 15 单击并设置按钮第三帧 按下 插入关键帧 自动复制了第二帧的所有内容 再将网罗店铺元件实例删去 16 单击并设置按钮第四帧 点击 插入关键帧 自动复制了第三帧的所有内容 再将发光元件实例删去 然后选中蜘蛛元件实例 执行 修改 分离 命令 将其变成矢量图形后 将线条全部删除保留色块部分 完成元件 17 回到场景中 将做好的按钮宝藏拖曳到场景进入 3 制作 地下宝藏 之 神奇测试 动画按1 1 新建Flash文件 命名为 神奇测试 2 执行 插入 新建元件 命令 创建图形元件 棺盖 3 按照项目四学习的方法 使用 矩形工具 和 任意变形工具 绘制扁形的长方体 4 使用 颜料桶工具 着色产生立体感 并用 铅笔工具 绘制一些花纹 完成元件 5 执行 插入 新建元件 命令 创建图形元件 棺体 6 用制作 棺盖 相同的方法制作更大也更复杂的 棺体 7 使用 颜料桶工具 采用放射状渐变色为棺体内部着色 起始色为紫色 CC00FF 最终色为和黑色 000000 完成元件 8 执行 插入 新建元件 命令 创建影片剪辑元件 迷棺 9 制作一小段棺盖升起的动画 在图层1中将棺体元件实例拖曳进来 3 制作 地下宝藏 之 神奇测试 动画按2 10 在图层2中第1帧拖曳棺盖元件实例盖住棺体 在第8帧插入关键帧将棺盖抬起 创建运动渐变动画 11 再插入第9帧 第10帧两个关键帧 分别细微调整棺盖的高度 产生上下抖动的感觉 完成元件 12 执行 插入 新建元件 命令 创建按钮元件 宝藏 13 单击并设置按钮第一帧 弹起 将元件棺体和棺盖拖入 并摆放到如影片剪辑 迷棺 中第一帧的盖住位置 14 单击并设置按钮第二帧 指针经过 插入关键帧 将第一帧自动复制过来的内容删除 再将迷棺拖入 摆放到合适的位置 与第一帧内容对齐 15 单击并设置按钮第三帧 按下 插入关键帧 将第一帧的内容完全复制过来 16 单击并设置按钮第四帧 点击 插入关键帧 自动复制第三帧的内容即可 完成元件 17 回到场景中 将做好的按钮宝藏拖曳到场景进入 任务2设计隐形按钮 理解隐形按钮的作用 利用隐形按钮的特点设计 鼠标跟踪 功能 利用隐形按钮的特点设计 转动的眼球 动画 1 隐形按钮 所谓 隐形按钮 就是指按钮的 弹起 帧中为空的按钮 因为按钮的 弹起 帧决定了按钮在普通状态下的外观 所以如果该帧没有任何内容 那么按钮就隐形了 注意 隐形按钮的除 弹起 帧外的三个帧中 至少第四帧 点击 帧 上要绘制东西 隐形按钮特别适合于制作一些与鼠标移动相关的特效 2 利用隐形按钮的特点设计 鼠标跟踪 功能1 1 新建Flash文件 命名为 鼠标跟踪 2 执行 插入 新建元件 命令 创建图形元件 名为 圆形 3 使用 椭圆形工具 按住Shift键绘制正圆形 完成元件 4 执行 插入 新建元件 命令 创建按钮元件 名为 隐形按钮 5 按钮第一帧 第二帧 第三帧全部使用空白帧 按钮第四帧中将圆形元件实例拖曳进入 摆放到元件中心 完成元件 6 执行 插入 新建元件 命令 创建影片剪辑元件 名为 渐淡 2 利用隐形按钮的特点设计 鼠标跟踪 功能2 7 在第1帧拖曳 隐形按钮 元件实例到元件中心 8 在第1帧加入帧动作 stop 9 再选中第1帧的按钮元件 加入按钮动作 on rollOver gotoAndPlay 2 10 从第2帧开始制作一小段圆形放大并渐淡渐出的动画 在第2帧拖曳 圆形 元件实例到元件中心 在第12帧插入关键帧 并将自动复制得到的 圆形 元件放大 调整透明度为0 创建运动渐变动画 完成元件 11 回到场景中 将做好的影片剪辑元件 渐淡 拖曳进入 并将其复制后铺满整个动画 进行测试即可看到一个图形不断跟着鼠标出现并消失的效果 3 利用隐形按钮的特点设计 转动的眼球 动画1 1 新建Flash文件 命名为 转动的眼球 2 执行 插入 新建元件 命令 创建图形元件 名为 眼睛 3 使用 椭圆形工具 按住Shift键绘制正圆形眼眶 再在其中绘制椭圆形眼球 完成元件 4 执行 插入 新建元件 命令 创建按钮元件 名为 隐形按钮 5 按钮第1帧 第2帧 第3帧全部使用空白帧 按钮第4帧中绘制长等腰三角形色块 顶角10度 将三角形顶点对齐到元件中心 完成元件 6 执行 插入 新建元件 命令 创建影片剪辑元件 名为 转动 7 制作一段眼睛转动的动画 在第1帧拖曳 眼睛 元件实例到元件中心 在第37帧插入关键帧 创建运动渐变动画 设定 眼睛 逆时针旋转一圈 3 利用隐形按钮的特点设计 转动的眼球 动画2 8 在第1帧加入帧动作 stop 完成元件 9 回到场景中 将做好的影片剪辑元件 转动 拖曳进入 命名实例名称为 eye 对齐到场景中心位置 10 再拖曳 隐形按钮 元件实例到场景中 将三角形顶点对齐到眼睛的中心 并为之添加按钮动作 on rollOver tellTarget eye gotoAndStop 1 11 不断旋转并复制 隐形按钮 每次旋转10度 并将按钮动作中的gotoAndStop 1 语句中的帧号每次加1 共需复制35次后铺满整个场景 12 全部制作完成 任务3设计动画的交互功能 使用按钮完成具有交互功能的 瞄准镜 动画 总结动画交互功能的设计 1 使用按钮完成动画交互功能的实例 瞄准镜 1 新建Flash文件 命名为 瞄准镜 2 执行 插入 菜单 新建元件 命令 创建按钮元件 瞄准镜 3 使用 椭圆形工具 和 线条工具 绘制瞄准镜图形 放置在元件的中心 完成元件 4 执行 插入 新建元件 命令 创建影片剪辑元件 名为 遮罩 5 将做好的按钮元件 瞄准镜 拖曳进入 放置在元件中心 完成元件 6 回到主场景 执行 文件 导入 导入到舞台 命令 导入一幅CS位图 将它缩放到与场景大小一致 并将其所在图层命名为 背景图片 7 新建一个图层 命名为 遮罩图层 将做好的影片剪辑元件 遮罩 拖曳进入 命名实例名称为 CS 8 选中影片剪辑实例 CS 添加动作 onClipEvent load Mouse hide this startDrag true 9 选中上方图层 遮罩图层 将其属性设定为 遮罩层 则下方图层 背景图片 自动转化为 被遮罩层 10 全部制作完成后 2 总结动画交互功能的设计 按钮的最终用途还是要实现交互功能 响应用户的鼠标操作的同时还可以完成Actions 设计动画的交互功能往往都要用到按钮 按钮实现与用户的交互 主要是通过第四帧设定的感受范围 在此范围内用户的鼠标操作将会触发按钮第二或第三帧的内容 还可以在按钮上附加Actions代码 用户的鼠标操作就会导致代码的执行 从而完成相应功能 在具体的动画设计中 应仔细分析动画所需的功能 找出适合用按钮实现的交互式功能 再思考如何实现 动画的交互功能是非常有用的