WEBデザイン WEB制作 ホームページ運用

簡単!アニメーションpng Apngの作り方

投稿日:2023年5月5日 更新日:

こんにちは、デザイナーのAです!

AdobeAnimateを利用して簡単に画像をアニメーションさせるApngの作り方をご紹介します!

AdobeAnimate

Animateには簡単&効率的にアニメーション作成できるツールが多数搭載されており、今回は「アセット・ワープツール」を使用します。

1) まずは、AdobeAnimateを起動

「新規作成」をクリックします。

まずは、AdobeAnimateを起動

サイズは任意に設定してください。

※今回はWEBサイトでの使用を想定して、「Web」を選択しました。

「フレームレート」は1秒の間に表示する静止画の枚数(コマ数)です。単位は「FPS=frames per second」で「枚数/秒」を表します。

AdobeAnimate使い方

2) AdobeAnimateに画像を読み込む

読み込みたい画像(背景を透過したpng/ベクター画像推奨)をドラック&ドロップ、または「ファイル」⇒「読み込み」⇒「ステージに読み込み」で任意の画像データを選択すると、
ステージに画像が表示されます。

AdobeAnimate使い方2

3) 「アセットワープツール」でハンドルを作成

画面左側の「ツール」の「アセットワープツール」を選択した状態でアニメーションさせたい画像をクリックします。

「アセットワープツール」でハンドルを作成

水色のラインが表示された状態で画像のアニメーションさせたい部分をクリックして「ハンドル」を作成します。「アセットワープツール」でハンドルを作成

「アセットワープツール」でハンドルを作成

4) キーフレームを複製し、ハンドルを作成

ハンドルを作成し終えたら、タイムラインで別のフレームを選択(※今回は「10」と「20」)し、右クリック⇒「キーフレームの挿入」を選択します。キーフレームを複製し、ハンドルを作成

別のフレーム(今回は「10」)を選択した状態で、ハンドルをドラッグしてアニメーションを作成します。

別のフレーム(今回は「10」)を選択した状態で、ハンドルをドラッグしてアニメーションを作成します。

ビフォーアフター

5) クラシックトゥーイン作成

ハンドルを操作し、アニメーションを作成し終えたら、タイムラインを選択した状態で右クリック⇒「クラシックトゥーインを作成」を選択します。

クラシックトゥーイン作成

クラシックトゥーイン作成

6) pngファイルの書き出し

「ファイル」⇒「書き出し」⇒「ムービーの書き出し」を選択。
※ファイルの種類が「PNGシーケンス(*.png)」になっていることを確認。

pngファイルの書き出し

「書き出し」を選択。

pngファイルの書き出し

任意のフォルダにコマが書き出されているのを確認してください。

任意のフォルダにコマが書き出されているのを確認してください。

7) Apng作成

コマで書き出されたpngを統合してアニメーション(Apng)化させるのに、今回は「アニメ画像に変換する君」を使用します。

「アニメ画像に変換する君」を起動。

Apng作成

コマで書き出されたpngをすべて選択した状態で、「アニメ画像に変換する君」の右側にウィンドウにドラッグ&ドロップします。

コマで書き出されたpngをすべて選択した状態で、「アニメ画像に変換する君」の右側にウィンドウにドラッグ&ドロップします。

コマで書き出されたpngをすべて選択した状態で、「アニメ画像に変換する君」の右側にウィンドウにドラッグ&ドロップします。

アニメーションを確認して問題なければ「画質設定」のタブをクリック。
「Apngファイル出力」「容量最適化」にチェックが入っていることを確認し、「アニメ画像を保存する」ボタンをクリックすると、アニメーションpngの完成です!

アニメーションpngの完成です

完成

いかがでしたでしょうか。
ちょっとしたアニメーションをつけることで、楽しい雰囲気を演出することが可能です。

マーカーネット株式会社では、お客様が何を求めているのか、何が必要なのかをじっくりヒアリングし、
最適なサイト制作を行わせていただいております。

弊社では技術力を活かした美しいWEBサイトのデザインをご提案します。
様々な目的に応じたプランを用意しておりますので、ご興味のある方はご覧ください。

WEBデザイン

WEBサイト制作実績3,000サイト以上!
新規作成からリニューアルまで、
多様なご要望にお応えした弊社制作事例から検討したい方はこちら

制作実績を見る

ホームページ制作・WEB制作のご相談、ご依頼はこちらからどうぞ!

-WEBデザイン, WEB制作, ホームページ運用

関連記事

【Vol.2】優れたキャッチコピーを見て、閃き力を上げよう!【映画・アニメ編】

【Vol.2】優れたキャッチコピーを見て、閃き力を上げよう!【映画・アニメ編】

目次1 冬っ子のわたくし、この暑さもう限界です2 キャッチコピー第5弾です3 優れたコピーを見てコピーの閃き力をグイグイ上げていこう! ~ 映画・アニメ編 ~3.1 キミとなら、強くなれる。3.2 ま …

簡単便利!30秒でできる!【photoshop】で線画を抽出する方法!

簡単便利!30秒でできる!【photoshop】で線画を抽出する方法!

線画イラストの線画だけ抜き出したい!背景を透過したい!!・・・そんな時に役立つphotoshopの小技をご紹介します。   (1)まず、画像をphotoshopで開きます。 (2)メニューの …

ホームページ制作にかかる費用の相場は?カテゴリ別の価格や制作会社に依頼するメリットを徹底解説

ホームページ制作にかかる費用の相場は?カテゴリ別の価格や制作会社に依頼するメリットを徹底解説

「会社のホームページ、本当に効果を発揮していますか?」ビジネスの成否を左右するほど、ホームページは今や重要な存在です。しかし、制作費用の相場がわからず、適切な予算設定に悩む方も多いのではないでしょうか …

集客に強いホームページ制作を行うには?コツや集客方法を徹底解説!

集客に強いホームページ制作を行うには?コツや集客方法を徹底解説!

「月間100件の問い合わせ」「Web経由の売上が3倍」—なぜ、ある企業のホームページはこれほどの成果を生み出せるのでしょうか? その答えは、戦略的なホームページ制作にあります。本記事では、実際に成果を …

起業時のホームページはどうしたらいい?必要となるシーンや作り方を解説

起業時のホームページはどうしたらいい?必要となるシーンや作り方を解説

「うちの会社もそろそろホームページを…」――起業して間もない経営者なら、誰もが一度は悩むホームページ制作。作るべきなのか、作るならいつか、予算はどれくらい必要なのか。実は、業種や事業規模に …