flashiroha

(136) ビデオギャラリー(as3.0)   2012_10_6
    ― サムネイル、FLVPlayback の台形表示 ―

flashiroha.com
flashiroha.com/listhtml

 サムネイル群を左に垂直に並べ、rotationY プロパティーを使って台形表示にし、このロールオーバーで右側に同じく台形表示させた FLVプレイヤー(FLVPlayback) に該当する動画の再生を開始する。 次いで、サムネイルがクリックされると、プレイヤーが変形して再生を続けたまま、元の大きさの矩形に戻るというタイプの動画ビューアーである。
 サムネイル群は中央の5個だけを見えるように表示し、ボタン操作で上下に送るようにしている。 ここに示したスクリプトは、サムネイルの数が奇数(9個)の場合であり、偶数の場合は、y座標の補正が必要になる。
SAMPLE
ステージなどの準備

●768*432、24fpsのステージを設定。 背景色は好みで。
●コンポーネントウインドウから、FLVPlayback(2.5)をライブラリーにD&Dする。
●「挿入」ー「新規シンボル(ムービークリップ)」画面で、230*35の矩形を描き(ここでは灰色、alpha10%)、この中にコンポーネントウインドウから、
PlayPauseButton、SeekBar、MuteButton、VolumeBarをD&Dで配置する。 それぞれのインスタンス名を、playpauseBtn、skBar、muteBtn、volBar とした。 また、全体のムービークリップのシンボル名、リンケージを contorollBar とした。
●「挿入」ー「新規シンボル(ボタン)」画面で、正四角形と☓を重ねて書き、リンケージを close_btn とし、動画終了ボタンを作成した。
●「挿入」ー「新規シンボル(ボタン)」画面で、四角形と上向きVを描き、リンケージを up_btn とし、サムネイル上送りボタンを作成した。
●「挿入」ー「新規シンボル(ボタン)」画面で、四角形と下向きVを描き、リンケージを down_btn とし、サムネイル下送りボタンを作成した。
●swfファイルと同じディレクトリに thumbs フォルダを置き、その中にサムネイル用画像(140*75, s1.jpg, sp2.jpg,,,,,)を格納しておく。
●swfファイルと同じディレクトリに video フォルダを置き、その中に再生する flv ファイル(768*432, v1.flv, v2.flv,,,,)を格納しておく。
 ここでは、YouTube の、吉田由利子さんの動画シリーズ(http://www.youtube.com/user/yoshidayuriko?feature=results_main)を拝借しています。

スクリプト  as3.0 FRAME1に記述)  ※サムネイルが持ち上がるように変更しました(赤字)。


import flash.display.MovieClip;
import flash.display.Loader;
import flash.net.URLRequest;
import flash.events.MouseEvent;
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
import fl.video.*;
import flash.filters.GlowFilter;
import flash.text.TextField;
import flash.text.TextFormat;

var glow1:GlowFilter=new GlowFilter(0xffffff,0.6,6,6,8,3,false);
var glow2:GlowFilter=new GlowFilter(0xffffff,0.6,3,1,8,3,false);
var glow3:GlowFilter=new GlowFilter(0xff0000,0.6,3,3,8,3,false);

//動画タイトル(題名)の配列定義
var videoTitle:Array=new Array("彫刻の森","ガラスの森","荒野から","空に向かって",
"窓辺の風","冬の横浜","地の果て","パープルスカイ","ムーン シャドウ"); //動画の数、サイズ var videoNum:Number=9; var videoWidth:Number=768; var videoHeight:Number=432; //サムネイルのイベント時MC var target_mc:MovieClip; //題名表示用テキストフィールド var titleBox:TextField = new TextField(); titleBox.x = 180; titleBox.y = 15; titleBox.width = 200; var tFormat = new TextFormat(); tFormat.color = "0xFFFFFF"; tFormat.size = 20; addChild(titleBox); //サムネイル収納用MC var thumbContainer:MovieClip = new MovieClip(); addChild(thumbContainer); //サムネイル上下移動用ボタンの配置 var d_btn = new down_btn(); d_btn.x=80; d_btn.y=10; d_btn.buttonMode = true; addChild(d_btn); var u_btn = new up_btn(); u_btn.x=80; u_btn.y=stage.stageHeight-20; u_btn.buttonMode = true; addChild(u_btn); //動画表示用MC var videoContainer:MovieClip = new MovieClip(); videoContainer.filters=[glow1]; addChild(videoContainer); //flvPlayer用コントローラー var controller:MovieClip = new controllbar(); controller.x=stage.stageWidth-230; controller.y=stage.stageHeight-40; controller.visible=false; addChild(controller); //メインになるFLVPlayer(myPlayer)の設定 var myPlayer:FLVPlayback = new fl.video.FLVPlayback(); myPlayer.skin=null; myPlayer.width=768; myPlayer.height=432; myPlayer.source="video/v1.flv"; myPlayer.autoPlay=false; myPlayer.volume=0.5; myPlayer.bufferTime=0; myPlayer.playPauseButton=controller.playpauseBtn; myPlayer.seekBar=controller.skBar; myPlayer.muteButton=controller.muteBtn; myPlayer.volumeBar=controller.volBar;; videoContainer.addChild(myPlayer); myPlayer.x=- videoWidth; myPlayer.y=- videoHeight; videoContainer.x=stage.stageWidth/2+videoWidth/2; videoContainer.y=stage.stageHeight/2+videoHeight/2; videoContainer.rotationY=30; //動画表示・再生終了ボタン var c_btn = new close_btn(); c_btn.x=stage.stageWidth-50; c_btn.y=10; addChild(c_btn); c_btn.visible=false; //サムネイル表示・イベント設定 for (var i:uint=1; i<=videoNum; i++) { var mc:MovieClip = new MovieClip(); thumbContainer.addChild(mc); mc.name="mc"+i; mc.buttonMode = true; mc.y=-80*videoNum/2+80*(i-1); mc.num=i; mc.filters=[glow2]; mc.addEventListener(MouseEvent.ROLL_OVER, over); mc.addEventListener(MouseEvent.ROLL_OUT, out); mc.addEventListener(MouseEvent.CLICK, click); var thumbUrl="thumbs/s"+i+".jpg"; loadThumb(mc); } //サムネイルのロード・配置 function loadThumb(mc):void { var thumbLoader = new Loader(); var urlReq:URLRequest=new URLRequest(thumbUrl); thumbLoader.load(urlReq); mc.addChild(thumbLoader); thumbLoader.contentLoaderInfo.addEventListener( Event.COMPLETE , loadedThumb); function loadedThumb():void { mc.rotationY=-45; if(mc.num<(videoNum-5)/2+1 || mc.num>(videoNum+5)/2) { mc.visible = false; } thumbContainer.x=10; thumbContainer.y=stage.stageHeight/2; } } //サムネイルのロールオーバー・アウト、クリックのイベント function over(event:MouseEvent):void { target_mc = event.target as MovieClip; target_mc.filters = [glow3]; var thumbTween=new Tween(target_mc,"rotationY",Regular.easeOut,-45,-30,0.3,true); titleBox.text = videoTitle[target_mc.num-1]; titleBox.setTextFormat(tFormat); myPlayer.source="video/v"+target_mc.num+".flv"; myPlayer.play(); event.target.over=true; } function out(event:MouseEvent):void { target_mc.filters = [glow2]; var thumbTween=new Tween(target_mc,"rotationY",Regular.easeOut,-30,-45,0.3,true); titleBox.text = ""; if (! target_mc.playon) { myPlayer.stop(); } event.target.over=false; } function click(event:MouseEvent):void { target_mc.playon=true; if (target_mc.over) { var tween1=new Tween(videoContainer,"rotationY",Regular.easeOut,videoContainer.rotationY,0,1,true); } c_btn.visible=controller.visible=true; } //ボタン類のイベント処理 c_btn.addEventListener(MouseEvent.CLICK, closeVideo); function closeVideo(event:MouseEvent):void { myPlayer.stop(); var tween2=new Tween(videoContainer,"rotationY",Regular.easeOut,videoContainer.rotationY,30,1,true); c_btn.visible=controller.visible=false; } d_btn.addEventListener(MouseEvent.CLICK, downThumbs); function downThumbs(event:MouseEvent):void { d_btn.removeEventListener(MouseEvent.CLICK, downThumbs); var thumbsy:Number=thumbContainer.y; if (thumbContainer.y < thumbContainer.height/2) { var tween3=new Tween(thumbContainer,"y",Regular.easeOut,thumbsy,thumbsy+78,1,true); } tween3.addEventListener(TweenEvent.MOTION_CHANGE, displayThumbs); tween3.addEventListener(TweenEvent.MOTION_FINISH, d_btnReActivation); } u_btn.addEventListener(MouseEvent.CLICK, upThumbs); function upThumbs(event:MouseEvent):void { u_btn.removeEventListener(MouseEvent.CLICK, upThumbs); var thumbsy:Number=thumbContainer.y; if (thumbContainer.y + thumbContainer.height/2>stage.stageHeight) { var tween4=new Tween(thumbContainer,"y",Regular.easeOut,thumbsy,thumbsy-78,1,true); } tween4.addEventListener(TweenEvent.MOTION_CHANGE, displayThumbs); tween4.addEventListener(TweenEvent.MOTION_FINISH, u_btnReActivation); } function d_btnReActivation(event:TweenEvent):void { d_btn.addEventListener(MouseEvent.CLICK, downThumbs); } function u_btnReActivation(event:TweenEvent):void {trace("q"); u_btn.addEventListener(MouseEvent.CLICK, upThumbs); } //サムネイルの表示・非表示設定 function displayThumbs(event:TweenEvent):void { for (var k:uint=1; k<=videoNum; k++) { var v_mc = MovieClip(thumbContainer.getChildByName("mc"+k)); if (thumbContainer.y+v_mc.y<0) { v_mc.visible=false; } else if (thumbContainer.y+v_mc.y>stage.stageHeight - 30) { v_mc.visible=false; } else { v_mc.visible=true; } } }
スクリプトの若干の説明

var glow1:GlowFilter=new GlowFilter(0xffffff,0.6,6,6,8,3,false);
 my
Player の縁取り枠。同様にサムネイルにも縁取りを行なっている。

videoContainer.addChild(myPlayer);
myPlayer.x=- videoWidth;
myPlayer.y=- videoHeight;
videoContainer.x=stage.stageWidth/2+videoWidth/2;
videoContainer.y=stage.stageHeight/2+videoHeight/2;
videoContainer.rotationY=30;

 myPlayerがステージ中央に台形配置され、かつ、右端を軸に回転がかかるように座標設定する。

function loadedThumb():void {
mc.rotationY=-45;
if (mc.y+thumbContainer.y>stage.stageHeight-20) {
 mc.visible=false;
} else if(thumbContainer.y+mc.y<0) {
 mc.visible=false;
}

 サムネイルをロードしたら、各サムネイルを rotaionY で左端(この場合)を軸に右(-45度)回転させて台形表示にする。
 中央5枚のサムネイルを表示し、上下にはみ出るサムネイルを非表示にする。

var tween1=new Tween(videoContainer,"rotationY",Regular.easeOut,videoContainer.rotationY,0,1,true);
 myPlayer を現在の回転角から右端を軸に回転角0に回転させ、四角形に戻す。

d_btn.removeEventListener(MouseEvent.CLICK, downThumbs);
tween3.addEventListener(TweenEvent.MOTION_FINISH, d_btnReActivation);

 d_btn クリックで一旦サムネイルの移動をできないようにしておき、移動(Tween)が終わったら、次の移動を可能にする。

 
flashirohaサイト内  Web全体 
HOME   お勉強総リスト