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

関連記事

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

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

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

ホームページ制作の流れを徹底解説!制作の注意点や外注する際のポイントもご紹介

ホームページ制作の流れを徹底解説!制作の注意点や外注する際のポイントもご紹介

企業のホームページ制作は、計画から公開まで一連の工程を適切に管理することが成功の鍵となります。本記事では、まず目的とKPIの設定から始まり、競合分析や市場調査、ターゲット定義といった事前準備の重要性を …

多言語サイトの作り方は?デザインやビジネスにおける重要性について徹底解説

多言語サイトの作り方は?デザインやビジネスにおける重要性について徹底解説

貴社のWEBサイトは、言葉の壁に阻まれていませんか?グローバル市場で成功を収めている企業には、ある共通点があります。それは、多言語サイトの活用です。驚くべきことに、多言語サイトを導入した企業の70%以 …

ホームページ制作は目的が重要!目的を明確にする方法や活用事例をわかりやすく解説!

ホームページ制作は目的が重要!目的を明確にする方法や活用事例をわかりやすく解説!

「集客」「ブランディング」「採用」など、企業のホームページには様々な目的があります。しかし、その目的が曖昧なまま制作を進めてしまうと、誰に何を伝えたいのかが不明確なコンテンツとなり、貴重なビジネスチャ …

【Illustrator】幾何学模様の作り方

【Illustrator】幾何学模様の作り方

みなさまこんにちは、新人Aです。 三角形で作る幾何学模様の作り方をご紹介します。 これはパターンにするよりもランダムに色を置いていったほうが幾何学模様の雰囲気がぐっと増すと思うので、 少し面倒ですがパ …