Pex Textbook 1.1.0 documentation

シーンの情報を設定しよう

«  swf の再生タイミングをコントロールしよう   ::   Contents   ::   読み込んだ画像を swf 内に表示してみよう  »

シーンの情報を設定しよう

今回は, swf 内の変数を JavaScript 側から設定して 表示するメッセージを制御します.

デモサンプル

../_images/talk_step03.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.setup();
            this.start();
        },
        // swf 再生
        start: function() {
            this._api.engineStart();
        },
        // swf 停止
        stop: function() {
            this._api.engineStop();
        },
        // セットアップ
        setup: function() {
            // 情報をセットアップ
            this._setupData("scene");
            this._setupData("serif");
            this._setupData("name");
        },

        _setupData: function(type) {
            var dataList = TALK_DATA[type];
            for (var i=0,len=dataList.length; i<len; ++i) {
                var key = type + (i+1);
                var value = dataList[i] || "";
                this._api.setVariable("", key, value);
            }
        },
    };

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

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

})();

解説

Pex では swf 内の変数を Pex API 経由でアクセスすることができます.

今回使用している swf は, 変数でシーケンンスや表示するメッセージを 設定することができます.

早速設定してみましょう.

onready: function() {
    this.setup();
    this.start();
},
// セットアップ
setup: function() {
    // 情報をセットアップ
    this._setupData("scene");
    this._setupData("serif");
    this._setupData("name");
},

_setupData: function(type) {
    var dataList = TALK_DATA[type];
    for (var i=0,len=dataList.length; i<len; ++i) {
        var key = type + (i+1);
        var value = dataList[i] || "";
        this._api.setVariable("", key, value);
    }
},

setVariable の引数は

  • path ... 対象となるムービークリップのパス
  • key ... 設定したい変数名
  • value ... 設定する値

を指定します.

メッセージが表示されたのがわかるかと思います. また, シーケンス情報も設定しているので, タッチすると設定した情報に 応じて画面が遷移します.

次回で最後です. swf 内の画像を JavaScript 側から差し替えていきます.

«  swf の再生タイミングをコントロールしよう   ::   Contents   ::   読み込んだ画像を swf 内に表示してみよう  »