FLASH講座 ーアクションスクリプトの実践的事始めー
応用編
(7) テキスト(文字)のエフェクト
 画面に文字を一文字ずつ流し込んだり、フェードインさせたりするには、1文字ずつレイヤーに分けて配置させてそれぞれにモーショントウイーンをつけなければならないので、結構面倒です。 今回は、すべてアクションスクリプトで文字を表示させる講座です。

 構成は、設定を主としたswfファイルと、動き(エフェクト)をつけるクラス(as)ファイルの2つのファイルにしました。 これは、いろんな設定で文字列を表示させるときに、エフェクトをつけるスクリプトは共通に使えるようにするためです。
 今回のエフェクトは文字列を登場させて、静止させるもので、付与できる機能は、・文字の登場開始座標、・静止表示座標、・文字表示間隔、・文字表示時間差、・文字のフォーマット(フォント、サイズ、色等)、・文字の大きさ(スケール)、
・透明度(アルファ値)、回転(数、速度、時計回り、逆回り)です。
 複数の文字列を同時、あるいは、逐次的に表示させるにはまだ十分なスクリプトにはなっていないし、登場だけではなく、表示文字列を躍らせたり、退場させたりするスクリプトも欲しいなどと思っているので、追々、発展させていきます。
SAMPLE (付与できる全ての機能を利用した例)
ステージの準備
  フレームレート30に設定したステージを準備し(大きさ、背景色は適宜決める)、「挿入」、「新規シンボル」メニューで、シンボルを作成する。 この例では、シンボル名を tField とし、リンケージを同名で設定した。 ついで、シンボル編集画面で、1文字分のダイナミックテキストフィールドを作成(ここでは「HGP創英角ポップ体」、50ポイントの大きさで作成)し、インスタンス名を設定する(ここでは tF )。
  なお、文字列に回転やアルファー値の変化を付与したい場合は、その文字列を埋め込む必要がある。座標移動、スケール変化、色づけには埋め込み不要である。埋め込みは、テキストフィールド(tField)編集画面でプロパティーインスペクターの「埋め込みボタン」をクリックして現れるウインドウで、追加する文字を指定する。
スクリプト全角スペースが入っている行は、コピー・ペイストだけではエラーになります)
textEffect.flaファイルに

//文字列
var $str:String = "ようこそ 私のホームページへ";
//表示位置開始座標
var targetx0:Number = 30;
var targety0:Number = 70;

//Effect開始座標
var x0:Number = 200;
var y0:Number = 0;

var narabi:Number=0;
//文字表示間隔;
var kankaku:Number = 32;
//文字表示時間差(ミリ秒)
var delay0:Number = 150;
//文字format
t_fmt = new TextFormat();
t_fmt.color = 0xff0000;
//文字色
t_fmt.size = 32;//文字サイズ(ポイント)
var randomcolor:Number=1;
//文字初期scale(%)
var scalex0:Number = 0;
var scaley0:Number = 0;

//文字初期アルファー値(%)
var alpha0:Number = 50;
//文字の回転
var kaitensu:Number=3;
var kakudo:Number=45;
var mawari:Number=+1;
//移動の速度
var speed:Number=4;

//文字インスタンスの作成(クラス呼び出し)

var tE:textEffect = new textEffect();

textEffect.asファイルに

class textEffect extends TextField {
 function textEffect() {
  for (var i:Number = 0; i<=$str.length-1; i++) {
   tE =_root.attachMovie("tField", "tField"+i, i);
   tE.tF.text = $str.charAt(i);
   if (randomcolor == 1) {
    t_fmt.color = Math.random()*255*255*255;
   }
   tE.tF.setTextFormat(t_fmt);
   tE._x = x0;
   if (narabi == 1) {
    tE._x = x0+kankaku*i;
   }
   tE._y = y0;
   tE._xscale = scalex0;
   tE._yscale = scaley0;
   tE._alpha = alpha0;
   tE._visible = false;
   targetx = targetx0+kankaku*i;
   targety = targety0;
   delay = delay0*i;

   textEffect2(tE, targetx, delay, kakudo);
  }
 }

 function textEffect2(tE:MovieClip, targetx:Number,     delay:Number, kakudo:Number) {
  var count:Number;
  tE.interval = function() {
   clearInterval(tE.ID);
   tE.count = 1;
   tE.onEnterFrame = function() {
    this._visible = true;
    this._xscale += (100-this._xscale)/speed;
    this._yscale += (100-this._yscale)/speed;
    this._alpha += (100-this._alpha)/speed;
    this._x += (targetx-this._x)/speed;
    this._y += (targety-this._y)/speed;
    this._rotation += mawari*kakudo;
    if (tE.count*kakudo>=kaitensu*360) {
     kakudo = 0;
    }
    tE.count++;
   };
  };
  tE.ID = setInterval(tE, "interval", delay);
 }
}










初期に文字列を最終配列にするときは 1 にする



全体を一緒に動かすときは0にする




文字をランダムに色付けするときは 1 にする






回転数
回転速度
時計回り:+1、反時計回:-1

文字移動のイージング速度



クラスファイルでインスタンスを発生させる



クラスの定義(TextFieldクラスを継承)

文字列の数だけ
ムービークリップtField1,tField2,,,,,を画面に表示
テキストフィールドtFにi番目の文字を入れる
文字にランダムに発生した色を付ける


文字フォーマットのセット
登場開始x座標
もし、narabiが1なら
文字をx軸方向に最終配列にする


登場開始y座標
初期xスケール
初期yスケール
初期アルファー
初期に文字を非表示
最終静止状態のx座標
最終静止状態のy座標
表示文字間時間差

関数textEffect2の呼び出し



関数textEffect2(引数)

countの定義
インターバル(間隔を取って実行する)の設定
実行済みIntervalをクリヤー
countを1に
フレームアクション
文字列を表示
xスケールを最終的に100に

アルファー値を100に
最終x座標へ
最終y座標へ
文字の回転
もし指定回数を回ったら
回転を止める

countを1増やす


インターバルの設定どおりに実行
以下に変数(初期設定)を変えていくつかの例を示すが、組み合わせでいろんなエフェクトを作り出すことができる。
targetx0=x0=30, narabi=1, targety0=y0=70
kankaku=20, delay=0, randomcolor=0
t_fmt.size=20
scalex0=scaley0=0, alpha0=0
kaitensu=kakudo=0, speed=10
targetx0=x0=30, narabi=1, targety0=y0=70
kankaku=20, delay=150, randomcolor=0
t_fmt.size=20
scalex0=scaley0=0, alpha0=0
kaitensu=kakudo=0, speed=4
targetx0=x0=30, narabi=1, targety0=70, yo=0
kankaku=20, delay=150, randomcolor=0
t_fmt.size=20
scalex0=scaley0=0, alpha0=0
kaitensu=kakudo=0, speed=4
targetx0=x0=30, narabi=0, targety0=70, yo=0
kankaku=20, delay=150, randomcolor=0
t_fmt.size=20
scalex0=scaley0=0, alpha0=0
kaitensu=kakudo=0, speed=4
targetx0=30, x0=300, narabi=0, targety0=70, yo=0
kankaku=20, delay=150, randomcolor=0
t_fmt.size=20
scalex0=scaley0=0, alpha0=0
kaitensu=kakudo=0, speed=4
targetx0=30, x0=300, narabi=0, targety0=70, yo=0
kankaku=20, delay=150, randomcolor=0
t_fmt.size=20
scalex0=scaley0=0, alpha0=0
kaitensu=2, kakudo=30, speed=4
targetx0=30, x0=300, narabi=0, targety0=70, yo=0
kankaku=20, delay=150, randomcolor=1
t_fmt.size=20
scalex0=scaley0=0, alpha0=0
kaitensu=2, kakudo=30, speed=4
targetx0=30, x0=-50, narabi=0, targety0=70, yo=0
kankaku=20, delay=150, randomcolor=1
t_fmt.size=20
scalex0=scaley0=400, alpha0=0
kaitensu=2, kakudo=30, speed=4
   
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 このサイトで使用しましたflashソフトはflash mx 2004年版(Flash Japan)- flash8 及び FlashCS3-2007年版です。
 flash講座(フラッシュ講座)は、Yoshioka氏(通称、ひげ親父)による制作です。 コツコツと作られたflash素材(flashアニメ、スクリプト)はユーザーの方により保存変更され動画flash(動画フラッシュ)や携帯flash(待受flash)として利用されて来ました。
 氏は、flashスクリプトについての学習を、パソコン塾講師活躍中に始められ、独立した今も続けておられます。 
  macromedia flashソフトは新しくadobe flash時代に入りましたので、これを機会にflash学習サイトを「flash講座1234」としてリニューアルいたしました。 引き続きご愛顧承りますよう、よろしくお願いいたします。                                                                           (by Hiraoka)
HOME   Flash講座総リスト   flash アクションスクリプト 応用編 (8)