揺れる文字　FLASHRAVE

|　トップ　>　アニメーション　>　揺れる文字　|

揺れる文字はActionScriptの"BitmapData"や"DisplacementMapFilter"などで擬似的にビットマップを作成して動かすことで実現可能です。
一文字ずつアニメーションの設定をする必要がないので、文字修正が楽に行えます。

文字が揺れます。再度見る場合は、"Replay"を押します。

（１）　シンボルの作成

・テキストの画像「text.png」を用意します。（Flash上で静止テキストを用意しても可）

・ステージ配置する「テキスト」ムービークリップを用意します。（上記のテキスト画像を配置します）

・リプレイするボタン「リプレイ」ムービークリップを用意します。

（２）　ステージの設定

・ActionScriptを設置する「Action」レイヤーを作ります。

・「テキスト」シンボルを設置する「テキスト」レイヤーを作ります。

・「リプレイ」シンボルを設置する「リプレイ」レイヤーを作ります。

・全てのレイヤーを2フレームまで作成し、「Action」レイヤーのみ2フレーム目にキーフレームを作ります。

（３）　ステージにシンボルを設置

・「テキスト」レイヤーに「テキスト」シンボルを設置。

・「リプレイ」レイヤーに「リプレイ」シンボルを設置。

（４）　ActionScriptの設定

・「Action」レイヤーの1フレーム目にActionScriptを設定します。

※ActionScriptをそのままコピー・ペーストするとシンタックスエラーが出るため、一行ずつペーストするか空白・改行を削除してください。

01
02
03
04
05
06
07
08
09
10
11
12

13
14
15
16
17
18
19
20
21
22
23
24
25
26

27
28
29
30
31

import flash.display.*;

import flash.filters.*;

import flash.geom.*;

var w:Number = 300;

var h:Number = 330;

var mask:BitmapData = new BitmapData(w,h, true ,0);

var matrix:Matrix = new Matrix();

matrix.createGradientBox(30, 0, 0, 0, 0);

var pat:MovieClip = this.createEmptyMovieClip("pat", 1);

pat.beginGradientFill("linear", [0xFFFFFF, 0x000000],

[100, 100], [40, 200], matrix, "reflect");

pat.moveTo(0, 0);

pat.lineTo(w, 0);

pat.lineTo(w, h);

pat.lineTo(0, h);

mc.lineTo(0, 0);

pat.endFill();

mask.draw(pat);

pat.removeMovieClip();

var pos_s:Point = new Point(-mcText._width, 0);

var pos_e:Point = new Point(mcText._width+w, 0);

this.onEnterFrame = function():Void {

var fit:DisplacementMapFilter =

new DisplacementMapFilter(mask, pos_s, 1, 1, 0, 20);

mcText.filters = [fit];

if(pos_s.x < w){

pos_s.x += (pos_e.x-pos_s.x)*0.01;

}

・「Action」レイヤーの2フレーム目にActionScriptを設定します。

stop();

（５）　シンボルにActionScriptを設定

・「リプレイ」レイヤーのシンボルを選択してActionScriptを設定します。

on (press) {

_root.gotoAndPlay(1);

}

文字を揺らすにはActionScriptだけで制御するのでモーショントゥイーンが必要ありません。
仕組みとしては文字が揺れるパターンイメージと文字が動くフィルタを作成し、それを文字にフィルタリングします。
01～03はFlashのクラスを呼び出しています。
05～20でパターンイメージを作成しています。SWF作成時には見えませんが、実際には下のようなイメージが出来上がります。

文字画像とこのパターンファイルをフィルタリングすることで文字が波打つイメージができます。
しかし、このままでは動作しないので22～31で波打つ画像を移動・縮小させながら再読み込みしています。