HTML パブリッシュ用テンプレート

  1. Adobe Animate ユーザーガイド
  2. Animate の概要
    1. Animate の新機能
    2. ビジュアル用語集
    3. Animate の必要システム構成
    4. Animate キーボードショートカット
    5. Animate での複数のファイルタイプの取り扱い
  3. アニメーション
    1. Animate のアニメーションの基本
    2. Animate でフレームとキーフレームを使用する方法
    3. Animate でのフレームアニメーション
    4. Animate でのクラシックトゥイーンアニメーションの操作
    5. ブラシツール
    6. モーションガイド
    7. モーショントゥイーンと ActionScript 3.0
    8. モーショントゥイーンアニメーションについて
    9. モーショントゥイーンアニメーション
    10. モーショントゥイーンアニメーションの作成
    11. プロパティキーフレームの使用
    12. トゥイーンを使用した位置のアニメーション化
    13. モーションエディターを使用したモーショントゥイーンの編集
    14. トゥイーンアニメーションのモーションパスの編集
    15. モーショントゥイーンの操作
    16. カスタムイージングの追加
    17. モーションプリセットの作成と適用
    18. アニメーションのトゥイーンスパンの設定
    19. XML ファイルとして保存したモーショントゥイーンの操作
    20. モーショントゥイーンとクラシックトゥイーン
    21. シェイプトゥイーン
    22. Animate のボーンツールアニメーションの使用
    23. Animate でのキャラクターリグの操作
    24. Adobe Animate でのマスクレイヤーの使用
    25. Animate でのシーンの操作
  4. インタラクティブ機能
    1. Animate でのボタンの作成
    2. 他のドキュメントタイプ形式への Animate プロジェクトの変換
    3. Animate での HTML5 Canvas ドキュメントの作成およびパブリッシュ
    4. Animate のコードスニペットを使用したインタラクティブ機能の追加
    5. カスタム HTML5 コンポーネントの作成
    6. HTML5 Canvas でのコンポーネントの使用
    7. カスタムコンポーネントの作成例
    8. カスタムコンポーネントのコードスニペット
    9. ベストプラクティス - Animate を使用した広告
    10. バーチャルリアリティの作成と公開
  5. ワークスペースとワークフロー
    1. ペイントブラシの作成と管理
    2. HTML5 Canvas ドキュメントでの Google フォントの使用
    3. Creative Cloud ライブラリと Adobe Animate の使用
    4. Animate のステージとツールパネルの使用
    5. Animate ワークフローとワークスペース
    6. HTML5 Canvas ドキュメントでの Web フォントの使用
    7. タイムラインと ActionScript
    8. 複数のタイムラインの操作
    9. 環境設定
    10. Animate オーサリングパネルの使用
    11. Animate でのタイムラインレイヤーの作成
    12. モバイルアプリおよびゲームエンジン用アニメーションの書き出し
    13. オブジェクトの移動とコピー
    14. テンプレート
    15. Animate での検索と置換
    16. 取り消し、やり直し、ヒストリーパネル
    17. キーボードショートカット
    18. Animate でのタイムラインの使用
    19. HTML 拡張機能の作成
    20. 画像とアニメーション GIF の最適化オプション
    21. 画像および GIF の書き出し設定
    22. Animate のアセットパネル
  6. マルチメディアとビデオ
    1. Animate のグラフィックオブイジェクトの変形と組み合わせ
    2. Animate でのシンボルインスタンスの作成と操作
    3. 画像トレース
    4. Adobe Animate でのサウンドの使用方法
    5. SVG ファイルの書き出し
    6. Animate で使用するビデオファイルの作成
    7. Animate にビデオを追加する方法
    8. ビデオのキューポイントの操作
    9. Animate でのオブジェクトの描画および作成
    10. 線とシェイプの変更
    11. Animate CC での線、塗り、グラデーション
    12. Adobe Premiere Pro と After Effects の使用
    13. Animate CC のカラーパネル
    14. Animate で Flash CS6 ファイルを開く
    15. Animate でのクラシックテキストの操作
    16. Animate へのアートワークの挿入
    17. Animate に読み込まれたビットマップ
    18. 3D グラフィック
    19. Animate でのシンボルの操作
    20. Adobe Animate での線とシェイプの描画
    21. Animate でのライブラリの使用
    22. サウンドの書き出し
    23. Animate CC でのオブジェクトの選択
    24. Animate での Illustrator AI ファイルの操作
    25. スプレーブラシツールでのパターンの適用
    26. ブレンドモードの適用
    27. オブジェクトの配置
    28. コマンドメニューを使用したタスクの自動化
    29. 多言語テキスト
    30. Animate でのカメラの使用
    31. Adobe Scout での Animate の使用
    32. Fireworks ファイルの作業
    33. グラフィックフィルター
    34. サウンドと ActionScript
    35. 描画の環境設定
    36. ペンツールを使用した描画
  7. プラットフォーム
    1. 他のドキュメントタイプ形式への Animate プロジェクトの変換
    2. カスタムプラットフォームサポート
    3. Animate での HTML5 Canvas ドキュメントの作成およびパブリッシュ
    4. WebGL ドキュメントの作成とパブリッシュ
    5. AIR for iOS 用アプリケーションのパッケージ化
    6. AIR for Android アプリケーションのパブリッシュ
    7. デスクトップ用 Adobe AIR のパブリッシュ
    8. ActionScript パブリッシュ設定
    9. ベストプラクティス - アプリケーションでの ActionScript の整理
    10. Animate での ActionScript の使用
    11. ベストプラクティス - アクセシビリティガイドライン
    12. Animate ワークスペースのアクセシビリティ
    13. スクリプトの記述と管理
    14. カスタムプラットフォームサポートの有効化
    15. カスタムプラットフォームサポートの概要
    16. アクセシビリティコンテンツの作成
    17. カスタムプラットフォームサポートプラグインの操作
    18. ActionScript 3.0 のデバッグ
    19. カスタムプラットフォームサポートの有効化
  8. 書き出しとパブリッシュ
    1. Animate CC からファイルを書き出す方法
    2. OAM パブリッシング
    3. SVG ファイルの書き出し
    4. Animate によるグラフィックとビデオの書き出し
    5. AS3 ドキュメントのパブリッシュ
    6. モバイルアプリおよびゲームエンジン用アニメーションの書き出し
    7. サウンドの書き出し
    8. QuickTime ビデオファイルの書き出し
    9. ActionScript を使用した外部ビデオ再生の制御
    10. ベストプラクティス - モバイルデバイス向けのコンテンツ作成のヒント
    11. ベストプラクティス - ビデオ規則
    12. ベストプラクティス - SWF アプリケーションのオーサリングガイドライン
    13. ベストプラクティス - FLA ファイルの構造化
    14. FLA ファイルを Animate 向けに最適化するベストプラクティス
    15. ActionScript パブリッシュ設定
    16. Animate のパブリッシュ設定の指定
    17. プロジェクターファイルの書き出し
    18. 画像とアニメーション GIF の書き出し
    19. HTML パブリッシュ用テンプレート
    20. Adobe Premiere Pro と After Effects の使用
    21. アニメーションのクイック共有とパブリッシュ

HTML パブリッシュ用テンプレートについて

Animate HTML テンプレートとは、静的 HTML コードと、特殊タイプの変数で構成させる柔軟性のあるテンプレートコード (ActionScript 変数とは異なる) を含むファイルです。Animate で SWF ファイルをパブリッシュすると、パブリッシュ設定ダイアログボックスの「HTML」タブで選択した値でこれらの変数が置き換えられ、SWF ファイルが埋め込まれた HTML ページが作成されます。

Animate には、多くのユーザーのニーズに合わせた様々なテンプレートが収録されているので、SWF ファイルを表示する HTML ページを手動で作成する必要はありません。例えば、「Animate のみ」テンプレートは、ブラウザーでファイルをテストする場合に便利です。このテンプレートは、Flash Player をインストールした Web ブラウザー上で表示できるように、SWF ファイルを HTML ページ上に配置します。

新しい HTML ページをパブリッシュするには、このテンプレートを使用して設定を変更します。カスタムテンプレートの作成には、任意の HTML エディターを使用できます。テンプレートの作成は通常の HTML ページの作成とほぼ同じですが、SWF ファイルに関する特定の値は、ドル記号($)で始まる変数に置き換えます。

Animate HTML テンプレートには、次の特徴があります。

  • パブリッシュ設定ダイアログボックスの「HTML」タブのテンプレートポップアップメニューに 1 行のタイトルが表示されます。

  • パブリッシュ設定ダイアログボックスの「HTML」タブの「情報」をクリックすると、詳しい説明が表示されます。

  • テンプレート変数はドル記号($)で始まり、Animate から出力ファイルが生成される際にパラメーター値が置換される場所が指定されます。

    注意:ドキュメント内でドル記号を別の目的に使用する場合は、円記号とドル記号(¥$)を使用してください。

  • HTML の object および embed タグは、Microsoft Internet Explorer および Netscape® Communicator® または Netscape Navigator® のタグの規定にそれぞれ従っています。HTML ページに SWF ファイルを正しく表示するには、次のタグの規定に従う必要があります。SWF ファイルを開く際、Internet Explorer では object HTML タグが使用され、Netscape では embed タグが使用されます。

HTML パブリッシュ用テンプレートのカスタマイズ

イメージマップ、テキストレポート、URL レポートを作成する場合や、一般的な Animate HTML object タグパラメーター(ActiveX コントロールを使用するブラウザーの場合)や embed タグパラメーター(プラグインを使用するブラウザーの場合)などにカスタム値を挿入する場合は、HTML のテンプレート変数を修正します。

Animate テンプレートにはアプリケーションの HTML コンテンツを記述することができます。また、ColdFusion や ASP など特別なインタプリタのコードも記述できます。

  1. Animate HTML エディターを使用して、変更する HTML テンプレートを開きます。これらのテンプレートは次の場所にあります。

    • Windows XP または Vista:boot drive¥Documents and Settings¥user¥Local Settings¥Application Data¥Adobe¥Flash CS5¥language¥Configuration¥HTML¥通常、Application Data フォルダーは非表示になっています。このフォルダーを表示するには、Windows エクスプローラーの設定変更が必要な場合があります。

    • Mac OS X 10.3 以降:Macintosh HD/アプリケーション/Adobe Flash CS5/language/First Run/HTML

      boot drive」は、Windows オペレーティングシステムがブートを開始するドライブ(通常 C:)を表します。「user」は、Windows オペレーティングシステムにログインしているユーザーの名前を表します。「language」は、言語の省略名に設定されています。例えばアメリカの場合、「language」の設定は、英語を表す「en」になります。

  2. テンプレートを編集します。
  3. テンプレートを元と同じフォルダーに保存します。
  4. SWF ファイルにテンプレートの設定を適用するには、ファイル/パブリッシュ設定を選択し、「HTML」をクリックして、修正したテンプレートを選択します。Animate では、選択したテンプレート内のテンプレート変数のみが変更されます。

  5. 残りのパブリッシュ設定を選択し、「OK」をクリックします。

HTML テンプレート変数

Animate で認識されるテンプレート変数を次の表に示します。

属性 / パラメーター

テンプレート変数

テンプレートのタイトル

$TT

テンプレートの説明開始

$DS

テンプレートの説明終了

$DF

Animate(SWF ファイル)タイトル

$T1

検索エンジンメタデータ用の Animate(SWF ファイル)タイトル

$TL

検索エンジンメタベースの説明

$DC

検索エンジンで使用するメタデータ XML ストリング

$MD

$WT

高さ

$HT

ムービー

$MO

HTML の位置

$HA

ループ

$LO

object 用パラメーター

$PO

embed 用パラメーター

$PE

再生

$PL

音質

$QU

伸縮

$SC

SALIGN

$SA

WMODE

$WM

デバイスフォント

$DE

BGCOLOR

$BG

ムービーテキスト(ムービーテキストを書く領域)

$MT

ムービー URL(SWF ファイルの URL の位置)

$MU

イメージの幅(イメージ形式の指定なし)

$IW

イメージの高さ(イメージ形式の指定なし)

$IH

イメージのファイル名(イメージ形式の指定なし)

$IS

イメージマップ名

$IU

イメージマップタグ位置

$IM

QuickTime の幅

$QW

QuickTime の高さ

$QH

QuickTime のファイル名

$QN

GIF の幅

$GW

GIF の高さ

$GH

GIF のファイル名

$GN

JPEG の幅

$JW

JPEG の高さ

$JH

JPEG のファイル名

$JN

PNG の幅

$PW

PNG の高さ

$PH

PNG のファイル名

$PN

簡易テンプレート変数の使用

$POobject タグ)および $PEembed タグ)テンプレート変数は、便利な簡易エレメントです。Animate では、どちらの変数を使用した場合も、一般的な object パラメーターや embed パラメーターなどのデフォルト以外の値をテンプレートに挿入できます(例:PLAY$PL)、QUALITY$QU)、SCALE$SC)、SALIGN$SA)、WMODE$WM)、DEVICEFONT$DE)、BGCOLOR$BG))。

サンプル HTML テンプレート

次に示す Animate の Default.HTML テンプレートファイルには、頻繁に使用される多数のテンプレート変数が組み込まれています。

$TTFlash Only 
$DS 
Display Adobe SWF file in HTML. 
$DF 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
$CS 
<title>$TI</title> 
</head> 
<body bgcolor="$BG"> 
<!--url's used in the movie--> 
$MU 
<!--text used in the movie--> 
$MT 
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="$WI" height="$HE" id="$TI" align="$HA"> 
<param name="allowScriptAccess" value="sameDomain" /> 
$PO 
<embed $PEwidth="$WI" height="$HE" name="$TI" align="$HA" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" /> 
</object> 
</body> 
</html>

SWF ファイルの代わりになるイメージマップの作成

Animate では、任意のイメージを表示するイメージマップを作成でき、URL にリンクしているボタンの機能を維持できます。HTML テンプレートに $IM テンプレート変数が含まれていると、Animate によりイメージマップコードが挿入されます。$IU 変数は、GIF、JPEG または PNG ファイルの名前を表します。

  1. ドキュメント内で、イメージマップに使用するキーフレームを選択し、そのフレームのプロパティインスペクター(ウィンドウ/プロパティ)で #Map というラベルを付けます。ActionScript 1.0 または 2.0 の getURL アクションを割り当てたボタンのあるキーフレームはすべて使用できます。

    Animate では、フレームラベルを作成しない場合は、SWF ファイルの最終フレーム内のボタンを使用してイメージマップが作成されます。このオプションで生成されるのは埋め込みイメージマップであり、埋め込み SWF ファイルではありません。

  2. イメージマップを表示するフレームを選択するには、次のいずれかの操作をします。
    • PNG や GIF ファイルの場合は、表示するフレームに #Static というラベルを付けます。

    • JPEG の場合は、パブリッシュ操作の際、表示に使用するフレームに再生ヘッドを配置します。

  3. HTML エディターで、修正する HTML テンプレートを開きます。
  4. テンプレートを保存します。
  5. ファイル/パブリッシュ設定を選択し、「形式」をクリックしてイメージマップの形式を選択して「OK」をクリックします。

    例えば、テンプレートに次のコードを挿入します。

    $IM 
    <img src=$IS usemap=$IU width=$IW height=$IH BORDER=0>

    この場合、「パブリッシュ」コマンドで作成される HTML ドキュメントには次のコードが生成されます。

    <map name="mymovie"> 
    <area coords="130,116,214,182" href="http://www.adobe.com"> 
    </map> 
    <img src="mymovie.gif" usemap="#mymovie" width=550 height=400 border=0>

テキストレポートおよび URL レポートの作成

$MT テンプレート変数を指定すると、Animate により、現在の SWF ファイルのすべてのテキストが HTML コードにコメントとして挿入されます。これは、SWF ファイルのコンテンツをインデックス化して検索エンジンに認識させるときなどに使用します。

$MU テンプレート変数を指定すると、Animate により、現在の SWF ファイル内のアクションが参照する URL のリストが生成され、そのリストが現在の位置にコメントとして挿入されます。このアクションにより、リンク確認ツールが SWF ファイル内のリンクを検出および確認できるようになります。

検索メタデータの埋め込み

$TL(SWF ファイルタイトル)および $DC(説明メタデータ)テンプレート変数を使用すると、HTML に検索メタデータを組み込むことができます。この機能により、検索エンジンは SWF ファイルを見つけやすくなり、有意義な検索結果が得られるようになります。$MD テンプレート変数を使用すると、検索メタデータを XML ストリングとして組み込むことができます。

その他の関連ヘルプ

アドビのロゴ

アカウントにログイン