2009年09月08日
GlowFilter で簡単袋文字
前回 に続くテキストシリーズ第2弾。今回は ActionScript 3.0 で簡単に袋文字を実装する方法を紹介する。
完成品はこんな具合。
文字を編集することもできる。編集後の文字も袋文字!
やってること
- TextField を表示
- TextField に
GlowFilter
で縁取りを作成する
通常、GlowFilter
は、ぼんやりと光る効果のために利用することが多い。しかし、strength
を大きい値にすることで「ぼんやり」が「くっきり」になる。
GlowFilter
のコンストラクタは次のような定義になっている。
GlowFilter( color:uint = 0xFF0000, // 光の色 alpha:Number = 1.0, // 光の透明度 blurX:Number = 6.0, // 水平方向のぼかし量 blurY:Number = 6.0, // 垂直方向のぼかし量 strength:Number = 2, // 強さ(後述) quality:int = 1, // 適用回数 inner:Boolean = false, // 内側かどうか knockout:Boolean = false) // trueならグロー以外を消す
たとえば、幅 8px の縁取りを行うには次のように GlowFilter
を利用する。
new GlowFilter( 0x000000, // color (縁取りの色) 1.0, // alpha 8, // blurX (X方向の幅: 8px) 8, // blurY (Y方向の幅: 8px) 16 // strength (ある程度大きい値) )
strength
が大きいときには blurX
や blurY
でぼかした結果を塗りにする感じだ。Photoshop 的な言葉で表現すると「blur した後に strength
の大きさに応じてトーンカーブを下方向に移動させる」というイメージだ。
GlowFilter
の代わりに GradientGlowFilter
を使えば、複数の色での袋文字を作れそうだ。
弱点
簡単なのはいいんだけど、あまりキレイではない。
特にとがった部分の縁取りが汚い。
これは「HELLO」の「EL」の上部なんだけど、「L」の右上の頑張りが足りない。もっと右方向に出っ張ってほしいのだけど、blur で広げる都合上、細い部分の blur で先端が削られてしまうようだ。
まとめ
ご利用は計画的に。
ソースコードは以下に(28行)。
// Easy Open Face with GlowFilter //-------------------------------------------------- // GlowFilter で簡単袋文字 package{ import flash.display.*; import flash.filters.GlowFilter; import flash.text.*; [SWF(backgroundColor="#ffffff", width="450", height="80")] public class EasyOpenFaceWithGlowFilter extends Sprite{ public function EasyOpenFaceWithGlowFilter(){ stage.scaleMode = "noScale"; // initialize canvas. var bmp:Bitmap = addChild(new Bitmap()) as Bitmap; // Show original text (input) var text:TextField = new TextField(); text.autoSize = "left"; text.type = "input"; text.htmlText = <font size="50" color="#ffffff">HELLO WORLD</font>.toXMLString(); addChild(text); // Glow it text.filters = [new GlowFilter(0x000000, 1, 8, 8, 16, 1)]; } } }