scrollbar - 스크롤바(슬라이더)

 

- 스크롤바를 만들어 봄으로써 볼륨바, 컨텐스 스크롤, 다양한 조절기능을 할 수 있다.

 

 

 

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

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

        bar.buttonMode = true; //버튼 모드 변경

        bar.addEventListener( MouseEvent.MOUSE_DOWN, downHandler ); //bar에 마우스이벤트 등록
    }

    /**
     *    @private
     *    bar를 mouseDown했을 때의 효과적용
     */
    private function downHandler( e:MouseEvent ) : void
    {
        bar.addEventListener( Event.ENTER_FRAME, showTxt ); //bar에 enterFrame이벤트 등록

        var bounds:Rectangle = new Rectangle( 0, 0, 200, 0 ); //Rectangle클래스 객체 생성 및 초기화

        bar.startDrag( true, bounds ); //lockCenter를 가운데로 true, bounds값 적용, drag 시작

        stage.addEventListener( MouseEvent.MOUSE_UP, upHandler ); //stage에 마우스이벤트 등록
    }

    /**
     *    @private
     *    마우스를 뗐을때 효과적용
     */
    private function upHandler( e:MouseEvent ) : void
    {
        bar.removeEventListener( Event.ENTER_FRAME, showTxt ); //bar에 등록되었던 이벤트 제거

        bar.stopDrag(); //drag 멈춤

        stage.removeEventListener( MouseEvent.MOUSE_UP, upHandler ); //stage에 등록된 이벤트 제거
    }

    /**
     *    @private
     *    텍스트 필드에 값 적용
     */
    private function showTxt () : void
    {
        txt.text = String( bar.x ); //화면에 Text가 bar의 x좌표 값으로 적용
    }
}
}
[/code]


- 이 예제는 네모난 무비클립 bar를 움직일 때 마다 그 위치가 텍스트 필드에 찍히게 하는 예제이다.

  화면에 미리 무비클립을 생성하고 Linkage를 SliderButton으로 해주고, 텍스트 필드는 Dynamic Text로

  설정해준다. Dynamic TexFeild로 해주어야 다른 값들을 받아 올 수 있다.

 

  startDrag에서 bounds를 지정해준 것은 width가 200인 영영안에서만 동작할 수 있도록 보이진 않지만

  드래그의 위치를 bar의 무비클립 시작지점에서 200만큼만 지정해준 것이다.
  그리고 밑에 stage에 이벤트를 등록해준 이유는 3.0에서는 onReleaseOutside라는 이벤트가 없어졌기

  때문에 마우스가 bar의 영역을 벗어나더라도 어디서나 감지 할 수 있도록 더 넓은 범위인 stage로 감지하

  여 remove하도록 이벤트를 걸어주었다.
 

  showTxt함수에서 TextField값을 bar의 x좌표로 적용해줄때 bar.x의 값은 소스에서 정의되어 있지 않아도

  자동 Number값이기 때문에 텍스트로 들어가기 위해서 String으로 변환하여 적용해주는 것이다.

 

  여기서 만약 드래그를 하는데 있어서 0~200의 값이 아닌 0~200범위 안에서 0~100의 범위를 갖게 하려면

  [code as3]
   txt.text = String( bar.x / 2 );
  [/code]
  이런식으로.. 그렇다면 -100~100의 범위를 갖게 하고 싶다면?

  [code as3]
   txt.text = String( ( bar.x / 2 ) * 2 - 100 );
  [/code]
  조금씩 난해해진다.. 그래서 이것을 공식으로 완성시켜보면!

  비례식으로 풀어보면,

  200 : bar.x = ( max - min ) : ( pos - min ) 이 되는데

 

 pos = ( bar.x * ( max - min ) ) / 200 - min

 

  이라는 식이 나온다.

 

  이렇게 나온 결과값으로 showTxt에 bar.x가 아닌 pos를 대입해보면 0~200이 아닌 min과 max의 값에 따라

  원하는 값을 얻을 수 있게 된다.