搜索
5Authorware7动画与交互的实现5.1动画设计的基本步骤5.2移动图标的属性5.3五种动画设计方式5.4利用变量控制动画5.5交互功能的实现5.1动画设计的基本步骤图5-1运行画面图5-2程序暂停出现【属性：移动图标】对话框图5-3【版面布局】标签5.2移动图标的属性图5-4五种动画设计方式图5-5【属性：移动图标】对话框5.3五种动画设计方式5.3.1指向固定点图5-6【版面布局】标签图5-7【移动】标签通过实例来验证一下选择不同的【执行方式】时程序的运行情况图5-8输入的文本5.3.2指向固定直线上的某点图5-9【版面布局】标签图5-10【移动】标签5.3.3指向固定区域内的某点图5-11【版面布局】标签下面做一个鼠标跟随动画的练习：1)建立一个新文件，在流程线上添加一个显示图标，命名为“圆形”。2)双击“圆形”显示图标，在演示窗口中画一个红色的圆。3)向流程线上添加一个移动图标，并命名为“跟随”。4)运行程序，当程序遇到空白的移动图标后会自动停止，并弹出【属性：移动图标】对话框。5)在对话框中选择【指向固定区域内的某点】方式，然后拾取演示窗口中的红色的圆，通过拖曳鼠标确定移动区域。6)在【目的地】选项中输入两个系统变量：cursorX和cursorY。这两个变量的作用是让红色的圆捕捉光标位置，如图5-12所示。图5-12【版面布局】标签7)在【移动】标签中设置各项参数，如图5-13所示。图5-13【移动】标签8)关闭对话框。运行程序时就会发现红色的圆跟随鼠标移动。5.3.4指向固定路径的终点图5-14【移动】标签图5-15【版面布局】标签图5-16创建的运动路径图5-17圆滑路径5.3.5指向固定路径上的任意点图5-18【版面布局】标签5.4利用变量控制动画使用变量来控制对象的循环运动。1)建立一个新文件，在流程线上添加一个显示图标，命名为“圆形”，然后双击“圆形”显示图标，在演示窗口中画一个红色的圆形。2)向流程线上添加一个移动图标，并命名为“循环”。3)双击“循环”移动图标，弹出【属性：移动图标】对话框。4)在对话框中选择【指向固定路径的终点】方式，拾取演示窗口中的红色圆形，通过拖曳鼠标确定运动路径。然后在【移动时】选项中输入“x=1”，其它设置如图5-19所示。图5-19设定运动条件5)单击按钮，如果变量“x”没有在其它地方使用过，则弹出【新的变量】对话框，直接单击按钮即可。6)向流程线上添加一个计算图标，双击该图标，在打开的计算窗口中输入“x=1”后关闭窗口。7)运行程序，可以看见圆形在指定的路径上往复不停地旋转。5.5交互功能的实现5.5.1认识交互图标图5-20【响应类型】对话框图5-21分支结构5.5.2按钮响应1.使用按钮响应1)新建一个文件。2)向流程线上添加一个计算图标，命名为“窗口”。3)向流程线上添加一个交互图标，并命名为“交互”。4)再拖曳一个计算图标至交互图标的右侧，在弹出的【响应类型】对话框中选择【按钮】选项。5)单击按钮，则在设计窗口中建立了交互分支结构，将计算图标命名为“退出”。6)双击“退出”计算图标，在打开的计算窗口中输入“Quit（）”。7)关闭计算窗口。图5-22计算窗口2.设置按钮响应属性图5-23【属性：响应】对话框图5-25设置按钮始终有效3.改变按钮的大小、位置与外观图5-26【按钮】对话框图6-27图5-28【按钮编辑】对话框4.按钮响应实例下面，使用按钮响应制作一个简单的多媒体课件。1)建立一个新文件。在流程线上添加一个计算图标，命名为“窗口”。2)双击流程线上的“窗口”计算图标，将演示窗口大小设为（520，280）。3)向“窗口”计算图标的下方添加一个显示图标，命名为“背景”。4)用前面学过的方法，向“背景”图标中导入一幅图片作为背景。5)向流程线上添加一个交互图标，并命名为“交互”。6)拖曳一个计算图标至交互图标的右侧，在弹出的【响应类型】对话框中选择【按钮】选项，然后单击按钮，将图标命名为“退出程序”。7)在交互图标右侧添加四个群组图标，并分别命名为“复习旧课”、“导入新课”、“讲授内容”和“请你欣赏”。这时不再弹出【响应类型】对话框，将使用第一次设置的响应类型，该流程线如图5-29所示。图5-29流程线8)运行程序，如果发现按钮分布不符合要求，可以双击交互图标，在演示窗口中调整按钮的位置和大小。9)调整按钮后运行程序，结果运行画面如图5-30所示。图5-30运行画面10)用前面学过的方法，为每一个按钮选择手形光标。运行程序时，当光标指向按钮时将出现手形光标。11)双击“复习旧课”群组图标，打开其二级流程线。12)向该流程线上添加一个显示图标，在显示图标的演示窗口中绘制一个小的“演示窗”作为复习旧课的承载窗口。13)用户可以根据爱好和需要在流程线上添加其它图标，以丰富课件，如文字、音乐、电影等。在此我们添加一个显示图标，在其演示窗口中输入“温习单词”、“good——好的”、“bad——坏的”等内容。14)运行程序时，单击按钮，将出现如图5-31所示的画面。图5-31程序运行画面15)用同样的方法，可以为其它群组图标设置所需的内容。5.5.3热区响应1.使用热区响应将前面用按钮控制的课件修改为用热区控制的课件。其具体的操作步骤如下：1)打开前面保存的课件。2)在“复习旧课”群组图标的响应类型标记上双击鼠标左键，弹出【属性：响应】对话框。3)在对话框的【类型】选项列表中选择【热区响应】选项。4)单击按钮，可以看到“复习旧课”群组图标的响应类型标记发生了变化，由按钮响应的形状变为热区响应的形状。5)运行程序，可以发现画面中的按钮消失了，但当光标指向按钮所在区域时仍将变为手形光标（如图5-32所示），单击鼠标左键将出现“复习旧课”的内容。图5-32运行画面6)如果需要修改热区，可以双击交互图标，打开演示窗口。7)单击“复习旧课”热区标志，则热区周围出现八个控制点。将光标指向控制点按住鼠标左键拖曳，可以改变热区的大小；将光标指向热区标志后按住鼠标左键拖曳，可以改变热区的位置。如果仍要在演示窗口中出现“复习旧课”字样，可以重新输入“复习旧课”字样，然后用热区将其覆盖即可，如图5-33所示。图5-33修改热区标志8)用同样的方法修改其它的按钮。运行程序时的画面如图5-34所示。图5-34运行画面2.设置热区响应的属性图5-35【响应】标签图5-36选择【重试】时的流程走向图5-37选择【继续】时的流程走向图5-38选择【退出交互】时的流程走向图5-39选择【返回】时的流程走向5.5.4热对象响应制作该课件的具体操作步骤如下：1)建立一个新文件。在流程线上添加一个计算图标，命名为“窗口”，并将演示窗口的大小设为（420，280）。2)在“窗口”图标下面添加三个显示图标，分别命名为“牛”、“马”和“羊”，并分别导入相应的图片，设置各图片的遮盖模式为【透明】。3)在流程线上选择这三个显示图标，单击菜单栏中的【修改】/【群组】命令，将三个显示图标组合为一个群组图标，并将其命名为“对象”。4)在“对象”群组图标的下面添加一个交互图标，命名为“介绍”。5)在交互图标的右侧添加一个群组图标，在弹出的【响应类型】对话框中选择【热对象响应】类型。将该群组图标命名为“介绍牛”，此时的流程线如图5-40所示。6)双击“介绍牛”群组图标，在其二级流程线上添加一个显示图标和一个声音图标(如图5-41所示)，并分别载入一段文字和解说词。7)运行程序，弹出【属性：响应】对话框，单击演示窗口中的“牛”图片，将它的【类型】定义为热对象，则“牛”图片出现在对话框左上角的预览窗口中，同时其图标名称出现在【热对象】选项文本框中，说明该对象已被选中，如图5-42所示。8)在【匹配】选项中选择【指针在对象上】选项，再用前面介绍的方法将【鼠标指针】设置为手形光标。9)单击按钮，关闭对话框。10)运行程序，当光标移到“牛”图片上时就会出现文字和解说词，如图5-43所示。图5-40程序流程线图5-41二级流程线图5-42定义热对象图5-43程序运行画面11)用同样的方法，可以为“马”和“羊”进行上述设置，其最终程序如图5-44所示。图5-44程序流程线5.5.5目标区响应图5-45运行画面使用目标区响应制作该课件的操作步骤如下：1)建立一个新文件。在流程线上添加一个计算图标，命名为“窗口”，并将演示窗口的大小设为（420，280）。2)在“窗口”图标的下面添加一个显示图标，命名为“目标区域”。3)双击“目标区域”图标，在打开的演示窗口中绘制一个简单的上下窗格。在上方的窗格中输入“将右侧的单词拖放到左侧相应的图片上”；在下方窗格导入三幅图片，如图5-46所示。4)在“目标区域”图标的下方添加一个显示图标，命名为“苹果”。5)双击“苹果”图标，在打开的演示窗口中输入单词“apple”。图5-46演示窗口内容6)用同样的方法，在流程线上再添加两个显示图标，并分别命名为“猪”和“鸟”，然后在其演示窗口中分别输入单词“pig”和“bird”，此时程序的流程线如图5-47所示，运行的画面如图5-48所示。7)在“鸟”图标的下方添加一个交互图标，命名为“判断”。8)向交互图标的右侧添加一个群组图标，在弹出的【响应类型】对话框中选择【目标区】响应，将该图标命名为“鸟正确”；在“鸟正确”图标的右侧再添加一个群组图标，命名为“鸟错误”，如图5-49所示。图5-47程序流程线图5-48运行画面图5-49程序流程线10)根据对话框的提示，单击演示窗口中的“bird”单词作为目标对象，则虚线框将自动附着到单词上。再根据对话框的提示，将“bird”单词（注意不是虚线框）拖到鸟图片上，然后调整虚线框使之完全包围鸟图片，如图5-50所示。图5-50设定目标区域11)在【目标区】标签下的【放下】选项中选择【在中心定位】，注意此处不选择【允许任何对象】选项，以便使本响应只对“鸟”有效。12)在【响应】标签下的【状态】选项中选择【正确响应】选项。13)单击按钮，又弹出另一个【属性：响应】对话框，这是“鸟错误”分支响应的属性对话框。此处仍然选择“bird”单词为目标对象，然后拖动“bird”单词到演示窗口的中央位置，调整虚线框使之包围演示窗口的下方窗格，如图5-51所示。图5-51设定目标区域14)在【目标区】标签下的【放下】选项中选择【返回】选项，在【响应】标签下的【状态】选项中选择【错误响应】选项。15)单击按钮，关闭对话框。此时，主流程线上的“鸟正确”的前面多了一个“+”号，“鸟错误”的前面多了一个“-”号，如图5-52所示。16)双击“鸟正确”群组图标，在打开的二级流程线上添加一个显示图标，在其【演示窗口】中输入“移动正确”字样。再添加一个计算图标，在打开的计算窗口中输入“Movable@鸟:=FALSE”，如图5-53所示。图5-52程序流程线图5-53设置二级流程线17)打开“鸟错误”群组图标，在二级流程线上添加一个显示图标，在其演示窗口中输入“移动错误，请再试一次”的提示文字。18)运行程序时可以发现，当单词移动正确时，将显示移动正确的提示，并且单词不能再被移动；当单词移动错误时，将返回原来的位置，同时出现移动错误的提示。19)用同样的方法，分别建立“apple”和“pig”两个单词的响应分支。20)在交互图标的最右侧再添加一个群组图标。21)双击其响应类型标记，打开【属性：响应】对话框，在【类型】选项中选择【条件响应】类型。22)在【条件】标签的【条件】文本框中输入变量“AllCorrectMatched”，该变量用于定义当所有正确响应都实现时，变量为“真”，否则为“假”。在【自动】选项列表中选择“为真”选项，该选项用于定义当条件“为真”时系统自动执行此分支，如图5-54所示。23)在【响应】标签下【分支】选项中选择【退出交互】选项。24)单击按钮，关闭对话框。25)打开该群组图标，在其二级流程线上添加一个显示图标，输入“全部正确，祝贺你！”的字样；再添加一个等待图标，设为等待3秒；最后再用一个计算图标退出程序，整个课件的