Ｆｌａｓｈ動畫設計中的腳本教學設計

張萬良

文章編號：1672-5913(2009)06-0084-02

摘 要：Flash的腳本是許多想深入學習動畫計者的“攔路虎”，但是我們只要采取適當的教學方法，合理的教學過程安排就會攻克這個難關。我們通過設計一個設置影片屬性的例子，讓學生理解腳本的添加，腳本的點語法，影片的常用基本屬性，兩種坐標系，并且由淺入深使學生不再對腳本畏難。本文通過案例詳細論述了如何為按鈕添加腳本的方法。

關鍵詞：人機交互；腳本；影片剪輯；按鈕；坐標系

中圖分類號：G642

文獻標識碼：B

1引言

計算機執行的指令集稱為程序，程序的另一個名字稱叫做腳本。Flash的腳本是許多想深入學習Flash游戲設計者的“攔路虎”，但是如果我們先易后難、逐步深入就可攻克這個“堡壘”。只要我們合理科學的安排教學過程中經過實踐，通過經典實例由淺入深的講解讓學生把腳本的輸入方法，語法規范，簡單腳本的含義以及最重要的坐標系搞清楚。

腳本也叫ActionScript，是Flash內置的編程語言，用它為動畫編程，可以實現各種動畫特效、對影片的良好控制、強大的人機交互以及與網絡服務器的交互。ActionScript是一門吸收了C++、Java以及JavaScript等編程語言部分特點的新的語言。它的存在確保了Flash影片較之普通的按照線性模式播放的動畫具備強大得多的人機交互能力。

2案例分析

在ActionScript中可以添加動作的對象有三種：關鍵幀、影片剪輯元件、按鈕元件。選中這些關鍵幀、按鈕和影片剪輯，打開其動作面板，你就可以看到它們都添加了哪些腳本。

下面就是我們精心設計的初級腳本案例，通過本實例我們知道如何為按鈕添加腳本，了解影片的屬性，了解點語法，了解坐標系：

(1) 首先創建元件

步驟一、創建按鈕元件

創建圓角按鈕元件，為了增加立體感，按鈕共有兩個圖層。只不過一個圖層的顏色亮一個圖層的顏色暗作為陰影。

步驟二、創建影片元件

按ctrl+R導入gif格式的動畫圖形到庫中，按F8創建影片元件，把剛才導入的圖形拖入到影片元件編輯區，最后將影片元件拖入舞臺實例名為tt。坐標為(500,350)。注意影片元件的中心注冊點為于左上角。

(2) 然后創建動畫

步驟一、動畫元素的布置

在舞臺寫上“影片屬性演示”幾個字，然后按兩次ctrl+B打散文字，再使用鉛筆工具將文字分成兩部分，分別填上不同的顏色作為裝飾，最后刪掉線條。新建一圖層命名為“按鈕”，并拖入13個按鈕元件，使用文本工具分別寫上如效果圖所示的文字。

步驟二、編寫腳本

選中“x position=400”的按鈕，添加腳本on (press) {tt._ x=400;}//設置影片的x坐標為400。

選中“y position=150”按鈕，添加on (press) {tt._y= 150;}//設置影片的y坐標為150。

選中“x scale=50”按鈕，添加on (press) {tt._ xscale= 50;}//設置影片的橫向縮為原來的50%

選中“y scale=50”按鈕，添加on (press) {tt._ yscale= 50;}// 設置影片的縱向縮為原來的50%

選中“alpha=50” 按鈕，添加on (press) {tt._alpha=50;}// 設置影片的透明度為50%

選中“rotation-30”按鈕，添加on (press) {tt._ rotation-= 30;}// 設置影片每次逆時針旋轉30度

選中“rotation+30”按鈕，添加on (press) {tt._ rotation+= 30;}// 設置影片每次順時針旋轉30度

選中“visible=1”按鈕，添加on (press) {tt._visible=1;} // 設置影片可見。

選中“visible=0” 按鈕，添加on (press) {tt._visible=0;} // 設置影片不可見。

選中“draggable lock(100,100,400,400)”按鈕，添加on (press){tt.startDrag(true,100,100,400,400)}//可拖動的影片鎖定到鼠標位置中央，范圍在左上右下的坐標值分別為100、100、400、400。

選中“stop drag”按鈕，添加on (press) {tt.stopDrag();}//停止拖動影片。

選中“復位”按鈕，添加on (press) {

tt.stopDrag();//停止拖動影片。

tt._x=500;//恢復初始橫坐標

tt._y=350;//恢復初始縱坐標

tt._rotation=0;//恢復旋轉角度

tt._xscale=100;//恢復初始的x向放大系數

tt._yscale=100;//恢復初始的y向放大系數

tt._alpha=100;//恢復初始透明度

tt._visible=1;//恢復影片為可見

}最終效果如圖1所示：

我們通過實例可很好的區別以下幾個概念：

(1) 幀動作和對象動作

幀動作是指在關鍵幀上才能添加的動作腳本。有腳本的關鍵幀上有字母“a”標識，如圖2所示。方法是選中要添加腳本的關鍵幀，打開動作面板在腳本編輯區添加。

對象動作即可以給按鈕和影片添加動作，必須首先選中對象，它不會在時間軸上出現“a”標記。On()函數是處理按鈕對象產生的事件的。而onClipEvent()是處理影片剪輯對象引起的事件的。

(2) 兩種坐標系統

在進行的Flash游戲開發的時候，很多時候都用了Flash的坐標系統，例如拼圖游戲也都用到了Flash的坐標系統，這對于了解Flash很重要。Flash中的主場景坐標系統與影片剪輯元件的坐標系統的中心原點不相同。

a. 主場景坐標系統中心原點是舞臺工作區的左上角，y軸向下是增大 x向右是增大如圖3所示。

b. 影片剪輯元件的坐標系統原點如圖所示，它是以影片剪輯元件的中心十字為原點的。y軸向下是增大 x向右是增大如圖4所示。

(3) 點語法

點語法是很多面向對象的編程語言中用來組織對象和函數的方法。

假設你想求一個數的絕對值，Flash中有一個內置的絕對值函數，它包含在ActionScript的“對象”/“核心”/“Math”/“方法”中。要使用絕對值函數，首先要使用對象名，即Math，然后是方法名abs，它們之間用符號“.”隔開，具體表示方法如下所示：

var a = Math.abs(-7);

點語法的另一個用途是指定影片剪輯的屬性。如上面將影片剪輯tt的_alpha(透明度)屬性設置為50%：

tt._alpha = 50; 如上例腳本中我們就使用點語法。

另外還可以使用語句setProperty(tt,_x,500)設置影片屬性，其語法格式：

setProperty(target,property,value/expression) 其中

target 到要設置其屬性的影片剪輯實例名稱的路徑。

property 要設置的屬性。

value 屬性的新文本值。

expression 計算結果為屬性新值的公式。

3結語

通過以上設置影片屬性的案例分析，我們介紹了如何為按鈕添加腳本，并且用一種由淺入深的方法讓學生理解了腳本的添加，腳本的點語法，影片的常用基本屬性，兩種坐標系的概念和方法。這樣的案例分析教學以易到難，讓學生更容易接受，對知識的理解可以更好。

參考文獻：

[1] 繆亮,凌忠康. 巧奪天工——Flash MX 2004入門與進階實例[M]. 北京:洪恩教育科技有限公司.

[2] Flash新手入門教程[EB/OL]. http://www.jcwcn.com/article/2008/1008/flash_31180.html.