计算机交互式动画和ActionScript程序设计.doc

交互式动画和ActionScript程序设计 5.1 按钮元件 5.1.1 创建按钮元件 1．按钮元件的四个状态 在Flash影片中可以有按钮，按钮也是对象，当鼠标指针移到按钮之上或单击按钮时，即产生交互事件，按钮会改变它的外观。要使一个按钮在影片中具有交互性，需要为按钮实例设计对交互事件产生的动作。按钮有四个状态。 （1）“弹起”（即Up）状态 （2）“指针经过按下单击“插入”→“新元件1”）。单击“确定”按钮，切换到按钮元件的编辑状态，如图5-1-1所示。 5.1.2 测试按钮测试和按钮实例的“属性”面板 1．测试按钮 测试按钮就是将鼠标指针移到按钮之上和单击按钮，观察它的动画效果（应该像播放影片时一样按照指定的方式响应鼠标事件）。 2．按钮实例的“属性”面板 图5-1-2 “按钮1”按钮元件实例的“属性”面板 【实例54】展示Flash动画 “展示Flash动画”动画播放后的2幅画面如图5-1-3所示。屏幕显示4个“移动的放大镜”、“鱼缸和游鱼”、“自转地球”和“电风扇”文字按钮，文字是红色的，背景色是黄色的。将鼠标指针移到文字按钮之上后，鼠标指针变为小手状，文字按钮的文字颜色会变为绿色，同时在文字按钮的右边会演示一个相应的Flash作品。单击该文字按钮后，文字颜色会变为蓝色，同时Flash作品消失。该动画的制作方法如下。 图5-1-3 “展示Flash动画”动画动画播放后的2幅画面 1．制作影片剪辑元件 （1）设置舞台工作区的宽为400像素、高为300像素。然后，以名称“【实例54】展示Flash动画.fla”保存。 （2）单击“导入”→“打开外部库”菜单命令，调出“作为库打开”对话框，利用该对话框打开“【实例18】电风扇.fla”Flash文档的“库”面板。将该“库”面板内的“电风扇”影片剪辑元件拖曳到“【实例54】展示Flash动画.fla”Flash文档的“库”面板内，同时在“【实例54】展示Flash动画.fla”Flash文档的“库”面板内自动添加了“电风扇”影片剪辑元件。 （3）单击“导入”→“打开外部库”菜单命令，调出“作为库打开”对话框，利用该对话框打开“【实例49】星空中自转地球.fla”Flash文档的“库”面板。将该“库”面板内的“自转地球”影片剪辑元件拖曳到“【实例54】展示Flash动画.fla”Flash文档的“库”面板内。 （4）打开“【实例45】移动的放大镜.fla”Flash文档。将时间轴内所有动画帧复制到剪贴板中。切换到“【实例54】展示Flash动画.fla”Flash文档，创建并进入“移动的放大镜”影片剪辑元件的编辑状态，将剪贴板中的所有动画帧粘贴到时间轴内，按照原动画调整粘贴的动画。然后，单击元件编辑窗口中的按钮，回到主场景。 （4）打开“【实例41】鱼和鱼缸.fla”Flash文档。将时间轴内所有动画帧复制到剪贴板中。切换到“【实例54】展示Flash动画.fla”Flash文档，创建并进入“鱼和鱼缸”影片剪辑元件的编辑状态，将剪贴板中的所有动画帧粘贴到时间轴内，按照原动画调整粘贴的动画。然后，单击元件编辑窗口中的按钮，回到主场景。 通过上述操作，在“【实例54】展示Flash动画.fla”Flash文档的“库”面板内已经有了“移动的放大镜”、“鱼缸和游鱼”、“自转地球”和“电风扇”影片剪辑元件。 2．制作按钮元件 （1）单击“插入”→“新元件 图5-1-4 “按钮1”按钮的编辑状态 （4）单击选中“按下”帧，将文字的颜色改为蓝色，将绿色立体彩球改为蓝色立体彩球。 （5）单击选中“点击”帧，按F6键，创建一个关键帧。绘制一个矩形，将文字块和彩球完全覆盖，这样可使鼠标指针的响应区域不是文字笔划，而是矩形图形所覆盖的整个区域。 （6）单击元件编辑窗口中的按钮，回到主场景。 （7）单击选中“库”面板中的“按钮1”按钮元件，单击鼠标右键，调出它的快捷菜单，单击该菜单内的“重制”菜单命令，调出“复制元件”对话框，在该对话框内的“名称”文本框中输入“按钮2”，如图5-1-5所示。再单击“确定”按钮，即可在“库”面板中复制出一个“按钮2”按钮元件。按照上述方法，再在“库”面板内复制“按钮3”和“按钮4”按钮元件。 （8）将“库”面板中的“文字按钮1”等4个按钮元件拖曳到舞台工作区中。调整这些按钮的大小和位置，如图5-1-5所示。 （9）双击舞台工作区内的“按钮1”按钮元件实例，即打开它的编辑状态，在保留舞台工作区内其他对象的情况下（只作为参照物，不可以调整），调整“移动的放大镜”影片剪辑元件实例的大小和位置。然后，单击元件编辑窗口中的按钮，回到主场景。 （10）双击舞台工作区内的“按钮2”按钮元件实例，即打开它的编辑状态，更改其中的文字改为“鱼缸和游鱼”，更换影