Google DoubleClick向けHTML 5エキスパンドバナー広告の作成

Adobe Animateでエキスパンドバナーを作成する チュートリアルです 作成方法を説明する前に 完成作品を確認しましょう これが、skyhighという航空会社の エキスパンドバナーです こちらがバナーを閉じた状態 こちらが完全に開いた状態です エキスパンドバナーの作成には5段階の手順があります まず、マスクを作成します アニメーションを開き、フレーム1で 閉じたバナーサイズのマスクを作成します このバナーは左から右に展開するため 左上に四角形を配置します 次に最大に展開したバナーのサイズを定義して 閉じた位置から開いた位置に シェイプトゥイーンでトランジションを作成します これでバナーの展開方法が 指定されました 次にバナーを折りたたむ方法を指定します バナーを折りたたむのはアニメーションの終了時です これでバナーを開く方法と閉じる方法が定義されました 次にこのレイヤーをマスクに変換して 他のすべてのレイヤーをこの下に置きます 動作をプレビューしましょう ロックアイコンをクリックすると、マスクが有効になります 正しく動作しましたね 次に、バナーを動作させるユーザーのインタラクションを決めます ユーザーがクリックまたはマウスオーバーすると バナーが開くようにします マウスオーバーでバナーを開く方法を説明します ボタンのレイヤーを追加して 閉じたバナーと同じサイズの長方形を作成します 閉じたバナーのどこをマウスオーバーしても 反応するようにします このシェイプをボタンに変換します マウスオーバーでボタンを操作するため 非表示にする必要があります そのためには、ステートを「ヒット」にします 「ボタン」を選択して、インスタンス名を追加します 動作を確認しましょう ボタンがバナーを展開した後も表示されていますが これは正しくありません 最初だけ表示され、展開後は消す必要があります これを修正するには、フレーム2に空白キーフレームを挿入します これで、バナーを開くボタンができました もうひとつ、バナーを閉じるボタンが必要です アニメーションの最後にキーフレームを挿入して 閉じるボタンを作成します インスタンスに名前を付けます アニメーションの終了時に ボタンが表示されるようにします もう一度プレビューしましょう できましたね 次の手順に進む前に、ブラウザーで現在の状態を確認しましょう バナーが自動的に開いて閉じ 無限ループになっています これは正しくありません ユーザーのインタラクションに応じて 開いたり閉じたりする必要があります 修正しましょう Actionsレイヤーを作成します ウィザードを使用して、最初のフレームでアニメーションが停止し ユーザーがマウスオーバーしたときにだけバナーが開くようにします 再度、ウィザードを使用して、アニメーションの終了時にstopを入れ ユーザーが閉じるボタンをクリックしたときにだけ バナーが閉じるようにします プレビューしましょう 正しく動作しています 次の段階に進みます マーケティングプラットフォームで正しく動作するようにします Google DoubleClickやSeismicへの対応です Google DoubleClickなどのマーケティングプラットフォームには 承認済みのテンプレートがあるため Animate HTMLラッパーに統合する必要があります まず、正しいテンプレートをダウンロードします ダウンロード元はGoogle Rich Media GalleryのTemplate Databaseです また、AnimateでHTMLラッパーを書き出します 両方のファイルをテキストエディターで開きます Googleのテンプレートが左側です Googleのテンプレートからコードを抽出して Animate HTMLラッパーに挿入します 終了したら、Googleのテンプレートを閉じます JavaScriptファイルを開き、不要なコードを削除します これには時間が数分かかります 慎重に作業してください 終了したら、JavaScriptファイルのコードを Animate HTMLラッパーに挿入します Animate HTMLラッパーでコードを手直ししてから 次の手順に進みましょう 次に、ユーザーが広告を開いたり閉じたりしたときに Google DoubleClickがトラッキングできるようにします それには、Animate HTMLラッパーから 適切なフレームのアクションパネルにスクリプトをコピーします これで、バナーでのインタラクションをトラッキングできますが ユーザーがCTA（行動喚起）ボタンを押したときではありません これを作成しましょう パブリッシュの準備が整いました プロファイルを作成することをお勧めします そうすれば、同様のバナーを作成するときに 再利用できるからです Animate HTMLラッパーを読み込み、パブリッシュします HTMLとJavaScriptファイルがプロジェクトフォルダーに 作成されます これでバナーをGoogle DoubleClickにアップロードできます できました ファイルをGoogle DoubleClickにアップロードする前に 折りたたんだ状態のバナーのバックアップ画像を作成します これはバナーが正常に動作しないときに Google DoubleClickが使用するものです 書き出したすべてのファイルとバックアップ画像をZip圧縮します zipファイルをDoubleClick Studioアカウントにアップロードします 次の画面では、ユーザーがCTAボタンを押したときに ユーザーを誘導するURLを入力します 最後に、エキスパンドバナーの幅と高さを入力します 確認してみましょう 完璧です 次の画面で、パブリッシュします Adobe Animateを使用して、エキスパンドバナーを作成する方法を 説明しました エキスパンドバナーを作成する際に便利な、すべてのコードが入った サンプルテンプレートをダウンロードすることができます ぜひご利用ください