1. HOME
  2. BLOG
  3. Flash Panorama Player vol.4「xmlファイルとプラグイン」
BLOG

Flash Panorama Player vol.4「xmlファイルとプラグイン」

BLOG, panorama

101

忘れた頃にやってくる?企画、Flash Panorama Playerの連載第4回目です。前回のvol.3「HTMLへの埋め込み」に引き続き、今回は、xmlファイルとプラグイン使用方法です。

xmlファイルを用いることにより、Flash Panorama Player(以後、FPP)の持つ多くの機能を利用することが出来ます。特に「Hotspots plugin」は、パノラマにインタラクティブな機能を付加することが出来る高機能なプラグイン。機能がありすぎて、拙者自身、いまだに全機能を理解出来ていないというか、試せていないのが現状で、、、(Hotspots pluginについては、次回以降に解説予定デス)

xmlファイルを用いず、htmlファイルの中に埋め込む方法もあるようですが、使い込む程にコードが巨大化してしまいますので、パノラマの機能部分を分離して管理するxmlファイル形式での利用がお勧めです。


では、まずFlash埋め込み用スクリプトのサンプルです。パノラマを表示させたいhtmlのbody内任意の位置に埋め込みます。

<script type=”text/javascript” src=”files/swfobject.js”></script>
<div id=”flashcontent”>
パノラマを見るためには、
<a href=”http://www.adobe.com/go/getflashplayer/”>Adobe Flash Player</a>や、
JavaScriptを有効にする必要があります。
</div>
<script type=”text/javascript”>
var so = new SWFObject(“files/pano.swf”, “pano”, “100%”, “100%”, “9”, “#000000”);
so.addParam(“allowFullScreen”,”true”);
so.addParam(“allowScriptAccess”,”sameDomain”);
so.addVariable(“xml_file”, “saikoro2_borders.xml”);
so.write(“flashcontent”);
</script>

前回同様、JavaScriptのオープンソースライブラリSWFObjectを使っています。詳細は、連載のVol.3を見てネ。

●11行目:読み込むパス+xmlファイル名

so.addVariable(“xml_file”, “saikoro2_borders.xml”);

上記の例では、saikoro2_borders.xmlを読み込みます。

そして、そのxmlファイルの内容です。この例では、パノラマの初期値、自動回転(autorotator plugin)、表示範囲制限(borders plugin)を設定します。

<?xml version=”1.0″ ?>
<panorama>
<parameters>
panoType = cube
panoName = data/saikoro2
panHome = 0
tiltHome = 0
zoomMax = 2
zoomMin = 0.5
zoomHome = 0.80
layer_1 = files/autorotator.swf
layer_2 = files/borders.swf
</parameters>
<autorotator>
speed = 0.1
interval = 30
pause = 1000
quality = low
</autorotator>
<borders>
pan_min = 270
pan_max = 90
tilt_min = -45
tilt_max = 45
</borders>
</panorama>

●1行目はxmlファイルの宣言文、そして2行目はpanoramaタグ。

<?xml version=”1.0″ ?>
<panorama>

ここまでは、いわゆるビールで言うところの「とりあえず」デス < 意味不明

●3〜13行目:パノラマのパラメーター設定

<parameters>
panoType = cube
panoName = data/saikoro2
panHome = 0
tiltHome = 0
zoomMax = 2
zoomMin = 0.5
zoomHome = 0.80
layer_1 = files/autorotator.swf
layer_2 = files/borders.swf
</parameters>

・panoType:読み込むパノラマの形式で、選べるタイプは3種類、cube(Cube Face形式)、mov(QTVR形式)、cylinder(Equirectangular形式)です。ただし、mov(QTVR)の場合は、movDecoder.swf、cylinder(Equirectangular)の場合は、cylConverter.swfのプラグインが必要です(連載のvol.1参照)。
・panoName:パノラマデータ名と置かれている場所へのパスです。Cube Faceの場合は、データ名のアンダースコア以下を含みません(連載のvol.2参照)。
・panHome:水平方向の初期値(0°〜360°)
・tiltHome:垂直方向の初期値(-90°〜90°)
・zoomMax:最大ズームの初期値(2以下)
・zoomMin:最小ズームの初期値(0.45以上)
・zoomHome:ズームの初期値(0.45以上、2以下)
・layer_1:自動回転プラグイン「autorotator.swf」の読み込み
・layer_2:表示範囲制限プラグイン「borders.swf」の読み込み
さらにプラグインを読み込むためには、layer_3、layer_4…と追加します。

●14〜19行目:自動回転プラグイン「autorotator.swf」のパラメーター設定

<autorotator>
speed = 0.1
interval = 30
pause = 3000
quality = low
</autorotator>

・speed:回転スピードをコントロール、回転方向は「+」で右回り(時計回り)、「ー」で左回り。
・interval:回転用ファンクションの呼び出される間隔。言ってみれば、ビデオのフレームレートの制御のようなものでしょうか。単位はミリセカンドなので、上記の例、interval = 30では、1秒間に約33回動くことになります。なので、数字が少ない方が動きが細かく、スムーズになるようですが、CPUに対する負荷は上がるのかもしれません。どうも、このintervalもスピードに関係するようで(値が小さい程速くなりますが、今イチ、よーく分らないのデス)、speedとの組み合わせで、パノラマの回転スピードが決まって来るようです。デフォルト値は30です。
・pause:ユーザのアクションが終了後、再回転するまでの時間(単位はミリセカンド)で、デフォルト値は3,000です。
・quality:回転時のアンチエイリアスのクオリティで、”low”, “medium”, “high”, “best”から選択、デフォルト値はlowです。

●20〜25行目:表示範囲制限プラグイン「borders.swf」のパラメーター設定

<borders>
pan_min = 270
pan_max = 90
tilt_min = -45
tilt_max = 45
</borders>

・pan_min:水平方向の最小値(0°〜360°)
・pan_max:水平方向の最大値(0°〜360°)
・tilt_min:垂直方向の最小値(-90°〜90°)
・tilt_max:垂直方向の最大値(-90°〜90°)

以上。

今回のファイル配置は、こんな感じ
fpp directory

そんでもって、上記の設定でサイコロパノラマを表示すると、
サイコロ・パノラマ:autorotator, borders plugin
↑こんな感じデス。

ところで、今回ご紹介した表示範囲制限プラグイン「borders.swf」ですが、同様な機能を持つ「limits.swf」というプラグインもあります。この「limits.swf」、マニュアルには「similar to Borders plugin, but Borders plugin restrict only the camera movement.」と書かれているのですが、拙者の語学能力では理解不能デス。頭が駄目なら体で、、、ってな訳で試してみました。上記のxmlファイルを「limits.swf」用に書き換えます。

修正前(12行目)

layer_2 = files/borders.swf


修正後

layer_2 = files/limits.swf

修正前(20〜25行目)

<borders>
pan_min = 270
pan_max = 90
tilt_min = -45
tilt_max = 45
</borders>


修正後

<limits>
pan_min = 270
pan_max = 90
tilt_min = -45
tilt_max = 45
</limits>

limits pluginで表示すると、
サイコロ・パノラマ:autorotator, limits plugin
↑こんな感じ。

なるほど、「borders.swf」の場合、表示画面の中心を基準に制限しているのに比べ、「limits.swf」は、その制限範囲内のみ画面に表示されるということでしょうか??? < ム〜かなり分かりにく表現?ですネ、まー、百聞は一見にしかずということでお許しを、、、

p.s.
暫く、話題の少なかったFPPですが、Adobe Flash Player 10のリリースに合わせるようにv2.3が出ました。早速インストールしてみましたが、パノラマ回転時のウネウネやチラチラ等がかなり改善されているようです。Flash Player 10に最適化?するのが大変だったようですネ。さらなる真価は、v2.4で発揮されそうです。

Flash Panorama Playerに興味のある方、購入はこちらからどうぞ。
flashpanoramas
ちなみに2008.10.17現在価格は、¥6,129ナリ。

【関連情報】
flashpanoramas.com
swfobject – Google Code

【サイト内関連情報】
Flash Panorama Player vol.3「HTMLへの埋め込み」
Flash Panorama Player vol.2「簡単再生」
Flash Panorama Player vol.1「QTVRを再生」

  1. ジロン

    こんにちわ。
    TOKYO VR PROJECTというVRサイトをやっていますジロンと申します。

    いつも参考にさせて戴いていますが、初めて書き込みさせていただきます。

    僕も最近、自分のサイトのリニューアル作業の中で、ちょうど64bit(MacもWinも64bit化されるとQTVRが動かなくなるアレ)問題にぶち当たり、FLASH化を行うようになったのですが、こちらの内容を読んで最終的にFPPの導入を決めました。

    ほんとに助かっています。

    ところで、xmlのinterval設定ですが、僕がいじった感じだとspeedで設定した速度を最高速度として何フレームの間に加速するか、という「加速インターバル」?ではないかと思いました。

    この場合、intervalの数字が大きいほどゆっくり加速します。

    チュートリアルには直訳で「約33回転機能を1秒あたり呼び出し」みたいなことが書かれていますが、うちのPCではそんなに高速で動きません。
    体感的には33フレームを1秒、ってところです。
    なのでinterval = 30 で約1秒でSpeed設定値に加速、と受け取っています。 
    僕はもう少しゆっくりがいいので60にしていますけど。

  2. keiji

    ジロンさん、はじめまして
    >なのでinterval=30で約1秒でSpeed設定値に加速、と受け取っています。 
    フォロー有り難うございました、m(_ _)m
    なるほどでゴザイマス。

    >QTVRが動かなくなるアレ
    今後の事を考えると、頭がイタイですネ、、、

    p.s.
    TOKYO VR PROJECT再開ですね?
    楽しみにしております。
    http://tokyo-vr.com/

  1. この記事へのトラックバックはありません。

PickUp