网页动画设计与制作Flash MX 2004 作者 陈永东 项目8-按钮与交互的设计.pptVIP

网页动画设计与制作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）单击并设置按钮第四帧“点击”：插入关键帧，自