'디지털 시계'에 해당되는 글 2건

  1. 2008.11.29 [플래시] 디지털 시계 만들기 [1] (18)
  2. 2008.08.28 [Flask]Digit Time ver 1.1
2008.11.29 14:53
이번에 만들 디지털 시계의 예제 입니다. (AS2.0 으로 제작합니다.)



컨셉은.... 심플함, 디지털,,뭐 이정도입니다.

먼저 제가 이번에 만들 이 디지털 시계의 특징을 설명하겠습니다.

이 디지털 시계는 텍스트 필드를 일체 사용하지 않습니다.

이유는,, 만약 폰트 이쁜걸로 시계를 만들었다 쳐도 임베디드하지 않으면 쓸모가 없기 때문입니다.

그리고 유료 폰트도 사용하기 힘듭니다.(유료 폰트는 임베디드 해서 인터넷에 올리면 안됩니다.)

그래서 이미지(비트맵또는 벡터)로 시계를 제작할겁니다.(준비할 이미지(비트맵또는 벡터)는 숫자, AM, PM 정도입니다.)

저는 이번에 디지털을 강조하기위해서 도트로 구성된 이미지를 만들었습니다.(벡터방식)

//벡터 이미지를 만들었는데도 흐려보이는 경우



작업 순서

1. 벡터, 또는 비트맵 이미지들을 만든다.(숫자와 오후 오전표시,  그외 기타 수정)

2. 시간에 대한 함수를 불러온다.

3. 시간을 추출해본다.

4. 만든 이미지를 활용하여 시간에 맞게 만들어준다.





제가 만든 벡터이미지(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, AM, PM)

(NUMBERS 무비클립의 안)
사용자 삽입 이미지
                                    1        2         3         4        5        6          7         8        9       10       11     :  프레임     
1프레임서부터 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, - 를 만든후, am, pm 도 만들어 줍니다.(- 는 아무 의미 없습니다.)

그리고 빈 무비클립을 하나 만든후 에딧 상태로 만든다음, 위에서 만들었던 숫자 이미지들을 붙여 넣습니다.(한 프레임에 하나의 숫자가 들어있도록)

그런후 이름을 정해줍니다.(링크에이지에도 이름을 적어줍니다. 되도록이면 같게 하는게 편하겠죠?)


여기서 한가지 기억해두셔야 할것은,,,

제가 왜 1프레임에 '1' 을 넣지 않고, '0' 을 먼저 넣었을까요? (생각해보세요~)

생각맞춰보기








다 만드셨으면,,,이제 배열을 해봅시다. (아래 그립 참고)
사용자 삽입 이미지


위의 그림처럼 배열하지 않으셔도 좋습니다. 단지 표시를 예쁘게 하기 위해서,,디지털느낌을 강화하기 위해서 저는 이렇게 했습니다.(GRID를 킨 상태서 작업하시면 편해요! 단,,,도트 이미지 일경우 그 효과가 극대화됩니다..^^)




이제 액션을 넣어봅시다~

먼저 시간을 불러오는 방법을 알아야 겠죠?

var getDate = new Date();

바로 이건데요, 데이트 오브젝트를 생성(?)합니다.

일단 레퍼런스를 구경해봅시다.



더보기








다 보셨으면 다음 단계로 넘어가죠,,




이제 데이트 오브젝트를 생성했으니 시간만 빼내오면 됩니다.

var H = getDate.getHours();
var M = getDate.getMinutes();

이렇게 하면, 변수 H 에는 시간(0~23)이 들어가고 변수 M 에는 분(0~59)이 들어갑니다.

그런데, 이렇게만 해두면 무비가 처음 로드 됬을때만 시간을 알아오고 변수에 저장합니다.

그후에 시간이 지나도 H, M 은 변하지 않죠.

그러므로 매 프레임 마다 불러와야하기때문에

_root.onEnterFrame = function(){

}

안에서 H와 M을 업데이트 시켜줘야합니다.

바로 이렇게 말이죠.

_root.onEnterFrame = function(){ //매 프레임 마다 실행~
H = getDate.getHours(); //위에서 만든 변수 H에 현재 시간을 담습니다.
M = getDate.getMinutes(); //역시 위에서 만든 변수 M에 현재 분을 담습니다.
}

그러면 이제 시간을 대충 구현해 두었습니다.(추가로 초도 넣을수 있죠, 밀리 세컨드도 있죠...)

저는 디지털느낌을 강화하기 위해 딱딱 맞아 떨어지는 인터페이스를 썼습니다.

배열한 무비 클립 이름(인스턴스 네임)을 짓습니다.
예를 들어...
사용자 삽입 이미지
인스턴스 네임                      APM                       NUMBERS0   NUMBERS1       NUMBERS2   NUMBERS3

이름을 다 지었으면, 이제 시간을 표시할 차례입니다.

일단 APM 무비클립을 먼저 해보죠.

오후가 PM, 오전이 AM,,12시를 기점으로 바뀌죠...

_root.onEnterFrame=function(){
    getDate = new Date();
    H = getDate.getHours();
    M = getDate.getMinutes();
    if(H/12>=1){//시간을 12로 나눠서 그 몫이 1 이상이면 PM이 되고, 1이하이면 AM이 됩니다.
        _root.APM.gotoAndStop(2);//APM 무비클립에는 1프레임에 AM 이, 2프레임에 PM이 들어 있습니다.
    }else if(H/12<1){
        _root.APM.gotoAndStop(1);
    }
     H=H%12;//우리는 12시간 시계를 만들것이므로 H 를 12로 나눈 나머지를 다시 H 에 담습니다.
}

Ctrl + Enter 을 해서 확인해봅니다.

이제 숫자 무비클립들을 해보죠.

먼저 숫자 무비클립이 4개나 있습니다. 모두 각각 다른이름이라면 인스턴스 네임을 일일이 적어줘서 해줘야하는데 일정한 규칙을 주었으므로 더 쉽게 구현할수 있습니다.(초, 밀리초까지 넣는다면 꽤나 귀찮게 되니 규칙성 있는 이름(인스턴스 네임)을 붙여주는게 좋습니다.)

먼저 이름의 규칙성을 이용해서 불러봅시다.

플래시에서는 문자열을 "이름1"+"이름2"+... 이런식으로 만듭니다.

하지만 무비클립이름(또는 변수명이라든가..)을 지명할때는 [] 대괄호를 씁니다. 아래처럼 말이죠.

_root["이름1"+"이름2"+...]

이제 사용해봅시다.

숫자 무비클립의 인스턴스 네임이 동일하게 NUMBERS 와 숫자로 구성되어있는것 눈치채셨을 겁니다.

그다음 이렇게 해주면 모두 지칭할수 있습니다.

_root["NUMBERS"+i] // i 는 0, 1, 2, 3

(결과는 "NUMBERS0", "NUMBERS1", "NUMBERS2", "NUMBERS3")

이렇게 쉽게 만들수 있습니다.

그다음 시간을 대입해보죠.

위에서 변수 H, M 은 십진수를 담습니다.

하지만 우리는 십의 자리수, 일의 자리수 가 따로 있어야하죠.

이땐 나누고, 반올림하고,,,이런걸 쓰면 쉽게 뽑아낼수 있습니다..(수학1 과정엔가 나오는걸로 기억하는데요..ㅎ)

십의 자리수를 뽑아낼땐 Math클래스의 floor 을 쓸건데요 Math.floor(#/10)(#/10)를 내림한 값을 출력합니다.

만약 # 이 0이면 0을, 0.5 면 0을, 1,5면 1을......이렇게 내림합니다.

하지만 시간의 십진수에는 0도 들어갑니다...그런데 프레임에서 0은 1프레임에 있으므로 내림값에다 1을 더해주면 됩니다.

결과적으로는

_root["NUMBERS"+0].gotoAndStop(Math.floor((H/10))+1); 이 되겠군요.

일의 자리수는 %연산자,,즉 나머지 연산자를 사용합니다.

일의 자리수는 십의 자리수만 지우면 되므로, (#%10) 이라고 하면 쉽게 뽑아낼수 있죠,,

역시 이것도 0이 있으므로 1을 더해줍니다. 결과적으로는

_root["NUMBERS"+1].gotoAndStop((H%10)+1);

가 되겠지요..

분도 마찬가지로 해줍니다.

결과적으로는

    _root["NUMBERS"+0].gotoAndStop(Math.floor((H/10))+1);
    _root["NUMBERS"+1].gotoAndStop((H%10)+1);
    _root["NUMBERS"+2].gotoAndStop(Math.floor((M/10))+1);
    _root["NUMBERS"+3].gotoAndStop((M%10)+1);

가 됩니다...

이제 완성입니다~


*전체 소스

var getDate = new Date();
var H = getDate.getHours();
var M = getDate.getMinutes();

_root.onEnterFrame=function(){
    getDate = new Date();
    H = getDate.getHours();
    M = getDate.getMinutes();
    if(H/12>=1){
        _root.APM.gotoAndStop(2)
    }else if(H/12<1){
        _root.APM.gotoAndStop(1)
    }
    H=H%12;
    _root["NUMBERS"+0].gotoAndStop(Math.floor((H/10))+1);
    _root["NUMBERS"+1].gotoAndStop((H%10)+1);
    _root["NUMBERS"+2].gotoAndStop(Math.floor((M/10))+1);
    _root["NUMBERS"+3].gotoAndStop((M%10)+1);
}


이제 Ctrl + Enter 을 눌러확인해봅니다.

이걸 좀더 up!그레이드 하면 초, 밀리초등을 추가하거나 월, 일, 년,,등을 출력하게 만들수 있습니다.

그리고 남은 일은,,,,더 예쁘게 꾸미는 겁니다~




예제 파일(***.fla)


이 예제 파일은 제가 직접 만들어 본건데요, 추가로 다른것도 있습니다. 예제 파일을 잘 살펴 보시면서 더 멋진 시계를 만드세요~

/*
clock.zip 파일 추가하였습니다. 밀리초까지 구현된 파일입니다. (함수화 시켜서 사용하기 편합니다.)
*/
신고
크리에이티브 커먼즈 라이선스
Creative Commons License
Trackback 0 Comment 18
  1. 초로 2009.05.21 10:19 신고 address edit & del reply

    안녕하세요 ㅠㅠ 플라스크님 제가 멍청해서 그런지 이것도 따라 못 만들고있어요 ㅠㅠ 이거 fla 파일도 올려주시면 안되나요?

  2. 초로 2009.05.22 08:54 신고 address edit & del reply

    ㅎㅎ기달렸는데요 ㅠㅠ 없으신건가요 ㅠㅠ

  3. 초로 2009.05.22 13:25 신고 address edit & del reply

    감사합니다^^

  4. 초로 2009.05.22 14:34 신고 address edit & del reply

    궁금한게 생겨서 질문드려요^^ AS 3에서는 어떡해해야 오류안나고 될까요?ㅎㅎ;;

  5. 초로 2009.05.23 12:12 신고 address edit & del reply

    ㅎㅎ 너무친절하셔서 자꾸 궁금한게 있어서 찾아오게 되네요 ㅎㅎ p3 위젯 시계에 관한건데 네이버 메일로 보냈거든요. 확인좀 부탁드릴 수 있을까요?ㅎㅎ

  6. 초로 2009.05.23 17:44 신고 address edit & del reply

    헐 제가 사실 임의대로 막 수정해 본거였어요; 원래 디컴파일한 원본은 제작했을시에 움직이더라구요. 원래 원본 메일로 한번 보내볼게요.

  7. 초로 2009.05.24 13:19 신고 address edit & del reply

    너무감사하고 드래그까지 만드셔서 수고하셨는데 ㅠㅠ 제작했을때 저는 시간이 00:00에서 멈춰있더라구요. 이게 뭐가 문제일까요.

  8. 초로 2009.05.24 17:56 신고 address edit & del reply

    아 ㅎㅎ 제가 실력이 워낙 너무 허접해서 ㅎㅎ 원래 파일의 액션과 Flask님이 수정하신 액션비교해서 공부를 할려고 했어요. 그래서 그전에 Flask님이 보내주신 시계fla 파일이 제작(컨트롤+엔터)했을시에 우선 잘 움직이나 실험해봤었는데요. 움직이지 않더라구요.

  9. 초로 2009.05.24 20:24 신고 address edit & del reply

    ㅎㅎ아무래도 또 안되는걸로 봐서는 제컴퓨터에 문제가 있나봐요 ㅎㅎ 화요일날 다른컴퓨터에서 한번더 실험해봐야겠구요 ㅎㅎ 우선은 Flask님이 주신 고마운 파일을 열심히 연구해 봐야겠어요^^ 고마워요~

  10. 초로 2009.05.26 15:21 신고 address edit & del reply

    Flask님이 궁금하시는거같아서 ㅎㅎ 짧게 동영상찍어서 메일로 보내드렸어요 ㅎㅎ 아참고로 다른컴퓨터에서도 똑같이 안되더라구요 ㅎㅎ

  11. 프리돔 2009.08.01 00:22 신고 address edit & del reply

    감사합니다ㅠ 덕분에 옴니아용 시계를 만들게 되었어요! ^ ^ 감사합니다.
    http://blog.naver.com/egssopi/90063658363

  12. 프리돔 2009.08.03 02:23 신고 address edit & del reply

    너무너무감사드립니다 ^ ^ >_ <

  13. 2009.10.08 19:48 address edit & del reply

    비밀댓글입니다

  14. 2009.11.19 15:59 address edit & del reply

    비밀댓글입니다

  15. 2009.11.23 11:39 address edit & del reply

    비밀댓글입니다

  16. shooloop 2009.11.24 11:22 신고 address edit & del reply

    따라해봤는데 너무 재밌어요 ^^ 감사합니당~

  17. elverz7@naver.com 2010.03.02 13:24 신고 address edit & del reply

    유용한 소스 감사합니다~ 그런데, pm 12 시가 pm 00 시로 나오던데 12시로 나오게 할려면 어찌해야할까요? 왠지 전체소스를 만져야 할 것도 같고,, 초보라 잘 모르겠네요 ;

  18. 2013.06.02 17:03 address edit & del reply

    비밀댓글입니다

2008.08.28 20:04
[Flask]Digit Time ver 1.1


저작자 표시 비영리 변경 금지
신고
크리에이티브 커먼즈 라이선스
Creative Commons License

'[+++ FLASH +++] > - - Flask`s Movies' 카테고리의 다른 글

[Flask]시계 (미완성)  (0) 2008.08.29
[Flask]Bullet Effect_03  (0) 2008.08.29
[Flask]Digit Time ver 1.1  (0) 2008.08.28
[FLASK]화살 엔진 ver.1.52  (0) 2008.08.28
Trackback 0 Comment 0


티스토리 툴바