●768*432、24ｆｐｓのステージを設定。 背景色は好みで。
●コンポーネントウインドウから、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 とし、サムネイル下送りボタンを作成した。
●ｓｗｆファイルと同じディレクトリに thumbs フォルダを置き、その中にサムネイル用画像(140*75, s1.jpg, sp2.jpg,,,,,)を格納しておく。
●ｓｗｆファイルと同じディレクトリに video フォルダを置き、その中に再生する flv ファイル(768*432, v1.flv, v2.flv,,,,)を格納しておく。
ここでは、YouTube の、吉田由利子さんの動画シリーズ(http://www.youtube.com/user/yoshidayuriko?feature=results_main)を拝借しています。
|
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;
//サムネイルのイベント時ＭＣ
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);
//サムネイル収納用ＭＣ
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);
//動画表示用ＭＣ
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);
myPlayer の縁取り枠。同様にサムネイルにも縁取りを行なっている。
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）が終わったら、次の移動を可能にする。
|
