2010年4月1日
AS3のBitmapFilterを片っぱしから試してみる
こんにちは。松田です。
今年も早いものでいつの間にかエイプリルフールをむかえてしまったようですが、なんのネタも用意して無かったのでいたってふつうのブログです。
今回はActionScriptで画像処理をするには欠かせない、BitmapFilter類を試してみます。
今回はflash.filtersから以下のフィルターを試しています。
BevelFilter
BlurFilter
GlowFilter
DropShadowFilter
ColorMatrixFilter
ConvolutionFilter
DisplacementMapFilter
片っ端からとかいいながら全部のフィルターは試してないです。ごめなさい。
ちょっとだけ嘘つきました。
それぞれどんな効果があるのか、Adobeの解説ページを読むよりも実際に見てみた方が分かりやすいと思うので、実際に実装したswfを置いています。
ボタンをいろいろ押しまくって確認してみてください。
動かしてみるとそれぞれのフィルターの使い道が何となく分かる かと思います。
が、ColorMatrixFilter, ConvolutionFilter, DisplacementMapFilterあたりは使用方法が幅広く、使い方次第でいろんなことが出来てしまうフィルターです。
ですので、今回はその中から使い道を一つだけ選んで使用してます。
ソースコードは上のフラッシュ内で右クリックして「ソースの表示」を押してください。
一応下にも載せておきますが上記方法のほうが見やすいと思います。
こんなに簡単なコードでこれだけ多彩な画像処理が行えてしまうのもASの魅力ですね。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="330" height="300" creationComplete="init()" viewSourceURL="srcview/index.html">
<mx:Canvas left="0" top="0" bottom="0" right="0" backgroundColor="gray">
<mx:Image id="image" source="@Embed(source='assets/image.png')" x="10" y="10" />
<mx:Button x="10" y="146" label="もとにもどす" click="revertImage()"/>
<mx:Button x="10" y="176" label="Bevel" click="applyBevelFilter()"/>
<mx:Button x="76" y="176" label="Blur" click="applyBlurFilter()"/>
<mx:Button x="131" y="176" label="Glow" click="applyGlowFilter()"/>
<mx:Button x="192" y="176" label="DropShadow" click="applyDropShadowFilter()"/>
<mx:Button x="10" y="206" label="ColorMatrix (GrayScale変換)" click="applyColorMatrixFilter()"/>
<mx:Button x="10" y="236" label="Convolution (エッジ検出)" click="applyConvolutionFilter()"/>
<mx:Button x="10" y="268" label="DisplacementMap(波打ち)" click="applyDisplacementMapFilter()"/>
</mx:Canvas>
<mx:Script>
<![CDATA[
import flash.filters.*;
// 表示されている画像のBitmapData
private var bitmapData:BitmapData;
// もともとの画像のBitmapData もとにもどす用
private var baseBitmapData:BitmapData;
/**
* 初期設定
*/
public function init():void
{
// Imageオブジェクトに読み込んだ画像をBitmapDataに変換して変数に格納しておく
// このbitmapDataを操作してImageに上書きすることでフィルターをかける
// もとの画像より大きくなるフィルターもあるので大きめに作っておきますん
this.bitmapData = new BitmapData(this.image.width + 50, this.image.height + 50, true, 0x000000);
this.bitmapData.draw(this.image);
// もとの画像に戻すために初期のBitmapDataを別に保存しておく
this.baseBitmapData = new BitmapData(this.image.width + 50, this.image.height + 50, true, 0x000000);
this.baseBitmapData.copyPixels(this.bitmapData, this.bitmapData.rect, new Point(0,0));
}
/**
* もとに戻す
* 初期のBitmapDataを現在のBitmapDataにコピーして上書き
*/
private function revertImage():void
{
this.bitmapData.copyPixels(this.baseBitmapData, this.baseBitmapData.rect, new Point(0,0));
}
/**
* BevelFilter
*
* ベベル効果?日本語での用語はないのかな
* 縁取りをして立体っぽく見せる効果
*/
private function applyBevelFilter():void
{
var filter:BevelFilter = new BevelFilter();
this.applyFilterToImage(filter);
}
/**
* BlurFilter
*
* 画像をぼかす
*/
private function applyBlurFilter():void
{
var filter:BlurFilter = new BlurFilter();
this.applyFilterToImage(filter);
}
/**
* GlowFilter
*
* 縁取りをして光らせたりする
*/
private function applyGlowFilter():void
{
var filter:GlowFilter = new GlowFilter(0xFFFFFF, 1, 10, 10, 5, 3, true, false);
this.applyFilterToImage(filter);
}