パノラマ写真の利用法 ①

前回の記事で作成したパノラマですが、

拡大・縮小・移動といった動きを加えることができなければ魅力半減といえます。

 

実際、この問題があったからこそパノラマ作成に興味を抱かなかったわけですが、

前回の記事作成中にいろいろなサイトに貼られている画像（映像？）が出てきたわけです。

 

ということで、必要以上に詳しくマニュアルっぽい記事にしたわけですが、

So-net blog にアップロードできるファイル（画像＆音楽ファイル）だけでは
そういった形で記事に貼って紹介することがほぼ不可能なようですねぇ～。

ブログとは別にホームページやレンタルサーバーを持っていなければ、

動きのあるパノラマ画像の表示／作成に必要な
Javaスクリプト(js) や FLASH(swf)、QuickTime ムービー(mov) などが使えないみたいです。

 

・・・・・・と、ここまで分かった段階で早々にあきらめれば楽だったのですが、

一応興味はあったので無謀だと思いつつも上記のファイルを扱うための準備を始めました。

 

いろいろ初挑戦ということになるので、途中で挫折するかもしれませんが・・・・・・。

 

そんなわけで、今回は初心者向けの内容とは言えない部分がありますが、

個人的に楽しむだけでも十分というものもあるので気長にお付き合い下さい。

 

念のため断わっておきますが、今回はフリー素材の使用例といった内容になります。

 

 

○　Javaスクリプトを用いてパノラマ写真自体を自動スクロール表示　○

（　スクリプト配布 ＆ 使用法紹介先 ： 瀬戸の夜景　）

基本的に制作者様のサイトにある例文をコピーしたものを
メモ帳などのテキストエディタを開いて貼り付け、

ファイル → 名前を付けて保存 を選択し、

ファイルの種類の項目をすべてのファイルに変更して
ファイル名の後にＷｅｂページの拡張子 (.htm / .html) を付けて保存するだけですが、

Ｗｅｂページのソースというものを見たことがない人には敷居が高いかもしれません。

＜ １８０度用の往復スクロールJavaスクリプト ＞

＜ ３６０度用スクロールJavaスクリプト ＞

 

○　FLASH素材(swf)を用いて縮小画像からの拡大表示　○

（　スクリプト配布 ＆ 使用法紹介先 ： Flash Engine Series　）

 

『 Suzuka 』や『 ParaFla 』のようなFLASH作成ツールというものもあるのですが、
難易度が高いくせにマニュアルサイトが不足している気がします。

ということで、フリー素材を使っての加工に挑戦したわけですが、

画像ファイル名を変えてちょっと遊ぶ以上の加工は、
Ｗｅｂページのソースというものを見たことがない人には過酷な作業となるでしょう。

ですが、FLASHの知識がない人でも簡単に（？）プロっぽい作品に仕上がります。

（ フリー版では宣伝用バナーが付きますが・・・。 ）

 

あらかじめ設定されている動作以外にも画像切り替え時の効果や動きを変更できるため、
フリー素材でありながら写真に合わせてこだわりをもった調整を行うことができます。

公式サイトやダウンロードしたサンプルをマニュアルとして実践あるのみということで・・・。

＊ この素材を表示するのに Flash Player 8以上が推奨されています。 → 最新版のインストール

 

＜ Flash Zoom Engine 定義ファイル組込み サンプル 002 ＞

＜ Flash Zoom Engine 定義ファイル不要モード サンプル 003 ＞

 

○　FLASH素材(swf)を用いて円筒＆球状ＶＲ表示　○

（　公式サイト ： FlashVRPlayer - サンプル・マニュアル・ダウンロード ）

 

普通は、魚眼レンズや広角カメラで撮影した写真から作成するものと思いますが、

距離感のある（上下左右に空などの余白？が多い）写真であれば
それなりにおもしろい仮想空間（バーチャルリアリティ：ＶＲ）が作成できます。

＊ そういった写真じゃないと、被写体が近すぎてただの見ずらいになってしまいます。

 

・・・で、下のＶＲ画像サンプルですが、

このツールに用いるのに適した画像というのが 横：縦＝２：１ の画像ということで、
上記の元画像を急激に歪ませて（球面化）作成しています。

別に、同じ画像を横に２つ並べただけで良かったのですが・・・。

 

実際に使用した画像を見たい方は、

下のプレイヤーのＨボタンを押してＶＲ画像内にオブジェクトを表示させて下さい。

青の球体に画像へのリンクを貼っています。

 

他のボタンは見た目で予想できるので説明しません。使って確認して下さい。

 

また、素材のタイトルに円筒＆球状ＶＲ表示と書いていることから想像できる通り、

下の球状ＶＲモード以外に円筒ＶＲモードとして使うことができるのですが、

画像をドラッグして上下に動かすことを出来なくしただけと言えなくもありません。

ということで、記事が重くなっているこの場所には載せません。

 

ちなみに、海の写真のように横に長すぎる画像を使う場合には、
上下に透明の余白？を入れた画像 ( png, gif ) を作成して円筒ＶＲを作成します。

 

＊ Flash player 9,0,28,0 以降が必要です。 → 最新版のインストール

 

マニュアルをみながら設定をいじるのは面倒という英語嫌いの同志のために、
configs.xml ないの解説を書き換えました。

訳したわけではないので、あしからす・・・。　→　configs.zip

 

＜ FlashVRPlayer 球状ＶＲモード ＞

 

今回の記事で使用している写真も前回と同様に
『 ゆんフリー写真素材集 』で配布されていたものを使わせて頂きました。

実際に使用したのは、
「 No.5706 金閣寺　舎利殿 」 と 「 No.3054 星の砂のビーチ全景 」 です。

ちなみに、３６０°パノラマ写真を配布しているサイトは発見できなかったため、
自分でそれっぽく見えるように加工しています。

 

（　まだ続けて書きたかったのですが、記事が重くなったので次の記事に移ります。　）

 

 

タグ：パノラマ VR web素材

コメント 4

ブログ訪問ありがとうございました。
私はmacのヒトなので、mac用があったらうれしいです♪
by gon (2009-10-31 05:42) 

ご訪問ありがとうございました。
カメラのことはまったくの無知に近くこういうふうに
編集出来たらいいな～と思う事はあるのですが
人に聞かないと全然わかりません。でもできるように
なるといいだろうなぁっていつも思っております。
by citron (2009-10-31 19:34) 

球状ＶＲの設定が試作品のまま変わっていなかったんですね。青球は、よりにもよってサブブログにリンクさせていたようで・・・、本当に申し訳ありませんでした。
by kage (2009-10-31 21:07) 

コメントありがとうございます。変なコメントが多いんで制限をかけていたんですが、その状態に送られたコメントって届いたことすら表示されないものだったんですね～。自分に送って見て初めて届いているのに気付きました。


＞gon さん

Macは実験できる環境にないため、直接紹介することは難しいかもしれません。

ただ、ＶＲに関してはWindowsよりもMacでの作成が主流のようで、 QuickTime VR パノラマ 作成 を検索すると簡単に探せます。

『QTVR Make Panorama 2』というのがそうらしいのですが、Windows環境のせいかダウンロードページにつながらないため存在が確認できません。一応、アップルのホームページを確認して下さい。


＞citron さん

私もカメラは初心者です。
ただ、人に作られたもの（ツール＆素材）を利用することだけは得意な方なので、いろいろ実験しています。

素材をダウンロードすると分かるのですが、大体の形（Ｗｅｂ形式）ができています。後は、 html, htm, xml の容量の軽いファイルをメモ帳などのテキストエディタで開いてファイル名や数字を変更して使うのですが、Ｗｅｂ形式では表示されない説明など説明が書いてあるため頑張ればなんとかなるものです。
by kage (2009-10-31 22:10)