この講座は,flashソフトを用いてflashアニメをスクリプトで制作し無料で公開したものです。
FLASH講座 ーアクションスクリプトの実践的事始めー
活用編
(22) 動画(ビデオ)ビューアー
  
 複数の動画(flvファイル)をアルバム形式でサムネイル表示しておき、ロールオーバーで再生開始、リリースで拡大するタイプのビューアーを作成してみました。

 動画のビューアーとしての機能を、どのようにすればよいか迷うところですが、一応出来上がったので、今回の受講材料としてみます。(FLASH PLAYER 8 以上向け)
SAMPLE

videoをクリックしてみてください…
ステージの準備
●550*450、背景色黒のステージ(12fps)を設定
●ライブラリーウインドウで、右クリックし、「新規ビデオ」でvideoと命名し、ビデオ( action script制御)にチェックを入れる
●再生するflvファイルを、同じフォルダに入れておく。ここでは、5つの花火のビデオを格納した。
 ここで用いたビデオは、長岡花火大会2006のサイト(http://fururun365.hp.infoseek.co.jp/)からwmvファイルをダウンロードさせていただき、ウィンドウズムービーメイカーで編集後、flvに変換した。
 なお、各種ムービーは、同じフォルダに別flashファイルを作成してビデオの読み込みを実施すると、同フォルダにflvファイルが作成される。
●「挿入」「新規シンボル」でscと命名し、ふちなし矩形(80*60、塗りのアルファ=0)とそれを囲むように、矩形枠線(82*62、白)を描く。
●「挿入」「新規シンボル」でsc1と命名し、ビデオ名のテキスト(ここではVIDEO1)、sc、videoをこの順に上にくるように重ねる。videoはインスタンス名をmovieとし、サイズを80*60とする。
●以下同様に、sc2,,sc5を作成する。movieは各シンボルに同じ名前でよい。
●FRAME1及びFRAME15にキーフレームを挿入する。FRAME1には、定義項目と、videoのサムネイル登場用のスクリプトを書き、FRAME15にはロールオーバー効果と、拡大させて登場させるスクリプトを以下のように書き込む。
スクリプト_root、FRAME1に記述
var sc:Array = new Array();
var video:Array = new Array();
var obj_nc:NetConnection = new NetConnection();
_root.obj_nc.connect(null);
var obj_ns:NetStream = new NetStream(obj_nc);
var movie_n = 5;
var delay0 = 150;
for (i=1; i<=movie_n; i++) {
        sc[i] = attachMovie("sc"+i, "sc"+i, i);
        sc[i]._x = 115+80*(i-1);
        sc[i]._y = 25;
        sc[i].targetx = 75+100*(i-1);
        sc[i].targety = 75;
        sc[i]._yscale = 0;
        movieThumb(i);
}
function movieThumb(n) {
        sc[n].interval = function() {
                clearInterval(sc[n].ID);
                sc[n].onEnterFrame = function() {
                        this._yscale += (100-this._yscale)/2;
                        this._x += (this.targetx-this._x)/2;
                        this._y += (this.targety-this._y)/2;
                };
                
        };
        sc[n].ID = setInterval(sc[n], "interval", n*delay0);
}
スクリプトの説明
var obj_nc:NetConnection = new NetConnection();
 _root.obj_nc.connect(null);
 var obj_ns:NetStream = new NetStream(obj_nc);

  ネットコネクションインスタンスobj_ncを生成
  FLV再生用ローカル接続を開く
  ネットストリームインスタンスobj_nsを生成
  FLASHでの動画再生については、「(20)FLASH de 動画再生」を参照のこと
var delay0 = 150;
  videoのサムネイルが登場するときに付ける時間差(ミリ秒)
movieThumb(i);
  各ムービークリップsc[i]について、関数movieThumb()を実行する
sc[n].interval = function() {
  各ムービークリップについて、関数intervalを定義する
sc[n].ID = setInterval(sc[n], "interval", n*delay0);
  ムービークリップsc[n]の関数intervalをdelay0の間隔で順次実行する
  clearInterval(sc[n].ID);は、該当ムービークリップの関数の実行を1回こっきりにするためにクリヤーする
スクリプト_root、FRAME15に記述
for (i=1; i<=movie_n; i++) {
        sc[i] = attachMovie("sc"+i, "sc"+i, i);
        sc[i]._x = 75+100*(i-1);
        sc[i]._y = 75;
        sc[i].num = i;
        sc[i].onRollOver = rollover;
        sc[i].onRollOut = rollout;
        releaseExpsn(sc[i], i);
}
function rollover() {
        if (this._xscale<135) {
                obj_ns.close();
                n = this.num;
                this.movie.attachVideo(obj_ns);
                obj_ns.setBufferTime(3);
                $video = "hanabi"+n+".flv";
                obj_ns.play($video);
                this.onEnterFrame = function() {
                        this._xscale += (130-this._xscale)/3;
                        this._yscale += (130-this._yscale)/3;
                };
        }
}
function rollout() {
        if (this._xscale<135) {
                obj_ns.close();
                this.onEnterFrame = function() {
                        this._xscale += (100-this._xscale)/3;
                        this._yscale += (100-this._yscale)/3;
                };
        }
}
function releaseExpsn(mc, i) {
        mc.onRelease = function() {
                flag = i;
                mc.onEnterFrame = function() {
                        if (flag == i) {
                                this._x += (290-this._x)/3;
                                this._y += (285-this._y)/3;
                                this._xscale += (500-this._xscale)/3;
                                this._yscale += (500-this._yscale)/3;
                        } else {
                                this._x += (75+100*(i-1)-this._x)/3;
                                this._y += (75-this._y)/3;
                                this._xscale += (100-this._xscale)/3;
                                this._yscale += (100-this._yscale)/3;
                        }
                };
        };
}
stop();
スクリプトの説明
●function rollover() {
  ビデオのサムネイルがロールオーバーされたら、1.3倍に拡大する関数
this.movie.attachVideo(obj_ns);
  obj_ns.setBufferTime(3);
  $video = "hanabi"+n+".flv";
  obj_ns.play($video);

  ムービークリップ(sc[n])のvideo表示ウインドウ(インスタンス名movie)にobj_nsをアタッチし、
  ファイル$videoを再生する
function rollout() {
  ビデオのサムネイルがロールアウトされたら、1.0倍に縮小し、ビデオの再生を止める(obj_ns.close();)関数
function releaseExpsn(mc, i) {
  サムネイルがクリックされたら、画面サムネイル下部に移動し、5倍に拡大表示する関数
  クリックされていない番号の拡大表示画面は、サムネイルの大きさに戻る(else以降)
stop();
  フレーム移動を止める
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 このサイトで使用しましたflashソフトはflash mx 2004年版(Flash Japan)- flash8 及び FlashCS3-2007年版です。
 flash講座(フラッシュ講座)は、Yoshioka氏(通称、ひげ親父)による制作です。 コツコツと作られたflash素材(flashアニメ、スクリプト)はユーザーの方により保存変更され動画flash(動画フラッシュ)や携帯flash(待受flash)として利用されて来ました。
 氏は、flashスクリプトについての学習を、パソコン塾講師活躍中に始められ、独立した今も続けておられます。 
  macromedia flashソフトは新しくadobe flash時代に入りましたので、これを機会にflash学習サイトを「flash講座1234」としてリニューアルいたしました。 引き続きご愛顧承りますよう、よろしくお願いいたします。                                                                           (by Hiraoka)
HOME   Flash講座総リスト    アクションスクリプトの実践的事始め-活用編(1)