FLASHのお勉強 ーアクションスクリプトの実践的事始めー

(17) mp3プレイヤー           2005/4/1

FLASH画面にbgmなどのミュージックを流すケースが多々見受けられる。 うるさいと感じる場合もないことはないが、画像の変化や流れを躍動感を持って見せるのに有効である。 今回は、画面上で、音量、左右バランスのコントロールや、プレイ、ポーズ、ストップなどの操作が可能なプレイヤーを作成することとしたい。 本格的なプレイヤーとはいえないが、Flashムービーの補助的役割に使うのには十分と思える。 なお、streaminngや再生の経過表示、volumeの数値表示、曲目選択表示などの機能は、いずれまた、勉強材料にと思っている。 
プレイヤーのskin  

 プレイヤーの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はボタンの作成が分かり難いのと、スクリプトがインスタンスに分散していて分かりにくいので、これを改良したものを以下に紹介する。 なお、ボリュームやパンを加える場合は上記と同じにすればよい。
<準備>
●再生ボタン: 新規シンボルの作成(インスタンス名:play_btn)で、FRAME1に初期状態のシルバーの再生ボタンを、FRAME2に真中のしるしが赤い再生ボタンを配置する。両方のボタンは入れ替わっても同じ位置に表示されるようにしておく。
FRAME1に(念のためにFRAME2にも)stop(); というスクリプトを記入する。
●一時停止ボタン:同様に、新規シンボル(pause_btn)作成画面で、FRAME1にシルバーのボタンを、FRAME2に真中が赤いボタンを配置。FRAME1,2に stop();
●停止ボタンは、1種類(stop_btn)を作成する。
●3つのボタンを以下のように並べる(インスタンス名を忘れずに)。 ボタンのデザイン、並べ方はご自由に。

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、pan_knobになっています。

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   お勉強総リスト