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

《网页动画设计与制作FlashMX2004 项目8-按钮与交互的设计》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、网页动画设计与制作Flash项目八按钮与交互的设计项目八按钮与交互的设计【项目背景】小张已经掌握了一般的动画的设计方法，并为公司制作了几个简单动画。这时，新的任务摆在了他的面前，公司需要设计一些能够由用户自主控制的复杂动画，包括“地下宝藏”的各类按钮、网站中的鼠标跟踪功能、“转动的眼球”动画以及CS中的“描准镜”功能等。【项目分析】1．按钮的功能与基本制作方法是怎样的？2．如何应用按钮的功能与用户实现交互？【任务分解】任务1：设计动画按钮。任务2：设计隐形按钮。任务3：设计动画的交互功能。任务1设计动画按钮了解按钮元件的构成。制作“地下宝藏”之“网罗店铺”按钮。制作“地下宝藏”之“

2、神奇测试”动画按钮。1．理解按钮元件的构成（1）第一帧是“弹起”状态，代表指针没有经过按钮时该按钮的状态。（2）第二帧是“指针经过”状态，代表当指针滑过按钮时该按钮的外观。（3）第三帧是“按下”状态，代表单击按钮时该按钮的外观。（4）第四帧是“点击”状态，定义响应鼠标单击的区域，此区域在SWF文件中是不可见的。2．制作“地下宝藏”之“网罗店铺”按钮1（1）新建Flash文件，命名为“网罗店铺”。（2）执行“插入”→“新建元件”命令，创建图形元件“蜘蛛”。（3）使用“线条工具”绘制直线蛛网，再用“选择工具”将蛛丝的弧度调整好。（4）使用“椭圆形工具”和“铅笔工具”绘制蜘蛛，完成元件。

3、（5）执行“插入”→“新建元件”命令，创建图形元件“发光”。（6）使用“椭圆形工具”，按住Shift键的同时绘制一个比蜘蛛身体略大的正圆。（7）使用“颜料桶工具”，采用放射状渐变色为圆形着色，起始色和中间过渡色均为橙色（#FF9900），注意最终色仍然是橙色（#FF9900），但透明度为0，完成元件。（8）执行“插入”→“新建元件”命令，创建图形元件“网罗店铺”。（9）使用“矩形工具”绘制长方形。（10）使用“颜料桶工具”，采用线性渐变色为矩形着色，起始色和中间过渡色均为白色（#FFFFFF），注意最终色仍然是白色（#FFFFFF），但透明度为02．制作“地下宝藏”之“网罗店铺”按

4、钮2（11）使用“文本工具”输入文字“网罗店铺”，采用幼圆字体，粗体，黑色，大小与矩形相宜即可，完成元件。（12）执行“插入”→“新建元件”命令，创建按钮元件“宝藏”。（13）单击并设置按钮第一帧“弹起”，将元件蜘蛛拖入，并对齐到元件中心。（14）单击并设置按钮第二帧“指针经过”，插入关键帧，自动复制了第一帧的蜘蛛以后，再将发光和网罗店铺元件拖入，摆放到合适的位置。（15）单击并设置按钮第三帧“按下”，插入关键帧，自动复制了第二帧的所有内容，再将网罗店铺元件实例删去。（16）单击并设置按钮第四帧“点击”，插入关键帧，自动复制了第三帧的所有内容，再将发光元件实例删去，然后选中蜘蛛元件

5、实例，执行“修改”→“分离”命令，将其变成矢量图形后，将线条全部删除保留色块部分，完成元件。（17）回到场景中，将做好的按钮宝藏拖曳到场景进入。3．制作“地下宝藏”之“神奇测试”动画按1（1）新建Flash文件，命名为“神奇测试”。（2）执行“插入”→“新建元件”命令，创建图形元件“棺盖”。（3）按照项目四学习的方法，使用“矩形工具”和“任意变形工具”绘制扁形的长方体。（4）使用“颜料桶工具”着色产生立体感，并用“铅笔工具”绘制一些花纹，完成元件。（5）执行“插入”→“新建元件”命令，创建图形元件“棺体”。（6）用制作“棺盖”相同的方法制作更大也更复杂的“棺体”。（7）使用“颜料桶

6、工具”，采用放射状渐变色为棺体内部着色，起始色为紫色（#CC00FF），最终色为和黑色（#000000），完成元件。（8）执行“插入”→“新建元件”命令，创建影片剪辑元件“迷棺”；（9）制作一小段棺盖升起的动画：在图层1中将棺体元件实例拖曳进来。3．制作“地下宝藏”之“神奇测试”动画按2（10）在图层2中第1帧拖曳棺盖元件实例盖住棺体，在第8帧插入关键帧将棺盖抬起，创建运动渐变动画。（11）再插入第9帧、第10帧两个关键帧，分别细微调整棺盖的高度，产生上下抖动的感觉，完成元件。（12）执行“插入”→“新建元件”命令，创建按钮元件“宝藏”。（13）单击并设置按钮第一帧“弹起”：将元件

7、棺体和棺盖拖入，并摆放到如影片剪辑“迷棺”中第一帧的盖住位置。（14）单击并设置按钮第二帧“指针经过”：插入关键帧，将第一帧自动复制过来的内容删除，再将迷棺拖入，摆放到合适的位置，与第一帧内容对齐。（15）单击并设置按钮第三帧“按下”：插入关键帧，将第一帧的内容完全复制过来。（16）单击并设置按钮第四帧“点击”：插入关键帧，自动复制第三帧的内容即可，完成元件。（17）回到场景中，将做好的按钮宝藏拖曳到场景进入。任务2设计隐形按钮理解隐形按钮的作用。利用隐形按钮的特点设