计算机图形图像与网页制作第10章.ppt

第10章网络游戏与交互式影片,10.1创建自定光标10.2获取鼠标位置10.3捕获按键10.4设置颜色值10.5创建声音控件10.6检测冲突10.7思考与练习,10.1创建自定光标,标准光标就是用户的鼠标指针在操作系统屏幕上的表示。通过使用在Flash中设计的光标来代替标准光标，可以将用户的鼠标运动更紧密地集成到影片环境中。本节的范例使用的是一个看起来如同大箭头的自定光标。不过，此功能的强大与否取决于我们制作各种形态自定光标的能力，例如射门的足球，或盖在沙发上可改变颜色的织物布样。,要创建自定光标，可在舞台上设计该光标的影片剪辑，然后在动作脚本中隐藏标准光标，并跟踪自定光标的移动。要隐藏标准光标，可使用内置Mouse对象的hide方法。要使用影片剪辑作为自定光标，可使用startDrag动作。要查看自定光标的动画演示，可用鼠标滑过后面的影片。创建自定光标的具体步骤如下：(1)创建一个要用作自定光标的影片剪辑。(2)在舞台上选择该影片剪辑实例。(3)如果此时没有看到“动作”面板，可选择“窗口”“动作”打开它。,(4)要隐藏标准光标，可在“动作”工具箱中单击“对象”类别，然后单击“影片”类别，再单击“Mouse”，之后单击“方法”，最后双击“hide”。代码如下：onClipEvent(load)Mouse.hide();(5)要应用新指针，可在“动作”工具箱中单击“动作”类别，然后单击“影片剪辑控制”，之后双击“startDrag”。,(6)要限制鼠标移动，可选择“表达式”框，并为目标键入this。然后选择“锁定鼠标到中央”和“限制为矩形”，最后输入值。例如，我们可能输入如下值：左：0上：46右：400下：280具体代码如下所示：onClipEvent(load)Mouse.hide();startDrag(this,true,0,46,400,280);,(7)选择“控制”“测试影片”来测试自定光标。当使用自定光标时，按钮仍然起作用。将自定光标放在时间轴的顶层是一个很好的方法，这样在影片中移动鼠标时，它就可以在按钮和其他对象的前面移动。,10.2获取鼠标位置,跟踪鼠标位置可使我们了解用户在影片中移动的信息。这些信息使我们能够把用户行为和影片事件联系起来。可以使用_xmouse和_ymouse属性找到影片中鼠标指针(光标)的位置。每个时间轴都有一个_xmouse和_ymouse属性，这些属性返回的是鼠标在其坐标系统内的位置，该位置始终是相对于注册点而言的。对于主时间轴(_level0)，注册点是在左上角。要查看主时间轴内的_xmouse和_ymouse属性和影片剪辑时间轴，可运行后面的影片并移动鼠标。右侧已更新的坐标反映出在这个小的影片剪辑中鼠标相对于注册点的位置。左侧的坐标反映出在大的主影片中该鼠标的位置。,1获取主时间轴内的当前鼠标位置(1)创建两个动态文本框，然后将它们命名为x_pos和y_pos。(2)如果此时没有看到“动作”面板，可选择“窗口”“动作”打开它。(3)要返回主时间轴内的鼠标位置，可在_level0影片的任意帧中添加如下代码：x_pos=_root._xmouse;y_pos=_root._ymouse;,变量x_pos和y_pos被用作保留鼠标位置值的容器。可以在文档的任何脚本中使用这些变量。在下面的代码中，用户每次移动鼠标时都会更新x_pos和y_pos的值：onClipEvent(mouseMove)x_pos=_root._xmouse;y_pos=_root._ymouse;,2获得影片剪辑内的当前鼠标位置(1)创建影片剪辑。(2)在舞台上选择该影片剪辑实例，并使用属性检查器将它命名为myMovieClip。(3)如果此时没有看到“动作”面板，可选择“窗口”“动作”打开它。(4)使用影片剪辑的实例名称来返回主时间轴内的鼠标位置。例如，下面的语句可以放置在_level0影片中任意时间轴上，从而返回myMovieClip实例中的_ymouse位置：x_pos=_root.myMovieClip._xmousey_pos=_root.myMovieClip._ymouse该代码返回鼠标相对于注册点的_xpos和_ypos值。,(5)选择“控制”“测试影片”来测试影片。也可以通过在剪辑事件中使用_xmouse和_ymouse属性来确定鼠标在影片剪辑内的位置，如下面的代码所示：onClipEvent(enterFrame)xmousePosition=_xmouse;ymousePosition=_ymouse;,10.3捕获按键,我们可以使用内置的Key对象的方法来检测用户上次按下的键。Key对象不需要构造器函数；要使用它的方法，只需调用该对象自身即可，代码如下：Key.getCode();键盘上的每一个实际的按键都有一个虚拟键控代码。例如，向左箭头键的虚拟键控代码为37。通过使用虚拟键控代码，可以确保影片的控制在每个键盘上都相同，而不用考虑语言或平台。要获得上次所按键的虚拟键控代码，可使用getCode方法。要获得上次所按键的ASCII值，可使用getAscii方法。,ASCII(美国信息交换标准码)值分配给每个字符集的前127个字符。ASCII值提供了有关屏幕上字符的信息。例如，字母“A”和字母“a”有不同的ASCII值。要确定使用哪些键并确定它们的虚拟键控代码，可使用下面任一种方式：参阅键盘键和键控代码值中的键控代码列表。使用Key对象常数，即在“动作”工具箱中，单击“对象”类别，然后单击“影片”，之后单击“Key”，最后单击“常数”。,指定下面的剪辑动作，然后选择“控制”“测试影片”，最后按下所需的键。onClipEvent(keyDown)trace(Key.getCode();这样，所需键的键控代码会显示在“输出”窗口中。通常是在事件处理函数内使用Key对象方法。在下面的影片中，使用箭头键移动汽车。Key.isDown方法表明了正被按住的键是向左箭头、向右箭头、向上箭头，还是向下箭头。事件处理函数onEnterFrame通过if语句确定Key.isDown(keyCode)的值。根据该值，处理函数会指示FlashPlayer更新汽车的位置，并显示方向。,下面的步骤用一个汽车示例显示了如何创建一个能被键盘激活的影片剪辑：(1)在舞台上创建一个影片剪辑，该影片剪辑将会随键盘箭头的活动而移动。在此示例中，影片剪辑的实例名称为car。(2)在舞台上创建一个随汽车方向更新的动态文本框。使用属性检查器，给它指定一个变量名display。注意：不要把变量名和实例名混淆。,(3)在时间轴上选择第1帧，如果没有看到“动作”面板，则选择“窗口”“动作”来打开它。(4)要设置每次按键时汽车穿过屏幕的速度，可在“动作”工具箱中单击“动作”类别，然后单击“变量”，之后双击setvariable，并将该变量命名为speed。最后选中“值”的“表达式”选项，输入一个值10。(5)要创建处理事件及其后续行为的事件处理函数，可在“动作”工具箱中单击“对象”类别，然后单击“影片”、“MovieClip”和“事件”，最后双击onEnterFrame，输入car作为对象名称。,(6)在“参数”文本框单击以放置插入点。接着单击“动作”类别，之后单击“变量”类别，最后双击with，输入car作为对象名称。代码如下所示：speed=10;car.onEnterFrame=function()with(car);(7)要向事件处理函数中添加条件，可在“动作”工具箱中单击“动作”类别，然后单击“条件/循环”，最后双击if。,(8)在“条件”文本框单击以放置插入点。单击“对象”类别，然后单击“影片”、“Key”和“方法”，之后双击isDown。接着单击“对象”类别，再单击“影片”、“Key”和“常数”，之后双击键控代码的RIGHT。代码如下：speed=10;car.onEnterFrame=function()with(car)if(Key.isDown(Key.RIGHT);接下来，如果Key.isDown(Key.RIGHT)评估为true，则if语句需要参数才能执行。换句话说，如果按下向右箭头键，则汽车应向右移动，即_x属性应该增大。同时，单词Right应该显示在影片中，所以动态文本框需要做相应的更新。,(9)要输入条件语句，可在“动作”工具箱中单击“运算符”类别，然后单击“赋值”，并将“+=”拖动到脚本窗格的第5行(在if语句的两个括号之间)。在“表达式”文本框中输入下面的代码：_x+=speed；(10)要将汽车限制在影片的右边缘之内，可添加一条嵌套if语句。在动作工具箱中，单击动作类别，然后单击条件/循环，之后将if语句拖到脚本窗格的第6行。在条件文本框中输入以下代码：_x339；,(11)单击“动作”类别，然后单击“变量”，之后双击setvariable。在“表达式”文本框中输入以下代码：_x=339；,(12)要更新动态文本框，可在“动作”工具箱中单击“动作”类别，然后单击“变量”，之后将setvariable拖到脚本窗格的第9行。在“变量”文本框中输入_root.display，并在“值”文本框中输入Right。代码应该如下所示：speed=10;car.onEnterFrame=function()with(car)if(Key.isDown(Key.RIGHT)x+=speed;if(_x=339)_x=339;root.display=Right;,(13)要添加向左、向上和向下移动，可在“动作”工具箱中单击“动作”类别，然后单击“条件/循环”，之后将elseif拖到脚本窗格的第10行，接着重复步骤(8)(11)。按照如下代码更改参数的详细信息：,elseif(Key.isDown(Key.LEFT)_x-=speed;if(_x244)_y=244;_root.display=Down;,要确保将代码放在正确的行上(第10行到第28行)。关闭外层if语句的括号和关闭事件处理函数的括号应该跟在第29行和第30行后面。(14)选择“控制”“测试影片”来测试影片。,10.4设置颜色值,可以使用内置Color对象的方法来调节影片剪辑的颜色。setRGB方法会为该对象指定十六进制RGB(红、绿、蓝)值。下面的示例就使用setRGB根据用户输入来更改对象的颜色。设置影片剪辑的颜色值的具体步骤如下：(1)选择舞台上的一个影片剪辑。(2)在检查器属性中，输入carColor作为实例名称。(3)创建一个名为colorchip的按钮，接着在舞台上放置该按钮的四个实例，并将它们分别命名为red、green、blue和black。,(4)在主时间轴上选择第1帧，然后选择“窗口”“动作”。(5)要创建一个新的Color对象，可在“动作”工具箱中单击“对象”类别，然后单击“影片”和“Color”，之后双击newColor，之后为目标选择_root.carColor。在“表达式”文本框中输入myColor=。代码如下所示：myColor=newColor(_root.carColor);(6)要将一个事件与一个对象关联起来，可在“动作”工具箱中单击“对象”类别，然后单击“影片”、“MovieClip”和“事件”，之后双击onRelease。在“对象”文本框中输入按钮实例名称，可以是_root.red、_root.green、_root.blue或者是_root.black。,(7)在“动作”工具箱中，单击“对象”类别，然后单击“影片”、“Color”、“方法”，之后双击setRGB。在“对象”文本框中输入Color对象名myColor。在“参数”文本框中输入用十六进制数表示的颜色，如表9.4所示。,表9.4用十六进制数表示的颜色,(8)对于这四种颜色重复步骤(6)到步骤(7)，代码如下所示：myColor=newColor(_root.carColor)_root.blue.onRelease=function()myColor.setRGB(0 x0000ff);_root.red.onRelease=function()myColor.setRGB(0 xff0000);_root.green.onRelease=function()myColor.setRGB(0 x00ff00);_root.black.onRelease=function()myColor.setRGB(0 x000000);,(9)选择“控制”“测试影片”来测试影片剪辑的颜色。,10.5创建声音控件,可以使用内置Sound对象控制影片中的声音。要使用这种方法，必须先创建一个新的Sound对象。然后可以使用attachSound方法将库中的声音在影片运行时插入影片。要查看声音控件的动画演示，可单击“播放”按钮，然后调节音量和面板。Sound对象的setVolume方法控制着音量，而setPan方法则调节声音的左右平衡。,1将声音附加到时间轴上(1)选择“文件”“导入”来导入一种声音。(2)从库中选择声音，右键单击，然后在弹出菜单中选择“链接”。(3)选择“为动作脚本导出”和“在第一帧导出”，然后给它指定标识符a_thousand_ways。(4)在舞台上添加一个按钮，然后将它命名为playButton。(5)在舞台上添加一个按钮，然后将它命名为stopButton。(6)在舞台上添加一个影片剪辑，然后将它命名为speaker。(7)在主时间轴上选择第1帧，然后选择“窗口”“动作”。,(8)如果要等到用户选择“播放”才播放影片，可在“动作”工具箱中单击“对象”类别，然后单击“影片”、“Sound”和“方法”，之后双击stop，并在“对象”文本框中输入_root.speaker。(9)要创建一个新的Sound对象，可在“动作”工具箱中单击“对象”类别，然后单击“影片”，之后单击“Sound”，最后双击newSound，并在“表达式”文本框中输入song=。(10)在“动作”工具箱中单击“对象”类别，然后单击“影片”、“Sound”和“方法”，之后双击attachSound。在“对象”文本框中输入song，并在“参数”文本框中输入a_thousand_ways(包括引号)。(11)要开始播放歌曲，可在“动作”工具箱中单击“对象”类别，然后单击“影片”、“Sound”和“方法”，之后双击start。,(12)要激活扬声器，可在“动作”工具箱中单击“对象”类别，然后单击“影片”、“MovieClip”和“方法”，之后双击play，并在“对象”文本框中输入_root.speaker。代码应该如下所示：_root.speaker.stop();song=newSound();song.attachSound(a_thousand_ways);_root.playButton.onRelease=function()song.start();_root.speaker.play();,(13)要在歌曲结束时停止扬声器，可单击“对象”类别，然后单击“影片”、“Sound”和“事件”，之后双击onSoundComplete。在“对象”文本框中输入song，并在“方法”文本框中输入onSoundComplete。,(14)在“动作”工具箱中单击“对象”类别，然后单击“影片”、“Sound”和“方法”，之后双击stop，并在“对象”文本框中输入_root.speaker。代码如下所示：_root.speaker.stop();song=newSound();song.attachSound(a_thousand_ways);_root.playButton.onRelease=function()song.start();_root.speaker.play();song.onSoundComplete=function()_root.speaker.stop();,(15)选择“控制”“测试影片”来试听声音。,2创建滑动的音量控件(1)将某个按钮拖到舞台上。(2)选择该按钮，然后选择“插入”“转换为元件”。选择影片剪辑行为时要小心。这样创建了一个在第一帧中带有按钮的影片剪辑。(3)选择该影片剪辑，然后选择“编辑”“编辑元件”。(4)选择该按钮，然后选择“窗口”“动作”。,(5)输入下列动作：on(press)startDrag(,false,left,top,right,bottom);on(release)stopDrag();startDrag参数left、top、right和bottom是在剪辑动作中设置的变量。(6)选择“编辑”“编辑文档”返回到主时间轴。(7)在舞台上选择影片剪辑。,(8)输入下列动作：onClipEvent(load)top=_y;bottom=_y;left=_x;right=_x+100;_x+=100;onClipEvent(enterFrame)_root.song.setVolume(_x-left);(9)选择“控制”“测试影片”来使用音量滑块。,3创建滑动的平衡控件(1)将某个按钮拖到舞台上。(2)选择该按钮，然后选择“插入”“转换为元件”。选择该影片剪辑属性。(3)选择该影片剪辑，然后选择“编辑”“编辑元件”。(4)选择该按钮，然后选择“窗口”“动作”。,(5)输入下列动作：on(press)startDrag(,false,left,top,right,bottom);dragging=true;on(release,releaseOutside)stopDrag();dragging=false;startDrag参数left、top、right和bottom是在剪辑动作中设置的变量。,(6)选择“编辑”“编辑文档”返回到主时间轴。(7)在舞台上选择影片剪辑。,(8)输入下列动作：onClipEvent(load)top=_y;bottom=_y;left=_x-50;right=_x+50;center=_x;onClipEvent(enterFrame)if(dragging=true)_root.s.setPan(_x-center)*2);,(9)选择“控制”“测试影片”来使用平衡滑块。,10.6检测冲突,MovieClip对象的hitTest方法可检测影片中的冲突。它检查某个对象是否与影片剪辑有冲突，然后返回一个布尔值(true或false)。一般在两种情况下，我们想知道是否已经发生了冲突：一种情况是测试用户是否已经到达舞台上的某个特定静态区域；另一种情况是确定影片剪辑何时接触到另一个影片剪辑。利用hitTest方法，可以确定这些结果。,可以使用hitTest方法的参数来指定舞台上某个点击区域的x和y坐标，或者使用另一个影片剪辑的目标路径作为点击区域。在指定x和y时，如果由(x,y)标识的这一点是非透明点，那么hitTest返回true。当目标传递给hitTest时，会对两个影片剪辑的边框进行比较。如果它们重叠，hitTest返回true；如果两个边框没有相交，hitTest返回false。让鼠标滑过影片中的该形状来测试冲突。使用hitTest方法的结果是返回到文本字段中。也可以使用hitTest方法来测试两个影片剪辑之间的冲突。要测试冲突，则需拖动汽车影片剪辑，使它接触停车区域影片剪辑。该方法的结果是返回到文本字段中。,1在影片剪辑和舞台上的某一点之间执行冲突检测(请参阅shape_flag.fla)(1)选择舞台上的一个影片剪辑。(2)在舞台上创建一个动态文本框，然后在属性检查器中输入status作为实例名称。(3)如果此时没有看到“动作”面板，可选择“窗口”“动作”打开它。(4)在“动作”工具箱中，单击“动作”类别，然后单击“变量”，之后双击setvariable，并将该变量命名为_root.status。接着选中“值”的“表达式”复选框，然后在“值”文本框中输入如下代码：hitTest(_root._xmouse,_root._ymouse,true)Flash会自动添加onClipEvent处理函数。,(5)突出显示onClipEvent动作，然后选择enterFrame作为事件。(6)选择“控制”“测试影片”，然后让鼠标滑过影片剪辑来测试冲突。只要鼠标滑过不透明的像素，就会显示true。,2执行两个影片剪辑之间的冲突检测(请参阅hit_test.fla)(1)把两个影片剪辑拖到舞台上，然