NEWS

2018.02.03 「Animate CC でHTML5対応のアニメーションを作成する」を更新しました。

  • Web creators

操作

Animate CC でHTML5対応のアニメーションを作成する

概要

Flash Player廃止に伴い、従来Flashで表示していた一部のアニメーションはHTML5に移行しています。
Animate CC からはHTML5への書き出し機能が備わっています。
今回は画像がフェードイン、フェードアウトするアニメーションを作成します。

サンプル解説

画像が一定間隔でフェードイン、フェードアウトします。

作成法

1.Animate CC の起動
Animate CC を起動すると従来のFlashのように作成するテンプレートを選択する画面が表示されます。
今回は「HTML5 Canvas」を選択します。

Animate CC の起動

2.キャンバスの表示
Animate CC を起動してテンプレートを選択した後は従来のFlashと同様に編集領域となりキャンバスやタイムライン、各種ウィンドウが表示されます。

Animate CC のキャンバス

3.シンボルの作成
ライブラリにシンボルを作成、画像を格納します。 新規作成したシンボルにはライブラリに格納した画像を配置します。

シンボルの作成

4.キーフレームの挿入
タイムラインの1フレーム目を選択して右クリックで表示されるメニューよりキーフレームを挿入します。

キーフレームの挿入

5.クラシックトゥイーンと透明度の適用
キャンバスにシンボルを配置し、30フレーム目までタイムラインを延ばします。
31フレーム目にはキーフレームを挿入し、1フレーム目から31フレーム目に対して右クリックで表示されるメニューよりクラシックトゥイーンで連結します。

次に31フレーム目のシンボルを選択した状態で透明度(アルファ)の数値を下げて透明化します。

クラシックトゥイーンと透明度の適用

6.パブリッシュの設定(1)
従来のFlashのパブリッシュと異なり、HTML5の場合はSWFファイルは無く、画像とJavaScriptが書き出されます。
上部メニューより「ファイル -> パブリッシュ設定」を選択するとパブリッシュの設定画面が表示されます。
パブリッシュ設定画面内の[基本]タブでは動作や書き出し先を指定します。

パブリッシュの基本設定

7.パブリッシュの設定(2)
[詳細]タブではJavaScriptに関する情報を設定します。

パブリッシュのJavaScriptの設定

8.パブリッシュの設定(3)
[スプライトシート]では画像に関する情報を設定します。

パブリッシュのスプライトシートの設定

9.パブリッシュの設定(4)
[Webフォント]では別のAdobe製品である「Typekit」よりフォントを読み込むことができます。
今回は未使用です。

パブリッシュのWebフォントの設定

10.パブリッシュの実行
設定を終え、パブリッシュするとHTMLファイル、JavaScriptファイル、画像が書き出されます。

パブリッシュの実行

11.ブラウザで確認する
HTMLファイルをブラウザで読み込むと画像がフェードイン、フェードアウトします。

ブラウザで確認する

解説

画像の透明度を上げたり下げたりする単純な動きですが、JavaScriptで実装しようとするとプログラムが必要となり難易度が上がりますが、Animate CC を利用することで容易に実装することができます。
JavaScriptでの構築を容易にするために Jquery と ライブラリ などを用いることも多いですが、部分的に Animate CC を用いる手段もあります。

ページ上部へ