예제: 간단한 아날로그 시계

간단한 아날로그 시계 예제를 통해 이 장에서 설명한 날짜와 시간의 두 개념에 대해 설명합니다.

이 샘플에 대한 응용 프로그램 파일을 가져오려면 www.adobe.com/go/learn_programmingAS3samples_flash_kr을 참조하십시오. SimpleClock 응용 프로그램 파일은 Samples/SimpleClock 폴더에 있습니다. 이 응용 프로그램은 다음과 같은 파일로 구성됩니다.

파일	설명
SimpleClockApp.mxml 또는 SimpleClockApp.fla	Flash(FLA) 또는 Flex(MXML) 형식의 기본 응용 프로그램 파일입니다.
com/example/programmingas3/simpleclock/SimpleClock.as	기본 응용 프로그램 파일입니다.
com/example/programmingas3/simpleclock/AnalogClockFace.as	시간에 따라 둥근 시계 문자판과 시침, 분침, 초침을 그립니다.

세부 목차

SimpleClock 클래스 정의

시계 예제는 간단한 프로그램이지만, 아주 간단한 응용 프로그램이라도 나중에 쉽게 확장할 수 있도록 잘 구성하는 것이 좋습니다. 이 예제에서 SimpleClock 응용 프로그램은 SimpleClock 클래스를 사용하여 시작 및 시간 맞추기 작업을 처리한 다음 AnalogClockFace라는 다른 클래스를 사용하여 실제로 시간을 표시합니다.

다음은 SimpleClock 클래스를 정의하고 초기화하는 코드입니다. (Flash 버전에서 SimpleClock을 실행하면 Sprite 클래스가 확장됩니다.)

public class SimpleClock extends UIComponent
{
    /**
     * 시간 표시 구성 요소
     */
    private var face:AnalogClockFace;
    
    /**
     * 응용 프로그램의 심박 같은 기능을 하는 Timer
     */
    private var ticker:Timer;

이 클래스에는 다음과 같은 중요한 두 가지 속성이 들어 있습니다.

SimpleClock 클래스는 기본 생성자를 사용합니다. initClock() 메서드는 실제 설정 작업을 처리하여 시계 문자판을 만들고 Timer 인스턴스 티킹을 시작합니다.

시계 문자판 만들기

SimpleClock 코드의 다음 행에서는 시간을 표시하는 데 사용하는 시계 문자판을 만듭니다.

    /**
     * SimpleClock 인스턴스를 설정합니다.
     */
    public function initClock(faceSize:Number = 200) 
    {
        // 시계 문자판을 만들어서 표시 목록에 추가합니다.
        face = new AnalogClockFace(Math.max(20, faceSize));
        face.init();
        addChild(face);
        
        // 초기 시계 문자판을 그립니다.
        face.draw();

문자판의 크기는 initClock() 메서드로 전달될 수 있습니다. 전달된 faceSize 값이 없는 경우에는 기본 크기인 200픽셀이 사용됩니다.

그런 다음 응용 프로그램은 해당 문자판을 초기화한 후 DisplayObject 클래스에서 상속된 addChild() 메서드를 사용하여 표시 목록에 추가합니다. 그리고 나서 AnalogClockFace.draw() 메서드를 호출하여 시계 문자판을 현재 시간과 함께 한 번 표시합니다.

타이머 시작

시계 문자판을 만든 후에는 initClock() 메서드에서 타이머를 설정합니다.

        // 매초마다 한 번씩 이벤트를 발생시키는 Timer를 만듭니다.
        ticker = new Timer(1000); 
    
        // Timer 이벤트를 처리할 onTick() 메서드를 지정합니다.
        ticker.addEventListener(TimerEvent.TIMER, onTick);

        // 시계 티킹을 시작합니다.
        ticker.start();

이 메서드는 먼저 1초(1000밀리초)에 한 번 이벤트를 전달하는 Timer 인스턴스를 인스턴스화합니다. 다른 repeatCount 매개 변수가 Timer() 생성자로 전달되지 않으므로 타이머는 무한정으로 계속 반복됩니다.

timer 이벤트를 수신하면 SimpleClock.onTick() 메서드가 1초에 한 번씩 실행됩니다.

    public function onTick(event:TimerEvent):void 
    {
        // 시계 문자판을 업데이트합니다.
        face.draw();
    }

AnalogClockFace.draw() 메서드는 간단히 시계 문자판과 시계 바늘을 그립니다.

현재 시간 표시

AnalogClockFace 클래스 코드의 대부분은 시계 문자판의 표시 요소를 설정하는 것과 관련되어 있습니다. AnalogClockFace를 시작하면 둥근 외곽선을 그리고 각 시간 표시 부분에 숫자 텍스트 레이블을 놓은 다음 각각 시계의 시침, 분침, 초침에 해당하는 세 개의 Shape 객체를 생성합니다.

SimpleClock 응용 프로그램을 실행하면 다음과 같이 매 초마다 AnalogClockFace.draw() 메서드가 호출됩니다.

    /**
     * 디스플레이가 그려질 때 부모 컨테이너에서 호출됩니다.
     */
    public override function draw():void
    {
        // 인스턴스 변수에 현재 시간과 날짜를 저장합니다.
        currentTime = new Date();
        showTime(currentTime);
    }

이 메서드는 현재 시간을 변수로 저장하므로 시계 바늘을 그리는 도중에는 시간을 변경할 수 없습니다. 그런 다음 showTime() 메서드를 호출하여 다음과 같이 시계 바늘을 표시합니다.

    /**
     * 주어진 날짜/시간을 옛날식 아날로그 시계 스타일로 표시합니다.
     */
    public function showTime(time:Date):void 
    {
        // 시간 값을 구합니다.
        var seconds:uint = time.getSeconds();
        var minutes:uint = time.getMinutes();
        var hours:uint = time.getHours();

        // 6을 곱해 각도를 구합니다.
        this.secondHand.rotation = 180 + (seconds * 6);
        this.minuteHand.rotation = 180 + (minutes * 6);

        // 30을 곱해 기본 각도를 구한 다음 29.5도(59 * 0.5)까지
        // 더해 분을 계산합니다.
        this.hourHand.rotation = 180 + (hours * 30) + (minutes * 0.5);
    }

이 메서드는 먼저 현재 시간의 시, 분, 초 값을 추출합니다. 그런 다음 이 값을 사용하여 각 시계 바늘의 각도를 계산합니다. 초침은 60초에 한 번 회전하기 때문에 각 초마다 6도(360/60)씩 움직이게 됩니다. 분침은 매 분마다 동일한 각도씩 움직입니다.

시침도 매 분 업데이트되어 분침이 이동할 때마다 일정 정도 진행됩니다. 시침은 매 시간마다 30도(360/12)씩 움직이고 매 분마다 0.5도(30도/60분)씩 움직입니다.