ステレオのボリュームのようなアニメーション

質問

ステレオのボリュームのようなアニメーションを
作成しようとしています。
今の段階では同じテンポであまり波打っているような表現ができないのですが、何か参考になるようなサンプル等あれば教えて頂きたいです。
よろしくお願いします。

回答No.1

noname#35109

>> ステレオのボリュームのようなアニメーション

と書かれましても何のことか，またどういう物かよくわかりません。
ボリュームのツマミは勝手に動きませんし…。

良くわかりませんが，
カーステレオなどで見られる，
音量の「イコライザー表示」のことでしょうか？
勝手にそうではないかと想像しました。
もし違っていたら，以下は全然参考にならないと思います。
無視してください。

////////////////////////////////////////////////////////////

「イコライザー表示」のFlashアニメの作り方など，
おそらく何処にもないと思いますよ （探していませんが）。

しかし，「イコライザー表示」自体は何処にでもあります。

そういう場合は，
その物を，じーーーっと，よく観察して，
その動きの法則を見つけ出し，Flash でなんとか実現させれば良いと思います。

全てそれでうまくできるかどうかはわかりません。
でも，見ることができるものであれば，とにかく物をよく観察し，分析すること。
それが大切です。
動きに限らず，絵を描くときはもっとそうです。

ご質問を見て，
私は，Windows Media Player で音楽を再生し，
「表示」を「バーとウェーブ」の「バー」にして，その動きを観察してみました。
すると次のように観察できました。

　～～～ 観察結果 ～～～～～～～～～

　「バー」１本は，音が大きくなったとき跳ね上がり，
　その音より小さければ，ダラ～ッ と短くなる。
　この動きが連続する。

　曲によって違うが，
　イコライザー全体の作る形は，
　平均的に中音の音量が大きいように見える。

　しかし，「バー」１本１本は単独の動きをし，
　どの「バー」が大きく跳ね上がるかわからない。

　～～～～～～～～～～～～～～～～～

これ↑を，Flash で作ってみました。
その作り方を説明します。

「バー」などの部分は全て ActionScript で作成するようにしたので，作り方自体は非常に簡単です。

当然，「バー」などは ActionScript でなくても作成できますが，
「バー」などを手作業で作る場合，
その作成の説明とその読解がおそらく不可能だと思われるので，ActionScript で書きます。

=============================================

Flash で新規ドキュメントを作成して，
ステージ上に四角の塗りを描いてください。
大きさは何でもかまいません。

その四角を選択して，
「ムービークリップ」に変換してください。

変換できたら，
そのムービークリップをダブルクリックして，
ムービークリップ内のタイムラインの編集に移ります。

ムービークリップ内にはさっきの四角い塗りがあると思うので，
その塗りを全て消してください。
結局，空（カラ）のムービークリップが作りたかっただけです。

その，空のムービークリップ内の，フレーム1（空白キーフレームのはず）を選択して，
次のスクリプトを書いてください。
当然，コピペの方が良いと思います。

--------------------------------------
// イコライザの幅の指定（可変）
var equalizer_w = 300;
// イコライザの高さの指定（可変）
var equalizer_h = 150;
// バーの本数の指定（可変）
var bar_num = 20;
// バーとバーの間隔の指定（可変）
var bar_chink = 2;
// ビート感の指定（可変）
var beat = 6;
// 落ちる(バーが短くなる)速さの指定(可変)
var fall_spd = 6;
//
// バー横幅領域の計算
var bar_w = equalizer_w/bar_num;
// カウント c の初期値
var c = 0;
//
// --- イコライザの枠の作成 ---
// 空のムービークリップ equalizerMC を作成
this.createEmptyMovieClip("equalizerMC", 0);
with (this.equalizerMC) {
lineStyle(1, 0xaaaaaa, 100);
moveTo(0, 0);
lineTo(0, -equalizer_h);
lineTo(equalizer_w, -equalizer_h);
lineTo(equalizer_w, 0);
lineTo(0, 0);
}
//
// --- 各バーの作成 ---
// 空のムービークリップ barMC0～barMC? を作成
for (var i = 0; i<=bar_num-1; i++) {
this.createEmptyMovieClip("barMC"+i, i+1);
this["barMC"+i]._x = i*bar_w;
this["barMC"+i]._y = 0;
}
// barMC0～barMC? に緑四角を描画
for (var i = 0; i<=bar_num-1; i++) {
with (this["barMC"+i]) {
beginFill(0x00ff00, 100);
lineStyle(0, 0x000000, 0);
moveTo(bar_chink, 0);
lineTo(bar_chink, -10);
lineTo(bar_w-bar_chink, -10);
lineTo(bar_w-bar_chink, 0);
endFill();
}
}
//
//
// --- バーを動かす ---
// １フレーム進む時間ごとに毎回実行
this.onEnterFrame = function() {
// もしカウント c が beat で割り切れたら
if (c%beat == 0) {
// ビートの揺らぎを作成
c += Math.floor(Math.random()*3);
for (var i = 0; i<=bar_num-1; i++) {
// バーの長さの半分はランダムに
var rand_h = Math.floor(Math.random()*equalizer_h)/2;
// 残りの半分は sin カーブに沿って
var wave_h = Math.sin(Math.PI*(i/bar_num))*equalizer_h/2;
// バーの長さを決定
this["barMC"+i]._height = rand_h+wave_h;
}
} else {
for (var i = 0; i<=bar_num-1; i++) {
// c が beat で割り切れなければ バーを徐々に短く
this["barMC"+i]._height -= fall_spd;
}
}
// カウント c を 1 加算
c++;
};
--------------------------------------

上のスクリプトが書けましたら，
「編集」→「ドキュメントの編集」で，
メインムービーのタイムラインの編集に戻ります。

空のムービークリップが，ステージ上のどこかに，

　○

のように，小さな○であるはずですから，
その ○ をステージの中央よりやや下のやや左にドラッグして移動します。
そして，
そしてそのドキュメントに適当な名前を付けて 任意の場所に保存し，
「ムービープレビュー」もしくは「パブリッシュ」すると，
音量の「イコライザー表示」のアニメーション SWF ができます。
※私の環境では，たった 653 バイト (653 バイト) のSWFができました。

表示したい場所は，
○を動かせば「イコライザー表示」自体が動きます。
大きさや様々なものの調節は，
スクリプトにある，
// イコライザの幅の指定（可変）
のように，（可変）の付いている行の変数の値の設定で変えることができます。
「バー」も20本ですが，本数も増やしたり減らしたりできます。

ドキュメントの背景色は，
緑以外だと何でも良いですが，
「黒」が一番良いとは思います。

※ 上記スクリプトの使用可能環境
　　作成：Flash MX 以上
　　動作：FlashPlayer 6 以上

////////////////////////////////////////////////////////////

以上です。
観察した物や音楽によって，動きは違いますが，
私が観察した感じ，上で作成した物のように見えました。

音量の「イコライザー表示」という勝手な想像で，
ご質問内容とぜんぜん違う物を回答していたら申し訳ありません。

お礼

お礼が遅くなってしまい、大変申し訳ございません。
理由はわからないのですが、私は何も操作したつもり
はなかったのですが、回答は締め切られたどころか、
見る事もできなくなっていました。
そして、だいぶ日にちが経った今日検索したところ、
回答が見られるようになっていました！
そして、sassakunさんが教えてくださったとおりに
やってみましたところ、できました！
コレです、私がつくりたかったのは！
本当に感謝していますと同時に、お礼が言えなかった事を
申し訳なく思います。