FLASH講座1234_アクションスクリプトaction script

この講座は,flashソフトを用いてflashアニメをスクリプトで制作し無料で公開したものです。

FLASH講座　ーアクションスクリプトの実践的事始めー
活用編
(22) 動画（ビデオ）ビューアー　　

　複数の動画（ｆｌｖファイル）をアルバム形式でサムネイル表示しておき、ロールオーバーで再生開始、リリースで拡大するタイプのビューアーを作成してみました。

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

SAMPLE

videoをクリックしてみてください…

ステージの準備

●550*450、背景色黒のステージ（12fps）を設定
●ライブラリーウインドウで、右クリックし、「新規ビデオ」でvideoと命名し、ビデオ（ action script制御）にチェックを入れる
●再生するｆｌｖファイルを、同じフォルダに入れておく。ここでは、５つの花火のビデオを格納した。
　ここで用いたビデオは、長岡花火大会2006のサイト（http://fururun365.hp.infoseek.co.jp/）からwmvファイルをダウンロードさせていただき、ウィンドウズムービーメイカーで編集後、flvに変換した。
　なお、各種ムービーは、同じフォルダに別flashファイルを作成してビデオの読み込みを実施すると、同フォルダにｆｌｖファイルが作成される。
●「挿入」「新規シンボル」でscと命名し、ふちなし矩形（80*60、塗りのアルファ=0）とそれを囲むように、矩形枠線（82*62、白）を描く。
●「挿入」「新規シンボル」でsc1と命名し、ビデオ名のテキスト（ここではVIDEO1）、ｓｃ、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)