6. 스크롤바 _ (2) 간단한 스크롤바 만들기(마우스 클릭)

저번에 만들었던 스크롤바는 마우스로 Drag & Drog으로 bar를 움직이는 스크롤바였다.

 

그렇다면 이번에는 bar를 움직이지 않고 마우스로 line을 클릭하였을 때 bar가 line을 클릭한위치에 오도록 만들어보자.

 

(1) 간단한 스크롤바 만들기 예제 코드와 플래시 파일을 조금 수정하였다.

 

먼저 플래시 파일의 line을 무비클립으로 만들어 주고 인스턴스명을 line_mc로 하였다.

 

수정된 코드는 아래와 같다.

 

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

public class ScrollBarExample extends Sprite
{
 public function ScrollBarExample()
 {
  super(); // Sprite 객체 생성

  scrollBar_mc.bar_mc.buttonMode = true; // 스크롤바 마우스 오버시 손모양

  // 스크롤바 마우스다운 이벤트 등록
  scrollBar_mc.bar_mc.addEventListener(MouseEvent.MOUSE_DOWN, barMouseDownHandler);

  // 스크롤바 라인 클릭 이벤트 등록
  scrollBar_mc.line_mc.addEventListener(MouseEvent.CLICK, lineClickHandler);
 }

 /**
  *  @private
  *  스크롤바 라인 최소값
  */
 var min:Number = 0;

 /**
  *  @private
  *  스크롤바 라인 최대값
  */
 var max:Number = 300;

 /**
  *  @private
  *  스크롤바 라인 클릭 위치
  */
 var pos:Number;

 /**
  *  @private
  *  스크롤바 라인 클릭
  */
 private function lineClickHandler(event:MouseEvent):void
 {
  // 라인 클릭시 스크롤바 클릭 지점으로 이동
  scrollBar_mc.bar_mc.x = scrollBar_mc.line_mc.mouseX;

  // 라인 클릭 지점 위치 값 표시
  showValue(event);
 }

 /**
  *  @private
  *  스크롤바 마우스 다운
  */
 private function barMouseDownHandler(event:MouseEvent):void
 {
  // 스크롤바 이동 시 값 표시 이벤트 등록
  scrollBar_mc.bar_mc.addEventListener(Event.ENTER_FRAME, showValue);

  var bounds:Rectangle = new Rectangle(0, 0, 300, 0); // 드래그 영역 지정

  // startDrag(lockCenter : Boolean,  bounds : Rectangle)
  // lockCenter : 마우스 클릭 지점을 중심으로 lock 됨
  // bounds : 제한 영역 지정
  scrollBar_mc.bar_mc.startDrag(false, bounds); // 드래그 시작

  //화면 전체 영역에서 마우스 업 되도록 이벤트 등록
  stage.addEventListener(MouseEvent.MOUSE_UP, barMouseUpHandler);
 }

 /**
  *  @private
  *  스크롤바 마우스 업
  */
 private function barMouseUpHandler(event:MouseEvent):void
 {
  // 스크롤바 이동 시 값 표시 이벤트 리스너 제거
  scrollBar_mc.bar_mc.removeEventListener(Event.ENTER_FRAME, showValue);

  scrollBar_mc.bar_mc.stopDrag(); // 드래그 멈춤

  //화면 전체 영역 이벤트 리스너 제거
  stage.removeEventListener(MouseEvent.MOUSE_UP, barMouseUpHandler);
 }

 /**
  *  @private
  *  위치 값 출력
  *
  *  Math.round()  반올림
  *
  *  비례식   (300 - 0) : (bar_mc.x - 0) = (max - min) : (pos - min)
  *          (bar_mc.x - 0) X (max - min) = (300 - 0) X (pos - min)
  *           pos = (bar_mc.x X(max - min)) / 300 + min
  */
 private function showValue(event:Event):void
 {
  // 클릭 지점 위치 계산 : 비례식 사용
  pos = (scrollBar_mc.bar_mc.x * (max - min)) / 300 + min;

  // scrollBar_mc.bar_mc.x 값 Number, scrollBar_mc.txt.text는 Sring이므로
  // String으로 Casting(형변환) 시켜줌
  scrollBar_mc.txt.text = String(Math.round(scrollBar_mc.bar_mc.x));
 }
}
}
[/code]

 

 

회색라인을 클랙해보자. 스크롤바가 클릭 지점 위치로 오는가? 값도 잘 나오는가? 음..

실행이 잘 된다. 그럼 다음시간에는 이를 활용한 예제를 정말로 만들어 보자.