この記事では、カスタマイズ可能なコンポーネントの使用について説明します。

コンポーネントは 1 つの機能または再利用可能でカスタマイズ可能なコンポーネントのグループを提供し、広告作成者の生産性を強化します。これまでの Animate CC では、Flash ベースのターゲットで使用される Flash コンポーネントをサポートしていました。本リリースから、Animate では HTML5 Canvas をサポートしています。 

  1. ファイル新規を選択します。

    新規ドキュメントダイアログで画面上部のタブから「詳細設定」を選択してから、HTML 5 オプションを選択します。

    新しいドキュメント
    HTML5 Canvas
  2. ウィンドウ/コンポーネントを選択します。

    デフォルトコンポーネント
    デフォルトコンポーネント

  3. コンポーネント/ビデオを選択します。関連するコンポーネントを Canvas にドラッグ&ドロップします。 

  4. ステージ上のビデオコンポーネントインスタンスを選択し、プロパティインスペクターでパラメーターを表示および変更します。「ソース」パラメーターを使用すると、ローカルの場所からビデオファイルを選択したり、ビデオ(mp4、ogg、ogv、webm の各形式)を再生するための任意の URL を指定したりすることができます。

    components_drag_drop
    コンポーネントをドラッグ&ドロップ

  5. 「ソースのサイズに合わせる」を選択して、ビデオプレーヤーのサイズを入力ビデオのサイズに合うように変更します。この機能は、mp4 ビデオの場合にのみ動作します。他の種類のビデオの場合は、ステージ上のビデオインスタンスのサイズを手動で変更し、必ず同じ縦横比が保たれるようにしてください。

  6. Ctrl + Enter(Mac の場合は Command + Enter)キーを押して、ムービーをプレビューします。ビデオがデフォルトのブラウザーで再生されます。 コントロールはデフォルトで表示されるようになっているので、ブラウザーでビデオの上にマウスポインターを置くと、コントロールが表示されます。

    同じ手順で他のコンポーネントも使用できます。

    components_preview
    コンポーネント出力のプレビュー

注意:

コンポーネントは DOM エレメントとして HTML ドキュメントに追加されるため、コンポーネントにインタラクティビティ機能を追加するには、コンポーネントのコードスニペット(コードスニペット/HTML5 Canvas/コンポーネント)を参照してください。

コードスニペットを使用したコンポーネントへのインタラクティビティ機能の追加

  1. ウィンドウ/コンポーネントを選択します。

  2. コンポーネントにインタラクティブ機能を追加するには、ウィンドウ/コードスニペットを選択します。使用可能な様々なコンポーネント動作のマッピングが表示されます。

  3. コードスニペット画面で、HTML5 Canvas/コンポーネントを選択します。

    component_snippets
    デフォルトのコードスニペット

  4. 選択したコンポーネントに基づいて、対応するコードスニペットをダブルクリックして、そのスニペットをアクションパネルに表示します。 コードスニペットへのインタラクティブ機能の追加については、Animate CC でのコードスニペットへのインタラクティブ機能の追加を参照してください。

次の例では、コードスニペットを使用してビデオの再生をコードで制御する方法を説明します。

  1. ステージ上のビデオインスタンスを選択し、プロパティインスペクターで自動再生設定を無効にします。 

  2. コンポーネントパネルでボタンコンポーネントを 2 回ダブルクリックして、ステージ上にボタンインスタンスを 2 つ追加します。コンポーネントパネルからステージに直接ドラッグ&ドロップすることもできます。

    Component_example_7
    ボタンの追加

  3. 最初のボタンインスタンスを選択し、プロパティインスペクターでラベルを「再生」に変更し、2 番目のボタンを「一時停止」に変更します。 

  4. ウィンドウ/コードスニペットを選択して、コードスニペットパネルを開きます。HTML5 Canvas/コンポーネントに移動し、ユーザーインターフェイスセクションを展開します。 

  5. ステージ上の「Play」ボタンを選択し、コードスニペットパネルで「ボタンクリックイベント」をダブルクリックして、「OK」をクリックします。 選択したボタンにインスタンス名が割り当てられます。新しく追加したコードは、アクションパネルに表示されます。

    Component_example_4
    コードコードスニペットの追加

  6. ステージ上のビデオを選択し、コードスニペットパネルでビデオセクションを展開します。「ビデオを再生」をダブルクリックします。ビデオの再生に必要なコードがアクションパネルに追加されます。

    Component_example_5
    アクションパネルに追加されたコード

  7. ボタンがクリックされたときにビデオを再生するには、このコードを「// Start your custom code」から「// End your custom code」までの範囲に移動します。 

    Component_example_6
    タグ内へのコードの移動

  8. ビデオを一時停止するコードを追加するには、一時停止ボタンを選択し、新しいボタンを割り当て、ハンドラーをクリックし、ビデオを一時停止するコードを追加します。

  9. ムービーをプレビューします。「Play」ボタンをクリックするとビデオが再生され、「Pause」ボタンをクリックするとビデオの再生が一時停止します。 

注意:

プロパティインスペクターで各コンポーネントの className 属性を確認できます。これらのクラス名を使用すると、CSS を使用してコンポーネントのスキンを設定できます。CSS コンポーネントを使用すると、カスタム CSS を読み込むことができます。CSS コンポーネントでは、ムービーに組み込む任意のローカル CSS ファイルを選択できます。

配布されたコンポーネントのインストール

Animate デザイナーまたは開発者は、エクステンションの管理ユーティリティを使用して、配布された ZXP ファイルのコンポーネントをインストールできます。

前提条件

エクステンションの管理ユーティリティ:ダウンロード手順については、Animate CC 製品内でヘルプ/エクステンションの管理をクリックしてください。

コンポーネントのインストール

配布されたコンポーネントをインストールするには、次の手順を実行します。

  1. ManageExtensions.exe ファイルをダブルクリックします。エクステンションの管理ダイアログボックスが表示されます。

    ManageExtensions
  2. 拡張機能のインストール」をクリックして、インストールするエクステンション(.zxp ファイル)を選択します。

  3. インストールされたコンポーネントを Animate CC に表示するには、ウィンドウ/コンポーネントの順にクリックします。 コンポーネントポップアップダイアログボックスが表示されます。

  4. 右上隅のハンバーガーアイコンをクリックし、「コンポーネントをリロード」をクリックします。

    reloading-components

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

法律上の注意   |   プライバシーポリシー