【Ornamenter】雨とカエル – その１

Ornamenterを使ってアニメーションWebPを作成してみましょう。雨とカエルのアニメーションを作って行きたいと思います。

新規作成

先ずは、アートワークを新規作成します。アートワーク名は、「雨とカエル」にします。再生時間には16秒を設定します。シート比率は９：１６を選択します。この内容は、後からアートワークのプロパティ設定画面から変更できます。

新規作成されたアートワークにはシーンが１つ追加されています。シーン名を「無題」から「カエル」に変更しておきます。シーンの再生時間は8秒（16秒の半分）のままにしておきます。

シーンのプロパティ（シーン名、再生時間）の設定が終わったら、次にストーリーボードの編集を開始します。

ストーリーボードのタイトルは、「水滴の中のカエル」にします。再生時間は、開始0秒から2秒間をセットします。設定を変更したら必ず画面右上隅の「☑️確定ボタン」をタップして下さい。「×キャンセルボタン」をタップすると編集内容は破棄されます。

「水滴の中のカエル」を編集

初期状態では、アイテムの素材には「十字」が設定されているので「水滴の中のカエル３」に変更します（素材の設定方法は、「アイテムに動きをつけてみよう！」参照）。

アイテムのサイズは、初期値(高さ300px、幅300px)のままにします。
アイテムの素材を変更したら次は、軌道パスを修正します。軌道パスの変更方法は、「アニメーションを新規作成 – その1のストーリーボードで軌道を編集」を参照して下さい。

右上の見えない位置から開始して、右下隅に移動する様に軌道パスを編集します。直線的ではなく緩やかにカーブを描いて落下する感じにします。軌道パスの最後のポイントの座標（X座標920px、Y座標1760px）の値は、次のストーリーボードでも使います。編集が完了したら、必ず「☑️確定ボタン」をタップしてストーリーボードの編集画面を閉じて下さい。

水滴を追加

シーン「カエル」の画面に戻り、次に新しくストーリーボードを追加します。追加するにはストーリーボードレイヤーの下部に配置されている＋ボタンをタップします。＋ボタンをタップすると「新規作成」や、「サンプルから複製」、又は「既存から複製（自分が作成したアートワークのシーンから複製）」から追加出来ます。今回は、「新規作成」でストーリーボードを追加します。

タイトルは、「水滴」にします。再生時間は、開始2秒後から0.3秒間の再生にします。一瞬ですね。
アイテムのサイズは初期値(300px✖️300px)のままにしておきます。素材は、「水滴２」を選択します。
軌道パスは、開始位置の座標を「水滴の中のカエル」の最終位置の座標（X座標920px、Y座標1760px）の値に一致させます。終了位置は、水滴が画面から見えなくなる位置（X座標920px、Y座標2080px）に設定しました。

地上のカエルを追加

次に、またストーリーボードを新規追加します。タイトルは、「地上のカエル」にして、開始２秒から２秒間再生します（2秒から4秒まで再生）。先ほど追加した水滴と同時に再生が開始される事になります。
アイテムの素材には、カエル4、カエル1、カエル1、カエル1の４つの素材を追加します。カエル１を３つも追加したのは、１つ当たりの再生時間が2秒➗４🟰０.5秒にする為です。見た感じは、カエル４が0.5秒間、その後にカエル1が1.5秒間再生されている様に見えます。
軌道パスは、移動させないのでポイントは１つ（X座標920px、Y座標1760px）です。アイテムサイズは、300px✖️300pxよりも小さい200px✖️200pxにします。

ストーリーボードレイヤーを調整

「水滴の中のカエル」は、開始０秒から2秒までの間に再生されます。その直後の開始2秒から「水滴」（0.3秒間）と「地上のカエル」（２秒間）が、同じ位置で再生が開始されます。従って、どちらが上のレイヤーになるかで見え方が異なります。

水滴の上にカエルがいるとチョット不自然なので、ストーリーボードレイヤーの画面では、「水滴」、「地上のカエル」、「水滴の中のカエル」の順序にします。

ジャンプするカエルと落下するカエル

同じ様な感じでストーリーボード「ジャンプするカエル」と「落下するカエル」を追加します。「ジャンプするカエル」の素材には、「カエル３」を使います。「落下するカエル」の素材には、「カエル２」を使います。
「ジャンプするカエル」の軌道パス開始位置は、「地上のカエル」の位置と同じ位置（X座標920px、Y座標1760px）です。アイテムサイズも同じ200px✖️200pxにします。再生時間は、開始4秒後から２秒間にします。
「落下するカエル」の軌道パスの開始位置は、「ジャンプするカエル」の軌道パスの終点ポイントに一致させます。サイズも同じ200px✖️200pxにします。再生時間は、開始6秒後から２秒間にします。