伊沙熊的學習筆記本

　　今天看了幾個範例後，注意到Flash提供的濾鏡相當有趣，可用的顯示濾鏡共有9種：斜角濾鏡 (BevelFilter)、模糊濾鏡 (BlurFilter)、投影濾鏡 (DropShadowFilter)、光暈濾鏡 (GlowFilter)、漸層斜角濾鏡(GradientBevelFilter)、漸層光暈濾鏡 (GradientGlowFilter)、顏色矩陣濾鏡 (ColorMatrixFilter 類別)、迴旋濾鏡 (ConvolutionFilter)、置換對應濾鏡 (DisplacementMapFilter)等…

　　斜角可以應用於製作按鈕，模糊不用說就是模糊，投影可以製造陰影，光暈有點類似投影的簡化，漸層斜角和漸層光暈則是加上漸層的支援，顏色矩陣可以玩飽合度、色相、亮度等效果…最有趣的就是剩下的二種：迴旋和置換對應濾鏡，前者可以產生模糊、銳利化和浮雕各種效果，後者能實現的效果也很豐富，但是不太容易解釋，公式為下：

dstPixel[x, y] = srcPixel[ x + ((componentX(x, y) - 128) * scaleX) / 256,
　　　　　　　　　　 y + ((componentY(x, y) - 128) * scaleY) / 256]

　　其中的componentX和scaleX等，是依照設定的參數，component是和原圖不同的另一張參照圖，可以在x軸和y軸分別設定參照的色頻(ARGB)。整體公式在口語上來說，就是先計算參照的component該點(x, y)的顏色(範圍0~255)，減掉128，乘上放大率，再除以256後加到原座標，得到新的座標值(x', y')，再將原圖(x, y)點換成(x', y')點的顏色。聽起來還是有點模糊，需要實際體驗看看，才能知道可以應用在哪裡。

　　這次練習是參考Adobe的線上教學手冊，ActionScript 3.0 程式設計 > 以濾鏡處理顯示物件 > 可用的顯示濾鏡 > 置換對應濾鏡一節，原本範例只有放大效果，原理是x軸參照往右遞減的紅色，y軸參照往下遞減的藍色，因此可以將二側及上下的像素擠往中央，形成放大鏡的效果；然後再參考senocluar.com的魚眼效果範例，這個範例的參照圖是事先製作的圖形，如何而來就不得而知。練習中修改官方範例，再擷長補短採用動態方式製作魚眼效果的參照圖，所以參數可自由調整，不過我調了好久才得以相似，這個練習的延伸應用可以是水滴、哈哈鏡…等，鏡射或折射的光學效果，在senocluar.com裡的下一個範例還示範了一個模擬3D的應用，變化可以說相當廣泛。

[魚眼效果練習 | 原始檔下載 | 圖片下載]

　　濾鏡的參數調整若沒有一定的熟悉是相當費力的，好在Adobe提供了一個工具:FilterWorkbench，介面以Flash製作，所見即所得，且提供多種預設效果，調整完還可以產生原始碼以供複製，不過不支援置換對應矩陣，畢竟其變化太多了。非常好用的工具！見官方說明檔。

相關閱讀：

• 【練習】隨滑鼠移動的陰影(DropShadowFilter)

Updated 2008-10-18: 將 FilterWorkbench 改成線上版。