Pex Textbook 1.1.0 documentation

swf を Pex で表示してみよう

«  Pex で会話シーンを作ろう   ::   Contents   ::   swf を 管理するクラスを作ろう  »

swf を Pex で表示してみよう

まずはじめにベースとなる HTML と, swf を pex で読み込んで表示するコードを書いていきます.

デモサンプル

../_images/talk_step00.png

Link: こちら

コード

最初に書くひな形となるコードです.

この Step 以降は script タグ内のコードのみ を修正していくので次回以降の Step は script タグ内のコードのみを 掲載します.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
    <head>
        <title>talk</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css" media="screen">
        html, body { height:100%; background-color: #666666;}
        body { margin:0; padding:0; overflow:hidden; }
        #flashContent { width:100%; height:100%; }
        </style>
    </head>
<body>
<div id="container">
    <canvas id="canvas"></canvas>
    <noscript>
        JavaScript を有効にしてご利用ください
    </noscript>
</div>

<script src="js/pexall.js" defer="defer"></script>
<script src="js/talkdata.js" defer="defer"></script>
<script type="text/javascript" defer="defer">

(function() {

    var TALK_SWF = "swf/talk.swf";

    var main = function() {
        // swf を読み込む
        var canvas = document.getElementById("canvas");
        var option = {
            enableTouch: true,
            enableButton: true
        };
        this._pex = new Pex(TALK_SWF, canvas, option);
    };

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

})();

</script>

</body>
</html>

解説

特に難しいことは行っていません.

swf 用の canvas 要素の作成と Pex による swf の再生を行っています.

実際に swf を読み込んで再生している部分は下記のコードになります.

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

Pex クラスを使うことで画面上に swf を表示, 再生することができます.

Pex の引数

  • swf ファイルのパス
  • swf を表示させたい canvas 要素
  • オプション

今回オプションにはタッチを有効にする enableTouch と ボタンを有効にする enableButton を指定しています.

また, ここで読み込んでいる talkdata.js はトーク用の情報をまとめた JSON データが入っています. これは以降の step で使用するので気にしないでください.

次回は, Pex を制御するためのクラスを作っていきます.

«  Pex で会話シーンを作ろう   ::   Contents   ::   swf を 管理するクラスを作ろう  »