ScrollPane 구성 요소 사용

로드할 내용이 대상 표시 영역보다 큰 경우에는 ScrollPane 구성 요소를 사용하여 내용을 모두 표시할 수 있습니다. 예를 들어, 응용 프로그램에서 작은 공간에 큰 이미지를 표시할 때 ScrollPane에 로드하면 됩니다. ScrollPane에는 무비 클립, JPEG, PNG, GIF 및 SWF 파일을 사용할 수 있습니다.

ScrollPane 및 UILoader 같은 구성 요소에는 내용 로드가 완료된 시점을 확인할 수 있게 해 주는 complete 이벤트가 있습니다. ScrollPane 또는 UILoader 구성 요소의 내용에 대한 속성을 설정하려면 complete 이벤트를 수신하여 이벤트 핸들러에서 속성을 설정합니다. 예를 들어 다음 코드에서는 Event. COMPLETE 이벤트의 리스너를 만들고 ScrollPane 내용의 alpha 속성을 0.5로 설정하는 이벤트 핸들러를 만듭니다. 

function spComplete(event:Event):void{ 
aSp.content.alpha = .5; 
} 
aSp.addEventListener(Event.COMPLETE, spComplete);

ScrollPane에 내용을 로드할 때 위치를 지정하려면 0, 0(X 및 Y 좌표)과 같은 형식으로 위치를 지정해야 합니다. 예를 들어, 다음 코드에서는 상자가 0 위치에 그려지므로 ScrollPane이 올바르게 로드됩니다. 

var box:MovieClip = new MovieClip(); 
box.graphics.beginFill(0xFF0000, 1); 
box.graphics.drawRect(0, 0, 150, 300); 
box.graphics.endFill(); 
aSp.source = box;    //load ScrollPane

자세한 내용은 ActionScript 3.0 Reference for Flash Professional 에서 ScrollPane 클래스를 참조하십시오.

ScrollPane 구성 요소와 사용자의 상호 작용

ScrollPane은 활성화하거나 비활성화할 수 있습니다. 비활성화된 ScrollPane은 마우스 또는 키보드 입력을 받지 못합니다. ScrollPane에 포커스가 있는 경우 사용자는 다음 키를 사용하여 ScrollPane을 제어할 수 있습니다.

키

설명

아래쪽 화살표

내용을 세로 방향으로 한 행만큼 위로 스크롤합니다.

위쪽 화살표

내용을 세로 방향으로 한 행만큼 아래로 스크롤합니다.

End

ScrollPane의 맨 아래쪽 내용으로 이동합니다.

왼쪽 화살표

내용을 가로 방향으로 한 행만큼 오른쪽으로 스크롤합니다.

오른쪽 화살표

내용을 가로 방향으로 한 행만큼 왼쪽으로 스크롤합니다.

홈

ScrollPane의 맨 위쪽 내용으로 이동합니다.

End

ScrollPane의 맨 아래쪽 내용으로 이동합니다.

PageDown

내용을 세로 방향으로 한 페이지만큼 위로 스크롤합니다.

PageUp

내용을 세로 방향으로 한 페이지만큼 아래로 스크롤합니다.

사용자는 마우스를 사용하여 ScrollPane의 내용 및 가로/세로 스크롤 막대와 상호 작용할 수 있습니다. scrollDrag 속성이 true 로 설정되어 있으면 마우스를 사용하여 내용을 드래그할 수 있습니다. 내용 위에 나타나는 손 모양 포인터는 사용자가 내용을 드래그할 수 있음을 나타냅니다. 대부분의 다른 컨트롤과 달리 마우스 버튼을 누른 채로 있으면 뗄 때까지 작업이 수행됩니다. 내용에 유효한 탭 중지가 있는 경우 scrollDrag 를 false로 설정해야 합니다. 그렇지 않으면 내용을 히트하는 모든 마우스 동작이 스크롤 드래그를 실행합니다.

ScrollPane 구성 요소 매개 변수

속성 관리자나 구성 요소 관리자에서 각 ScrollPane 인스턴스에 대해 horizontalLineScrollSize , horizontalPageScrollSize , horizontalScrollPolicy, scrollDrag, source, verticalLineScrollSize, verticalPageScrollSize , verticalScrollPolicy 등의 매개 변수를 설정할 수 있습니다. 이러한 매개 변수에는 각각 같은 이름의 해당 ActionScript 속성이 있습니다. 이러한 매개 변수의 가능한 값에 대한 자세한 내용은 ActionScript 3.0 Reference for Flash Professional 에서 ScrollPane 클래스를 참조하십시오.

ActionScript를 작성하면 속성, 메서드 및 이벤트를 사용하여 ScrollPane 구성 요소에 대한 이러한 옵션 및 추가 옵션을 제어할 수 있습니다.

ScrollPane 구성 요소를 사용하여 응용 프로그램 만들기

다음 절차에서는 제작하는 동안 응용 프로그램에 ScrollPane 구성 요소를 추가하는 방법을 보여 줍니다. 이 예제의 ScrollPane은 source 속성으로 지정된 경로에서 그림을 로드합니다.

  1. 새 Flash(ActionScript 3.0) 문서를 만듭니다.

  2. [구성 요소] 패널의 ScrollPane 구성 요소를 스테이지로 드래그하고 인스턴스 이름을 aSp 로 지정합니다.

  3. [액션] 패널을 열고 기본 타임라인에서 프레임 1을 선택한 후 다음 ActionScript 코드를 입력합니다. 

    import fl.events.ScrollEvent; 
 
aSp.setSize(300, 200); 
 
function scrollListener(event:ScrollEvent):void { 
    trace("horizontalScPosition: " + aSp.horizontalScrollPosition +  
     ", verticalScrollPosition = " + aSp.verticalScrollPosition); 
}; 
aSp.addEventListener(ScrollEvent.SCROLL, scrollListener); 
 
function completeListener(event:Event):void { 
    trace(event.target.source + " has completed loading."); 
}; 
// Add listener. 
aSp.addEventListener(Event.COMPLETE, completeListener); 
 
aSp.source = "http://www.helpexamples.com/flash/images/image1.jpg";

  4. [컨트롤] > [무비 테스트]를 선택하여 응용 프로그램을 실행합니다.

ActionScript를 사용하여 ScrollPane 인스턴스 만들기

다음 예제에서는 ScrollPane을 만들고 창 크기를 설정한 다음 source 속성을 사용하여 이미지를 로드합니다. 또한 두 개의 리스너를 만듭니다. 첫 번째 리스너는 scroll 이벤트를 수신하고, 사용자가 세로 또는 가로로 스크롤할 때 이미지의 위치를 표시합니다. 두 번째 리스너는 complete 이벤트를 수신하고, 이미지 로드가 완료되었다는 메시지를 [출력] 패널에 표시합니다.

다음 예제에서는 ActionScript를 사용하여 ScrollPane을 만들고 그 안에 폭이 150픽셀이고 높이가 300픽셀인 MovieClip(빨간색 상자)을 배치합니다.

  1. 새 Flash(ActionScript 3.0) 문서를 만듭니다.

  2. [구성 요소] 패널의 ScrollPane 구성 요소를 [라이브러리] 패널로 드래그합니다.

  3. [구성 요소] 패널의 DataGrid 구성 요소를 [라이브러리] 패널로 드래그합니다.

  4. [액션] 패널을 열고 기본 타임라인에서 프레임 1을 선택한 후 다음 ActionScript 코드를 입력합니다. 

    import fl.containers.ScrollPane; 
import fl.controls.ScrollPolicy; 
import fl.controls.DataGrid; 
import fl.data.DataProvider; 
 
var aSp:ScrollPane = new ScrollPane(); 
var aBox:MovieClip = new MovieClip(); 
drawBox(aBox, 0xFF0000);    //draw a red box 
 
aSp.source = aBox; 
aSp.setSize(150, 200); 
aSp.move(100, 100); 
 
addChild(aSp); 
 
function drawBox(box:MovieClip,color:uint):void { 
            box.graphics.beginFill(color, 1); 
            box.graphics.drawRect(0, 0, 150, 300); 
            box.graphics.endFill();         
}

  5. [컨트롤] > [무비 테스트]를 선택하여 응용 프로그램을 실행합니다.