地味にボリュームスライダーみたいのKnob.as

2008/10/1

こんにちは。昨夜Sparkしてきましたよ！
Spark project 勉強会 #03

懇親会で、ネット上でいつもブログ見ている人とかが結構来ていたはずなのですが、何人かの人としか話せませんでした。残念。というか、全く話したことない人の中にとびこんでいくのは、私の性格的になかなかしんどいものがありますね、、。
ただ、beinteractiveさん、fladdictさん、zkさんと会話できたのはうれしかったです。というか緊張しまくって、びびってましたけど、、。。
zkさんに直接サウンド周りの質問ができたのが良かったです。丁寧に教えてくださってありがとうございました。

本題の発表会の方は、なんていうか、超絶すぎて「うーん」とうなされてしまいました。それで、自分もいつかコミットしてみたいなと思いました。いろいろな分野の人の本とかに、「人前でやるとうまくなる」っていうのが書いてあるので、自分もうまくなりたいなぁと。

個人的に興味があった、socketを使ったdangoライブラリはもうじきSparkで公開されるそうです。いや、今でも公開されてはいるんですが、もう少しAS3に特化した部分も含めて公開みたいな。
やっぱりサーバー側を自分で書くのは相当しんどいみたいです。なので、クライアント側を頑張ってみよう。

ところで、サウンド関係をいろいろといじっているんですが、ボリュームスライダみたいのが欲しかったので作りました。

ドラッグすると、0～1の正規化した値がでてきます。
ソースは全部あつめてアップしましたので、興味ある方はどうぞ。

以下ソースです。
本体　Knob.as

package ui
{
  import flash.display.MovieClip;
  import flash.events.Event;
  import flash.events.MouseEvent;
  import flash.geom.Point;

  public class Knob extends MovieClip
  {
    public static const MOUSE_DOWN:String = "mouse_down";
    public static const MOUSE_UP:String = "mouse_up";
    public static const MOUSE_MOVE:String = "mouse_move";
    private var min:uint;
    private var max:uint;
    private var half:uint;
    private var dmax:uint;
    private var range:uint;
    public var value:Number; //0 ~ 1

    public function Knob()
    {
      super();
      initialize();
    }

    public function initialize(initValue:Number = 0, min:uint = 50, max:uint = 130):void
    {
      this.min = min;
      this.max = max;
      half = (max + min) / 2;
      dmax = 180 - max;
      range = 180 + min + dmax;
      setValue(initValue);
      this.addEventListener(MouseEvent.MOUSE_DOWN, downHd);
    }

    private function downHd(e:MouseEvent):void
    {
      setRotation(getDeg());
      setValueByRotation();
      stage.addEventListener(MouseEvent.MOUSE_UP, upHd);
      stage.addEventListener(MouseEvent.MOUSE_MOVE, moveHd);
      dispatchEvent(new Event(MOUSE_DOWN));
    }

    private function upHd(e:MouseEvent):void
    {
      setRotation(getDeg());
      setValueByRotation();
      stage.removeEventListener(MouseEvent.MOUSE_UP, upHd);
      stage.removeEventListener(MouseEvent.MOUSE_MOVE, moveHd);
      dispatchEvent(new Event(MOUSE_UP));
    }

    private function moveHd(e:MouseEvent):void
    {
      setRotation(getDeg());
      setValueByRotation();
      dispatchEvent(new Event(MOUSE_MOVE));
    }

    private function setValueByRotation():void
    {
      var deg:Number = this.rotation;
      var temp:Number;
      if(deg == min)
      {
        temp = range;
      }
      else if(deg == max)
      {
        temp = 0;
      }
      else if(deg < min && deg > 0)
      {
        temp = 180 + dmax + deg;
      }
      else if(deg > max && deg < 180)
      {
        temp = deg - max;
      }
      else if(deg <= 0)
      {
        temp = 180 + deg + dmax;
      }
      value = temp / range;
    }

    private function setRotation(deg:Number):void
    {
      if(deg < min || deg > max)
      {
        this.rotation = deg;
      }
      else if(deg >= min && deg < half)
      {
        this.rotation = min;
      }
      else if(deg >= half && deg <= max)
      {
        this.rotation = max;
      }
    }

    public function setValue(value:Number):void
    {
      this.value = value;
      var temp:Number = range * value;
      var deg:Number;
      if(temp <= dmax)
      {
        deg = max + temp;
      }
      else if(temp > dmax && temp < dmax + 180)
      {
        deg = -180 + temp - dmax;
      }
      else if(temp >= dmax + 180 && temp <= range)
      {
        deg = temp - (dmax + 180);
      }
      setRotation(deg);
    }

    private function getDeg():Number
    {
      var pt:Point = this.localToGlobal(new Point(0, 0));
      var rad:Number = Math.atan2(stage.mouseY - pt.y, stage.mouseX - pt.x);
      return rad / Math.PI / 2 * 360;
    }
  }
}

テスト用ドキュメントクラス

package
{
  import flash.display.MovieClip;
  import flash.display.Sprite;
  import flash.events.Event;
  import flash.text.TextField;

  import ui.Knob;

  public class ButtonTest extends Sprite
  {
    public var knob:Knob;
    public var s1:MovieClip;
    public var s2:MovieClip;
    public var s3:MovieClip;
    public var knob_value:TextField;

    public function ButtonTest()
    {
      super();
      knob.addEventListener(Knob.MOUSE_DOWN, down);
      knob.addEventListener(Knob.MOUSE_MOVE, move);
      knob.addEventListener(Knob.MOUSE_UP, up);
    }

    private function down(e:Event):void
    {
      trace("down");
      setValue();
    }

    private function move(e:Event):void
    {
      trace("move");
      setValue();
    }

    private function up(e:Event):void
    {
      trace("up");
      setValue();
    }

    private function setValue():void
    {
      var value:Number = knob.value;
      s1.alpha = value;
      s2.scaleX = s2.scaleY = value;
      s3.y = (stage.stageHeight - s3.height) * value;
      knob_value.text = value.toString();
    }
  }
}