マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

WEBデザイン WEB制作

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

投稿日:

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

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

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

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制作のご相談、ご依頼はこちらからどうぞ!

東京のWEB制作会社 マーカーネット株式会社 公式WEBサイトへ

-WEBデザイン, WEB制作

執筆者:

関連記事

WEBトレンド! 全面に写真を配置した 最新サイトのご紹介 ~素敵サイトの旅 その3~

こんにちは!web初心者のKです! 今日は曇りですが、みなさんお風邪など召されていませんか? 私は雪対策にブーツとコートを少し前に購入しました! 備えあれば憂いなし! もう雪が来ても怖くありません!! …

表現の幅を広げる!!AEプラグイン

こんにちは、先日自宅で自分の映像作品を会社に行く前にレンダリングし、仕事が終わって見てみると半分もレンダリングが進んでいなく絶望を味わった新米デザイナー・ムービー担当Iです。 こった映像を作成するには …

背景に動画を取り入れたWEBデザイン

背景に動画を取り入れたWEBデザイン

動画を取り入れたWEBサイト。 大分主流となってきて、見かける頻度も一段と増えました。 動画 = 重い という概念もどこへやら。。 最近のWEB動画はとても軽い。 背景として動画を入れ、飽きさせること …

手軽に雰囲気を変える!無料英字webフォントのまとめ -素敵な明朝フォント編-

webフォントは日本のホームページには今一歩馴染みが無いかもしれませんが これから先、SEOを視野に入れたものはほぼテキストで作成することが望まれます。 今回はその第二弾として「素敵な明朝英字フォント …

WEBトレンド+αの作り込みで、心地よさが広がる素敵サイトをご紹介! ~素敵サイトの旅 その1~

WEBトレンド+αの作り込みで、心地よさが広がる素敵サイトをご紹介! ~素敵サイトの旅 その1~

こんにちは!風邪っぴきのweb初心者Kです。 週末に風邪を治しきれず、咳のため未だマスクが手放せません。 今日は誰とも口をきけないかも知れない!!! みなさまはお風邪など召されていませんか? さてさて …