Authorware-動畫與交互實現(xiàn)

1、5 Authorware 7 動畫與交互的實現(xiàn) 5.1 動畫設計的基本步驟動畫設計的基本步驟5.2 移動圖標的屬性移動圖標的屬性5.3 五種動畫設計方式五種動畫設計方式5.4 利用變量控制動畫利用變量控制動畫 5.5 交互功能的實現(xiàn)交互功能的實現(xiàn) 5.1 動畫設計的基本步驟動畫設計的基本步驟 圖5-1 運行畫面 圖5-2 程序暫停出現(xiàn)【屬性：移動圖標】對話框 圖5-3 【版面布局】標簽 5.2 移動圖標的屬性移動圖標的屬性 圖5-4 五種動畫設計方式 圖5-5 【屬性：移動圖標】對話框 5.3 五種動畫設計方式五種動畫設計方式 5.3.1 指向固定點指向固定點 圖5-6 【版面布局】標簽 圖5

2、-7 【移動】標簽 通過實例來驗證一下選擇不同的【執(zhí)行方式】時程序的運行情況 圖5-8 輸入的文本 5.3.2 指向固定直線上的某點指向固定直線上的某點 圖5-9 【版面布局】標簽 圖5-10 【移動】標簽 5.3.3 指向固定區(qū)域內的某點指向固定區(qū)域內的某點 圖5-11 【版面布局】標簽 下面做一個鼠標跟隨動畫的練習： 1) 建立一個新文件，在流程線上添加一個顯示圖標，命名為“圓形”。 2) 雙擊“圓形”顯示圖標，在演示窗口中畫一個紅色的圓。 3) 向流程線上添加一個移動圖標，并命名為“跟隨”。 4) 運行程序，當程序遇到空白的移動圖標后會自動停止，并彈出【屬性：移動圖標】對話框。 5) 在

3、對話框中選擇【指向固定區(qū)域內的某點】方式，然后拾取演示窗口中的紅色的圓，通過拖曳鼠標確定移動區(qū)域。 6) 在【目的地】選項中輸入兩個系統(tǒng)變量：cursorX和cursorY。這兩個變量的作用是讓紅色的圓捕捉光標位置，如圖5-12所示。 圖5-12 【版面布局】標簽 7) 在【移動】標簽中設置各項參數(shù)，如圖5-13所示。 圖5-13 【移動】標簽 8) 關閉對話框。運行程序時就會發(fā)現(xiàn)紅色的圓跟隨鼠標移動。 5.3.4 指向固定路徑的終點指向固定路徑的終點 圖5-14 【移動】標簽 圖5-15 【版面布局】標簽 圖5-16 創(chuàng)建的運動路徑 圖5-17 圓滑路徑 5.3.5 指向固定路徑上的任意點指

4、向固定路徑上的任意點 圖5-18 【版面布局】標簽 5.4 利用變量控制動畫利用變量控制動畫 使用變量來控制對象的循環(huán)運動。 1) 建立一個新文件，在流程線上添加一個顯示圖標，命名為“圓形”，然后雙擊“圓形”顯示圖標，在演示窗口中畫一個紅色的圓形。 2) 向流程線上添加一個移動圖標，并命名為“循環(huán)”。 3) 雙擊“循環(huán)”移動圖標，彈出【屬性：移動圖標】對話框。 4) 在對話框中選擇【指向固定路徑的終點】方式，拾取演示窗口中的紅色圓形，通過拖曳鼠標確定運動路徑。然后在【移動時】選項中輸入“x=1”，其它設置如圖5-19所示。 圖5-19 設定運動條件 5) 單擊 按鈕，如果變量“x”沒有在其它地

5、方使用過，則彈出【新的變量】對話框，直接單擊 按鈕即可。 6) 向流程線上添加一個計算圖標，雙擊該圖標，在打開的計算窗口中輸入“x=1”后關閉窗口。 7) 運行程序，可以看見圓形在指定的路徑上往復不停地旋轉。 5.5 交互功能的實現(xiàn)交互功能的實現(xiàn) 5.5.1 認識交互圖標認識交互圖標 圖5-20 【響應類型】對話框 圖5-21 分支結構 5.5.2 按鈕響應按鈕響應 1. 使用按鈕響應使用按鈕響應 1) 新建一個文件。 2) 向流程線上添加一個計算圖標，命名為“窗口”。 3) 向流程線上添加一個交互圖標，并命名為“交互”。 4) 再拖曳一個計算圖標至交互圖標的右側，在彈出的【響應類型】對話框中

6、選擇【按鈕】選項。 5) 單擊按鈕，則在設計窗口中建立了交互分支結構，將計算圖標命名為“退出”。 6) 雙擊“退出”計算圖標，在打開的計算窗口中輸入“Quit（）”。 7) 關閉計算窗口。圖5-22 計算窗口2. 設置按鈕響應屬性設置按鈕響應屬性 圖5-23 【屬性：響應】對話框 圖5-25 設置按鈕始終有效 3. 改變按鈕的大小、位置與外觀改變按鈕的大小、位置與外觀 圖5-26 【按鈕】對話框 圖 6-27 圖5-28 【按鈕編輯】對話框 4. 按鈕響應實例 下面，使用按鈕響應制作一個簡單的多媒體課件。 1) 建立一個新文件。在流程線上添加一個計算圖標，命名為“窗口”。 2) 雙擊流程線上的

7、“窗口”計算圖標，將演示窗口大小設為（520，280）。 3) 向“窗口”計算圖標的下方添加一個顯示圖標，命名為“背景”。 4) 用前面學過的方法，向“背景”圖標中導入一幅圖片作為背景。 5) 向流程線上添加一個交互圖標，并命名為“交互”。 6) 拖曳一個計算圖標至交互圖標的右側，在彈出的【響應類型】對話框中選擇【按鈕】選項，然后單擊按鈕，將圖標命名為“退出程序”。 7) 在交互圖標右側添加四個群組圖標，并分別命名為“復習舊課”、“導入新課”、“講授內容”和“請你欣賞”。這時不再彈出【響應類型】對話框，將使用第一次設置的響應類型，該流程線如圖5-29所示。 圖5-29 流程線 8) 運行程序，

8、如果發(fā)現(xiàn)按鈕分布不符合要求，可以雙擊交互圖標，在演示窗口中調整按鈕的位置和大小。 9) 調整按鈕后運行程序，結果運行畫面如圖5-30所示。 圖5-30 運行畫面 10) 用前面學過的方法，為每一個按鈕選擇手形光標。運行程序時，當光標指向按鈕時將出現(xiàn)手形光標。 11) 雙擊“復習舊課”群組圖標，打開其二級流程線。 12) 向該流程線上添加一個顯示圖標，在顯示圖標的演示窗口中繪制一個小的“演示窗”作為復習舊課的承載窗口。 13) 用戶可以根據(jù)愛好和需要在流程線上添加其它圖標，以豐富課件，如文字、音樂、電影等。在此我們添加一個顯示圖標，在其演示窗口中輸入“溫習單詞”、“good好的”、“bad壞的”

9、等內容。 14) 運行程序時，單擊 按鈕，將出現(xiàn)如圖5-31所示的畫面。 圖5-31 程序運行畫面 15) 用同樣的方法，可以為其它群組圖標設置所需的內容。 5.5.3 熱區(qū)響應熱區(qū)響應 1. 使用熱區(qū)響應使用熱區(qū)響應 將前面用按鈕控制的課件修改為用熱區(qū)控制的課件。其具體的操作步驟如下： 1) 打開前面保存的課件。 2) 在“復習舊課”群組圖標的響應類型標記上雙擊鼠標左鍵，彈出【屬性：響應】對話框。 3) 在對話框的【類型】選項列表中選擇【熱區(qū)響應】選項。 4) 單擊按鈕，可以看到“復習舊課”群組圖標的響應類型標記發(fā)生了變化，由按鈕響應的形狀變?yōu)闊釁^(qū)響應的形狀。 5) 運行程序，可以發(fā)現(xiàn)畫面中

10、的按鈕消失了，但當光標指向按鈕所在區(qū)域時仍將變?yōu)槭中喂鈽耍ㄈ鐖D5-32所示），單擊鼠標左鍵將出現(xiàn)“復習舊課”的內容。 圖5-32 運行畫面 6) 如果需要修改熱區(qū)，可以雙擊交互圖標，打開演示窗口。 7) 單擊“復習舊課”熱區(qū)標志，則熱區(qū)周圍出現(xiàn)八個控制點。將光標指向控制點按住鼠標左鍵拖曳，可以改變熱區(qū)的大小；將光標指向熱區(qū)標志后按住鼠標左鍵拖曳，可以改變熱區(qū)的位置。如果仍要在演示窗口中出現(xiàn)“復習舊課”字樣，可以重新輸入“復習舊課”字樣，然后用熱區(qū)將其覆蓋即可，如圖5-33所示。 圖5-33 修改熱區(qū)標志 8) 用同樣的方法修改其它的按鈕。運行程序時的畫面如圖5-34所示。 圖5-34 運行畫面

11、 2. 設置熱區(qū)響應的屬性設置熱區(qū)響應的屬性 圖5-35 【響應】標簽 圖5-36 選擇【重試】時的流程走向 圖5-37 選擇【繼續(xù)】時的流程走向 圖5-38 選擇【退出交互】時的流程走向 圖5-39 選擇【返回】時的流程走向 5.5.4 熱對象響應熱對象響應 制作該課件的具體操作步驟如下： 1) 建立一個新文件。在流程線上添加一個計算圖標，命名為“窗口”，并將演示窗口的大小設為（420，280）。 2) 在“窗口”圖標下面添加三個顯示圖標，分別命名為“?！薄ⅰ榜R”和“羊”，并分別導入相應的圖片，設置各圖片的遮蓋模式為【透明】。 3) 在流程線上選擇這三個顯示圖標，單擊菜單欄中的【修改】/【群

12、組】命令，將三個顯示圖標組合為一個群組圖標，并將其命名為“對象”。 4) 在“對象”群組圖標的下面添加一個交互圖標，命名為“介紹”。 5) 在交互圖標的右側添加一個群組圖標，在彈出的【響應類型】對話框中選擇【熱對象響應】類型。將該群組圖標命名為“介紹?！?，此時的流程線如圖5-40所示。 6) 雙擊“介紹?！比航M圖標，在其二級流程線上添加一個顯示圖標和一個聲音圖標(如圖5-41所示)，并分別載入一段文字和解說詞。 7) 運行程序，彈出【屬性：響應】對話框，單擊演示窗口中的“?！眻D片，將它的【類型】定義為熱對象，則“?！眻D片出現(xiàn)在對話框左上角的預覽窗口中，同時其圖標名稱出現(xiàn)在【熱對象】選項文本框中

13、，說明該對象已被選中，如圖5-42所示。 8) 在【匹配】選項中選擇【指針在對象上】選項，再用前面介紹的方法將【鼠標指針】設置為手形光標。 9) 單擊按鈕，關閉對話框。 10) 運行程序，當光標移到“?！眻D片上時就會出現(xiàn)文字和解說詞，如圖5-43所示。 圖5-40 程序流程線 圖5-41 二級流程線 圖5-42 定義熱對象 圖5-43 程序運行畫面 11) 用同樣的方法，可以為“馬”和“羊”進行上述設置，其最終程序如圖5-44所示。 圖5-44 程序流程線 5.5.5 目標區(qū)響應目標區(qū)響應 圖5-45 運行畫面 使用目標區(qū)響應制作該課件的操作步驟如下： 1) 建立一個新文件。在流程線上添加一個

14、計算圖標，命名為“窗口”，并將演示窗口的大小設為（420，280）。 2) 在“窗口”圖標的下面添加一個顯示圖標，命名為“目標區(qū)域”。 3) 雙擊“目標區(qū)域”圖標，在打開的演示窗口中繪制一個簡單的上下窗格。在上方的窗格中輸入“將右側的單詞拖放到左側相應的圖片上”；在下方窗格導入三幅圖片，如圖5-46所示。 4) 在“目標區(qū)域”圖標的下方添加一個顯示圖標，命名為“蘋果”。 5) 雙擊“蘋果”圖標，在打開的演示窗口中輸入單詞“apple”。 圖5-46 演示窗口內容 6) 用同樣的方法，在流程線上再添加兩個顯示圖標，并分別命名為“豬”和“鳥”，然后在其演示窗口中分別輸入單詞“pig”和“bird”

15、，此時程序的流程線如圖5-47所示，運行的畫面如圖5-48所示。 7) 在“鳥”圖標的下方添加一個交互圖標，命名為“判斷”。 8) 向交互圖標的右側添加一個群組圖標，在彈出的【響應類型】對話框中選擇【目標區(qū)】響應，將該圖標命名為“鳥正確”；在“鳥正確”圖標的右側再添加一個群組圖標，命名為“鳥錯誤”，如圖5-49所示。 圖5-47 程序流程線 圖5-48 運行畫面 圖5-49 程序流程線 10) 根據(jù)對話框的提示，單擊演示窗口中的“bird”單詞作為目標對象，則虛線框將自動附著到單詞上。再根據(jù)對話框的提示，將“bird”單詞（注意不是虛線框）拖到鳥圖片上，然后調整虛線框使之完全包圍鳥圖片，如圖5

16、-50所示。 圖5-50 設定目標區(qū)域 11) 在【目標區(qū)】標簽下的【放下】選項中選擇【在中心定位】，注意此處不選擇【允許任何對象】選項，以便使本響應只對“鳥”有效。 12) 在【響應】標簽下的【狀態(tài)】選項中選擇【正確響應】選項。 13) 單擊 按鈕，又彈出另一個【屬性：響應】對話框，這是“鳥錯誤”分支響應的屬性對話框。此處仍然選擇“bird”單詞為目標對象，然后拖動“bird”單詞到演示窗口的中央位置，調整虛線框使之包圍演示窗口的下方窗格，如圖5-51所示。 圖5-51 設定目標區(qū)域 14) 在【目標區(qū)】標簽下的【放下】選項中選擇【返回】選項，在【響應】標簽下的【狀態(tài)】選項中選擇【錯誤響應】

17、選項。 15) 單擊 按鈕，關閉對話框。此時，主流程線上的“鳥正確”的前面多了一個“+”號，“鳥錯誤”的前面多了一個“-”號，如圖5-52所示。 16) 雙擊“鳥正確”群組圖標，在打開的二級流程線上添加一個顯示圖標，在其【演示窗口】中輸入“移動正確”字樣。再添加一個計算圖標，在打開的計算窗口中輸入“Movable鳥:=FALSE”，如圖5-53所示。 圖5-52 程序流程線 圖5-53 設置二級流程線 17) 打開“鳥錯誤”群組圖標，在二級流程線上添加一個顯示圖標，在其演示窗口中輸入“移動錯誤，請再試一次”的提示文字。 18) 運行程序時可以發(fā)現(xiàn)，當單詞移動正確時，將顯示移動正確的提示，并且單

18、詞不能再被移動；當單詞移動錯誤時，將返回原來的位置，同時出現(xiàn)移動錯誤的提示。 19) 用同樣的方法，分別建立“apple”和“pig”兩個單詞的響應分支。 20) 在交互圖標的最右側再添加一個群組圖標。 21) 雙擊其響應類型標記，打開【屬性：響應】對話框，在【類型】選項中選擇【條件響應】類型。 22) 在【條件】標簽的【條件】文本框中輸入變量“AllCorrectMatched”，該變量用于定義當所有正確響應都實現(xiàn)時，變量為“真”，否則為“假”。在【自動】選項列表中選擇“為真”選項，該選項用于定義當條件“為真”時系統(tǒng)自動執(zhí)行此分支，如圖5-54所示。 23) 在【響應】標簽下【分支】選項中選

19、擇【退出交互】選項。 24) 單擊 按鈕，關閉對話框。 25) 打開該群組圖標，在其二級流程線上添加一個顯示圖標，輸入“全部正確，祝賀你！”的字樣；再添加一個等待圖標，設為等待3秒；最后再用一個計算圖標退出程序，整個課件的程序流程線如圖5-55所示。 圖5-54 【條件】標簽 圖5-55 程序流程線 5.5.6 下拉菜單響應下拉菜單響應 下面我們通過一個實例介紹制作下拉菜單的具體步驟： 圖5-55 程序流程線 圖5-56 程序流程線 圖5-57 修改后的流程線 圖5-58 【屬性：響應】對話框 圖5-59 程序流程線 圖5-60 運行畫面 圖5-61 程序流程線 圖5-62 運行畫面 5.5.

20、7 條件響應條件響應 圖5-63 【屬性：響應】對話框 5.5.8 文本輸入響應文本輸入響應 圖5-64 輸入名字前后的演示窗口 其具體操作步驟如下： 1) 建立一個新文件。用計算圖標將演示窗口的大小設定為（320，280）。 2) 在計算圖標的下面添加一個交互圖標，命名為“學生檔案簿”。 3) 運行程序之后雙擊交互圖標，在演示窗口中繪制一條水平線。 4) 在水平線的上方輸入“請輸入”字樣（注意選擇【透明】模式），并選擇所需的字體和大小，將其調整至合適位置。 5) 在交互圖標的右側添加一個群組圖標，在彈出的【響應類型】對話框中選擇【文本輸入】響應類型，然后將圖標命名為“王小二”。 6) 運行程

21、序之后雙擊交互圖標，可以看到演示窗口中有一個虛線框，該虛線框就是用于輸入文本內容的區(qū)域，如圖5-65所示。 圖5-65 文本響應區(qū)域 圖5-66 鍵入“王小二”檔案 5.5.9 按鍵響應按鍵響應 1) 建立一個新文件。用計算圖標將演示窗口設定為（320，280），并將其命名為“窗口”。 2) 在計算圖標下面添加一個顯示圖標，命名為“天空”，導入一幅天空圖像。 3) 在“天空”圖標下面再添加一個顯示圖標，命名為“圓”，雙擊該圖標，在打開的演示窗口中繪制一個填充了顏色的圓，并將圓的覆蓋模式設置為【反轉】。 4) 在“圓”圖標下面添加一個移動圖標，命名為“搜索”。 5) 運行程序，彈出【屬性：移動圖標】對話框。 6) 在【類型】選項列表中選擇【指定固定區(qū)域內的某點】，然后根據(jù)【版面布局】標簽的提示拖動“圓”來設置一個移動區(qū)域，并設置【目的地】的值分別為X、Y兩個變量，如圖5-67所示。 圖5-67 【屬性：移動圖標】對話框 7) 在【移動】標簽下的【執(zhí)行方式】選項中選擇【永久】方式。 8) 單擊 按鈕可關閉對話框。 9) 在“搜索”圖標下面再添加一個交互圖標，命名為“控制”。 10) 在交互圖標的右側拖入一個計算圖標，在彈出的【響應類型】對話框中選擇【按鍵】類型，將計算圖標命名為“LeftArrow”，使其對應于左方向鍵。 11) 雙擊“LeftAr