WebAnimator Plus には、複雑なアニメーションを制作するための機能も搭載されています。
イベント
アニメーション内でマウスクリックなどの操作（イベント）が発生した際、特定のアクションを実行することによって、より複雑なアニメーションを実現することができます。
オブジェクトのイベント
オブジェクトに対してイベントを設定することで、オブジェクトの上にマウスがのった際にオブジェクトを拡大する、オブジェクトがクリックされた際にURLを開く、などの動作が可能となります。
イベントの種類
オブジェクトに対しては以下のイベントを検出することができます。
- マウスダウン
マウスカーソルがオブジェクトの上にあり、マウスのボタンがクリックされるとこのイベントが発生します。
- マウスアップ
オブジェクトがクリックされた後、マウスのボタンを離した際にこのイベントが発生します。
- マウスクリック
オブジェクトがクリックされている間、このイベントが発生します。
- マウスオーバー
オブジェクトの上にマウスカーソルを移動するとこのイベントが発生します。
- マウスアウト
オブジェクトの上からオブジェクト外にマウスカーソルを移動するとこのイベントが発生します。
イベント設定
以下の手順で、イベント発生後のアクションを設定します。
オブジェクトを選択する
「プロパティ」パレットの「イベント」タブをクリックする
「イベントを追加」欄で希望のイベントを選択し「+」ボタンをクリックする
「アクション」欄で希望のアクションを設定し、各欄に必要情報を入力する
シーンのイベント
イベントは、オブジェクトだけでなくシーンにも設定することができます。 シーンで設定できるイベントは、オブジェクトのイベントとは異なります。
例えば、アニメーション終了時に同じシーンを読み込めば、アニメーションをループ（繰り返し表示）させることができます。
イベントの種類
シーンに対しては以下のイベントを検出することができます。
- シーン読み込み時
シーンが読み込まれた際に発生します。
- アニメーション終了時
アニメーションの再生が終了した際に発生します。
- キーダウン時
キーボードのキーが押された際に発生します。
- キープレス時
キーボードのキーが押されたままの際に発生します。
- キーアップ時
押されたキーボードのキーが話された際に発生します。
イベント設定
以下の手順で、イベント発生後のアクションを設定します。
「プロパティ」パレットの「シーン」タブをクリックする
「イベントを追加」欄で希望のイベントを選択し「+」ボタンをクリックする
「アクション」欄で希望のアクションを設定し、各欄に必要情報を入力する
アクション
オブジェクト、シーンともに、イベントに対して以下のアクションを設定することができます。
- シーンを読み込む
指定したシーンを読み込みます。
「切り替え効果」欄ではシーンを切り替える際の視覚効果（切り替え方）を指定することができます。
「継続時間」欄では、切り替えにかかる秒数を指定します。（「継続時間」欄を「10」にすれば、10秒かけてシーンが切り替わります。）
- タイムラインを読み込む
x指定したタイムラインを再生します。
- URLを開く
x指定したURLを開きます。
- カスタム関数を実行
「Javascript 関数」パレットで追加した Javascript 関数を呼び出すことができます。
複数シーン
通常は1つのシーンだけでもアニメーションを制作することができますが、複雑なアニメーションを制作する場合、シーンを複数にわけることによってより管理しやすくなります。
- シーンの作成
メインメニューの「シーン」または「シーン」パレットの右クリックから「シーンを追加」または「シーンを複製」を選択すると、「シーン」パレットに新しいシーンが作成されます。
「プロパティ」パレットの「プロジェクト」タブではシーンのサイズを変更することができますが、同一プロジェクト内に複数のシーンが存在する場合、すべてのシーンのサイズが変更されます。
- シーンの削除
「シーン」パレット上でシーンを選択し、メインメニューの「シーン」>「シーンを削除」をクリックするか、「シーン」パレットで削除したいシーンを右クリックし「シーンを削除」を選択すると該当シーンが削除されます。
1つのプロジェクト内には最低1つのシーンが必要ですので、シーンが1つしかない場合そのシーンは削除することはできません。
- シーンの切り替え
複数シーンを作成し、シーンを切り替えるには「イベント」機能を使用します。
シーンまたはオブジェクトの特定「イベント」に「シーンを読み込む」アクションを指定すれば、イベント発生時に希望のシーンを表示させることができます。
例えば、シーン1上のボタンがクリックされた際、シーン2を表示されることができます。
シーン切り替え時は、フェードインやスライドなどの切り替え効果を追加することも可能です。
シーンの切り替え機能を使用すれば、プレゼンテーションやスライドショーを簡単に制作することができます。
複数タイムライン
1つのシーン内に複数のタイムラインを作成することにより、より複雑なアニメーションを制作することができます。
例えば、シーン内に2つのオブジェクトがあり、そのうちの1つ（オブジェクト1）はアニメーション開始と同時に動き出し、もう1つ（オブジェクト2）はアニメーション開始時には動かずクリックされた際に動き始める、というようなことが可能です。
これを実現するには以下の手順をご実行ください。
ステージ上に二つのオブジェクトを配置する。
オブジェクト1に対してアニメーションを設定する。
タイムライン上部の「メインタイムライン」をクリックし、表示された画面で「タイムラインを追加」をクリックする。
新しいタイムラインが作成されます。
タイムライン右側のアイコンをクリックするとタイムライン名を変更することができます。ここでは「タイムライン2」と名称を変更します。
❌アイコンをクリックすると、タイムラインは削除されます。
タイムライン2をダブルクリックするか、タイムライン名右の緑のアイコンをクリックし、タイムラインを「タイムライン2」に切り替える。
オブジェクト2に対してアニメーションを設定する
この時点でプレビューを行うとオブジェクト2のみが動きます。
タイムライン上部の「タイムライン2」をクリックし、再度メインタイムラインに切り替える。
この時点でプレビューを行うと、オブジェクト1のみが動きます。
オブジェクト2を選択し「プロパティ」パレットの「イベント」タブをクリックする
「イベントを追加」欄で「マウスクリック」を選択し「+」ボタンをクリックする
「アクション」欄で「タイムラインを読み込む」を選択し、「タイムライン」欄で「タイムライン2」を選択する。
プレビューで動作を確認する。
プレビューを実行すると、アニメーション開始と同時にオブジェクト1のみが動き始めます。オブジェクト2は動きませんが、クリックするとタイムライン2のアニメーションが開始されます。
Javascript
これまで「イベント」によるアクションの実行について説明しましたが、より複雑な動作を実行するために Javascript（Webブラウザ上で実行するために用いられるプログラミング言語）のコードを記載することができます。
Javascript コードの編集
メインメニューの「表示」内の「Javascript」を選択すると「Javascript 関数」パレットが表示されます。
「Javascript 関数」パレットで「追加」をクリックすると、新しい Javascript 関数が作成されます。
作成した Javascript 関数をダブルクリックするか、Javascript 関数選択後に「編集」をクリックすると、Javascript 編集画面が表示され、この画面で Javascript のコードを書くことができます。
Javascript 編集画面右側の「API」欄には、使用可能なAPI関数が表示されます。各API関数をクリックすると関数の説明が表示され、ダブルクリックするとコード編集欄に該当関数が追加されます。
Javascript コード内で使用する各オブジェクトのIDは「プロパティ」パレット >「要素」タブの「ID」欄で確認することができます。IDは「プロパティ」パレット上で好きな文字列に変更することも可能です。
Javascript 編集画面右側の「シーン」と「タイムライン」欄にはプロジェクト内のシーンとタイムラインが表示されており、ダブルクリックすることでコード内に追加することができます。
グローバル変数を使用したい場合は「Javascript 関数」パレット内の「Globals」内に記載してください。
Javascript 関数 の実行
作成した Javascript 関数を実行するには、シーンまたはオブジェクトのイベントに「カスタム関数を実行」を指定し、希望の関数を選択してください。
「プロジェクト」パレット >「シーン」タブ内の「関数の呼び出し」欄では、一定時間経過後に Javascript関数を呼び出すことができます。
「+」クリック後、秒数と関数を指定してください。