Adobe Animate CC 2020 HTML5 Canvas 広告バナーサンプルと作り方 | デジマースブログ

Adobe Animate CC 2020 HTML5 Canvas 広告バナーサンプルと作り方 | デジマースブログ


デザイナー向けのインタラクティブWebアニメーションツール「Adobe Animate CC」使って、スマホのWEB画面を横断する全画面を使った広告バナーサンプルを作ってみます。
画面の上部からキャラクターが降ってきて、下部に固定のバナーに着地する目を惹く広告です。
　

作りはシンプルな全画面広告

構成は下記の図のようになります。

とてもシンプルですが、
プログラムもコーディングスキルもないデザイナーでも、ツールで補助してもらいながら作ることで何とかなるかもしれません。

それでは早速挑戦してみます。

全面固定広告の制作

固定広告部分を「Adobe Animate CC」を使って作っていきます。
※細かいオペレーション部分は割愛

まずはソフトを起動してステージサイズとフォーマットを設定します。
普及端末数の多いiPhone6系画面サイズをWebページの「dvice width」値で設定
375ｘ667px
(750ｘ1334px)

下部固定バナー制作

バナーはメジャーな320x50pxのネットワーク系バナーを今回は仕込んでみます。

作った画像はAnimateの「ライブラリ」に格納して、いつでも配置出来る部品状態にします。

バナーの右側には画面上部から飛んで登場するキャラクターが着地するスペースになりますので、キャラクター画像は載せず空けておきます。

登場キャラクターの作成

アニメーションパターンは運用しやすさと読み込みを考慮して出来るだけ数を抑えます。
今回は

「飛び降りる滑降ポーズ」
「着地時のポーズ」
「立ち上がったポーズ」
「決めポーズ_アニメ01」
「決めポーズ_アニメ02」
「決めポーズ_アニメ03」

以上の6パターンを作りました。

作った画像は先ほどの固定表示されるバナー画像と同じで「ライブラリ」に格納しておきます↓

キャラクターの組み込み

ライブラリーに格納したキャラクター画像は画像のままなので、
制御するために「シンボル化」をします。

シンボル化は、名をつけたフォルダのようなものの中に画像を格納することで、JavaScriptの変数で制御したり、設定したアニメーション等、情報が引き継げるものです。
さらに編集作業などが簡単になり、素材の効率的な運用が出来、「アニメGIF」に比べ、ファイル容量を軽減するメリットもあります。

背景画像など、動かす必要のないものなどはシンボル化の必要はありませんが、背景を動的に差し替える、色変えするなど、状況によって制御する場合も想定できるため、原則シンボルして格納する癖をつけておきます。

グラフィックシンボルとムービークリップシンボルの違い

シンボルの種類は、違いがわかり難いですが、大きく「グラフィック」「ムービークリップ」があります。

「ムービークリップ」は、
原則、アニメーションを制御するモノで、メインのタイムラインとは独立したタイムラインを持ち、メインのタイムラインが、「stopのJavaScript」で再生が停止している状態でも影響を受けず動き続けることが出来ます。

独立して繰り返し動き続ける「キラキラ画像」など、エフェクト系のアニメーションを作る場合に向いており、スクリプトにより制御が出来ます。

「グラフィック」は、
原則、静止画像を扱うもの、ムービークリップ内で扱う「部品画像を格納（定義）する場所」という理解で問題ありません。
また、アニメーションもつけられますが、
こちらはメインのタイムラインと同期して影響を受ける為、メインのタイムラインが「stop」のスクリプトで止まっていれば、同じく停止します。

シンボルにはそのほか「ボタン」もありますが、、「HTML5 Canvas用」としてファイル制作する場合はボタンシンボルとしてのFlashファイルでは機能していたマウスアクション機能(オンマウスやクリックなど)は、HTML5 Canvasファイルでは現状機能しないため使用する機会はないと思われます。
※Flashファイル（swf）ではマウスアクションが機能します。

コマ画像を「シンボル化」して格納

今回はアニメーションの静止コマ画像を扱うので「グラフィックシンボル」として格納します。

格納方法はシンボルをダブルクリックで「ステージ」表示画面を開けるので、格納したい画像をライブラリからドラックして適当に置きます。
「Ctrl」+「Alt」+「1」～「6」キーで左上揃えや中心揃えなどショートカットが出来ますので試しましょう。

基本は左揃え
「Ctrl」+「Alt」+「1キー」
を行ったあと、
上揃え
「Ctrl」+「Alt」+「4キー」
を行う
「左上配置」にしておきます。

今回は要素が少ないので「ムービークリップ」にわざわざ「グラフィック」を格納せず、ルート（基本の親階層）にアニメーションのコマ画像を配置していきます。

「グラフィック」をタイムラインへ配置

それでは「グラフィック」（コマ画像）をタイムラインに格納してアニメーションを作ります。

タイムラインは1コマ毎の横並び制御になるので馴染みが多いデザイナーは多いと思います。

アニメーションの開始時点は画面上部画面外ですので、
ステージ上部座標の
ｘ23
ｙ-89
に配置します。
※キャラ画像は高解像度対応で150ｘ150pxで制作してますが、配置する際は半分の72ｘ72pxで配置します。

全6個のキャラクターアニメーション画像とベースバナー画像を配置します。

下部バナー画像に着地して「決めポーズ」をする画像の座標は
ｘ284
ｙ589
あたりで配置しています。

降下中のアニメーションは「飛び降りる滑降ポーズ」コマ画像を「画面外」と「着地寸前」の2箇所に始点終点として配置して「クラシックトゥイーン」で繋ぎ、自動補完アニメーションを使うと簡単です。（タイムラインの紫部分矢印が「クラシックトゥイーン」を設定した状態です。）

アニメーションの制御

アニメーション画像間の表示時間等（フレーム間隔）を調整してイメージ通りのアニメーションが出来ていれば配置は完了ですが、
一度再生されたらそれで止まったままだと広告効果が悪いので、決めボーズのアニメーションを定期的に特定フレームまでリープ処理をさせます。

こちらのスクリプトを最終フレームに書き込みます↓
this.gotoAndPlay(“anime_roop”);

これにより、赤旗で「フレーム名」（フレーム番号でも可）をつけた文字列”anime_roop”の旗地点まで戻って繰り返し再生
されることで無限ループ可能となりました。

バナー画像クリックによるWEB遷移の組み込みは、
下部固定ボタン画像の上に新規レイヤーを作り、

ボタン範囲を制御す「ムービークリップシンボル」を、
・バナー画像と同サイズ
・バナー画像と同座標
・白一色塗り
・アルファの設定を1％
にして薄く透過状態でボタン画像にピッタリ重ね配置します。

制御のJavaScriptは、
作った「透明ムービークリップ」を選択した状態で、「アクションパネル」（スクリプト入力画面）の「コードスプニット」から「HTML5」⇒「クリックしてWEBページに移動」を選べば自動で入力してくれて便利です。

※「ムービークリップ」などシンボルを作った場合は必ず「シンボル名」（名前）を付けておきましょう。
忘れると制御対象が設定できないので名前付けが必須です。

htmlとJavaScriptの書き出し

それではwebページへの組み込みを行います。

「Adobe Animate」から「パブリッシュ」を実行すると、

「html」ファイル
「JavaScript」ファイル
そして、使用した画像が格納されている
「img」フォルダ

以上が書き出されます。

JavaScriptはhtmlファイルのなかに内包する設定も可能です。
※「パブリッシュ設定」から書き出し詳細が変更できます。

以上を表示させたいWebページの「headタグ内」に、
書き出されたAnimateから書き出されたhtmlファイルの

<!-- write your code here -->

で囲まれた部分をコピペし、
「bodyタグ」周りの以下の部分をコピペ

<body onload="init();" style="margin:0px;">
<div id="animation_container" style="background-color:rgba(255, 255, 255, 0.00); width:375px; height:667px">
<canvas id="canvas" width="375" height="667" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 0.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:375px; height:667px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>

スタイルは「position」プロパティで設定できる値「fixed」を設定して、画面のきまった位置に固定させる書き換えを行っています。
position: fixed; bottom: 0; left: 0;
を使って上部基準で固定して組み込めば完了です。

<body onload="init();" style="margin:0px;">
<div id="animation_container" style="position: fixed; bottom:0px; left:0px; background-color:rgba(255, 255, 255, 0.00); width:100%; height:667px">
<canvas id="canvas" width="100%" height="667" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 0.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:100%; height:667px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>

コチラがWEBページに広告を組み込んだスマホ表示に最適化したサンプルページです↓
★組み込みサンプルを⇒ひらく

さいごに

ブラウザ画面全体を使った仕込み表現はFlashの時代からあった仕組みで目新しくはなく、
時代が一回りして戻ってきたと考えられます。

しかし、利用者に対して予測を超える表現は「ユーザー体験」を阻害する可能性が高く注意が必要です。

組み込む際は広告訴求内容と、対象サービスページの親和性を注意さえすれば、好意的に受け入れられる可能性も否定できないと考えます。

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。


他の記事をさがす ⇒ 記事一覧へ