這篇教程為“Flash AS 入門教程”的一部分。查看全套教程>>>>。
源文件下載
本節應掌握的知識要點:
①條件判斷語句if、else的應用;②trace語句應用;③動態文本應用;④在動作中使用“幀標簽”定位;⑤認識“輸出”面板;⑥比較運算符“<”、自加運算符“++”;⑦了解常量、變量、表達式。
條件判斷語句在flash中是實用性很強、使用也很頻繁的語句,這一節將學習條件判斷語句“if、else”以及“trace”語句的應用。
if是最基本的條件判斷語句,結合else使用是最常見的形式,在flash中具有很高的實用性,其格式如下:
if(條件) { //小括號里的條件是一個計算結果為 true 或 false 的表達式。
這里是當條件計算為true時執行的指令
}else{ //否則
當條件執行為false時執行的指令
}
trace語句是在測試代碼時經常使用的語句,其格式是:trace()
小括號“()”中的參數為變量或表達式,其作用是,當按【Ctrl + Enter】鍵測試動畫時,把小括號“()”中指定的變量的值或表達式的計算結果在“輸出”面板中顯示出來,以便在測試時檢查程序代碼是否正常,這是一個檢查代碼的非常方便的方法。
動態文本是在動畫播放時顯示動態更新的文本字段。
下面我們用一個簡單的實例來解析條件判斷語句的效果,請看“實例1-5”:
>>>>>點擊查看動畫效果<<<<<
實例1-5 條件判斷語句if、else應用
點擊畫面上的“play”按鈕,小松鼠奔跑三個來回后,跳到另一個畫面中原地反復翻轉跳躍,點擊“replay”按鈕將再一次從第一個畫面反復播放。這個效果就是用了條件判斷語句if和else實現的。
打開源文件,從源文件中點擊時間軸右上角的【編輯場景】按鈕,顯示出這個動畫文件里有“場景1”和“場景2”兩個場景。
“場景1”的右下角有一個動態文本框。【mc】圖層上有一個長度為40幀的動作補間動畫,第1-20幀,小松鼠從場景的左邊跑到右邊,第21-40幀,又從右邊跑回到左邊,如此來回奔跑。
“場景2”的右下角也有一個動態文本框。時間軸上共有20幀,在【mc】圖層上,第1至20幀是一個補間動畫,小松鼠從場景左端跑到場景中心原地跳躍,到第30幀上,小松鼠翻轉身面朝左方依然原地跳躍。
注意看看,場景2【AS】圖層的第20幀上有一個小紅旗標志,還有一個小寫子母“p”,這是一個名稱為“p”的幀標簽。
再來看看源文件中的動作腳本,場景1【as】圖層上設置的語句:
第1幀上的語句:stop(); // 在第1幀停止播放。
第2幀上的語句:i = 1; //設置一個變量i,并賦初始值為1。
第40幀上的語句:
if (i<3) { // 當i小于3時
gotoAndPlay(3); // 跳轉到第3幀并播放
} else { // 否則(當不符合i<3的條件時)
gotoAndPlay("p"); // 跳轉到幀標簽”p”的位置并播放
}
trace(i); // 在輸出面板上顯示變量i的值
t_txt=”i= ”+i; //在變量名為t_txt的動態文本框中顯示字符串”i=”并上i的值。(這里的+號是連接符,相當于add)
i++; //變量i自加1,等同于i=i+1
“play”按鈕上的語句:
on (release) {
play();
} // 點擊按鈕時開始播放
場景2【AS】圖層第40幀上的語句:gotoAndPlay("p"); // 跳轉到幀標簽“p”處并播放
“replay”按鈕上的語句:
on (release) {
gotoAndPlay(“場景 1”,2);
} // 點擊按鈕時跳轉到場景1第2幀并播放
我們來分析一下語句執行的過程,影片開始時停止在第1幀,點擊“play”按鈕即開始播放,當播放頭前進到第40幀時,由if語句開始第1次判斷是否符合i<3的條件,由于在第2幀定義了變量i的初始值為1,此時判斷的結果為true,這時執行if后面大括號“{}”中的語句,播放頭跳轉到第3幀再次播放,同時“輸出”面板中顯示出i的值為“1”,如圖1-9。這時,動態文本框中也會顯示出文本字段“i= 1”.接下來i自加1,值變為2。
當播放頭第2次前進到第40幀時,此時i的值為2,依然符合i<3的條件,播放頭跳轉到第3幀再次播放,“輸出”面板中顯示此時i的值為“2”,如圖1-9,動態文本框中顯示出文本字段“i= 2”。i再次自加1,值變為3。
當播放頭第3次到達第40幀時,此時i的值為3,超出了if語句中所指定的i<3的條件了,這時便執行else后面大括號“{}”中的語句,播放頭跳轉到幀標簽“p”處,也就是場景2第20幀并播放,場景2第1至20幀小松鼠從場景左端跑到場景中心的動畫效果就被邁過了,這時“輸出”面板中顯示i的值為3,如圖1-9。動態文本框中顯示出文本字段“i= 3”。當播放到第30幀時,小松鼠翻轉身繼續在原地跳躍,到第40幀時,由幀動作腳本gotoAndPlay("p")指令其跳轉回第20幀再次播放,如此就形成了在第20至第40幀之間反復播放,我們看到的實際效果就是小松鼠不停的在原地翻轉跳躍。
這樣就實現了小松鼠在場景1來回奔跑3次后,跳到下一個場景在原地反復翻轉跳躍的效果。
當點擊“replay”按鈕時,由gotoAndPlay(“場景 1”,2);指令播放頭再跳轉到“場景 1”第2幀重新播放(場景名必須與影片文件中的場景名稱一致),此時i的值為1,再次按照上面的判斷過程繼續播放。
圖1-9 輸出面板上依次顯示i的值
這一節中新的知識點:
動態文本:是在動畫播放時動態更新的文本字段,定義動態文本的方法是,用文本工具在場景上劃一個適當大小的文本框,在屬性面板中將文本類型設置為“動態文本”,并在右下方的【變量】輸入欄中為其定義一個變量名。命名文本字段時,應使用 _txt 后綴。
幀標簽:是動畫文件中為關鍵幀添加的命名標記,如本節實例中的幀標簽“p”。幀標簽在動作腳本中可以起到方便的導航作用,在設計動畫時,往往會調整某些關鍵幀的位置,如果使用了幀標簽,就不必一一修改動作腳本中的相應位置參數,比如,我們如果要把上面實例中的跳轉動作改為跳轉到場景2第1幀,就可以直接把幀標簽為“p”的那個關鍵幀移到第1幀就行了。對于跳轉動作比較多的動作腳本特別有用。
添加幀標簽的方法是,選中關鍵幀,在“屬性”面板中輸入名稱,幀標簽名稱可以是任意字符。添加有幀標簽的關鍵幀上會出現一面小紅旗標志,標志后面會顯示幀標簽名稱。如圖1-10所示。
圖1-10 添加幀標簽
常量:是在程序運行中不會改變的量,例如i=1、i<3,“1”和“3”就是一個常量。
變量:是一種用英語字母、英語單詞或者字母組合來表示的標識符,不能用數字開頭。變量用于保留任何類型(字符串、數字、布爾值、對象、影片剪輯)的數據值。如這一節中的變量“i”。
表達式:表達式是動作腳本中最常見的語句, 它通常由變量名、 運算符及常量組成。如這一節里面的i=1;i<3等都是簡單的表達式。
左邊的“i”是變量名, 中間的“=”是賦值運算符(注意,這里這個等號“=”不表示相等,只表示將右邊的值賦給左邊的變量,相等操作符用“==”表示),“<”是比較運算符, 右邊的數值是常量。由這個表達式可以聲明一個變量, 為下一步操作做準備。
表達式又分為賦值表達式,如i=1, 算術表達式,如x=3/5,邏輯表達式,如i<3。
課后練習:素材源文件下載
要求:
1. 素材源文件中有兩個場景,分別將其命名為“a”、“b”;
2. 將“b”場景的第31幀命名為“p”;
3. 在“a”場景左下方創建一個動態文本框,并為其定義變量名,要求按照文本類型正確添加后綴;并將這個動態文本框復制粘貼到“b”場景左下方。
4.在“a”場景的【as】圖層添加語句實現如下效果:
①動畫開始播放時停止在第1幀;點擊“play”按鈕開始播放。
②在第2幀定義一個變量“i”,并根據下面要求的效果正確設定初始值;
③當播放頭到達第40幀時,根據判斷條件進行下一步的播放,判斷條件為:變量i是否等于3。當條件成立(即i等于3)時,跳轉到幀名稱為“p”的位置并播放;當條件不成立(即i不等于3)時,跳轉到當前場景第3幀并播放;判斷完成后在輸出面板中顯示i的值;在動態文本框中顯示文本字段”i=”并上i的值;要求第一次顯示i的值為“0”;最后i自加1。
5.在“b”場景的【as】圖層添加語句實現如下效果:
按照以上的條件,當變量i等于3時,播放頭跳轉到幀名稱為“p”的位置(即“b”場景的第31幀)繼續往下播放。再按照下面的要求實現效果:
①當播放頭到達當前場景第90幀時,根據判斷條件進行下一步的播放,判斷條件為:變量i是否等于6。當條件成立時,播放頭跳轉到當前場景第1幀并播放,否則跳轉到幀標簽“p”處并播放;判斷完成后在輸出面板中顯示i的值;在動態文本框中顯示文本字段”i=”并上i的值;最后i自加1。
②根據以上條件判斷,當條件不成立時,播放頭跳轉到了當前場景第1幀并播放,到達第30幀時,再一次根據設定的條件進行判斷,判斷條件為:i是否小于10。當條件成立時,播放頭跳轉到當前場景第1幀并播放,條件不成立時,播放頭跳轉到“a”場景第1幀,即回到動畫的初始狀態;判斷完成后在輸出面板中顯示i的值;在動態文本框中顯示文本字段”i=”并上i的值;最后i自加1。
6.動畫測試時,輸出面板中顯示的值依次應為:0、1、2、3、4、5、6、7、8、9、10。
動畫測試和播放時,動態文本框中顯示的文本字符應依次更新為:“i=0”、“i=1”、“i=2”、……“i=10”。
動畫效果如練習5所示:
>>>>>點擊查看動畫效果<<<<<
練習5
提示:語句中注意正確使用運算符,請參見上面“表達式”解釋中關于運算符的提示。語句中引用到的場景名稱必須和場景的實際名稱相符。
這篇教程為“Flash AS 入門教程”的一部分。查看全套教程>>>>。
新聞熱點
疑難解答