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

Flash Player 9 이상, Adobe AIR 1.0 이상

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

  • 현재 날짜 및 시간을 가져와서 시간, 분, 초 값으로 추출

  • 타이머를 사용하여 응용 프로그램 속도 설정

    이 샘플에 대한 응용 프로그램 파일을 가져오려면 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 
{ 
    /** 
     * The time display component. 
     */ 
    private var face:AnalogClockFace; 
     
    /** 
     * The Timer that acts like a heartbeat for the application. 
     */ 
    private var ticker:Timer;

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

  • face 속성(AnalogClockFace 클래스의 인스턴스임)

  • ticker 속성(Timer 클래스의 인스턴스임)

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

시계 문자판 만들기

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

    /** 
     * Sets up a SimpleClock instance. 
     */ 
    public function initClock(faceSize:Number = 200)  
    { 
        // creates the clock face and adds it to the display list 
        face = new AnalogClockFace(Math.max(20, faceSize)); 
        face.init(); 
        addChild(face); 
         
        // draws the initial clock display 
        face.draw();

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

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

타이머 시작

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

        // creates a Timer that fires an event once per second 
        ticker = new Timer(1000);  
     
        // designates the onTick() method to handle Timer events 
        ticker.addEventListener(TimerEvent.TIMER, onTick); 
 
        // starts the clock ticking 
        ticker.start();

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

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

    public function onTick(event:TimerEvent):void  
    { 
        // updates the clock display 
        face.draw(); 
    }

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

현재 시간 표시

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

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

    /** 
     * Called by the parent container when the display is being drawn. 
     */ 
    public override function draw():void 
    { 
        // stores the current date and time in an instance variable 
        currentTime = new Date(); 
        showTime(currentTime); 
    }

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

    /** 
     * Displays the given Date/Time in that good old analog clock style. 
     */ 
    public function showTime(time:Date):void  
    { 
        // gets the time values 
        var seconds:uint = time.getSeconds(); 
        var minutes:uint = time.getMinutes(); 
        var hours:uint = time.getHours(); 
 
        // multiplies by 6 to get degrees 
        this.secondHand.rotation = 180 + (seconds * 6); 
        this.minuteHand.rotation = 180 + (minutes * 6); 
 
        // Multiply by 30 to get basic degrees, then 
        // add up to 29.5 degrees (59 * 0.5) 
        // to account for the minutes. 
        this.hourHand.rotation = 180 + (hours * 30) + (minutes * 0.5); 
    }

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

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