作り方が知りたいです

質問

flashについて詳しくない者です。

下記URLのクローズアップ部分のようなflashを作ってみたいのですが、このような横にするするっと流れる型のアコーディオンメニューはどうやって作るのでしょうか。ネットサーフィンをしていると、結構みかける形なので、テンプレートでもあるのかと思って質問しました。

http://fanclub.yahoo.co.jp/

なにかご存知の方、解答していただけるとありがたいです。

回答No.1

BlurFiltan · ベストアンサー

auさんのサイトなどでも見かけるパターンですね。
書かれていらっしゃるサイトさんのものもそういうパーターンのものの１種です。

しかし，大手ですから，
市販やフリーのテンプレートは使用しないと思いますし，
そんなに難しいものでもないので，Flash 作成を依頼された方の自作でしょう。

同じようなパターンと言っても，各社違いますよ。
また，考え方や作り方は場合によって様々ですから，
テンプレートの改良でオリジナルな動きを出すのなら，
自作した方が早いと思います。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

まず，
書かれていらっしゃるサイトのFlashをよく観察します。

左端の Gact さんは動きません。
つまり動きは考えなくて良いわけです。

WaT さんから MEGUMI さんは動きます。
ではどう動くのかをさらに観察します。

WaT さんから MEGUMI さんは，
自分より左の人の三角ボタンにロールオーバーしたとき
右の あるポジション を目標に 右 に動きます。
また，
自分を含めて自分より右の人の三角ボタンにロールオーバーしたとき
左の あるポジション を目標に 左 に動きます。

要は，
WaT さんから MEGUMI さんは動きますが，
それぞれ左右２つの目標座標があって，
各ボタンのロールオーバーによって，
その２つの目標座標のうちどちらかに向けて移動するというだけのことです。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

では，作成方法です。

書かれていらっしゃるページのFlashは
Gactさん，Watさん，浅尾さん，中さん，MEGUMIさん の
５人の写真が使われていますから，
実際は何人（何枚）でも良いですが，
５人の写真（５枚の絵）があるとして説明します。

５枚の横長の写真や絵をムービークリップに変換します。
このとき基準点に気を付けます。
基準点は左上のコーナーに設定して，
各写真などをムービークリップに変換します。

そのムービークリップ内のタイムラインの編集に移って，
写真の上に（上レイヤーなどに），
三角印 のついた左横のボタンを用意します。

色を変える場合は複数のボタンが要りますが，
色が１色で良い場合などはボタンを１つ作って，
それを５つのムービークリップ内の写真の上に置いても良いです。

そのムービークリップ内のボタンには，
全て同じインスタンス名を付けます。
この説明では 「_btn」 というインスタンス名を付けておくことにします。

メインのタイムライン（_root）の編集に戻って，
５つのムービークリップにもインスタンス名を付けます。
左から順に，
「p_mc0」 「p_mc1」 「p_mc2」 「p_mc3」 「p_mc4」
というインスタンス名を付けます。

「p_mc0」 「p_mc1」 「p_mc2」 「p_mc3」 「p_mc4」
は右に行くほど上に表示されるように，
また横１列に並べます。

そして，
その写真やボタン入りムービークリップの置いてあるレイヤーとは別に，
新規でレイヤーを作成し，
そのレイヤーのフレーム1に次のような ActionScript を書きます。
コピペ可能です。

---------------------------------------------
// 表示枠の 横幅 を設定（変更可）
w = 600;
// 表示枠の 左側余白 を設定（変更可）
m = 10;
// 表示枚数(p_mc? の個数)の設定（変更可）
n = 5;
// 狭いときに見えている範囲を設定（変更可）
r = 80;
// 動く速さの設定（変更可）
s = 1/5;
//------------------

// 選択番号 p の初期化
p = 0;

// 各 p_mc? を初期座標に設置
_root.p_mc._x = m;
for (i=1; i<n; i++) {
_root["p_mc"+i]._x = m+w-r*(n-i);
}

for (i=0; i<n; i++) {
// 各 p_mc? にローカルな変数 p の値を設定
_root["p_mc"+i].p = i;
// 各 p_mc? のボタン _btn ロールオーバー時
_root["p_mc"+i]._btn.onRollOver = function() {
// 親の p の値を _root の p に代入
_root.p = this._parent.p;
};
}

for (i=1; i<n; i++) {
// 各 p_mc1～p_mc(n-1) の動き
_root["p_mc"+i].onEnterFrame = function() {
// _root の p の値によって目標座標を変える
if (_root.p<this.p) {
this._x += (m+w-r*(n-this.p)-this._x)*s;
} else {
this._x += (m+r*this.p-this._x)*s;
}
};
}
---------------------------------------------

※ 一応，
　 ステージのサイズは書かれていらっしゃるページの
　 Flash同様 620px くらいの幅を想定したスクリプトです。

※ Flash MX 以上で使用可能な ActionScript1.0 です。

結構シンプルでしょう。
これだけのことですからテンプレート屋さんも作りがいがないというか，
使う側もわざわざテンプレート屋さんのものを買う価値なしというか...。
適当に作った方が早いんじゃない？ というような...。
そんな感じです。

枚数やスピードなどは，
//----- より上の数値を変えてくださるだけで変えることができます。
しかしそれ以上のカスタマイズは，
作る方が最初から考えるというパターンになるのではないかと思います。

違うページにリンクを設定してありませんが，
これはムービークリップ内の写真をボタンに変換するどして，
そのボタンに getURL() を書けば良いだけですね。

作りたい物によって，あとは色々変えます。

上のスクリプトで使ったスクリプトに関する参考URL

「繰り返し文 for - FLASHアクションスクリプト入門編」
http://isvalid.jp/actionscriptLab/ASlesson/actionsctipt_for.html

「if if else 文 - FLASHアクションスクリプト入門編」
http://isvalid.jp/actionscriptLab/ASlesson/actionsctipt_if.html

Google検索 「配列アクセス演算子」
http://www.google.co.jp/search?hl=ja&q=%E9%85%8D%E5%88%97%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E6%BC%94%E7%AE%97%E5%AD%90

Flash CS3 ドキュメンテーション
ActionScript 2.0 リファレンスガイド
onRollOver (Button.onRollOver ハンドラ)
http://livedocs.adobe.com/flash/9.0_jp/main/00001457.html

お礼

丁寧な回答ありがとうございます！
時間のある、GWに挑戦してみようと思います。

教えていただいたURLを読みこなせるよう、頑張ります(^_^)