ScrollBar - 스크롤바2(슬라이더)

 

- 이번 예제는 스크롤바의 바닥 부분(?)도 클릭하였을때 bar가 클릭한 부분으로 이동되며 그 위치도

  TextField부분에 나오도록 바꾸어 보았다.

  그러기 위해서 stick부분이 원래 단순shape였는데 무비클립으로 바꾸어주고 Sprite로 Linkage해준다.

 

 

- 그리고 인스턴스 네임을 stick으로 준다.

 

 

- 우선 결과물을 보면 이렇다.

 

 

ScrollBarExample.as

[code as3]
package classes.SliderBotton
{
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.geom.Rectangle;

public class ScrollBarExample extends Sprite
{
    public function ScrollBarExample()
    {
         super();

        config();
    }

    //--------------------------------------------------------------
    //
    //     Variables
    //
    //--------------------------------------------------------------
    private var min:Number = 0; //stick의 최소값을 0으로 초기화

    private var max:Number = 200; //stick의 최대값을 200으로 초기화

    private var length:Number = 300; //stick의 길이를 300으로 초기화

    private var pos:Number;

    //--------------------------------------------------------------
    //
    //     Properties
    //
    //--------------------------------------------------------------
    /**
     *    @private
     *    초기값 설정
     */
    private function config() : void
    {
         bar.buttonMode = true; //bar의 마우스모양을 손모양으로 변경
 
         stick.buttonMode = true; //stick의 마우스모양을 손모양으로 변경

         bar.addEventListener( MouseEvent.MOUSE_DOWN, barDownHandler ); //마우스를 눌렀을 때 bar에 이벤트 등록

         stick.addEventListener( MouseEvent.CLICK, stickClickHandler ); //마우스를 클릭했을 때 stick에 이벤트 등록
    }

    /**
     *    @private
     *    bar를 눌렀을 때 움직이는 동작
     */
    private function barDownHandler( e:MouseEvent ) : void
    {
        bar.addEventListener( Event.ENTER_FRAME, showTxt ); //bar를 클릭했을 때 textField에 나올동작을 enterFrame으로 이벤트 등록

        var bounds:Rectangle = new Rectangle( 0, 0, 300, 0 ); //

        bar.startDrag( bounds );

        stage.addEventListener( MouseEvent.MOUSE_UP, stageUpHandler );
    }

    /**
     *    @private
     *    stage에서 MouseUp 이벤트 감지후 제거
     */
    private function stageUpHandler( e:MouseEvent ) : void
    {
         bar.removeEventListener( Event.ENTER_FRAME, showTxt ); //enterFrame이벤트 제거
         
         bar.stopDrag(); //Drag동작을 정지시킴

        stage.removeEventListener( MouseEvent.MOUSE_UP, stageUpHandler ); //stage에서 MouseUp이벤트 제거
    }

    /**
     *    @private
     *    TextField에 위치 출력
     */
    private function showTxt( e:Event ) : void
    {
        pos = Math.round( ( bar.x * ( max - min ) ) / length - min ); //pos변수에 stick과 bar의 위치를 구한 공식을 대입. 변수들이 다 Number로 선언되었기 때문에 round()로 정수로 변환후 대입

        txt.text = String( pos ); //textField에 pos를 String형으로 변환하여 대입
    }

    /**
     *    @private
     *    stick을 클릭했을 때 동작
     *
     *    @param e : EnterFrame동작의 Event
     */
    private function stickClickHandler( e:MouseEvent ) : void
    {
         bar.x = mouseX; //mouse의 x좌표를 bar의 x좌표로 변경

         showTxt(e); //showTxt() 함수를 호출. stick의 위치를 textField로 출력하기 위함
    }
}
}
[/code]

- 저번 예제와 또 다른점은 stick의 길이를 300으로 넓혀주었다. 저번 예제에서는 stick의 길이도 200으로

  하여 그냥 단순히 bar의 x좌표를 String으로 변환하여 textField로 넣어주었는데 이번에는 stick의 길이에

  상관없이 최소값과 최대값을 정하여 그 값으로 나오게 하는 것이다.

 

  이번에는 저번 예제에서 구한 pos라는 비율을 적용해 보았다. 그럼 stick의 길이가 300인데도 불구하고

  min값과 max값을 정하여 원래 값으로 나눠주는 과정에서 200의 비율로 textField값이 나오게 된다.

  또 84번째줄에서 이렇게 해주면 pos와 min, max 등이 Number값이기 때문에 소수점이 나오기 때문에

  Math함수에서 round()메소드를 사용하여 pos값을 0.5값이 나오면 가까운 정수로 올림하여 적용시켜 준다.

  *잠깐, Math.round()에 관한 내용을 보면 이렇다.

 

  93번째 줄에서는 stick 부분을 클릭하였을 때의 동작 부분으로 마우스로 stick부분을 클릭하였을 때 bar를

  이동시키는 방법은 단순히 stick부분을 클릭하는 동작을 마우스가 하게 되므로 마우스의 x좌표를 bar의

  x좌표로 대입시켜주면 bar의 위치가 이동되게 되는 것이다. 그리고 그 값을 bar의 값과 동일하기 때문에

  showTxt()함수를 호출하여 주었다. showTxt()는 위에 이벤트 등록시 매개변수 값으로 이벤트값을 가지고

  오게 되므로 매개변수 값도 함께 넣어서 호출해주었다.