Pex Textbook 1.1.0 documentation

画像の差し込み/置換を行う

«  変数を外部から設定する   ::   Contents   ::   テキストを着色する  »

画像の差し込み/置換を行う

ここでは、画像の差し込み/置換を行う方法についてまとめます。

Pex には SWF を構成する MovieClip を指定された画像と動的に置換するための機能があります。

従来 Flash コンテンツで画像を入れ替える際はサーバ側で合成を行うことが多かったと思いますが、 アクセスの度に動的に SWF をパッケージングする手法はブラウザから見てキャッシュの活用が難しく、 また Pex や ExGame のような SWF をデコードするライブラリから見ると画像のデコードと再エンコードという 極めて重い処理が付帯することになり、サクサク感を削ぐ大きな原因となってきました。

ここで紹介する画像の動的置換は、Pex を使っていく上で頻度高く使われるであろう重要な機能のひとつです。

上記のように読み込み速度を大幅に向上させるだけでなく、 例えば会話シーンのような汎用的な SWF テンプレートを作成し様々な場面で使い回す、 SWF と画像を別管理してデバイスや再生解像度に合わせた画像を配信することでファイル転送量を削減する、 といった様々な応用も可能です。

本項を是非、お役立てください。

方法1: API のreplaceMovieClip()を用いる

Pex の API に対して、replaceMovieClip() メソッドを実行してください。

pex.getAPI().replaceMovieClip("mc名",image参照,横幅,縦幅,アスペクト比の保存をするか);

※設定するのは MovieClip のパスでもシンボル名でもなく、タイムラインに配置されている インスタンス名 です。

タイムライン上の違う場所に配置されている別シンボルの MovieClip も、同じインスタンス名であれば置換処理されるので インスタンス名の設定には注意してください。

方法2: Option の replace 設定を用いる

Pex の起動オプションに ”replace” という名前で配列を加え、同様の設定を行う事もできます。

{//以下はPexのオプション引数内の一部
        "replace": [
                {
                        "name": "mc1",
                        "width": 32,
                        "height": 32,
                        "img": image1,
                },
                {
                        "name": "mc2",
                        "width": 64,
                        "height": 64,
                        "img": image2,
                }
        ]
}

詳細は API ドキュメントも参照してください。

サンプル例

実際に replace の設定と API 操作を行うサンプル例は以下です。 どのように見た目が変化するか確認してみてください。

_images/replaceMovieClip.png

動作サンプル: replaceMovieClip.html

flaファイル: replaceMovieClip.fla

共通の注意点

  • 画像の読み込みが終わっていない場合は、 MovieClip の置換結果は画面に反映されません。プリロードを行うなど、適切な対応を行ってください。
  • 横幅、縦幅の指定は片方の指定でも動作しますが、両方指定する事を推奨します。
  • 横幅、縦幅ともに指定しない場合は、画像から得られる width, height が適用されます( Pex 1.0.7 より)。

補足

置換された画像の基準点は左上がデフォルトとなります。画像の左上が Movieclip 座標の (0,0) を示すことになります。

Pex 1.0.7 より、 この基準位置が引数で指定できるようになりました。 例えば画像の中心点を座標 (0,0) に持ってきたりする事ができます。 また API によって事前/事後に基準点を指定することも可能です。 詳しくは API リファレンスを参照してください。

«  変数を外部から設定する   ::   Contents   ::   テキストを着色する  »