Authorware 教程第9章交互结构的设计1.docx

Authorware 教程第9章交互结构的设计1.docx

《Authorware 教程第9章交互结构的设计1.docx》由会员分享，可在线阅读，更多相关《Authorware 教程第9章交互结构的设计1.docx（18页珍藏版）》请在冰豆网上搜索。

Authorware教程第9章交互结构的设计1

第9章交互结构的设计

9.1交互结构概述——人机的互动

9.1.1交互图标与交互结构

交互结构可以借助交互图标

来实现。

当程序运行中遇到一个交互图标时，系统将先显示这个图标中包含的文字、图像等提示用户动作的信息，然后就会静待用户的参与动作，这称为交互的响应。

当用户以某种方式响应后，系统立刻将响应的类型与交互图标挂接的各分支的响应条件一一比较，找到与之相匹配的条件，对用户的动作自动作出反馈，然后根据情况决定程序流向。

交互结构的执行过程一般可分为三个阶段：

１．显示信息并等待用户执行动作的阶段。

２．产生响应匹配的阶段。

３．交互响应结束阶段。

[实例9.1]NBA队徽测试-1

图9.1例9-1-NBA队徽测试程序

图9.2例9-1-NBA队徽-1测试运行效果

9.1.2.创建交互结构的基本操作

把一个交互图标安排到流程图上，然后将供选择的各分支路径图标一一挂到交互图标的右下方，即形成了一个交互结构。

图9.3典型的交互结构

创建一个交互结构的基本操作步骤如下：

1．拖曳一个交互图标至程序流程线的指定位置。

2．拖曳一个或几个交互响应图标到交互图标的右下方以建立交互分支，并在弹出的对话框中为它们选择所需的交互类型。

3．单击各分支交互响应图标上方的交互响应方式符号，在屏幕下方的对话框中进行该交互响应的属性设置。

4．双击各分支上的交互响应图标，对其作进一步的编辑，以设计针对用户的不同动作系统给出的各种回应信息。

[实例9.2]轻风车影

图9.4例9-2-轻风车影运行效果

程序设计的步骤如下：

图9.5例9-2-轻风车影程序

1．设置程序的基本参数。

2．从配套光盘原文件夹中分别选取三个汽车小图一一输入。

3．拖曳一个交互图标

至显示图标下方。

4．先后拖曳两个群组图标到交互图标的右下方建立两条交互分支，然后分别为它命名为“提示１”、“单击１”，交互类型为“HotObject”。

5．单击“提示１”分支图标上方的交互响应方式符号

，进行该交互响应的属性设置。

然后复制“提示１”图标并在它右边粘贴另外两个继承了它所有属性的图标，分别命名为“提示2”、“提示3”。

6．单击“单击１”分支图标上方的交互响应方式符号

，在屏幕下方的对话框中进行该交互响应的属性设置。

9.1.3.交互图标的各项属性设置

单击选中流程线上的交互图标，在设计窗口下方将自动打开交互图标的属性设置对话框。

里面包含四个选项卡，其中Display、Layout、CMI、Interaction。

图9.6交互图标的属性设置对话框

Interaction选项卡中的选项如下：

1.Erase此选项提供了擦除交互图标中显示内容的不同方式，共有以下三种：

·UponExit：

·AfterNextEntry：

·Don'tErase：

2.Erase:

3.Options：

·PauseBeforeExit：

·ShowButton：

9.1.4.各分支响应类型和参数设置

　　设置了交互图标，还需要为交互图标挂接各分支，以构成一个完整的交互结构。

1.拖曳一个图标到流程线上交互图标的右下方，建立交互的一个响应分支，在交互响应类型选择对话框中选择一种响应类型。

图9.7交互响应类型选择对话框

2.单击这个响应图标上方的响应类型标记，设置有关参数。

图9.8交互响应属性对话框

在不同响应类型的交互响应属性对话框中，位于中间的主体部分都是两个选项卡，其中一个是本响应类型所特有的属性；另外一个则是各种响应类型所共有的属性，即关于响应本身的属性设置，名为“Response”。

Response选项卡中的各个选项。

1.Scope：

图9.9交互响应的作用范围设置

2.ActiveIf：

图9.10交互响应的激活条件设置

3.Erase：

图9.11分支擦除方式设置

在Erase的下拉菜单中，有关选项如下：

·AfterNextEntry

　　·BeforeNextEntry

　　·OnExit

　　·Don'tErase

4.Branch：

分支跳转类型的选择

图9.12分支跳转类型设置

在Branch的下拉菜单中，有关选项如下：

·Tryagain

　　·Continue

　　·ExitInteraction

　　·Return

5.Status:

图9.13响应正误状态设置

在Status的下拉菜单中，有关选项如下：

·NotJudged

此选项为缺省选择，如不进行自动统计则一般不需自动判断正误。

·CorrectResponse

·WrongResponse

6.Score：

用户响应动作得分（图9.14响应得分设置）

图9.14响应得分设置

9.1.5.各分支的反馈信息设置

程序设计的步骤如下：

1．设置程序的基本参数。

2．从配套光盘原文件夹中分别选取背景图、队徽图一一输入。

双击它们打开预演窗口调整好显示位置。

3．拖曳一个交互图标

至显示图标下方，然后为它命名，输入提示用户选择答案的信息。

4．拖曳一个群组图标到交互图标的右下方建立一条交互分支，然后为它命名为“A”，交互类型“Button”；

5．单击“A”分支图标上方的交互响应方式符号

，在屏幕下方的对话框中进行该交互响应的属性设置。

然后复制“A”图标并在它右边粘贴另外两个继承了它所有属性的图标，分别命名为“B”、“C”。

6．建立限次分支。

交互响应方式符号改变为

；

7．为各分支设置执行后的程序执行流向。

8．为三个按钮类型分支设置用户响应动作的正误状态和得分。

9．为各分支设计系统在接受了用户的某一选择后提供给用户的反馈信息。

10．在流程线交互结构下面加入擦除图标，擦除屏幕上的队徽。

加入显示图标，在其中输入系统提供给用户的得分情况。

9.1.6.交互响应的类型

9.2按钮响应类型——形形色色的按钮

9.2.1按钮响应类型（Button）的属性设置

[实例9.3]多彩按钮

图9.15例9-3-多彩按钮运行效果

图9.16例9-3-多彩按钮程序

在按钮响应方式的属性设置对话框中，Button选项卡的选项如下：

图9.17按钮响应方式的属性设置

1.Size

2.Location

　　3.label

　　4.Key（s）

5.Options包括两项。

　　·MakeDefault：

　　·HideWhenInact：

6.Cursor

图9.18　鼠标样式列表

此外，属性对话框中还有其他几项：

　　·Title

　　　　·Type

·Open

·Buttons...

图9.19按钮选择对话框

在按钮选择对话框中单击Add按钮，打开一个按钮编辑对话框。

图9.20按钮编辑对话框

从对话框中我们看到，在常规情况下（左边Normal下的一列）每个按钮都可以设置四种状态，这些固有状态正是按钮的基本特征。

9.2.2按钮的改进

[实例9.4]NBA队徽测试-2

图9.21为NBA队徽制作按钮

打开按钮编辑对话框。

分别导入up、down、over状态的图片，并位置加入声音。

同样可将准备好的其他图片和一个比较沉闷的声音文件“Chord.wav”赋予另外两个按钮。

图9.22例9-4-NBA队徽测试-2运行效果

9.2.3按钮状态的灵活切换

[实例9.5]视频播放暂停切换

图9.23例9-5-视频播放暂停切换运行效果

程序设计的主要步骤如下：

图9.24例9-5-视频播放暂停切换程序

1．设置程序的基本参数，在其后的显示图标“TV”中输入一幅电视机图片。

2．建立一个数字电影图标，为它输入一个视频图像文件“电视剧频道.mpg”,参数设置如图所示。

图9.25　数字电影播放设置

３．建立一个交互图标，设置一条交互分支，按钮类型。

4．为按钮设置状态。

图9.26　Checked按钮状态设置

5．为电影播放增加控制。

退出按钮设置后，双击分支上的计算图标，在其中输入：

MediaPause（@"电视剧",Checked@"播放/暂停"）然后关闭窗口。

9.2.4“无处不在”的永久按钮

响应被设置为永久型的（Perpetual），是为了使它们随时都能被激活。

[实例9.6]编译课件

图9.27例9-6-编译课件目录页和章节界面

请打开程序文件观察交互结构的设置。

图9.28例9-6-编译课件程序

在“目录”这个常见的交互结构之前，加入了一个名为“永久”的交互结构。

图9.29永久按钮的分支返回设置

图9.30利用函数转向模块Exit

为确保永久按钮不被遮盖，要对它们设置较高的显示层级。

图9.31永久按钮的显示层级设置

利用变量Within，我们把第一章界面上的永久型按钮作用范围设置为Within@"第一章"；同样，把最外层目录页上出现的永久型按钮作用范围设置为~Within@"Exit",即在为退出而设置的模块中不再起作用。

图9.32永久按钮的作用范围

9.3热区响应类型——方正矩形点热区

9.3.1热区响应类型的属性设置

热区（HotSpot）是一个任意设定的可备用户点击而激活交互的矩形区域，热区响应类型通常用于选择章节标题等标准的矩形物体。

9.3.2热区响应的实现

[实例9.7]星座遭遇当机

图9.33例9-7-星座遭遇当机运行效果

在按钮响应方式的属性设置对话框中，HotSpot选项卡的选项如下：

图9.34热区响应方式的属性设置

1.Size

2.Location

　　3.Key（s）

4.Match

·Single-click

·Double-click

·CursorinArea

关于热区响应的匹配还有另外两个可选项，

　　·HighlightonMatch

·MarkonMatch

5.Cursor（鼠标选择）

此外，属性对话框中的其他几项与按钮响应方式基本相同。

图9.35例9-7-星座遭遇当机程序

我们把交互结构中的12个分支都定义为热区响应类型。

先运行前面的显示图标，程序停下等待交互时，我们双击打开热区属性对话框进行设置。

采用热区响应方式，要注意使热区边缘与显示物体的曲线边缘尽量逼近。

图9.36热区对齐屏幕物体边缘

[实例9.8]章节标题

图9.37例9-8-章节标题运行效果