ProgressBar 구성 요소는 내용이 로드되는 진행률을 표시하여 내용이 커서 응용 프로그램 실행이 지연될 수 있을 때 사용자가 안심할 수 있도록 합니다. ProgressBar는 이미지와 응용 프로그램 일부의 로드 진행률을 표시하는 데 유용합니다. 로드 프로세스는 determinate 또는 indeterminate일 수 있습니다.
determinate
진행률 막대는 시간에 따른 작업 진행률을 선형으로 표시하며 로드할 내용의 크기를 알고 있을 때 사용됩니다.
indeterminate
진행률 막대는 로드할 내용의 크기를 알 수 없을 때 사용됩니다. Label 구성 요소를 추가하여 로드 진행률을 백분율로 표시할 수도 있습니다.
ProgressBar 구성 요소는 9-슬라이스 크기 조절을 사용하며 막대 스킨, 트랙 스킨 및 불확정 스킨을 포함합니다.
ProgressBar 구성 요소와 사용자의 상호 작용
ProgressBar 구성 요소는 세 가지 모드로 사용할 수 있습니다. 가장 일반적으로 사용되는 모드는 event 모드와 polled 모드입니다. 이러한 모드는
progress
및
complete
이벤트를 내보내거나(event 및 polled 모드),
bytesLoaded
및
bytesTotal
속성을 표시하는(polled 모드) 로드 프로세스를 지정합니다.
ProgressBar.setProgress()
메서드를 호출하면서
maximum
,
minimum
및
value
속성을 함께 설정하여 ProgressBar 구성 요소를 manual 모드로 사용할 수도 있습니다. indeterminate 속성을 설정하여, 소스의 크기를 알 수 없을 때 ProgressBar를 줄무늬 모양으로 채우거나(
true
) 소스의 크기를 알 수 있을 때 단색으로 채울(
false
) 수 있습니다.
ActionScript를 사용하거나 속성 관리자 또는 구성 요소 관리자의
mode
매개 변수를 통해 ProgressBar의
mode
속성을 설정하여 모드를 설정할 수 있습니다.
100,000개의 항목을 파싱하는 것처럼 ProgressBar를 사용하여 처리 상태를 나타내는 경우 이러한 프로세스를 단일 프레임 루프로 처리하면 화면을 다시 그리는 과정이 없기 때문에 ProgressBar의 업데이트 상황을 볼 수 없습니다.
ProgressBar 구성 요소 매개 변수
속성 관리자나 구성 요소 관리자에서 각 ProgressBar 인스턴스에 대해
direction
,
mode
,
source
등의 매개 변수를 설정할 수 있습니다. 이러한 매개 변수마다 같은 이름의 해당 ActionScript 속성이 있습니다.
ActionScript를 작성하면 속성, 메서드 및 이벤트를 사용하여 ProgressBar 구성 요소에 대한 이러한 옵션 및 추가 옵션을 제어할 수 있습니다. 자세한 내용은
ActionScript 3.0 Reference
for Flash Professional
에서 ProgressBar 클래스를 참조하십시오.
ProgressBar를 사용하여 응용 프로그램 만들기
다음 절차에서는 응용 프로그램을 제작하는 동안 ProgressBar 구성 요소를 추가하는 방법을 설명합니다. 이 예제에서 ProgressBar는 event 모드를 사용합니다. event 모드에서는 ProgressBar가 진행률을 표시하기 위해 전달하는
progress
및
complete
이벤트를 로드되고 있는 내용이 내보냅니다.
progress
이벤트가 발생하면 로드된 내용의 백분율을 나타내는 레이블이 업데이트됩니다.
complete
이벤트가 발생하면 "Loading complete"라는 메시지와 파일의 크기를 나타내는
bytesTotal
속성 값이 표시됩니다.
-
새 Flash(ActionScript 3.0) 문서를 만듭니다.
-
[구성 요소] 패널의 ProgressBar 구성 요소를 스테이지로 드래그합니다.
-
속성 관리자에서 인스턴스 이름으로
aPb
를 입력합니다.
-
[매개 변수] 섹션에서 X 값으로
200
을 입력합니다.
-
Y 값으로
260
을 입력합니다.
-
mode
매개 변수에 대해
event
를 선택합니다.
-
[구성 요소] 패널의 Button 구성 요소를 스테이지로 드래그합니다.
-
Label 구성 요소를 스테이지로 드래그하고 인스턴스 이름을
progLabel
로 지정합니다.
-
[액션] 패널을 열고 기본 타임라인에서 프레임 1을 선택한 후 .mp3 오디오 파일을 로드하는 다음 ActionScript 코드를 입력합니다.
import fl.controls.ProgressBar;
import flash.events.ProgressEvent;
import flash.events.IOErrorEvent;
var aSound:Sound = new Sound();
aPb.source = aSound;
var url:String = "http://www.helpexamples.com/flash/sound/song1.mp3";
var request:URLRequest = new URLRequest(url);
aPb.addEventListener(ProgressEvent.PROGRESS, progressHandler);
aPb.addEventListener(Event.COMPLETE, completeHandler);
aSound.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
loadButton.addEventListener(MouseEvent.CLICK, clickHandler);
function progressHandler(event:ProgressEvent):void {
progLabel.text = ("Sound loading ... " + aPb.percentComplete);
}
function completeHandler(event:Event):void {
trace("Loading complete");
trace("Size of file: " + aSound.bytesTotal);
aSound.close();
loadButton.enabled = false;
}
function clickHandler(event:MouseEvent) {
aSound.load(request);
}
function ioErrorHandler(event:IOErrorEvent):void {
trace("Load failed due to: " + event.text);
}
-
[컨트롤] > [무비 테스트]를 선택합니다.
polled 모드에서 ProgressBar 구성 요소를 사용하여 응용 프로그램 만들기
다음 예제에서는 ProgressBar를 polled 모드로 설정합니다. polled 모드에서 진행률은 로드되고 있는 내용에 대한
progress
이벤트를 수신하고
bytesLoaded
및
bytesTotal
속성을 통해 진행률을 계산하여 결정됩니다. 이 예제에서는 Sound 객체를 로드하고 이 객체의
progress
이벤트를 수신한 후
bytesLoaded
및
bytesTotal
속성을 사용하여 로드되는 백분율을 계산합니다. 그런 다음 레이블과 [출력] 패널에 로드 진행률을 표시합니다.
-
새 Flash(ActionScript 3.0) 문서를 만듭니다.
-
[구성 요소] 패널의 ProgressBar 구성 요소를 스테이지로 드래그하고 속성 관리자에서 다음 값을 입력합니다.
-
인스턴스 이름으로
aPb
를 입력합니다.
-
X 값으로
185
를 입력합니다.
-
Y 값으로
225
을 입력합니다.
-
Label 구성 요소를 스테이지로 드래그하고 속성 관리자에서 다음 값을 입력합니다.
-
[액션] 패널을 열고 기본 타임라인에서 프레임 1을 선택한 후 다음 ActionScript 코드를 입력합니다. 이 코드는 Sound 객체(
aSound
)를 만들고
loadSound()
를 호출하여 Sound 객체에 사운드를 로드합니다.
import fl.controls.ProgressBarMode;
import flash.events.ProgressEvent;
import flash.media.Sound;
var aSound:Sound = new Sound();
var url:String = "http://www.helpexamples.com/flash/sound/song1.mp3";
var request:URLRequest = new URLRequest(url);
aPb.mode = ProgressBarMode.POLLED;
aPb.source = aSound;
aSound.addEventListener(ProgressEvent.PROGRESS, loadListener);
aSound.load(request);
function loadListener(event:ProgressEvent) {
var percentLoaded:int = event.target.bytesLoaded / event.target.bytesTotal * 100;
progLabel.text = "Percent loaded: " + percentLoaded + "%";
trace("Percent loaded: " + percentLoaded + "%");
}
-
[컨트롤] > [무비 테스트]를 선택하여 응용 프로그램을 실행합니다.
manual 모드에서 ProgressBar 구성 요소를 사용하여 응용 프로그램 만들기
다음 예제에서는 ProgressBar를 manual 모드로 설정합니다. manual 모드에서는
setProgress()
메서드를 호출하여 수동으로 진행률을 설정하고 현재 값과 최대값을 제공하여 진행률 범위를 결정해야 합니다. manual 모드에서는
source
속성을 설정하지 않습니다. 이 예제에서는 최대값이 250인 NumericStepper 구성 요소를 사용하여 ProgressBar를 늘립니다. NumericStepper 값이 변하면
CHANGE
이벤트가 트리거되고 이벤트 핸들러(
nsChangeHander
)가
setProgress()
메서드를 호출하여 ProgressBar를 진행시킵니다. 또한 최대값을 바탕으로 완료 상태를 백분율로 표시합니다.
-
새 Flash(ActionScript 3.0) 문서를 만듭니다.
-
[구성 요소] 패널의 ProgressBar 구성 요소를 스테이지로 드래그하고 속성 관리자에서 다음 값을 지정합니다.
-
인스턴스 이름으로
aPb
를 입력합니다.
-
X 값으로
180
를 입력합니다.
-
Y 값으로
175
을 입력합니다.
-
NumericStepper 구성 요소를 스테이지로 드래그하고 속성 관리자에서 다음 값을 입력합니다.
-
Label 구성 요소를 스테이지로 드래그하고 속성 관리자에서 다음 값을 입력합니다.
-
[액션] 패널을 열고 기본 타임라인에서 프레임 1을 선택한 후 다음 코드를 입력합니다.
import fl.controls.ProgressBarDirection;
import fl.controls.ProgressBarMode;
import flash.events.Event;
aPb.direction = ProgressBarDirection.RIGHT;
aPb.mode = ProgressBarMode.MANUAL;
aPb.minimum = aNs.minimum;
aPb.maximum = aNs.maximum;
aPb.indeterminate = false;
aNs.addEventListener(Event.CHANGE, nsChangeHandler);
function nsChangeHandler(event:Event):void {
aPb.value = aNs.value;
aPb.setProgress(aPb.value, aPb.maximum);
progLabel.text = "Percent of progress = " + int(aPb.percentComplete) + "%";
}
-
[컨트롤] > [무비 테스트]를 선택하여 응용 프로그램을 실행합니다.
-
NumericStepper에서 위쪽 화살표를 클릭하여 ProgressBar를 진행시킵니다.
ActionScript를 사용하여 ProgressBar 만들기
다음 예제에서는 ActionScript를 사용하여 ProgressBar를 만듭니다. 또한 manual 모드로 ProgressBar를 만드는 이전 예제의 기능을 복제합니다.
-
새 Flash(ActionScript 3.0) 문서를 만듭니다.
-
ProgressBar 구성 요소를 [라이브러리] 패널로 드래그합니다.
-
NumericStepper 구성 요소를 [라이브러리] 패널로 드래그합니다.
-
Label 구성 요소를 [라이브러리] 패널로 드래그합니다.
-
[액션] 패널을 열고 기본 타임라인에서 프레임 1을 선택한 후 다음 코드를 입력합니다.
import fl.controls.ProgressBar;
import fl.controls.NumericStepper;
import fl.controls.Label;
import fl.controls.ProgressBarDirection;
import fl.controls.ProgressBarMode;
import flash.events.Event;
var aPb:ProgressBar = new ProgressBar();
var aNs:NumericStepper = new NumericStepper();
var progLabel:Label = new Label();
addChild(aPb);
addChild(aNs);
addChild(progLabel);
aPb.move(180,175);
aPb.direction = ProgressBarDirection.RIGHT;
aPb.mode = ProgressBarMode.MANUAL;
progLabel.setSize(150, 22);
progLabel.move(180, 150);
progLabel.text = "";
aNs.move(220, 215);
aNs.maximum = 250;
aNs.minimum = 0;
aNs.stepSize = 1;
aNs.value = 0;
aNs.addEventListener(Event.CHANGE, nsChangeHandler);
function nsChangeHandler(event:Event):void {
aPb.setProgress(aNs.value, aNs.maximum);
progLabel.text = "Percent of progress = " + int(aPb.percentComplete) + "%";
}
-
[컨트롤] > [무비 테스트]를 선택하여 응용 프로그램을 실행합니다.
-
NumericStepper에서 위쪽 화살표를 클릭하여 ProgressBar를 진행시킵니다.
|
|
|