6. 스크롤바 _ (1) 간단한 스크롤바 만들기

스크롤바를 이용하여 볼륨, 콘텐츠 등 다양하게 스크롤바를 활용할 수 있다. 그럼 간단하게 스크롤바를 한번 만들어보자.

 

1.  폴더를 하나 만들고 그안에 ScrollBarExample.as와 ScrollBarExample.fla을 만든다.

 

ScrollBarExample.fla 파일의 properties에서 Class를 지정한다.

 

 

 

 

2. 플래시 파일에서  ctrl + F8 을 눌러 무비클립을 하나 만들고, 그 안에 또 하나의 무비클립을 만든다.

 

 

 

 

 

 

이 무비클립은 스크롤바를 이동시킬 무비클립이다. 위의 그림에서 파란색 무비클립이 이에 해당한다.  그리고 라인 하나를 만들고, 이동한 무비클립의 x속성 값을 보여줄 텍스트도 하나 만든다.

 

3. 인스턴스명을 적어준다.

    먼저 처음 만들었던  스크롤바, 라인, 텍스트 3개를 묶어 놓은 무비클립의 인스턴스명을

    scrollBar_mc로 한다.

 

 

 

 

2 에서 만들었던 무비클립안의 스크롤바에 해당하는 파란색 무비클립의 인스턴스명을 bar_mc로 한다.

 

 

 

 

텍스트는 외부에서 컨트롤할 수 있는 Dynamic Text로 지정하고 인스턴스명은 txt로 한다.

 

 

4. ScrollBar.as 파일을 작성한다.

 

[code as3]
package
{
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);
 }

 /**
  *  @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
  *  텍스트 필드
  */
 private function showValue(event:Event):void
 {
  // 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]

 

 

위에서 Drag & Drag에 대한 내용이 나온다. 이해가 잘 되지 않는다면 여기를 참조하자.

또 Rectangle 클래스에 대해서도 나오는 이것도 잘 이해가 가지 않는다면 여기를 참조하자.

실행이 잘 되는가? 그럼 간단한 스크롤바를 만들어보았다. 다음번에 이 스크롤바를 적용한 예제를 만들어보자.