ActionScript 3.0動畫基礎

作者: egoldy

性質: 翻譯

閱讀次數: 25849

發表時間: 2007-06-03 13:23:14


聲明: 此文章為未出版的keith petersActionScript 3.0 making things move中文版樣章。為書中的第二章。webstudio會在中文版出版之際,友情提供論壇forum支持。轉載請注明出處,謝謝!



本章內容
    1.動畫基礎
    2.Sprites(精靈)
    3.類和面向對象編程(OOP)
    4.用戶交互

如果說第一章是有點哲學意義的動畫概述,那么這一章則是關于ActionScript動畫的一系列技術概述,尤其是ActionScript 3.0(AS 3)。這一章將涉及到動畫循環、影片剪輯和精靈(sprites)、和用戶交互。它所提供的大多數都是你需要的,用來理解后面本書中的 ActionScript 技術。
2.1動畫基礎
在開始之前,先讓我們快速回顧一下第一章所述的內容。
    動畫是由幀生成的,每一幀都存放著多少有些不同的動態影像。
    逐幀或補間(tween)動畫每一幀都包含著一副圖像或是一副圖像的描述。
    動態動畫包含一副圖像的初始化描述和用于改變第一幀描述的規則。
這本書中的大多數內容重點是動態動畫的規則,提供了一個技術列表用來改變圖像的描述,來得到逼真的動畫結果。在本章中,你將會明白如何架構初始化描述,如何在每一幀上應用規則,以及如何將它們整合在一起。你將可以創建大量的應用例子。

2.2    關于ActionScript版本

這本書的原版是在Flash 8剛剛發布后不久出版的。雖然在我印象中它被設計為ActionScript 2語法,但我決定盡量避開許多難懂的OOP理論。然而,實際上有許多代碼是可以直接放置在時間線上使用。結果看上去有些ActionScript 1和 2混雜的現象。
然而,這本書的第二版,我決定使用其所用Flash9 和AS 3.基于這一點,至少有三種方式來創建一個Flash 9,AS3影片。

    Flash CS3 IDE(Flash CS3 用戶環境)
    Flex Builder 2
    免費的Flex/AS 3命令行編譯器和Flex 2 Software Development Kit(Flex 2 SDK).

而在此Flash CS3 IDE中,在時間線上書寫AS 3仍是可能的。其它兩種方法至少需要用到AS 3 類文件。因些為了保持一致性,我決定拋開時間線。本書中的所有例子都將使用AS 3類來呈現。
在這一章中,我將向你展示如何在每一種開發環境(我們剛剛提到的Flash CS3,Flex Builder 2,和免費的SDK)設置AS 3項目。在本書的其余部分,只有適當的類代碼會被列示出來,并且它可以工作在所有的三種開發環境中。
必要時,當描述一個簡單概念時,我可能會給出一個小的代碼片斷來示范想法。雖然它沒有完全明確的表明,但它可以被想象為將要插入到本章中列示出來的類架構中的代碼片斷。
這次本書給出的類是書中范例比較重要的一部分,我將很快討論他們,并且做了一些深入。盡管如此,這本書并不是一本深入的OOP參考書,關于類的內容只是必須的,最基本的,來讓你創建,運行并完成本書中的范例。

2.3    類和OOP

我假設一些讀者不知道什么是類或是“面向對象(object oriented)“這個術語,而有一些人可能已在ActionScript(或其它語言)中使用類多年了。因些為了避免漏掉任何人,我將盡量涉及所有的 基礎內容。AS 2 OOP 老手可能也需要略讀一下此節,因為在AS 3中有相當一部分的改變了。
如果你認為你對類一點都不熟悉,那你可能錯了。如果你曾在Flash中寫過任何代碼,你就有機會接觸過一些類。一個類簡單說是指一個對象的類 型。MovieClip是一個類它指向---你可能已經猜到---影片剪輯(movie clips)。文本域,影片剪輯,按鈕,字符串,和數字都有對應的類。
通常一個類有兩項內容與之相關:屬性(數據 或信息)和行為(動作,或是它可以做的事情)。屬性本質上是存放與類相關的信息的變量,行為相當于是函數,而當一個函數是一個類的一部分時,我們通常稱它為一個方法。

2.3.1    一個基本類

如果你已經使用Flash有一段時間了,你知道你已經可以在庫中創建一個元件符號,然后在舞臺上創建幾個元件符號的實例。類似于元件符號與實例的關系,類是模板,而對象(也可以理解為實例)是指定類的表現個體。你可以編寫一個簡單的類如下:

package  {
public  class  MyClass  {
public  var  myProperty:Number  =  100;

public  function  myMethod()  {
trace("I  am  here");
}
}
} 

讓我們來分析代碼。首先對于老的AS 2類來說有一些東西是新的:包(package)聲明。包(package),簡單講,是把相關的類組成一個組。稍后我將進一步討論包 (package),但是本書中的大部分范例不僅僅是使用包(package)。還有你需要象范例中那樣包括包(package)關鍵詞和大括號。這也被 稱為默認包(package)
下一部是類自身的定義。這里相對于你過去的另一處改變:類現在可以有訪問修改符。訪問修飾符是一個詞,它示指哪些代碼是可以訪問的。這里的 public(公有)意味著這個類可以被類外部的任意代碼訪問。在本書的所有范例中,類都將是公有(public)。如果你想學習關于AS 3的更多內容,你可能會現一些關于沒有public(公有)修飾詞的類和同一個類文件中的多個類,但是這些內容已經超出了本書的范疇。
你可以看到類有一個名稱,MyClass,緊跟著是另一對打開和在類結尾處閉合的大括號。
在類的內部只有兩部分內容:一個名為myProperty的變量和一個名為myMethod的函數。這些將變成你所創建的任意類實例的屬性和方 法。再次,對于屬性和方法,public修飾詞意味著這個對象之外的任何代碼都可以訪問這個屬性和調用這個方法。如果你創建的屬性和方法只用于類的自身使 用,你可以將他們標記為私有(private),它會阻止類外部任何代碼的訪問。AS 3中同時還加入了internal(內部)和protected(保護)修飾詞。一個類的內部(internal)屬性只能被同一個包(package) 中的其它類訪問,保護(protected)屬性意味著它只對這個類的子類可見(這一點與AS2中的私有(private)屬性非常相似)。
還有些模糊?再有一點,我過濾掉了復雜內容的一大部分,我現在描述的許多內容并沒有全部用在本書中。書中的大部分范例使用的是很小的類,一旦你看到一些類的執行過程,你就會明白其中的意思。
一個類在編寫完成并且保存為一個外部的文本文件,命名為與類名稱相同的名字,使用的后綴為.as,如MyClass.as。你可以在Flash CS3 IDE, Flex Builder 2,你喜歡的代碼編輯器,或是其它任何的文本編輯器來編寫類文件。
如果你正在使用Flash CS3 IDE,你還需要創建一個FLA文件。如果你使用的是默認的包(package),你所創建的類文件必須與FLA文件保持在同一目錄下。如果你使用的包 (package)架構,那么包架構的根目錄應當與你的FLA是同一目錄。另外,你可以將你的類保存在其它地方,然后將路徑加入到你的類路徑當中。類路徑 只是一個簡單的路徑層次列表。當你在你的代碼中指定了一個類的名稱,Flash將會在那些目錄中搜索你所指定名稱的類。另外,在本書的范例中,你將直接使 用默認的包(package),并且你需要保證類與FlA文件始終在一起。

2.3.2    包(package)

包(package)的主要作用是用來組織類。包是根據目錄的位置,以及所嵌套的層級來構造的。在包中的每一個名稱對應一個真實的目錄名稱,這些 名稱通過點兒來隔開。例如,你有一個名為Utils的類,它在下面的目錄中:com/friendsofed/makingthingsmove/。(通 常是將域名轉化的包路徑。這樣可以確保包是獨一無二的。)這個類將指向com.friendsofed.makingthingmove.Utils。
在AS 2中,你需要使用完整的包名稱來聲明類,象下面這樣:

class  com.friendsofed.makingthingsmove.Utils  {
} 

在AS3中,包部分代碼用來聲明包,類部分代碼用來聲明類,如下:

package  com.friendsofed.makingthingsmove  {
public  class  Utils  {
}
} 

2.3.4    構造函數
你可以為你的類設置一個構造函數,它是一個與類名稱相同的方法,當一個類的實例被創建時,這個方法將自動的被調用。你按下面的方面向構造函數傳遞參數。
首先,創建類。

package  {
public  class  MyClass  {
public  function  MyClass(arg:String)  {
trace("constructed");
trace("you  passed  "  +  arg);
}
}
} 

那么,假設你工作在Flash CS3 IDE下,在時間線上創建一個類實例如下:

var  myInstance:MyClass  =  new  MyClass("hello"); 



在測試影片時它將trace出“constructe” 和 “you passed hello”。如果你使用的是Flex Builder 2或是免費的SDK,那么你先記住我這里所說的話。稍后你會有大量的實踐。

2.3.5    繼承

一個類可以繼承自,或是擴展,另一個類。這意味著它可以獲取另外一個類的所具有的所有的屬性和方法(除非屬性或是方法被標記為私有 (private))。子類(正在繼承的類)可以增加額外的屬性和方法,或者是改變父級類(被擴展的類)中一些內容。它的做法是創建兩個分開的類(在分開 的兩個.as文件中)如下:

package  {
public  class  MyBaseClass  {
public  function  sayHello():void
{
trace("Hello  from  MyBaseClass");
}
}
} 

package  {
public  class  MySubClass  extends  MyBaseClass  {
public  function  sayGoodbye():void  {
trace("Goodbye  from  MySubClass");
}
}
} 

記住每個類必須保持在它自已的文件中,文件名為類名稱加上.as后綴,因些你有一個MyBaseClass.as文件和一個MySubClass.as文 件。如果你使用的是Flash CS3 IDE,創建一個新文件并將這兩個類保存在同一個目錄中。現在,在時間上創建兩個類實例看看會發生什么:

var  base:MyBaseClass  =  new  MyBaseClass();
base.sayHello();

var  sub:MySubClass  =  new  MySubClass();
sub.sayHello();
sub.sayGoodbye(); 

第一個實例沒有什么驚奇之處。但是注意第二個實例它有一個sayHello方法,盡客MySubClass沒有定義過sayHello方法。但這個類繼承 自MyBaseClass。還需要注意到它增加了一個新方法sayGoodbye,而基礎類(MyBaseClass)并沒有這個方法。
接下來,假設你想從子類中更改基礎類中已經存在的方法。在AS2中,你只需要簡單的重新定義它。在AS3中,你必須在重新定義時使用override(覆蓋) 關鍵詞來覆蓋它。

package  {
public  class  MySubClass  extends  MyBaseClass  {
override  public  function  sayHello():void  {
trace("Hola  from  MySubClass");
}
public  function  sayGoodbye():void  {
trace("Goodbye  from  MySubClass");
}
}
}

注意那個sayHello,當從MySubClass調用時,現在已經有一個全新的信息,因為原有的方法已經被覆蓋。實際過程中,當然,私有(private)方法是不能被覆蓋的,因為它只允類自身內部訪問。

2.3.6    影片剪輯/精靈(Sprite)子類

你可能或者可能從沒有寫一個類,然后在寫另一個類擴展它。但是如果你使用AS3而且拋開了時間線來做任何東西,你都將要擴展影片剪輯 (MovieClip)或是精靈(Sprite)類。MovieClip類是所有ActionScript屬性和方法的模板,ActionScript屬 性和方法都是影片剪輯對象的一部分。它所包含的屬性你可能已經很熟悉了,如剪輯的x和y的位置,它的縮放(scale)等等,而許多的屬性已在AS3中有 了輕微了改變。AS3同時也加入了Sprite(精靈)類。在多數情況下,你可以把一個sprite(精靈)理解為一個沒有時間線的影片剪輯。在多數案例 中,當你只用到代碼控制物體時,而不使用時間線和幀時,那么此時適合使用比較輕便的Sprite(精靈)類。
如果你編寫的類擴展了MovieClip或是Sprite,它將繼承對象固有的所有的屬性和方法。那么你可以為你所創建的對象加入指定的方法或 是屬性。例如,假設你想為一個游戲創建一個太空船對象。你可能想讓它包含一些圖像,在屏幕上有一個位置,來回移動,旋轉,偵聽enterFrame事件來 動畫,偵聽鍵盤和鼠標事件來交互。所有這些事情影片剪輯和sprite(精靈)都可以做到,因此理應繼承它們中的一個。然后你可以加入自定義的屬性象如速 度,燃料,破壞程度,以及自定義的行為如墜落,碰撞,射擊和自毀。這個類在編寫時開始大致象這樣:

package  {
import  flash.display.Sprite;

public  class  SpaceShip  extends  Sprite  {
private  var  speed:Number  =  0;
private  var  damage:Number  =  0;
private  var  fuel:Number  =  1000;

public  function  takeOff():void  {
//  .  .  .
}
public  function  crash():void  {

//  .  .  .  
}
public  function  shoot():void  {
//  .  .  .  
}
public  function  selfDestruct():void  {
//  .  .  .  
}
}
} 

注意在最開始你必須要先導入Sprite類,它存在于flash.display包中。如果你決定擴展MovieClip類,那么你同樣需要從flash.display.MovieClip包中導入MovieClip類。

2.3.7    創建你的document class(文檔類)

現在你已經掌握了足夠多的關于類的信息,可以開始編寫一個真正的有用的類。我我已經幾次提到過在創建基于swf的AS3時如何導入類。因為在 AS3中有引入了一新的概念,document class(文檔類)。基本上可以說,一個文檔類(document class)就是一個擴展了精靈(Sprite)或影片剪輯(MovieClip)的類,并且做為你的SWF的主類。當SWF被載入時,這個類的構造函數 將會被調用。那將是你想要讓影片做什么的進入點,如創建附加的影片剪輯,繪制圖表,預載素材,等等。
如果你正在使用Flash CS3 IDE在編寫代碼,是否使用文檔類(document class)是可自由選擇的。你可以只在時間線上編寫代碼。但是如果你使用的是Flex Builder 2,或是免費的Flex SDK, 它們并沒有可以編寫代碼的時間線。唯一的方法就是把你的代碼放置在類中。在那些工具中,每件事情都是圍繞著強大的文檔類(document class),沒有它也就不會有SWF。

下面是前面提到的文檔類的基本結構:

package  {
import  flash.display.Sprite;
public  class  Example  extends  Sprite  {
public  function  Example()  {
init();
}
private  function  init():void  {
//  sample  code  goes  here
}
}
} 

如果你是一步一步的在學習本章,對你來說這里面好像沒有什么新東西,但是你在這里的一個地方已經有了類的全部。我使用的是默認包(package),然后 導入和擴展精靈(Sprite)類。構造函數只有一行代碼它調用init方法。它當然是一個好辦法,可以將你的所有代碼放入到構造函數中,通常這種方式也 被認為是一個最好的習慣來限制構造函數中的代碼數量。因此我把它變為一個方法。在本書中,如果我給你一個用來試驗的小的代碼片斷,你要在所講述的類中將代 碼片斷插入到正確的init方法中。當影片在編譯運行時,構造函數就會調用init方法,你的代碼就會被運行。

現在你所要做的事情就是如何使你的文檔類(document class)與你將要創建的SWF鏈接起來。

討論此教程

服務項目_SERVICE

關于我們

萬博思圖(北京)信息技術有限公司,專業的flash,flex開發團隊,5年經驗。公司致力于互聯網上的業務的開展,對于互動網站行銷,互聯網應用程序開發有成熟的解決方案。我們關注互聯網市場動態,關注新技術,更注重在新的領域不斷探索發現。
萬博思圖業務內容主要包括企業品牌Flash網站開發,企業形象宣傳Flash設計,動畫,多媒體演示,Flex企業級應用程序開發,擁有眾多成功案例,歡迎來電咨詢。
 
COPYRIGHT BY WEBSTUDIO INTERACTIVE DESIGN Co.,Ltd. ALL RIGHTS RESERVED.
公司地址: 北京市朝陽區光華路15號院泰達時代中心4號樓704 郵編: 100026 EMAIL: [email protected]
電話: 010-59070059   (新號:010-59897050 010-59897060)  手機: 13693660520 傳真: 010-59070059-801
京公網安備:110108006741      京ICP備:05013074號-1
王先生
浙江6十1开奖结果规则 哈灵上海敲麻麻将下载 深圳风采中奖查询 JJ大众麻将技巧 广西快乐十分开奖规则 熊猫麻将*神器下载 腾讯qq麻将手机版官方下载 天津快乐十分投注技巧 北京快三快三一定牛 广西11选五走势图 麻将吃牌规则 广西快乐10分钟技巧 黑龙江省36选7中奖 河北排列7走势图 玩法 信誉最好棋牌游戏平台 贵阳闲来麻将 极速漂移赛车游戏下载