このFlash講座1234は,flashソフトを用いてflashアニメをスクリプトで制作し無料で公開したものです
FLASH講座 ーアクションスクリプトの実践的事始めー
活用編
(21)FLASH de 動画再生
        
 Webページで動画を再生するのに、WindowsメディアプレイヤーやQuickTimeあるいはReal Playerがポップアップするのは、何ともさえませんし、読み込みが長々と掛かるのもいただけません。

 最新FlashPlayerでは外部映像ファイルを読み込みながら再生する機能(擬似ストリーミング)が付いて、素早く再生が開始できるのと、プレイヤー画面のデザインも変えることができるので、動画はぜひFlashで見せたいものです。 ということで、その講座に早速取り掛かりたいのですが、まずは手始めとして、スクリプトは使わずに、メディアコンポーネントを使う方法のflash講座です。


 メディアコンポーネントには、MediaDisplay、MediaController、MediaPlaybackの三つが用意されている。
  MediaDisplay:単に動画スクリーンが表示されて、動画を再生させる。見る人には停止、再生などの制御は出来ない。
           とにかくシンプルに動画を見せるときに使う。
  MediaController:MediaDisplayのコントロール部として使う。再生、一時停止、最初に戻る、ボリュームコントロールなどが可。
  MediaPlayback:上記二つを組み合わせたもので、表示部、コントロール部が一体になっている。
 Display&Controllerの組み合わせを使うと、それぞれのサイズやデザインをカスタマイズできる。
 なお、これらのコンポーネントを使っても、スクリプトを追加することでいろいろ制御ができるようであるが、ここでは、単にコンポーネントを使う方法を示したい。
 flashストリーミングで使うFLVファイルについては、文末を参照のこと なお、flvファイルを使わずに、mpgやwmvファイルを埋め込みにする方法があるが、flashの読み込みが非常に遅くなるので、お勧めしない。
 なお、サンプル用のVideoClipはhttp://www.puntopower.com/から引用した。
Mediadisplay&MediaControllerの設定例
(1)幅300pix、高さ260pixの新規ドキュメントを開く
(2)コンポーネントウインドウからMediaDisplayをドラッグし、ステージにドロップする。x=0、y=0に設置
(3)コンポーネントインスペクターウインドウを開き、flvにチェック
(4)URLボックスに、flvファイルのパスとファイル名を入れる
   例では、同じホルダーにflashファイルとflvファイルがあるので、
   単に、punto2.flvと記入
   Automatically Playにチェックを入れる(自動再生)
   Use Preferred Media SizeとRespect Aspect Ratioのチェックをはずす
   (元ファイルに関係なくステージのMediaDisplayのサイズで表示される)
(5)コンポーネントウインドウからMediaControllerをドラッグし、
  MediaDisplayの下部にドロップする
  インスタンス名をcontrolとする(何でも良い)
  プロパティーでcontrollerPolicyをonに設定(見えるようにする)
(6)MediaDisplayを選択し、ビヘイビアウインドウでビヘイビアの追加ボタン(左上の十の字ボタン)をクリックし、「メディア」「コントローラを関連付ける」をクリック、開いたウインドウで、control、相対を選択する
MediaPlaybackの設定例
(1)から(4)までは、DisplayとControllerの組み合わせと全く同じ。ただし、この場合は、Automatically Play(自動再生)のチェックをはずしている

次いで、インスペクターウインドウで、
 Control Placementで、コントローラの位置を決める(例では、bottom)
 Control Visibilityで、コントローラを見えるようにするか(on)、
 マウスがのったときに表示するか(auto)、
 表示しないか(off)を決める。

これだけ!

アクションスクリプトでの設定例
 MX2004で外部 flv ファイルの制御のために追加された、NetConnectionNetStreamクラスを使った、動画の再生、制御の例を示しながら、勉強することにしたい。

(1)幅300pix、高さ275pixの新規ドキュメントを開く
(2)ライブラリウインドウの上部右隅をクリックして「新規ビデオ」をクリック
(3)ライブラリーに作成された「埋め込みビデオ1」をステージにドラッグしてドロップする
(4)プロパティーでx=0、y=0、w=300、h=190に設定しインスタンス名をvideoに設定
(5)最初に表示する画像(300*240)をステージ上部に設置し、シンボルに変換インスタンス名をphoto
(6)画像下部にビデオ再生ボタンを3個、STOPボタンを1個配置し、シンボルに変換する
(7)再生ボタンのインスタンスをそれぞれbtn1btn2btn3とし、STOPボタンをstpとする
(8)インスタンスphotoをダブルクリックし、タイムライン上でトゥイーンを作成
 Frame1→15:アルファ100→0 (Fade Out)
 Frame20→35:アルファ0→100 (Fade In)
 Frame1,15,35にstop();を記述
スクリプト(_rootに)
var count:Number=0;
var obj_nc:NetConnection=new NetConnection();
_root.obj_nc.connect(null);
var obj_ns:NetStream=new NetStream(obj_nc);
_root.video.attachVideo(obj_ns);
obj_ns.setBufferTime(3);

_root.btn1.onPress = mov1;
_root.btn2.onPress = mov2;
_root.btn3.onPress = mov3;
_root.stp.onPress = terminate;

function mov1() {
if (count<1){_root.photo.gotoAndPlay("2");}
_root.obj_ns.play("punto1.flv");
count++;
}

function mov2() {
if (count<1){_root.photo.gotoAndPlay("2");}
_root.obj_ns.play("punto2.flv");
count++;
}

function mov3() {
if (count<1){_root.photo.gotoAndPlay("2");}
_root.obj_ns.play("puntoteam.flv");
count++;
}

function terminate() {
_root.obj_ns.play("");
_root.photo.gotoAndPlay("20");
count=0;
}
countの定義 0に設定
ネットコネクションインスタンスobj_ncを生成
FLV再生用ローカル接続を開く
ネットストリームインスタンスobj_nsを生成
videoのソースにobj_nsを設定
バッファー時間3sec(ロード/再生のずれ防止)

btn1がクリックされたらfunction mov1を実施
btn2がクリックされたらfunction mov2を実施
btn3がクリックされたらfunction mov3を実施
stpがクリックされたらfunction terminateを実施


もし、countが1以下だったらphotoをFadeOut
obj_nsとしてpunto1.flvを再生
count値に1をたす



もし、countが1以下だったらphotoをFade Out
obj_nsとしてpunto2.flvを再生させる
count値に1をたす



もし、countが1以下だったらphotoをFadeOut
obj_nsとしてpuntoteam.flvを再生
count値に1をたす



obj_nsとして何も再生しない(止める)
photoをFade Inさせる
countを0に戻す
注)countは動画再生とは関係がない。静止画をFadeOut、FadeInさせるための指標にしていてcount=0のときに写真を消している
  2-5行のscriptは、サーバーにあるflvファイルの再生に必要な手続きと考え、そのまま、真似して使えば動きます。
FLVファイルの作り方
FLVファイルはFlash特有のファイルで、今のところ一般的ではないので、自分で変換して作成しなければならない。動画を埋め込んで再生する場合には、mpg,wmv,aviなどのファイルがそのまま使えるが、外部ファイルを読み込みながら再生するにはFLVファイルが必要となる。
mpgファイルなどからFLVファイルを作るもっとも簡単な方法は、Flash(2004以降)のライブラリーに読み込んで、ライブラリーで読み込まれたビデオファイルを右クリックし、プロパティーを選択、ウインドウで書き出しを選択すればFLVファイルとして書き出すことが出来る。
本稿で使ったFLVファイルは、フリーソフトのRiva FLV Encoder(http://rivavx.de/)を使って変換した。こちらの方が画質がいいように感じたからである。
もっとFlashでの動画再生が盛んになれば(間違いなく盛んになる)、いろいろなソフトが登場し、FLVがメジャーのフォーマットになっていくのではなかろうか。
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 このサイトで使用しました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講座総リスト    アクションスクリプトの実践的事始め-活用編(22)