この記事では、Animate CC での OAM パブリッシングについて説明します。

HTML5 Canvas、ActionScript または WebGL の Animate コンテンツを OAM(.oam)アニメーションウィジェットファイルを書き出すことができます。Animate から生成された OAM ファイルは、Dreamweaver、Muse、InDesign など他のアドビアプリケーションに配置できます。

Animate コンテンツを OAM 形式に書き出してパブリッシュ

  1. ファイル/パブリッシュ設定/OAM パッケージを選択します。「OAM パッケージ」チェックボックスをオンにします。

  2. 出力ファイル」フィールドで、パッケージの場所を参照し、パッケージ名を入力します。

  3. ポスター画像」セクション内で、次のいずれかのオプションを選択します。

    • 現在のフレームのコンテンツから生成するには、「現在のフレームから作成 (PNG)」を選択します。透明 PNG をポスター画像として設定するには、「透明」を選択します。
    • 外部 PNG ファイルをポスター画像として指定するには、「このファイルを作成」を選択します。
    OAM パブリッシュ設定

Canvas ドキュメントタイプ用の透明な背景を使用して OAM を作成

  1. 書き出したい Canvas ドキュメントを開きます。

  2. プロパティパネルで、「ステージの色」を選択し、「アルファ : %」を 0 に設定します。

  3. パブリッシュ設定」のオプションを使用して OAM としてパブリッシュします。

    Canvas の透明度

Canvas ドキュメントタイプのレスポンシブ OAM を作成

  1. ファイル/パブリッシュ設定を選択します。

  2. 基本」タブで、「レスポンシブにする」チェックボックスをオンにします。この設定を選択すると、アニメーションは幅、高さまたはその両方に関してレスポンシブになり、パブリッシュされる出力のサイズが各種フォームファクターに基づいて変更されます。結果は、レスポンシブで、よりシャープ、より鮮明な HiDPI 準拠の出力になります。

    レスポンシブな伸縮

  3. パブリッシュ設定」のオプションを使用して OAM としてパブリッシュします。

他のアドビアプリケーション(Adobe Muse)で OAM を使用する例

  1. Adobe Muse を起動し、編集したいサイトを開きます。

  2. プランビューで、アニメーションを追加するページの名前をダブルクリックします。

  3. ファイル/配置を選択した後、自分のサイトフォルダーに移動して OAM ファイルを選択します。

  4. アニメーションを配置するページの上を 1 回クリックします。

  5. 選択ツールを使用して、ページ上の希望の位置にアニメーションを配置します。アニメーションの背景は Muse では不透明になりますが、ページをプレビューまたはパブリッシュすると透明になります。

  6. ファイル/ブラウザーでページをプレビューを選択して、アニメーションが期待どおりに表示されることを確認します。変更を加えたい場合は、Muse に戻ってページエレメントを再配置します。アセットパネルを見ると、.OAM ファイルがアセットとしてリストされています。

  7. コントロールパネルの「パブリッシュ」リンクをクリックします。希望のオプションを選択し、「OK」をクリックしてサイトの更新をパブリッシュします。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

リーガルノーティス   |   プライバシーポリシー