Pex Textbook 1.1.0 documentation

SWF を再生する

«  はじめに   ::   Contents   ::   動作サンプルの fla ファイルについて  »

SWF を再生する

まずは、 SWF ムービーを単純に再生するまでの処理を見てみます。

html の用意

Pex で SWF を再生する最も簡単なコードは以下になります。

<!DOCTYPE html>
<html>
<body>
<canvas id="canvas"></canvas>
<script src="pexall.js"></script>
<script>
   var pex = new Pex("welcome.swf",canvas);
</script>
</body>
</html>

実際には meta タグや head タグの記述・ css や JS のロードタイミングの考慮なども入ってくるためもっと長いコードになりますが、 非常に簡潔な記述でSWFが再生できる事がわかると思います。

サンプル例

実際に上記ソースに近い物が動いているサンプルは以下です。 Pex の世界への扉を開けてみましょう。。。

_images/welcome.png

動作サンプル: pexplay.html

基本的な option の設定

Pex のインスタンスを作る際の3番目の引数には、再生時の挙動を決める様々なパラメータを設定する事ができます。 具体的な内容については後のページで見ていくので、まずは最も基本的なパラメータ例を確認してみましょう。
var option = {
   "enableButton": true,
   "enableTouch": true,
   "transparent": true
};
var pex = new Pex("welcome.swf",canvas,option);

上記設定は、SWF 内のボタンアクションを有効にし背景色を透明にするものです。

この設定を試してみて、実際に背景が透過するか・SWF 内のボタンが反応するかなど、それぞれ確認してみましょう。

(オプションに関しては、API ドキュメント側により詳細な解説があるので、そちらも参照してください。)

最適化オプションについて

Pex では最適な描画速度を得るためには、再生対象となる SWF や MovieClip の特性に合わせてオプションを設定する必要があります。

現状で次に示す設定が最も汎用的かつ高速な描画速度を期待できるものです。 まず下記オプションを基点に調整をかけていくことをお勧め致します。

var option = {
   "partialDraw":true, "shapeDetail": { "all": { "method":"cache" }}
};

それぞれのオプション項目についての詳細は 画質、描画速度を最適化する、もしくは API ドキュメントをご覧ください。

«  はじめに   ::   Contents   ::   動作サンプルの fla ファイルについて  »