編寫 ActionScript 的位置 2 時間軸上 ( Timeline ) 好比導演可指示各演員該如何動作 先點選某一個影格 ( Frame ), 再按 F9 開啟 動作 影格, 再撰寫程式 元件上 好比個別演員本身各要表演的動作 先點選場景上某一元件, 再按 F9 開啟 動作 影片片段 或 動

第一節課 :Flash ActionScript 2.0 學習使用介面至撰寫第一個控制動畫程式 課程名稱 : 數位媒體應用 講師 : 王穎聰 1

編寫 ActionScript 的位置 2 時間軸上 ( Timeline ) 好比導演可指示各演員該如何動作 先點選某一個影格 ( Frame ), 再按 F9 開啟 動作 影格, 再撰寫程式 元件上 好比個別演員本身各要表演的動作 先點選場景上某一元件, 再按 F9 開啟 動作 影片片段 或 動作 按鈕, 再撰寫程式 程式要寫在 on ( 事件 ) { } 或 onclipevent ( 事件 ) { } 的大括弧內 元件內 好比個別演員本身具有的能力 在元件上點滑鼠兩下, 進入元件內編輯 一樣也可在時間軸上 或內含的子元件上撰寫程式, 原理和方法與上兩大項相同

元件 ( Symbol ) 組件 ( Component ) 與變數 ( Variable ) 的命名 做好的動畫元件 或使用現成的組件, 拉到場景內使用時, 一定要命名, 程式才能對其做控制 命名最好是使用英文字母或底線 ( _ ) Macromedia 建議命名最好都是小寫字母, 若想用組合英文字來命名, 第二組以下的英文字第一個字母大寫, 如 myvideoname username 等 變數在使用前, 最好做宣告變數名稱及其型態, 如 var myage:number; 3

程式碼提示 ( Code Hint ) 程式碼提示的功能, 預設是開啟的, 若無開啟, 可於動作面板上方點選如右圖所示按鈕, 開啟程式碼提示功能 一般內建函數使用時, 當打到前括弧 ( 時, 就會跑出程式碼提示 元件或組件的命名中需加上特殊的後綴字, 才會跑出程式碼提示 當寫到有後綴字的命名時, 再打上點 (. ) 後, 程式碼提示就會顯示 元件命名如 myball_mc 變數若有宣告型態, 才會出現程式碼提示 當寫到該變數時, 再打上點 (. ) 後, 程式碼提示就會顯示 4

5 元件或組件命名之後綴字 ( suffix ) _lv LoadVars _xmlsocket XMLSocket _so SharedObject _err Error _xmlnode XMLNode _ns NetStream _date Date _xml XML _nc NetConnection _cmi ContextMenuItem _video Video _pj PrintJob _cm ContextMenu _fmt TextFormat _mcl MovieClipLoader _color Color _txt TextField _mc MovieClip _cam Camera _str String _mic Microphone _btn Button _sound Sound _lc LocalConnection _array Array 後綴字物件類型後綴字物件類型後綴字物件類型

變數的資料型態 資料類型 Boolean MovieClip null Number Object String Undefined Void 說明 基本型態, 值可以是 true 或是 false, 若已宣告但未給初始值, 則預設值為 false 複雜型態, 可以讓您藉由使用 MovieClip 類別的方法, 來控制影片片段元件 基本型態, 值僅有 null, 也就是沒有值, 當變數宣告為複雜型態卻未給定值時, 其值就是 null 但 Object 例外, 其未給定值時, 內容為 undefined 基本型態, 可以代表整數 無正負號的整數和浮點數值 複雜型態, 是許多屬性的集合, 而屬性可由使用者自行增加 基本型態, 可以包含字母 數字和標點符號 基本型態, 僅包含一個值 undefined 這是宣告為 Object 的預設值 複雜型態, 只有一個值 void, 在函數定義中用來代表不會傳回值的函數 6

常用元件屬性 7 語法 : 元件名稱._ 屬性 元件名稱. 之後緊接著 _, 就是指定元件的屬性, 若未緊接著 _, 就是指定元件的方法 屬性是指元件本身的特徵, 方法是指元件可運作的功能 物件座標位置 : 物件名稱._x 物件名稱._y 物件寬高 : 物件名稱._width 物件名稱._xscale 物件名稱._height 物件名稱._yscale 物件透明度 物件名稱._alpha 物件是否顯示 物件名稱._visible ( alpha 值為 0 與 visible 值為 false 意義不同 ) 物件選轉角度 物件名稱._rotation

測試影片與測試用之偵錯函式 測試影片請按 Ctrl + Enter 測試用之最常用的偵錯函式就是 trace trace("xxxxxxxxxxxxx"); 常常列印一串字串, 以代表程式有執行到該行之前的程式 trace( myball_mc._x ); 列印出 myball_mc 這元件所在的 x 軸座標, 僅印出一組數字 trace("x 軸座標 = " + myball_mc._x ); 印出類似 x 軸座標 = 250 trace( "(x,y)=(" + myball_mc._x + ", " + myball_mc._y + " ) " ) 印出類似 (x,y)=( 250, 200 ) + 號用於字串代表字串的串接, 用於數字則代表相加 ; 若 + 號前後是一個字串與一個數字, 則屬於串接形式 8

運算式 ( 或陳述式 ) 運算符號 意義 運算符號 意義 var mycount:number = 0; var myjudge, i, j:boolean; + - * / 加減乘除 ++ -- && 加 1 減 1 邏輯 AND 邏輯 OR i = true; j = false; // mycount 累加 1 mycount++; trace( mycount ); // 做一些邏輯運算後儲存至 myjudge myjudge =!( i && j); trace( myjudge ); 9 % 取餘數! 邏輯 NOT 連續兩個斜線之後的敘述代表註解此程式輸出結果如下 : 1 true

指派運算 運算符號 = += -= *= /= %= 意義 將等號右邊的值設定給等號左邊變數 等號左邊變數加上等號右邊的值並儲存 等號左邊變數減掉等號右邊的值並儲存 等號左邊變數乘以等號右邊的值並儲存 等號左邊變數除以等號右邊的值並儲存 等號左邊變數除以等號右邊的值所得餘數儲存起來 x += 5; 相當於 x = x + 5; var num:number=18; num %= 7; trace( num = + num ); 列印出結果 : num = 4 10

判斷式 運算符號 意義 運算符號 意義 var mystring:string= 300 ; var mymoney:number=300; < <= ==!= 小於小於或等於等於不等於 > >= ===!== 大於 大於或等於 等於 ( 連資料型態都要相同 ) 不等於 ( 連資料型態都要相同 ) trace( mystring ); trace( mystring + mymoney ); trace( mystring == mymoney ); trace( mystring === mymoney ); trace( mystring!== 300 ); trace( mystring!== 300 ); 11 列印結果如下 : 300 300300 true false false true

if 條件陳述式 12 if ( 判斷式 ) { // 當判斷式成立 ( true ) 時, 運算式 ; // 執行大括弧內的程式, // 不成立 ( false ) 則跳過大括弧 } if ( 判斷式 ) { // 當判斷式成立時, 運算式 ; // 執行 if 後大括弧內的程式, } else { // 不成立則執行 else 後大括弧內的程式運算式 ; } if ( 判斷式 1 ) { // 當判斷式 1 成立時, 運算式 ; // 執行 if 後大括弧內的程式, } else if ( 判斷式 2 ) { // 當判斷式 1 不成立, 運算式 ; // 但判斷式 2 成立時, // 執行 else if 後大括弧內的程式, } else { // 當判斷式 1, 2 都不成立時, 運算式 ; // 執行 else 後大括弧內的程式 }

switch 條件陳述式 13 switch ( 變數或運算式 ) { // 檢測小括弧內的變數或運算式的值, case 值 1: // 當值符合哪一個 case, 運算式 ; // 則進入該 case 執行運算式, // 直到遇到 break 為止, 就跳出大括弧 ; break; // 若沒有一個 case 值符合, case 值 2: 運算式 ; break; case 值 3: 運算式 ; break; default : 運算式 ; break; } // 則執行 default 下的內容 // 值可以是數字或字串

for 迴圈 語法 for ( 初始值 ; 判斷式 ; 運算式 ) { 運算式 ; } for 迴圈的執行模式是 1. 先執行初始值, 並檢查判斷式是否成立, 若成立則執行大括弧內的運算式, 不成立則跳出 for 迴圈 2. 大括弧內的運算是執行完後, 再執行小括弧內的運算式, 並檢查判斷式是否成立, 若成立則執行大括弧內的運算式, 不成立則跳出 for 迴圈 3. 重複執行步驟 2 14

for 迴圈 範例 var sum:number=0; for ( var i=1; i<=10; i++ ) { sum += i; // 相當於 sum = sum + i; } // = 號左邊將 sum 和 i 值相加, trace ( "sum=" + sum); // 再存回等號左邊的 sum 執行初始值 i=1, 並檢查判斷式 i<=10 成立, 因此執行 sum += i; 此時 sum 的值為 1 再執行小括弧內的運算式 i++,i 的值變為 2, 再檢查判斷式 i<=10 成立, 因此再執行 sum += i;sum 的值變成 1+2 = 3 再執行小括弧內的運算式 i++,i 的值變為 3, 再檢查判斷式 i<=10 成立, 因此再執行 sum += i;sum 的值變成 3+3 = 6 再執行小括弧內的運算式 i++,i 的值變為 10, 再檢查判斷式 i<=10 成立, 因此再執行 sum += i;sum 的值變成 45+10 = 55 再執行小括弧內的運算式 i++,i 的值變為 11, 再檢查判斷式 i<=10 不成立, 因此跳出 for 迴圈, 執行輸出的動作 執行列印結果為 : sum=55 此程式乃執行 1 累加到 10 的運算 15

while 迴圈 語法 while ( 判斷式 ) { 運算式 ; } while 迴圈的執行模式是 1. 檢查判斷式是否成立, 若成立則執行大括弧內的運算式, 不成立則跳出 while 迴圈 2. 重複執行步驟 1 16

17 while 迴圈 範例 也用 while 迴圈來寫 1 累加到 10 的範例 var i:number=1; var sum:number=0; while ( i <= 10 ) { sum += i; i++; } trace( "sum=" + sum); 首先先設定初始值 i=1, sum=0 接下來判斷 i 值為 1 是否小於等於 10, 成立, 執行大括弧內之 sum 累加 i, 則 sum 值變為 1, 且下一行 i 累加成 2 再判斷 i 值為 2 是否小於等於 10, 成立, 執行大括弧內之 sum 累加 i, 則 sum 值變為 3, 且下一行 i 累加成 3 再判斷 i 值為 3 是否小於等於 10, 成立, 執行大括弧內之 sum 累加 i, 則 sum 值變為 6, 且下一行 i 累加成 4 再判斷 i 值為 10 是否小於等於 10, 成立, 執行大括弧內之 sum 累加 i, 則 sum 值變為 55, 且下一行 i 累加成 11 再判斷 i 值為 11 是否小於等於 10, 不成立, 跳出 while 迴圈, 列印 sum 的值 輸出結果為 sum=55

while 迴圈 另一種語法 do { 運算式 ; } while ( 判斷式 ); while 迴圈的執行模式是 1. 先執行一次大括弧內的運算式 2. 檢查判斷式是否成立, 若成立則執行大括弧內的運算式, 不成立則跳出 while 迴圈 3. 重複執行步驟 2 do while 迴圈和 while 迴圈不同的是 do while 一定至少會執行一次 18

巢狀 上述的 if, switch, for, while 等都可以互相包含使用, 這種一層包一層的方式, 稱之為巢狀 for ( var i=2; i<10; i++) { for ( var j=1; j<10; j++) { trace( i + "*" + j + "=" + i*j ); } } 19 以上的程式是列印九九乘法表 當 i 值為 2 時,j 的值會自 1 跑到 9, 各印出與 i 的乘積 i 值變為 3 時,j 的值會再自 1 跑到 9, 再各印出與 i 的乘積 以此類推, 直做到 9 * 9 為止 當所有程式執行完後,i 和 j 的值都會變為 10

影片除錯 遇到較複雜的程式, 有時候光用 trace 來找程式的錯誤 ( debug ) 是相當麻煩的方式,Flash 提供另一種除錯方式 影片除錯 ( Debug Movie ) 要使用影片除錯, 首先要在程式中設定中斷點 ( Breakpoint ) 之後再採用 Ctrl + Shift + Enter 來執行程式, 或點選 控制 / 影片除錯 ( Control / Debug Movie ) 可嘗試將九九乘法程式來做影片除錯 20

21 影片除錯畫面

Flash 時間軸的執行模式 如果 Timeline 上只有一個影格 ( Frame ), 則 Flash 執行完該 Frame 後就會停止 ; 但若 Timeline 上有兩個以上的影格, 則 Flash 執行完所有 Frame 後, 會不斷重複再執行 只執行一次就停止 會一直不斷的重複執行 Frame 1,2 22

第一個控制元件的程式 說明 讓場景上的元件緩慢的向右移動 Timeline 上放置兩個圖層 ( layer ), 第一個 layer 更名為 Action ( 主要放程式部份 ), 第二個 layer 更名為 circle ( 主要放元件部份 ), 每個 layer 第一個 frame 為關鍵影格 ( keyframe ), 第二個 frame 為影格 首先在 circle layer 的 keyframe 上, 場景內畫個圓, 轉成影片片段 ( MovieClip ) 元件, 並為場景上的圓命名為 myball_mc, 放在座標 ( 0,200 ) 在 Action layer 的 keyframe 上, 動作 影格 內寫下 myball_mc._x += 1; 執行看結果 23

24 第一個控制元件的程式 圖示