HTML5コンポーネントの使用

HTML5 Canvasドキュメントで作業する場合 このプラットフォームのコンポーネントをフルに使うことができます 作業はコンポーネントパネルでおこないます コンポーネントパネルにアクセスするには ウィンドウメニューから 「コンポーネント」を選択します コンポーネントパネルには 「ユーザーインターフェイス」 「ビデオ」 「jQuery UI」があります 「ビデオ」コンポーネントセットを展開すると 「Video」という単一のコンポーネントがあります コンポーネントのインスタンスをステージにドラッグして そのプロパティを変更できます 「Video」コンポーネントのインスタンスを選択したまま 「位置とサイズ」を変えましょう Xを681.00にして Yを50.00にします また、幅は550.00に 高さは309.00に設定します このように「Video」コンポーネントインスタンスが 背景の看板全体を覆っています ここで必要になるのは この中で再生するビデオファイルです このMP4ファイルが その目的にぴったりです 「Video」コンポーネントインスタンス内で再生しましょう ステージ上でコンポーネントインスタンスを選択したまま プロパティパネルを見ると、「パラメーターを表示」ボタンがあり ここでステージ上のHTML5 Canvasコンポーネントの プロパティを確認できます クリックすると、コンポーネントパラメーターパネルが開き ここで「自動再生」 「コントロール」 「ミュート」 「ループ」を定義できます 「コントロール」はオフに 「自動再生」はオンにしましょう このファイルに音声はないのですが、音声をミュートし また、ループするように設定します もちろん、一番重要なパラメーターは「ソース」です これをMP4ファイルに指定する必要があります この編集アイコンをクリックして 目的のソースを見つけます 先ほど見たHippoVideo.mp4ファイルがありました 「開く」をクリックして このビデオをソースに指定します 「ソースのサイズに合わせる」ボックスはオフにして コンポーネントは先ほど設定したサイズのままにしておきます 「OK」をクリックします これでテストしてみましょう 制御メニューから 「プレビュー」を選択します レンダリングされたアニメーションを 看板上でループ再生しています