瞬きアニメーションの作り方
earth88こんにちは、hopemi（ポペミ）です。
今回は、scrolltoonでサクッと瞬きアニメーションを作ってみようと思います。
今回目指すゴールは目を開いた状態から、閉じてまた開くまで作成してみます。
瞬きアニメーションは次のような流れで作成します。
何をするにもまずポインターを設置
タップでポインターを設置しましょう！
編集画面からレイヤーアニメーション用画像を読み込み
今回用意したのはこの画像。
元の画像を切り抜いて加工し、目を閉じました。
元の開いた目が隠れればいいので、目の周りだけの画像でもOKです。
その場合は、透過の画像が必要なので、webp形式（PNGも使えますが重たいので非推奨）で保存しましょう。
注意するのは画像の横幅です。
必ず、toonのイメージと同じ横幅の画像を用意してください。小さい画像だと、横幅が画面サイズまで拡大され、元の画像に合わせられなくなります。
ポインターをロングタップして編集画面がを開きます。
「ファイルを選択」から画像を選択してください。
「レイヤーを追加」ボタンで、レイヤーが登録されます。
アニメーションリストに追加
画像名を選択し「このレイヤーを追加」をすると、アニメーションリストに追加されます。
画像の表示位置を調整
追加されたリストをタップすると、詳細な設定ができます。
先ずは、画像の位置を合わせます。
今回の画像は元画像と幅が同じなので、Yパラメータのみの操作で合わせられます。
パラメータをスライドするとプレビュー画像が出るので、元画像に合うようにセットしてください。
誤差が出る場合は、数値入力で少しずつ合わせましょう。
ピッタリ合いました。
アニメーションリストの左端のチェック✅をつけると、挿入したレイヤーが表示されます。
今回は瞬きさせたいので、確認したらチェック✅は外しておきます。
アニメーション選択
最初に登録したアニメーションは「fade」なので、これだけだと目が開いた状態から閉じたままになってしまいます。
目を閉じ、また開きたいので、アニメーションを追加します。
同じ画像を連続でアニメーションさせたいので、プラスボタン➕をおして、リストを複製します。
アニメーションを「fadeout」にします。
これで一旦再生してみてください。
簡単な瞬きをしてくれます。
編集画面下部の「このポインターから再生」で再生できます。
瞬きを調整したい時は、時間などを変えてみるといいです。「fade」アニメーションは、設定した時間をかけてフェードしてくれます。
また、閉じた状態を少し長くしたい…と言う時は「wait」アニメーションを入れてください。レイヤー画像が指定時間止まってくれます。指定時間が経過すると次のアニメーションが開始されます。
これで、ゆっくりとした瞬きが可能になります。
まとめ
覚えておきたいこと
・画像の横幅は元のtoonに準じる
・画像の位置の誤差は数値入力で調整する
・アニメーションは指定時間をかけてアニメーションし続ける。
・追加したレイヤー画像で待機したい時は「wait」アニメーションを使う
最後に
最後まで読んでいただきありがとうございます。
スクロールトゥーンはパワポをイメージして作りました。
また、普通の動画はタイムライン編集ですが、絵描きさん向けにレイヤーと言う、平面を重ねるイメージにしています。
動画編集が苦手、今から勉強するのは…と言う方も参入しやすい設計です。
スクロールトゥーンのアニメーションは組み合わせ無限大なので、私もまだ見ぬ演出が出来ることでしょう。
まだまだ、アニメーションの作り方を解説して行きますので、次回もお楽しみに♪
🎉 毎月８日は Scrolltoon 全機能お試しデー！
画像読み込み・ポインター制御・スクロール＆レイヤーアニメーション・プロジェクト保存まで…
すべての機能を無料で体験できます。
今のうちにブックマークして、８日をお楽しみに！✨
🌍 toonplanet では、縦スクロール漫画をあらゆる角度からサポートしています。 無料素材配布からアプリ開発まで、あなたの創作を支える仕組みを発信中です。
