Flashのサンプルを探しています。

質問

こんにちは。いつもお世話になっています。
現在、Flashのサンプルを探しています。

画面に画像がバラバラに散らばっていて、ボタンを押すとそれぞれのボタンに関連した画像だけが集まってくる。
例えば、「花」というようなボタンを押すと、花の画像だけが集まる感じです。
このようなFlashを制作したいのですが、それに似たサンプルはないでしょうか？
教えて頂けると助かります。よろしくお願い致します。

回答No.1

BlurFiltan · ベストアンサー

お持ちのFlashのバージョンを書かれていらっしゃいませんよ。。。

仮にそのようなサンプルがあったとしても，
バージョンによって説明が全く違っていたり，
サンプルファイル（.fla）が開けない可能性もあります。

また

> それぞれのボタンに関連した画像だけが集まってくる。

これは 「どこにどのように集まってくる」 のでしょうか？

　画面の上の方にランダムに集まる　とか，
　画面の中央にキッチリ整列するように集まる　とか，
　ボタンの周囲に円を作るように集まる　とか，とか，とか…

この 「集まる」 １つを考えただけでも無限通りの可能性があります。

また，
「それぞれのボタンに関連した画像だけが集まってくる。」 までは良いとして，
（良くありませんが，仮にそこまではわかったとして，）
次に，違うボタンが押されたときはどうなるのでしょうか？
違うものがどんどん集まって来て良いのでしょうか？
それとも，元の位置に帰るべきなのでしょうか？

とにかく無数の場合があります。
ですから，ピッタリの（それに似た）サンプルなどない（まず見つからない）と思います。

上で書いた理由からサンプルを探す気力などは湧かないので，
なるべく，
「どのように集まる場合でも対応できるのではないかと思えるもの」
を考えてみました。

ただし，バージョンは勝手に決めています。

Flash MX 2004 以上（MX2004，8，CS3，CS4）をお持ちで，
ActionScript2.0 を使う場合で，
Flash Player 7 用以上の SWF を作成する場合の方法です。

=========

１つのレイヤーに，
花なら花に関するものだけを用意して，
それぞれをムービークリップに変換します。
ムービークリップに変換するときの「基準点」はどこでも良いと言えばどこでも良いのですが，
一応 「中央」 に統一しておくのが良いのではないかと思います。

そして 「こう集まってほしい」 という状態に配置します。

そしてそれらのムービークリップに重複がないように違うインスタンス名を付けます。
花に関するものがいくつあるのか知りませんが，
仮に 5 つあったとすれば，例えば，
「hana0」，「hana1」，「hana2」，「hana3」，「hana4」
というように，半角英字の任意の文字列 + 0 から始まる連番付きのインスタンス名を付けます。
どのムービークリップに，どのインスタンス名を付けてもかまいません。
「重複しないように」 「半角英字+連番」 という規則があればそれで良いです。

---

また別の１つのレイヤーに，
例えば星なら星に関するものだけを用意して，
それぞれを花と同様にムービークリップに変換します。

そしてこれも 「こう集まってほしい」 という状態に配置します。

そしてそれらのムービークリップにも重複がないように違うインスタンス名を付けます。
仮に星に関するものが 5 つあったとすれば，例えば，
「hosi0」，「hosi1」，「hosi2」，「hosi3」，「hosi4」
というように，半角英字の任意の文字列 + 0 から始まる連番付きのインスタンス名を付けます。

---

他があっても同様です。
別の１つのレイヤーに同じ種類のムービークリップを配置してインスタンス名を付けます。
この説明では，鳥に関する 「tori0」，「tori1」，「tori2」，「tori3」，「tori4」 があるものとします。

【参考図↓】

---

さらにボタン用レイヤーを作成して，
「花」を集めるボタン，「星」を集めるボタン，「鳥」を集めるボタン，…
を作成配置します。

そして
「花」のボタンには，「hana_btn」
「星」のボタンには，「hana_btn」
「鳥」のボタンには，「hana_btn」
というようなインスタンス名を付けます。

---

さらにActionScript用レイヤーを作成して，
そのレイヤーのフレームに次のようなスクリプトを書けば完成です。

/////////////////////////////////////////////////////
// hana0～hana? の最終番号 ? を設定
var hana_last:Number = 4;
// hosi0～hosi? の最終番号 ? を設定
var hosi_last:Number = 4;
// tori0～tori? の最終番号 ? を設定
var tori_last:Number = 4;

// 拡散させる範囲の左座標を設定
var areaL:Number = 60;
// 拡散させる範囲の右座標を設定
var areaR:Number = Stage.width;
// 拡散させる範囲の上座標を設定
var areaT:Number = 0;
// 拡散させる範囲の下座標を設定
var areaB:Number = Stage.height;

// 移動させるスピードを設定(0～1の範囲で)
var speed:Number = 0.2;

// --- 以上が設定値 ---

// hana○ を動かすキーとなる番号 □ の初期化
var hana_num:Number = 1;
// hosi○ を動かすキーとなる番号 □ の初期化
var hosi_num:Number = 1;
// tori○ を動かすキーとなる番号 □ の初期化
var tori_num:Number = 1;

// 花に関するループ
for (var i:Number = 0; i<=hana_last; i++) {
// hana○内の変数x0に今現在のx座標を記録
this["hana"+i].x0 = this["hana"+i]._x;
// hana○内の変数y0に今現在のy座標を記録
this["hana"+i].y0 = this["hana"+i]._y;
//
// hana○内の変数x1に拡散時のx座標を代入
this["hana"+i].x1 = areaL+Math.random()*(areaR-areaL);
// hana○内の変数y1に拡散時のy座標を代入
this["hana"+i].y1 = areaT+Math.random()*(areaB-areaT);
//
// hana○を拡散時の座標に配置
this["hana"+i]._x = this["hana"+i].x1;
this["hana"+i]._y = this["hana"+i].y1;
//
// hana○に onEnterFrame イベントハンドラメソッドを定義
this["hana"+i].onEnterFrame = function():Void {
// hana○のx座標をhana○内の変数 x□ に近付ける
this._x += (this["x"+hana_num]-this._x)*speed;
// hana○のy座標をhana○内の変数 y□ に近付ける
this._y += (this["y"+hana_num]-this._y)*speed;
};
}

// hana_btn クリック時の動作を定義
hana_btn.onRelease = function():Void {
// 花に関するループ
for (i=0; i<=hana_last; i++) {
// hana○ を最高深度に移動
_root["hana"+i].swapDepths(_root.getNextHighestDepth());
}
//
// hana○ を動かすキーとなる番号 □ を 0 にする
hana_num = 0;
// hosi○ を動かすキーとなる番号 □ を 1 にする
hosi_num = 1;
// tori○ を動かすキーとなる番号 □ を 1 にする
tori_num = 1;
};

// 星に関するループ
for (var i:Number = 0; i<=hosi_last; i++) {
// hosi○内の変数x0に今現在のx座標を記録
this["hosi"+i].x0 = this["hosi"+i]._x;
// hosi○内の変数y0に今現在のy座標を記録
this["hosi"+i].y0 = this["hosi"+i]._y;
//
// hosi○内の変数x1に拡散時のx座標を代入
this["hosi"+i].x1 = areaL+Math.random()*(areaR-areaL);
// hosi○内の変数y1に拡散時のy座標を代入
this["hosi"+i].y1 = areaT+Math.random()*(areaB-areaT);
//
// hosi○を拡散時の座標に配置
this["hosi"+i]._x = this["hosi"+i].x1;
this["hosi"+i]._y = this["hosi"+i].y1;
//
// hosi○に onEnterFrame イベントハンドラメソッドを定義
this["hosi"+i].onEnterFrame = function():Void {
// hosi○のx座標をhosi○内の変数 x□ に近付ける
this._x += (this["x"+hosi_num]-this._x)*speed;
// hosi○のy座標をhosi○内の変数 y□ に近付ける
this._y += (this["y"+hosi_num]-this._y)*speed;
};
}

// hosi_btn クリック時の動作を定義
hosi_btn.onRelease = function():Void {
// 星に関するループ
for (i=0; i<=hosi_last; i++) {
// hosi○ を最高深度に移動
_root["hosi"+i].swapDepths(_root.getNextHighestDepth());
}
// hosi○ を動かすキーとなる番号 □ を 0 にする
hosi_num = 0;
// hana○ を動かすキーとなる番号 □ を 1 にする
hana_num = 1;
// tori○ を動かすキーとなる番号 □ を 1 にする
tori_num = 1;
};

// 鳥に関するループ
for (var i:Number = 0; i<=tori_last; i++) {
// tori○内の変数x0に今現在のx座標を記録
this["tori"+i].x0 = this["tori"+i]._x;
// tori○内の変数y0に今現在のy座標を記録
this["tori"+i].y0 = this["tori"+i]._y;
//
// tori○内の変数x1に拡散時のx座標を代入
this["tori"+i].x1 = areaL+Math.random()*(areaR-areaL);
// tori○内の変数y1に拡散時のy座標を代入
this["tori"+i].y1 = areaT+Math.random()*(areaB-areaT);
//
// tori○を拡散時の座標に配置
this["tori"+i]._x = this["tori"+i].x1;
this["tori"+i]._y = this["tori"+i].y1;
//
// tori○に onEnterFrame イベントハンドラメソッドを定義
this["tori"+i].onEnterFrame = function():Void {
// tori○のx座標をtori○内の変数 x□ に近付ける
this._x += (this["x"+tori_num]-this._x)*speed;
// tori○のy座標をtori○内の変数 y□ に近付ける
this._y += (this["y"+tori_num]-this._y)*speed;
};
}

// tori_btn クリック時の動作を定義
tori_btn.onRelease = function():Void {
// 鳥に関するループ
for (i=0; i<=tori_last; i++) {
// tori○ を最高深度に移動
_root["tori"+i].swapDepths(_root.getNextHighestDepth());
}
// tori○ を動かすキーとなる番号 □ を 0 にする
tori_num = 0;
// hana○ を動かすキーとなる番号 □ を 1 にする
hana_num = 1;
// hosi○ を動かすキーとなる番号 □ を 1 にする
hosi_num = 1;
};
/////////////////////////////////////////////////////

これを適当にカスタマイズしてみてください。
全体的には，

　各ムービークリップの中に
　　x0 ←最初に配置したムービークリップのx座標
　　y0 ←最初に配置したムービークリップのy座標
　　x1 ←ランダムに散らばったときのx座標
　　y1 ←ランダムに散らばったときのy座標
　という ４つの変数 を用意しておいて，
　ボタンによって各ムービークリップが移動する目標座標を
　(x0，y0) にするか， (x1，y1) にするかを切り替える。

というだけの内容です。

もしわからないスクリプトがあれば検索などしてもらうしかありませんが，
検索しようにも検索しにくいのが，
　this["hana"+i].x0
のように，頻繁に出てくる [ ] です。
[ ] を 「配列アクセス演算子」 と言います。
上のスクリプトでは 「配列」 は一切使用していません。
上のスクリプトで使った [ ] は配列とは無関係です。

これもわからない場合は Google や ヘルプ を検索してみてください。
「配列アクセス演算子」 は ActionScript1.0 ～ 3.0 まで共通で使うことができます。
（ただし Flash Lite 1.0 や 1.1 では使えません。）

スクリプトが長いですが，
ユーザ定義関数 を作成して，
ムービークリップの名称を引数としてその関数を実行するようなしくみなどを考えると，
スクリプトの行数は半分以下にできると思います。
その他，配列 を用意してムービークリップなどのデータを管理すると，
さらに短く出来る上，もっと使いやすくなると思います。

短く使いやすくしても良いのですが，
それだと，理解がしにくくなる（どこをどう変えれば良いのか見当がつかなくなる）と思ったので，長いままにしてあります。

「完成品サンプル」と「理解しやすいサンプル」とは全く違います。
ご質問の場合「どう集めたいのか」などがハッキリしていませんから，
理解できない「完成品」を用意してもダメでしょう。

=========

上の スクリプトを使うには Flash MX 2004 以降が必要です。
しかし，もし その前のバージョン Flash MX しかお持ちでない場合は，
変数や関数の型指定部分を全部取って ActionScript 1.0 に落とした上で，
○○.swapDepths(_root.getNextHighestDepth());
の getNextHighestDepth() を工夫して自作すればできます。
一般的にはバージョンが低いほど，面倒が増えます。

Flash 5 以下では全く通用しません。
ムービーの作り方などからやりなおしです。
さらにさらに 面倒が増えます。

ActionScript 3.0 を使いたい場合は，
考え方は同じで出来ますから，
ActionScriptを全部作成しなおしてください。

以上を見てわかると思いますが，
これだけでも長いです。各バージョン対応で一々回答できません...。

お礼

質問があまりにも雑でした。すいません。
なのに、こんなに詳しく回答してくれてありがとうございます。
バージョンはCS3なので、これで出来ました。
あとはちょっとずつ手を加えていけば完成しそうです。
次、何か質問する際には、今回の雑な質問をしないようにも心がけます。
なんだか、それまで教えてもらって、すみません・・・。
本当にありがとうございました。心から感謝です。