flash动画制作第11章.ppt

FLASHMX实例教程 熟悉网页广告的制作方法熟悉网页导航菜单的制作方法了解星空动画的制作方法 第11章综合实例 学习目标 FLASHMX实例教程 操作实例1 网页广告动画的制作目标1 准备素材1 新建文档 大小为550 150像素 其他选项保持默认即可 2 绘制矩形 大小同样为550 150像素 移动位置覆盖住整个文档 为其填充红色到橙黄色的渐变颜色 修改图层名称为 bg 3 新建图层 名称为 sun 绘制圆形 填充为浅黄色 移至文档中心部位 转换为图形元件 如图11 1所示 FLASHMX实例教程 4 新建名称为 l 的图层 绘制圆环 内圈直径等于 sun 元件的直径 颜色为橙色 转换为图形元件 名称为 guang 移动元件 知道 guang 元件恰好与 sun 图形元件叠加 如图11 2所示 5 新建名称为 man 的图层 绘制男人的外形 转换为图形元件 如图11 3所示 FLASHMX实例教程 6 新建名称为 woman 的图层 绘制女人的外形 转换为图形元件 如图11 4所示 7 新建名称为 tree 的图层 绘制一棵大树 转换为图形元件 名称为 bigtree 如图11 5所示 8 新建名称为 tree2 的图形 绘制另外一棵大树 转换为元件 名称为 tree 如图11 6所示 FLASHMX实例教程 目标2 创建动画9 首先锁定 bg 层 使其不可编辑 选择 sun 层 创建一个 sun 元件从屏幕外向上升起到画面中心的动画 共三帧 10 选择 l 层 在第3帧到第10帧区间内 为 guang 元件创建扩张并逐渐消失的动画 拷贝帧 向后重复粘贴六次 然后拷贝整个帧区间 在新图层 l2 l3 上错后一帧分别粘贴 如图11 7所示 FLASHMX实例教程 11 选择 tree 图层 在第5帧到第8帧区间内 在画面右下角为 bigtree 创建由小变大的动画 12 同样 选择 tree2 层 在第9帧到第12帧区间内 在画面右下角为 tree 元件创建由小变大的动画 如图11 8所示 FLASHMX实例教程 13 创建 man 和 woman 元件由画面外移动到画面中心的动画 14 在 sun 图层 创建 sun 元件扩张并覆盖整个屏幕的动画 如图11 9所示 15 新建名称为 black 的图层 绘制一个大小刚刚能覆盖住舞台为准 填充深红色 转换为图形元件 名称为 black 16 在第28帧和第39帧区间创建 black 元件的渐现动画 FLASHMX实例教程 17 新建名称为 text 的图层 创建文字 LIFE 颜色为淡黄色 放置在画面中心位置 18 新建名称为 url 的图层 创建文字 颜色为浅紫色 转换为图形元件 并为这个图形元件添加链接网址 如图11 10所示 19 在所有图层的第120帧插入普通帧 目的是让最后的字幕效果停留一段时间 20 整个动画效果完成 时间轴的结构如图11 11所示 FLASHMX实例教程 操作实例2 网页导航菜单的制作目标1 创建菜单中的按钮1 新建文档 大小为199 322像素 背景色为浅蓝色 其它采用默认值 2 选择 矩形工具 绘制三个按钮元件 分别命名为 button1 button2 button3 在按钮上输入文字 此按钮作为一级菜单按钮 如图11 12所示 FLASHMX实例教程 3 新建按钮元件 命名为sub 比 button按钮 略小 并在上面输入文字 此按钮作为二级菜单按钮 如图11 13所示 目标2 创建弹出式菜单影片剪辑4 新建名称为 main 的影片剪辑元件 作为主影片剪辑 5 新建三个图层 名称为 b1 b2 b3 分别把按钮元件 button1 button2 button3 拖放到对应的图层 三个按钮元件在工作区按顺序排列 如图11 14所示 FLASHMX实例教程 6 新建名称为 s1 的图层 把按钮元件 sub 拖放到当前图层 复制5个 均匀对齐 放置在工作区上方中间位置 如图11 15所示 FLASHMX实例教程 7 把 button1 button2 button3 放置到工作区上方的中间位置 以刚好覆盖住5个 sub 按钮元件为准 在 b1 b2 b3 层的第5帧和第20帧插入关键帧 移动 button1 button2 button3 三个按钮到工作区的下方 在第5帧和第20帧之间创建补间动画 如图11 16所示 FLASHMX实例教程 8 选择 b1 b2 b3 层的第15帧 插入关键帧 然后向左拖动刚刚插入的关键帧到第8帧的位置 在 b1 b2 b3 层的第15帧再次插入关键帧 同样向左拖动到第12帧位置 这样 当按钮向下移动时会有一个缓冲的效果 使菜单的动画效果更精彩 如图11 17所示 FLASHMX实例教程 9 复制 b1 b2 b3 层的第5帧到第20帧 在第21帧进行粘贴 保持刚刚粘贴的帧处于被选择状态 右击鼠标 在弹出的快捷菜单中单击 翻转帧 命令 将帧的播放顺序翻转 如图11 18所示 10 为了保持三个按钮下落和上浮的对称性 选择 b1 b2 b3 层的第21帧 将关键帧清除掉 然后将帧删除 FLASHMX实例教程 11 复制 b2 b3 层的第5帧到第35帧 在 b2 b3 层的第40帧处粘贴 复制 b3 层的第5帧到第35帧 在 b3 层第75帧处粘贴 12 新建名称为 zhe 的图层 选择 矩形工具 画一个矩形 删除其轮廓 填充为背景的浅蓝色 FLASHMX实例教程 13 在 zhe 层的第40 43 47 55 63 67 70 75 78 82 90 98 102 105帧处插入关键帧 并且调整关键帧的位置 让矩形的上边缘在每一个关键帧与 button3 按钮的下边缘保持对齐 14 在 s1 层插入关键帧 调整五个按钮的位置 使其与 b1 b2 b3 三个按钮滑动时所露出的空隙相匹配 如图11 19所示 FLASHMX实例教程 目标3 设置菜单的动画效果15 回到主场景工作区 把当前图层命名为 mv 拖放影片剪辑元件 main 到工作区中 调整好位置 并在 属性 对话框指定影片剪辑元件的实例名为main 16 新建影片名称为 action 的剪辑元件 并且在第1 2 10 11 20 21 30 31帧处插入关键帧 然后为这些关键帧添加动作代码 分别为 FLASHMX实例教程 第1帧stop 第2帧tellTarget main gotoAndStop 1 stop FLASHMX实例教程 第10帧stop 第11帧tellTarget main gotoAndPlay 5 stop FLASHMX实例教程 第20帧stop 第21帧tellTarget main gotoAndPlay 40 stop 第30帧stop FLASHMX实例教程 第31帧tellTarget main gotoAndPlay 75 stop FLASHMX实例教程 17 在 main 影片剪辑元件的时间轴上新建名称为 action 的图层 18 在 action 层第1帧和第20帧插入关键帧 为两个关键帧添加同样的动作 stop 19 在 action 层第35帧插入关键帧 为其添加动作 tellTarget action play stop FLASHMX实例教程 20 在 action 层第55帧插入关键帧 为其添加动作 stop 21 在 action 层第70帧插入关键帧 为其添加动作 tellTarget action play stop FLASHMX实例教程 22 在 action 层第90帧插入关键帧 为其添加动作 stop 23 在 action 层第105帧插入关键帧 为其添加动作 tellTarget action play stop FLASHMX实例教程 24 把播放头调到第1帧 单击选择 button1 按钮 为其添加动作 on release gotoAndPlay 5 25 单击选择 button2 按钮 为其添加动作 on release gotoAndPlay 40 FLASHMX实例教程 26 单击选择 button3 按钮 为其添加动作 on release gotoAndPlay 75 27 把播放头调整到第20帧 单击选择 button1 按钮 为其添加动作 on release play tellTarget action gotoAndStop 1 FLASHMX实例教程 28 单击选择 button2 按钮 为其添加动作 on release play tellTarget action gotoAndStop 20 FLASHMX实例教程 29 单击选择 button2 按钮 为其添加动作 on release play tellTarget action gotoAndStop 30 FLASHMX实例教程 30 把播放头调整到第40帧 单击选择 button3 按钮 为其添加动作 on release gotoAndPlay 75 31 把播放头调整到第55帧 单击选择 button1 按钮 为其添加动作 on release play tellTarget action gotoAndStop 10 FLASHMX实例教程 32 单击选择 button2 按钮 为其添加动作 on release play tellTarget action gotoAndStop 1 FLASHMX实例教程 33 单击选择 button3 按钮 为其添加动作 on release play tellTarget action gotoAndStop 30 FLASHMX实例教程 34 把播放头调整到第90帧 单击选择 button1 按钮 为其添加动作 on release play tellTarget action gotoAndStop 10 FLASHMX实例教程 35 单击选择 button2 按钮 为其添加动作 on release play tellTarget action gotoAndStop 20 FLASHMX实例教程 36 单击选择 button3 按钮 为其添加动作 on release play tellTarget action gotoAndStop 1 37 在主场景时间轴新建名称为 ac 的图层 把电影剪辑元件 action 拖放本层的任意位置并指定实例名为 action 按下 Ctrl Enter 键测试动画 FLASHMX实例教程 操作实例3 创建星空动画1 新建Flash文档 设置文档大小为400 400像素 背景色为深蓝色 如图11 20所示 2 绘制如图11 21所示的图形 3 在图形上右击鼠标 在弹出的快捷菜单中选择 转换为元件 命令 把图形转换为影片剪辑元件 名称为 star FLASHMX实例教程 6 4 双击 star 元件 转换到影片剪辑的工作区 在工作区的图形中右击图形 把图形转换为图形元件 名称为 star1 5 创建 star1 的图形动画 效果为从第1帧到第15帧 star1 图形元件逐步变宽变长 并一直持续到第40帧 然后 star1 图形元件变窄变长时间轴如图11 22所示 FLASHMX实例教程 6 在第51帧插入关键帧 添加如下动作代码 stop 7 回到主场景 单击工作区中的 star 影片剪辑元件 指定其实例名为 star 8 修改图层名称为 star 在第2帧插入普通帧 FLASHMX实例教程 9 新建名称为 action 的图层 在第2帧插入关键帧 添加如下代码 if n 1000 n 0 设置停止的条件 满足条件初始化的变量 n n 1 变量 n 加1 FLASHMX实例教程 duplicateMovieClip star star addn n 复制影片剪辑元件 star 然后重新命名 放置在层 setProperty star addn rotation random 360 设置复制后的影片剪辑元件的旋转属性 在360度内任意旋转 setProperty star addn alpha Number random 50 50 设置复制后的影片剪辑元件的透明度在50到100之内任意变化 FLASHMX实例教程 n n 1 duplicateMovieClip star star addn n setProperty star addn rotation random 360 setProperty star addn alpha Number random 50 50 n n 1 duplicateMovieClip star star addn n setProperty star addn rotation random 360 setProperty star addn alpha Number random 50 50 n n 1 FLASHMX实例教程 duplicateMovieClip star star addn n setProperty star addn rotation random 360 setProperty star addn alpha Number random 50 50 以上几行复制前面的代码 以得到更加随机和无序的效果 10 测试动画 可以看到我们在星群中穿梭的动画效果 FLASHMX实例教程 通过广告动画实例的学习 可以认识到 一些动画效果并不需要特别的复杂的操作和代码 只要能掌握对帧和画面的控制方法和技巧 简单的命令也能够做出效果绚丽的动画 FLASHMX实例教程 在11 2节 我们学习了如何制作一组弹出式菜单 只要在每个菜单的按钮上添加网址 便能够运用到网页中去了 事实上 11 2节的实例还有许多能够完善的地方 比如可以在制作菜单按钮时 为按钮文字制作文字特效 或者为按钮制作变色的背景 也可以为按钮添加音效 从而使导航按钮在实际应用中更有动感 同样的 我们还可以更改菜单的滑动弹出方式为其他的弹出方式 无论怎样更改 原理是相同的 都是通过动作代码来交互控制帧的跳转和播放 其实只要能够灵活的运用按钮 影片剪辑 不需要复杂的动作代码也能够做出惊人的效果 FLASHMX实例教程 11 3节的星空动画中 我们运用了较为复杂的代码 这些代码的具体知识参见第八章 FLASHMX实例教程 1 运用本书的知识 进一步完善和提高11 1节实例 网页导航菜单 2 制作一个宣传Flash的动画广告