flashiroha

(93) 複数動画のサムネイル表示とそのクリックによる動画選択・再生(as3.0&2.0)  
    −FLVPlayback使用−    2009/9/24 

as3.0
as2.0

import fl.video.*;
//videoのファイル名、題名、説明文を配列で定義
var videoSource:Array = new Array("video1.flv", "video2.flv", "video3.flv", "video4.flv", "video5.flv", "video6.flv", "video7.flv", "video8.flv", "video9.flv", "video10.flv");
var videoTitle:Array = new Array("お神輿1","お神輿2","お神輿3","お神輿4","お神輿5","お囃子1","お囃子2","お神輿5","お囃子1","お囃子2");
var videoContent:Array = new Array("ここに説明文が入ります",
"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb",
"cccccccccccccccccccc",
"ddddddddddddddddddddddddd",
"ffffffffffffffffffffffffffffffffffffffffffff",
"ggggg",
"hhhhhhhhhhh",
"iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii",
"jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj",
"kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk");
var videoNum:Number = videoSource.length;

//メインになるFLVPlayer(myPlayer)の設定
var mainPlayer:FLVPlayback = new FLVPlayback();
mainPlayer.skin = "ClearExternalAll.swf";
mainPlayer.skinBackgroundColor = 0x999999;
mainPlayer.x = mainPlayer.y = 10;
mainPlayer.source = "video/"+videoSource[0];
mainPlayer.autoPlay = false;
mainPlayer.volume = 0.5;
mainPlayer.bufferTime = 0;
addChild(mainPlayer);

//サムネイルスクロール用スライドバー
var slideB:slideBar = new slideBar();
slideB.x = 450;
slideB.y = 20;
var rec = new Rectangle(3,20,0,260);
slideB.knob.buttonMode = true;
addChild(slideB);

//ビデオ情報表示用テキストボックス
var infoBox:TextField = new TextField();
with(infoBox) {
  x = 20;y = 300;width = 300;height = 60;
}
infoBox.text = "VIDEO TITLE:   "+videoTitle[0]+"\n "+videoContent[0];
addChild(infoBox);

//サムネイル表示域制限用マスク
var maskRec:mask_rec = new mask_rec();
with(maskRec) {
  x=10; y=10; width=450; height=320;
}
this.mask = maskRec;

//サムネイル表示とマウスイベント処理
for (var i:uint=1; i<=videoNum; i++) {
  var thumb_mc:MovieClip = new MovieClip();
  addChild(thumb_mc);
  var flvP:FLVPlayback = new FLVPlayback();
  flvP.skin = null;
  flvP.source = "video/"+videoSource[i-1];
  flvP.autoPlay = false;
  thumb_mc.name = "thumb"+i;
  thumb_mc.addChild(flvP);
  with (thumb_mc) {
    x = 350;
    y = 10+65*(i-1);
    scaleX = scaleY = 0.25;
    alpha = 0.5;
  }
  thumb_mc.num = i;
  thumb_mc.buttonMode = true;
  thumb_mc.addEventListener(MouseEvent.ROLL_OVER, rollover);
  thumb_mc.addEventListener(MouseEvent.ROLL_OUT, rollout);
  thumb_mc.addEventListener(MouseEvent.CLICK, playStart);
}
function rollover(event:MouseEvent):void {
  event.target.alpha = 1.0;
}
function rollout(event:MouseEvent):void {
  event.target.alpha = 0.5;
}
//サムネイルのクリックで該当ビデオの再生とビデオ情報の表示
function playStart(event:MouseEvent) {
  infoBox.text = "VIDEO TITLE:   "+videoTitle[event.target.num-1]+ "\n"+videoContent[event.target.num-1];
  mainPlayer.source = "video/"+videoSource[event.target.num-1];
  mainPlayer.play();
}
//スライダーノブのイベント処理
function StartDrag(event:MouseEvent):void {
  slideB.knob.startDrag(true, rec);
}
slideB.knob.addEventListener(MouseEvent.MOUSE_DOWN, StartDrag);
function StopDrag(event:MouseEvent):void {
  slideB.knob.stopDrag();
}
stage.addEventListener(MouseEvent.MOUSE_UP, StopDrag);
stage.addEventListener(MouseEvent.MOUSE_OUT, StopDrag);
function slideThumb(event:MouseEvent):void {
  for (i=1; i<=videoNum; i++) {
    var mc:MovieClip=MovieClip(getChildByName("thumb"+i));
    mc.y = 10+65*(i-1) - 65*(videoNum-5)*(slideB.knob.y-20)/260;
  }
}
slideB.knob.addEventListener(MouseEvent.MOUSE_MOVE, slideThumb);


import mx.video.*;

var videoSource:Array = new Array("video1.flv", "video2.flv", "video3.flv", "video4.flv", "video5.flv", "video6.flv", "video7.flv", "video8.flv", "video9.flv", "video10.flv");
var videoTitle:Array = new Array("お神輿1","お神輿2","お神輿3","お神輿4","お神輿5","お囃子1","お囃子2","お神輿5","お囃子1","お囃子2");
var videoContent:Array = new Array("ここに説明文が入ります",
"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb",
"cccccccccccccccccccc",
"ddddddddddddddddddddddddd",
"ffffffffffffffffffffffffffffffffffffffffffff",
"ggggg",
"hhhhhhhhhhh",
"iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii",
"jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj",
"kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk");
var videoNum:Number = videoSource.length;

this.attachMovie("FLVPlayback","mainPlayer",0,{ _width:320, _height:240, _x:10, _y:10});
mainPlayer.skin = "ClearExternalAll.swf";
mainPlayer.contentPath = "video/"+videoSource[0];
mainPlayer.autoPlay = false;
mainPlayer.volume = 50;
mainPlayer.bufferTime = 0;





this.attachMovie("slideBar", "slideBar", 90, {_x:450, _y:20} );






this.createTextField("infoBox",20,20,300,300,60);
infoBox.multiline = true;
infoBox.text = "VIDEO TITLE:   "+videoTitle[0]+"\n "+videoContent[0];





this.attachMovie("mask_rec","mask_rec",100,{ _width:450, _height:320,_x:10, _y:10});
this.setMask(mask_rec);





for (i=1; i<=videoNum; i++) {
  thumb_mc = this.attachMovie("FLVPlayback", "thumb"+i, i, {_x:350, _y:10+65*(i-1)});
  with (thumb_mc) {
    _xscale = _yscale=25;
    skin = null;
    contentPath = "video/"+videoSource[i-1];
    autoPlay = false;
  }
  thumb_mc._alpha = 50;
  thumb_mc.num = i;
  thumb_mc.onRollOver = rollover;
  thumb_mc.onRollOut = rollout;
  thumb_mc.onRelease = playStart;
}






function rollover() {
  this._alpha = 100;
}
function rollout() {
  if (this.num != currentNum) {
    this._alpha = 50;
  }
}
function playStart() {
  infoBox.text = "VIDEO TITLE:   "+videoTitle[this.num-1]+"\n "+videoContent[this.num-1];
  mainPlayer.contentPath = "video/"+videoSource[this.num-1];
  mainPlayer.play();
  for (i=1; i<videoSource.length; i++) {
    _root["thumb"+i]._alpha = 50;
  }
  currentNum = this.num;
  _root["thumb"+currentNum]._alpha = 100;
}
slideBar.onPress = function() {
  this.knob.startDrag(true,3,20,3,280);
  onEnterFrame = function () {
    for (i=1; i<=videoNum; i++) {
      _root["thumb"+i]._y = 10+65*(i-1) - 65*(videoNum-5)*(slideBar.knob._y-20)/260;
    }
  }
}
slideBar.onRelease = function() {
  stopDrag();
  delete onEnterFrame;
};
slideBar.onReleaseOutside = function() {
  stopDrag();
  delete onEnterFrame;
};

 

スクリプトの若干の説明:
var videoSource:Array = new Array("video1.flv",
 以下、ソースflvファイル、video題目、内容の説明などを配列で定義している。 もっと説明文を記述したい時などには、これら情報を xml ファイルに記述し、それを読み込んで表示するようにした方がbetter。
var thumb_mc:MovieClip = new MovieClip(); ・・・・thumb_mc.addChild(flvP);
 as3.0ではFLVPlaybackをそのままムービークリップインスタンスのようには扱えないので、FLVPlaybackインスタンスをムービークリップにaddChildする。 as2ではattachMovieすることでムービークリップインスタンスとして扱える。
this.mask = maskRec;
 as2.0では、this.setMask(mask_rec);

 
flashirohaサイト内  Web全体