|
創(chuàng)建文檔類(Document class)
現(xiàn)在我們對(duì)類已經(jīng)了一定的了解，接下來，看看如果真正地使用它。有時(shí)候我常說基于 AS 3的 SWF 是多么的重要，這是因?yàn)?AS 3 引入了一個(gè)全新的概念，文檔類(document class)。
一個(gè)文檔類就是一個(gè)繼承自 Sprite 或 MovieClip 的類，并作為 SWF 的主類。讀取 SWF時(shí)，這個(gè)文檔類的構(gòu)造函數(shù)會(huì)被自動(dòng)調(diào)用。它就成為了我們程序的入口，任何想要做的事都可以寫在上面，如：創(chuàng)建影片剪輯，畫圖，讀取資源等等。如果在 Flash CS3 IDE 中寫代碼，可使用文檔類，也可以選擇繼續(xù)在時(shí)間軸上寫代碼。但如果使用 Flex Builder 2 或免費(fèi)Flex SDK，那里沒有時(shí)間軸，唯一的辦法就是寫在類中。這些工作一切都圍繞著強(qiáng)大的文檔類而展開，沒有它就沒有 SWF。以下是一個(gè)文檔類的框架:
package {
import flash.display.Sprite;
public class Test extends Sprite {
public function Test() {
init();
}
private function init():void {
// 寫代碼處
}
}
}
如果你看過前面的部分，不會(huì)認(rèn)為這是個(gè)新知識(shí)，只不過是把他們放在了一起而已。使用默認(rèn)包，導(dǎo)入并繼承 Sprite 類。構(gòu)造函數(shù)只有一句，調(diào)用 init 方法。當(dāng)然，也可以把所有代碼寫在構(gòu)造函數(shù)里，但是要養(yǎng)成一個(gè)好習(xí)慣，就是盡量減少構(gòu)造函數(shù)中的代碼，所以把代碼寫到了另一個(gè)方法中。本書會(huì)給大家很多代碼塊進(jìn)行測(cè)試，那時(shí)要像上面這個(gè)例子一樣把代碼塊放入 init 方法中，這樣在影片編譯執(zhí)行時(shí)，就會(huì)調(diào)用 init 中的代碼。下面我們要開始學(xué)習(xí)如何連接文檔類和 SWF。
使用 Flash CS3 IDE（集成開發(fā)環(huán)境）
Flash CS3 IDE 是實(shí)現(xiàn)文檔類的最方便的工具。把上述的類選擇一個(gè)文件夾進(jìn)行保存，文件名為 Test.as。打開 Flash CS3 ，創(chuàng)建一個(gè) FLA 文件，保存到一這個(gè)類相同的目錄下。確認(rèn) FLA 默認(rèn)發(fā)布設(shè)置為 Flash Player 9 及 AS 3.0。在屬性面板中，我們注意到出現(xiàn)了一個(gè)名為文檔類（Document Class）的區(qū)域(圖2-1)。只需輸入類名：Test。
圖2-1 設(shè)置文檔類
請(qǐng)注意，我們輸入的是類名，而不是文件名。所以這里不需要輸入擴(kuò)展名 .as。如果這個(gè)類包涵在一個(gè)包中，那么就需要輸入類的完整路徑——例如：com.friendsofed.chapter2.Test。
程序動(dòng)畫
下面，再來學(xué)習(xí)一些 AS 3 編程的基本原理。如果你已經(jīng)選擇好了一個(gè)開發(fā)環(huán)境，那么就出發(fā)吧。讓我們進(jìn)入 ActionScript 動(dòng)畫世界。
動(dòng)畫的執(zhí)行過程
幾乎所有的程序動(dòng)畫都包括幾種不同的執(zhí)行過程。對(duì)于逐幀動(dòng)畫來說，意味著創(chuàng)建和存儲(chǔ)一組連續(xù)的位圖，每一幀都是一幅圖像，只需要進(jìn)行顯示即可，見圖 2-3。
圖2-3 逐幀動(dòng)畫
當(dāng)我們?cè)?Flash 中使用圖形或元件時(shí)，事情就發(fā)了微妙的變化。這時(shí)，F(xiàn)lash 不會(huì)為每一幀創(chuàng)建和存儲(chǔ)新的位圖。對(duì)于每一幀而言，F(xiàn)lash 存儲(chǔ)的是舞臺(tái)上每個(gè)對(duì)象的位置，大小，顏色等等。比如，一個(gè)小球在屏幕上移動(dòng)，每一幀只存儲(chǔ)小球的在該幀上的位置，第1幀小球的位置在左邊第10個(gè)像素，第2幀也許就在第15個(gè)像素，等等。Flash 播放器(Flash Player)讀取這些信息，再根據(jù)這些信息的描述來渲染舞臺(tái)并顯示該幀。根據(jù)這些變化擴(kuò)展一下流程圖，見圖 2-4。
圖2-4 渲染并顯示幀
我是這樣描述一個(gè)動(dòng)態(tài)程序動(dòng)畫的，見圖2-5。
圖2-5 腳本動(dòng)畫
如圖2-5所示，沒有第1幀、第2幀的概念，腳本動(dòng)畫通常只由一幀完成。下面我們就來看看動(dòng)畫的執(zhí)行過程。
首先，建立初始化。舞臺(tái)中放入一個(gè)影片剪輯，再創(chuàng)建補(bǔ)間動(dòng)畫，或使用代碼來描述整個(gè)場(chǎng)景�？傊�，最后都要對(duì)該幀進(jìn)行渲染及顯示。
然后，應(yīng)用自定義規(guī)則。規(guī)則可以像“讓球向右移動(dòng)5像素”這樣簡(jiǎn)單，也可以是由幾十條復(fù)雜的三角函數(shù)組成。使用自定義規(guī)則會(huì)產(chǎn)生新的描述再根據(jù)這些描述進(jìn)行渲染及顯示，并不斷地應(yīng)用這個(gè)規(guī)則。
請(qǐng)注意，同一規(guī)則被一遍又一遍地執(zhí)行，而不是對(duì)第1幀用一套規(guī)則，而對(duì)第2幀又使用另一套規(guī)則。所以難度就在于，一套規(guī)則要處理所有可能出現(xiàn)的情況。要是球向右移動(dòng)得過遠(yuǎn)，超出了舞臺(tái)怎么辦？你的這套規(guī)則就要解決這個(gè)問題。是否還希望用戶通過鼠標(biāo)來操作小球？那么你的規(guī)則也要把它考慮進(jìn)去。
聽起來很復(fù)雜，其實(shí)不然，這里所說的“規(guī)則”，實(shí)際上就是 ActionScript 代碼。每套規(guī)則都可由一行或多行代碼組成。下面是小球向右移動(dòng)5像素的例子：
ball.x = ball.x + 5;
這句話是說無論小球 X 坐標(biāo)(水平軸)在哪里，都在原來的 X 位置上增加5像素，并把該坐標(biāo)作為它的新 X 坐標(biāo)。也可簡(jiǎn)化為：
ball.x += 5;
“+=”操作符：把右邊的值與左邊的變量相加，相加的結(jié)果再賦值給該變量。以下是更多的高級(jí)規(guī)則，日后會(huì)學(xué)到：
var dx:Number = mouseX - ball.x;
var dy:Number = mouseY - ball.y;
var ax:Number = dx * spring;
var ay:Number = dy * spring;
vx += ax;
vy += ay;
vy += gravity;
vx *= friction;
vy *= friction;
ball.x += vx;
ball.y += vy;
graphics.clear();
graphics.lineStyle(1);
graphics.moveTo(ball.x, ball.y);
graphics.lineTo(mouseX, mouseY);
這段現(xiàn)在看不懂沒關(guān)系，大家只要知道 Flash 會(huì)在每一幀中生成這段代碼，并不斷地執(zhí)行。
怎樣讓它循環(huán)執(zhí)行？看看我第一次的嘗試，這也是很多 AS 初學(xué)者都會(huì)犯的錯(cuò)誤。這是在很多程序設(shè)計(jì)語言中都存在的循環(huán)結(jié)構(gòu)，如 for 和 while。用循環(huán)結(jié)構(gòu)使代碼重復(fù)執(zhí)行，這就是我曾寫的那段：
for (i = 0; i < 500; i++) {
ball.x = i;
}
看起來相當(dāng)簡(jiǎn)單。變量 i 從 0 開始，所以小球 X 坐標(biāo)移動(dòng)到 0——舞臺(tái)最左邊。i++ 讓i 的值每次增長(zhǎng)1，即：0～1～2～3～4…，每次這個(gè)值都會(huì)做為 ball.x 的值，把小球從左向右移動(dòng)。當(dāng)值為500時(shí)，表達(dá)式 i<500 值為假(false)，循環(huán)結(jié)束。
如果你也犯過同樣的錯(cuò)誤，就會(huì)知道，小球沒有在舞臺(tái)上發(fā)生移動(dòng)——只是一下子出現(xiàn)在了舞臺(tái)的右邊而已。為什么沒有移動(dòng)到中間的那些點(diǎn)上？其實(shí)它移動(dòng)了，只是我們沒有看到，因?yàn)槲覀儧]有讓 Flash 去刷新屏幕。圖2-6 為另一個(gè)流程圖，看看實(shí)際都發(fā)生了什么。
圖2-6 為什么循環(huán)結(jié)構(gòu)無法產(chǎn)生動(dòng)畫
實(shí)際上我們使用自定義規(guī)則使球移動(dòng)到指定位置，并創(chuàng)建了500次新的場(chǎng)景。但在循環(huán)結(jié)束之前沒有給出顯示，這是因?yàn)?Flash 只在每一幀結(jié)束后才進(jìn)行一次刷新，這點(diǎn)很重要。以下是 Flash 進(jìn)入幀的動(dòng)作順序：
- 在舞臺(tái)上放置所有的對(duì)象，不論在何級(jí)，何層，或是否為加載的影片。
- 執(zhí)行幀上所有的 Action 腳本(ActionScript)，不論在何級(jí)，何層，不論處于影片剪輯還是按鈕中，也不論它嵌套在何處。
- 判斷是否到了該顯示的時(shí)候。如果設(shè)置幀頻為 20 幀/秒，F(xiàn)lash 最少要等上一幀顯示后50毫秒后再進(jìn)行下一次顯示，顯示了該幀后，就要編譯和進(jìn)入下一幀。如果幀頻沒有到 20 幀/秒，那么要等待到正確的時(shí)間再去執(zhí)行。
定時(shí)時(shí)間存在著一些問題。首先，眾所周知幀頻是不精確的(即使在Flash 9中)，不要依賴它作為精確的定時(shí)器。其次，在大量的編譯和 AS 執(zhí)行花費(fèi)的時(shí)間會(huì)超出規(guī)定的時(shí)間。
盡管如此，我們也不必?fù)?dān)心自己的腳本會(huì)被砍掉一部分。在進(jìn)入第3步之前，F(xiàn)lash 會(huì)完成所有可執(zhí)行代碼(第2步)，即使需要延緩幀頻也要完成。Flash 為了能完成腳本，甚至?xí)壬?5秒。在上面的例子中，F(xiàn)lash 等待循環(huán)結(jié)束，然后進(jìn)入下一幀，只在跳轉(zhuǎn)到下一幀時(shí)進(jìn)行屏幕的刷新。這就是為什么我們看到的是跳動(dòng)而不是移動(dòng)。因此，要想完成移動(dòng)，我們所要做的就是打散這個(gè)循環(huán)，請(qǐng)回過頭參考圖 2-5。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 ActionScript 3.0 動(dòng)畫基礎(chǔ) [2] 下一頁 ActionScript 3.0 動(dòng)畫基礎(chǔ) [4]
◎進(jìn)入論壇RIA設(shè)計(jì)與應(yīng)用版塊參加討論
|
第 1 頁 
第 3 頁 ActionScript 3.0 動(dòng)畫基礎(chǔ) [3]
