このページの本文へ

FlashバナーをEdge Animateで作り直してタブレットに対応 (1/2)

2013年08月06日 11時00分更新

文●萩原伸悟

  • この記事をはてなブックマークに追加
本文印刷
edge

 アニメーションなどのHTML5コンテンツを手軽に制作できるオーサリングツール「Adobe Edge Animate」。前回は、さまざまなウィンドウ幅に対応できるトップバナーを制作しました。

 今回は、制作したトップバナーを既存のWebサイトへ埋め込む方法を紹介します。従来はFlashで作っていたようなバナーも、Edge Animateで作ったバナーに差し替えれば、iPhoneやiPadなどのスマートフォン/タブレットでも画像が切り替わるサイトに変身です。

 完成サイトは以下のリンクを参照してください。

500

完成サイト。画像クリックでサンプルを表示します

トップバナーを既存サイトに埋め込む

 シンプルなHTMLで作られたカフェのWebサイトにトップバナーを埋め込みます。埋め込む前のサイトは以下のリンクを参照してください。

500

埋め込む前のサイト。画像クリックでサンプルを表示します

 このサイトのトップバナーを、1枚の静止画から、前回制作したアニメーションバナーに置き換えます。画像ファイルやJavaScriptファイルを既存サイト内のフォルダに格納するため、アニメーションバナーで使用している画像ファイルとJavaScriptファイルのパスを変更する方法も紹介します。

  • Step 1. コンテンツをパブリッシュする
  • Step 2. Edge Animateのファイルを既存のサイト上へ移動する
  • Step 3. 既存のHTMLファイルへコードを埋め込む
  • Step 4. 画像ファイルのパスを変更する
  • Step 5. JavaScriptファイルのパスを変更する

Step 1. コンテンツをパブリッシュする

 Edge Animateで既存サイトに埋め込むコンテンツ(今回はトップバナー)を開き、パブリッシュします。メニューバーの「ファイル」>「パブリッシュ」を選択します。

「パブリッシュ」を選択

「パブリッシュ」を選択

 パブリッシュに成功すると、指定した場所に以下のようなファイルが作成されます。

パブリッシュされたファイル

パブリッシュされたファイル

 各ファイルの意味、役割は、連載の第2回で紹介していますので確認してください。これで、Webサイトに組み込むファイルの準備ができました。

Step 2. Edge Animateのファイルを既存のサイト上へ移動する

 パブリッシュされたファイルから、必要なファイルのみをサイト内へアップロードします。以下のファイルおよびフォルダを選択し、フォルダ構成はそのままで、アニメーションを埋め込むHTMLファイルと同階層にアップロードしましょう。

  • CafeEdge_edge.js
  • CafeEdge_edgeActions.js
  • CafeEdge_edgePreload.js
  • edge_includesフォルダ
  • imagesフォルダ

 以下が、アップロードする前とアップロードした後の既存サイトのフォルダ構成です。「index.html」はアニメーション用のコードが埋め込まれるHTMLファイルです。

フォルダ構成/アップロード前

フォルダ構成/アップロード前

フォルダ構成/アップロード後

フォルダ構成/アップロード後

前へ 1 2 次へ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く