Flash AS3.0 覚書 ダイナミックテキスト、マウスイベントなど

直接動画再生には関係ありませんが、動作確認するのにマウス操作で動画を再生したり、状態を表示させることにします。

●ダイナミックテキスト

スクリプトから動的に書き換えができるテキストオブジェクトで、文字をステージ上に追加する場合、追加する際、または追加したあとにプロパティを設定することで、ダイナミックテキストとなります。このテキストオブジェクトにもインスタンス名が付けられます。たとえば、”stsText”という名前を付けるとします。
※ダイナミックテキストを配置する際は、フォントを埋め込む必要があります。

文字内容を変更する場合は、textプロパティを書き換えます。

stsText.text = "PLAY";

のようにします。

●数値を文字列に変換して表示

文字列変換にはtoStrong()メソッドを使います。おそらく、引数で書式が設定できると思いますが、まだそこまでは調べていません。

var count:int;    // int型の変数

count = 10;
stsText.text = count.toString();       // 数値を文字列として表示
stsText.text = (count + 1).toString(); // こういうことも可能

●マウスイベント

四角形や丸などのシェイプを描いて、シンボルに変換し、タイプを「ボタン」に設定して、名前を”btnPlay1″にしたものをステージに配置してあるものとします。

このボタンをマウスでクリックした際にイベントを発生させて、スクリプト側でそれを検知して何等かの処理をさせたいわけですが、ここでもイベントリスナを登録しておく必要があります。以下のようにします。

import flash.events.MouseEvent;    // イベントコンポーネント

// イベントリスナ(ハンドラ)の登録
btnPlay1.addEventListener(MouseEvent.CLICK, onClickPlay);

// ハンドラ
function onClickPlay(evt:MouseEvent):void{
    mov1.play();          // 動画再生開始
    stsText.text="PLAY";  // ステータス更新
}

“btnPlay1″ボタンがクリックされると、再生が始まり、同時にステータス表示が”PLAY”に書き換わります。
停止ボタン、一時停止ボタンなども同様にして実装すれば、メディプレーヤのようになります。

●総合

これまでのことを全部組み合わせたコードを以下に示します。

ボタンは”PLAY”、”PAUSE”、”STOP”、”CHANGE”の4つ配置してあります。”CHANGE”ボタンをクリックするとムービが切り替わります。ムービファイルは5つあります。
また、状態を表示するダイナミックテキストは”stsText”, “fileName”, “numText”の3つを配置しています。

// 15/03/24 T.N
import flash.events.MouseEvent;
import fl.video.*;

var sel:int;
sel = 0;

mov1.autoRewind = true;
mov1.autoPlay = false;

// 動画の登録
//mov1.activeVideoPlayerIndex = 0;
//mov1.source = "myClip1.mp4";
fileName.text = mov1.source;

mov1.activeVideoPlayerIndex = 1;
mov1.source = "myClip2.mp4";

mov1.activeVideoPlayerIndex = 2;
mov1.source = "myClip3.mp4";

mov1.activeVideoPlayerIndex = 3;
mov1.source = "myClip4.mp4";

mov1.activeVideoPlayerIndex = 4;
mov1.source = "myClip5.mp4";

mov1.activeVideoPlayerIndex = 0;
mov1.visibleVideoPlayerIndex = 0;

btnPlay1.addEventListener(MouseEvent.CLICK, onClick);
btnPause1.addEventListener(MouseEvent.CLICK, onClick2);
btnStop1.addEventListener(MouseEvent.CLICK, onClick3);
btnChange.addEventListener(MouseEvent.CLICK, onClick4);

// 再生完了時のイベントリスナ
mov1.addEventListener(fl.video.VideoEvent.COMPLETE, onMovieEnd);

// 再生完了時のハンドラ
function onMovieEnd(evt:fl.video.VideoEvent):void {
    stsText.text="END";
}

sts.text="PLAY";

// PLAYボタン
function onClick(evt:MouseEvent):void{
    mov1.play();
    stsText.text="PLAY";
}

// PAUSEボタン
function onClick2(evt:MouseEvent):void{
    mov1.pause();
    stsText.text="PAUSE";
}

// STOPボタン
function onClick3(evt:MouseEvent):void{
    mov1.stop();
    stsText.text="STOP";
}

// CHANGEボタン
function onClick4(evt:MouseEvent):void{
    mov1.stop();    // 現在の動画の再生を停止

    sel = (sel + 1) % 5;    // インデックス更新

    // ムービ切り替え
    mov1.activeVideoPlayerIndex = sel;
    mov1.visibleVideoPlayerIndex = sel;

    // 動画番号、ステータス表示更新
    numText.text = (sel + 1).toString();
    stsText.text = "STOP";
    // ファイル名表示更新
    fileName.text = mov1.source;
}

●プロジェクタの生成

ブラウザ埋め込みでなく、スタンドアロンのアプリケーションとしてexeファイルで作成したい場合、プロジェクタを作成します。

方法は簡単で、Flashアプリの メニューの「コマンド」ー「プロジェクタとして書き出し」を実行します。

この操作によりexeファイルが生成されますので、動画ファイルと一緒に配布すれば実行形式のアプリケーションとなります。Flashプレーヤなどは必要ありません。

●そのほかの切り替え方法

動画を複数持たせるのではなく、その都度、”source”プロパティを変更して動画ファイルを設定する方法もあります。この場合は切り替えに少し時間がかかるかもしれませんが、プレーヤを1つにできるので、メモリ消費は減るでしょう。
記述していませんが、最初はフレームごとに動画をおいてヘッドを動かすことで切り替えるようなやり方も試しました。用途によって使い分ければいいでしょう。

コメントは受け付けていません。