Flash AS 教程:創(chuàng)建文檔類(Document class)
現(xiàn)在我們對(duì)類已經(jīng)了一定的了解,接下來(lái),看看如果真正地使用它。有時(shí)候我常說(shuō)基于 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,那里沒(méi)有時(shí)間軸,唯一的辦法就是寫在類中。這些工作一切都圍繞著強(qiáng)大的文檔類而展開,沒(méi)有它就沒(méi)有 SWF。以下是一個(gè)文檔類的框架:
package {
import flash.display.Sprite;
public class Test extends Sprite {
public function Test() {
init();
}
private function init():void {
// 寫代碼處
}
}
}
如果你看過(guò)前面的部分,不會(huì)認(rèn)為這是個(gè)新知識(shí),只不過(guò)是把他們放在了一起而已。使用默認(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)畫
下面,再來(lái)學(xué)習(xí)一些 AS 3 編程的基本原理。如果你已經(jīng)選擇好了一個(gè)開發(fā)環(huán)境,那么就出發(fā)吧。讓我們進(jìn)入 ActionScript 動(dòng)畫世界。
動(dòng)畫的執(zhí)行過(guò)程
幾乎所有的程序動(dòng)畫都包括幾種不同的執(zhí)行過(guò)程。對(duì)于逐幀動(dòng)畫來(lái)說(shuō),意味著創(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ù)這些信息的描述來(lái)渲染舞臺(tái)并顯示該幀。根據(jù)這些變化擴(kuò)展一下流程圖,見圖 2-4。

圖2-4 渲染并顯示幀
我是這樣描述一個(gè)動(dòng)態(tài)程序動(dòng)畫的,見圖2-5。

圖2-5 腳本動(dòng)畫
如圖2-5所示,沒(méi)有第1幀、第2幀的概念,腳本動(dòng)畫通常只由一幀完成。下面我們就來(lái)看看動(dòng)畫的執(zhí)行過(guò)程。
首先,建立初始化。舞臺(tái)中放入一個(gè)影片剪輯,再創(chuàng)建補(bǔ)間動(dòng)畫,或使用代碼來(lái)描述整個(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)得過(guò)遠(yuǎn),超出了舞臺(tái)怎么辦?你的這套規(guī)則就要解決這個(gè)問(wèn)題。是否還希望用戶通過(guò)鼠標(biāo)來(lái)操作小球?那么你的規(guī)則也要把它考慮進(jìn)去。
聽起來(lái)很復(fù)雜,其實(shí)不然,這里所說(shuō)的“規(guī)則”,實(shí)際上就是 ActionScript 代碼。每套規(guī)則都可由一行或多行代碼組成。下面是小球向右移動(dòng)5像素的例子:
ball.x = ball.x 5;
這句話是說(shuō)無(wú)論小球 X 坐標(biāo)(水平軸)在哪里,都在原來(lái)的 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)在看不懂沒(méi)關(guān)系,大家只要知道 Flash 會(huì)在每一幀中生成這段代碼,并不斷地執(zhí)行。
怎樣讓它循環(huán)執(zhí)行?看看我第一次的嘗試,這也是很多 AS 初學(xué)者都會(huì)犯的錯(cuò)誤。這是在很多程序設(shè)計(jì)語(yǔ)言中都存在的循環(huán)結(jié)構(gòu),如 for 和 while。用循環(huán)結(jié)構(gòu)使代碼重復(fù)執(zhí)行,這就是我曾寫的那段:
for (i = 0; i < 500; i ) {
ball.x = i;
}
看起來(lá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é)束。
如果你也犯過(guò)同樣的錯(cuò)誤,就會(huì)知道,小球沒(méi)有在舞臺(tái)上發(fā)生移動(dòng)——只是一下子出現(xiàn)在了舞臺(tái)的右邊而已。為什么沒(méi)有移動(dòng)到中間的那些點(diǎn)上?其實(shí)它移動(dòng)了,只是我們沒(méi)有看到,因?yàn)槲覀儧](méi)有讓 Flash 去刷新屏幕。圖2-6 為另一個(gè)流程圖,看看實(shí)際都發(fā)生了什么。

圖2-6 為什么循環(huán)結(jié)構(gòu)無(wú)法產(chǎn)生動(dòng)畫
實(shí)際上我們使用自定義規(guī)則使球移動(dòng)到指定位置,并創(chuàng)建了500次新的場(chǎng)景。但在循環(huán)結(jié)束之前沒(méi)有給出顯示,這是因?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)入下一幀。如果幀頻沒(méi)有到 20 幀/秒,那么要等待到正確的時(shí)間再去執(zhí)行。
盡管如此,我們也不必?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)回過(guò)頭參考圖 2-5。
相關(guān)文章

flash cs6鼠標(biāo)跟隨效果實(shí)現(xiàn)代碼分享
flash cs6想要實(shí)現(xiàn)鼠標(biāo)跟隨效果?該怎么制作呢?今天我們就來(lái)看看使用as2.0實(shí)現(xiàn)鼠標(biāo)跟隨效果的教程,需要的朋友可以參考下2019-05-19
Flash cs6怎么使用代碼輸入中英文文本?Flash cs6中可以使用文字工具直接輸入文本,也可以使用代碼來(lái)輸入文本,該怎么使用代碼輸入文本呢?請(qǐng)看下文詳細(xì)的教程,需要的朋友2018-03-11
flash as3.0抽象類怎么定義? as3.0中有很多抽象類,該怎么定義抽象類和抽象方法呢?下面我們就來(lái)看看簡(jiǎn)單的例子,需要的朋友可以參考下http://www.fzitv.net/softs/408402.2018-02-28
flash cs6中怎么使用ActionScript3.0?
flash cs6中怎么使用ActionScript3.0?flash cs6中想要使用ActionScript3.0功能,該怎么使用呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下2018-01-25
Flash中怎么實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊決定圖像位置?
本教程給大家分享一個(gè)Flash小教程,教大家在Flash CS6中怎么實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊決定圖像位置?方法很簡(jiǎn)單,感興趣的朋友歡迎前來(lái)一起分享學(xué)習(xí)2018-01-12
Flash中如何用代碼將圖片放在自己想要的舞臺(tái)位置?
本教程教腳本之家的ActionScript教程學(xué)習(xí)者在Flash中如何用代碼將圖片放在自己想要的舞臺(tái)位置,教程講解的詳細(xì),感興趣的朋友歡迎前來(lái)分享學(xué)習(xí)2017-11-20
在Flash CS6中使用with函數(shù)繪制背景圖教程
本教程教腳本之家的ActionScript教程學(xué)習(xí)者如何在Flash CS6中使用with函數(shù)繪制背景圖?教程一步步講解的挺詳細(xì),方法也不難,非常適合Flash新手入門學(xué)習(xí)2017-11-18
Flash怎么設(shè)置元件坐標(biāo)?flash使用代碼設(shè)置元件的坐標(biāo)的教程
Flash怎么設(shè)置元件坐標(biāo)?flash中導(dǎo)如的元件需要添加坐標(biāo),該怎么定位元件坐標(biāo)呢?下面我們就來(lái)看看flash使用代碼設(shè)置元件的坐標(biāo)的教程,需要的朋友可以參考下2017-10-11
Flash怎么制作來(lái)回?fù)u擺的花朵的動(dòng)畫?
Flash怎么制作來(lái)回?fù)u擺的花朵的動(dòng)畫?Flash中想要給花朵制作一段搖擺的動(dòng)畫效果,該怎么制作呢?下面我們就來(lái)看看詳細(xì)的教程,很簡(jiǎn)單,需要的朋友可以參考下2017-05-23
Flash怎么制作流動(dòng)七彩色的文字?想要讓文字動(dòng)起來(lái),該怎么使用flash給文字制作一個(gè)流動(dòng)七彩色的動(dòng)畫呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下2017-04-23











