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制作, ホームページ運用

関連記事

ホームページ制作はWordPressがおすすめ! 作成方法や必要な知識をわかりやすく解説!

ホームページ制作はWordPressがおすすめ! 作成方法や必要な知識をわかりやすく解説!

「専門的なプログラミング知識がなくても、直感的な操作でホームページを作成・管理できる」として世界中で支持されているWordPress。世界のウェブサイトの40%以上で採用されているこのシステムは、豊富 …

【Illustrator】多角形を使った簡単な花形の作り方

【Illustrator】多角形を使った簡単な花形の作り方

みなさまこんばんは、新人Aです。 今日は、多角形を使って一瞬でお花の形にする方法をお話しようと思います! 数値をずらすだけで形が簡単に変わるので、とってもおすすめです。 WEBサイト制作事業 WEBサ …

WEBサイトの種類を一覧で紹介!目的に合ったWEBサイト制作を行うための知識を身につけよう

WEBサイトの種類を一覧で紹介!目的に合ったWEBサイト制作を行うための知識を身につけよう

WEBサイトは、情報発信・販売促進・ブランド構築・採用活動など、さまざまな目的に応じて作られています。 そのため、自身がネット上でサービスを展開する際には、適切なWEBサイトの種類を選ぶことが成功の鍵 …

Webサイトのリニューアルにかかる費用をサイトの種類ごとに徹底解説!やるべきこともご紹介

Webサイトのリニューアルにかかる費用をサイトの種類ごとに徹底解説!やるべきこともご紹介

  多くの企業が感じているWebサイトの課題。しかし、いざリニューアルとなると、予算の問題が大きな壁となってしまいます。「いったいいくらかかるのか」「予算の相場はどれくらいなのか」。このよう …

ホームページ制作を行うメリット/デメリットを解説!作成のタイミングや制作方法もご紹介

ホームページ制作を行うメリット/デメリットを解説!作成のタイミングや制作方法もご紹介

今や多くの企業や個人事業主が、ホームページを持つ時代になっています。 しかし、「本当にホームページを作る必要があるの?」と疑問に思っている方も多いのではないでしょうか。 確かにSNSの活用が広がり情報 …