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-ダイレクト］を選択します。

図3　［スクリプト］は［ActionScript 3.0］、［Player］は［Flash Player 10.2］を選び、［Flash(.swf)］にチェックを入れ、［ハードウェアアクセラレーション］は［レベル1-ダイレクト］を選びます。［OK］ボタンをクリックします。

ここで［ハードウェアアクセラレーション］という見慣れない設定をしました。この内容は、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が再生されないため、パブリッシュプレビューで確認する必要があります。

図4　Stage Videoのシンプルな実装。確認はブラウザーを通して行います

サンプルを見る：stagevideo_1.html

Stage Videoの効果

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

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

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

図5　ビデオを拡大して表示させた場合、画質の荒れが目立っています

図6　ドットパターンを重ね合わせることで、画質の荒れが目立ちにくくなっています

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

図7　Stage Videoと従来のビデオのパフォーマンスを比較するデモ

サンプルを見る：stagevideo_3.html

マシン環境（ブラウザーやグラフィックボード）の種類に応じて、ハードウェアによる支援内容に違いがありますが、最大限パフォーマンスを発揮できる状態では、画面左上のステータス領域で「Stage Video Running(Direct Path)」が「true」に、「Render State」が「accelarated」になります。

このデモを使って、Stage Videoと従来のVideoではマシン負荷にどのくらいの差があるのかを検証したので結果を紹介します。Windowsの場合はタスクマネージャーを、Mac OS Xの場合はアクティビティーモニタを使って、プロセスのCPU使用率をチェックしています。なお、ビデオファイルは1280×720pxで30fpsのH.264ビデオを使っています。

図8　Stage Video使用時（Windows 7 / Internet Explorer 9）

図9　従来のVideo使用時（Windows 7 / Internet Explorer 9）

図10　Stage Video使用時（Mac OS X / Safari 5）

図11　従来のVideo使用時（Mac OS X / Safari 5）

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

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

Flash Player 10.2 デスクトップ版の公開と新機能紹介

Flash Player 10.2コンテンツ制作入門：Stage Video

著者池田泰延氏

Content

作成日

ページツール

タグ

必要条件

ユーザーレベル

必要な製品

サンプルファイル

Stage Videoとは

Stage Videoの実装方法

Stage Videoの効果

関連記事

More Like This

製品

ソリューション

業種別ソリューション

サポート

ラーニング

ご購入方法

ダウンロード

会社情報

Flash Player 10.2コンテンツ制作入門：Stage Video

著者 池田 泰延氏

Content

作成日

ページ ツール

タグ

必要条件

ユーザーレベル

必要な製品

サンプルファイル

Stage Videoとは

Stage Videoの実装方法

Stage Videoの効果

関連記事

More Like This

製品

ソリューション

業種別ソリューション

サポート

ラーニング

ご購入方法

ダウンロード

会社情報

著者池田泰延氏

ページツール