前回 に続くテキストシリーズ第２弾。今回は ActionScript 3.0 で簡単に袋文字を実装する方法を紹介する。

完成品はこんな具合。

文字を編集することもできる。編集後の文字も袋文字！

やってること

1. TextField を表示
2. 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)];
    }
}
}