《Authorware多媒体制作》优秀教学导案.docx

《Authorware多媒体制作》优秀教学导案.docx

《《Authorware多媒体制作》优秀教学导案.docx》由会员分享，可在线阅读，更多相关《《Authorware多媒体制作》优秀教学导案.docx（33页珍藏版）》请在冰豆网上搜索。

《Authorware多媒体制作》优秀教学导案

第四章交互图标基础应用

第一节交互图标概述

一、学习目标

1、熟悉交互的设计原则

2、熟悉交互图标的属性设置

3、掌握交互的种类

二、学习重难点：

1、交互图标的属性设置

2、交互的设计原则

三、学习任务：

通过一个小作品来演示交互程序的设置

四、学习过程

（一）交互图标概述

交互图标是Authorware最具特色的图标之一。

这个图标可以提供多达11种交互类型。

用户可以通过灵活多样的操作方式与作品进行实时的交互。

1、创建交互的基本操作

（1）进入Authorware,打开文件,每一个分支都是由一个显示图标组成.每一个显示图标中都包含一个文字,分别是”交”,”互”,”图”,”标”.

（2）运行程序,窗口中有4个按钮,分别单击每一个按钮,即可以显示相应的文字.

（3）演示完毕后,关闭该程序

2、创建交互的操作

（1）新建文件，设置演示窗口大小为：

320*240，白色背景，取消菜单栏，保留标题栏。

（2）在设计窗口中放置一个交互图标并命名

（3）拖放一个显示图标到交互图标的右侧，释放后出现交互类型对话框，同时演示窗口中出现一个未命名的按钮，单击对话框中的OK按钮，确认选中的按钮交互类型。

（4）此时，由显示图标生成一个交互分支，将该分支命名为“按钮1”，演示窗口中按钮上的文字也随之改变，调整按钮的位置。

（5）运行程序，单击按钮1，显示图标自动打开，在其中创建一个大大的“交”字。

（6）选中显示图标，按Ctrl+C复制该图标。

（7）将粘贴手指向显示图标右侧，连按3次Ctrl+V，粘贴3个相同的图标，生成3个新的分支，同时演示窗口中出现3个新的按钮。

（8）修改后3个显示图标的名称为“按钮2”，按钮3“按钮4”，新按钮上的文字也随之改变。

（9）修改后3个显示图标中的文字，分别为“互”“图”“标”

（10）到此，已经构建了一个具有4个交互分支的，采用按钮响应类型的交互结构程序。

运行程序，单击按钮，相应分支中的内容就会显示出来。

（二）创建交互的基本原则

在Authorware程序中实现交互主要是靠交互图标，此外，框架图标和导航图标也是创建交互的一种途径。

关于创建交互，有这样几个基本问题：

1、一个交互图标必须有一个或多个分支，否则没有使用它的理由。

2、如果交互图标附有多个分支，各分支可以采用相同的交互响应类型，也可以采用不同的交互响应类型

3、一个分支生成后，该分支的响应类型以及各种相关的设置将具有继承性，也就是说，当建立一个分支时，会自动地采取前一个分支的响应类型和有关设置。

4、除了交互图标、框架图标、分支图标、声音图标和电影图标以外，其他图标都可以直接用来建立交互分支。

5、如果要用交互图标，框架图标，分支图标，声音图标和电影图标建立交互分支，需要先用组合图标建立分支，再在组合图标中使用这些图标。

如果直接用这些图标建立交互分支，将会自动地在分支中生成包含这些图标的组合图标。

6、交互图标本身具有显示功能，并包含显示图标所具有的各种属性设置。

与交互有关的某些视觉内容，可以在交互图标中生成。

7、如果要使一个交互在程序运行中始终起作用，应当将其设置成永久性交互。

（三）交互的各种响应类型

当建立第一个交互分支时，会出现交互响应类型对话框，这时列出了十一种交互响应类型，它们的名称和含义如下所述。

按钮响应：

响应点击按钮的事件

热区响应：

响应点击或进入设定区域的事件

热对象响应：

响应点击设定物体的事件

目标区响应：

响应将设定物体拖入设定区域的事件

菜单响应：

响应所选择的菜单选项

条件响应：

响应变量或表达式的逻辑值

文本响应：

响应由键盘输入的文本

按键响应：

响应所定义的按键

重试限制响应：

响应所限定的尝试次数

时间响应：

响应所设定的限制时间

事件响应：

响应ActiveX控件事件

不同的响应类型，实现不同的交互方式，这为交互式程序设计提供了灵活多样的控制手段。

由这些响应类型所实现的交互，是它的特点之一，也是学习它的重点之一。

（四）交互图标的属性设置

选中交互图标后，执行Modify_Icon_Properties命令，或者按Ctrl+I组合键，可以打开交互图标属性对话框。

该对话框用于对交互选项卡几个方面，对这个对话框进行介绍。

共用选项：

1、上方文本框中显示交互图标的名称。

2、左上角的小窗口显示交互图标中所包含的显示内容

3、小窗口下的“文本输入”按钮，用于打开交互文本属性对话框

4、左下角的Open按钮用来打开交互图标的显示窗口，相当于双击交互图标。

交互作用选项卡

1、擦除：

下拉列表框中有3个选项，用来确定何时擦除交互图标里的显示内容。

在退出之前：

在退出交互图标后，执行主流线上的下一个图标前擦除。

下一次输入之后：

在发生响应后，进入相应的分支前擦除。

执行完分支后，如果还要等待响应，则恢复所擦除的内容。

不擦除：

退出交互图标后，在屏幕上保留交互图标里的内容，直到用擦除图标将其擦除

2、另一个擦除选项用来确定擦除交互图标里的内容时，所采用的过渡效果。

单击右侧的方形按钮，可打开过渡效果对话框进行选择。

3、选项下有两个设置内容。

在退出前中止：

在交互图标的显示内容中加入一个Continue按钮。

退出交互图标后，程序暂停，直到单击Continue按钮或按任意键，程序才继续执行。

显示按钮:

如果选中了PauseBeforeExiting选项，本选项用来确定是否显示Continue按钮。

显示选项卡和版面布局选项卡

交互图标属性对话框的显示选项卡和版面布局选项卡与显示图标的两个选项卡没有任何区别.这就是说在交互图标里包含了完整的显示图标的功能。

在显示图标中通过这两个选项卡所做的各种设置，在交互图标中同样可以进行。

（五）交互分支的属性设置

在交互图标下建立了分支后，不同响应类型的分支都有一个不同的响应类型符号，选中分支中的图标，执行Modify_Icon_Response命令，或者按Ctrl+E组合键，或者双击分支中的响应类型符号，都可以打开所选分支的响应属性对话框。

这个对话框用于特定分支的有关属性进行设置。

下面从类型列表，类型选项卡和响应选项卡三个方面，对这个对话框进行介绍。

类型列表

它用于选择交互响应类型。

下拉列表框中给出了全部十一种响应类型，通过选择不同的选项，可以改变当前分支的响应类型。

“类型”选项卡

对话框中有两个选项卡，左边的Menu选项卡是类型选项卡。

该选项卡是针对各种响应类型的选项卡，选项卡名称与Type下拉列表框中的类型相对应。

对于不同的响应类型该选项卡的内容将所有不同，这些针对各种响应类型的选项设置，将在后面几节中，结合各种交互响应类型地学习，现作详细介绍。

“响应”选项卡

右边的Response选项卡是响应选项卡。

这是针对各种响应类型都是一样的选项卡，用于对交互响应一些共性的属性进行设置。

在这里对该选项卡先作简介，以后在学习各种交互响应类型时，就不再重复了。

1、范围：

复选框用于设置永久性交互。

所谓永久性交互，就是在程序运行过程中始终起作用的交互。

文本响应，按键响应型，时间响应型和尝试响应型交互无法设置成永久性交互。

2、激活条件：

条件文本框用于输入一个条件，只有当条件满足时才可能引发响应。

该选项不能用于文本响应，条件响应，和尝试响应。

3、下拉列表框用来设置分支执行完毕后，分支中所显示的内容在什么时候被擦除。

列表中有四个选项：

（1）在下一次输入之后：

在进入下一个分支后擦除

（2）在下一次输入之前：

在进入下一个分支前擦除

（3）在退出时：

在退出交互图标后擦除

（4）不擦除：

直到使用擦除图标将其擦除。

4、分之：

下拉列表框用来设置分支执行完毕后程序的流向，有三个选项：

（1）重试：

返回交互图标，等待下一个响应。

（2）继续：

如果在本分支右边还有与本次响应相匹配的分支，则自动进入那个分支继续进行。

（3）退出交互：

退出交互图标，执行主流线上的下一个图标。

5、下拉列表框用来设置本次响应正确或错误属性。

在设计窗口中，具有正确属性的响应所在的分支，冠以“+”号：

肯有错误属性的响应所在的分支，冠以“-”号，不作判断的响应所在分支，不加标点。

Status列表中有3个选项：

（1）不判断：

对本次响应的正确与否不作判断。

（2）正确响应：

将本次响应设置为正确的响应。

（3）错误响应对本次响应设置为错误的响应

6、计分：

第二节按钮交互响应

一、学习目标：

1、熟悉按钮交互的设计

2、熟悉按钮交互的属性设置

3、熟悉设置按钮的八种状态

二、学习重难点：

1、按钮交互的属性设置

2、按钮交互的设计

三、学习任务：

程序运行后，画面出现一列按钮，单击用动物名称按钮，便可显示动物图像，单击退出字样的按钮，即退出程序。

并根据需要对该作品进行二次改动，以达到不同的效果。

四、学习过程：

（一）创建响应型交互“按钮”

与菜单交互一样，按钮交互又是一种基本的交互方式。

在多媒体作品中，按钮交互比菜单交互使用得更为普遍，用户通过按钮以及按钮上的文字或图案，识别并单击按钮，从而实现交互，已经成为一种习以为常的操作方式了。

在多媒体中创建按钮，如果要求不是太高，可以直接使用默认按钮；如果嫌默认的按钮太简单，可以选择系统提供的其他按钮。

如果对系统按钮那些灰秃秃的样子不满意，还可以创建外观生动并能伴以声音的自定义按钮。

创建默认按钮的操作

练习目的：

（１）练习创建默认按钮系统的基本操作

（２）体验在已有程序中经过修改而完成新程序的编辑操作。

作品内容：

程序运行后，画面出现一列按钮，单击用动物名称按钮，便可显示动物图像，单击退出字样的按钮，即该退出程序。

操作步骤：

1、进入多媒体

2、修改源程序

（1）打开文件属性对话框，取消菜单栏，取消CenterinScreen选项，选中标题栏。

采取这咱设置的演示窗口没有菜单栏，而带有标题栏。

（2）打开标题显示图标，将文字“例题05-2”改为“例题０５－３Ａ”，并移到窗口右上角。

（3）撤销全部分支，将原来构成分支的图标暂时放在交互图标下的主流线上

4、创建按钮分支

（1）将蜻蜓组合图标拖放到交互图标右侧建立第一个分支，随之弹出响应类型对话框，保持默认选中的按钮响应类型Button，关闭对话框。

（2）将其他七个组合图标和最后的计算图标依次拖放到当前分支的右侧，建立新的分支，这些分支依次继承前一分支的按钮响应类型。

最后形成的交互结构中，共包含九个按钮响应分支。

（3）在演示窗口中可以看到九个依次排列的按钮，这些按钮的样式和大小，标签字体，大小，和对齐方式，以及按钮的位置排列，都是自动采取默认设置的结果。

保持这些默认设置结果。

（4）运行程序，测试一个按钮的功能。

（5）保存。

（二）按钮响应的属性的设置

双击按钮响应分支中的按钮响应符号，可以打开按钮响应属性对话框，其中的Button选项卡用于按钮响应作具体设置。

1、Size选项用来设置按钮的大小，单位为像素。

2、Location选项用来设置按钮的位置，以演示窗口左上方坐标原点，以按钮左上角为参照点，以像素单位。

按钮的大小和位置也可以在编辑时直接用鼠标调整。

在Size选项和Location选项中设置按钮，有利于按钮的规范化。

3、Lael选项卡定义按钮的标签文字。

（1）如果该选项是空的（默认设置）,则将相应分支的图标名作为标签文字（如以上例题）；如果不取图标名作为标签文字，则按下述方法定义标签文字。

（2）在双引号中给任意文字，则将所给文字作为标签文字。

例如给出“dragonfly”，则标签文字为dragonfly。

（3）如果给出一个变量，则将该变量的当前值作为标签文字。

例如给出一个自定义变量Label,而该变量的当前值为１，则标签文字为１。

（4）如果给出一个表达式，则将该表达式的值作为标签文字。

例如给出表达式１＋２，则标签文字为３

4、Ｋey选项用来设置与按钮等效的快捷键。

5、Ｏptions选项下有两个复选框。

（1）MakeDefault：

将按钮定义为系统默认的按钮，按钮的边框被加粗，此时把回车键置为按钮等效键。

该选项对自定义按钮无效。

（2）HideWhenInactive：

选中该复选框后，当按钮被置为不可用时，将从屏幕上隐去；当置为可用时，会重新显现出来。

、

6、Ｃursor选项用来设置光标的样式。

当光标指向按钮时，将由标准样式变为所设置的样式。

单击该选项右侧的省略号按钮，将打开光标样式窗口。

窗口中列出了系统提供的标准样式光标，选中某种样式并单击OK按钮后，该样式将出现Cursor选项的光标样式框中。

如果标准样式光标下不能满足需要，可以单击样式窗口的Add按钮，加载自定义光标样式。

为了更好地理解和掌握上述按钮响应的属性设置，下面对例题的程序进行修改，在其中加入快捷键和手形光标。

例题一

练习目的：

1、练习在按钮响应中加入快捷键和手形光标。

2、体验在已有程序中经过修改而完成新程序的编辑操作

操作步骤：

1、打开程序。

2、打开标题显示图标，将文字“例题05-03”中的文件“例题05-03A”。

3、分别打开每一个按钮分支的响应属性对话框，在Button选项卡的Keys文本框中输入分支名称拼音字头的大写和小写字母，两字母用符号“｜”分隔。

这样，就为每一个按钮设置了两个快捷键，键名就是按钮名称拼音字头的大写和小写。

4、设置光标，可单击Cursor按钮打开光标样式窗口，从中进行选择。

不过，设置手形光标是每一个分支都需要做的相同修改，不恬各个分支中分别进行，可以采用批量修改图标属性的方法统一修改。

（1）同时选中所有的分支中的图标，一个简单的方法是：

激活设计窗口，按CtrL+A键选中全体图标；按Shift键后，单击分支图标以外的图标，取消对这些图标的选择；现在剩下的就是所有分支的图标。

（2）执行Edit-Change-Properties命令，打开修改图标属性对话框。

（3）在对话框左面Property下拉列表框中选择Interaction-Cursor，右面即出现光标样式列表，选中手形光标后，单击OK按钮，关闭对话框。

5、运行程序，不使用按钮，使用快捷键Ｑ，Ｐ，Ｙ，Ｇ，Ｂ，Ｓ，Ｘ，Ｋ或q,p,y,g,b,s,x,k即可进入相应的画面；使用快捷键Ｔ或t，即可退出程序。

6、运行程序，测试每一个按钮的手形光标，此时，光标和按钮有以下三个状态。

（1）光标进入按钮前，呈标准样式

（2）光标进入按钮后，呈手形样式、

（3）按下鼠标左键后，按钮呈凹状态。

7、保存文件

（三）创建系统按钮的操作

练习目的：

1、练习选择和设置系统按钮的方法。

2、体验在已有的程序中经过修改而完成新程序的编辑方法

操作步骤：

1、进入程序。

2、打开标题显示图标

3、单独选择和设置系统按钮。

程序中每一个按钮都可以单独地编辑

（1）打开某一个分支的响应属性对话框

（2）单击按钮预览窗口下面的buttons按钮，打开Buttons按钮窗口。

（3）窗口中给出了Macintosh风格，Windows风格，Windows3.1风格的矩形按钮，复选型按钮和单击按钮。

可以选择其中的任意一种，作为当前按钮的样式。

（4）在样式窗口下方的SystemButtons两个下拉列表中，可以选择按钮上文字的字体和大小。

（5）单击OK按钮依次关闭系统按钮窗口和响应属性对话框。

4、批量修改按钮样式。

如果要把多少个按钮或全部按钮设置成统一的样式，可以采用批量修改的方法。

（1）同时选中需要修改按钮样式的多个或全部分支中的图标。

（2）执行Edit-Change-Properties命令，打开ChangeIconPropertiesfor（修改图标属性）对话框。

（3）在对话框中Property两个下拉列表框中选择Interaction_Button，右面即出现按钮新式列表，选中所需要样式，单击OK按钮，关闭对话框。

（3）运行程序，即可在演示窗口中看到修改后的新样式按钮。

5、保存文件

（四）按钮编辑器

如果多媒体提供的系统按钮都不能满足需要，可以创建自定义按钮。

创建自定义按钮，需要事先准备按钮素材，包括表现各种按钮状态的图像和配合各种按钮状态的声音。

有了按钮素材以后，可以使用按钮编辑器创建自己自定义的按钮。

打开按钮编辑器的步骤如下：

1、双击分支中的按钮响应符号，打开响应属性对话框

2、单击对话中的button按钮，打开系统按钮窗口

3、单击窗口右下角的add按钮，即可以打开按钮编辑器。

normal（正常）类型和checked（被检测）类型，每种类型下又有四种状态。

（1）up：

按钮没有被触及时的状态。

（2）down：

按钮被按下时的状态。

（3）over：

光标在按钮上还未按下时的状态。

（4）disabled：

按钮不可使用时的姿态。

可见，一个按钮共有八种不同的状态，可以为每一种状态分别设置图像，标签和声音。

当然，也可以不对某些状态进行设置。

（五）按钮的设置：

选中某种按钮后，可在窗口左侧的选项中对此状态进行设置。

Graphic选项：

用来设置图像。

单击右侧的Import按钮可以引入外部图像。

图像引入后，将显示在上方的窗口中。

Label选项：

用来设置标签。

在中间的下拉列表中有两中选择，Ｎone和showlabel。

如果选择了显示标签，在右侧的下拉列表中可以对标签在按钮上的位置做三种选择：

居左，居右，居中。

Sound选项：

用来设置声音，单击右侧的Import按钮可以引入外部声音。

单击Play按钮，可以预听引入的声音。

（六）按钮的描述：

在左下角的Buttondescription文本框中，可以加入关于按钮的文字描述。

按钮的检测：

窗口右下角的Automaticallycheck复选框，用来定义按钮是否被检测。

按钮编辑器的具体使用方法，将在下文中结合例题介绍。

（七）创建自定义按钮的操作、

练习目的：

1、练习创建自定义按钮的方法

2、体验在已有程序中经过修改而完成新程序的编辑操作。

操作步骤：

1、打开文件

2、进入程序

3、打开标题显示图标，进行相应的修改。

4、选择退出分支,打开按钮编辑器.

（1）双击最后一个分支的按钮响应符号，打开响应属性对话框。

（2）单击Button按钮，打开系统按钮窗口。

（3）单击Add按钮，打开按钮编辑器。

5、编辑按钮的向上状态。

（1）在State状态选项区域的Normal类型下选择up状态

（2）单击Graphic选项的Import按钮，打开引入文件对话框，从文件夹中引入图像文件：

按钮up.bmp,作为向上状态的按钮图像。

在对话框中可以看到，Linktofile选项呈灰色不可用状态，说明按钮图像只能引入程序内部，不能作为外部链接素材。

6、编辑按钮的向下状态。

（1）在State选项区域的Normal类型下选择Down状态。

（2）单击Graphic选项的Import按钮，引入图像文件“按钮down.bmp”，作为向下状态的按钮图像。

（3）单击Sound选项的Import按钮，打开引入文件对话框，引入声音文件“按钮声.wav”，作为向下状态的按钮声音。

灰色的Linktofile选项，说明按钮声音也不能作为外部链接素材。

7、编辑按钮的上方状态。

（1）在State状态选项区域的正常类型下选择选择上方状态。

（2）单击Graphic选项的Import按钮，引入图像文件“按钮over.bmp”，作为上方状态的按钮图像。

8、依次关闭按钮编辑器，系统按钮窗口呼按钮响应对话框。

9、运行程序，测试自定义按钮的三种状态

10、测试按钮时可以发现，如果释放按钮的动作太快，按钮的声音就不能完整地播放，为此，可在退出运行前设置一个等待按钮，延长声音的播放时间。

（1）选中退出运行的计算图标，按CtrL+G键，将其组合图标中。

（2）打开组合图标，在原计算图标前加一个等待图标，设置0.5秒的强行等待

11、运行并测试程序

12、将当前程序保存在原来程序所在的文件夹中。

（八）总结

通过本次课的学习，掌握了按钮交互的设计原则和设计方法，知道了不同的按钮的各种设计方法。

第三节热区域响应型交互

一、学习目的：

1、熟悉热区交互的设计

2、熟悉热区交互的属性设置

二、学习重难点：

1、热区交互的属性设置

2、热区交互的设计

三、学习任务：

结合两个例题，分别介绍图像热区和文字热区创建的方法，并对热区响应属性设置做详细介绍。

四、学习过程：

热区就是一个可以激发响应的矩形区域。

热区内可以是任意的图像或文字内容。

热区的作用与按钮相似，但其具有更加灵活性生动的外观形式，是继按钮之后的又一种为用户喜爱的操作方式。

这一节将结合两个例题，分别介绍图像热区和文字热区创建的方法，并对热区响应属性设置做详细介绍。

（一）创建图像热区的操作

图像热区以图像作为视觉内容。

创建图像热区需要事先准备热区图像素材。

热区图像一般是一些幅面较小而具有提示作用的图像。

下面结合例题，介绍创建图像热区的方法。

练习目的：

1、练习创建图像热区的方法

2、体验在已有程序中经过修改而完成新程序的编辑操作

操作步骤：

1、进入多媒体

2、修改源程序

（1）打开标题显示图标

（2）撤销全部分支，将原来构成分支的图标暂时放在交互图标下的主流线上。

3、创建热区交互

（1）双击打开交互图标，用批量引入的方法，将文件中的八个热区图像一次引入交互图标，并在演示窗口中布置它们的位置。

（2）将蜻蜓组合图标拖放到交互图标右侧建立第一个分支，在随之弹出的响应类型对话框中，选择热区响应类型HotSpot。

关闭对话框

（3）双击新建分支的热区响应符号，打开热区响应属性对话框，同时在演示窗口中出现定义热区大小和位置的线框

（4）拖曳调整热区线框的大小和位置，使之与第一个热区图像重合。

（5）在响应对话框HotSpot选项卡的Match下拉列表中保持默认选项Single-Click，使热区通过单击而发生响应

（6）选中HighlightonMatch复选框，使得单击热区时，热区图像呈高亮显示。

（7）在Cursor选项中选择手型光标样式

（8）将其他七个动物组合图标依次拖当前分支右侧，建立新的分支。

这些分支将依次继承前一分支的属性设置，包括单击响应，高亮显示，手形光标和热区的大小，但热区的位置需要分别调整

（9）运行程序，单击设计窗口停止运行，此时可以在演示窗口中看到所有热区的线框，它们的大小都是一样的。

现分别把它们拖放到相应的热区图像上与之重合。

（10）恢复退出运行的自定义按钮。

*用最后一个组合图标建立最后一个分支，双击响应符号打开响应属性对话框

*在Type下拉列表框中选择按钮响应类型Ｂutton，此时系统自动将按钮设置为默认按钮。

*为了恢复原来的自定义按钮，单击对话框中Button按钮，打开系统按钮窗口，从中选择已保存在该按钮窗口中的自定义按钮

*依次关闭系统按钮窗口和响应属性对话框

*在演示窗口中调整自定义按钮的位置。

4、运行程序，测试热区和按钮。

（1）测试所有热区功能作用和外观表现。

每一个热区都有三种状态。

（2）观察热区的大小和位置是否与热区图像相吻合。

（3）测试自定义按钮是否恢复了原来的功能和表现。

（二）热区响应的属性设置

双击分支中的热区响应符号，可以打开热区响应属性对话框，在这个对话的HotSpot选项卡中，可以对热区作以下设置。

1、Size选项组用来定义热区的大小，单位为像素。

2、Location选项用来定义热区的位置，以演示窗口左上角为坐标原点，以热区左上角为参照点，以像素为单