as3でスライダーを構築

一般的な音楽プレイヤーの音量のようなスライド式のコントロールをFlashで構築する場合、コンポーネントからSliderを選択すれば瞬時に設置できます。しかし、デフォルトで用意されているスライダーはなんだか味気ないです。

細かいカスタマイズも可能なようですが、私のようにグラフィックソフトを使い慣れていない人にとっては、もどかしい作業です。

そこで、ActionScriptでスライダーを構築してみました。

黒いバーは背景です。その上の赤のボタン「mc_btn」を設置しています。また、ボタンの位置を取得するためにデバック用のテキストフィールド「mc_text」を置いてあります。

以下、プログラム全体です。

public class Main extends Sprite{
	
	public function Main() {
		
		mc_btn.buttonMode = true;
		mc_btn.addEventListener(MouseEvent.MOUSE_DOWN, startdrag);
		addEventListener(MouseEvent.MOUSE_UP, stopdrag);
		
		function startdrag(e:MouseEvent){
			mc_btn.startDrag(false, new Rectangle(20, 25, 140, 0));
		}
		function stopdrag(e:MouseEvent) {
			mc_btn.stopDrag();
		}
	
		addEventListener(Event.ENTER_FRAME, btnlevel);
		function btnlevel(e:Event) {
			var x:Number = (mc_btn.x - 20) / 140 * 100;
			mc_text.txt.text = Math.floor(x);
		}
	}
}

ボタンが押されるとAS3に用意されているstartDragが実行されます。Rectangleでスライドの稼動範囲を設定するのですが、スタート座標をx:20、y:25とし、x軸の稼動幅を140に設定してあります。y軸には動かせないように0を指定します。

また、ボタンが離されたことをイベントにstopDragを実行し、スライドを終了します。ボタンを離すというイベントMOUSE_UPはボタン上ではなく、Flashエリア全体を指定しましょう。そうしないと、マウスポインタからボタンが離れなくなる現象が発生してしまいます。

最後に、ボタンのx軸の位置を数値化してテキストフィールドに表示します。先ほど指定したように、ボタンはx軸を20から160の範囲、つまり140の長さを移動するので、現在位置を長さで割れば0から100の値を取得できます。

簡単に自作できて、デザインも動きもカスタマイズ自由です。
プログラマ向けかもしれませんが参考になれば幸いです。