ぼかして消える_Flash

ぼかして消える

特殊効果としてよく使用される「鮮明な表示がだんだんぼけてきてそして消える」というのを再現してみます。この処理は、ActionScriptを使用する必要はありません。

しかし、Flashには「ぼかす」なんて機能がないのにどうするのでしょうか？

以下、Flashの実行結果

これは、あらかじめぼかした画像を数枚用意しておき、これを透過させながら重ね合わせることでそれらしく実現できます。画像データは全フレーム数分もいらないです。「鮮明な画像」「少しぼかした画像」「思いっきりぼかした画像」の３枚があれば十分スムーズにぼけていく、が実現可能です。

元画像として、以下の３枚を使うとします。

[abc_20040914.bmp]

[abc2_20040914.bmp]

[abc3_20040914.bmp]

これらはPhotoShopでガウスぼかしをかけました。

ライブラリに画像をインポート

Flashのライブラリウィンドウに画像をインポートします。そして、３つの画像をシンボル（グラフィック）として「abc1」「abc2」「abc3」の上に乗せます。

実際のぼかしのアニメーションはムービークリップ「abc」で行うとします。

ムービークリップの編集

まずは、ムービークリップ「abc」の上にグラフィック「abc1」「abc2」「abc3」を同じ位置に重ね合わせます。ただし、それぞれを別レイヤーとするようにしてください。レイヤー名を「ABC1」「ABC2」「ABC3」としています。

ここで、「abc1」は鮮明な画像でこれが徐々に消えていきます（アルファ値を100%〜0%にモーション）。平行して「abc2」が徐々にあらわれていきます（アルファ値を0%〜100%にモーション）。その後消えていきます（アルファ値を100%〜0%にモーション）。さらに遅れるように並行して「abc3」がゆっくりとあらわれていきます（アルファ値を0%〜100%にモーション）。そして消えていきます（アルファ値を100%〜0%にモーション）。スムーズにアルファ値を変化させるためにトゥイーンのモーションを使用していますので、「タイムライン」についてもよく理解するようにしてください。

これら３つのレイヤを合成すると、「鮮明な文字がだんだんぼけていきながら消える」といった効果を行うことができます。

参考までに、各フレームにおけるアルファ値は以下のようにしています。

• abc1（鮮明な画像）

 1フレーム目、アルファ値100%
         ↓
15フレーム目、アルファ値  0%

• abc2（ぼかした画像）

 1フレーム目、アルファ値  0%
         ↓
20フレーム目、アルファ値100%
         ↓
27フレーム目、アルファ値  0%

• abc3（おもいっきりぼかした画像）

 1フレーム目、アルファ値  0%
         ↓
27フレーム目、アルファ値100%
         ↓
38フレーム目、アルファ値  0%

以下、そのサンプルswfとソースとなるflaファイルです。

Flash swfファイル：bokasi.swf(264)

Flashソース：bokasi.fla(306)