第11章交互式動畫

主要內容：課堂演示講授時間：2課時交互的概念鼠標事件的使用按鈕的使用11.1交互式動畫基礎知識

第11章交互式動畫主要內容：課堂演示講授時間：2課時交互【展示任務】第11章交互式動畫

【展示任務】第11章交互式動畫【知識講解】

一、交互及交互式動畫的概念

交互：就是由用戶利用各種方法，如按鈕、菜單、按鍵、文字輸入等，來控制和影響動畫的播放。交互的目的就是使計算機與用戶進行對話（操作），其中每一方都能對另一方的指示做出反應，使計算機程序（動畫也是一種程序）在用戶可理解、可控制的情況下順利運行。交互式動畫：指在動畫作品播放時支持事件響應和交互功能的一種動畫，也就是說，動畫播放時可以接受用戶控制，而不是像普通動畫一樣從頭播放到尾。交互的實現一般是利用鼠標對按鈕的操作來完成的，此外也可以通過鍵盤事件來響應。典型的交互式動畫，可以利用按鈕控制動畫的播放、暫停、停止或逐幀變化。第11章交互式動畫

【知識講解】一、交互及交互式動畫的概念交互：第11章【知識講解】

二、交互動作是如何實現的呢？

它是通過一系列的ActionScript代碼來實現的。利用ActionScript的函數、方法和時間，能夠方便的為動畫添加交互功能。動作語句的調用必須在某種事件的觸發下進行的，而且這種事件一般是由用戶的操作觸發的。這里所謂的時間，實際上就是用戶對動畫的某種設定或交互。動畫幀只有一種事件，即被載入（播放）時，其中的動作腳本（如果有的話）就能夠得到執行。相對而言，對象（按鈕或影片剪輯）的事件就是豐富了許多。第11章交互式動畫

【知識講解】二、交互動作是如何實現的呢？【知識講解】

三、鼠標事件

鼠標事件及含義，見下表所示：事件名稱說明CLICK鼠標左鍵在對象上單擊的事件DOUBLE＿CLICK鼠標左鍵在對象上雙擊的事件MOUSE＿DOWN鼠標左鍵在對象上被按下的事件MOUSE＿UP鼠標左鍵在對象上被松開的事件MOUSE＿MOVE鼠標移動的時間MOUSE＿OUT鼠標離開對象的事件MOUSE＿OVER鼠標移動到對象上的事件第11章交互式動畫

【知識講解】三、鼠標事件鼠標事件及含義，見下表所示：【知識講解】

四、按鈕的結構

按鈕有四種狀態結構：彈起、指針、按下、點擊，分別在時間軸的4幀中，每幀對應不同的狀態。如下圖所示：可以看到，FlashCS5的按鈕有一個4幀的時間軸，分別表示按鈕在【彈起】、【指針經過】、【按下】和【點擊】狀態下的外觀。這說明，按鈕實際上是一個可以交互的影片剪輯，不過它的時間軸并不能直接播放，而是根據鼠標的操作跳轉到相應的幀上。

第11章交互式動畫

【知識講解】四、按鈕的結構按鈕有四種狀態結構：彈起、指【實例講解】

任務1：鼠標事件

創建一個影片剪輯元件，使之能夠對各種鼠標事件進行響應并在一個文本框中顯示鼠標事件的名稱。①新建一個Flash文檔。選擇【插入】/【新建元件】命令，創建一個“影片剪輯”類型的元件“元件1”。②在“元件1”中，繪制一個矩形框。矩形的色彩、邊框線的樣式，都可以根據讀者的喜好選擇。③返回“場景1”中，將“元件1”拖入舞臺，在【屬性】面板中。設置實例名稱為“mc”。第11章交互式動畫

【實例講解】任務1：鼠標事件創建一個影片剪輯元件，使之【實例講解】

④創建一個靜態文本框，輸入文本“理解按鈕事件”。⑤創建一個文本框。設置為“動態文本”，實例名稱為“info”。⑥選擇第1幀。打開【動作】面板。輸入如下代碼：⑦測試動畫。第11章交互式動畫

【實例講解】④創建一個靜態文本框，輸入文本“理解按鈕【實例講解】

任務2：按鈕的結構①創建一個新的Flash文檔，并創建一個“按鈕”類型的元件。②從元件的時間軸上，可以看到該按鈕的四種結構。③在【彈起】狀態幀繪制一個漸變填充的橢圓。④在其他各狀態幀分別按<F6>鍵，插入關鍵幀，然后根據需要分別修改各幀圖形的顏色，甚至形狀也可以任意修改。⑤返回“場景1”中，將制作的按鈕元件拖入舞臺中。⑥測試動畫，可以看到按鈕處在不同狀態時表現出不同的外觀。按鈕是交互式動畫的最常用的控制方式。在Flash中，按鈕是作為一個元件來制作的。

第11章交互式動畫

【實例講解】任務2：按鈕的結構①創建一個新的Fla【完成任務】

任務1：完成“鼠標事件”任務2：完成“按鈕使用”第11章交互式動畫

【完成任務】任務1：完成“鼠標事件”任務2：完成“按【課堂小結】

本節主要介紹了交互式動畫的概念、鼠標事件、按鈕結構等，通過實際的兩個任務讓我們掌握了鼠標事件的使用方法和按鈕的使用方法。引申出一般交互式動畫的制作方法。第11章交互式動畫

【課堂小結】本節主要介紹了交互式動畫的概【作業】

1．鼠標事件中CLICK和DOUBLE＿CLICK有什么區別？2．將按鈕結構中各幀圖形變化，看看有什么效果