長方形がランダムに消えるやつ

Question

http://www.gamba-osaka.net/
で使われている、白い長方形がランダムにひらひらと透明になっていくの、どうやって作っているのでしょう。アニメーションでも地道に作ればできないことはないですが、actionscriptで一発でできると聞いたことがあるので、その方法を知りたいです。

sassakun · Accepted Answer

「actionscriptで一発で」ですか…

本当の一発もできないこともないと思いますけど，とてつもない（こともない？）スクリプトになる上，
カスタマイズしにくくなります。

もし本当に一発でするなら，
次の１～４のようなスクリプトを考えて，うまく動作させる流れになると思います。

１ createEmptyMovieClip() で空のムービークリップを等間隔で作成して，
「Flashドキュメンテーション　createEmptyMovieClip」
http://livedocs.macromedia.com/flash/8_jp/main/0 …

２その中に長方形を描いて，
「基本的な図形の直接制御１」
http://po6.nsk.ne.jp/~snget/flash/f1-2.htm

３ランダムに
「Math.random() でランダムな整数を取得する方法」
http://www.macromedia.com/jp/support/flash/ts/do …

４それらのムービークリップのアルファをonEnterFrameで下げる
「パンダが行ったり来たり」
http://hima.chu.jp/flash/ActionScript/as_4.htm

ActionScript でアニメーションさせる場合，
大半はアニメーションさせるオブジェクトがまずあります。
そして，そのオブジェクトのプロパティ（ｘｙ座標，色，深度，透明度など）や変数を変えたり，
そのオブジェクトに stop() とか gotoAndPlay() とか getURL() などという命令をすることによって動かします。

書かれている URL の場合だと，
オブジェクトとは，「白から透明に変わる長方形」のことです。

上記１～４のようにして，
オブジェクト自体も ActionScript で作ってしまうとかえって大変ですから，
ある程度は手作業で用意して，手作業では出来ない部分をスクリプトにする方が良いと思います。

= * = * = * = * = * = * = * = * = * = * = * = * =

以下は私だったらこんな感じにするのではないかという例です。

大きな流れは，
モーショントゥイーンで，白から透明に変わるムービークリップを１つ用意し，
それをコピーでステージ上にしきつめ，
ActionScript によって，
それらのムービークリップがランダムに白から透明になるように
ランダムに play() を開始させるという方法です。

まず，
適当な大きさの長方形の白い塗りを矩形ツールでステージ上に描きます。
ステージの背景色も白だと見にくいので，
ドキュメントの設定などからステージの背景色を暗めの色にしておく方が良いと思います。
当然背景色は仮のものですから，何色でも良いです。
そして，その白い塗りを，「修正」→「シンボルに変換」でムービークリップにします。
次に，そのムービークリップをダブルクリックして，ムービークリップ内の編集に入ります。

ムービークリップの編集に入ると，
さっき作った白い塗りがあると思うので，
その白い塗りを「修正」→「シンボルに変換」で今度は「グラフィックシンボル」にします。

そして，ムービークリップ内のタイムラインのフレームを伸ばして，20フレームくらいにします。
最終フレームをキーフレームにして，
そのキーフレームのグラフィックシンボルのアルファを 0 にします。
アルファ 0 は最終フレームのグラフィックシンボル選んだ状態で，
下に表示されるプロパティインスペクタ(パネル)の右の方で，

　　カラー：[なし　　　　▼]

となっている部分を

　　カラー：[アルファ　　▼]　　[0％　　　]▼

にしてもらうとそのグラフィックシンボルはアルファ 0 になります。

それで，フレーム1 ～最終フレームをモーショントゥイーンでつなぎます。
これで，白からだんだん透明になるムービークリップができあがります。
勝手にスタートやループをしてくれると困るので，
レイヤーを１つ追加し，そのレイヤーの最終フレームもキーフレームにして，
フレーム1 と最終フレームに「stop();」を書きます。

レイヤーを図示すると次のような感じです。

　　　　　　　　 stop();↓　　　　　　　stop();↓
　□　レイヤー　筆・・|○　　　　　　　　　 []|○|
　□　レイヤー　筆・・|●>----------->[]|●|
　　　　　　アルファ100↑　　　　　　アルファ0↑

これで，ムービークリップの準備は終わり。
「編集」→「ドキュメントの編集」などで，メインムービーの編集に戻ります。

上で作ったムービークリップを，コピペで増やし，隙間なくステージ上に並べます。
ステージからはみだすくらいに並べて，
全体を選択して，複数のムービークリップを縮小させ，ステージの大きさに合わせると楽です。

そして，たくさん並んだMC（ムービークリップ）の１つ１つにインスタンス名を付けて行きます。
この説明では「MC1」「MC2」… …「MC？」とインスタンス名を付けたとしておきます。

そして，スクリプトを書くためのレイヤーを追加して，
そのレイヤーに次のようなスクリプトを書けば，
MC1～MC？が，ランダムにスタートしはじめます。

====================================
// 長方形の数を設定(可変)
n = 20;

// MC1～n をフレーム1 で stop させる
for (i=1; i<=n; i++) {
_root["MC"+n].gotoAndStop(1);
}

// 変数 MCNum の初期化
MCNum = 0;

//------重複を許さない順列の作成-(※注↓)-//
// randArrという配列を作成
randArr = new Array();
// randArrの1～nの要素（エレメント）に乱数を取得
for (i=0; i<n; i++) {
randArr[i] = Math.random();
}

// permArrという配列を作成
permArr = new Array();
// permArrの要素を初期化
for (i=0; i<n; i++) {
permArr[i] = 0;
}

// randArr の各要素に入った数の
// 大きさの順を permArr の要素に並べる
for (j=0; j<n; j++) {
for (i=0; i<n; i++) {
if (randArr[j]>=randArr[i]) {
permArr[j] += 1;
}
}
}

//------関数 tellMC の定義------//
function tellMC() {
// 変数 MCNum に1を加算
MCNum++;
// 変数 MCNum が n を越えたら
if (MCNum>n) {
// setInterval を終了
crearInterval(ID1);
// 変数 MCNum が n を越えない場合
} else {
// MC1～n のどれかを gotoAndPlay(2) させる
_root["MC"+permArr[MCNum-1]].gotoAndPlay(2);
}
}

//--- tellMC を ○ミリ秒ごとに実行---//
// 300ミリ秒ごとに実行(可変↓)
ID1 = setInterval(tellMC, 300);
====================================

上のスクリプトの場合，

// 長方形の数を設定(可変)
n = 20;

と，

// 300ミリ秒ごとに実行(可変↓)
ID1 = setInterval(tellMC, 300);

を変えるだけでコピペで使用出来ると思います。

しかしランダムにスタートさせるだけでも，結構大変なスクリプトでしょう。
普通のランダムなら簡単です。
例えば 20 個の MC があったとして，
本当にランダム関数だけでランダムにスタートさせるともっと簡単なのですが，
それだと，いつまでたってもスタートしない物が出てきたり，何度もスタートするものが出てきてしまいます。
だから上のように重複を許さないランダムな順列を作って，
その順列に従ってMCをスタートさせなければならないので大変です。

　スクリプト中の (※注↓) の説明

　重複しないランダムな順列の作り方は，
　他の方法でもできますが，
　一応，他言語でもよく使われる方法でスクリプトを組みました。

　配列 randArr には
　　(0.0464299493469298,
　　　　0.804838167037815,
　　　　　　0.113816660828888,
　　　　　　　　0.867104816716164,
　　　　　　　　　　0.604140473529696)
　などいう乱数の要素（エレメント）が得られます。

　この各要素を比べて，配列permArrに
　　(1,4,2,5,3)
　という小さいもの順の新たなる要素を得ます。
　すると，この　(1,4,2,5,3)　は重複しない順列になります。

　なおこの考え方は
　岐阜大学総合情報メディアセンター
　村瀬康一郎さんの１００マス計算のExcelの関数
　http://www.crdc.gifu-u.ac.jp/edsoftdb/
　を参考にさせて頂きました。
　C言語などでもよく使われる方法のようです。

重複しないランダムな順列の作り方は他にもあります。
良かったら次のURLを参考にしてみてください。
「質問：ランダムに数字を並び変える方法は」
http://oshiete1.goo.ne.jp/kotaeru.php3?q=881637
　　↑教えて！goo　　↓OKWave　（同じです）
http://okwave.jp/kotaeru.php3?q=881637
＃３の方が，配列の要素を並び替えるという方法で重複をしない順列を作る方法を紹介されています。

上で書いたスクリプトの話に戻りますが，最初の方の

// MC1～n をフレーム1 で stop させる
for (i=1; i<=n; i++) {
_root["MC"+n].gotoAndStop(1);
}

はなぜあるかと言うと，
上で作ったのは１フレームだけですが，
複数フレームを使って，
何回も上のスクリプトを使うとき，
何回もそれぞれの MC をフレーム1でストップさせないとならないからです。

もし上のように１回だけランダムで白い四角が透明になるのでしたら，
// MC1～n をフレーム1 で stop させる
の部分のスクリプトはいりません。

// 300ミリ秒ごとに実行(可変↓)
ID1 = setInterval(tellMC, 300);

に関しては，ここら辺が参考になると思います。
http://hakuhin.hp.infoseek.co.jp/main/as/fps.htm …

余裕があれば，最初に書いた
１ createEmptyMovieClip() で空のムービークリップを等間隔で作成して，
２その中に長方形を描いて，
３ランダムに
４それらのムービークリップのアルファをonEnterFrameで下げる

みたいなスクリプトを組んでみてください。
気が遠くなりそうで私にはできません。
また，スクリプトだけはできたとしても，
どんな状況でも使え，また誰でも理解して使えるように説明するのはとうてい無理のような気がします。

長方形がランダムに消えるやつ

「actionscriptで一発で」ですか…

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング