大家好,今天亦樂(lè)首次為大家?guī)?lái)flash actionscript轉(zhuǎn)載教程。首先聲明出處(我自己是沒(méi)時(shí)間寫教程啦,要直接找我討論還好)
今天,我也正式宣布,開始成為閃客,以往對(duì)macromedia flash的許多頭疼問(wèn)題都被adobe解決了,以往一直否認(rèn)我喜歡做flash,現(xiàn)在總算可以為adobe flash 自豪。非常有系統(tǒng)的developing方式。RIA 平臺(tái), on screen project就不這里說(shuō)了。
這期帶來(lái)的是flash極重要元素之一,event事件。在游戲里就是所謂的Trigger. Adobe改良后的,大家謂稱的“冒泡機(jī)制”。有問(wèn)題歡迎發(fā)問(wèn)指教。
=思路大綱=
- ActionScript 2的問(wèn)題
- AS3解決問(wèn)題
- 結(jié)合問(wèn)題,說(shuō)明“冒泡”
- 冒泡的問(wèn)題所在以及解決方法
1 - ActionScript 2的問(wèn)題
stage里有一個(gè)mc,mc里有一個(gè)btn
點(diǎn)選mc實(shí)現(xiàn)拖動(dòng)mc,鼠標(biāo)松開停止拖動(dòng)
點(diǎn)選mc實(shí)現(xiàn)mc隱藏。
最容易想到的方法,代碼如下:
mc.onPress = function() {
this.startDrag();
};
mc.onRelease = function() {
this.stopDrag();
};
mc.btn.onPress = function() {
mc._visible=false
};
表面來(lái)看,這個(gè)思路是正確的。(實(shí)際上沒(méi)什么思路可言,很簡(jiǎn)單的方法。)
實(shí)際怎么樣?當(dāng)然是不能實(shí)現(xiàn)。
問(wèn)題:點(diǎn)擊btn,不能觸發(fā)btn的動(dòng)作!?。。?br style="line-height: 22px; ">解釋: 因?yàn)閎tn處于mc內(nèi)部,mc被加上了事件以后,按照as2的事件機(jī)制,mc內(nèi)部的btn甚至是其他的元件都不能接受事件?;蛘呖梢哉J(rèn)為mc的事件覆蓋了mc中其他元件的事件。
從非冒泡機(jī)制來(lái)說(shuō),在btn上點(diǎn)擊鼠標(biāo),首先接受到點(diǎn)擊事件的自然是btn的上一層(也就是mc),然后才是btn元件。Mc先接受到點(diǎn)擊事件,觸發(fā)相關(guān)的函數(shù)。然后呢?我們要實(shí)現(xiàn)的點(diǎn)擊btn的效果沒(méi)了。我們可以認(rèn)為mc把我們的鼠標(biāo)點(diǎn)擊事件據(jù)為私有了,不再往下傳遞。(如果是冒泡機(jī)制的話,這個(gè)動(dòng)作就回繼續(xù)往下傳遞到btn,然后btn會(huì)執(zhí)行。)那么這種效果在as2中還能實(shí)現(xiàn)么?答案自然是肯定的,不過(guò)方法就復(fù)雜了。
這里就不討論了。As3已經(jīng)成為主流。
但是as3中的冒泡機(jī)制,讓我們可以簡(jiǎn)單的解決這樣的難題。
2 - AS3解決問(wèn)題
下面來(lái)看as3中怎么實(shí)現(xiàn)。
代碼如下:
import flash.events.*;
mc.addEventListener(MouseEvent.CLICK,mcfunction);
mc.btn.addEventListener(MouseEvent.CLICK,btnfucntion);
function mcfunction(event:MouseEvent) {
trace("mc click");
}
function btnfucntion(event:MouseEvent) {
trace("btn click");
}
看看代碼就覺(jué)得,好像沒(méi)用什么特別的解決方法,就加兩個(gè)偵聽函數(shù),就搞定了。
這個(gè)代碼自然的不能再自然了,就好像做flash 先的安裝軟件一樣。
但是如此自然的代碼下面,使AS3的冒泡機(jī)制在提供支持。
3 - 結(jié)合問(wèn)題,說(shuō)明冒泡機(jī)制:
Help中有一個(gè)冒泡機(jī)制的圖,相信大家都已經(jīng)看過(guò)了
這里我聯(lián)系實(shí)例,另外做一個(gè)圖,幫助各位理解。

上圖為as2中的執(zhí)行原理
下圖為as3中的執(zhí)行原理
上圖也就是在as3中實(shí)現(xiàn)我們文章開始提出的例子的工作原理。
下面詳細(xì)描述一下
捕獲階段:
鼠標(biāo)在btn上發(fā)出點(diǎn)擊事件,首先捕捉到該事件的事stage.,然后事件往下傳遞到mc,再到btn..(如果鼠標(biāo)事件發(fā)生在btn按鈕中的一個(gè)label上,那么該事件還會(huì)繼續(xù)向下傳遞,直到找到label元件。)AS2中,一旦找到了可以相應(yīng)事件的函數(shù),就停止了,不會(huì)往下傳遞。這個(gè)道理應(yīng)該說(shuō)明白了
目標(biāo)階段:
找到我們的鼠標(biāo)最底層的目標(biāo),也就是btn以后,那么就開始執(zhí)行btn的偵聽函數(shù)了。
如果鼠標(biāo)事件發(fā)生的所在位置,是mc中的btn中的一個(gè)label。那么將先執(zhí)行l(wèi)abel的偵聽函數(shù)。(當(dāng)然我們的例子中沒(méi)有l(wèi)abel)
冒泡階段:
執(zhí)行了目標(biāo)階段的偵聽函數(shù)以后,開始冒泡。
換一個(gè)說(shuō)法是,返回btn的父級(jí)元件mc,如果能找到相關(guān)的偵聽函數(shù),那么就執(zhí)行,如果沒(méi)有,就繼續(xù)往上冒泡到btn的父級(jí)元件mc的父級(jí)元件stage??茨懿荒苷业较嚓P(guān)的偵聽函數(shù)。
注意一個(gè):首先執(zhí)行的函數(shù)一定是目標(biāo)對(duì)象的偵聽函數(shù)。就像我們上面的例子一樣,點(diǎn)擊btn會(huì)先trace(“btn click”),然后冒泡到mc,執(zhí)行trace(“mc click”)..然后繼續(xù)往上,如果stage我們也加一個(gè)偵聽函數(shù),執(zhí)行語(yǔ)句,那么還會(huì)繼續(xù)執(zhí)行 trace(“stage click”).
到達(dá)stage頂層了,冒泡結(jié)束。
說(shuō)到這里,各位看官也應(yīng)該明白了as3的冒泡究竟是干什么用的了
4 - 冒泡的問(wèn)題所在以及解決方法
冒泡也有問(wèn)題,并不是說(shuō)它有缺陷,因?yàn)槌霈F(xiàn)問(wèn)題無(wú)法避免。
問(wèn)題在于,
假如在上面的例子中,我們不想在點(diǎn)擊btn冒泡階段中執(zhí)行mc的偵聽函數(shù),我們只想執(zhí)行btn的偵聽函數(shù)。怎么解決?
同樣的問(wèn)題延伸出去,可以得到很多擴(kuò)展和應(yīng)用。
那么我們需要阻止他的冒泡的時(shí)候執(zhí)行相關(guān)的偵聽函數(shù)。
Chm中的方法有
stopImmediatePropagation():void
防止對(duì)事件流中當(dāng)前節(jié)點(diǎn)中和所有后續(xù)節(jié)點(diǎn)中的事件偵聽器進(jìn)行處理。
stopPropagation():void
防止對(duì)事件流中當(dāng)前節(jié)點(diǎn)的后續(xù)節(jié)點(diǎn)中的所有事件偵聽器進(jìn)行處理。
用來(lái)修改我們上面的例子
代碼如下:
import flash.events.*;
mc.addEventListener(MouseEvent.CLICK,mcfunction);
mc.btn.addEventListener(MouseEvent.CLICK,btnfucntion);
function mcfunction(event:MouseEvent) {
trace("mc click");
}
function btnfucntion(event:MouseEvent) {
trace("btn click");
event.stopPropagation();//修改在此處。簡(jiǎn)單一句,解決問(wèn)題
}
現(xiàn)在可以試試,點(diǎn)擊btn運(yùn)行得到的結(jié)果就是
代碼:
btn click
說(shuō)明,已經(jīng)防止了冒泡階段中對(duì)mc偵聽函數(shù)的處理。也就沒(méi)有trace(“mc click”)了
As3事件機(jī)制遠(yuǎn)遠(yuǎn)不像這里寫的那么簡(jiǎn)單,還有很多東西需要研究。
本文只為拋磚引玉,讓各位能先了解一下冒泡機(jī)制。
希望能多的朋友能提供相關(guān)的學(xué)習(xí)資料
posted on 2010-03-15 15:03
暗夜教父 閱讀(450)
評(píng)論(0) 編輯 收藏 引用 所屬分類:
AS3