商洛学院经济与管理学院计算机辅助教学设计课件第五章 程序中的交互设计.pptVIP

第五章 程序中的交互设计 商洛学院计算机科学系 5.1.1 交互结构的建立 Authorware为用户提供了11种丰富灵活的交互方式。 操作实例：使用【交互】图标和【群组】图标建立最为基本的交互结构。 ① 建立新文件并将该文件命名为“交互结构” 保存。 ② 拖动一个【交互】图标到流程线上，命名为“建立交互”。 ④ 在该“交互类型”对话框中，选择“按钮”单选框后，单击确定，便建立了一个最基本的交互结构。 ⑤ 双击分支图标上方出现的交互相应类型符号，可以对弹出的“属性：交互图标”对话框进行设置。 ⑥ 设置分支图标的内容，双击打开【群组】图标，可以在该图标中添加图标。 ⑦ 如果想在整个交互结构中，建立多个分支结构，重复(3)、(4)、(5)、(6)即可。 5.1.2 交互结构浅析 交互结构共有3个分支结构，其中响应类型为按钮响应；响应分支由3个【群组】图标组成；响应分支流向是重试响应。 5.1.3 交互相应类型 Authorware提供了11种人机交互方式： 1）按钮响应类型 2）热区域响应类型 3）热对象响应类型 4）目标区响应类型 5）下拉菜单响应类型 6）条件响应类型 7）文本输入响应类型 8）按键响应类型 9）重试限制响应类型 10）时间限制响应类型 11）事件响应类型 5.1.4 分支响应类型的属性设置 可以通过属性对话框 ，对各种交互类型之间存在一些共有的属性进行设置。 1）按钮响应 制作简单按钮 例：开关灯 要求：通过使用【交互】图标和【群组】图标来制作一个简单的按钮，单击【开灯】按钮“演示”窗口，背景颜色为白色；反之，单击【关灯】按钮，背景颜色变为黑色。 ① 建立新文件并将该文件以“开关灯”为名保存。 ② 拖动一个【交互】图标到流程线上，命名为“交互”。 ④ 将【交互】图标右侧的【计算】图标命名为“开灯”，在其编辑窗口中输入函数语句。 ⑤ 双击“开灯”按钮响应类型符号 ，按钮响应类型的属性设置如下。 ⑥ 单击“鼠标”后面的 按钮，打开“鼠标指针”对话框，用户可以选择鼠标指针形状或单击【添加】按钮，加载外部鼠标指针形状。 ⑦ 拖动一个【计算】图标到“开灯”图标的右侧，将其命名为“关灯”，在该图标的编辑窗口中输入函数语句。 ⑧ 双击“关灯”按钮响应类型符号 ，进行相关设置。 ⑨ 单击按钮，“演示”窗口中出现两个按钮， 进行“开关”演示。 按钮的个性化设置 ③ 拖动一个【显示】图标 到流程线上，命名为“背景”， 导入素材图片。 ④ 拖动一个【交互】图标到流程线上，命名为“交互”， 在【交互】图标的右下方放置一个【显示】图标，在自动弹出的“交互类型”选择对话框中进行设置。 ⑤ 双击“花卉”按钮响应类型符号 ，弹出按钮响应类型的属性设置对话框。单击属性对话框中按钮 ，弹出“按钮”对话框，当前按钮样式用蓝色光条选择。 ⑥ 单击该对话框左下角的 按钮，弹出“按钮编辑”对话框。 ⑦ 在“编辑按钮”对话框中进行相关设置，预览效果如下。 ⑧ 继续设置的其他两种状态“按下”状态和“在上”（鼠标在上面）状态。 ⑨ 接下来为按钮加入声音，设置结束后，便看到刚刚定义的按钮出现在“按钮”对话框中，并且处于被选择状态。 ⑩ 单击【确定】按钮，返回到“属性：按钮”对话框，设置其他属性。运行程序，自定义的按钮出现在屏幕上，鼠标指向该按钮时，自动变色。单击该按钮，发出声音的同时打开一幅图片。 灵活多变的按钮状态 在使用按钮交互类型进行程序的设计时，除了个性化的设置按钮外，有时还需要对按钮的状态进行设置，通过改变按钮的正常状态和选择状态来实现开关的转换。其操作步骤同上一个实例，程序设计窗口如图。 2）热区域响应 例：室内设计大观 要求：通过使用热区交互类型，实现将鼠标放在小房型图上，便会出现相应的大房型图，从而实现清晰、快速地浏览房型图片的功能。 ① 建立新文件并保存为“室内设计大观”。 ② 执行【修改】→【文件】→【属性】命令，将“属性：文件”对话框中的“显示菜单栏”复选框和“显示标题栏”复选框去除。 ③ 拖动【显示】图标到 流程线上，命名为“背景”， 导入素材图像文件。 ④ 在流程线上放置 【交互】图标，命名为 “交互”。 ⑤ 拖动【显示】图标到【交互】图标的右侧，在弹出的“交互类型”对话框中选择“热区”交互，将该【显示】图标命名为“图片1”。 ⑥ 双击“图片1”【显示】图标，导入素材图像文件，并调整图像的位置与尺寸。 ⑦ 单击 按钮，程序开始运行。执行【调试】→【暂