簡単タイポグラフィ

簡単なタイポグラフィなら、ActionScriptだけでなんとかしてしまいたい、という試みです。あまり凝ったことはできませんが、これで十分な場面もあるかもね。

※2006/12/15追記:
これはボツネタ。→こちらの記事の方がいいと思います。

※Comic Sans MSフォントがないOSでは変になると思います。


「文字を入れてやれば、自動的にタイポグラフィを作る」というActionScriptクラス。TextFieldに対して書式とフィルタを設定して、あとはMovieClip.onEnterFrameで動かしてます。
いろんなパラメータを外部入力できるようにしておけば、ちょっとしたバリエーションには対応できるかもしれません。

空のムービークリップ"empty"に、こんなクラスをリンクしておきます。

 class TypoByText extends MovieClip{
  var text;
  function onLoad(){
    //文字書式
    var format=new TextFormat();
    format.font = "_ゴシック";
    format.color=0x000000;
    format.size = 48;

    //テキストフィールド
    var label = createTextField("label",getNextHighestDepth(),0,0,0,0);
    label.text = this.text;
    label.autoSize = true;
    label.antiAliasType = "advanced";
    label.setTextFormat(format);

    //フィルターをかける
    var filters = label.filters;
    filters.push(new BlurFilter(2,2,2));
    filters.push(new DropShadowFilter());
    filters.push(new BevelFilter() );
    label.filters = filters;
  }

  function onEnterFrame(){
    //サンプルのような落下運動は
    //こちらを参照
  }

 }

タイポグラフィの生成は、こんな感じ。

 var count = 0;
 function createTypo( text ){
   _root.attachMovie( "empty", "typo"+count, 100+count
     , { _x: count*20, _y: 0, text: text } );
   count++;
 }

 var typos = ["A","c","t","i","o","n"
        ,"S","c","r","i","p","t"];
 for( var i = 0; i < typos.length; i++ ){
   createTypo(typos[i]);
 }

利点は、
  簡単。再利用が効く。

欠点
  OSフォントに依存する。
  _rotationなどのプロパティが使えない。
  見栄えを凝るのが難しい(フィルタでできる範囲のみ)。
  シェイプほどアウトラインが美しくない。

欠点を克服しようと、いろいろ試したところ、BitmapDataにTextFieldを描画することはできました。

 label._visible = false;
 bitmapData = new BitmapData(40, 80, true, 0x00FFFFFF);
 bitmapData.draw(label);
 this.attachBitmap(bitmapData, depth);

・・が、所詮はビットマップ。ちょっとでも拡大や回転したりすると、ギッザギザのぐちゃんぐちゃんになります。

文字をベクターシェイプに変換するActionScriptって、ないのでしょうか・・・?


コメント

コメントしてください

closed.