こんにちは、デザイナーのAです！
AdobeAnimateを利用して簡単に画像をアニメーションさせるApngの作り方をご紹介します！
Animateには簡単＆効率的にアニメーション作成できるツールが多数搭載されており、今回は「アセット・ワープツール」を使用します。
Contents
1) まずは、AdobeAnimateを起動
「新規作成」をクリックします。
サイズは任意に設定してください。
※今回はWEBサイトでの使用を想定して、「Web」を選択しました。
「フレームレート」は1秒の間に表示する静止画の枚数（コマ数）です。単位は「FPS＝frames per second」で「枚数/秒」を表します。
2) AdobeAnimateに画像を読み込む
読み込みたい画像（背景を透過したpng／ベクター画像推奨）をドラック＆ドロップ、または「ファイル」⇒「読み込み」⇒「ステージに読み込み」で任意の画像データを選択すると、
ステージに画像が表示されます。
3) 「アセットワープツール」でハンドルを作成
画面左側の「ツール」の「アセットワープツール」を選択した状態でアニメーションさせたい画像をクリックします。
水色のラインが表示された状態で画像のアニメーションさせたい部分をクリックして「ハンドル」を作成します。
4) キーフレームを複製し、ハンドルを作成
ハンドルを作成し終えたら、タイムラインで別のフレームを選択（※今回は「10」と「20」）し、右クリック⇒「キーフレームの挿入」を選択します。
別のフレーム（今回は「10」）を選択した状態で、ハンドルをドラッグしてアニメーションを作成します。
5) クラシックトゥーイン作成
ハンドルを操作し、アニメーションを作成し終えたら、タイムラインを選択した状態で右クリック⇒「クラシックトゥーインを作成」を選択します。
6) pngファイルの書き出し
「ファイル」⇒「書き出し」⇒「ムービーの書き出し」を選択。
※ファイルの種類が「PNGシーケンス（*.png）」になっていることを確認。
「書き出し」を選択。
任意のフォルダにコマが書き出されているのを確認してください。
7) Apng作成
コマで書き出されたpngを統合してアニメーション（Apng）化させるのに、今回は「アニメ画像に変換する君」を使用します。
「アニメ画像に変換する君」を起動。
コマで書き出されたpngをすべて選択した状態で、「アニメ画像に変換する君」の右側にウィンドウにドラッグ＆ドロップします。
アニメーションを確認して問題なければ「画質設定」のタブをクリック。
「Apngファイル出力」「容量最適化」にチェックが入っていることを確認し、「アニメ画像を保存する」ボタンをクリックすると、アニメーションpngの完成です！
いかがでしたでしょうか。
ちょっとしたアニメーションをつけることで、楽しい雰囲気を演出することが可能です。
マーカーネット株式会社では、お客様が何を求めているのか、何が必要なのかをじっくりヒアリングし、
最適なサイト制作を行わせていただいております。
ホームページ制作・WEB制作のご相談、ご依頼はこちらからどうぞ！
