WebAnimator Plus には、上記の基本的な制作方法だけでなく、簡単にアニメーションを制作するための様々な機能が搭載されています。
ライブアニメーション
WebAnimator Plus の特徴的な機能のひとつに「ライブアニメーション」があります。
「ライブアニメーション」とは、フェードアウトや回転など、あらかじめ用意されたアニメーション効果です。
「ライブアニメーション」をオブジェクトに適用することで、手動よりもはるかに簡単にアニメーション効果を設定することができます。
「ライブアニメーション」は、「ライブラリ」パレットの「ライブアニメーション」タブから使用することができます。
「ライブアニメーション」タブの中の任意の項目をステージ上の任意のオブジェクトにドラッグ＆ドロップしてください。
適用したいライブアニメーションとオブジェクトを選択し、ライブアニメーションタブの「適用」ボタンをクリックして適用することもできます。
該当するアニメーション効果が自動的にタイムラインに設定されます。
複数のライブアニメーションを1つのオブジェクトに適用することも可能ですし、追加したライブアニメーションをタイムラインで微調整することもできます。
※テキスト系のライブアニメーションは、テキスト以外のオブジェクトには適用できない場合があります。
オリジナルライブアニメーションの作成
自作したアニメーションを、ライブアニメーションとして登録することができます。よく使用する効果をライブアニメーションとして登録しておけば、作業時間を短縮することができます。
ライブアニメーションにしたいアニメーションを制作する
タイムラインの任意の箇所をドラッグし、表示される枠内にすべてのキーフレームが入ったらマウスの左ボタンを離す。
ドラッグ枠内のキーフレームが選択された状態になります。
選択されたキーフレームのいずれかを右クリックし、表示されたメニューから「ライブアニメーションを作成」を選択する
キーフレームが選択された状態で、「ライブラリー」パレット > 「ライブアニメーション」> 「マイアニメーション」内の「キーフレームから作成」ボタンをクリックしてもライブアニメーションを登録することができます。
登録したライブアニメーションはライブアニメーションを選択後、削除ボタンをクリックすると削除することができます。
テンプレート
WebAnimator Plus の特徴的な機能の一つである「テンプレート」を使用すれば、バナーやスライドショーなどをウィザード形式で簡単に制作することができます。
テンプレート仕様手順
メインメニューの「テンプレート」>「テンプレートを選択」を選択する。
ご希望のテンプレートを選択する。
WebAnimator Plus には4種類のテンプレートが収録されています。
ご希望のサイズを選択する。
選択したテンプレートに合わせて画像や文字を追加する。
※本画面は選択したテンプレートによって異なります。
設定が完了したら「完了」ボタンをクリックする。
テンプレート設定を保存する。
ご希望の場合、「はい」をクリックし、テンプレート設定を保存することができます。
保存したテンプレートは手順2の画面左下の「設定の読み込み」ボタンから開くことができます。
エフェクト
「ライブラリ」パレットの「エフェクト」タブでは「エフェクト」と呼ばれるアニメーション効果を設定することができます。
ライブアニメーションとは異なり、エフェクトはタイムラインベースの効果ではなく、Javascript という技術を使用した効果です。エフェクトを追加した後、タイムラインでの調整はできません。
また、エフェクトはWebブラウザのプレビューでのみ再生可能です。タイムラインの再生ボタンをクリックしてもエフェクトの動作を確認することはできません。
エフェクトは以下の4種が用意されています。
- 動く背景
- 動く前景
- 落ち葉
- 文字の切り替え
動く背景、動く前景、落ち葉はオブジェクトではなくステージに、文字の切り替えはテキストオブジェクトにドラッグ＆ドロップして適用してください。
ドラッグ＆ドロップ後、「プロパティ」パレット上に設定項目が表示されます。
落ち葉
「落ち葉」は、落ち葉が舞っているように画像を表示させることができるエフェクトです。
「落ち葉」エフェクトをステージ上にドラッグ＆ドロップした際、「プロパティ」パレットには以下の画面となります。
- 画像
画像欄では落ち葉のように降らせたい画像を選択します。
画像が大きすぎると画像が重なってしまうので、100ピクセル × 100ピクセル 以内の画像を使用することをおすすめします。
- 継続時間
落ち葉が落ちるまでにかかる時間を変更します。数値を小さくすると落ち葉は高速で動き、数値を大きくするとゆっくりと動きます。
- 要素数
アニメーション内に表示させる落ち葉の個数を設定します。
特定のフレームだけこの効果を表示させたい場合、開始フレームにタイムラインカーソルを移動後「エフェクトの表示」のチェックを入れ、終了フレームにタイムラインカーソルを移動後「エフェクトの表示」のチェックをはずしてください。
タイミング
アニメーション内のオブジェクトを移動させる場合、通常はアニメーションの始点から終点まで等速で動きます。
動く速度を等速ではなく減速/加速させることによってより躍動感のあるアニメーションを制作することができます。
※タイミング機能はWebブラウザ上での再生時のみ有効になります。プログラム上ではタイミング効果は適用されません。
タイミング設定手順
タイムラインでタイミング効果を設定したいキーフレーム（始点と終点）を選択する
選択されたキーフレームを右クリックし、表示されたメニューの「タイミング」にマウスカーソルをあわせ、希望するタイミング効果を選択する
タイミング効果の作成
上記「タイミング設定手順」の手順2で、キーフレーム右クリック時に表示されるメニュー内の「タイミング」>「新規作成」を選択すると、以下の画面が表示され自分好みのタイミング効果を作成/保存することができます。
ベジェアニメーション
オブジェクトの移動については、直線的だけでなく、曲線的に動かすこともできます。
このような曲線的な移動を「ベジェアニメーション」と呼びます。以下の手順で直線的な移動を曲線的な移動（ベジェアニメーション）に変換することができます。
通常の直線的な移動のアニメーションを作成する
オブジェクトを右クリックし「ベジェ モーションパスに変換」を選択する
パスのハンドルをドラッグして、パスを曲線に変更する