资源描述
第5章 交互式动画和ActionScript程序设计5.1 按钮元件5.1.1 创建按钮元件1按钮元件的四个状态在Flash影片中可以有按钮,按钮也是对象,当鼠标指针移到按钮之上或单击按钮时,即产生交互事件,按钮会改变它的外观。要使一个按钮在影片中具有交互性,需要为按钮实例设计对交互事件产生的动作。按钮有四个状态。(1)“弹起”(即Up)状态(2)“指针经过”(即Over)状态(3)“按下”(即Down)状态(4)“点击”(即Hit)状态2创建按钮图5-1-1 按钮元件的编辑状态单击“插入”“新建元件”菜单命令,调出“创建新元件”对话框。在该对话框内,选择“按钮”复选框,在“名称”文本框中输入元件的名字(例如:“按钮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键,创建一个关键帧。绘制一个矩形,将文字块和彩球完全覆盖,这样可使鼠标指针的响应区域不是文字笔划,而是矩形图形所覆盖的整个区域。(6)单击元件编辑窗口中的按钮,回到主场景。(7)单击选中“库”面板中的“按钮1”按钮元件,单击鼠标右键,调出它的快捷菜单,单击该菜单内的“重制”菜单命令,调出“复制元件”对话框,在该对话框内的“名称”文本框中输入“按钮2”,如图5-1-5所示。再单击“确定”按钮,即可在“库”面板中复制出一个“按钮2”按钮元件。按照上述方法,再在“库”面板内复制“按钮3”和“按钮4”按钮元件。图5-1-5 “直接复制元件”对话框(8)将“库”面板中的“文字按钮1”等4个按钮元件拖曳到舞台工作区中。调整这些按钮的大小和位置,如图5-1-5所示。(9)双击舞台工作区内的“按钮1”按钮元件实例,即打开它的编辑状态,在保留舞台工作区内其他对象的情况下(只作为参照物,不可以调整),调整“移动的放大镜”影片剪辑元件实例的大小和位置。然后,单击元件编辑窗口中的按钮,回到主场景。(10)双击舞台工作区内的“按钮2”按钮元件实例,即打开它的编辑状态,更改其中的文字改为“鱼缸和游鱼”,更换影片剪辑元件实例为“鱼缸和游鱼”影片剪辑元件实例,调整它的大小和位置。单击元件编辑窗口中的按钮,回到主场景。按照上述方法,再编辑另外两个按钮元件。【实例55】按钮控制动画1“按钮控制动画1”动画播放后,屏幕显示顺时针自转的七彩光环(其内是一幅星空和透明地球的图像),如图5-1-6左图所示。将鼠标指针移到透明地球之上后,鼠标指针变为小手状,七彩光环动画改变为逆时针自转,同时显示黄色“单击我可以播放动画”文字,如图5-1-6中图所示。单击后七彩光环停止自转,同时“星空中自转地球”动画还是播放,如图5-1-6右图所示。该动画的制作方法如下。 图5-1-6 “按钮控制动画1”动画播放后的3幅画面1制作影片剪辑元件(1)设置舞台工作区的大小为400像素宽、300像素高,背景色为黑色。以名称“【实例55】按钮控制动画1.fla”保存。(2)打开“【实例49】星空中自转地球.fla”Flash文档。将时间轴内所有动画帧复制到剪贴板中。切换到“【实例54】展示Flash动画.fla”Flash文档,创建并进入“动画”影片剪辑元件的编辑状态,将剪贴板中的所有动画帧粘贴到时间轴内,按照原动画调整粘贴的动画。然后,单击元件编辑窗口中的按钮,回到主场景。(3)单击“导入”“打开外部库”菜单命令,调出“作为库打开”对话框,利用该对话框打开“【实例35】彩球和自转光环.fla”Flash文档的“库”面板。将该“库”面板内的“七彩光环”、“逆时针自转光环”和“顺时针自转光环”影片剪辑元件拖曳到“【实例54】展示Flash动画.fla”Flash文档的“库”面板内。此时,在该Flash文档的“库”面板内自动添加了这4个影片剪辑元件。(5)选中“【实例49】星空中自转地球.fla”Flash文档,单击“文件”“导出”“导出图像”菜单命令,调出“导出图像”对话框。利用该对话框找到“素材”文件夹,在“保存类型”文本框中选择“JPG图像(.jpg)”选项,在“文件名”文本框内输入“星空自转地球”,再单击“保存”按钮,调出“导出JPEG”对话框,按照如图5-1-7所示进行设置。单击“确定”按钮,将动画的当前画面以名称“星空自转地球.jpg”保存。图5-1-7 “导出JPEG”对话框(6)注意:该图像的宽度比实际的图像宽度(400像素)要宽,这是它的特殊情况,需要进行处理,处理的方法很多。可以再新建一个Flash文档,设置舞台工作区宽400像素,高300像素,导入“星空自转地球.jpg”图像文件,调整它的位置,使它将整个舞台工作区完全覆盖。然后,再按照上述方法到处图像,以名称“星空自转地球.jpg”保存,覆盖原图像文件。(7)选中“【实例55】按钮控制动画1.fla”Flash文档,将“星空自转地球.jpg”图像导入到“按钮控制动画1”动画的“库”面板中。2制作按钮元件(1)创建并进入“动画按钮”按钮元件的编辑状态。选中“图层1”图层的“弹起”帧,将“库”面板中的“顺时针自转光环”影片剪辑元件拖曳到舞台工作区的中心处。(2)在“图层1”图层之上增加一个“图层2”图层,选中“图层2”图层“弹起”帧。将“库”面板中的“星空自转地球”图像拖曳到舞台工作区的中心处,如图5-1-6左图所示。(3)选中“图层1”图层的“指针经过”帧,按F7键,创建一个空关键帧。将“库”面板中的“逆时针自转光环”影片剪辑元件拖曳到舞台工作区的中心。然后,使用工具箱中的“文本工具”,输入蓝色、隶书、加粗的文字“单击我可以播放动画”,如图5-1-6中图所示。(4)选中“图层2”图层的“指针经过”帧,按F6键,创建一个关键帧。(5)按住Ctrl键,单击选中“图层1”和“图层2”图层的“按下”帧,按F7键,创建2个空关键帧。选中“图层1”图层的“按下”帧,将“库”面板中的“七彩光环”影片剪辑元件拖曳到舞台工作区的中心处。选中“图层1”图层的“按下”帧,将“库”面板中的“动画”影片剪辑元件拖曳到舞台工作区的中心处,如图5-1-6右图所示。(6)选中“点击”帧,按F7键,创建一个空关键帧。然后绘制一个有填充色的圆形图形,将地球图形完全覆盖,设置鼠标指针的响应区域。(7)单击元件编辑窗口中的按钮,回到主场景。(8)“库”面板中的“动画按钮”按钮元件拖曳到舞台工作区的中心。5.2 “动作”面板、事件和部分全局函数5.2.1 “动作”面板 “动作”面板有三个区域:命令列表区、程序编辑区和位置列表区。帧的“动作-帧”面板参看图5-2-1。图5-2-1 “动作-帧”面板5.2.2 事件交互式动画的一个行为包含了两个内容,一个是事件,一个是事件产生时所执行的动作。事件是触发动作的信号,动作是事件的结果。在Flash MX 2004中,播放指针到达某个指定的关键帧、用户单击按钮或影片剪辑元件、用户按下了键盘按键等操作,都可以触发事件。动作可以有很多,可由读者发挥创造。可以认为动作是由一系列的语句组成的程序。最简单的动作是使播放的动画停止播放,使停止播放的动画重新播放等。事件的设置与动作的设计是通过“动作”面板来完成的。帧事件就是当影片或影片剪辑播放到某一帧时的事件。注意:只有关键帧才能设置事件。例如,如果要求上述的动画播放到第30帧时停止播放,那么可以在第30帧创建一个关键帧,调出“动作-帧”面板,在该面板内右边程序编辑区内输入“stop();”程序。用鼠标将“动作-帧”面板左边命令列表区内“全局函数”“时间轴控制”目录下的stop命令选项拖曳到,或者单击按钮,调出一个菜单,再单击“全局函数”“时间轴控制”“stop”菜单命令,可以在该面板内右边程序编辑区内自动添加“stop();”程序。2按钮和按键的事件与动作单击选中舞台工作区内的一个按钮实例对象,“动作”面板即可变为“动作-按钮”面板。可以看出它与“动作-帧”面板(如图5-2-1所示)基本一样。用鼠标将“动作-按钮”面板左边命令列表区内“全局函数”“影片剪辑控制”目录下的on命令拖曳到右边程序编辑区内。这时面板右边程序编辑区内会弹出如图5-2-5所示的按钮和按键事件命令菜单。双击该菜单中的选项,可以在on命令的括号内加入按钮事件与按键事件命令。例如,双击press命令后,程序编辑区内的程序如图5-2-10所示。在press命令右边输入英文字符“,”后,单击辅助按钮栏内的“显示代码提示”按钮,即可调出如图5-2-8的按钮和按键事件命令菜单,双击该菜单中的keyPress 命令,即可再加入按键事件命令。此时,程序编辑区内的程序如图5-2-11所示。可见该按钮可以响应两个或多个事件命令。 图5-2-10 双击press命令效果 图5-2-11 加入按键命令效果该菜单中各选项的含义如下。(1)press(按):当鼠标指针移到按钮之上,并单击按下鼠标左键时触发事件。(2)release (释放):当鼠标指针移到按钮之上,单击鼠标左键,松开鼠标左键时触发事件。(3)releaseOutside (外部释放):当鼠标指针移到按钮之上,并单击按下鼠标左键,不松开鼠标左键,将鼠标指针移出按钮范围,再松开鼠标左键时触发事件。(4)rollOver (滑过):当鼠标指针由按钮外面,移到按钮内部时触发事件。(5)rollOut (滑离):当鼠标指针由按钮内部,移到按钮外边时触发事件。(6)dragOver (拖过):当鼠标指针移到按钮之上,并单击按下鼠标左键,不松开鼠标左键,然后将鼠标指针拖曳出按钮范围,接着再拖曳回按钮之上时触发事件。(7)dragOut (拖离):当鼠标指针移到按钮之上,并单击按下鼠标左键,不松开鼠标左键,然后把鼠标指针拖曳出按钮范围时触发事件。(8)keyPress (按键):当键盘的指定按键被按下时,触发事件。在on括号内输入多个事件命令,事件命令之间用逗号分隔,这样在这几个事件中的任意一个发生时都会产生事件,触发动作的执行。动作脚本程序写在大括号内。将“动作-按钮”或“动作-影片剪辑”面板左边命令列表区内“全局函数”“影片剪辑控制”目录下的on命令拖曳到右边程序编辑区内后,“动作-按钮”面板如图5-2-12所示。图5-2-12 “动作-按钮”面板3影片剪辑元件的事件与动作 图5-2-13 影片剪辑实例事件 图5-2-14 加入load参数 图5-2-15 再加入keyDown参数影片剪辑实例事件(“onClipEvent()”句柄)可以设置以下9种不同的事件:(1)load(加载):当影片剪辑元件下载到舞台中的时候产生事件。(2)enterFrame(进入帧):当导入帧的时候产生事件。(3)unload(卸载):当影片剪辑元件从舞台中被卸载的时候产生事件。(4)mouseDown(鼠标按下):当鼠标左键按下时产生事件。(5)mouseUp(鼠标弹起):当鼠标左键释放时产生事件。(6)mouseMove(鼠标移动):当鼠标在舞台中移动时产生事件。(7)keyDown(向下键):当键盘的某个键按下时产生事件。(8)keyUp(向上键):当键盘的某个按键释放时产生事件。(9)data(数据):当LoadVariables或者LoadMovie收到了数据变量时产生事件。上述命令均可以直接输入到程序编辑区中。用鼠标将“动作-影片剪辑”面板左边命令列表区内“全局函数”“影片剪辑控制”目录下的onClipEvent命令拖曳到右边程序编辑区内,“动作-影片剪辑”面板如图5-2-16所示。可以利用自动弹出的列表方便地选择影片剪辑事件。图5-2-16 “动作-影片剪辑”面板5.2.3 “时间轴控制”和“其他”全局函数函数是完成一些特定任务的程序,可在程序中通过调用这些函数来完成具体的任务。Flash提供了大量全局函数,这些函数可以从“动作”面板命令列表区的“全局函数”目录下找到。1“时间轴控制”函数“时间轴控制”函数可以在“全局函数”“时间轴控制”目录下找到。(1)stop函数【格式】stop()【功能】暂停当前动画的播放,使播放头停止在当前帧。(2)play函数【格式】play【功能】如果当前动画暂停播放,则从播放头暂停处继续播放动画。(3)gotoAndPlay 函数【格式】gotoAndPlay(scene, frame)【功能】使播放头跳转到指定场景内的指定帧,并开始播放动画,参数scene是设置开始播放的场景,如果省略scene参数,则默认当前场景;参数frame是指定播放的帧号。帧号可以是帧的序号,也可以是帧的标签(即帧的“属性”面板内的“帧标签”文本框中的名称)。(4)gotoAndStop函数【格式】gotoAndStop(scene, frame)【功能】使播放头跳转到指定场景(scene)内的指定帧(frame),并停止在该帧上。(5)nextFrame函数【格式】nextFrame()【功能】使播放头跳转到当前帧的下一帧,并停在该帧。(6)prevFrame函数【格式】prevFrame()【功能】使播放头跳转到当前帧的前一帧,并停在该帧。(7)nextScene函数【格式】nextScene()【功能】使播放头跳转到当前场景的下一个场景的第1帧,并停在该帧。(8)prevScene函数【格式】prevScene()【功能】使播放头跳转到当前场景的前一个场景的第1帧,并停在该帧。(9)stopAllSounds函数【格式】stopAllSounds ()【功能】关闭目前播放的Flash动画(无论播放几个Flash动画)内所有正在播放的声音。2.部分“其他”全局函数(1)escape函数【格式】escape(expression);【功能】将表达式expression的值转换为ASCII码字符,并返回字符串。(2)unescape函数【格式】unescape(x);【功能】将URL编码的字符串x转换为字符串,并以URL编码方式输出,除了英文与数字,其余的字符将以16进制编码方式表示。(3)eval函数【格式】eval(expression);【功能】将参数expression的内容返回。expression可以是变量或影片剪辑实例名称等。AS1=China;AS2=AS1;/将变量AS2的值AS1读出来,替代eval(AS2),即将AS1变量的值赋给文本框变量TEXT1TEXT1=eval(AS2);/执行该程序后,文本框变量TEXT1的值为“China”(4)getTimer函数【格式】getTimer();【功能】返回动画播放后所经过的时间。单位为毫秒。(5)trace函数【格式】trace(expression);【功能】在“输出”面板中显示表达式expression的值。例如:在动画第1帧加入“trace(2+4);”命令,运行动画,当执行第1帧时,会调出“输出”面板,在该面板中显示“6”。【实例56】按钮控制动画2“按钮控制动画2”动画播放后显示一个“星空中自转地球”动画的第1帧画面和两个按钮,如图5-2-17左图所示。单击按钮,可看到动画从头播放。单击按钮,可看到“星空中自转地球”动画停止播放,回到第1帧画面,如图5-2-17右图所示。该动画的制作方法如下。 图5-2-17 “按钮控制动画2”动画播放后的2幅画面1方法1(1)设置舞台工作区的宽为400像素,高为300像素,背景色为黑色。将它保存为名称是“【实例56】按钮控制动画2.fla”的Flash文件。(2)单击“导入”“打开外部库”菜单命令,调出“作为库打开”对话框,利用该对话框打开“【实例55】按钮控制动画1.fla”Flash文档的“库”面板。(3)将“【实例55】按钮控制动画1.fla”Flash文档“库”面板内的“星空自转地球.”图像拖曳到“【实例72】按钮控制动画2.fla”Flash文档的舞台工作区内中心处。(4)单击选中“图层1”图层第2帧,按F7键,创建一个空关键帧。单击选中“图层1”图层第2帧,将“【实例55】按钮控制动画1.fla”Flash文档“库”面板内的“动画”影片剪辑元件拖曳到“【实例72】按钮控制动画2.fla”Flash文档的舞台工作区内中心处。(5)在“图层1”图层的下面添加一个“图层2”图层。单击选中“图层2”图层第1帧,用鼠标将按钮公用库中的两个按钮元件和,分别拖曳到舞台工作区内,形成两个按钮实例,调整按钮的大小和位置,如图5-2-17所示。“图层1”图层第2帧自动成为普通帧。(6)单击选中“停止”按钮,在其“属性”面板的“实例名称”文本框中输入按钮实例的名称“AN1”。采用相同的方法,给“播放”按钮实例命名为“AN2”。(7)选中“图层2”图层第1帧,调出“动作-帧”面板。在该面板内右边的程序编辑区内输入如下程序。stop();AN1.onPress=function()gotoAndStop(1); /转至第1帧停止AN2.onPress=function()gotoAndStop(2); /转至第2帧停止另外,还可以选中“停止”按钮,在“动作-按钮”面板的程序编辑区内输入如下程序。on (press) gotoAndPlay(1);选中“播放”按钮实例,在“动作-按钮”面板的程序编辑区内输入如下程序。on (press) gotoAndStop(2);【实例57】按钮控制动画3“按钮控制动画2”动画播放后显示如图5-2-18左图所示,自转地球没有转动,星星在变化。单击“播放”按钮,可以看到自转地球从暂停处开始播放。单击“暂停”按钮,可以看到自转地球暂停,没有回到原始状态。再单击“播放”按钮,又可以看到自转地球从暂停处开始播放。该动画的制作方法如下。 图5-2-18 “按钮控制翻页画册”动画播放后的2幅画面(1)打开“【实例49】星空中自转地球.fla”Flash文件,再以名字“【实例57】按钮控制动画3.fla”保存。(2)双击“库”面板内的“自转地球”影片剪辑元件,调出它的编辑窗口,将动画的所有帧复制到剪贴板中,然后回到主场景。(3)在“图层1”图层之上添加一个“图层2”图层。选中“图层2”图层第1帧,单击鼠标右键,调出帧快捷菜单,单击该菜单中的“粘贴帧”菜单命令,将剪贴板内的动画粘贴到主场景内。(4)将“图层1”图层得名称改为“星星”,删除舞台工作区内的“自转地球”影片剪辑实例。然后,在时间轴的最上边加一个“按钮”图层。将按钮公用库中的两个按钮元件和,分别拖曳到舞台工作区内,形成两个按钮实例,如图5-2-23所示。(5)给按钮实例命名为“AN1”,给按钮实例命名为“AN2”。(6)单击选中“背景”图层第1帧,调出“动作-帧”面板,在程序编辑区内输入如下程序。stop();AN1.onPress=function()stop(); /使播放头停止在当前位置,暂停动画的播放AN2.onPress=function()play(); /使播放头继续移动,即从当前位置继续播放【实例58】熊猫图像浏览“熊猫图像浏览”动画播放后如图5-2-19左图所示。单击“后一帧”按钮,即可显示下一帧画面,如图5-2-19中图所示。单击“前一帧”按钮,可显示上一帧画面。单击“起始帧”按钮,可显示第1帧画面。单击“终止帧”按钮,可显示最后一帧画面。该动画的制作方法如下。 图5-2-19 “熊猫图像浏览”动画播放后的3幅画面(1)设置舞台工作区的宽为380像素,高为480像素,背景色为白色。单击“文件”“导入到库”菜单命令,调出“导入到库”对话框。利用该对话框导入10幅大小一样的红楼图像(宽320象素,高400像素)到“库”面板中。(2)选中“图层1”图层第1帧,绘制一幅框架图像,输入红色“熊猫图像浏览”竖排文字(每输入一个字,按一次Enter键)。单击“属性”面板内的“格式”按钮,调出“格式选项”对话框,利用该对话框设置文字行距为-2 pt。(3)将按钮公用库中的四个按钮拖曳到舞台工作区中,在每个按钮的下面输入相应的文字,然后利用“对齐”面板将四个按钮和四个文字块分别排列对齐,如图5-2-19所示。(4)在“图层1”图层下面添加一个名称为“图层2”的图层。选中“图层2”图层第1帧,用鼠标将“库”面板中的一幅熊猫图像拖曳到舞台工作区中,并调整它的位置。选中“图层2”图层第2帧,按F7键,用鼠标将“库”面板中的一幅熊猫图像拖曳到舞台工作区中,并调整它的位置。按照上述方法,在“图层2”图层的第3帧到第12帧分别导入一幅熊猫图像。(5)选中“图层1”图层第12帧,按F5键。(6)单击选中左边的“起始帧”按钮,在其“属性”面板内“实例名称”文本框中输入“AN1”。按照相同的方法,依次给其他按钮实例分别命名为“AN2”、“AN3”和“AN4”。(7)单击选中“图层 1”图层的第1帧,调出“动作-帧”面板,输入如下程序。stop()AN1.onPress=function()gotoAndStop (1); /转至起始帧停止AN2.onPress=function()prevFrame(); /转上一帧播放AN3.onPress=function() nextFrame(); /转至后一帧播放AN5.onPress=function() gotoAndStop(12); /转至最后一帧停止(7)单击选中“图层1”图层的第10帧,按F5键,使第1帧到第10帧内容一样。【实例59】鼠标触发的水珠“鼠标触发的水珠”动画播放后,显示一幅绿叶图像,图像之上有多个透明的水珠,如图5-2-20左图所示。将鼠标指针移到水珠之上后,水珠会变小、晃动,再低落下去,如图5-2-20右图所示。该动画的制作方法如下。 图5-2-20 “鼠标触发的水珠”动画播放后的2幅画面1制作“水珠图形”图形元件(1)设置舞台工作区的宽为500像素,高为400像素,背景色为黄色。(2)创建并进入“按钮”按钮元件的编辑状态,单击选中“点击”帧,绘制一个椭圆形图形,用来确定按钮的响应区域。在其他帧创建空关键帧,不加入任何对象。(3)创建并进入“水珠图形”按钮元件的编辑状态,绘制一个无轮廓线的椭圆图形,它的“混色器”面板设置如图5-2-21左图所示。在“填充样式”下拉列表框内选择“放射状”选项,设置为放射状填充;三个关键点颜色分别设置为白色(红、绿、蓝均为255,Alpha为100%)、白色(红、绿、蓝均为255,Alpha为100%)、白色(红、绿、蓝均为255,Alpha为0%)。(4)将白色椭圆图形逆时针旋转约20度,使用工具箱内的“填充变形工具”,单击白色椭圆图形内部,调整填充效果。复制一份白色椭圆图形,将复制的白色椭圆图形移到原白色椭圆图形的右边。然后,再将复制的白色椭圆图形放大约20个像素。(5)再将“混色器”面板设置如图5-2-21右图所示。在“填充样式”下拉列表框内选择“放射状”选项,设置为放射状填充;四个关键点颜色分别设置为黑色(红、绿、蓝均为0,Alpha为100%)、黑色(红、绿、蓝均为0,Alpha为100%)、黑色(红、绿、蓝均为0,Alpha为0%)、黑色(红、绿、蓝均为0,Alpha为0%)。(6)使用工具箱内的“颜料桶工具”,单击白色椭圆图形内部,填充设置的放射状黑色。使用工具箱内的“填充变形工具”,单击黑色椭圆图形内部,调整填充效果。(7)使用工具箱内的“选择工具”,将白色椭圆图形移到黑色椭圆图形之上,拖曳选中两个椭圆图形,将它们组成组合。(8)单击元件编辑窗口中的按钮,回到主场景。2制作“水珠”影片剪辑元件和动画(1)创建并进入“水珠”影片剪截元件的编辑状态,将“图层1”图层的名称改为“水珠滴落”,选中该图层的第1帧,将“库”面板内的“水珠图形”图形元件拖曳到舞台工作区内的中心处,形成“水珠图形”图形实例,调整它的大小(宽30像素,高35像素),如图5-2-22所示。 图5-2-21 “混色器”面板设置 图5-2-22 “水珠图形”图形实例(2)创建“水珠滴落”图层第1帧到第16帧的动作动画,将第16帧内的“水珠图形”图形实例调小一些(宽20像素,高21像素)。(3)按住Ctrl键,单击选中第17、18、19、20、21、22帧,将第18帧“水珠图形”图形实例调圆一些,稍稍倾斜一些、位置稍稍移动一些。再将第18帧复制粘贴到第20帧。(4)创建“水珠滴落”图层第21帧到第80帧的动作动画,将第80帧的“水珠图形”图形实例垂直移到下边一段距离(Y值约340像素)。(5)在“水珠滴落”图层之上添加一个名称为“按钮”的图层。单击选中“按钮”图层第1帧,将“库”面板内的“按钮”按钮元件拖曳到舞台工作区内的中心处,形成“按钮”按钮实例(呈浅蓝色),调整它的大小和位置与“水珠图形”图形实例一样,如图5-2-23所示。(6)按住Ctrl键,单击选中“按钮”图层的第2、16帧,按F7键,创建两个空关键帧。按“按钮”图层的第80帧,按F5键,创建一个普通帧。(7)单击选中“按钮”图层的第16帧,在其“属性”面板内的“帧标签”文本框内输入“STAR”,给第16帧标签命名“STAR”。(8)单击选中“按钮”按钮实例,调出它的“动作-按钮”面板,在该面板内的程序编辑区中输入如下程序。on (release, rollOver) gotoAndPlay(STAR);(9)单击选中“按钮”图层第1帧,在“动作-帧”面板内的程序编辑区中输入。stop(); /暂停播放(10)“水珠”影片剪辑元件的时间轴如图5-2-23所示。单击元件编辑窗口中的按钮,回到主场景。图5-2-23 “水珠”影片剪辑元件的时间轴(11)单击选中主场景“图层1”图层第1帧,导入一幅“绿叶”图像,调整该图像的大小和位置,使该图像刚好将舞台工作区覆盖。(12)在“图层1”图层之上添加“图层2”图层,选中“图层2”图层第1帧,多次将“库”面板内的“水珠”影片剪辑元件拖曳到舞台工作区内,排列好,如图5-2-20左图所示。5.3 ActinScript基本语法和部分全局函数5.3.1 ActinScript基本语法1常量常量是程序运行中不改变的量。常量有数值型、字符串型和逻辑型三种。2变量变量可以赋值一个数值、字符串、布尔值、对象等。3注释为了帮助阅读脚本程序,可在程序中加入注释内容。注释语句在程序运行中是不执行的。5.3.2 运算符、表达式和自定义函数运算符(即操作符)是能够提供对常量与变量进行运算的元件。常用的运算符及其含义如表5-3-1和表5-3-2所示。表5-3-1 二进制运算和赋值运算符及其含义运 算 符名 称使 用 方 法&按位与n=6&3;/n的值为2/110&011为010左移位n=6右移位n=61;/ 0110(即6)右移1位,n的值为3(0011)无符号右移位n=92;/ 1001(即0)右移2位,n的值为4(00100)按位异或11=0,10=1,00=0,01=1|按位或1|1=1,1|0=1,0|0=0,0|1=1按位非0=1,1=0%=、&=、*=、+=、-=、/=、=、=、=、|=赋值运算Abc%=8等同于Abc=Abc%8表5-3-2 普通运算符和字符串运算符运算符名 称使 用 方 法运算符名 称使用方法!逻辑非a=!true;/a的值为false?:条件判断【格式】变量=表达式1?: 表达式2,表达式3【功能】如果表达式1成立,则将表达式2的值赋给变量,否则将表达式3的值赋给变量%取模a=21%5;/a=1*乘号6*8/其值为48+加号a=“abc”+5;/a的值为abc5_减号9-6/其值为3+自加y+相当于y=y+1-自减y-相当于y=y-1/除9/3;/其值为3大于a1;/当a=3时,其值为true不等于a5;/ a=5时,其值为false小于a1;/当a=6时,其值为false=小于等于a=大于等于a2;/当a为4时,其值true;&and逻辑与只当a和b都为0时,a & b的值0; a and b的值ture!=不等于判断左右的表达式是否不相等,a!=true/a的值为false|or逻辑或当a和b中一个不为0时,a | b的值为1,a or b的值为true;=全等判断左右表达式和数据类型是否相等!= 不全等判断左右的表达式和数据类型是否不相等“”定义字符串“abcde”add或+字符串连接a=”ab”add ”cd”;/a的值为“abcd”5.3.3 层次结构和路径1层次结构这里的层次结构是指编程的层次结构,即引用对象的层次结构。 图5-3-2 “场景”面板 图5-3-3 层(Level)的结构2点操作符和_root、_parent、this关键字(1)点操作符:在ActionScript中,点操作符“.”通常被用来指定一个对象或影片剪实例有关系的属性和方法。它也通常被用来标识一个影片剪辑实例或者变量的目标地址。点操作符的左边是对象或者影片剪辑实例的名称,点操作符的右边是它们的属性或者方法。(2)_root关键字:指主场景。(3)_parent关键字:指父一级对象。(4)this 关键字:指示当前影片剪辑实例和变量。3使用“插入目标路径”对话框直接加载路径在程序中,直接书写目标路径容易出错,Flash MX 2004提供了一个“插入目标路径”对话框,单击“动作”面板中的按钮,可调出“插入目标路径”对话框,如图5-2-7所示。4“影片浏览器”面板“影片浏览器”面板是用来管理Flash电影的所有元素,这些元素包括各种元件、图像、程序、层、帧等。单击“窗口”“其他面板”“影片浏览器”菜单命令,调出“影片浏览器”面板,如图5-3-4所示。单击该面板上的“自定义要显示的项目”按钮,调出“影片管理器设置”面板,如图5-3-5所示。通过面板中的复选框,可决定在“影片浏览器”面板中显示哪些元素。 图5-3-4 “影片浏览器”面板 图5-3-5 “影片管理器设置”面板5.3.4 “影片剪辑控制”和“转换”全局函数1“影片剪辑控制”全局函数“影片剪辑控制”函数可以在“全局函数”“影片剪辑控制”目录下找到。1duplicateMovieClip函数【格式】duplicateMovieClip(target,newname,depth)【功能】复制一个影片剪辑实例对象到舞台工作区指定层,并给它赋予一个新的名称。【参数】target给出要复制的影片剪辑元件的目标路径。newname给出新的影片剪辑实例的名称。depth给出新的影片剪辑元件所在层的号码。2removeMovieClip函数【格式】removeMovieClip(target)【功能】该函数用删除指定的对象,其中参数target是对象的目标地址路径。3on函数【格式】on(mouseEvent)【功能】用来设置鼠标和按键事件处理程序。mouseEvent参数是鼠标和按键事件的名称。4startDrag函数【格式1】startDrag(target);【格式2】startDrag(target,lock);【格式3】startDrag(target ,lock ,left , top , right, bottom);【功能】该函数用来设置鼠标可以拖曳舞台工作区的影片剪辑实例。【参数】target是要拖曳的对象,lock参数是是否以锁定中心拖曳,参数left(左边)、top(顶部)、right(右边)和bottom(底部)是拖曳的范围。在 中的参数是可选项。5stopDrag函数【格式】stopDrag()【功能】stopDrag函数没有参数,其功能是用来停止鼠标拖曳影片剪辑实例。6getProperty函数【格式】getProperty(my_mc, property);【功能】用来得到影片剪辑实例属性的值。【参数】括号内的参数my_mc是舞台工作区中的影片剪辑实例的名称,参数property是影片剪辑实例的属性名称,参看表5-3-3。表5-3-3 影片剪辑实例的属性表属性名称定 义_alpha透明度,以百分比的形式表示,100%为不透明,0%为透明_currentframe当前影片剪辑实例所播放的帧号_droptarget返回最后一次拖曳影片剪辑实例的名称_focusrect当使用Tab键切换焦点时,按钮实例是否显示黄色的外框。默认显示是黄色外框,当设置为0时,将以按钮元件的“弹起”状态来显示_framesloaded返回通过网络下载完成的帧的数目。在预下载时使用它_height影片剪辑实例的高度,以像素为单位_highquality影片的视觉质量设置:1为低,2为高,3为最好_name返回影片剪辑实例的名称_quality返回当前影片的播放质量_rotation影片剪辑实例相对于垂直方向旋转的角度。会出现微小的大小变化_soundbuftimeFlash中的声音在播放之前要经过预下载然后播放,该属性说明预下载的时间_target用于指定影片剪辑实例精确的字符串。在使用TellTarget时常用到_totalframes返回影片或者影片剪辑实例在时间轴上所有帧的数量_url返回该.swf文件的完整路径名称_visible设置影片剪辑实例是否显示:true为显示,false为隐藏_width影片剪辑实例的宽度,以像素为单位_x影片剪辑实例的中心点与其所在舞台的左上角之间的水平距离。影片剪辑实例在移动的时候,会动态地改变这个值,单位是像素。需要配合“信息”面板来使用_xmouse返回鼠标指针相对于舞台水平的位置_xscale影片剪辑元件实例相对于其父类实际宽度的百分比_y影片剪辑实例的中心点与其所在舞台的左上角之间的垂直距离。影片剪辑实例在移动的时候,会动态地改变这个值,单位是像素。需要配合“信息”面板来使用_ymouse返回鼠标指针相对于舞台垂直的位置_yscale影片剪辑实例相对于其父类实际高度的百分比7setProperty函数【格式】setProperty(target,property,value/expression)【功能】用来设置影片剪辑实例(target)的属性。【参数】target给出了影片剪辑实例在舞台中的路径和名称;Property是影片剪辑实例的属性,参看表5-3-3;value是影片剪辑实例属性的值;expression是一个表达式,其值是影片剪辑实例属性的值。8onClipEvent函数【格式】on(ClipEvent)【功能】用来设置影片剪辑事件处理程序。ClipEvent参数是影片剪辑事件的名称。2“转换函数”全局函数(1)Number函数【格式】Number (expression);【功能】将expression的值转换为数值。如果expression为逻辑值,当其值为true时,则返回1,否则返回0。如果expression为字符串,则会尝试将该字符串转换为指数形式的十进制数字,例如:5.125e-12。如果expression为未定义的变量(undefined),则返回0(对于Flash 6以前版本);或者为NaN(对于Flash 7版本)。expression可是字符串、数字、变量或表达式。(2)Object函数【格式】Object (expression);【功能】将expression的值转换为对象或建立空对象。参数expression可以是表达式。(3)String函数【格式】String (expression);【功能】将expression的值转换为字符串。expression可以是数字、逻辑值、变量、影片剪辑实例名称、对象或表达式。如果expression为影片剪辑实例名称,则返回该实例的路径(用斜杠标记法标记的路径)。【实例60】变换图像“变换图像”动画播放后一幅画面如图5-3-6所示。单击“放大”按钮,可使图像变大。单击“缩小”按钮,可使图像变小。单击“上移”按钮,即可使图像向上移动。单击“下移”按钮,可使图像向下移动。单击“左移”按钮,可使图像向左移动。单击“右移”按钮,可使图像向右移动。单击“顺时针旋转”按钮,可看使图像顺时针旋转。单击“逆时针旋转”按钮,可使图像逆时针旋转。该动画的制作方法如下。图5-3-6 “变换图像”动画播放后的一幅画面(1)设置舞台工作区的宽为600像素,高为400像素,背景色为浅蓝色。(2)创建并进入“图像”影片剪辑元件的编辑状态,导入一个风景图像。回到主场景。(3)将“图层1”图层的名称改为“图像框架”,选中“图像框架”图层第1帧,导入一幅框架图像,调整它的大小和位置,如图5-3-6所示。(4)在“图像框架”图层之上添加一个名称为“图像”的图层,选中“图像”图层第1帧,将“库”面板内的“图像”影片剪辑元件拖曳到舞台工作区内,使它的中心与舞台工作区内的框架图像的中心对齐。利用“属性”面板给“图像”影片剪辑实例命名为“TU”。(5)在“图像”图层之上添加一个名称为“遮罩”的图层,选中“遮罩”图层第1帧,绘制一幅蓝色的矩形图形,大小与位置正好与框架图像内框一样。(6)将鼠标指针移到“遮罩”图层的名字处,单击鼠标右键,调出图层快捷菜单,单击该快捷菜单中的“遮罩层”菜单命令。(7)在“遮罩”图层之上添加一个“按钮”的图层,选中“按钮”图层第1帧,再将按钮公用库内的几个按钮拖曳到舞台工作区内(其中两个按钮上的名字分别改为“放大”和“缩小”)。(8)分别给这些按钮实例命名为“”、“ANUP”、“ANDOWN”、“ANLEFT”、“ANRIGHT”、“ANROTAS”、“ANROTAN”、“ANFD”和“ANSX”。(9)单击选中“按钮”图层第1帧,在“动作”面板内输入如下程序。/向上移动影片剪辑TUANUP.onPress=function() setProperty(TU,_y,getProperty(TU,_y)-5)/向下移动影片剪辑TUANDOWN.onPress=function() setProperty(TU,_y,getProperty(TU,_y)+5)/向左移动影片剪辑TUANLEFT.onPress=function() setProperty(TU,_x,getProperty(TU,_x)-5)/向右移动影片剪辑TUANRIGHT.onPress=function() setProperty(TU,_x,getProperty(TU,_x)+5)/顺时针旋转影片剪辑TUANROTAS.onPress=function() setProperty(TU,_rotation,getProperty(TU,_rotation)+0.1)/逆时针旋转影片剪辑TUANROTAN.onPress=function() setProperty(TU,_rotation,getProperty(TU,_rotation)-0.1)/放大影片剪辑TUANFD.onPress=function() setProperty(TU,_xscale,getProperty(TU,_xscale)*1.01) setProperty(TU,_yscale,getProperty(TU,_yscale)*1.01) setProperty(TU,_x,getProperty(TU,_x)-10) setProperty(TU,_y,getProperty(TU,_y)-2)/缩小影片剪辑TUANSX.onPress=function() setProperty(TU,_xscale,getProperty(TU,_xscale)*0.99) setProperty(TU,_yscale,getProperty(TU,_yscale)*0.99) setProperty(TU,_x,getProperty(TU,_x)+10) setProperty(TU,_y,getProperty(TU,_y)+2)【实例61】电影文字2“电影文字2”动画的播放效果与【实例43】“电影文字1”动画播放效果一样。只是该动画是使用程序控制图像的移动。该动画的制作方法如下。(1)打开“【实例43】电影文字1.fla”Flash文档,再以名称“【实例61】电影文字2.fla”保存。选中“图层1”和“图层2”图层的第2帧以后的所有帧,删除这些帧,只剩下“图层1”和“图层2”图层的第1帧和第2帧。(2)将图像(宽620像素)转换为影片剪辑实例,给该实例命名为“TU”。调整“TU”影片剪辑实例内图像的中心点标记在图像的中心处,水平坐标X的初始值为620。(3)单击选中“图层1”第1帧,调出它的“动作-帧”面板,输入如下程序。setProperty(_root.TU
展开阅读全文