Gradient Fill

利用graphics.beginGradientFill()將shape以漸層的方式填滿, 是相當常用的技巧之一.
比較複雜的是它的參數,不過我們通常只需定義前五個.

prototype如下:
public function beginGradientFill(type:String, colors:Array, alphas:Array, ratios:Array, matrix:Matrix = null, spreadMethod:String = "pad", interpolationMethod:String = "rgb", focalPointRatio:Number = 0):void

第一個參數是 GradientFill的種類,actionscript有linear及radial兩種.
第二個參數是 顏色個數array.
第三個參數是 透明度array.
第四個參數是 色素?的變化範圍array.
第五個參數是 transform matrix,用來translate 及 rotate Gradient, 可以利用matrix.createGradientBox()來設定. prototype如下:
createGradientBox(width:Number, height:Number, rotation:Number = 0, tx:Number = 0, ty:Number = 0):void


有一點值得注意的是, 前述的array, 它們的個數必須一致, 否則無法顯示GradientFill的效果,但也不會丟出任何錯誤訊息.

demo:http://imlab.cs.nccu.edu.tw/~pie/GradientFill.swf
<br />package redbug.draw<br />{<br /> import flash.display.GradientType;<br /> import flash.display.Sprite;<br /> import flash.geom.Matrix;<br /> <br /> public class GradientFill extends Sprite<br /> { private const px:int = 100;<br /> private const py:int = 100;<br /> private const w:int = 200;<br /> private const h:int = 200;<br /> <br /> public function GradientFill()<br /> {<br /> init();<br /> }<br /> <br /> private function init():void<br /> {<br /> graphics.lineStyle(1);<br /> var colors:Array = [0x000000, 0xff0000];<br /> var alphas:Array = [1, 0];<br /> var ratios:Array = [0, 255];<br /> var matrix:Matrix = new Matrix();<br /> matrix.createGradientBox(w, h, Math.PI/4, px, py);<br /> graphics.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, matrix);<br /> graphics.drawRect(px, py, w, h);<br /> graphics.endFill();<br /> }<br /> }<br />}<br /><br />

Removing drawing with clear

ActionScript的drawing跟java似乎有些不同,
在java中，graphics的重畫程序是: update()-> paint()-> repaint()or paintComponet()
其中在update()中，會先自動清除graphics的content，再重畫content。

如果不想清除之前的content，就需自己overwirte掉update()，讓它直接call paint()。
那麼每次重畫，content就不會清除之前的content，而是在content中加上新的shape，
所以content會隨著重畫的次數逐漸變大，效能會愈吃愈重。
詳請可以參考下列網址:
http://www.cs.clemson.edu/~cs428/resources/java/tutorial/JTGraphEx.html

這裡要說的是，actionscript預設的drawing動作與java似乎是相反的。
當sprite.graphics.drawXXX();
它便在sprite的graphics content中加入此shape，並自動在每個frame進行重畫。

所以千萬別在ENTER_FRAME event handler中使用graphics.drawXX(),
如下：
addEventListener(Event.ENTER_FRAME, onEnterFrame);

public function onEnterFrame(event:Event):void {
　　　graphics.drawCircle(x+1,y+1,r);
}

這樣在每個frame，都會在sprite的graphics content中增加一個circle shape，直到sprite的graphics content爆炸。

如果要模仿java在重畫前先清除之前的graphics content，就需先呼叫graphics.clear();
如：
public function onEnterFrame(event:Event):void {
　　　graphics.clear();
　　　graphics.drawCircle(x+1,y+1,r);
}

最後用下面這段描述做結語：
Use of the clear method has an important and somewhat unexpected effect on drawing efficiency. In the drawing API, it happens that the more you draw in a particular movie clip, the slower it goes. For a few dozen shapes, the slowdown is not noticeable, but little by little, each new shape takes longer and longer to draw. Even if the new shape completely covers and obliterates everything else, the vector information for those older shapes is still there and will be completely redrawn each time. This can be important in animation, where you are redrawing almost the same thing over and over. Using clear handles this by completely removing all prior vector information from the clip.

利用sin()來達到motion smooth

http://imlab.cs.nccu.edu.tw/~pie/bounceBall.swf
注意在Bobbing class中的onEnterFrame()，
利用sin是-1~1之間的平滑曲線性質，來smooth球上下彈跳的motion
<br />package anim {<br /> import flash.display.Sprite;<br /> <br /> public class Ball extends Sprite {<br /> private var radius:Number;<br /> private var color:uint;<br /> <br /> public function Ball(radius:Number=40, color:uint=0xff0000) {<br /> this.radius = radius;<br /> this.color = color;<br /> init();<br /> }<br /> public function init():void {<br /> graphics.beginFill(color);<br /> graphics.drawCircle(0, 0, radius);<br /> graphics.endFill();<br /> }<br /> }<br />}<br />

<br />package anim<br />{<br /> import flash.display.Sprite;<br /> import flash.events.Event;<br /> <br /> public class Bobbing extends Sprite {<br /> private var ball:Ball;<br /> private var angle:Number = 0;<br /> private var centerY:Number = 200;<br /> private var range:Number = 50;<br /> private var speed:Number = .1;<br /> <br /> public function Bobbing(x:int) {<br /> init(x);<br /> }<br /> private function init(x:int):void {<br /> ball = new Ball();<br /> addChild(ball);<br /> ball.x = x / 2;<br /> addEventListener(Event.ENTER_FRAME, onEnterFrame);<br /> }<br /> public function onEnterFrame(event:Event):void {<br /> ball.y = centerY + Math.sin(angle) * range;<br /> angle += speed;<br /> }<br /> }<br />}<br />

ActionScript3 2D Engine - Box2DFlash

Hi~ 晨型人~ 我今天7:40起床~~ XD

Box2DFlash
http://box2dflash.sourceforge.net/

原本是C++的2D engine, 然後有人把它porting成AS3的版本(不知道是不是作者本人porting的)

據說是第一個AS的 2D engine.

安裝的方式很簡單..
下載原始碼後, 在flex開一個ActionScript Project
並把Main application file 設為Main.as

接著用import的方式把原始碼的壓縮檔匯進Project.
run Main.as
就可以在本地端編譯執行了~

不過目前似乎沒有Development API, 只有使用者手冊...
但總比純手刻物理模擬來的好...XD
http://www.box2d.org/manual.html

Box2D Forum(有Flash AS3版)
http://www.box2d.org/forum/index.php