[ActionScript3]スライダーバーでのっかり

blog.katsuma.tvさんのこのエントリーを読んで「そういえば自分もスライダーバーらしいコンポーネントつくったな〜」と昔のプロジェクト漁って出てきたソースを貼ってみる。

• SliderControl.as

package
{
   import flash.display.*;
   import flash.events.*;

   public class SliderControl extends Sprite
   {
      public function SliderControl( _initPos:Number=0
                                    ,_width:Number=100
                                    ,_height:Number=20
                                    ,_barWidth:Number=80){
         var container:Sprite = this;
         container.graphics.beginFill(0x000000,1.0);
         container.graphics.drawRect(0,0,_width,_height);
         container.graphics.beginFill(0xCCCCCC,1.0);
         container.graphics.drawRect(1,1,_width-2,_height-2);
         
         var bar:Sprite = container.addChild(new Sprite()) as Sprite;
         bar.graphics.lineStyle(2,0x000000,1.0);
         bar.graphics.lineTo(_barWidth,0);
         bar.graphics.endFill();
         bar.x = (_width-_barWidth)/2;
         bar.y = _height/2;
         
         var barBtn:Sprite = bar.addChild(new Sprite()) as Sprite;
         _initPos= _initPos>1?1:(_initPos<0?0:_initPos);
         barBtn.x = _initPos*_barWidth;
         barBtn.graphics.lineStyle(1,0x000000,1.0);
         barBtn.graphics.beginFill(0xAAAAAA,1.0);
         barBtn.graphics.moveTo( 0,-5);
         barBtn.graphics.lineTo(-4,-1);
         barBtn.graphics.lineTo(-4, 3);
         barBtn.graphics.lineTo( 3, 3);
         barBtn.graphics.lineTo( 3,-2);
         barBtn.graphics.lineTo( 0,-5);
         barBtn.graphics.endFill();
         barBtn.buttonMode=true;
         barBtn.useHandCursor=true;
         
         var drag:Boolean = false;
         var stageMouseMoveHandler:Function=function(event:MouseEvent):void{
            if(drag){
               var barBtnX:Number = barBtn.x;
               if(0<=bar.mouseX && bar.mouseX <= _barWidth){
                  barBtn.x=bar.mouseX;
               }else if(bar.mouseX<0){
                  barBtn.x=0;
               }else if(_barWidth<bar.mouseX){
                  barBtn.x = _barWidth;
               }
               if(barBtnX!=barBtn.x){
                  var newEvent:SliderbarEvent = new SliderbarEvent("change");
                  newEvent.pos = barBtn.x/_barWidth;
                  container.dispatchEvent(newEvent);
               }
            }
         };
         var stageMouseUpHandler:Function=function(event:MouseEvent):void{
            drag=false;
            stage.removeEventListener(MouseEvent.MOUSE_MOVE,stageMouseMoveHandler);
            stage.removeEventListener(MouseEvent.MOUSE_UP,stageMouseUpHandler);
         };
         container.addEventListener(MouseEvent.MOUSE_DOWN,function(evt:MouseEvent):void{
            drag=true;
            stage.addEventListener(MouseEvent.MOUSE_MOVE,stageMouseMoveHandler);
            stage.addEventListener(MouseEvent.MOUSE_UP,stageMouseUpHandler);
            var barBtnX:Number = barBtn.x;
            if(1<=bar.mouseX && bar.mouseX <= _barWidth){
               barBtn.x=bar.mouseX;
            }else if(bar.mouseX<1){
               barBtn.x=1;
            }else if(_barWidth<bar.mouseX){
               barBtn.x = _barWidth;
            }
            if(barBtnX!=barBtn.x){
               var newEvent:SliderbarEvent = new SliderbarEvent("change");
               newEvent.pos = barBtn.x/_barWidth;
               container.dispatchEvent(newEvent);
            }
         });
         container.addEventListener("update",function(event:SliderbarEvent):void{
            var pos:Number = event.pos>1?1:(event.pos<0?0:event.pos);
            barBtn.x = pos*_barWidth;
         });
      }
   }
}

• SliderbarEvent.as

package
{
   import flash.events.Event;

   public class SliderbarEvent extends Event
   {
      public var pos:Number;
      public function SliderbarEvent(type:String){
         super(type);
      }
   }
}

• BarTest.as

package {
   import flash.display.Sprite;

   public class BarTest extends Sprite
   {
      public function BarTest()
      {
         addChild(new SliderControl(0.5,200,20,180)).addEventListener("change",function(event:SliderbarEvent):void{
            trace(event.pos);
         });
      }
   }
}

• BarTest.swf

自分が書きたいtips的なこと

細かいんですが、MOUSE_MOVEとMOUSE_UPがそのオブジェクト上じゃないとダメっつーのが嫌でStageオブジェクトに逐一addEventListener。そもそもMOUSE_DOWN出来てる時点で表示リストに追加されているという算段。実はこれ、FlashPlayerの描画領域を超えて、さらにはブラウザのウィンドウ領域を超えてマウスイベントが拾えるすぐれものtips。StageオブジェクトのMOUSE_MOVEとMOUSE_UPはStageからのドラッグだとイベントを送出するらしいです。

ちなみに実装が超適当なのは前回に引き続き自分への戒め。特に解説とかはしません。汎用化できるとこはたっぷりあるけど、、、。

ところで、、、

ピュアActionScript（この表現アリ？）なUIコンポーネント群ってないんかな？HTMLで言うbutton、textInput、radio、checkboxぐらいは欲しい。mx.controlsパッケージまでは行かないにしても、基本的なイベントとスキンのカスタマイズ可能な。あってもいいと思うんだが今んとこみたことがない。どーなんだろ？