積み木のような動きのスクリプト

質問

複数のドット（色ベタの四角）を指定した形に並び替えたいと考えています。
想定しているのは下記のような動きです。
1）ドットが崩れた状態で固まっている
　　…1カ所に乱雑に積み重なっているような雰囲気
2）ポインタを重ねる
3）ドットが動き出す
　　…ドットの固まりが少しづつ積み重なっていく
4）指定した形になる
5）ポインタを外すとバラバラと崩れ落ちる
　　…ドットが崩れ、元の乱雑な固まりに戻る

1つ1つのドットをシンボル化し、モーショントゥイーンでコツコツと作っていたのですが、すごく時間がかかってしまい途中で挫折してしまいました。イメージ的には、「積み木を組み立て～崩す」といった感じです。

指定する形は複数あります。（家・メール・人間等）
最初と最後の形を指定すれば、組み立ててくれるような都合のよいスクリプトはないでしょうか？
ネット検索で探しては見たのですが、見つからず…参考になるようなサイトでさえも見つかりませんでした。

イメージだけしかなく、説明もわかりにくいと思いますが、よろしくお願いします。

回答No.1

BlurFiltan · ベストアンサー

ご質問で一番わからない部分は，

> 2）ポインタを重ねる

という部分です。
どこにポインタを重ねるのかがよくわかりませんが，
積み木以外にボタンがあって，
その積み木以外のボタンにポインタを重ねるということにしておきます。

あと，
積み木のおおよその数がわからないのがイメージしにくいところです。
20個 でも 2000個 でも同様のことは表現できると思いますが，
20個 と 2000個 ではひょっとしたらやり方を変えないとならないかも...，
よくわかりませんが。

-----------------------------------
方法例（方法アイデア例）です。

> 最初と最後の形を指定すれば、
> 組み立ててくれるような都合のよいスクリプトはないでしょうか？

普通考えられるのは，
最初と最後の形を座標指定することですが，
その座標指定自体が大変でしょう。

ですから，この部分は，
実際に最初と最後の積み木の形を手動で配置して，
その最初と最後の積み木の座標をPCに記憶させておいて，
後からその座標に近づけるようにすれば良いと思います。

「色ベタの四角」 が仮に 20個 であった場合について説明します。
この 「色ベタの四角」 はムービークリップで作成します。

スクリプトで動かす場合はレイヤーは１つでかまいません。
20個の 「色ベタの四角」ムービークリップ を１つのレイヤーに適当な位置に配置します。

どの 「色ベタの四角」 が，どの名前になっても良いので，
絶対に重複しないように，
また，
絶対に欠番がないように，
その 「色ベタの四角」 ムービークリップに 「文字列+0からの連番」 というインスタンス名を付けます。
ここでは 「block+0からの連番」 というインスタンス名を付けることにしておきます。
「block0」「block1」「block2」…「block18」「block19」
このようなンスタンス名になります。

そして フレーム1 に，
「ドットが崩れた状態で固まっている」
この状態を作成します。

次に フレーム2 をキーフレームにして，
例えば 「家の形」 の状態を作成します。

次に フレーム3 をキーフレームにして，
例えば 「メールの形」 の状態を作成します。

次に フレーム4 をキーフレームにして，
例えば 「人の形」 の状態を作成します。

形が以上 ３種類 である場合は，
このフレーム4までで座標指定の配置作業は終了です。

積み木レイヤーを フレーム5 まで一応伸ばしておいて，
「 2）ポインタを重ねる 」 ボタン用のレイヤーを作成し，
そのボタン用レイヤーのフレーム5に 「 2）ポインタを重ねる 」ボタン を作成しておきます。

そして，
この 「 2）ポインタを重ねる 」ボタン にインスタンス名を付けます。
この説明では 「arrange_btn」 というインスタンス名を付けることにしておきます。

さらに
ActionScript用のレイヤーを１つ作成ます。
そして フレーム1 ～ フレーム5 までをすべて空白キーフレームに変換します。

そして，ActionScript用のレイヤーの フレーム1 には，
次のようなスクリプトを書きます。

----------------------------------
// 積み木の個数を登録 (※変える)
block_n = 20;

// 座標記録配列 posArr (３次元配列)を作成
posArr = new Array();
posArr[0] = new Array();
posArr[0][0] = new Array();
posArr[0][1] = new Array();

// 積み木の座標を posArr0 に記録
for (i=0; i<block_n; i++) {
// block? の x座標を posArr[0][0] に記録
posArr[0][0][i] = _root["block"+i]._x;
// block? の y座標を posArr0[1] に記録
posArr[0][1][i] = _root["block"+i]._y;
}
----------------------------------

そして，ActionScript用のレイヤーの フレーム2 には，
次のようなスクリプトを書きます。

----------------------------------
// 座標記録配列 posArr[1] (２次元要素配列)を作成
posArr[1] = new Array();
posArr[1][0] = new Array();
posArr[1][1] = new Array();

// 積み木の座標を posArr[1] に記録
for (i=0; i<block_n; i++) {
// block? の x座標を posArr[1][0] に記録
posArr[1][0][i] = _root["block"+i]._x;
// block? の y座標を posArr1[1] に記録
posArr[1][1][i] = _root["block"+i]._y;
}
----------------------------------

そして，ActionScript用のレイヤーの フレーム3 には，
次のようなスクリプトを書きます。

----------------------------------
// 座標記録配列 posArr[2] (２次元要素配列)を作成
posArr[2] = new Array();
posArr[2][0] = new Array();
posArr[2][1] = new Array();

// 積み木の座標を posArr[2] に記録
for (i=0; i<block_n; i++) {
// block? の x座標を posArr[2][0] に記録
posArr[2][0][i] = _root["block"+i]._x;
// block? の y座標を posArr[2][1] に記録
posArr[2][1][i] = _root["block"+i]._y;
}
----------------------------------

そして，ActionScript用のレイヤーの フレーム4 には，
パターンはわかると思いますが フレーム2 と 3 の流れと同じく
次のようなスクリプトを書きます。

----------------------------------
// 座標記録配列 posArr[3] (２次元要素配列)を作成
posArr[3] = new Array();
posArr[3][0] = new Array();
posArr[3][1] = new Array();

// 積み木の座標を posArr[3] に記録
for (i=0; i<block_n; i++) {
// block? の x座標を posArr[3][0] に記録
posArr[3][0][i] = _root["block"+i]._x;
// block? の y座標を posArr[3][1] に記録
posArr[3][1][i] = _root["block"+i]._y;
}
----------------------------------

そして，ActionScript用のレイヤーの フレーム5 には，
次のようなスクリプトを書きます。

----------------------------------
// このフレームで停止
stop();

// 動くスピードの登録 (※変える)
spd = 1/15;

// カウント用変数 cnt0 の初期化
cnt0 = 0;
// カウント用変数 cnt1 の初期化
cnt1 = 0;

// 積み木を初期状態（フレーム1状態）に配置
for (i=0; i<block_n; i++) {
// block? の x座標を posArr[0][0][?] にする
_root["block"+i]._x = posArr[0][0][i];
// block? の y座標を posArr[0][1][?] にする
_root["block"+i]._y = posArr[0][1][i];
}
// 1フレーム進む時間毎に随時実行
_root.onEnterFrame = function() {
for (i=0; i<block_n; i++) {
// 積み木の座標を記録しておいた座標に近付ける
_root["block"+i]._x += (posArr[cnt0][0][i]-_root["block"+i]._x)*spd;
_root["block"+i]._y += (posArr[cnt0][1][i]-_root["block"+i]._y)*spd;
}
};

// ボタンにロールオーバーしたときの動作を定義
_root.arrange_btn.onRollOver = function() {
// 変数 cnt1 が posArr の要素数-1 未満であれば
if (cnt1<posArr.length-1) {
// 変数 cnt1 に 1 を加算
cnt1++;
} else {
// それ以外は 変数 cnt1 を 1 にする
cnt1 = 1;
}
// 変数 cnt0 を cnt1 と同じにする
cnt0 = cnt1;
};

// ボタンからロールアウトしたときの動作を定義
_root.arrange_btn.onRollOut = function() {
// それ以外は 変数 cnt0 を 0 に戻す
cnt0 = 0;
};

// ボタンからドラッグアウトしても上と同じ
_root.arrange_btn.onDragOut = _root.arrange_btn.onRollOut;
----------------------------------

Flash のバージョンを書かれていらっしゃいませんが，
上のスクリプトは Flash MX 以上（MX，MX2004，8，CS3）で使用できます。
ただし ActionScript1.0 なので，
CS3 をお持ちの場合は，
SWF パブリッシュ設定 で ActionScript2.0 もしくは 1.0 を選んでください。
ActionScript3.0 設定では動作しません。

お礼

ありがとうございます。
おそらく予想いていただいたイメージだと思います。
ドットも約20個を想定していました。
あとは、これを使いこなせるかですね。頑張ってみます！