前回に引き続きOrnamenterを使ってアニメーションWebPを作成してみましょう。前回は、水滴の中のカエルが地上に落ちて再びジャンプして落ちるところまでのシーン(シーン名「カエル」）を作成しました。
雨粒を追加
シーン「カエル」の最後の部分に落下する雨粒を追加したいと思います。再生時間は、開始5.6秒から8秒まで（2.4秒間）とします。雨粒は、見えない位置から移動を開始し、ジャンプしたカエルの頂点あたりで軌道を少し左側にずらします。
最終的なシーン「カエル」はこんな感じになります。
遠くの雨と近くの雨
次に、雨のシーンを作ります。雨の演出はアイテムの効果でレーンを使用します。
サイズの変更
レーンを使用する時は、アイテムがシート全体をカバーする様にサイズを設定します。
編集パネルの上部で軌道パスを選択した状態にして、「パスリセット」アイコンをタップします。パスリセットでは、シート中央に１つだけ軌道パスのポイントを配置します。
次に、編集パネルの上部でサイズを選択した状態にして、「シートにフィット」アイコンをタップします。シートにフィットでは、アイテムサイズがシートサイズと同じ値に設定されます。
レーンの設定
ストーリーボード編集画面の「
アイテム」>「効果と素材」をタップし効果にレーンを設定します。
素材には、水滴１、水滴２、水滴３を設定します。
雨粒の大きさは一定にしたいのでピーク開始は0%、ピーク終了は100%とします。
遠くにある雨を演出したいのでピークサイズは、小さめの20%にします。列数と層数は、初期値のままにしておきます。
パターンは、パターン１やパターン２だと雨粒が整列してしまうので初期値のパターン３のままにしておきます。
振動数が大きいと左右に小刻みに揺れてしまうので１回にしておきます。
振幅も大きい値だと左右の振れ幅が大きくなるので小さ目の10%にして、ほんの少しだけ左右に揺れる感じにします。
列遅延と行遅延は、初期値のままでも良さそうなのでそのままの値にしておきます。
雨粒は回転させないので全て回転数は０のままにします。
ストーリーボードの設定
ストーリーボードのタイトルは、「遠くの雨」とします。再生時間は、0秒から8秒までとします。これにより、８秒間かけて小さ目の雨粒が落下するアニメーションになります。
シーンの構成
シーンは、ストーリーボード「遠くの雨」のみで構成します。タイトルは、「遠くの雨1」とします。
シーンを複製
シーン「遠くの雨1」から「シーンの複製」を行って「近くの雨1」を作成します。シーン「近くの雨1」のストーリーボードを編集します。
近くの雨の演出を行うのでレーンの設定で、少し大きめの雨粒になる様に調整します。ピークサイズは20％のままですが、列数を半分(10から5)にしたので見た目は自動的に約２倍大きく見えます。列遅延も調整します。この辺りの調整は、プレビューを再生しながら決定するのが良いです。
ストーリーボードのタイトルは、「近くの雨」に変更し、再生時間は、0.5秒から7.5秒（7秒間）とします。「遠くの雨」より1秒短くします。つまり、７秒間で雨粒が落下する事になるので少し早く動く感じになります。
雨をいっぱい降らそう！
シーン「遠くの雨1」の複製を繰り返し、「遠くの雨2」、「遠くの雨3」を複製します。同様に、シーン「近くの雨1」の複製を繰り返し、「近くの雨2」、「近くの雨3」を複製します。
シーンタイムラインを編集
シーン・タイムライン編集で、並び順を「カエル」、「近くの雨3」、「遠くの雨3」、「近くの雨2」、「遠くの雨2」、「近くの雨1」、「遠くの雨1」に入れ替えます。
このままだと、再生開始0秒から8秒までの間に全てのシーンが再生するので「オーバーラップ」を行って再生時間を自動調整します。
この状態だと再生タイミングの調整は行えましたが、シーンの重ね合わせる順番（レイヤー）を調整する必要があります。遠くの雨1から3は、一番下になる様にし、その上に近くの雨1から3が被さる様にします。一番手前に「カエル」が再生される様な順番にレイヤーを移動させます。ここで大事なのは、「レイヤーの調整は、オーバーラップで再生時間を調整した後に行う。」と言うことです。
アートワークのプレビュー
アートワークのプレビューはこんな感じになります。
今回は以上です。シーンを単純に複製して雨のシーンを増やしましたが、複製後にそれぞれのシーンのレーンの設定を若干修正すると もっと変化に富んだ雨のアニメーションになると思います。
システムねこ 