[心得] 來談一下 能夠產生水波特效的 Displace …
2632篇提到 神鬼奇航三 某活動網站的水波特效
後來我去 FlashKit 論壇察了一下資料
總算察到了 "realistic ripple effect" 的常見作法
主要都是利用 Flash 裡面的 DisplacementMapFilter
這是 Flash 的七個 "可以手動調整的 Filter" 以外的一個
在使用 DisplacementMapFilter 的時候需要提供一個 BitmapData 來做運算
這篇先講一下 DisplacementMapFilter的運作原理
如果覺得太複雜...可以直接看下一篇的特效應用方式和使用結果
下一篇待會兒補上
--------------------------------------本文開始--------------------------------------
DisplacementmapFilter 藉由讀取的 BitmapData 資料來把一個圖片的像素搬移位置
每個像素搬移的方式不同就會造成 "圖片的扭曲效果"
DisplacementMapFilter 所使用的公式是下面這條:
(不要被他醜陋的外表嚇到,我下面會盡量簡單地解釋)
dstPixel[x, y] = srcPixel[x + ((componentX(x, y) - 128) * scaleX) / 256,
y + ((componentY(x, y) - 128) * scaleY) / 256]
(以上的公式意思是把 srcPixel 搬移到 dstPixel 所使用的公式)
以下開始解說:
先來解釋一下代表 color channel 的 componentX, componentY
在 Flash 裡面所謂的 color channel 有分四個
也就是 Red, Green, Blue, Alpha
所對應到的 channel value 是 1, 2, 4, 8
要指複數個 color channels 的話,把兩個數字加起來就可以了
像是 1 + 4 + 8 == 13 → 13 就直接代表 R, B, A 三個 channels
(各種組合方式都不會產生同樣的數字)
又 RGBA 顏色分為 256 種量值大小,取一半就是128
componentX, componentY 所要參考的就是
被參考的 BitmapData 上面座標為 (x, y) 的像素的 color channel
比方說 componentX == 1 就代表要參考 BitmapData 上面的 Ren channel 就好
還有 scaleX, scaleY 則是設定像素搬移的比率
假如在被參考的 BitmapData 中 scaleX == 10, componentX(10, 10) == 1
然後這 BitmapData 在 (10, 10) 的 Red 值是 256
則使用這個 DisplacementManFilter 的物件
它的 (10, 10) 像素就會被往右搬移搬移 ((256 - 128)/128)*10 == 10 像素
所以利用外部匯入或者 AS 繪制不同的參考 BitmapData
可以產生多樣的 DisplacementMapFilter 變形特效
--------------------------------------本文結束--------------------------------------
嗯...我表達能力似乎不太好,看得霧煞煞的話我先道歉...
或者有興趣的人可以看一下我參考的 FlashKit 論壇文章:http://0rz.tw/0f2DM
--
Gallery http://cjcat2266.deviantart.com
MSN cjcat2266@hotmail.com
Yahoo cjcat2266@yahoo.com.tw
俺、シージェーケット參上!
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 61.228.81.184
推
05/19 01:22, , 1F
05/19 01:22, 1F
推
05/19 09:25, , 2F
05/19 09:25, 2F
推
05/19 11:33, , 3F
05/19 11:33, 3F
推
05/28 15:43, , 4F
05/28 15:43, 4F
※ 編輯: cjcat2266 來自: 61.228.89.24 (10/09 13:38)
Flash 近期熱門文章
PTT數位生活區 即時熱門文章