Slider 구성 요소 사용

Slider 인스턴스에 포커스가 있으면 다음 키를 사용하여 해당 인스턴스를 제어할 수 있습니다.

포커스 제어에 대한 자세한 내용은 Flash Professional용 ActionScript 3.0 참조 설명서 의 IFocusManager 인터페이스 및 FocusManager 클래스와 FocusManager를 사용한 작업 을 참조하십시오.

각 Slider 인스턴스의 실시간 미리 보기에는 제작하는 동안 속성 관리자나 [구성 요소 관리자]에서 변경한 매개 변수가 반영됩니다.

속성 관리자나 구성 요소 관리자에서 각 Slider 구성 요소 인스턴스에 대해 direction , liveDragging , maximum , minimum , snapInterval , tickInterval , value 등의 제작 매개 변수를 설정할 수 있습니다. 이러한 매개 변수에는 각각 같은 이름의 해당 ActionScript 속성이 있습니다. 이러한 매개 변수의 가능한 값에 대한 자세한 내용은 ActionScript 3.0 Reference for Flash Professional 에서 Slider 클래스를 참조하십시오.

다음 예제에서는 일종의 가상 이벤트에 대한 사용자 만족도를 표현할 수 있는 Slider 인스턴스를 만듭니다. 사용자는 Slider를 오른쪽이나 왼쪽으로 이동하여 만족도 수준을 높이거나 낮춥니다.

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

2. [구성 요소] 패널의 Label 구성 요소를 스테이지 가운데로 드래그합니다.

   • 인스턴스 이름을 valueLabel 로 지정합니다.

   • text 매개 변수에 0 percent 값을 지정합니다.

3. [구성 요소] 패널의 Slider 구성 요소를 value_lbl 아래 가운데에 오도록 드래그합니다.

   • 인스턴스 이름을 aSlider 로 지정합니다.

   • 폭(W:)을 200 으로 지정합니다.

   • 높이(H:)를 10 으로 지정합니다.

   • maximum 매개 변수에 100 값을 지정합니다.

   • snapInterval 및 tickInterval 매개 변수에 10 값을 지정합니다.

4. [라이브러리] 패널의 다른 Label 인스턴스를 드래그하여 aSlider 아래의 가운데에 놓습니다.

   • 인스턴스 이름을 promptLabel 로 지정합니다.

   • 폭(W:)을 250으로 지정합니다.

   • 높이(H:)를 22로 지정합니다.

   • text 매개 변수에 Please indicate your level of satisfaction 을 입력합니다.

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

   import fl.controls.Slider; 
   import fl.events.SliderEvent; 
   import fl.controls.Label; 
    
   aSlider.addEventListener(SliderEvent.CHANGE, changeHandler); 
    
   function changeHandler(event:SliderEvent):void { 
       valueLabel.text = event.value + "percent";     
   }

6. [컨트롤] > [무비 테스트]를 선택합니다.

   이 예제에서는 슬라이더 썸을 다른 간격으로 이동하면 SliderEvent.CHANGE 이벤트의 리스너가 valueLabel 의 text 속성을 업데이트하여 해당 썸 위치의 백분율을 표시합니다.

다음 예제에서는 ActionScript를 사용하여 Slider를 만듭니다. 또한 꽃 이미지를 다운로드하고 사용자가 Slider의 값에 해당하는 alpha 속성을 변경하여 이미지를 어둡거나 밝게 만들 수 있도록 합니다.

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

2. [구성 요소] 패널의 Label 구성 요소와 Slider 구성 요소를 현재 문서의 [라이브러리] 패널로 드래그합니다.

   이렇게 하면 구성 요소가 라이브러리에 추가되지만 응용 프로그램에는 표시되지 않습니다.

3. [액션] 패널을 열고 기본 타임라인에서 프레임 1을 선택한 후 다음 코드를 입력하여 구성 요소 인스턴스를 만들고 배치합니다.

   import fl.controls.Slider; 
   import fl.events.SliderEvent; 
   import fl.controls.Label; 
   import fl.containers.UILoader; 
    
   var sliderLabel:Label = new Label(); 
   sliderLabel.width = 120; 
   sliderLabel.text = "< Fade - Brighten >"; 
   sliderLabel.move(170, 350); 
    
   var aSlider:Slider = new Slider(); 
   aSlider.width = 200; 
   aSlider.snapInterval = 10; 
   aSlider.tickInterval = 10; 
   aSlider.maximum = 100; 
   aSlider.value = 100; 
   aSlider.move(120, 330); 
    
   var aLoader:UILoader = new UILoader(); 
   aLoader.source = "http://www.flash-mx.com/images/image1.jpg"; 
   aLoader.scaleContent = false; 
    
   addChild(sliderLabel); 
   addChild(aSlider); 
   addChild(aLoader); 
    
   aLoader.addEventListener(Event.COMPLETE, completeHandler); 
    
   function completeHandler(event:Event) { 
       trace("Number of bytes loaded: " + aLoader.bytesLoaded); 
   } 
    
   aSlider.addEventListener(SliderEvent.CHANGE, changeHandler); 
    
   function changeHandler(event:SliderEvent):void { 
           aLoader.alpha = event.value * .01; 
   }

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

5. 슬라이더 썸을 왼쪽으로 이동하면 이미지가 어두워지고 오른쪽으로 이동하면 이미지가 밝아집니다.