Browsing articles in "FLASH / Memo"
11月
30
2009

パノラマFLASH

QTVR

FlashパノラマVRの基本(明日の「QTVR Diary -OFFLINE- vol.6」の予習) – 京都・日本・世界の最新パノラマムービー情報:QTVR Diary

http://pencil-jp.net/weblog/archives/2008/10/basic-of-flashvr.html

Ryubin’s Flash Panorama

http://www.ryubin.com/panolab/panoflash/index.shtml

360度パノラマ画像をFlashビューアーで表示させる

http://d.hatena.ne.jp/kadokura/20071114/p1

360度パノラマ写真をループできるように出力する方法
http://oshiete1.goo.ne.jp/qa3378976.html
それでは Flash で行きますか?
本当は,
Flash内にムービークリップなどを作り込んで行って,
そのように動かせるような構造自体を作った上で,
ActionScript と言う言語でプログラムを組んで動かして行く物です。
しかし,
ご質問の感じでは,動かせるような構造を作ること自体が困難であるように思いますし,
構造を作るための説明をするだけでも気が遠くなりますから,
写真素材画像の作成以外は,ほぼ 100% ActionScript で動かす方法を書きます。
右も左もわからない状態の方の場合は,ActionScript のみでする方が簡単です。
まず,任意のフォルダに,
書かれていらっしゃる URL の横長いパノラマ写真を保存し,
すみませんが,パノラマ写真を Photoshop で 横幅 2880px 以下にリサイズしてください。
理由↓
?http://www.google.co.jp/search?hl=ja&q=2880px+Flash&lr=lang_ja?
そして,とりあえず,「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 での動作検証は行っていません。

11月
30
2009

写真を効果的に見せてくれるフリーFLASHギャラリー集「25 Amazing &amp; Free Fl

写真を効果的に見せてくれるフリーFLASHギャラリー集「25 Amazing & Free Flash Based Image Galleries」 DesignDevelop

http://design-develop.net/web-design/25-amazing-free-flash.html

11月
27
2009

360度パノラマで廃墟写真を閲覧できる「360icon」: DesignWorks

360度パノラマで廃墟写真を閲覧できる「360icon」: DesignWorks

http://www.360icon.com/

11月
27
2009

FLASHサンプルサイト

FLASHRAVE – FLASH 講座 -

FLASH(フラッシュ)の基礎である操作方法からActionScriptの応用、プロモーション効果の高いアニメーション作成の講座やFLASHゲームなどを掲載。Flash素材のダウンロードやFlashコンポーネント、AIRアプリケーションなど拡張ソフトをダウンロードでき

FLASH-JP.COM – FLASH-japan FORUM

日本最大級のFlashメーリングリストから生まれたWebフォーラムです。Xoopsを使って構築しています。FlashやFlashに関連するソフト・情報などを扱っています。
年会費無料のクレジットカードなら「楽天カード」