Authorware多媒體課件制作實用教程：第5章 交互和響應(yīng)

第5章交互和響應(yīng)●5.1交互結(jié)構(gòu)概述

●5.1.1

交互結(jié)構(gòu)的組成●5.1.2交互響應(yīng)類型●5.1.3交互圖標及其屬性●5.1.4實例：制作“拼圖”●5.2按鈕交互●5.2.1按鈕交互的創(chuàng)建

●5.2.2按鈕交互的屬性

●5.3熱區(qū)域交互●5.4熱對象交互●5.5目標區(qū)交互●5.6下拉菜單交互

●5.1交互結(jié)構(gòu)概述

交互功能使用戶制作的多媒體作品除了可以擁有優(yōu)美的圖片、悅耳動聽的音樂外，還可以獲得一個非常重要的交互界面，有交互功能的程序可以對用戶的某項操作做出反饋，實現(xiàn)人機交互?！?/p>

5.1.1交互結(jié)構(gòu)的組成Authorware強大的交互功能都是通過交互圖標來實現(xiàn)的。交互圖標是一種綜合性圖標，它能同時具有與顯示圖標相同的顯示圖形圖像喝文本的功能以及其特有的交互功能和分支功能。使用交互圖標可以在程序中添加多達11種的交互方式，其基本結(jié)構(gòu)如圖5.1所示，整個結(jié)構(gòu)由一個交互圖標及其右側(cè)的多條交互分支構(gòu)成。每條交互分支上方的符號代表不同的交互類型，單擊該符號可以顯示該交互分支的屬性面板；每條分支下方的符號代表程序在執(zhí)行完該交互分支后的流向；單擊交互分之上的圖標或單擊右側(cè)相應(yīng)圖標的名稱，可以顯示該圖標的屬性面板，圖標名稱前面的“+”或“-”分別表示該交互分支為“正確響應(yīng)”或“錯誤響應(yīng)”。程序在運行時將根據(jù)用戶與程序的交互結(jié)果，執(zhí)行相應(yīng)的交互分支，執(zhí)行完畢后將根據(jù)該分支的流向跳轉(zhuǎn)到相應(yīng)的位置繼續(xù)執(zhí)行。圖5.1交互圖標的結(jié)構(gòu)

●

5.1.2交互響應(yīng)類型在圖標工具欄中拖動交互圖標到主流程線上，再將群組圖標拖到交互圖標的右下角，此時彈出“交互類型”對話框，如圖5.2所示。圖5.2“交互類型”對話框“按鈕”（Button）響應(yīng)類型：在演示窗口中出現(xiàn)一個按鈕，單擊按鈕產(chǎn)生程序分支?！盁釁^(qū)域”（HotSpot）響應(yīng)類型：所謂熱區(qū)，就是在演示窗口中創(chuàng)建的矩形活動區(qū)域，程序運行時該區(qū)域是不可見的。如果單擊、雙擊或?qū)⒐鈽艘苿拥絽^(qū)域，就會得到響應(yīng)，并完成分支圖標的功能?！盁釋ο蟆保℉otObject）響應(yīng)類型：以一個顯示圖標中的內(nèi)容作為激活響應(yīng)的對象，單擊、雙擊或光標經(jīng)過該對象時激活相應(yīng)的程序分支。“目標區(qū)域”（TargetArea）響應(yīng)類型：用戶拖動一個對象到指定的區(qū)域，若拖放的對象或位置符合要求，對象就停留在指定的區(qū)域；若不符合要求，將返回原位等?！跋吕藛巍保≒ull_downMenu）響應(yīng)類型：在演示窗口的菜單欄出現(xiàn)下拉菜單，選擇不同的菜單項，激活不同的程序分支?！皸l件”（Conditional）響應(yīng)類型：選擇這種類型的響應(yīng)，就可以根據(jù)交互圖標屬性對話框的“條件”文本框中設(shè)定的條件來匹配用戶響應(yīng)，給定的條件可以是變量、函數(shù)或表達式。

●

5.1.3交互圖標及其屬性在流程線上添加一個交互圖標，雙擊該圖標可以打開演示窗口，在該窗口中可以進行導入圖形圖像、輸入文字等操作，與顯示圖標的功能相同。單擊交互圖標，顯示其屬性面板，其中包含“交互作用”、“顯示”、“版面布局”喝CMI4個選項卡，如圖5.3所示。圖5.3交互圖標的屬性面板“文本輸入”（TextEntry）響應(yīng)類型：在演示窗口出現(xiàn)一個文本框，在文本框中輸入字符，不同的字符可以激活不同的程序分支?！鞍存I”（Keypress）響應(yīng)類型：用戶按下鍵盤上的某個鍵，就可以匹配響應(yīng)?！爸卦囅拗啤保═riesLimit）響應(yīng)類型：用該類型的響應(yīng)來限制用戶響應(yīng)的次數(shù)?！皶r間限制”（TimeLimit）響應(yīng)類型：通過限制時間長短，選擇不同的程序分支?！笆录保‥vent）響應(yīng)類型：所謂事件，就是在程序運行過程中發(fā)生的某件事，它引起按鈕等ActiveX控件產(chǎn)生某個程序事件。當用戶觸發(fā)某個事件并與Authorware的事件響應(yīng)分支匹配后，就可以實現(xiàn)程序設(shè)定的功能。

●

5.1.5實例：制作“拼圖”下面將介紹如何制作“拼圖”多媒體作品，具體步驟如下。步驟1新建一個多媒體文件，添加一個顯示圖標到流程線上，并將其命名為“背景”，雙擊打開演示窗口，導入背景圖，如圖5.4所示。步驟2添加一個顯示圖標到“背景”顯示圖標的下面，并將其命名為“全圖”，如圖5.5所示。然后導入“風景.jpg”文件。圖5.4導入背景圖5.5導入相關(guān)風景圖步驟3雙擊“風景”圖片，在彈出的“屬性：圖像”對話框中選擇“版面布局”選項卡，在“位置”后面的兩個文本框中分別輸入“130”和“106”，如圖5.6所示。步驟4單擊“確定”按鈕關(guān)閉對話框，完成后的效果如圖5.7所示。步驟5添加一個交互圖標到“全圖”顯示圖標的下面，并將其命名為“交互1”，再在其右側(cè)添加一個群組圖標，在彈出的“交互類型”對話框中選中“按鈕”單選按鈕，如圖5.8所示，再單擊“確定”按鈕。

步驟6將群組圖標命名為“開始”單擊“開始”顯示圖標上方的按鈕，單擊其屬性面板中的“按鈕”按鈕，如圖5.9所示。圖5.6“屬性：圖像”對話框圖5.8“交互類型”對話框圖5.7導入“風景”圖像圖5.9單擊“按鈕”按鈕

步驟7彈出“按鈕”對話框，在其中單擊“添加”按鈕，如圖5.10所示。步驟8彈出“按鈕編輯”對話框，選擇常規(guī)按鈕的“未按”狀態(tài)，再單擊“圖案”下拉列表框后面的“導入”按鈕，如圖5.11所示。圖5.10單擊“添加”按鈕圖5.11“按鈕編輯”對話框步驟9在彈出的“導入哪個文件”對話框中選擇合適的文件，再單擊“導入”按鈕，如圖5.12所示。步驟10導入“按鈕1”文件，在“標簽”下拉列表框中選擇“顯示卷標”選項，如圖5.13所示。步驟11設(shè)置常規(guī)按鈕的“在上”狀態(tài)，再單擊“圖案”下拉列表框后面的“導入”按鈕，導入“按鈕2”文件，在“標簽”下拉列表框中選擇“顯示卷標”選項，如圖5.14所示。

步驟12單擊“確定”按鈕，返回“按鈕”對話框，再單擊“確定”按鈕關(guān)閉“按鈕”對話框，在屬性面板的“位置”文本框中分別輸入“265”和“315”，選中“默認按鈕”復(fù)選框，單擊“鼠標”選項后面的模塊，在彈出的“鼠標指針”對話框中設(shè)置鼠標指針的圖案為小手圖形，如圖5.15所示。圖5.12“導入哪個文件”對話框圖5.13選擇“顯示卷標”選項圖5.14添加交互圖標圖5.15單擊“確定”按鈕步驟13添加一個擦除圖標到“交互1”交互圖標的下面，并將其命名為“擦除全圖”，然后拖動“全圖”顯示圖標到“擦除全圖”擦除圖標上，如圖5.16所示，將其鏈接到擦除圖標上。

步驟14添加一個群組圖標到“擦除全圖”擦除圖標的下面，并將其命名為“分圖”，雙擊打開“分圖”流程編輯窗口，在其中添加一個顯示圖標，雙擊打開演示窗口，導入“風景”文件，并將其命名為1，雙擊“風景”圖片，在彈出的“屬性：圖像”對話框中選中“版面布局”選項卡，在“顯示”下拉列表框中選擇“裁切”選項，在“位置”后面的兩個文本框中分別輸入“30”和“360”，在“大小”后面的兩個文本框中分別輸入“134”和“62”，在“放置”欄中單擊左上角的方塊，如圖5.17所示。圖5.16使“全圖”鏈接到擦除圖標上圖5.17“屬性：圖像”對話框步驟15按照上述步驟，制作第二個分圖，并將其命名為2，設(shè)置位置為“505”和“170”，大小為“135”和“62”，在“放置”欄中單擊第一行中間的方塊，如圖5.18所示。步驟16重復(fù)上面的操作，再添加7個顯示圖標，并分別命名為3~9，如圖5.19所示，它們的屬性根據(jù)實際情況進行設(shè)置。

圖5.18設(shè)置第二個分圖屬性圖5.19設(shè)置其他分圖屬性步驟17添加一個交互圖標到“分圖”群組圖標的下面，并將其命名為“交互2”，然后添加一個群組圖標到右側(cè)，在彈出的“交互類型”對話框中選中“目標區(qū)”單選按鈕，并將其命名為1，如圖5.20所示。步驟18雙擊1顯示圖標，打開演示窗口，再單擊1群組圖標上方的按鈕，然后在演示窗口中單擊“風景”圖片，將其設(shè)置為目標對象，如圖5.21所示。步驟19在屬性面板的“大小”后面的兩個文本框中分別輸入“134”和“62”，在“位置”后面的兩個文本框中分別輸入“30”和“360”，在“放下”下拉列表框中選擇“在中心定位”選項，如圖5.22所示。步驟20選擇“響應(yīng)”選項卡，在“狀態(tài)”下拉列表框中選擇“正確響應(yīng)”選項，如圖5.23所示。在“交互2”交互圖標的右側(cè)再添加7個群組圖標，并分別命名為2~8，它們的屬性設(shè)置與1類似。

圖5.22“目標區(qū)”選項卡圖5.23“響應(yīng)”選項卡步驟21再在其右側(cè)添加1個群組圖標，并命名為“返回”，在屬性面板的“大小”后面的兩個文本框中分別輸入“0”和“0”，在“位置”后面的兩個文本框中分別輸入“540”和“480”，選中“允許任何對象”復(fù)選框，在“放下”下拉列表框中選擇“返回”選項，如圖5.24所示。步驟22選擇“響應(yīng)”選項卡，在“狀態(tài)”下拉列表框中選擇“不判斷”選項，如圖5.25所示。圖5.20添加交互圖標圖5.21設(shè)置目標對象

圖5.24選擇“返回”選項圖5.25選擇“不判斷”選項步驟23在“返回”群組圖標的右側(cè)再添加一個顯示圖標，在其屬性面板的“類型”下拉列表框中選擇“條件”選項，修改交互類型為“條件交互”。在“條件”文本框中輸入“TotalCorrect=9”，在“自動”下拉列表框中選擇“當由假為真”選項，如圖5.26所示。步驟24雙擊“TotalCorrect=9”顯示圖標，輸入文字“YouWin!!!”，設(shè)置字體為ArialBlack，字號大小為36，顏色為“紅色”，如圖5.27所示。圖5.26設(shè)置屬性圖5.27輸入文字步驟25單擊“運行”按鈕運行，此時將會顯示開始界面，如圖5.28所示。將鼠標放置“開始”按鈕之上，按鈕顏色會發(fā)生相應(yīng)的變化。步驟26單擊“開始”按鈕，開始拼圖游戲，如圖5.29所示。

圖5.28開始界面圖5.29開始游戲●

5.2.1按鈕交互的創(chuàng)建下面將介紹如何添加交交互按鈕，具體步驟如下。步驟1新建一個多媒體文件，在流程線上添加一個“交互”圖標，如圖5.30所示。步驟2將群組按鈕拖到交互圖標的右下角，此時彈出“交互類型”對話框，選中“按鈕”單選按鈕，單擊“確定”按鈕，如圖5.31所示。步驟3此時按鈕交互添加完成，效果如圖5.32所示。●5.2按鈕交互

按鈕交互是交互類型中簡潔明快的一種交互方式，也是在多媒體作品中使用最廣泛的一種交互形式。

圖5.31單擊“確定”按鈕圖5.30添加交互圖標圖5.32按鈕交互添加完成

●

5.2.2按鈕交互的屬性按鈕交互是交互類型中簡潔明快的一種交互方式，也是在多媒體作品中使用最廣泛的一種交互形式。單擊交互分支上的按鈕交互標志，將顯示按鈕交互的屬性面板，如圖5.33所示。圖5.33“屬性：交互圖標“按鈕交互”面板●5.3熱區(qū)域交互

熱區(qū)域交互也是一種常用的交互方式，使用該交互首先應(yīng)在演示窗口中定義一個矩形區(qū)域為熱區(qū)域。當在熱區(qū)域內(nèi)單擊、雙擊或鼠標指針經(jīng)過這一區(qū)域時，程序就會執(zhí)行相應(yīng)的交互分支。其屬性面板如圖5.34所示。圖5.34“屬性：交互圖標”面板下面將舉例進行說明，主界面出現(xiàn)分類區(qū)，共有動物區(qū)和植物區(qū)兩類，每個區(qū)域點擊進去可以看到相應(yīng)的動物和植物，鼠標移動到具體的動物或植物上可以看到他們的名稱，具體操作步驟如下。

步驟1新建一個文件，然后菜單欄中選擇“修改”|“圖標”|“屬性”命令，打開文件屬性設(shè)置對話框，設(shè)置文件大小為640*480，在選項區(qū)選中“屏幕居中”復(fù)選框，如圖5.35所示。步驟2在菜單欄中選擇“文件”|“導入和導出”|“導入媒體”命令，然后在彈出的“導入哪個文件”對話框中選擇背景圖片，再單擊“導入”按鈕導入背景圖片。從圖標欄拖放一個“交互”圖標，命名為“自然”，從圖標欄拖放一個“群組”圖標到“交互”圖標右側(cè)，彈出“交互類型”對話框，選擇“熱區(qū)域”單選按鈕，單擊“確定”按鈕，如圖5.36所示。圖5.35設(shè)置交互圖標屬性圖5.36單擊“確定”按鈕步驟3再添加兩個“群組”圖標，并將這三個“群組”圖標分別命名為“動物”、“植物”和“退出”，主流程線如圖5.37所示。步驟4雙擊交互圖標打開，在里面輸入文字，并調(diào)整好字體大小和位置，調(diào)整好熱區(qū)的位置，如圖5.38所示。

圖5.39主流程線圖5.40交互圖標步驟5雙擊“群組”圖標上的響應(yīng)類型“”符號，打開交互屬性對話框，選中“單擊”選項，并打開“鼠標指針”對話框?qū)⑹髽诵螤钤O(shè)置為“”，單擊“確定”按鈕即可，如圖5.41所示。步驟6打開交互圖標的屬性窗口，在“擦除”下拉列表框中選擇“在下次輸入之后”對交互信息的擦除方式進行控制，如圖5.42所示。步驟7雙擊“動物”群組圖標，打開設(shè)計窗口，在流程線上設(shè)計第二層交互流程，具體流程如圖5.43所示。步驟8雙擊“動物”交互圖標，在其中導入動物的圖片，輸入文字，調(diào)整好文字和熱區(qū)的位置，如圖5.44所示。步驟9設(shè)置“返回”分支為“退出交互”，如圖5.45所示，設(shè)置其他分支均為“重試”。步驟10雙擊“狼”群組圖標，在“層3”中拖入一個顯示圖標，命名為“文字”，如圖5.46所示。

圖5.42設(shè)置擦除方式圖5.41改變鼠標形狀圖5.43設(shè)計第二層交互流程圖5.45設(shè)置分支圖5.44第二層交互圖標內(nèi)容圖5.46拖入顯示圖標步驟11并打開其演示窗口，在其中輸入動物的名稱，如圖5.47所示。步驟12按照同樣的方式設(shè)置“虎”群組圖標的內(nèi)容，按照同樣的流程設(shè)置“植物”的流程線即可。

圖5.47輸入文字●5.4熱對象交互

熱對象交互與熱區(qū)域交互相比有很多相似之處，不同的是熱對象交互需要一個顯示對象作為熱對象，而熱區(qū)域交互指定的一個矩形區(qū)域；而且熱對象交互的響應(yīng)范圍是顯示對象的范圍，因此可以是任意形狀，而熱區(qū)域交互的響應(yīng)范圍只能是矩形。其屬性面板如圖5.48所示。圖5.48“屬性：交互圖標”面板

圖5.49設(shè)置文件屬性步驟3雙擊該顯示圖標，打開設(shè)計窗口，調(diào)整圖片大小，并輸入提示的文字，如圖5.51所示。步驟4從圖表工具欄向流程線上拖入一個“顯示”圖標，命名為“放大鏡”，雙擊該顯示圖標，打開設(shè)計窗口，向其中導入一張“放大鏡”圖片，單擊常用工具欄中的“運行”按鈕，播放文件，調(diào)整放大鏡的位置，如圖5.52所示。圖5.50導入“小金魚”下面將舉例進行說明，具體步驟如下。步驟1新建文件，單擊“修改”按鈕，從其彈出的下拉菜單中選擇“圖標”選項，再從其子菜單中選擇“屬性”命令，打開文件屬性設(shè)置對話框，設(shè)置文件大小為640*480，在選項區(qū)勾選“屏幕居中”，如圖5.49所示。步驟2單擊“文件”按鈕，在其彈出的下拉菜單中選擇“導入和導出”選項，再從其子菜單中選擇“導入媒體”命令，導入“小金魚”文件，如圖5.50所示。圖5.51設(shè)置“小金魚”顯示圖標內(nèi)容圖5.52導入“放大鏡”步驟6將該顯示圖標命名為“大圖片”，在顯示圖表中導入剛才金魚的圖片，并將圖片大小調(diào)整放大，設(shè)置合適的特效，如圖5.54所示。步驟7返回流程線所在的對話框，按住Ctrl鍵分別雙擊“小金魚”和“放大鏡”等顯示圖標，再雙擊空心“米字”形的熱對象圖標，將所有顯示內(nèi)容列出到演示窗口，打開“屬性”面板，當其中的“熱對象”選項卡中顯示“單擊一個圖像，把它定義為本反饋圖標的熱對象”時，單擊導入的圖標，選擇放大鏡為熱對象，匹配選擇“單擊”，鼠標指針設(shè)為手型，如圖5.55所示。步驟8單擊“運行”按鈕運行該程序，此時會出現(xiàn)如圖5.56所示的演示窗口，鼠標單擊“放大鏡”。步驟5從圖標欄向流程線上拖入一個“交互”圖標，命名為“放大”，再從圖標欄向“交互”圖標上拖入一個“顯示”圖標，彈出“響應(yīng)類型”對話框，選擇“熱對象”類型，單擊“確定”按鈕，如圖5.53所示。圖5.53設(shè)置交互類型圖5.54調(diào)整圖片大小步驟9此時就會出現(xiàn)被放大的金魚圖像，如圖5.57所示。圖5.55“熱對象”選項卡圖5.56鼠標單擊放大鏡圖5.57被放大的金魚

●5.5目標區(qū)交互

目標區(qū)響應(yīng)要求用戶將目標對象拖曳到一個特定的區(qū)域里，當用戶將對象移動到正確的位置，該對象就會停留在正確的位置，如果拖放到錯誤的位置，該對象就會自動返回。它主要用于教學模擬、圖形用戶接口的控制等。目標區(qū)域響應(yīng)是一種比較特殊的響應(yīng)方式，其屬性面板如圖5.58所示。下面將舉例進行說明，具體步驟如下。步驟1新建一個文件，單擊“修改”按鈕，從其彈出的下拉菜單中選擇“圖標”選項，再從其子菜單中選擇“屬性”命令，打開文件屬性設(shè)置對話框，設(shè)置相關(guān)屬性，如圖5.59所示。圖5.58目標區(qū)響應(yīng)流程圖5.59設(shè)置文件屬性步驟2從工具欄向流程線上拖入一個計算圖標，雙擊該圖標，向其中輸入“ResizeWindow(400,200)”來重設(shè)屏幕大小，如圖5.60所示。圖5.60重設(shè)屏幕大小步驟3在流程線上添加兩個“顯示”圖標，分別命名為“play”、“study”，并雙擊打開演示窗口，分別輸入“play”和“study”字樣，設(shè)置文字的顏色和字體，效果如圖5.61所示。步驟4在流程線上添加一個“交互”圖標，命名為“交互”，在交互圖標中輸入“游玩”和“學習”，設(shè)置合適的字體和顏色，并在該“交互”圖標右側(cè)添加一個“群組”圖標，在彈出的“交互類型”對話框中選擇“目標區(qū)”單選按鈕，單擊“確定”按鈕，如圖5.62所示。步驟5再添加兩個“群組”圖標，將這三個群組圖標分別命名為“play的正確位置”、“study的正確位置”和“錯誤位置”，流程線如圖5.63所示。圖5.61文字效果步驟6運行程序，彈出“play的正確位置”屬性對話框，在演示窗口中將play字符選為目標對象，并將play字符移動到“游玩”文字上，如圖5.64所示。圖5.63群組圖標圖5.62選擇交互類型圖5.64將play字符移動到“游玩”文字上步驟7在該屬性對話框中選擇“目標區(qū)”選項卡，然后在“放下”欄選擇“在中心定位”選項，如圖5.65所示。步驟8再選擇“響應(yīng)”選項卡，在其中的“狀態(tài)”欄中選擇“正確響應(yīng)”選項，如圖5.66所示。按照同樣的方法設(shè)置“study的正確位置”圖標。圖5.65“目標區(qū)”選項卡圖5.66“響應(yīng)”選項卡步驟9單擊“錯誤位置”群組圖標上的響應(yīng)類型標識符，彈出“響應(yīng)屬性”對話框，選擇目標對象下面的“允許任何對象”復(fù)選框，在“放下”欄中選擇“返回”選項，如圖5.67所示，并改變虛線框大小，使其覆蓋整個演示窗口。步驟10在“屬性：交互圖標”對話框中的“響應(yīng)”選項卡中的“狀態(tài)”下拉列表框中選擇“錯誤響應(yīng)”類型，如圖5.68所示。圖5.67選擇“返回”選項圖5.68選擇“錯誤響應(yīng)”選項步驟11雙擊“play的正