HTML5 Canvas でのコンポーネントの使用

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

「拡張機能のインストール」をクリックして、インストールするエクステンション（.zxp ファイル）を選択します。詳しくは、エクステンションのインストールを参照してください。

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

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