Authorware课件开发――交互课件开发.ppt

《Authorware课件开发――交互课件开发.ppt》由会员分享，可在线阅读，更多相关《Authorware课件开发――交互课件开发.ppt（82页珍藏版）》请在三一办公上搜索。

1、,第六章第2小章 动画与交互的实现,6-2.1 动画设计的基本步骤6-2.2 移动图标的属性6-2.3 五种动画设计方式6-2.4 利用变量控制动画 6-2.5 交互功能的实现,6-2.1 动画设计的基本步骤,以一个移动的小企鹅图像为例，讲解动画设计的基本步骤。1）建立一个新文件，向流程线上添加一个计算图标，命名为“重设窗口”，并将演示窗口设定为（500，500）。2）向流程线上添加一个显示图标，命名为“企鹅”，向其中导入一幅企鹅图片。3）向流程线上添加一个移动图标，将其命名为“移动”。4）运行程序，当程序遇到移动图标后会自动停止，并打开【属性：移动图标】面板，如后图所示。,程序暂停并出现【属

2、性：移动图标】对话框,7）根据面板右侧的提示，单击演示窗口中的“企鹅”，拾取运动对象，则“企鹅”成为被选中的运动对象。这时，面板中的提示信息发生了改变，如下图所示。,【属性：移动图标】对话框,8）根据属性面板的提示，在演示窗口中将“企鹅”拖动到目的地。,6-2.2 移动图标的属性,五种动画设计方式,在Aurthorware的移动图标中，用户可以使用五种不同的动画设计方式，如下图所示。,【属性：移动图标】面板,6-2.3 五种动画设计方式,6-2.3.1 指向固定点,【属性：移动图标】面板,通过实例来验证一下选择不同的【执行方式】时程序的运行情况。1）继续上一节制作的“小企鹅移动”的例子，在移动

3、图标的下面添加一个显示图标，命名为“文字”。2）双击“文字”图标，在打开的演示窗口中输入“同步方式验证”，如后图所示。,输入的文本,3）双击“移动”图标，打开【属性：移动图标】面板，设置【执行方式】为“等待直到完成”。4）运行程序，可以看到企鹅移动完成后才出现文字。5）在【属性：移动图标】面板中重新设置【执行方式】为“同时”。6）运行程序，可以看到企鹅移动的同时出现了文字。,6-2.3.2 指向固定直线上的某点,【属性：移动图标】面板,6-2.3.3 指向固定区域内的某点,【属性：移动图标】面板,下面做一个鼠标跟随动画的练习：1)建立一个新文件，向流程线上添加一个计算图标，命名为“重设窗口”，

4、并将演示窗口设定为（300，200）。2)在流程线上添加一个显示图标，命名为“圆形”。双击“圆形”显示图标，在演示窗口中画一个红色的圆。3)向流程线上添加一个移动图标，并命名为“跟随”。,4)运行程序，当程序遇到空白的移动图标后会自动停止，并弹出【属性：移动图标】面板。5)在面板中选择【指向固定区域内的某点】方式，然后拾取演示窗口中的红色的圆，通过拖曳鼠标确定移动区域。6)在【目标】选项中输入两个系统变量：cursorX和cursorY。这两个变量的作用是让红色的圆捕捉光标位置。7)在面板中设置各项参数，如后图所示。8）运行程序时就会发现红色的圆跟随鼠标移动。,【属性：移动图标】面板,6-2.

5、3.4 指向固定路径的终点,【属性：移动图标】面板,6-2.3.5 指向固定路径上的任意点,【属性：移动图标】面板,6-2.5 交互功能的实现,6-2.5.1 认识交互图标,建立交互分支结构的具体操作步骤：1）建立一个新文件。2）向流程线上添加一个交互图标，命名为“交互”。3）向交互图标的右侧添加一个计算图标，释放鼠标后将出现一个交互分支结构，并同时弹出【交互类型】对话框，如后图所示。,【交互类型】对话框,4）在【交互类型】对话框中选择所需的交互类型。5）单击 按钮，则在设计窗口中建立了相应的交互分之结构，将计算图标命名为“计算”，如下图所示。,6-2.5.2 按钮交互,1.使用按钮交互,制作

6、一个能使程序退出演示窗口的按钮，具体步骤如下：1)新建一个文件。2)向流程线上添加一个计算图标，命名为“重设窗口”。3)双击该计算图标，在打开的计算窗口中输入语句“ResizeWindow(320,280)”，重设演示窗口的大小。4)向流程线上添加一个交互图标，并命名为“交互”。5)再拖曳一个计算图标至交互图标的右侧，在弹出的【交互类型】对话框中选择【按钮】选项。,6)单击 按钮，则在设计窗口中建立了交互分支结构，将计算图标命名为“退出”。7)双击“退出”计算图标，在打开的计算窗口中输入“Quit（）”语句后 关闭计算窗口，如下图所示。,8)运行程序时可以看到，在空白的演示窗口中有一个 按钮，

7、单击该按钮可以结束程序运行。,2.设置按钮交互属性,1)在设计窗口中双击按钮交互类型标记 打开【属性：交互图标】面板，如下图。,2)在面板的左侧可以预览到按钮形状；单击【按钮.】按钮，可以在打开的【按钮】对话框中编辑按钮。3)在面板的【按钮】标签中可以设置按钮的各种属性。,设置按钮始终有效,4)在面板的【响应】标签中提供了对响应分支的各种设计。例如：选择了【永久】选项后，就可以定义按钮始终有效，同时我们发现设计窗口中的交互图标下面又出现了主流程线，如下图。,3.改变按钮的大小、位置与外观,单击【属性：交互图标】面板中的【按钮】，弹出【按钮】对话框，如下图。,单击【添加】或者【编辑】，打开【按钮

8、添加】或【按钮编辑】对话框，如下图。,4.按钮响应实例 下面，使用按钮响应制作一个简单的多媒体课件。1)建立一个新文件。在流程线上添加一个计算图标，命名为“窗口”。2)双击流程线上的“窗口”计算图标，将演示窗口大小设为（500，200）。3)向“窗口”计算图标的下方添加一个显示图标，命名为“题目”。,4)双击“题目”显示图标，打开演示窗口，输入一道题目，如下图，然后关闭演示窗口。,5)向流程线上添加一个交互图标，并命名为“交互”。6)拖曳一个显示图标至交互图标的右侧，在弹出的【交互类型】对话框中选择【按钮】选项，然后单击【确定】按钮，将图标命名为“A)美国”。7)双击交互类型标记，在打开的【属

9、性：交互图标】面板中单击【按钮】，在弹出的【按钮】对话框中选择如下图所示的按钮并确认。,8)继续向交互图标的右侧添加三个显示图标，并命名为“B)英国”、“C)法国”、“D)中国”。此时流程线如下图。,9)运行程序，如果发现按钮分布不合要求，可以直接在演示窗口中调整按钮的位置，调整后的效果如下图。,10)为每一个按钮选择手形光标。运行程序时，当光标指向按钮时将出现手形光标。11)依次双击交互图标右侧的显示图标，分别在各显示图标的演示窗口中输入汉字“正确”、“错误”、“错误”、“错误”。至此，一个由按钮控制的简单多媒体课件制作完成。运行程序时，当选择其中的某一个答案时，程序将自动判断对错。,6-2

10、.5.3 热区域交互,1.使用热区域交互,将前面用按钮控制的课件修改为用热区控制的课件。其具体的操作步骤如下：1)打开前面保存的课件。2)在“A)美国”分支的交互类型标记上双击鼠标左键，弹出【属性：交互图标】面板。3)在面板的【类型】下拉列表中选择【热区域】选项。这时可以看到“A)美国”分支的交互类型标记发生了变化，由按钮交互的形状变为热区域交互的形状。,4)运行程序，可以发现画面中的按钮消失了，但当光标指向按钮所在区域时仍将变为手形光标，单击鼠标左键将出现“正确”的提示，如下图。,运行画面,5)如果需要修改热区域，可以双击交互图标，打开演示窗口。6)单击“A)美国”热区域标志，则热区域周围出

11、现八个控制点。将光标指向控制点按住鼠标左键拖曳，可以改变热区域的大小；将光标指向热区标志后按住鼠标左键拖曳，可以改变热区的位置。如果仍要在演示窗口中出现“A)美国”字样，可以重新输入“A)美国”字样，然后用热区域将其覆盖即可。,运行画面,7)用同样的方法修改其他按钮。运行程序时的画面如下图。,2.设置热区域交互的属性,【响应】标签,选择【重试】时的流程走向,选择【继续】时的流程走向,选择【退出交互】时的流程走向,选择【返回】时的流程走向,6-2.5.4 热对象交互,制作该课件的具体操作步骤如下：1)建立一个新文件。在流程线上添加一个计算图标，命名为“窗口”，并将演示窗口的大小设为（420，28

12、0）。2)在“窗口”图标下面添加三个显示图标，分别命名为“牛”、“马”和“羊”，并分别导入相应的图片，设置各图片的遮盖模式为【透明】。3)在流程线上选择这三个显示图标，单击菜单栏中的【修改】/【群组】命令，将三个显示图标组合为一个群组图标，并将其命名为“对象”。,制作一个热对象交互课件，对几张动物的图片加以介绍，要求光标指向对象时出现相应文字介绍，移开光标停止介绍。,4)在“对象”群组图标的下面添加一个交互图标，命名为“介绍”。5)在交互图标的右侧添加一个群组图标，在弹出的【响应类型】对话框中选择【热对象响应】类型。将该群组图标命名为“介绍牛”。6)双击“介绍牛”群组图标，在其二级流程线上添加

13、一个显示图标，载入一段文字。,7)运行程序，弹出【属性：响应】对话框，单击演示窗口中的“牛”图片，将它的【类型】定义为热对象，则“牛”图片出现在对话框左上角的预览窗口中，同时其图标名称出现在【热对象】选项文本框中，说明该对象已被选中。8)在【匹配】选项中选择【指针在对象上】选项，再用前面介绍的方法将【鼠标指针】设置为手形光标。9)运行程序，当光标移到“牛”图片上时就会出现文字和解说词。,10)用同样的方法，可以为“马”和“羊”进行上述设置，其最终程序如下图所示。,程序流程线,6-2.5.5 目标区交互,我们将制作一个目标区交互的实例，通过实例来学习目标区交互的相关操作和属性设置。,使用目标区交

14、互制作该课件的操作步骤如下：1)建立一个新文件。在流程线上添加一个计算图标，命名为“窗口”，并将演示窗口的大小设为（420，280）。2)在“窗口”图标的下面添加一个显示图标，命名为“目标区域”。3)双击“目标区域”图标，在打开的演示窗口中绘制一个简单的上下窗格。在上方的窗格中输入“将右侧的单词拖放到左侧相应的图片上”；在下方窗格导入三幅图片。4)在“目标区域”图标的下方添加一个显示图标，命名为“苹果”。5)双击“苹果”图标，在打开的演示窗口中输入单词“apple”。,6)用同样的方法，在流程线上再添加两个显示图标，并分别命名为“猪”和“鸟”，然后在其演示窗口中分别输入单词“pig”和“bir

15、d”。7)在“鸟”图标的下方添加一个交互图标，命名为“判断”。8)向交互图标的右侧添加一个群组图标，在弹出的【响应类型】对话框中选择【目标区】响应，将该图标命名为“鸟正确”；在“鸟正确”图标的右侧再添加一个群组图标，命名为“鸟错误”。9)运行程序，则弹出【属性：交互图标】面板，同时演示窗口中将出现一个标有“鸟正确”的虚线框，用于标记目标对象应拖到的目标区域。,10)根据对话框的提示，单击演示窗口中的“bird”单词作为目标对象，则虚线框将自动附着到单词上。再根据对话框的提示，将“bird”单词（注意不是虚线框）拖到鸟图片上，然后调整虚线框使之完全包围鸟图片，如下图所示。,11)在【目标区】标签

16、下的【放下】选项中选择【在中心定位】，注意此处不选择【允许任何对象】选项，以便使本响应只对“鸟”有效。12)在【响应】标签下的【状态】选项中选择【正确响应】选项。13)重新运行程序，又弹出另一个【属性：交互图标】面板，这是“鸟错误”分支响应的属性对话框。此处仍然选择“bird”单词为目标对象，然后拖动“bird”单词到演示窗口的中央位置，调整虚线框使之包围演示窗口的下方窗格，如后图所示。,设定目标区域,14)在【目标区】标签下的【放下】选项中选择【返回】选项，在【响应】标签下的【状态】选项中选择【错误响应】选项。15)此时，主流程线上的“鸟正确”的前面多了一个“+”号，“鸟错误”的前面多了一个

17、“-”号。16)双击“鸟正确”群组图标，在打开的二级流程线上添加一个显示图标，在其【演示窗口】中输入“移动正确”字样。再添加一个计算图标，在打开的计算窗口中输入“Movable鸟:=FALSE”。,17)打开“鸟错误”群组图标，在二级流程线上添加一个显示图标，在其演示窗口中输入“移动错误，请再试一次”的提示文字。18)运行程序时可以发现，当单词移动正确时，将显示移动正确的提示，并且单词不能再被移动；当单词移动错误时，将返回原来的位置，同时出现移动错误的提示。19)用同样的方法，分别建立“apple”和“pig”两个单词的响应分支。20)在交互图标的最右侧再添加一个群组图标。21)双击其响应类型

18、标记，打开【属性：交互图标】面板，在【类型】选项中选择【条件】类型。,22)在【条件】标签的【条件】文本框中输入变量“AllCorrectMatched”，该变量用于定义当所有正确响应都实现时，变量为“真”，否则为“假”。在【自动】选项列表中选择“为真”选项，该选项用于定义当条件“为真”时系统自动执行此分支。23)在【响应】标签下【分支】选项中选择【退出交互】选项。24)打开该群组图标，在其二级流程线上添加一个显示图标，输入“全部正确，祝贺你！”的字样；再添加一个等待图标，设为等待3秒；最后再用一个计算图标退出程序，整个课件的程序流程线如后图所示。,程序流程线,6-2.5.6 文本输入交互,我

19、们举例使用文本输入交互设计一个随机乘法测试题课件。运行程序后将出现算术题，如果回答正确，则提示“正确”并出现【继续】按钮，单击该按钮可以继续下一题；如回答错误，则提示“错误”并出现【重做】按钮，单击该按钮可以重新做题。,其具体操作步骤如下：1)建立一个新文件。2)向流程线上添加一个显示图标，命名为“算式”。3)在“算式”显示图标上单击鼠标右键，从弹出菜单中选择【计算】命令，在计算窗口中输入如下图的语句后，关闭窗口。,4)双击“算式”显示图标，打开演示窗口，输入“NUM1XNUM2=?”以及相关文字信息，如下图所示。,5)在“算式”显示图标的下方添加一个交互图标，命名为“输入答案”。6)向“输入

20、答案”交互图标的右侧添加一个群组图标，在弹出的【交互类型】对话框中选择【文字输入】选项并确认，将群组图标命名为“*”，即输入任何内容都将执行该分支。7)向“输入答案”交互图标的下方添加一个群组图标，命名为“正确答案”，此时的程序流程线如下图所示。,8)运行程序，然后按住Shift键的同时双击“输入答案”交互图标，则演示窗口将出现一个带小黑三角的虚线框，即文本输入区，调整其位置，如下图所示。,9)双击文本输入区，则弹出【属性：交互作用文本字段】对话框，在【交互作用】标签中取消【输入标记】复选框，这样演示窗口中的小黑三角就会消失。10)单击【确定】按钮确认设置。11)双击“*”群组图标，打开二级设

21、计窗口，向二级流程线上添加一个显示图标、一个等待图标和一个擦除图标。12）在显示图标中输入“错误”字样，将等待图标设置为等待2s，然后使用擦除图标将错误提示信息擦除，此时的二级流程线如下图所示。,13)在二级流程线的最上方添加一个计算图标，命名为“判断”。双击该计算图标，在打开的计算窗口中输入如下图的语句。,14)双击“正确答案”群组图标，打开二级设计窗口，在二级流程线上添加一个显示图标、一个等待图标和一个计算图标，在显示图标中输入“正确”字样，将等待图标设置为等待2s，然后在计算图标中输入“GoTo(IconID”算式”)”，如下图。,运行程序，回答正确时就会提示正确，回答错误则提示错误。单

22、击【重做】按钮则重做同一道题。,6-2.5.7 按键交互,我们举例使用按键交互制作一个选择题课件。要求用户通过键盘选择正确答案。具体操作步骤如下：1)建立一个新文件。2)在流程线上添加一个显示图标，命名为“题目”。3)在“题目”图标上单击右键，从弹出的快捷菜单中选择【计算】命令，在打开的计算窗口中输入“ResizeWindow(500,200)”，重设演示窗口大小。,4)双击“题目”显示图标打开演示窗口，在其中绘制界面并输入文字，如下图所示。,5)在“题目”图标的下方添加一个交互图标，命名为“控制”。6)向“控制”图标的右侧添加一个显示图标，在弹出的【交互类型】对话框中选择【按键】选项。7)将

23、显示图标的名称指定为“A|a”，这样将忽略按键的大小写。8)双击按键交互类型标记，在【属性：交互图标】面板的【按键】标签中可以设置按键，如果该项为空，则默认为分支的名称，如下图所示。,9)切换到【响应】标签，设置各项参数如下图所示。,10)双击“A|a”显示图标，在打开的演示窗口中输入一个提示语“回答正确”，如下图。,11)再向“控制”图标的右侧添加一个显示图标，命名为“B|b”。12)双击“B|b”显示图标，在打开的演示窗口中输入一个提示语“回答错误！”，如下图所示。,13)用同样的方法，在向“控制”图标的右侧添加两个显示图标，依次命名为“C|c”和“D|d”，各项设置同“B|b”分支。14

24、)程序的最终流程线如下图所示。,6-2.5.8 重试限制交互,下面使用重试限制交互做一个练习，具体步骤如下：1)建立一个新文件。在流程线上添加一个计算图标，命名为“窗口”，并将演示窗口的大小设为（320，280）。2)在“窗口”图标的下方添加一个交互图标，命名为口令。3)在交互图标的右侧添加一个群组图标，在弹出的【交互类型】对话框中选择【文本输入】类型，将该图标命名为“*”，作用是使之可以接受输入任何内容。4)在交互图标和“*”群组图标之间再添加一个群组图标，在弹出的【交互类型】对话框中选择【文本输入】类型，将该图标命名为“1888”，即所要设定的密码。,5)双击“1888”群组图标的交互类型

25、标记，在【属性：交互图标】面板的【响应】标签中设置【分支】选项为“退出交互”，如下图所示。,6)运行程序后双击交互图标，在打开的演示窗口中绘制密码区域的线条、输入提示，并调整至合适的位置，如下图所示。,7)双击演示窗口中的文本输入框，打开【属性：交互作用文本字段】对话框，在【交互作用】标签中取消【输入标记】复选框，并设置其他选项如下图所示。,8)在“*”图标和“1888”图标之间再添加一个群组图标，并命名为“尝试3次”。9)双击其交互类型标记，在【属性：交互图标】面板的【类型】下拉列表中选择“重试限制”，然后在【重试限制】标签的【最大限制】文本框中输入“3”，即可尝试3次，如下图所示。,10)

26、双击“1888”群组图标，在打开的二级流程线上添加一个显示图标和一个等待图标。11)双击显示图标，在打开的演示窗口中输入当密码正确时的提示汉字“你是一个合法用户，可以继续使用该软件”。12)双击等待图标，在打开的【属性：等待图标】面板中设置选项如下图。,13)用同样的方法可以设置其余两个群组图标的二级流程线，最后的程序流程线如下图所示。,6-2.5.9 时间限制响应,下面我们把上面重试限制交互的密码修改成为时间限制交互的密码，其操作步骤如下：1)打开上一个制作的实例。2)将“尝试3次”群组图标名称修改为“限时10秒”。3)双击其交互类型标记，打开【属性：交互图标】面板中的【类型】下拉列表中选择【时间限制】类型，在其中设置参数如后图所示。,4)程序流程线如下图所示。,5)运行程序，如果在10秒钟内未输入密码，程序将提示用户是“非法用户”并自动退出。,