第4回　モーショントゥイーン：フィルタ

Flash Professional 8から登場した「フィルタ」を使ってモーショントゥイーンを作成しよう。この機能によって今までは困難だった、「ぼかし」や「グロー」などによるアニメーション効果を簡単につけることが可能だ。また、位置やサイズのプロパティと同じように設定することができるので、作成方法もすぐに習得できるのではないだろうか。アニメーション表現の幅を広げるとても便利な機能なので、ぜひとも知っておきたい機能だ。

フィルタ効果を使って、背景の画像をぼかして文字が浮かび上がるアニメーションを作ってみよう。この手法は文字と画像の表示を切り替えるトランジションなどに有効だ。「フィルタ」の設定方法は、Lesson2の第2回シンボルとインスタンスを使った描画の「フィルタとブレンド」も参考にしてほしい。

フィルタの「ぼかし」を使って画像をぼかしたり、元に戻したりするアニメーションを作ってみよう。

1．PNG形式などで背景の画像を用意しよう。画像をぼかすとエッジがぼけてしまうので、画面サイズより縦横20pxほど大きめの画像を用意する。［ファイル］→［読み込み］→［ステージに読み込み］でステージ上にビットマップを読み込んだら、［整列］パネルで画面の中心に揃える。レイヤー名は「image」としておこう【図1】。

2．画像を選択し、右クリック（〔Control〕＋クリック）でコンテキストメニューから［シンボルに変換］を選択【図2】。［シンボルに変換］ダイアログボックスで［名前：image］、［タイプ：ムービークリップ］、［基準点］を真ん中に設定して［OK］を押す。

フィルタはグラフィックには適用できないので、シンボルのタイプは「ムービークリップ」にしておこう（シンボルのタイプは「グラフィック」にしておき、インスタンスのタイプをムービークリップに変更してもよい）。

3．［フレーム30］で右クリック（〔Control〕＋クリック）してコンテキストメニューから［キーフレームの挿入］を選ぶ。次に［フレーム55］にフレームを挿入する。［フレーム55］を選択した状態で、プロパティインスペクタの［トゥイーン］を［モーション］に設定【図3】。［フレーム55］にキーフレームを挿入する。

4．［フレーム55］のインスタンスを選択し、プロパティインスペクタの［フィルタ］タブをクリックし、［フィルタの追加］(+) から［ぼかし］を選んでフィルタを適用する。ぼかしの強さを［ぼかし-水平・垂直：8］に調整して、だんだんピントがぼけていくアニメーションを作る【図4】。

5．次に［フレーム145］にキーフレームを挿入し、これまでの手順と同様に［フレーム145～170］にモーショントゥイーンを作成しよう。今度は［フレーム170］のインスタンスのぼかしの強さを［ぼかし-水平・垂直：0］に設定し、だんだんピントが合っていくアニメーションにする【図5】。最後に［フレーム200］にフレームを挿入する。ここまでの設定を［制御］→［再生］で確認すると【図6】のような動きになるはずだ。

次はフィルタの「グロー」を使って文字が浮かび上がったり消えたりするアニメーションを作ってみよう。「グロー」を使うことで、背景画像になじませながら文字を目立たせている。

1．新規レイヤー「moji」を作成し、画像の上に「テキストツール」で文字を書く。カラーやサイズやフォントはプロパティインスペクタで設定する。［整列］パネルで画面の中心に揃えよう【図7】。

2．テキストを選択し、右クリック（〔Control〕＋クリック）でコンテキストメニューから［シンボルに変換］を選択。［シンボルに変換］ダイアログボックスで［名前：moji］、［タイプ：ムービークリップ］、［基準点：中央］に設定しよう【図8】。

3．「moji」レイヤーの［フレーム1］をドラッグして［フレーム45］に移動し、画像のタイミングとは少しずらして、［フレーム45～70］にモーショントゥイーンを作成する。［フレーム45］のステージのインスタンスを選択し、プロパティインスペクタで［カラー：アルファ］を［0%］に設定【図9】。

［フレーム70］のインスタンスを選択し、プロパティインスペクタの［フィルタ］タブをクリックし、［フィルタの追加］(+) から［グロー］を選んでフィルタを適用する。グローの強さを［ぼかし-水平・垂直：18］、［強度：200%］、また［カラー］を背景になじむ色（#494216）に調整して文字を目立たせ、文字がだんだん現れるアニメーションを作成する【図10】。

4．次に［フレーム130］にキーフレームを挿入し、［フレーム130～155］にモーショントゥイーンを作成しよう。今度は［フレーム155］のグローの強さを［ぼかし-水平・垂直：0］、［強度：0%］、［カラー］のカラーパレットで［アルファ：0%］とする【図11】。次に［プロパティ］タブをクリックし、［カラー：アルファ］を［0%］に設定して、文字がじょじょに消えるように設定しよう。これですべての設定が完了だ。［制御］→［ムービープレビュー］で確認してみよう。