AS3 で袋文字+影をつけてよくある POP 文字

電車の吊広告で影付袋文字が多用されていたようなので GlowFilter で簡単袋文字 を少しだけ修正して影をつけてみた。

完成品はこんな具合。

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

やってること

  1. TextField を表示
  2. TextField に GlowFilter で縁取りを作成し、DropShadowFilter で影を作成する

DropShadowFilter にも strength プロパティがあるので、これを大き目の値にすることで、べた塗りな影をつけることができた。

詳しくは GlowFilter で簡単袋文字 参照あれ。

まとめ

AS3 はテキスト表示に弱い印象があったが、フィルタを活用することで簡単なエフェクトなら簡単に付けられる。

以下、ソースコード(29行)。

package{
import flash.display.*;
import flash.filters.GlowFilter;
import flash.filters.DropShadowFilter;
import flash.text.*;

[SWF(backgroundColor="#ffffff", width="450", height="80")]
public class EasyOpenFaceWithGlowFilter2 extends Sprite{
    public function EasyOpenFaceWithGlowFilter2(){
        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, 4, 4, 16, 1),
            new DropShadowFilter(4, 45, 0x000000, 1, 4, 4, 16)
        ];
    }
}
}