第5章交互式动画和ActionScript程序设计.doc

第5章 交互式动画和ActionScript程序设计 5.1 按钮元件 5.1.1 创建按钮元件 1．按钮元件的四个状态 在Flash影片中可以有按钮，按钮也是对象，当鼠标指针移到按钮之上或单击按钮时，即产生交互事件，按钮会改变它的外观。要使一个按钮在影片中具有交互性，需要为按钮实例设计对交互事件产生的动作。按钮有四个状态。 （1）“弹起”（即Up）状态 （2）“指针经过”（即Over）状态 （3）“按下”（即Down）状态 （4）“点击”（即Hit）状态 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）单击“插入”→“新建元件”菜单命令，调出“创建新元件”对话框。在该对话框内的“名称”文本框内输入“按钮1”文字，选择“按钮”类型。单击“确定”按钮，切换到按钮元件编辑状态。 （2）在按钮元件编辑窗口的“弹起”帧内输入“楷体_GB2312”字体、26磅、红色文字“移动的放大镜”，然后，在文字右边绘制一个红色立体彩球，如图5-1-4左图所示。在它“属性”面板中的“X”文本框中的数值为0和“Y”文本框中的数值为0。 （3）单击选中“指针经过”帧和“按下”帧，按F6键，创建2个关键帧。然后，选中“指针经过”帧，将红色文字改为绿色文字，将红色立体彩球改为绿色立体彩球。再将“库”面板内的“移动的放大镜”影片剪辑元件拖曳到“按钮1”文字的右边，利用它的“属性”面板调整它的大小和位置，如图5-1-4右图所示。 图5-1-4 “按钮1”按钮的编辑状态 （4）单击选中“按下”帧，将文字的颜色改为蓝色，将绿色立体彩球改为蓝色立体彩球。 （5）单击选中“点击”帧，按F6键，创建一个关键帧。绘制一个矩形，将文字块和彩球完全覆