ActionScript 3.0 Image Effects
颱風天在家裡,甚麼事情也不能做,更扯的是餐城也進不去,詭異的是我老婆可以...$%&@#,這時候只能暗自猜想 playfish 該不會將我的電腦變成拒絕往來戶了吧。既然沒有遊戲可以玩,只好趁機花點時間再繼續看看之前買的書:
ActionScript 3.0 Image Effects
http://tlsj.tenlong.com.tw/WebModule/BookSearch/bookSearchViewAction.do?isbn=1430218711&sid=50458

本書的章節如下:
1. The Drawing API
無廢話,直接快速帶過常用的 API 語法。甚至會提到 Flash Player 10 才支援的語法,譬如 Graphics 的:
Copies all of drawing commands from the source Graphics object into the calling Graphics object.
lineBitmapStyle(bitmap:BitmapData, matrix:Matrix = null, repeat:Boolean = true, smooth:Boolean = false):void
Specifies a bitmap to use for the line stroke when drawing lines.
"繪製命令" 本身也可以被當作物件來操作、管理,那要做 undo 應該就會更容易些。還有像是使用 BitmapData 當作畫線的素材,這也是之前所沒有的。至於繪製三角形組的語法,若是搭配 BitmapData 填圖的話,那就可以用來實作 3D 貼圖的效果。
2. Filters and Blend Modes
介紹大部分的 Filter 與 Blend Modes,與其他書本類似。
3. Bitmaps and BitmapData
談到點陣圖、像素、位元等等的基本知識。加上搭配 ColorTransform 做一些特效變化。
4. Advanced Bitmap Manipulation
談到 BitmapData.noise()、perlinNoise()、copyChannel(),還有像是數位相機常會提供影像光譜資訊的功能:
Computes a 256-value binary number histogram of a BitmapData object.
接著會提到 threshold(),也就是我們會用來做 webcam 動態偵測時所需要的功能:http://blog.ben.idv.tw/2008/08/webcam.html
甚至可以用來做動態去背的機制。
另外也會再多談到幾個 photoshop 中所提供的功能 要如何用 AS3 做到。
5. Pixel Bender and Shaders
帶過 Pixel Bender Toolkit 的使用,想當然不會離題太遠而提到 Pixel Bender language 的語法,然後接著就是在 AS3 中如何使用 Shader 載入 *.pbj,以及如何在 AS3 中提供 kernel 所需的參數。
6. ActionScript in the Third Dimension
很有用的章節,會先將 2.5D 解釋完,然後用一點點簡單的範例說明。
談到用 Vector3D、Matrix3D 來對每個 3D 座標作位移、距離計算等等。
因為 3D 的 z,跟實際上每個 DisplayObject 被加進 Display List 的順序所造成的 Depth 不同,所以需要 Transform 類別新加的方法來處理以計算每個 3D 的 z 換成 2D 後的大小:
Returns a Matrix3D object, which can transform the space of a specified display object in relation to the current display object's space.
然後再進行排序,以決定重新加入 Display List 的順序。
最後會提到以 BitmapData 進行 3D 貼圖的做法,也會用到 drawTriangles() 來完成。
這章節,提到不少小型 3D Engine 原理。
7. Using an Animation and Effect Library
使用以下兩組 library:
比較特別的是,他有支援複合式動畫、特效的機制,使用了 Composite 設計模式,可用來製作連續動畫,將多個動畫組合起來做 連續 或 同時 播放。
以下章節還沒閱讀到,不過相信也會很精彩
8. Elemental Animation Effects
9. Text Effects
10. Video Effects
11. Sound Visualization Effects
12. Interactive Effects
非常值得推薦給需要做影像處理、特效的開發者閱讀,或是一些網路活動要針對 webcam 拍照後做特效的機制,也都可以參考本書的範例程式。
最後,補充一點,以上我貼的語法說明,是從 adobe 官網貼來的,若你手邊的 Help 檔是 Flash CS3 的話,那是不夠的,因為只支援到 Flash Player 9,一定要找有支援到 Flash Player 10 的新版 Help 才行,譬如 Flex 3.3 的 Help:
8 意見:
這本看起來還不錯耶,邦大颱風天也在K書,真用功~:)
您好!
有個flash問題困擾我許久,問了很多地方,但得不到解答,想請您幫忙看是否有解,謝謝!
小弟想要做一個可以繪製『對稱』圖形的flash檔,如下圖所示,
http://163.32.153.9/ydm/flash/temp/pic.gif
我用滑鼠繪第一條線AB,用程式自動繪出其相對稱的線為ab;
我用滑鼠繪第二條線EF,用程式自動繪出其相對稱的線為ef;
但很奇怪的是,兩條線重疊的地方,顏色卻是上下顛倒的,
也就是新畫的無法將舊畫的蓋掉,這樣就不是真的對稱了,
這個問題想了好久,請問到底該如何解決?
我的swf檔連結如下:
http://163.32.153.9/ydm/flash/temp/mytest2.swf
我的fla檔連結如下:
http://163.32.153.9/ydm/flash/temp/mytest2.fla
感覺上你用了兩個一左一右的 Sprite,是嗎?因此會有上下層級的問題,若是改成都畫在同一個 Sprite 上,應該就可以了吧~
謝謝您的提示,在同一個sprite中同時啟用兩個兩個sprite如下:
var mysprite:Sprite;
var p1:Graphics=mysprite.graphics;
var p2:Graphics=mysprite.graphics;
p1.moveTo(mouse_x,mouse_y);
p1.lineTo(mouse_xx,mouse_yy);
p2.moveTo(500-mouse_x,mouse_y);
p2.lineTo(500-mouse_xx,mouse_yy);
會有個問題就是左右對稱的兩個點中點間會有線連起來,不知是上面哪裡出錯?
不過感謝邦大的提示,問題已經解決了!我後來就設定每一個畫筆只能在固定的sprite中移動,就沒有上下層的問題了,謝謝!
但我還是很好奇,如何在同一個sprite中同時運作兩支畫筆! ^ ^
同時運作?
即使你是將畫布分到兩個 Sprite 上,你仍然會依序執行繪製的程序吧~所以即使現在兩支畫筆藥在同一個畫布 Sprite 上,也仍然有先後,不會真的有 "同時" 這種事情。
程式架構你可以再想想、規劃看看,譬如設計一個 Pen 的類別:
class Pen{
private var _paper:Sprite;
private var _color:int = 0x000000;
public function pen(paper:Sprite){
_paper = paper;
}
public function setColor(color:int):void{
_color = color;
}
public function draw(from:Point, to:Point):void{
var g:Graphics = _paper.graphics;
g.lineStyle(_color);
g.moveTo(from.x, from.y);
g.lineTo(to.x, line.y);
}
}
然後你可以產生兩個畫筆物件:
var p1:Pen = new Pen(mySprite);
var p2:Pen = new Pen(mySprite);
當你要繪製的時候,就可以使用:
p1.draw(fp, tp);
p2.draw(fp, tp);
至於,兩支畫筆要顛倒的部分,你可以考慮是要由另外的類別處理,或是在 Pen 中設計一個影響 x, y 的變數,譬如:
...
private var _tx:Number = 1;
private var _ty:Number = 1;
...
public function setTxy(x:Number=1, y:Number=1):void{
_tx = x;
_ty = y;
}
...
public function draw(from:Point, to:Point):void{
var g:Graphics = _paper.graphics;
g.lineStyle(_color);
g.moveTo(from.x * _tx, from.y * _ty);
g.lineTo(to.x * _tx, line.y * _ty);
}
這樣,你就可以為 pen2 設定一些會影響繪製結果的 tx, ty 參數囉,至於這些參數要如何繪製結果,你可以自行開發比較複雜的參數。
最後,另外你提到兩條線會發生連線的問題,這是當然的,以上每一筆畫都是在同一個畫布上進行的,如果想要製作例如橡皮擦,想要可以單獨擦掉某一條線的話,那麼就要考慮將每條線各自存放在一個 Sprite 中,也就是在一張畫布 Sprite 中,有多條線段的 Sprite。
若是,希望兩條線段中間交叉的部分要有混色的效果,可能就不太好處理了,可能要計算每個座標上的舊像素與將要畫上的新像素,兩者作位元運算加總,以產出新的像素資料來繪製。
謝謝邦大的回應,
努力鑽研中,謝謝!
public function draw(source:IBitmapDrawable, matrix:Matrix = null, colorTransform:ColorTransform = null, blendMode:String = null, clipRect:Rectangle = null, smoothing:Boolean = false):void
flash.display.BitmapData.draw()裡面的blendMode屬性不是就可以簡單控制疊色效果?
沒錯
張貼意見