4フレームでできるウィンクをするアニメーションの作り方についてご紹介します!
まだApple Pencilをお持ちでない方で、ペンで絵を描いてみたい!そんな方におすすめのタッチペンです。私は絵を描き続けるのかわからなかったので、こちらのペンでデビューしました。「線の太さ」や「色の濃さ」をペンに加えて表現することはできませんでしたがメモアプリなどにも問題なく書けたので満足した商品でした!その後美味しくいただいてApple Pencilにしました。
目を閉じて明けるだけなら、簡単なものなら2フレームでアニメーションできそうだけど。
目をゆっくり閉じて、ゆっくり開けるアニメーションを緒に作ってみよう!
ちょっとしたTIPSも教えるね!
アニメーションの基本はこちらの記事をご覧ください。
目次
アニメーションアシストをON
今回はキャンバスサイズ1000x1000pxの正方形にしましたが、お好きなサイズでOKです。
画面右上の「🔧設定」>「キャンバス」を選択して「アニメーションアシスト」をONにします。
フレーム1:目を全開した絵
まずは目を全開した絵を描きます。「全開した絵」「少し閉じた絵」「ほとんど閉じた絵」「全閉した絵」の4種類必要なので、フレームを複製します。
レイヤーパネルから複製するレイヤーを左にスワイプして「複製」をタップして複製します。
下のフレームをタップしてフレームオプションから「複製」する方法もあります。
フレーム2目を少し閉じた絵
2フレーム目を選択してウィンクする方の目を1/3程度消して目を少し閉じた絵に描き直します。
フレーム3:ほとんど閉じた絵
3フレーム目を選択してウィンクする方の目を2/3程度消して目をほとんど閉じた絵に描き直します。
フレーム4:目を全閉した絵
4フレーム目を選択してウィンクする方の目を全閉した絵に描き直します。
これで準備完了です。
フレーム1と4の保持する時間を設定
このまま再生すると忙しいウィンクになっているので、目を閉じて目を開くまでの時間を少し長くしてゆっくりウィンクするよう設定します。
フレーム1(目が全開)をタップします。フレームオプションの「保持する時間」を右にスライドさせて「10」にします。フレーム4も同じように保持する時間を「10」にします。
保持する時間って?
特定のフレームの表示時間を長くすることができる機能だよ!
再生種類:ピンポン
最後に画面右下の「設定」から再生の種類を「ピンポン」にします。ピンポンにすると開いた目が閉じる、閉じた目が開くのように再生されます。
アニメーションを繰り返します。最初から最後、最初から最後・・・。
【ピンポン】
最初から最後、最後から最初、最初から最後と往復して再生されます。
【ワンショット】
最初から最後の1度だけの再生です。
書き出しファイル形式
画面左上の「🔧設定」>「共有」から「アニメーションGIF」「アニメーションPNG」「アニメーションMP4」からファイル形式を選択して書き出します。WEBサイトで使用するには「アニメーションGIF」の「ウェブ対応」で書き出してください。
ファイルサイズが小さく、同じフレームを再利用できるので2枚のフレームで作成されたアニメーションでもずっと動き続けてくれます。サイトに表示するのにおすすめな形式です。
【アニメーションPNG】
アニメーションGIFより見た目の劣化がなくきれいです。
ただ、サポートされていないブラウザーではアニメーションを再生することができません。最初のフレームが静止画として表示されます。
【アニメーションMP4】
ファイルサイズが小さいながらも高画質な動画ファイルですが、GIFアニメーションのように繰り返しフレームが再生されないので、同じ動作を繰り返すアニメーションでも多くのフレームが必要になります。
その他ファイル形式についてはこちらの記事をご覧ください。
アニメーションの基本についてはこちらの記事をご覧下さい。
コメント