[心得] 來談一下 能夠產生水波特效的 Displace …

看板Flash作者 (CJ Cat)時間18年前 (2007/05/19 00:56), 編輯推噓4(400)
留言4則, 4人參與, 最新討論串1/1
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)
文章代碼(AID): #16JTgd_t (Flash)
文章代碼(AID): #16JTgd_t (Flash)