FLASHのお勉強 ーアクションスクリプトの実践的事始めー |
||
|
(17) mp3プレイヤー 2005/4/1 |
||
| FLASH画面にbgmなどのミュージックを流すケースが多々見受けられる。 うるさいと感じる場合もないことはないが、画像の変化や流れを躍動感を持って見せるのに有効である。 今回は、画面上で、音量、左右バランスのコントロールや、プレイ、ポーズ、ストップなどの操作が可能なプレイヤーを作成することとしたい。 本格的なプレイヤーとはいえないが、Flashムービーの補助的役割に使うのには十分と思える。 なお、streaminngや再生の経過表示、volumeの数値表示、曲目選択表示などの機能は、いずれまた、勉強材料にと思っている。 |
||
|
プレイヤーのvolume調節用スライダーや、プレイ、ストップボタンなどを配置するのに、ここでは、Fireworksを使って作成した。 細かい作成方法は省略するが、自分なりのskinを作るのも楽しみの一つである。 ここで作成したものは、それほどさえた出来栄えとは言いがたいが、自作のskinには愛着を感じるものである。 volumeのスライダーは、まずスライダー用ラインを配置し、これをシンボルに変換する。このとき、基準点を真ん中に設定する。 このシンボル(インスタンス名:volume)の編集画面で(ダブルクリックか右上の編集アイコン)つまみ用の矩形を配置しシンボルに変換する(インスタンス名:knob)。 すなわち、knobをvolumeの入れ子にする。 panのスライダーも別のレイヤーに同様に作成する。 新規レイヤーに、ストップボタン、プレイボタン、ポウズボタンを配置する。 このとき、次の3通りの組み合わせを異なるフレームに配置する。 @FRAME1: 初期状態、または、ストップボタンが押された状態。 script:stop(); AFRAME3: プレイボタンが押され、プレイボタンの中央のマークが赤に変わった状態。 BFRAME5: ポウズボタンが押され、ポウズボタンの中央のマークが赤に変わった状態。 |
||
| スクリプト説明の前に.....お勉強 Flashファイルが再生され始めるとBGMとしてSOUNDを流す場合、音を嫌う閲覧者もいるので、音を消す(再生をストップする)ためにstopボタンを設置し、音楽再生のon/off を可能にすることが好ましい。 その方法は、音楽再生の基本になるので、上記プレイヤーのスクリプトに行く前に勉強することにしたい。 なお、ここでは、on を表示さていてこれをクリックすると再生が始まるが、BGMで流すケースでは、音楽を流しておいてoff ボタンをクリックすると止まるようにすることになる。 左のonをクリックすると音楽が流れ、off でストップする、再度onで再生が始まるが、このとき、曲の始めから再度再生が始まる。 一時停止状態にする方法は、プレイヤーのスクリプトを参照願いたい。 準備: ステージにsoundという文字を配置し、その右に矩形を描き、その上にonと文字を入れる。 この矩形をシンボルに変換する。 さらにこの矩形と同じ位置に同サイズの矩形を描き、同様にシンボル変換し、重ね順をonの背後に置く。 次に、曲「strings.mp3」をライブラリーに読み込み、リンケージを同名で設定する。 スクリプト: FRAME1に mySound = new Sound(); mySound.attachSound("strings.mp3"); on に on(release) { mx.behaviors.DepthControl.sendBackward(this); _root.mySound.start(0,10); } off に on(release) { mx.behaviors.DepthControl.sendBackward(this); _root.mySound.stop(); } 青字がSOUNDを操るスクリプトで、attachSound("strings.mp3");はライブラリーにある曲をスタンバイさせるもので、 また、start(0,10)というのは、曲のはじめから、10回再生を繰り返すという意味である。 なお、始めにBGMで流す場合は、FRAME1にもmySound.start(0,10); と記述しておき、off ボタンを上に重ねればよい。 なお、曲は、「Music with Myuu」サイト http://www.ne.jp/asahi/music/myuu/wave/wave.htm から頂いた。 また、次に解説するプレイヤーに使用した曲も、同サイトからD/Lした"asibue"である。 |
||
| MP3プレイヤーのスクリプト スクリプト(ROOT、FRAME1) mySound = new Sound(); mySound.loadSound("asibue.mp3",false); var v:Number=2; _root.onEnterFrame = function() { s_dur = _root.mySound.duration; s_pos = _root.mySound.position; if (s_pos/s_dur>=1) { _root.gotoAndStop(1); } maxV = _root.volume._width; v_pos = _root.volume.knob._x + _root.volume._width/2; vol = Math.floor((100/maxV)*v_pos)*v; _root.mySound.setVolume(vol); maxP = _root.pan._width/2; p_pos = _root.pan.pan_knob._x; pa = Math.floor((100/maxP)*p_pos); _root.mySound.setPan(pa); } 再生ボタン(FRAME1) on(release) { _root.mySound.start(); _root.gotoAndStop(3); } 再生ボタン(FRAME5) on(release) { _root.mySound.start(_root.s_pos/1000,1); _root.gotoAndStop(3); } 一時停止ボタン(FRAME3) on(release) { _root.mySound.stop(); _root.gotoAndStop(5); } 停止ボタン(FRAME3、FRAME5) on(release) { _root.mySound.stop(); _root.gotoAndStop(1); } Volume(Pan) スライダーのノブに on (press) { this.startDrag(true,-62,0,62,0); } on(release) { this.stopDrag(); } on(releaseOutside) { stopDrag(); } |
mySoundの定義 外部mp3ファイル「asibue.mp3」をmySoundとして読み込む。 false:streaming再生しない。(再生するときは、true) ボリュームレベル調整用の係数 frameの進行に応じて load した曲の長さ(ミリ秒)を s_dur とする 再生経過時間(ミリ秒)を s_pos とする もし、曲が終わったら、 FRAME1に移動して止まる 最大音量をvolumeスライダーの長さに置く スライダーの長さの1/2にノブのx座標を加えたものを v_pos とする 音量(vol)の定義 再生音量の設定 左右バランスの最大値をスライダー長さの1/2とする ノブのx座標を p_pos とする 左右バランス音量の設定 音楽スタート FRAME3に移動(再生ボタンが赤に) 一時停止したところから再度再生開始、演奏回数は1回 FRAME3に移動 再生停止 FRAME5に移動(ポウズボタンが赤に変わる) 再生停止 FRAME1に移動(初期状態) このスクリプトがこれまで抜けていました。すみませんでした。2007/10/1 ドラッグ可能範囲の指定 ドラッグ解除 |
|
| 以上、特に難解なスクリプトが無く分かりやすい。 曲の長さや、再生経過時間が分かるので、これを数値なり、バーなりで表示することも可能である。 また曲が終わった時点で、その旨を表示することも可能である。 複数曲の再生などを盛り込めば、なお一層レベルの高いプレイヤーすることが出来るので、いずれかの機会に勉強することにしたい。 |
||
| 追) もう少し分かりやすいスクリプトでPLAYERを作る 2007.10.4 | ||
上で作成したPLYERはボタンの作成が分かり難いのと、スクリプトがインスタンスに分散していて分かりにくいので、これを改良したものを以下に紹介する。 なお、ボリュームやパンを加える場合は上記と同じにすればよい。 |
||
| <SAMPLE> | ||
| <スクリプト> _root、FRAME1 | ||
mySound = new Sound();
mySound.loadSound("eine.mp3", false);
onEnterFrame = function () {
duration = mySound.duration;
position = mySound.position;
if (position/duration>=1) {
gotoAndStop(1);
play_btn.gotoAndStop(1);
}
play_btn.onRelease = function() {
play_btn.gotoAndStop(2);
pause_btn.gotoAndStop(1);
if (pausing) {
mySound.start(position/1000, 1);
pausing = false;
} else {
mySound.start(0, 1);
}
};
pause_btn.onRelease = function() {
pause_btn.gotoAndStop(2);
play_btn.gotoAndStop(1);
pausing = true;
mySound.stop();
};
stop_btn.onRelease = function() {
play_btn.gotoAndStop(1);
pause_btn.gotoAndStop(1);
pausing = false;
mySound.stop();
};
};
|
||
なお、前述のvolume、pan のスライダーを付けた場合は、以下のスクリプトを追加します。
volume.volume_knob.onPress = function() {
this.startDrag(true, -62, 0, 62, 0);
};
volume.volume_knob.onRelease = function() {
this.stopDrag();
};
volume.volume_knob.onReleaseOutside = function() {
stopDrag();
};
pan.pan_knob.onPress = function() {
this.startDrag(true, -62, 0, 62, 0);
};
pan.pan_knob.onRelease = function() {
this.stopDrag();
};
pan.pan_knob.onReleaseOutside = function() {
stopDrag();
};
maxV = volume._width;
v_pos = volume.volume_knob._x+volume._width/2;
vol = Math.floor((100/maxV)*v_pos);
mySound.setVolume(vol);
maxP = pan._width/2;
p_pos = pan.pan_knob._x;
pa = Math.floor((100/maxP)*p_pos);
mySound.setPan(pa);
|
||
| HOME お勉強総リスト | ||