『ボヘミアン・ラプソディ』はなぜ人々を魅了したのか >>

こんにちわ、
360度のパノラマ写真というと、
http://blogimg.goo.ne.jp/user_image/23/74/ff1686 …
こういったグルッと見回した写真のですが、
なんとかこういった写真を作るまではいけたのですけど、
あくまでこれは1枚の"画像"なので、左右がループしていません。
この360度画像をWeb上にアップし、閲覧者にループして見せられるようにするにはどうしたらいいのでしょうか?

↓こういった感じです。
http://www.panoramas.dk/fullscreen3/f44_niagara. …
http://www.360do.com/sample.html
※縦にループまではしなくていいかな…と思ってます。
 左右だけで十分です。

学校のPCに
Macromedia Flash 8やFireworks 8、
Adobe Illustrator CS2、Photoshop CS2
など、ある程度グラフィックソフトがそろっているみたいなので、
それが活用できれば、と思っているのですが…。

#ある程度調べ、 QuickTime VR Authoring Studioというソフトがあればなんとかなりそうだったのですが
 かなり古いソフトで、しかもマッキントッシュ用なので個人的には難しいです…。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

それでは Flash で行きますか?



本当は,
Flash内にムービークリップなどを作り込んで行って,
そのように動かせるような構造自体を作った上で,
ActionScript と言う言語でプログラムを組んで動かして行く物です。

しかし,
ご質問の感じでは,動かせるような構造を作ること自体が困難であるように思いますし,
構造を作るための説明をするだけでも気が遠くなりますから,
写真素材画像の作成以外は,ほぼ 100% ActionScript で動かす方法を書きます。
右も左もわからない状態の方の場合は,ActionScript のみでする方が簡単です。


まず,任意のフォルダに,
書かれていらっしゃる URL の横長いパノラマ写真を保存し,
すみませんが,パノラマ写真を Photoshop で 横幅 2880px 以下にリサイズしてください。
理由↓
http://www.google.co.jp/search?hl=ja&q=2880px+Fl …

そして,とりあえず,「panorama.jpg」 というファイル名にして保存しなおしてください。
この 「panorama.jpg」 を外部ファイルとして SWF からロード表示させるしくみにします。

横幅 2880px 以下にリサイズした 「panorama.jpg」 が用意できましたら,
Flash 8 を起動させて新規ドキュメントを作成し,
「panorama.jpg」 と同じフォルダに任意のファイル名で保存します。

そして,
ステージの上にある,タイムラインの レイヤー1 の フレーム1 の空白キーフレームを選択して,
ステージの下にあるアクションパネルを表示させます。

そして,アクションパネルに次の ===== 内のスクリプトコードを全てコピー&ペーストします。

===============================================
// パノラマ写真のパス及びファイル名を指定 ★
photo = "./panorama.jpg";
// パノラマ写真を動かすスピードの設定 ★
speed = 20;
//------
// カウント用変数 cnt の初期化
cnt = 0;
// フラグ用変数 flg1 と flg2 の初期化(ブール値の false)
flg1 = false;
flg2 = false;
//------
// 親ムービークリップを作成
_root.createEmptyMovieClip("oya_mc", 0);
// 親ムービークリップ内に子ムービークリップを2つ作成
_root.oya_mc.createEmptyMovieClip("ko1_mc", 0);
_root.oya_mc.createEmptyMovieClip("ko2_mc", 1);
//------
// MovieClipLoaderクラスのインスタンス mcl を作成
mcl = new MovieClipLoader();
// _root 自体をリスナーオブジェクトとして登録
mcl.addListener(this);
// 指定写真を ko1_mc にロード
mcl.loadClip(photo, _root.oya_mc.ko1_mc);
//------
// ロード&表示されたときの動作を定義
function onLoadInit(myMC) {
//もし 変数 cnt の値が 0 であれば
if (cnt == 0) {
// ko2_mc の座標を決定
_root.oya_mc.ko2_mc._x = myMC._width;
// 指定写真を ko2_mc にロード
mcl.loadClip(photo, _root.oya_mc.ko2_mc);
// カウント用変数の値を 1 加算
cnt++;
} else {
// フラグ用変数 flg1 を true にする
flg1 = true;
}
}
//
//---------
//
// マウス監視用リスナーオブジェクト msl の作成
msl = new Object();
// マウスダウン時の動作を定義
msl.onMouseDown = function() {
// フラグ用変数 flg2 を true にする
flg2 = true;
// マウスダウン時のマウスのx座標を保存
msx = _root._xmouse;
};
// マウスアップ時の動作を定義
msl.onMouseUp = function() {
// フラグ用変数 flg2 を false にする
flg2 = false;
};
// msl を Mouseクラスのリスナーに登録
Mouse.addListener(msl);
//
//---------
//
// 1フレーム進時間毎に随時実行
_root.oya_mc.onEnterFrame = function() {
// フラグ用変数 flg1,flg2 が共に true であった場合
if (flg1 && flg2) {
// マウスの座標によって変数 spd の値を変える
this.spd = speed*(msx-_root._xmouse)/(Stage.width/2);
// 実際の移動
this._x += this.spd;
// 左右の限界位置に達したとき座標を折りかえす
if (this._x<=-this._width+Stage.width) {
this._x += -this._width/2+Stage.width+this._width-Stage.width;
} else if (this._x>=0) {
this._x += -this._width/2;
}
}
};
===============================================


そして,
「制御」→「ムービープレビュー」してもらうと,動作確認ができます。
また,
「ファイル」→「パブリッシュ」でドキュメントを保存したフォルダに SWF と HTML が作成されると思いますから,
一応以上で完成です。

ステージの大きさは,ActionScript では指定できません。
「修正」→「ドキュメント」より,ドキュメントプロパティで適当に設定してください。
また,
動きをなめかにしたい場合は,フレームレート を 20 fps 以上くらいにしてください。

そして,
スクリプト中の★のついた最初の2行の値は必要に応じて変えてください。

 // パノラマ写真のパス及びファイル名を指定 ★
 photo = "./panorama.jpg";

このパスは,
SWF を HTML に貼り付けた場合,SWFからのパスではなく,HTMLからのパスになります。
したがって SWF と JPEG と HTML を違うフォルダに保存する場合は,
パスの変更に気をつけてください。

Flash は今回使ってみるだけということでしたら,
以下は無視してくださってかまいません。



/////////////////////////////////////////////////////////

次の URL は Adobe Flash 使用のためのサイトではなく,
他の Flash 作成ソフト(Suzuka)を使うためのサイトですが,
画像を無限ループ移動させる原理は同じです。
参考URL↓
http://suzupara.iinaa.net/photo.html

原理をビジュアル的に知りたい場合は,上のページの下の方を参考にしてみてください。
この原理を利用しています。
また,今回書いたスクリプトの 最後の数行 は,
上のページと同じコードを使用させていただいています。

※ ダウンロードできるファイルは Adobe Flash 用ファイルではないので
  Flash8 では使用できません。
  しかし,Adobe Flash がご自宅にないのであれば,
  最初から上記サイトのフリーソフト Suzuka を使う手もありますよ。

もし今後も Flash にとり組み続けたいと思われる場合の話ですが,
Adobe Flash でも,普通は上のページのような感じで構造を作り込む修行を繰り返しします。

ものを作り込む修行をすると,
空想上のイメージだけで時間的空間的な構造が作り込めるようにもなります。
すると,構造を具体化する ActionScript も考えられるようになって,
ある程度であれば ActionScript だけでも,ものを配置したり動かすことができるようにもなります。

今回は構造を作り込むことに関する説明が困難であるため,ActionScript のみで作成しただけです。
普通の場合は,当然 ActionScript だけでする必要は全くありません。
実際に作り込んだものの方が,さらに細かい動きや複雑な動作も作成することが可能となります。

Adobe Flash にとり組む場合は,
コピペでする方法ではなく,基礎的な簡単な本を買って,
ぜひ,「ものづくり」や「ActionScriptを使わないアニメーション」から始めてください。
結局,基礎的なことを積み上げて行くことが,上達への早道になります。

※ Suzukaには書籍などはおそらく存在していません。
  サイトの情報を参考に自己鍛錬あるのみです。
  また上記スクリプトは,
  Flash 8 では動作検証済みですが,Suzuka での動作検証は行っていません。
    • good
    • 0
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qthview.jsを使って360度パノラマ画像を6枚以上表示させるとスマホのブラウザがクラッシュする

thview.jsを使って360度パノラマ画像を6枚以上(一つのhtmlファイルに)表示させると、
パソコンで見ると普通に見れるのですが、
スマホのブラウザで見ようとすると、ブラウザがクラッシュします。
これは、thview.jsを使っているからでしょうか?
一つのhtmlファイルに多くのパノラマ画像を表示させたいのですが、これは、無謀なのでしょうか

a-frameだと一つのhtmlファイルに一つの画像しか載せられないみたいなので、自分の希望とはちがう。
theta360.comのサイトにはアップロードしたくはない。

自分のサーバーに画像ファイルをアップして、htmlで複数のパノラマ画像を表示したいのですが、
どうしたらいいでしょうか?
偉い人教えて下さい。

Aベストアンサー

こんにちは

偉くもないし、thview.jsはまったく存じませんので、ご質問文だけからの単なる憶測ですが・・・

>画像を6枚以上表示させると~~ブラウザがクラッシュします。
どのような実装か不明ですが、5枚まではOKで、6枚目でクラッシュとのことなので、割り当てメモリオーバーとかの可能性はありませんか?
一度、軽量化した画像で試してみると、ヒントが得られるかも知れません。

>複数のパノラマ画像を表示したいのです
複数のパノラマを同時並行的に操作することは無さそうに感じます。
もしも、全部のインスタンスを常時保持しているような実装でしたら、操作中のインスタンスだけにして、他は解放しておくようにすることで、占用メモリの軽減が測れるかもしれませんね。

例えば、LightBox系のようなUIにしておいて、タップで拡大表示と同時にインスタンス化するとか・・・
とは言え、スマホの場合は加速度センサーに合わせた表示もできるらしいので、6枚を同時に動かすことが狙いでしたら、このの方法では効果がなさそうです。


実際に試しても、スクリプトを見てもいないので、あまり役に立たない回答ではありますが・・・
…というか、ここで聞いているよりも、thview.jsの作者さんに聞いてみた方が確実ですし、解決が早いのではないでしょか?(対応してくれるかどうかは不明ですけれど)
http://d.hatena.ne.jp/aike/searchdiary?word=thview

こんにちは

偉くもないし、thview.jsはまったく存じませんので、ご質問文だけからの単なる憶測ですが・・・

>画像を6枚以上表示させると~~ブラウザがクラッシュします。
どのような実装か不明ですが、5枚まではOKで、6枚目でクラッシュとのことなので、割り当てメモリオーバーとかの可能性はありませんか?
一度、軽量化した画像で試してみると、ヒントが得られるかも知れません。

>複数のパノラマ画像を表示したいのです
複数のパノラマを同時並行的に操作することは無さそうに感じます。
もしも、全部...続きを読む


人気Q&Aランキング

価格.com 格安SIM 料金比較