戻る


ウェブサイトへの設置

APuzzle.swfとパラメータxmlファイル、その他リソースをウェブサーバにアップロードし、 設置対象のhtmlファイルを書き換えます。 全てのファイルは同じドメインに置いてください。 動画を使用する場合のみクロスドメインを使用することができます。 その他の形式はクロスドメイン未対応です。 パラメータxmlファイルやhtmlの記述はsampleディレクトリを参考にしてください。

注) APuzzle.swfはサーバ専用です。 ローカルで試すにはsampleディレクトリにあるAPuzzle_local.swfを使ってください。

パラメータxmlファイル

パラメータxmlファイルにはパズルで使用するリソースやピース数などを記述します。 htmlから分離されているのでソースの可読性が上がり、htmlを見ただけではリソースファイル名が分からなくなります。 パラメータに指定するパスはhtmlからの相対パスになります。 一応UTF-8を使用できますが、アスキーコードを使うかURLエンコーディングをした方が無難です。

パラメータxmlファイルは「SimpleObfuscator」での難読化に仮対応しています。 SimpleObfuscatorはActionScriptメモのページにあるサンプルツールです。 サンプルツールということで、詳しい説明は控えます。

<?xml version="1.0" ?> 
<args>
    <image>画像ファイル</image>
    <next target="ブラウザの更新フレーム">完成後の移動先</next>
    <message>
        <start>スタートメッセージ画像</start>
        <complete>完成メッセージ画像</complete>
    </message>
    <maxPieceNums>最大ピース数</maxPieceNums>
    <minimumPieceSize>最小ピースサイズ</minimumPieceSize>
    <borderSize>枠サイズ</borderSize>
    <pieceBgColor>ピースの背景色</pieceBgColor>
    <sound>
        <bgm>BGM</bgm>
        <get>ピースを持ち上げたときの効果音</get>
        <put>ピースを置いたときの効果音</put>
        <start>パズル開始時の効果音</start>
        <complete>パズル完成時の効果音</complete>
    </sound>
</args>
タグ 省略 説明
image × パズルに使用する画像ファイルへのパス。 APNGを使用する場合、APuzzleのfpsが30なので、それ以上のフレームレートだとフレームがスキップされる。 動画を使う場合、専用のパラメータがある。
next パズル完成後に別のページに移動させたい場合記述。 target属性には"_top"または"_self"を指定すること。 (targetを省略した場合とtargetにフレーム名を指定した場合はブラウザによって挙動が違う。 "_blank"と"_parent"は未確認。)
message.start × パズル開始前のスタンバイ時に表示されるメッセージ。 メッセージは画像ファイルで用意し、ファイルへのパスを記述する。 静止画像のみ。 imageに合わせてスケーリングされない。 パズルの中央に表示されるため、flashの表示領域より小さい画像を使用すること。
message.complete × パズル完成時に表示されるメッセージ。 メッセージは画像ファイルで用意し、ファイルへのパスを記述する。 静止画像のみ。 imageに合わせてスケーリングされない。 パズルの中央に表示されるため、flashの表示領域より小さい画像を使用すること。
maxPieceNums パズルのピース数はこの値を超えないできるだけ大きな値になる。 ピースサイズ、ピース数は自動で計算されるので直接指定はできない。 省略した場合のデフォルト値は50。
minimumPieceSize パズルのピースサイズの最小値。 スケーリング前に適用され、ピースサイズは画像の大きさを元に計算される。 maxPieceNumsより優先される。 例えば600x600ピクセルの画像でmaxPieceNumsを10000にしてもminimumPieceSizeが適切ならばピースは豆粒にならない。 デフォルト値は32。
borderSize 画像の縁をパズルの枠として使用する場合の最小ピクセル数。 0を指定することも可能。 ピースのサイズや数は自動で計算されるので0にしても枠ができる場合あり。 デフォルト値は16。
pieceBgColor ピースを持ち上げた跡の空白を塗りつぶす色。 htmlと同様の書式で#RRGGBBで指定する。 カラーネームは使用不可。 また、APuzzle.swfのwmodeをtransparentにした場合、 アルファ値を追加した#RRGGBBAAも使用できる。 デフォルト値は#000000。
sound各種 効果音、BGMに使用するmp3ファイルへのパス。 flashの仕様上、サンプリング周波数は44.1kHzでなければ音がずれる。 get、putの効果音は44.1kHzにした方がよい。 (flashが再生できる形式のみ使用可能。mp3以外も使えるらしいが未確認。)

htmlファイルへの埋め込み

APuzzle.swfをhtmlに埋め込むには、objectとembedのタグを組み合わせて書きます。 ブラウザによって解釈できるタグが違うからです。 flash対応のブラウザならばどれでも同じ様な見栄えにするため、 objectとembedの両方に同じパラメータを指定します。

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
    width=""
    height="高さ">

    <param name="movie" value="APuzzle.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="背景色" />
    <param name="wmode" value="transparent" />
    <param name="FlashVars" value="args=パラメータxmlファイル&amp;fontsize=フォントサイズ" />
    <embed src="APuzzle.swf"
        FlashVars="args=パラメータxmlファイル&amp;fontsize=フォントサイズ"
        width=""
        height="高さ"
        quality="high"
        bgcolor="背景色"
        wmode="transparent"
        type="application/x-shockwave-flash"></embed>
</object>
項目 説明
幅、高さ flashの表示領域のサイズ。 パズルに使用する画像のサイズと異なる場合、自動でスケーリングされる。 比率はアスペクト比を保って枠内に収まる最大サイズ。 ただし、スケーリングされた場合ピースの間に隙間ができる場合がある。 flashの画質を下げたときにも隙間ができ、画質はプレイヤーが調節できる。 このため、画像サイズの整数倍を推奨。
背景色、wmode 背景色、またはwmode="transparent"のどちらかが指定できる。 背景色を指定した場合、flashの表示領域と画像のアスペクト比が異なると空いた領域が背景色で塗りつぶされる。 背景色とパラメータで指定したpieceBgColorとは別の色。
wmode="transparent"を指定した場合、空いた領域は透過される。 また、pieceBgColorでアルファ値を指定するとhtmlの背景とブレンドできる。 ただし、処理が重くなるので注意すること。 ブラウザによってwmode指定時の挙動が違うらしいので注意すること。
パラメータxmlファイル 前述のパラメータxmlファイルへのパスを記述する。 拡張子".xml"は付けない。
フォントサイズ ダウンロードサイズやエラー情報を表示するテキストフィールドのフォントサイズ。 パラメータ読み込みエラーもテキストフィールドに表示するため、この項目はパラメータファイルには含まれていない。

戻る