December 2, 2007

(1)

著作權所有 © 旗標出版股份有限公司

Flash 動態網頁設計入門

December 2, 2007

(2)

Page 2 December 2, 2007

大綱

•

17-1 變數與變數範圍

•

17-2 資料類型

•

17-3 運算子

•

17-4 使用者自訂函數

•

17-5 輸入文字欄位

•

17-6 判斷條件與迴圈

(3)

17-1 變數 Variable

•

變數

▫

用來讓程式暫存資料

▫

變數宣告：

var VarName;

▫

變數宣告並強制型態：var VarName:type;

▫

例：

var x;

var x:String;

▫

不需要事先宣告也可以直接使用變數

▫

事先宣告變數的意思是告訴 Flash，程式待會兒需要使用這個名稱的變數，請電腦在一開始執行程式時就為該變數保留一些記憶體空間

▫

若是沒有事先宣告，則 Flash 會在該變數第一次出現時，才依需要分配記憶體空間給它。

(4)

宣告變數與指定變數值

•

不過有經驗的程式設計師都會建議你在使用變數前先行宣告，這樣一方面可以確認變數的有效範圍，避免程式錯誤；另一方面，養成這樣的好習慣，對於日後學習其它規定更嚴格的程式語言時會很有幫助（許多程式語言如 Java 、C等在使用變數時必須事先宣告）。

(5)

var

• var

指令可用來宣告變數，位於陳述式/變數類別下，請在變數欄輸入欲宣告的變數名稱：

(6)

變數的命名規則

•

雖然 Flash 可以接受任何 Unicode 文字（包含中文），但為了確保與其它版本的 Flash 相容，也要確保能與其它網頁程式（JavaScript、ASP、

PHP等）相容，變數名稱最好以英文命名

•

變數名稱不能使用除了「_」（底線）之外的特殊符號

•

變數名稱中間也不能有空格

(7)

變數的命名規則

•

變數名稱不能使用 ActionScript 的關鍵字（如：

play、stop等），也不能使用布林值（true、

false）；一般變數命名習慣使用「my」開頭，

後面接著第一個字母大寫的單字，例如「myVar」

•

變數沒有大小寫之分，所以「car」、「CAR」、

「Car」都會被當成同一個變數；建議統一大小寫的寫法

•

最好使用有意義的變數名稱，例：「myScore」；

不要命名成「a1」、「a2」、「x 」之類無意義的名稱，以免日後連自己都不清楚該變數的用途

（善用註解輔助）

(8)

變數的有效範圍 Scope

•

ActionScript 中的變數可分為時間軸變數、區域變數與全域變數 3 種。大部份的時候，我們宣告的變數都是時間軸變數；只有在函數、自訂函數（function 指令）中宣告的變數才屬於區域變數；至於全域變數需要在宣告變數後，指定變數值時再特別指定

(9)

變數的有效範圍

•

區域變數：區域變數只有在函數執行的時候才存在，函數執行完畢後就消失。

•

時間軸變數：時間軸變數一旦經宣告後，在哪裡都可以讀取到它，不過必須注意它被宣告時所在的路徑階層，才能正確讀取到它。

•

全域變數：全域變數和時間軸變數類似，一旦宣告後，不論在哪裡都可以讀取到它。差別在於全域變數不需要指定路徑也能夠讀取。

•

trace(）函數可用來追蹤變數值

(10)

•

文字欄位變數是 Flash 特有的變數型態，它直接與文字欄位（動態文字與輸入文字）相關聯。你可以替文字欄位設定一個專有的變數，則變數的值就會直接顯示在該文字欄位中。以下是文字欄位變數的簡單應用：

1.

首先使用文字工具拉曳出一個文字物件。

文字欄位變數的應用

(11)

文字欄位變數的應用

2.

開啟屬性面板，將文字類型設為動態文字（或輸入文字）。然後在變數欄中輸入變數名稱，

即完成變數宣告的工作。

(12)

文字欄位變數的應用

•

接著在文字欄位所在圖層上方，建立獨立的

Actions 圖層，然後在文字欄位所在影格的上方影格設定如下的 ActionScript ，就可以按下

[Ctrl] + [Enter] 鍵測試影片：

(13)

17-2 資料類型 Data Type

•

資料類型是指儲存在變數或 ActionScript 元件中的資料形式（例如影片片段元件的寬度），可分為：字串、數值、布林值、Null、undefined、

影片片段及物件，以下分別進行說明。

(14)

字串 String

•

字串是用雙引號「" "」或單引號「' '」括起來的文字與數字，如以下程式指定變數值時，在文字的前後加上雙引號，就表示指定該值的資料類型為字串：

(15)

•

你可以用 typeof 指令（屬於運算子/各種運算子類別）來檢驗資料的類型，例如我們想要得知 myData 變數中的資料類型。

•

輸出結果為 String，即是指字串類型。

如何得知資料類型

(16)

數值 Number

•

數值包括正負整數與正負實數（包含小數點的數字）。數值資料類型不能有英文字母、雙引號或是其它任何除了小數點「.」與負號「-」之外的特殊符號。如以下程式都是指定數值類型的資料做為變數值

(17)

•

布林值類型的資料只有兩種，一為 true（真），

一為 false（偽）。在比較運算式中，布林值常被用來顯示結果：

•

由於 10<20（「<」屬於比較運算子）這個運算式是成立的（數字 10 的確小於 20），所以如上的程式會傳回 true 的值

布林值 Boolean

(18)

undefined

•

undefined 資料類型只有一個值，就是

undefined。當變數尚未被賦予任何值時，其預設值就是 undefined（未定義）。

Null

•

Null 資料類型只有一個值，就是 null，這個值代表沒有資料

(19)

影片片段 MovieClip

•

影片片段資料類型是 ActionScript 中唯一具有實體圖像的資料型態，它記錄了影片片段實體的變數、屬性（Properties）與方法（Method）。

在以下的程式裡，我們把一個實體名稱為 fish 的影片片段實體 X 座標位置資料，存入名為

myVar 的變數中：

(20)

物件

•

此處物件是指 ActionScript 中的程式物件，例如：

Array（陣列），與我們在舞台中繪製的形狀填色、

線條之類的物件不同。在 Flash 的 ActionScript 中，使用者可以創造程式中的物件，藉以統一控制各種屬性。

•

物件的每個屬性都有名稱和值，而屬性的值可以是任何資料類型。

(21)

關於資料類型的轉換

•

由於 ActionScript 對於資料類型的規定並不是那麼嚴格，因此有時候依據程式執行需要， Flash 會自動幫你做一些資料類型的轉換，這個動作會讓某些原來看似不合理的程式能夠正常執行，例如：

(22)

17-3 運算子 Operator

•

所謂的運算子，就是加、減、乘、除之類的符號，

但在 ActionScript 中還有許多功能特殊的運算子。

•

運算子 vs. 運算元

•

Flash 中的運算子都列在運算子類別下，依功能分類分別是比較運算子、位元運算子、數學運算子、邏輯運算子、指定及其他運算子。

(23)

指定運算子

•

＝ assign

▫

A = 2; // 將 2 指定給 A

▫

A = b; // 將 b 的值指定給 A

▫

A = “b”; // 將 b 指定給 A

(24)

數學運算子

(25)

比較運算子

(26)

邏輯運算子

(27)

實做練習

•

宣告變數 x

•

設定 x 之值為 5

•

使用 trace() 輸出以下運算之結果：

▫

x 比 0 大？且 x 為偶數？

(28)

其他特殊運算子

•

一元運算子

▫

++

x 每經過一次運算變數值就加 1 x 前置（++x）vs. 後置（x++）

▫

--

x 每經過一次運算變數值就加 1 x 前置（--x）vs. 後置（x--）

•

複合指定運算子

▫

+=

x x += 1; 即 x = x + 1;

▫

-=、*=、/=、%=

(29)

其他特殊運算子

•

(A) ? (B) : (C)

▫

三元運算子

▫

簡略的 if‐else 敘述

▫

例：(x > 0)? (x‐1): (x+1)

x 若 x > 0 則回傳 x‐1 之值，否則回傳 x+1 之值

(30)

運算式 vs. 陳述式

•

運算式（Expression）

▫

由變數、運算子及函數呼叫構成

▫

計算結果並回傳值

•

陳述式（Statement）

▫

由一個以上的運算式構成一個完整的執行動作

▫

宣告陳述式、流程控制陳述式

▫

以分號；標示結尾

(31)

程式註解

•

單行註解

// 後面都是註解

•

多行註解

/*

在這裡頭的都是註解在這裡頭的都是註解在這裡頭的都是註解

*/

(32)

17-4 使用者自訂函數

•

function FunName([p1[:type], p2[:type],…]) {

statements…

return SomeVar; //回傳值 }

•

例：

function sum(a, b) { return (a+b);

}

x = sum(3, 5);

(33)

實做練習

•

設計一個函數，可傳入一個數字參數，並回傳所傳入數字的平方值

•

使用 trace() 顯示函數呼叫執行結果

(34)

17-5 輸入文字欄位

•

實做練習

▫

動畫開始為停止狀態

▫

設定文字欄位：「輸入文字」與「動態文字」

▫

設定按鈕元件，按鈕「釋放」後，將「輸入文字」

欄位內的內容顯示在「動態文字」欄位中

•

將控制物件行為之 ActionScript 設定在

▫

物件上 vs. 影格上

ÆActionScript 集中管理於一個圖層中

•

實做練習

▫

重製「平方函數」，讓使用者輸入

▫

型別轉換函數：動作/全域函數/轉換函數

(35)

按鈕事件設定

•

設定在實體上

on(event) {

statements…

}

•

常見 event 列表

▫

press

▫

release

▫

releaseOutside

▫

rollOut

▫

rollOver

▫

dragOut

▫

dragOver

(36)

按鈕事件設定

•

設定在影格上

InstanceName.EventName = function() { statements…

}

•

常見 EventName

▫

onPress

▫

onRelease

▫

onReleaseOutside

▫

…

(37)

17-6 判斷條件與迴圈

•

判斷條件與迴圈是讓程式根據各種條件，判斷是否執行某些程式，或是決定程式執行順序的語法。

你可以在陳述式/ 判斷條件/ 迴圈類別中找到這類指令

(38)

if-else

• if(expression) { statements…

} else if(expression) { statements…

}

…

} else {

statements…

}

(39)

switch

• switch(expression) { case value1:

statements…

break;

case value2:

statements…

break;

…

default:

statements…

break;

}

(40)

if-else vs. switch

•

switch

▫

判斷式的回傳值必須是一個值

•

if-else

▫

可用於條件式的判斷或範圍的判斷

(41)

while

•

while (expression) {

statements…

}

•

若

expression 回傳結果為 true 則執行內部陳述

式，否則跳離

(42)

do…while

•

do {

statements…

} while(expression);

•

先執行內部陳述式，再做

expression 判斷

•

do-while vs. while

(43)

for

•

for(initialization; termination; increment) {

statements…

}

•

例：for(x=0; x<10; x++) {…}

•

Initialization：迴圈開始

•

Termination：判斷迴圈結束的條件式

•

Increment：每次迴圈結束後要做的事