Flash Professional CS5.5は、Flash Player 10.2のコンテンツを書き出せるFlash Professionalでのはじめてのバージョンです。本記事では、Flash Player 10.2の新機能である「Stage Video」の実装テクニックを紹介します。

※Flash Player 10.2の新機能については、「Flash Player 10.2 デスクトップ版の公開と新機能紹介」も合わせてご覧ください。

Stage Videoとは

Stage Videoとは、ビデオの再生方法の1つです。Stage Videoではビデオ再生処理プロセスの最初から最後までをハードウェアで行うことができるため、従来の埋め込みビデオやVideoクラスを使った方法よりもマシン負荷を抑えて再生することができます。

※Stage Videoに必要となるハードウェア環境については、以下のURLをご覧ください。
http://www.adobe.com/jp/products/flashplayer/systemreqs/

従来のVideoでは、Flashの表示リスト内にインスタンスを配置することで、ビデオを表示します。それに対してStage Videoでは、表示リストとは別の描画面を使ってビデオを表示します。この別の描画面にハードウェアアクセラレーションを利用することで再生パフォーマンスを向上させています。

Stage Videoで再生する場合は、H.264ビデオを利用します。従来のVideoでもH.264ビデオを利用できましたが、Stage VideoではH.264コーデックを使用すると、ビデオのデコードから表示までの処理において、ハードウェアアクセラレーションを最大限に活用できます。

Stage Videoの実装方法

まずはFlash Professional CS5.5でStage Videoを使ったサンプルを作成してみましょう(サンプル:stagevideo_1.fla)。

STEP01 メニューバーから[ファイル]→[新規]を選択し[新規ドキュメント]ウィンドウを開き、[種類]から[ActionScript3.0]を選択し、新規flaファイルを作成します。flaファイルは任意のフォルダに保存しておきます。フォルダには「sample.f4v」というファイル名でビデオファイルを用意します。

STEP02 メニューバーの[ファイル]→[パブリッシュ設定]を選択します。

STEP03 [パブリッシュ設定]ウインドウの上部で、[スクリプト]の種類が[ActionScript 3.0]、[Player]の種類が[Flash Player 10.2]であることを確認します。Stage Videoを利用するにはFlash Player 10.2以上が必要になるためです。

STEP04 左側メニューの[パブリッシュ]の[Flash(.swf)]にチェックを入れ、右側の[ハードウェアアクセラレーション]プルダウンメニューで[レベル1-ダイレクト]を選択します。

ここで[ハードウェアアクセラレーション]という見慣れない設定をしました。この内容は、HTMLに対するswfの埋め込みで「wmode」というパラメーターを設定することを示しています。Flashの背景を透過させHTMLの要素を重ね合わせるときにwmodeをtransparentに設定することがよくありますが、Stage Videoではハードウェアの機能を利用するためにwmodeをdirectとして設定します。

Internet Explorer 9やSafari 5ではwmodeの指定に関わらず、Flash PlayerからStage Videoを利用することが可能です。しかし、他のブラウザーの場合、direct以外ではStage Videoが利用できない可能性が高くなります。そのため明示的に選択しておくとよいでしょう。

以下は、[ハードウェアアクセラレーション]を[レベル1 – ダイレクト]としてパブリッシュした場合のHTMLのソースコードです(一部抜粋)。wmodeパラメーターの箇所に「direct」という記述があります。

var params = {}; params.quality = "high"; params.bgcolor = "#ffffff"; params.play = "true"; params.loop = "true"; params.wmode = "direct"; params.scale = "showall"; (省略)

※[パブリッシュ設定]で[Flashのバージョンを検知]をチェックしてパブリッシュした場合のHTMLのコードです。

STEP05 次にルートの1フレーム目のフレームアクションに次のコードを記述します。本来は、Stage Videoを利用できない環境に配慮して、従来のVideoにフォールバックするためのコードが必要ですが、まずは理解するための最小コードとして紹介します。

const FILE_NAME:String = "sample.f4v"; // ビデオファイルのURL const VIDEO_W:uint = 1280; //ビデオの横幅 const VIDEO_H:uint = 720; //ビデオの高さ // ビデオ接続 var nc:NetConnection = new NetConnection(); nc.connect(null); var ns:NetStream = new NetStream(nc); ns.client = {}; // Stage Videoが使用可能かどうかをチェック stage.addEventListener(StageVideoAvailabilityEvent.STAGE_VIDEO_AVAILABILITY, stageVideoAvailabilityHandler); function stageVideoAvailabilityHandler(e:StageVideoAvailabilityEvent):void { // Stage Videoが使用可能かチェック var available:Boolean = e.availability == StageVideoAvailability.AVAILABLE; if (available) { // NetStreamをStage Videoに割り当てる var stageVideo:StageVideo = stage.stageVideos[0]; stageVideo.attachNetStream(ns); // 表示サイズを指定 stageVideo.viewPort = new Rectangle(0,0,VIDEO_W,VIDEO_H); // ビデオファイルを再生 ns.play(FILE_NAME); } }

※従来のVideoにフォールバックしたコードは、サンプルstagevideo_2.flaをご覧ください。

STEP06 コードを記入したら、パブリッシュして確認しましょう。[ファイル]→[パブリッシュプレビュー]→[デフォルト-(HTML)]を選択します(Windowsの場合は[F12]キー、Macの場合は[コマンド]+[F12]キー)。なお、ムービープレビューではStage Videoが再生されないため、パブリッシュプレビューで確認する必要があります。

Stage Videoの効果

Stage Videoはどういった場面で効果を発揮するのでしょうか? 効果を最大限に発揮させるためには、機能の利点を把握する必要があります。ビデオを表示するまでには、ビデオデータの「デコード処理」「表示処理」と大きく2つのフェーズが存在します。表示処理はビデオのリサイズであったり、回転やアルファ、他の表示オブジェクトとの合成を指します。

Flash Player 10.1では、Internet Explorerでのみデコード処理をハードウェア側で処理することができました。Flash Player 10.2のStage Videoでは、デコード処理だけでなく、表示処理までハードウェアで処理することができます。それもInternet Explorerだけでなく他のブラウザーでも利用可能になります。

表示処理としてよくあるのが、ドットパターンを重ね合わせたビデオがフルFlashサイトの背景として再生されている表現です。ドットパターンを敷き詰める理由は、ビデオを拡大して表示した場合に、ビデオの荒れを目立たなくさせるためです。この手法では、ビデオの上に表示オブジェクトを重ねているため、非常にCPUリソースを消費します。

次のデモは、ビデオの上にドットパターンの塗りを敷き詰めて、ブラウザーサイズ変更に対してビデオがフィットするように作られたFlashです(サンプル:stagevideo_3.fla)。画面左側のボタンをクリックすることで、再生方法(Stage Videoか、従来のVideoか)とドットパターンの有無を切り替えられるようにしています。

Depending on the type of machine environment (browser or graphics board), but there are differences in support content by the hardware, in a state that can deliver maximum performance, "Stage Video Running (Direct Path)" in the upper left corner of the screen status area to "true", "Render State" will be "accelarated".

Use this demo, I will introduce the results so was verified whether there is a difference of how much to Stage Video and in the conventional Video machine load. Task Manager for Windows, the Mac OS X using the activity monitor, you have to check the CPU usage of the process. It should be noted that the video file is using the 30fps of H.264 video in 1280 × 720px.

Stage Videoを使用した場合は、従来のVideoを使った場合に比べて、WindowsとMac OS XともにCPU使用率が低くなっています。Windowsでは、Stage Video使用時が10%前後、従来のVideo使用時が40%前後です。Mac OS Xでは、Stage Video使用時が10%前後、従来のVideo使用時が100%前後(!)です。

ノートパソコンでのビデオ鑑賞では特にバッテリーの消費電力に影響するので、今後はエンドユーザーのためにも積極的にStage Videoを採用することが望ましいでしょう。

関連記事