Pex Textbook 1.1.0 documentation

swf の再生タイミングをコントロールしよう

«  swf を 管理するクラスを作ろう   ::   Contents   ::   シーンの情報を設定しよう  »

swf の再生タイミングをコントロールしよう

Pex にオプションを指定して, 再生タイミングを制御できるようにします.

デモサンプル

../_images/talk_step02.png

Link: こちら

コード

(function() {

    var TALK_SWF = "swf/talk.swf";

    var TalkManager = function() {
        var that = this;

        // swf を読み込む
        var canvas = document.getElementById("canvas");
        var option = {
            stopOnStart: true,
            enableTouch: true,
            enableButton: true
        };
        this._pex = new Pex(TALK_SWF, canvas, option);
        this._api = this._pex.getAPI();
        this._api.ready(function() {
            that.onready && that.onready();
        });
    };
    TalkManager.prototype = {
        // 準備完了時コールバック
        onready: function() {
            this.start();
        },
        // swf 再生
        start: function() {
            this._api.engineStart();
        },
        // swf 停止
        stop: function() {
            this._api.engineStop();
        },
    };

    var main = function() {
        var talkmanager = new TalkManager();
    };

    window.addEventListener("DOMContentLoaded", main, false);

})();

解説

Pex は, デフォルトの設定だと swf を読み込み終わったタイミングで 自動的に再生されます.

ただ, 最初は停止していて特定のタイミングで再生させたりといった コントロールが必要な場面というのが多々あるかと思います.

そういうときは, Pex の生成時オプションに stopOnStart を指定することで 勝手に再生されないようにすることができます.

var option = {
    stopOnStart: true,
    enableTouch: true,
    enableButton: true
};
this._pex = new Pex(TALK_SWF, canvas, option);

この場合の注意点としては, ロード後に 再生したいタイミングで api の engineStart を実行する必要があります.

今回作成するサンプルではロードが終わったタイミングで 再生を開始するようになっています.

this._api = this._pex.getAPI();
this._api.ready(function() {
    THIS.onready && THIS.onready();
});
start: function() {
    this._api.engineStart();
},

次回でやっと見た目が変わります. Pex API の setVariable メソッドを使って swf 内の変数との連携を行います.

«  swf を 管理するクラスを作ろう   ::   Contents   ::   シーンの情報を設定しよう  »