マーカーネット株式会社

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制作

執筆者:

関連記事

イラスト素材サイトのご紹介

イラスト素材サイトのご紹介

こんばんは、新人Aです。 今日は、イラスト素材のサイトさんをご紹介しようかと思います!       【いらすとや】 http://www.irasutoya.com/ フ …

知らなかった!じゃ済まされない。フラットデザインの落とし穴

こんばんわ!WEBデザイナー歴10年目に突入間近のHです! 以前、2015年に流行るWEBデザインのトレンドを3つ、ご紹介させて頂きました。 ①フラットデザインの更なる普及 ②クリックを出来るだけ減ら …

デザイナーの常識!? いいデザインと悪いデザインの見分け方 スマホサイト編

こんにちは、デザイナーのAです。 いいデザインと悪いデザインの見分け方 その(1) いいデザインと悪いデザインの見分け方 その(2) いいデザインと悪いデザインの見分け方 その(3) いいデザインと悪 …

【超便利】作業効率化ができるタブ表示拡張機能

突然ですが皆様、画面がごちゃごちゃになったこと、ありませんか?   Macをお使いの方は、“タブでまとめればいいじゃん!”と思うかもしれませんが、 windowsユーザーはそうはいきませんよ …

【Illustrator】基本図形で出来ちゃう!ハートマークの作り方

こんばんは、新人Aです。 今日は、Illustratorでハートを作る方法についてお話します! まぁ、素材サイトさんからデータをお借りしちゃえばそれで済む話なのですが… 理想の形が見当たらない!という …