この講座は,flashソフトを用いてflashアニメをスクリプトで制作し無料で公開したものです

FLASH講座 ーアクションスクリプトの実践的事始めー
活用編
(20) mp3プレイヤー
           

 FLASH画面にBGMなどのミュージックを流すケースが多々見受けられます。 うるさいと感じる場合もありますが、画像の変化や流れを躍動感を持って見せるのに有効ですよね。 

今回は、画面上で、音量、左右バランスのコントロールや、プレイ、ポーズ、ストップなどの操作が可能なプレイヤーを作成します。 本格的なプレイヤーとはいえませんが、Flashムービーの補助的役割に使うのには十分です。 なお、streaminngや再生の経過表示、volumeの数値表示、曲目選択表示などの機能は、いずれまた、講座材料にと思っています
プレイヤーのskin  

 プレイヤーのvolume調節用スライダーや、プレイ、ストップボタンなどを配置するのに、ここでは、Fireworksを使って作成した。 細かい作成方法は省略するが、自分なりのskinを作るのも楽しみの一つである。 ここで作成したものは、それほどさえた出来栄えとは言いがたいが、自作のskinには愛着を感じるものである。
 volumeのスライダーは、まずスライダー用ラインを配置し、これをシンボルに変換する。このとき、基準点を真ん中に設定する。 このシンボル(インスタンス名:volume)の編集画面で(ダブルクリックか右上の編集アイコン)つまみ用の矩形を配置しシンボルに変換する(インスタンス名:nob)。 すなわち、nobを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);
}




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に移動(初期状態)
以上、特に難解なスクリプトが無く分かりやすい。 曲の長さや、再生経過時間が分かるので、これを数値なり、バーなりで表示することも可能である。 また曲が終わった時点で、その旨を表示することも可能である。 複数曲の再生などを盛り込めば、なお一層レベルの高いプレイヤーすることが出来るので、いずれかの機会に勉強することにしたい。
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 このサイトで使用しましたflashソフトはflash mx 2004年版(Flash Japan)- flash8 及び FlashCS3-2007年版です。
 flash講座(フラッシュ講座)は、Yoshioka氏(通称、ひげ親父)による制作です。 コツコツと作られたflash素材(flashアニメ、スクリプト)はユーザーの方により保存変更され動画flash(動画フラッシュ)や携帯flash(待受flash)として利用されて来ました。
 氏は、flashスクリプトについての学習を、パソコン塾講師活躍中に始められ、独立した今も続けておられます。 
  macromedia flashソフトは新しくadobe flash時代に入りましたので、これを機会にflash学習サイトを「flash講座1234」としてリニューアルいたしました。 引き続きご愛顧承りますよう、よろしくお願いいたします。                                                                           (by Hiraoka)
 HOME   Flash講座総リスト   アクションスクリプトの実践的事始め-活用編(21)