Flash AS 教程:動(dòng)畫事件

動(dòng)畫事件
我們希望能夠使用代碼讓物體動(dòng)起來(lái),并允許屏幕反復(fù)地刷新。前面看過(guò)一個(gè)使用 enterFrame 影片事件的示例。現(xiàn)在把這種方法運(yùn)用到 AS 3 中,只需要增加一個(gè) enterFrame 事件的即可:
addEventListener(Event.ENTER_FRAME, onEnterFrame);
別忘了導(dǎo)入 Event 類,并創(chuàng)建一個(gè)名為 onEnterFrame 的方法。人們常常迷惑,只有一幀怎么能執(zhí)行 enterFrame(進(jìn)入幀) 事件呢?事實(shí)上,播放頭并非真正地在進(jìn)入下一幀,它只停留在第一幀上,并不是把播放頭移動(dòng)到下一幀才形成了 enterFrame 事件,而是用另一種方法:Flash 告訴播放頭何時(shí)進(jìn)行移動(dòng),可以把 enterFrame 看成一個(gè)定時(shí)器,只是有些不精確。
下面我們看看第一個(gè) AS 3 動(dòng)畫:
package {
import flash.display.Sprite;
import flash.events.Event;
public class FirstAnimation extends Sprite {
private var ball:Sprite;
public function FirstAnimation() {
init();
}
private function init():void {
ball = new Sprite();
addChild(ball);
ball.graphics.beginFill(0xff0000);
ball.graphics.drawCircle(0, 0, 40);
ball.graphics.endFill();
ball.x = 20;
ball.y = stage.stageHeight / 2;
ball.addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onEnterFrame(event:Event):void {
ball.x ;
}
}
}
init 函數(shù)創(chuàng)建了一個(gè)名為 ball 的 Sprite 影片,并為其建立事件。 onEnterFrame 函數(shù)負(fù)責(zé) ball 的運(yùn)動(dòng)及屏幕刷新工作。這是學(xué)習(xí)本書內(nèi)容的基礎(chǔ),也是使用 ActionScript 創(chuàng)建動(dòng)畫的基礎(chǔ),所以務(wù)必要掌握。
顯示列表
在 AS 3 之前,人們可以創(chuàng)建多個(gè)不同類型的可視化對(duì)象,包括影片剪輯,圖形,按鈕,文本框,位圖,組件和基本形狀。這些對(duì)象沒(méi)有真正的層次結(jié)構(gòu),它們的創(chuàng)建、刪除、操作方法也均不相同。比如,在 IDE 中,可以使用 attachMovie ,duplicateMovieClip 或 createEmptyMovieClip 的方法將影片剪輯放置于舞臺(tái)上,文本框可以在開(kāi)發(fā)環(huán)境中創(chuàng)建也可以用代碼創(chuàng)建。而在使用位圖(bitmap),視頻(video)及組件(component)時(shí),它們就像是來(lái)自于別的星球,最終被強(qiáng)硬地放在一起。
對(duì)于 AS 3 來(lái)說(shuō),這些對(duì)象都有了統(tǒng)一的歸屬。在舞臺(tái)上所有可見(jiàn)的對(duì)象都繼承自 DisplayObject 類。換句話講,這些對(duì)象都是一個(gè)大家庭的成員,并以相同的形式工作,使用同樣的方式進(jìn)行創(chuàng)建,置入,刪除,操作。無(wú)論創(chuàng)建 Sprite 影片,影片剪輯或文本框的方法都非常相近,我們需要使用 new 關(guān)鍵字來(lái)完成,創(chuàng)建任意類型的對(duì)象。為了證明這一點(diǎn),請(qǐng)看下面三條示例:
var myTextfield:TextField = new TextField();
var myMovieClip:MovieClip = new MovieClip();
var mySprite:Sprite = new Sprite();
如果我們創(chuàng)建的是一個(gè)影片剪輯或 Sprite 影片的話,就可以直接里面進(jìn)行繪制,如:
mySprite.graphics.beginFill(0xff0000);
mySprite.graphics.drawCircle(0, 0, 40);
mySprite.graphics.endFill();
但只有這些代碼,還不能看到效果,這就引發(fā)了接下來(lái)要討論的顯示列表。“顯示列表”是個(gè)新名詞,可以理解為一顆由可視對(duì)象構(gòu)成的樹(shù)。舞臺(tái)就是樹(shù)根,默認(rèn)為可見(jiàn)的,在舞臺(tái)上,我們可以有很多影片剪輯或可視對(duì)象(文本框,圖形等),把它們加入舞臺(tái)后,也就成為可見(jiàn)的了。
這些影片中也許還嵌套著很多層的可視對(duì)象,這就是我們所謂的顯示列表。 AS 2 與 AS 3 顯示列表最大的不同在于,AS 2 中,當(dāng)使用 attach 或 createEmptyMovieClip 方法創(chuàng)建影片剪輯時(shí),必須指定它位于樹(shù)的哪個(gè)位置。這樣一來(lái),影片剪輯要放置在列表的指定位置。當(dāng)刪除該影片時(shí),同樣也無(wú)法改變它在列表中的位置或在列表中移除它。
在 AS 3 中,創(chuàng)建了一些 Sprite 影片后,不會(huì)自動(dòng)被加入顯示列表。在上面的示例中我們發(fā)現(xiàn),創(chuàng)建一個(gè) Sprite 后,并不涉及父級(jí)影片(parent)或深度(depth)的問(wèn)題,這樣就可以在它沒(méi)有加入視覺(jué)列表之前就對(duì)其進(jìn)行操作了。說(shuō)到舞臺(tái)(Stage),可以把這些顯示對(duì)象看作是幕后的演員,雖然看不到,但確實(shí)存在,并時(shí)刻準(zhǔn)備著亮相的一刻,我們使用 addChild 方法把對(duì)象加入顯示列表。將文檔類作為樹(shù)根,向里面加入孩子時(shí),會(huì)自己被設(shè)置為可見(jiàn)的。
現(xiàn)在,在前面的例子中再加入創(chuàng)建 Sprite 對(duì)象以及 addChild 方法,如下:
var mySprite:Sprite = new Sprite();
mySprite.graphics.beginFill(0xff0000);
mySprite.graphics.drawCircle(0, 0, 40);
mySprite.graphics.endFill();
addChild(mySprite);
如果大家有興趣試一下這段代碼的話,請(qǐng)把它們寫入前面所給的類框架的 init 函數(shù)中。請(qǐng)注意,繪制出的圓默認(rèn)位置是0,0點(diǎn),可以改變其 x 和 y 屬性。還要注意,創(chuàng)建新影片時(shí)不再需要像 AS 2 那樣去設(shè)置深度(depth)。雖然深度管理為自動(dòng)執(zhí)行,但我們還有指定深度或改變深度的方法,這部分等將來(lái)用到時(shí)再講。
使用 removeChild 方法,從顯示列表中刪除一個(gè)對(duì)象,并以該對(duì)象的名字作為參數(shù)。第一,刪除一個(gè)對(duì)象,不是去毀滅它,對(duì)象依然保持原樣,只是暫時(shí)被移除,當(dāng)再次被加入到顯示列表中,對(duì)象仍保持原來(lái)的狀態(tài)。換句話講,如果顯示對(duì)象里面繪制了圖形,或是已加載了一些外部信息,那么將它重新加入顯示列表后,就不必再去重繪或重載這些信息。第二,把該對(duì)象重新加入顯示列表后,還可以為它指定處在顯示列表中的位置,這就是我們所熟知的重定父級(jí)。
從一個(gè)影片剪輯中刪除一個(gè)對(duì)象,再把它加載到另一個(gè)影片中剪輯中,并保持剛剛被刪除時(shí)的狀態(tài),在以前是不可能完成的。事實(shí)上,有時(shí)并不需要去刪除影片,因?yàn)椋粋€(gè)子對(duì)象只能有一個(gè)父級(jí),把它加入到另一個(gè)父級(jí)中,就會(huì)自動(dòng)從原來(lái)的父級(jí)中刪除。請(qǐng)看下面示例:
package {
import flash.display.Sprite;
import flash.events.MouseEvent;
public class Reparenting extends Sprite {
private var parent1:Sprite;
private var parent2:Sprite;
private var ball:Sprite;
public function Reparenting() {
init();
}
private function init():void {
parent1 = new Sprite();
addChild(parent1);
parent1.graphics.lineStyle(1, 0);
parent1.graphics.drawRect(-50, -50, 100, 100);
parent1.x = 60;
parent1.y = 60;
parent2 = new Sprite();
addChild(parent2);
parent2.graphics.lineStyle(1, 0);
parent2.graphics.drawRect(-50, -50, 100, 100);
parent2.x = 170;
parent2.y = 60;
ball = new Sprite();
parent1.addChild(ball);
ball.graphics.beginFill(0xff0000);
ball.graphics.drawCircle(0, 0, 40);
ball.graphics.endFill();
ball.addEventListener(MouseEvent.CLICK, onBallClick);
}
public function onBallClick(event:MouseEvent):void {
parent2.addChild(ball);
}
}
}
該類中有三個(gè) Sprite 對(duì)象:parent1, parent2, ball。 parent1, parent2 影片直接加入顯示列表,并在影片中繪制了正方形。 Ball 影片被加入到 parent1,就相當(dāng)于加入了顯示列表并可見(jiàn)。當(dāng)小球被點(diǎn)擊時(shí),它將被加入 parent2 影片中。請(qǐng)注意,沒(méi)有改變 Ball 的 x,y 坐標(biāo)的代碼,之所以產(chǎn)生移動(dòng)是因?yàn)?Ball 被加載到了不同位置的 Sprite 影片中。 Sprite 影片被刪除后再被加入顯示列表,Ball 仍會(huì)出現(xiàn)。
相關(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.dbjr.com.cn/softs/408402.2018-02-28
flash cs6中怎么使用ActionScript3.0?
flash cs6中怎么使用ActionScript3.0?flash cs6中想要使用ActionScript3.0功能,該怎么使用呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下2018-01-25Flash中怎么實(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-12Flash中如何用代碼將圖片放在自己想要的舞臺(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-18Flash怎么設(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-11Flash怎么制作來(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