モーショントゥイーン・フィルタ

フィルタ効果を使って、背景の画像をぼかして文字が浮かび上がるアニメーションを作って見ましょう。





画像をぼかすアニメーション
1. PNG形式などで背景の画像を用意しよう。画像をぼかすとエッジがぼけてしまうので、画面サイズより縦横20pxほど大きめの画像を用意する。[ファイル]→[読み込み]→[ステージに読み込み]でステージ上にビットマップを読み込んだら、[整列]パネルで画面の中心に揃える。レイヤー名は「image」とします。
2. 画像を選択し、右クリック(〔Ctrl〕+クリック)でコンテキストメニューから[シンボルに変換]を選択。[シンボルに変換]ダイアログボックスで[名前:image]、[タイプ:ムービークリップ]、[基準点]を真ん中に設定して[OK]を押します。
3. [フレーム30]で右クリック(〔Ctrl〕+クリック)してコンテキストメニューから[キーフレームの挿入]を選択。次に[フレーム55]にフレームを挿入。[フレーム55]を選択した状態で、プロパティインスペクタの[トゥイーン]を[モーション]に設定。[フレーム55]にキーフレームを挿入します。



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



5. [フレーム145]にキーフレームを挿入し、これまでの手順と同様に[フレーム145〜170]にモーショントゥイーンを作成します。[フレーム170]のインスタンスのぼかしの強さを[ぼかし-水平・垂直:0]に設定し、だんだんピントが合っていくアニメーションにします。
最後に[フレーム200]にフレームを挿入しまうす。ここまでの設定を[制御]→[再生]で確認します。
ぼかしの強さを[ぼかし-水平・垂直:0]に設定
この設定で、画像がぼけて元に戻るアニメーションができます。



文字が浮かび上がるアニメーション

フィルタの「グロー」を使って文字が浮かび上がったり消えたりするアニメーションを作ってみましょう。「グロー」を使うことで、背景画像になじませながら文字を目立たせています。
1. 新規レイヤー「moji」を作成し、画像の上に「テキストツール」で文字を書く。カラーやサイズやフォントはプロパティインスペクタで設定する。[整列]パネルで画面の中心に揃えます。
2. テキストを選択し、右クリック(〔Ctrl〕+クリック)でコンテキストメニューから[シンボルに変換]を選択。[シンボルに変換]ダイアログボックスで[名前:moji]、[タイプ:ムービークリップ]、[基準点:中央]に設定し、テキストをシンボルに変換します。
3. 「moji」レイヤーの[フレーム1]をドラッグして[フレーム45]に移動し、画像のタイミングとは少しずらして、[フレーム45〜70]にモーショントゥイーンを作成する。[フレーム45]のステージのインスタンスを選択し、プロパティインスペクタで[カラー:アルファ]を[0%]に設定。

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

[フレーム45]のインスタンスに、[カラー:アルファ]を[0%]に設定して透明にします。
[フレーム70]のインスタンスに、プロパティインスペクタで[フィルタ]の[グロー]を設定。

4. [フレーム130]にキーフレームを挿入し、[フレーム130〜155]にモーショントゥイーンを作成しましょう。
[フレーム155]のグローの強さを[ぼかし-水平・垂直:0]、[強度:0%]、[カラー]のカラーパレットで[アルファ:0%]とします。
[プロパティ]タブをクリックし、[カラー:アルファ]を[0%]に設定して、文字がじょじょに消えるように設定しましょう。これですべての設定が完了です。
[制御]→[ムービープレビュー]で確認してみよう。次に[フレーム130]にキーフレームを挿入し、[フレーム130〜155]にモーショントゥイーンを作成しましょう。
[フレーム155]のグローの強さを[ぼかし-水平・垂直:0]、[強度:0%]、[カラー]のカラーパレットで[アルファ:0%]とします。
[プロパティ]タブをクリックし、[カラー:アルファ]を[0%]に設定して、文字がじょじょに消えるように設定します。これですべての設定が完了です。[制御]→[ムービープレビュー]で確認してみましょう。
グローの強さを[ぼかし-水平・垂直:0]、[強度:0%]、[カラー]のカラーパレットで[アルファ:0%]に設定(このあと、[プロパティ]タブをクリックし、[カラー:アルファ]を[0%]に設定してインスタンスを透明にします)。