FLASHのお勉強_フルスクリーン対応FLVビューアー(プレイヤー)

　複数FLVファイルから自動作成・配置されたサムネイルのクリックで、選択されたＦＬＶファイルが再生されるタイプのＦＬＶビューアー（プレイヤー）である。ＦＬＶのファイル名は、xmlファイルから読み取ることにし（swfファイル内に配列として定義しても可）、そのファイルの画面解像度を読み取り、そのサイズで画面中央に表示させる。
　したがって、ユーザーは、FLVファイルをサーバー上で追加・変更する場合でもｘｍｌファイルをそれに対応させて変更するだけで済むので（解像度を気にすることなく)、便利であろう。ウエブサイトで使用する以外に、子供や孫の記録動画を見るのにも使えそうである。

SAMPLE

　こちらの別画面に示した。

ステージなどの準備

●900*800のステージ（24fps）を設定（背景色、ステージサイズは目的に応じて任意でよい）
●ライブラリーにvideoコンポーネントのFLVPlaybackを取り込む
●swfと同じディレクトリにvideoフォルダを置き、その中に再生するFLVファイルを格納しておく。ファイル名は任意でよい。
●swfと同じディレクトリにFLVPlaybackで使用するスキンのファイルを置く（ここではClearExternalAll.swf）
　スキンファイルのFlash内の置き場所はバージョンによって異なるのでgoogleなどの検索で調べる
●FLVファイル名を書き込んだvideo.xml（utf-8フォーマット）をswfトオナジディレクトリに置いておく

スクリプト　（as2.0）


import flash.filters.GlowFilter;

//グローフィルターの設定

var glow1:GlowFilter = new GlowFilter(0xffffff, 0.8, 2, 2, 8, 3, true);

var glow2:GlowFilter = new GlowFilter(0xff0000, 0.4, 10, 10, 8, 3, true);

//文字のフォーマット

var txtFormat1 = new TextFormat();

txtFormat1.color = 0xFFFFFF;

txtFormat1.size = 18;

txtFormat1.bold = true;

var txtFormat2 = new TextFormat();

txtFormat2.color = 0xFFFFFF;

txtFormat2.size = 13;

txtFormat2.bold = true;

var txtFormat3 = new TextFormat();

txtFormat3.color = 0xffc6b1;

var title = "TITLE of the PLAYER";

//題名表示

this.createTextField("titleTxt",200,10,10,200,50);

titleTxt.text = title;

titleTxt.setTextFormat(txtFormat1);



//xmlファイルの読み込み

var videoSource:Array = new Array();

var video_xml = new XML();

video_xml.load("video.xml");

video_xml.ignoreWhite = true;

video_xml.onLoad = videoSet;



//プレイヤーの作成・設定

var mainPlayer = this.attachMovie("FLVPlayback", "mainPlayer", 0);

mainPlayer.skin = "ClearExternalAll.swf";

mainPlayer._visible = false;

mainPlayer.autoPlay = false;

mainPlayer.autoSize = true;

mainPlayer.volume = 50;



//サムネイルコンテナーの作成

var thumbContainer = this.createEmptyMovieClip("thumbContainer", 90);

var thumbContainer_w = 900;

//サムネイルの作成・表示・マウスアクション

function videoSet(OK) {

    if (OK) {

        var rootNode = video_xml.firstChild;

        var videoNum = rootNode.childNodes.length;

        for (i = 0; i < videoNum; i++) {

            videoSource[i] = rootNode.childNodes[i].attributes.name;

        }

        setPosition();

        for (j = 0; j < videoNum; j++) {

            var thumb_mc = thumbContainer.attachMovie("FLVPlayback", "thumb" + j, 

100 + j, {_x:10 + 85 * (j % 10), _y:70 * Math.floor(j / 10)});

            with (thumb_mc) {

                _xscale = _yscale = 25;

                skin = null;

                contentPath = videoSource[j];

                autoPlay = false;

            }

            thumb_mc.filters = [glow1];

            thumb_mc.num = j;

            thumb_mc.onRollOver = rollover;

            thumb_mc.onRollOut = rollout;

            thumb_mc.onRelease = function() {

                videoPlay(this.num);

            };

        }

        firstView = true;

        videoPlay(0);

    }

}

function rollover() {

    this.filters = [glow2];

}

function rollout() {

    this.filters = [glow1];

}



//video再生

function videoPlay(vNum) {

    mainPlayer.contentPath = videoSource[vNum];

    mainPlayer._visible = false;

    var listenerObject:Object = new Object();

    listenerObject.ready = function(eventObject:Object) {

        mainPlayer._visible = true;

        player_w = mainPlayer.preferredWidth;

        player_h = mainPlayer.preferredHeight;

        mainPlayer._x = Stage.width / 2 - player_w / 2;

        mainPlayer._y = Stage.height / 2 - player_h / 2;

    };

    mainPlayer.addEventListener("ready",listenerObject);

    if (firstView) {

        thumbContainer._visible = true;

        firstView = false;

    } else {

        thumbContainer._visible = false;

        mainPlayer.play();

    }

}



//サムネイルの再表示

var reDisplay_btn = this.createEmptyMovieClip("r_display", this.getNextHighestDepth());

reDisplay_btn.createTextField("tf",this.getNextHighestDepth(),0,0,100,30);

reDisplay_btn.tf.text = "BackToThumb";

reDisplay_btn.tf.setTextFormat(txtFormat2);

reDisplay_btn.onRollOver = function() {

    reDisplay_btn.tf.setTextFormat(txtFormat3);

};

reDisplay_btn.onRollOut = function() {

    reDisplay_btn.tf.setTextFormat(txtFormat2);

};

reDisplay_btn.onRelease = function() {

    mainPlayer.pause();

    thumbContainer._visible = true;

};



//フルスクリーンボタンの設置と設定

var fullscreen_btn = this.createEmptyMovieClip("full_btn", this.getNextHighestDepth());

fullscreen_btn.createTextField("tf",this.getNextHighestDepth(),0,0,100,30);

fullscreen_btn.tf.text = "FULLSCREEN";

fullscreen_btn.tf.setTextFormat(txtFormat2);

fullscreen_btn.onRollOver = function() {

    fullscreen_btn.tf.setTextFormat(txtFormat3);

};

fullscreen_btn.onRollOut = function() {

    fullscreen_btn.tf.setTextFormat(txtFormat2);

};

fullscreen_btn.onRelease = function() {

    if (Stage["displayState"] == "normal") {

        Stage["fullScreenSourceRect"] = new Rectangle(0, 0, Stage.width, Stage.height);

        Stage["displayState"] = "fullScreen";

    } else {

        Stage["displayState"] = "normal";

    }

};



//ウインドウサイズ変更に応じた配置

Stage.scaleMode = "noScale";

Stage.align = "LT";

function setPosition() {

    thumbContainer._x = Stage.width / 2 - thumbContainer_w / 2;

    thumbContainer._y = Stage.height - 100;

    fullscreen_btn._x = Stage.width - 100;

    fullscreen_btn._y = 35;

    reDisplay_btn._x = Stage.width - 100;

    reDisplay_btn._y = 15;

    mainPlayer._x = Stage.width / 2 - player_w / 2;

    mainPlayer._y = Stage.height / 2 - player_h / 2;

}

myListener = new Object();

myListener.onResize = function() {

    setPosition();

};

Stage.addListener(myListener);

setPosition();

スクリプトの若干の説明

for (i = 0; i < videoNum; i++) { videoSource[i] = rootNode.childNodes[i].attributes.name; }
　　xmlファイルに定義されている属性値（name）を配列としてvideoSource[i]に取り込む。
　　ここは、xmlを使わないでfla内で配列として定義してもよい。
var thumb_mc = thumbContainer.attachMovie("FLVPlayback", "thumb" + j, 100 + j,
{_x:10 + 85 * (j % 10), _y:70 * Math.floor(j / 10)});
　　xmlに登録されているflvファイルの数だけサムネイル表示用ムービークリップを作成し、横10列に配列表示する。
　　10を超えたら、次の段に表示するが、段数によっては、ステージの高さ、サムネイル群（thumbContainer）の表示位置を要調整。
　　なお、contentPath = videoSource[j];　でflvの最初の場面がサムネイルとして表示される。
player_w = mainPlayer.preferredWidth;　 player_h = mainPlayer.preferredHeight;
　　mainPlayerで再生準備のできたflvファイルの解像度（画面サイズ）を取得。
fullscreen_btn.onRelease = function() {　・・・・・・・　}
　　fullscreenボタンのクリックでフルスクリーンに、再度のクリックでノーマルスクリーンに切り替え。

video.xml　ファイルに

<?xml version=1.0 encoding=utf-8?>
<files>
<file name="video/game.flv"></file>
<file name="video/tunahiki.flv"></file>
<file name="video/yuki.flv"></file>
<file name="video/hodaka.flv"></file>
<file name="video/hodaka2.flv"></file>
</files>

HOME　　　お勉強総リスト