このサイトのキャラクター紹介の部分はどうやってつくられているの？

質問

http://www.square-enix.co.jp/dvd/ff7ac/

すごくいけてるなと思うんですけど
ＦＬＡＳＨ８でどうすればつくることが
できるんでしょうか？
教えてください。

回答No.4

DPE · ベストアンサー

メインメニューから「 CHARACTERS 」を選んだ時に出てくるリング状のメニューのことで、よろしいでしょうか？

写真や動画素材の作成は別として、メニューそのものは Flash 8 で何とか作れそうですが、すごくいけてると思えるだけに難しいですよ。
キャラクターのパネルが画面の奥に移動したり、かなり処理が重い（私のパソコンでも時々表示が遅くなります）ことから見ても、多分ですが、３次元座標を割り当てて計算し、奥にあるパネルから順に遠近感をつけて配置していく方法で表示しているのではないかと思います。

座標を３次元で考えると、このメニューのように画面の奥に消えていくといった演出もできます。
３次元の座標を最終的に２次元の座標に変換（透視変換といいます）して Flash で表示する方法は、あるにはあるのですが、ここで説明できるほど簡単な話ではありません。
興味がありましたら、研究してみてください。

宣伝にも（処理やファイルの重さを度外視してでも）思わず感嘆してしまうものを作るあたりが、映像の技術力の高さを誇るこの会社らしいですね。
この会社なら、２次元の世界が基本である Flash で３次元座標を計算して３Ｄらしく見せるというすごいことを、本当にやりそうな気がします。

ここまで真面目に３次元座標を計算しなくても、動き方を工夫してごまかすなら少しは簡単になります。
基本的には、各ボタンを楕円の軌道を描いて回るように動かし、奥の方にある（ように見える）ボタンほど小さく表示します。
背景が黒などの暗い色でしたら、奥にあるものほど暗く表示すると、遠くにあるものが霞んで見える感じが出ます。

円または楕円の動きでは角度を更新すると位置が変化します。更新する角度が大きいほど、速く回転して見えます。
また、例えば正の角度を加算していたものを負の角度の加算に変えると、回る向きを逆にすることもできます。
マウスを近づけると回り始め、メニューから遠ざかるにつれて速くなる仕組みは、マウスカーソルとメニューとの距離から加算する角度を変化させることで作れます。

あとは各ボタンに on(release) を設定して、クリックされた時の動作（ページやフレームの移動など）を入れて完成です。

紙面の都合上、Flash の操作や ActionScript の基本を１から説明することはできません。
ムービークリップって何？とかスクリプトはどうやって書く？？となってしまうようでしたら、厳しいことを言うようですが、まずは入門書や解説サイトなどで基本の知識を身につけてください。

------------------------------------------------------------------

まず、ボタンとして使うムービークリップを作ります。
ステージに描いた絵をシンボルに変換する場合は、「基準点：」の図形で中央の四角形をクリックしてください。
「新規シンボル」で作る場合は、＋印が中央に来るように絵を移動してください。
この＋印の位置が、移動や拡大・縮小をかける時の中心点になります。

「挿入」→「新規シンボル」で、新しいムービークリップをもう１つ作ります。
仮に、このシンボルの名前を”メニュー”とします。

”メニュー”シンボルの中に先ほど作ったボタン用のムービークリップを配置して、インスタンス名を付けます。
ムービークリップを選択して「プロパティ」パネルを見ると、左上の方に <インスタンス名> という仮の文字が入っている項目があります。
ここに何か入力すると、そのインスタンスに名前が付きます。

この名前はスクリプトで使いますので、半角の英数字と” _ ”だけで名前を付けてください。
名前は都合上、どのインスタンスにも共通する名前＋ 0 からの通し番号で付けてください。
例えばボタンが 10 個あるなら、clip0 ～ clip9 というように付けます。

ボタン用のインスタンスの配置は適当で構いませんが、大体楕円の形に並べておくと分かりやすいかと思います。
一瞬だけ最初の配置が見えることがありますから、だらしなく見えない程度に並べておくといいでしょう。
その１つ１つに、on(release) か on(press) を設定してください。クリックした時の動作を指示することができます。
例えば、クリックした時に HTML のページを表示するなら

（↓各行頭に全角のスペースが入っています。コピーする際は、全て半角のスペースかタブに置き換えてください）

　on(release)
　{
　　getURL( "***.html" );
　}

です。
クリックした時の動作は、作品に合わせて適宜変更してください。

******************************

ボタン用のインスタンスは、スクリプトでまとめて移動させます。
このためのスクリプトを、”メニュー”シンボルのタイムラインのフレームに書きます。
スクリプトはインスタンスを配置したレイヤーとは別のレイヤーに書くと、管理しやすくなります。

スクリプトのレイヤーのフレーム１にキーフレームを作り、次のようなスクリプトを書きます。
とりあえず、ボタンの数は 10 個、インスタンス名は clip0 ～ clip9 、ボタン１つあたりの大きさは幅・高さともに 100 ピクセルくらいを想定しています。

（↓各行頭に全角のスペースが入っています。コピーする際は、全て半角のスペースかタブに置き換えてください）

　//ボタンの総数
　clip_max = 10;

　//ボタンを等間隔に並べるための角度
　div_angle = Math.floor( 360 / clip_max );

　//長軸・短軸と垂直方向の高さの加算値（楕円の軌道計算に使用）
　long_r = 150;
　short_r = 50;
　vertical = 10;

　//速度と最高速度を管理
　accel = 0;
　accel_max = 200;

　//マウスが反応する範囲（Ｘ座標）
　//カーソルがこの範囲外にある時に回転速度が変わる
　limit_left = -150;
　limit_right = 150;

　//遠近感
　//この値を大きくするほど、奥にあるものが大きくはっきり見える
　pers = 65;

　//情報を管理する配列変数
　clip_list = new Array( clip_max );

　///////////////////////////////////////////////////////////////
　//奥行きの順に並べ替える関数
　///////////////////////////////////////////////////////////////

　function Z_Sort()
　{
　　var i:Number , obj:MovieClip;

　　//奥行きの順に並べ替え
　　//sinの大きいものほど手前と見なす
　　clip_list.sortOn( "z_index" , Array.NUMERIC );

　　//並び替えた順をもとに、奥行きの順に深度を割り当てる
　　for( i = 0 ; i < clip_max ; i++ )
　　{
　　　obj = clip_list[ i ].clip;

　　　obj.swapDepths( i );
　　}
　}

　///////////////////////////////////////////////////////////////
　//初期配置を決める関数
　//各ボタンを楕円状に均等に配置・配列変数に記録してリストを作る
　///////////////////////////////////////////////////////////////

　function Set_InitPosition()
　{
　　var v:Number , degree:Number , radian:Number , sin:Number , cos:Number;
　　var i:Number , view:Number;
　　var obj:MovieClip;
　　var clr:Color , trans_clr:Object;

　　for( i = 0 ; i < clip_max ; i++ )
　　{
　　　obj = this[ "clip" + i ];

　　　clr = new Color( obj );
　　　trans_clr = new Object();

　　　//角度の初期値を設定
　　　degree = i * div_angle;

　　　//垂直方向の位置に差をつける
　　　v = vertical * i;

　　　//三角関数を求める
　　　radian = degree * Math.PI / 180;
　　　sin = Math.sin( radian );
　　　cos = Math.cos( radian );

　　　//各ボタンを指定の角度に配置
　　　obj._x = long_r * cos;
　　　obj._y = short_r * sin + v;

　　　//遠近感を出す
　　　view = pers + sin * ( 100 - pers );
　　　obj._xscale = obj._yscale = view;
　　　trans_clr.ra = Math.floor( view );
　　　trans_clr.rb = 0;
　　　trans_clr.ga = Math.floor( view );
　　　trans_clr.gb = 0;
　　　trans_clr.ba = Math.floor( view );
　　　trans_clr.bb = 0;
　　　trans_clr.aa = 100;
　　　trans_clr.ab = 0;

　　　//配列変数に記録する
　　　clip_list[ i ] = { clip : obj , angle : degree , h : v , z_index : sin };
　　}
　}

　///////////////////////////////////////////////////////////////
　//カーソルの位置に応じて速度を変える
　///////////////////////////////////////////////////////////////

　function Set_Accelerate()
　{
　　//カーソルがメニューより右側にある時、時計回りに回す
　　if( this._xmouse > limit_right )
　　{
　　　accel = this._xmouse - limit_right;

　　　//速度の上限を制限
　　　if( accel > accel_max )
　　　{
　　　　accel = accel_max;
　　　}
　　}
　　//カーソルがメニューより左側にある時、反時計回りに回す
　　else if( this._xmouse < limit_left )
　　{
　　　accel = this._xmouse - limit_left;

　　　//速度の下限を制限
　　　if( accel < -accel_max )
　　　{
　　　　accel = -accel_max;
　　　}
　　}
　　//カーソルがメニュー内にある時は停止
　　else
　　{
　　　accel = 0;
　　}

　　//この1/10の値を速度（単位は度）にする
　　accel /= 10;
　}

　///////////////////////////////////////////////////////////////
　//楕円状に動かす関数
　///////////////////////////////////////////////////////////////

　function Oval_Move()
　{
　　var v:Number , degree:Number , radian:Number , sin:Number , cos:Number;
　　var i:Number , view:Number;
　　var obj:MovieClip;
　　var clr:Color , trans_clr:Object;

　　for( i = 0 ; i < clip_max ; i++ )
　　{
　　　//操作するオブジェクトと角度・高さを取得
　　　obj = clip_list[ i ].clip;
　　　degree = clip_list[ i ].angle;
　　　v = clip_list[ i ].h;

　　　clr = new Color( obj );
　　　trans_clr = new Object();

　　　//角度を更新し、三角関数を求める
　　　degree = ( degree + accel ) % 360;
　　　radian = degree * Math.PI / 180;
　　　sin = Math.sin( radian );
　　　cos = Math.cos( radian );

　　　//各ボタンを移動
　　　obj._x = long_r * cos;
　　　obj._y = short_r * sin + v;

　　　//遠近感を出す
　　　view = pers + sin * ( 100 - pers );
　　　obj._xscale = obj._yscale = view;
　　　trans_clr.ra = Math.floor( view );
　　　trans_clr.rb = 0;
　　　trans_clr.ga = Math.floor( view );
　　　trans_clr.gb = 0;
　　　trans_clr.ba = Math.floor( view );
　　　trans_clr.bb = 0;
　　　trans_clr.aa = 100;
　　　trans_clr.ab = 0;
　　　clr.setTransform( trans_clr );

　　　//角度とsin値を保存
　　　clip_list[ i ].angle = degree;
　　　clip_list[ i ].z_index = sin;
　　}

　　//奥行きの順に並び替え、深度を決める
　　Z_Sort();
　}

　///////////////////////////////////////////////////////////////
　//メニュー初期化関数
　///////////////////////////////////////////////////////////////

　function Menu_SetUp()
　{
　　//ボタンの初期配置を決める
　　Set_InitPosition();

　　//奥行きの順に並べ替え
　　Z_Sort();

　　//マウスカーソルが動く度に速度を変化させる
　　this.onMouseMove = Set_Accelerate;

　　//移動処理を常に行う
　　this.onEnterFrame = Oval_Move;
　}

　///////////////////////////////////////////////////////////////
　//メニューの準備
　//初期化関数を呼び出す
　///////////////////////////////////////////////////////////////

　Menu_SetUp();

以上で”メニュー”シンボルは完成です。
ステージに配置して、動作を確認してみてください。

------------------------------------------------------------------

・・・とまあ、２次元座標で何とかごまかすにしてもこの通り長～いスクリプトになってしまって、１つ１つを丁寧に説明するには紙面が足らないのですが。

考え方を簡単に書きますと、

　・各ボタンを楕円状に動かし、Ｙ軸回りに回転しているように見せかける。
　・三角関数 sin が 1 に近いものほど手前、-1 に近いものほど奥にあると考える。
　　この特性を拡大率・ムービークリップの色合いに反映させて遠近感を出す。
　・各ボタンの sin の値を配列変数に保存して昇順に並べ替え、これを元に swapDepths で深度を変更する。
　　sin の小さいもの（＝遠くにあると見なす）ほど小さい深度を割り当て、下に重ねるようにする。

というものです。
２次元座標でも３Ｄらしく見せようとするごまかしにすぎず、３次元の計算は何も行っていません。

ちなみに、三角関数と円運動・ラジアンなどについては Flash のテクニカルノートに説明があります。
下手な数学の参考書より分かりやすく書かれていますので、よろしければご参考になさってください。

　・角度と座標の計算 － Flash の三角関数を使う
　　http://www.adobe.com/jp/support/flash/ts/documents/fl0189.html

******************************

この手の作品は、作ろうとするメニューの大きさや１つ１つのボタンの大きさ・個数などによって見え方が変化します。
動作に関わる部分は変数にしましたので、作品に合わせてきれいに見えるように変更してください。

内容はコメントに入れた通りですが、一通り説明しますと。
（↓ここに挙げた変数以外は変更しないでください）

・ clip_max
ボタンの総数です。ボタンの数が 10 個ではない時に変更してください。
できれば 360 を割り切ることができる数が理想です。

・ long_r , short_r , vertical
おもに楕円の大きさ、つまりメニュー全体の幅や高さに関係があります。
long_r を大きくするほど横に、short_r を大きくするほど縦に大きくなります。
vertical はちょっと難しいのですが。
FF7AC のメニューのキャラクター名を拝借しますと、クラウドのパネルはザックスのパネルよりも上の方で回っていますよね。
このズレを演出するためのもので、大きくするほど最初と最後のボタンに高低差が付き、螺旋のような立体感が出ます。
ただし、その分メニュー全体が縦に大きくなるのでご注意ください。

・ accel_max
カーソルがメニューから離れた時に変化する速度に関係します。
これを 10 で割った数がボタンが回る最高速度になります。この点を目安に設定してください。

・ limit_left , limit_right
カーソルが反応する範囲を決めます。
”メニュー”シンボルのインスタンスの基準点（＋印のところ）を基点にした左右のＸ座標の範囲で、カーソルがこの範囲から外れている時に、カーソルの座標との差分でメニューが回転する速度と方向が変わります。
楕円の横幅と関係のある long_r の値とボタンの大きさから、適切な値に決めてください。
最も左または右端にあるボタンに少しかかるくらい（ long_r とほぼ同じか多少の差を付けたくらい）が、使いやすいと思います。

・ pers
遠近感を調節します。
大きくするほど奥のものが大きくはっきり見えるようになります。
小さいほど雰囲気は出ますけれど、ボタンが奥にある時に極端に小さくなってクリックしにくくなります。

なお、ボタン用のインスタンス名を clip ＋番号以外の名前にした場合は、Set_InitPosition 関数内の

　obj = this[ "clip" + i ];

の clip の部分も変更してください。

******************************

ボタンをクリックして次に進む時の演出は省略させていただきました。
２次元座標では、ボタンをクリックした時にメニュー全体が回りながら画面の奥に消えていくような演出は難しいのですが、全てのボタンが１つのムービークリップの中にまとまっていますので、メニューごとフェードアウトさせるといった演出であれば作りやすいと思います。

FF7AC のメニューほど凝ったことはできませんけれど、動きだけは一応それらしくなるということで、ご参考までに。

回答No.3

perse

> マウスポイントをちかづけるとうぃーんとまわるような感じ？
メニューの上にマウスを乗せると(＝ロールオーバーすると)、
枠が回転しながら移動するやつですよね？

まずメニュー項目となるムービークリップを4つ用意します。
ステージに配置してインスタンス名を
menu0_mc
menu1_mc
menu2_mc
menu3_mc
とつけてください。

次に枠のムービークリップを用意します。
同じくステージに配置してインスタンス名をframe_mcとつけてください。

この5つのムービークリップの配置場所は適当でかまいません。

以下のActionScriptをフレームに貼り付けてください(全角入りのため置換が必要)
動作確認済みです。

//--------------------------------------------------------------------------
//メニューの数(今回は4つ)
var menu_num = 4;

//ロールオーバーイベント設定
for (var i = 0; i<menu_num; i++) {
　　_root["menu"+i+"_mc"].onRollOver = MoveFrame;
}

//枠を動かす関数 ロールオーバー時に呼び出される
function MoveFrame() {

　　//onEnterFrameを一度止める
　　for (var i = 0; i<menu_num; i++) {
　　　　_root["menu"+i+"_mc"].onEnterFrame = null;
　　}

　　//フレーム毎の処理を記述
　　//thisはロールオーバーされたメニューを指します
　　this.onEnterFrame = function() {

　　　　//ロールオーバーしたメニューに枠を徐々に近付けて行く処理
　　　　//ゆっくり近付けるため3で割ってる
　　　　//--------------------------------------------------------------------
　　　　var x = (this._x-_root.frame_mc._x)/3;
　　　　var y = (this._y-_root.frame_mc._y)/3;
　　　　_root.frame_mc._x += x;
　　　　_root.frame_mc._y += y;

　　　　//枠を回転させる処理--------------------------------------------------
　　　　_root.frame_mc._rotation = x;

　　　　//枠がロールオーバーしたメニュー位置にたどり着いたか判断
　　　　//　端数がでると等しくならないかもしれないのでMath.floor()で対処
　　　　//　bx, byにはtrueかfalse入る
　　　　//--------------------------------------------------------------------
　　　　var bx = (Math.floor(this._x) == Math.floor(_root.frame_mc._x));
　　　　var by = (Math.floor(this._y) == Math.floor(_root.frame_mc._y));

　　　　//bx,byが両方trueの時(＝枠がメニュー位置に付いた時)
　　　　if (bx && by) {
　　　　　　//フレーム毎の処理終了
　　　　　　this.onEnterFrame = null;
　　　　}
　　};
}
//Ｅｎｄ------------------------------------------------------------------
/*
_root.frame_mc._rotation = x と指定したのは枠を回転させるため。
ロールオーバーしたメニューのx座標と枠のx座標が
30ピクセル離れていたら30度傾く。2つの距離は徐々に近づいていくため
xは0に近づいていくので枠の傾きは0度に戻っていく。
*/

回答No.2

noname#35109

＃１です。
スミマセン，ギブアップ！ です。
どなたか回答お願いします。

> マウスポイントをちかづけるとうぃーんとまわるような感じ？
> がどうすればできるのかしりたいです。
> 自分のウェブサイトのメニューにしたいんです。

あれ，マウスポイントをちかづけるとうぃーんとまわるんですか。
なんか変なメニューだなと思って見ていてはいたんですけど，
家のPC低スペックなのでしょう。
とても回っているようには見えないので，どんな動きなのかがさっぱりわからないんですよ。
カクカク変なシーン変化をするとは思ったんですけどね。

Flash の動きがわからないから回答できないというのは
始めての経験なのですけどすみません。回答できません。
だいたいそもそも sin cos 系 は苦手なのですよ。
sin cos 系なのかどうかもよくわかりませんが，なんかそんな気はします。　
sin cos 系 ＋ swapDepths ???
m(_ _"m)........

回答No.1

noname#35109

キャラクター紹介というのは，
各キャラクターの紹介部分の３D動画の部分ですか？

もしそうだとすれば，
３D動画の部分はFlashでは作成不可能です。
（パラパラマンガの要領で１コマずつ数年掛けて作ればれば別ですけど。）
Shade のような ３D作成ソフトで３D動画を作って，
その動画を Flash に埋め込んでいるのでしょう。
「Shade online ホーム」
http://shade.e-frontier.co.jp/

こんなソフトもあるらしいです↓。

「新感覚3DCG動画作成ソフト
Motion Impact　1枚の写真が立体ムービーに？！」
http://allabout.co.jp/internet/cg/closeup/CU20041213A/index.htm

先日このカテゴリ界隈の方が紹介されていたソフトですが，
こんなのもあるとか↓。

「Swift 3D」
http://www.dstorm.co.jp/products/swift3d/gallery/index.htm

一般的にはおそらく Shade ではないかと思いますが，
３つ目の「Swift 3D」 なんかは軽くて良さそうです。

「Swift 3D」を除いては動画が出来たら，それを埋め込むだけです。

補足

お返事ありがとうございます。
キャラクターの部分もいいなと思うんですけど
マウスポイントをちかづけるとうぃーんとまわるような感じ？がどうすればできるのかしりたいです。
自分のウェブサイトのメニューにしたいんです。

ちなみに私のフラッシュのスキルは初心本のボタンの作成で終わってるので、難しいことをいわれてもわかりません(* ^ー゜)