本例主要在前面所學編程知識的基礎上進一步掌握元件類擴展類的編寫,通過編寫get 和 set 存取器函數,為創建的元件類提供易于使用的編程接口,使得元件類的屬性在可以被訪問的基礎上進行良好的隱藏和封裝。本例還配合使用三角函數知識創建豐富特效,通過本例的制作,讀者可以掌握如何為元件類提供易于使用的編程接口,以及加深對三角函數知識的理解應用。本例思路:
創建實例背景。
繪制類似水泡的圖形,并轉換為元件類。
編寫元件類擴展類。
創建文檔類。
實例步驟:
(1)新建一個空白文檔,舞臺大小設置為400*300,幀頻設置為30,將舞臺背景顏色設置為 #618D0E ,繪制一個直徑為舞臺高度大小的正圓,并填充放射狀漸變色,調整高光位置在下方,如下圖10-1所示。
其填充放射狀漸變色值為:#A7E600 - #078914 - #00552F 。調整色柄值,參數依次為:
? ?? ? 色柄一:紅: 167,綠:230,藍: 0??Alpha: 100%
? ?? ? 色柄二:紅: 7,綠:137,藍: 20??Alpha: 100%
? ?? ? 色柄三:紅: 0,綠:85,藍: 47??Alpha: 100%

圖10-1??繪制背景(2)創建一個新圖層,命名為“高光”。繪制一個半徑與步驟(1)中的圓形略小的同心圓形,并填充線性漸變色,使用“漸變變形工具”進行調整高光位置由上至下分布,如圖10-2 所示。
其填充線性漸變色值為:#FFFFFF - #FFFFFF 。調整色柄值,參數依次為:
? ?? ? 色柄一:紅: 255,綠:255,藍: 255??Alpha: 0%
? ?? ? 色柄二:紅: 255,綠:255,藍: 255??Alpha: 100%

圖10- 2 高光部分(3)再創建一個新圖層,命名為“頂部高光” 。使用“橢圓工具”在頂部繪制一個橢圓,填充線性漸變色,高光位置同上一樣分布,如圖10- 3所示。
其填充線性漸變色值為:#FFFFFF - #FFFFFF 。調整色柄值,參數依次為:
? ?? ? 色柄一:紅: 255,綠:255,藍: 255??Alpha: 0%
? ?? ? 色柄二:紅: 255,綠:255,藍: 255??Alpha: 68%

圖10-3??頂部高光(4)新建一個影片剪輯,命名為“Ball_mc” 。繪制類似小水泡的圖形,這里我們繪制一個放射狀漸變的圓形,大小約在20左右,如圖10-4所示。
其填充放射狀漸變色值為:#FFFFFF - #FFFFFF - #FFFFFF 。調整色柄值,參數依次為:
? ?? ? 色柄一:紅: 255,綠:255,藍: 255??Alpha: 36%
? ?? ? 色柄二:紅: 255,綠:255,藍: 255??Alpha: 9%
? ?? ? 色柄二:紅: 255,綠:255,藍: 255??Alpha: 0%

圖10-4繪制類似水泡圖形(5)為影片剪輯“Ball_mc”添加元件類,如圖10-5所示。

圖10-5??添加元件類(6)下面是元件類擴展類。該類有三個私有屬性,如第11到13行代碼所示,我們在第22、第25行代碼分別定義其屬性對應的get()方法,為該元件類實例提供可訪問對應屬性的接口,第三個屬性還提供set()方法,如第29行代碼所示。在該類構造函數中還初始化了三個屬性,分別產生隨機的newX、newY值,如第17到19行代碼所示。AS3代碼:?
/**??
*?該類為擴展元件類??
*?@author?lbynet??
*?@version?0.1??
*/??
package?{??
import?flash.display.Sprite;??
public?class?Ball_mc?extends?Sprite?{??
private?var?newX:Number;??
private?var?newY:Number;??
private?var?W:Number;??
public?function?Ball_mc()?{??
this.newX?=?1?+?Math.random()*100;?//x軸上的隨機速度??
this.newY?=?1?+?Math.random()*20;?//y軸上的隨機速度??
this.W?=?0;//用于改變?x軸上的隨機速度?值??
}??
public?function?get?_newX():Number{??
return?this.newX;??
}??
public?function?get?_newY():Number{??
return?this.newY;??
}??
public?function?set?_W(i:Number){??
this.W?=?i;??
}??
public?function?get?_W():Number{??
return?this.W;??
}??
}??
}?(7) 下面的Main類是本實例的文檔類,該類定義了三個屬性,分別是存儲水泡總數、數量累加變量和隨機寬、高比例值, 第12到14行代碼所示。在構造函數中調用init()方法進行初始化兩個屬性值,并注冊ENTER_FRAME 事件偵聽器,如第20到22行代碼所示。
/**?
*?該類為主程序類?
*?@author?lbynet?
*?@version?0.1?
*/?
package?{?
import?flash.display.Sprite;?
import?flash.events.Event;?
public?class?Main?extends?Sprite?{?
private?var?totalNum:uint;?
private?var?i:uint;?
private?var?dim:Number;?
public?function?Main()?{?
init();?
}?
private?function?init()?{?
this.totalNum?=?70;?
this.i?=?0;?
stage.addEventListener(Event.ENTER_FRAME,?enterFrameHandler);?
}?(8)下面是兩個偵聽器函數,enterFrameHandler是前面注冊的偵聽器對應的函數,該函數創建了totalNum+1個Ball_mc實例,并實例的y坐標值統一設置在舞臺高度之外,如第29到31行代碼所示。接著我們在第33行代碼中隨機生成一個0到1之間的隨機小數,并與生成的Ball_mc實例對應的寬、高進行相乘得到隨機的寬、高值,如第33到35行代碼所示。If()語句的最后將Ball_mc實例添加到顯示列表并注冊ENTER_FRAME 事件偵聽器,和進行i值的累加,如第37到39行代碼所示。
AS3代碼
private?function?enterFrameHandler(event:Event)?{??
var?_mc:Sprite;??
if?(this.i?(9)removeEnterFrameHandler是生成的每個Ball_mc實例對應的偵聽器函數,在該函數中,我們對Ball_mc實例的W屬性進行累加,并設置其X、Y坐標值,如上圖中第45到48行代碼所示,其中X坐標值被設置為舞臺中間大小 + 對應Ball_mc實例的newX屬性值 *??其W屬性的正弦值,如上圖中第47行代碼所示,從而使對應Ball_mc實例在舞臺中間的左右來回作運動,而在Y軸方向上賦予其newY值,使其產生Y軸方向上的遞減(也就是Ball_mc實例向上運動),如上圖中第48行代碼所示,最終產生盤旋上升效果,如本例效果圖所示。下圖所示是本例所使用的三角函數簡單原理圖。

圖10-6 三角函數原理(10) 當Ball_mc實例運動致舞臺上方外,便清除該實例注冊的ENTER_FRAME 事件偵聽器和該該實例,并進行i值的遞減,如步驟(7)第50到55行代碼所示。我們還可以擴展思路,創作更多效果,如下圖所示的小球從向而上運動,作類似噴泉效果。還可以做各種類似冒泡效果。


圖10-7 擴展實例
[1b]>>出自《Flash CS4動畫設計與制作208例》(轉載請保留出處)[/1b]
本文轉自:http://www.5uflash.com/flashjiaocheng/Flashdonghuajiaocheng/5202.html
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
