'플라스크'에 해당되는 글 3건

  1. 2008.11.29 [플래시] 디지털 시계 만들기 [1] (18)
  2. 2008.11.24 [수학]극좌표 -1-
  3. 2008.08.31 나의 엠블럼(?)
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 파일 추가하였습니다. 밀리초까지 구현된 파일입니다. (함수화 시켜서 사용하기 편합니다.)
*/
신고
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.11.24 19:50

모두 정확한 지식은 아닐지도 모릅니다...

극좌표란?

위키백과에 의하면....;;


극좌표계(영어: polar coordinate system)란 평면 위의 위치를 각도거리를 이용하여 나타내는 2차원 좌표계를 말한다. 극좌표계는 두 점 사이의 관계가 각이나 거리로 쉽게 표현되는 경우에 가장 유용하다. 직교 좌표계에서는 삼각 함수로 복잡하게 나타나는 관계가 극좌표계에서는 간단하게 표현되는 경우가 많다. 2차원 좌표계이기 때문에 극좌표는 반지름 성분과 각 성분의 두 성분으로 결정된다. 주로 r로 나타내는 반지름 성분은 극(데카르트 좌표에서 원점)에서의 거리를 나타낸다. 주로 θ로 나타내는 각 성분은 0°(직교 좌표계에서 x축의 양의 방향에 해당)에서 반시계 방향으로 잰 각의 크기를 나타낸다.

라고 예쁘게 말을 길게 써주셨군요....

간단히 추려서 말하면

"각도 쎄타(Θ)에 대한 반지름(r)" 이라고 말할수 있겠네요.....(그저 간단히 추린것입니다..)

그러니까....각 쎄타가 x도(또는 라디안) 일때의 반지름 길이...(반지름이라는 말이 좀 이상하군요..)인데요.

예제를 보여드리겠습니다.


그림1 : 각 쎄타(Θ)에 대한 반지름(r)

위 그림에서 변수는 각도 쎄타와 반지름입니다.

이 두가지 변수를 가지고 그래프를 그리게 되는것이지요.

그럼 그래프 그리기를 해봅시다.
[본 액션 스크립트들은 AS2.0(1.0)에서 만들어 졌습니다.]

먼저 변수가 각도 쎄타와, 반지름 r이니 변수를 선언해야겠죠?


var r=0;
var theta = 0;
var i=0;//이넘은 비트맵 데이터를 찍을때 쓸겁니다.

import flash.display.*;//비트맵 데이터를 만들기 위해 임포트~
mybitmap = new BitmapData(400, 400 , true, 0x00000000);//스테이지 사이즈에 맞도록 크기 조정~(400x400)
_root.attachBitmap(mybitmap, 0);//비트맵 장착!

_root.onEnterFrame = function(){//매 프렘마다.
   r = 400*Math.sin(1/theta);//이게 중요합니다. 별표 백개~(바로 아래두줄도 중요합니다.. 별표 200개~)
   _root.mover._x = Math.floor(r*Math.cos(theta)+Stage.width/2)+0.5//점(mover)의 x좌표를 찍습니다.
   _root.mover._y = Math.floor(r*Math.sin(theta)+Stage.height/2)+0.5//점(mover)의 y좌표를 찍습니다.
   theta+=0.05//쎄타값을 계속 증가시킵니다. 그래야 각도에 대한 그래프를 얻을수 있죠.

   _root.attachMovie("dot", "dot"+i, _root.getNextHighestDepth());//무비클립 dot를 복제합니다.
   _root["dot"+i]._x = _root.mover._x//무비클립 dot의 x좌표
   _root["dot"+i]._y = _root.mover._y//무비클립 dot의 y좌표
   if(i<120){//fps를 120으로 설정해 놨습니다. 그런데 무비클립 dot이 만이 생기게 되면 메모리를 많이~잡아먹기 때문에.....프레임저하가 일어납니다... 그래서 매초당 무비클립 dot를 삭제합니다.
       mybitmap.draw(_root);//먼저 무비클립dot를 비트맵에 찍고요~
       for(i=0;i<120;i++){//무비클립 dot를 삭제합니다~
           _root["dot"+i].removeMovieClip();
       }
       i=0;//그리곤 다시 i를 0으로 초기화 해주는거죠.
   }
  i++
}


아래는 예제입니다.

Play 버튼을 누르면 시작됩니다.


여기서 개선점을 발견하게 됩니다...

위에 예제는 '점을 찍기'만 합니다.

 하기만 그래프라는건 무한히 많은 점들의 집합 아닙니까?

그러면 저 플래시 무비가 그래프가 되기 위해서는

첫째, 졸라 오랫동안 나두어서 점을 많이 찍는다.

둘째, 각 쎄타의 증가량을(저 무비에선 0.05입니다.) 작게 줄인다.(0.005수준..?)

셋째, 한점, 한점 찍을때마다 선분을 그어서 그래프 인것처럼 보이는양한다.


첫째는, 너무,,시간이 많이 걸리는 단점이 있습니다.

둘째도 시간이 오래걸립니다. 0.005 를 계속더해서 2파이를 만들어야하기에...;;

셋째가 가장 무난한데...;; 구현하기도 쉽습니다!(moveTo 와 lineTo 를 쓰면 참 쉽죠....ㅋ)


[다음 글에선 라인을 그려서 그래프를 그려 봅시다~]


※참고

우리는 여기서 한가지를 바꿔가며 재미있게 놀수(?) 있습니다.

바로 변수 r에 대한던데요

r에는 함수가 들어갑니다. 사인이나..코사인, 탄젠트....아니면 일차, 이차..등등등...;;

극좌표에서는 사인, 코사인, 탄젠트를 많이 쓰는것 같아요.

그래서 준비 했습니다.

심화 미적에보시면

lim tan(Θ)/Θ = lim sin(Θ)/Θ 라는 걸 알수 있습니다.
Θ->0         Θ->0

바로 탄젠트와 사인의 극한값이 같다는 것인데요...

위에서 만든 무비로 실험하면 극한값이 같다는것을 단번에 눈치챌수 있습니다.

r = 400*Math.sin(1/theta);

위 무비에선 sin을 썻는데요, 이걸 탄젠트로 바꾸고 실행하면 사인으로 그린 그래프와 같게 됩니다.(완전히 같은지는 잘 모르겠습니다.. 완전히 까진 아니더라도, 시간이 차차 흐를수록 일치하겠네요.)

에....재미 없다구요?

그래서 또 준비했습니다.

이번에는 여러가지 기본형태를 띠는 그래프를 그려봅시다.

또,,위키백과에서 찾아보면..


극좌표 방정식

극좌표를 이용하여 곡선을 나타내는 방정식을 극좌표 방정식 또는 극방정식이라고 한다. 보통은 rθ 에 관한 함수로 정의한다. 곡선 위의 점은 (r(θ),θ)로 정의되며 함수 r 의 그래프로 생각할 수 있다. 극좌표 방정식 r(θ)의 형태로부터 대칭성을 추론할 수 있다. 만약 r(−θ) = r(θ) 이라면 곡선은 수평 반경(0° / 180°)에 대하여 대칭이 되며, r(πθ) = r(θ)이라면 수직 반경(90° / 270°)에 대하여 대칭이 되며, r(θα) = r(θ)일 때는 α로 반시계 방향으로 돌린 곳에서 대칭이 된다.

극좌표계의 성질 덕에 많은 곡선이 간단한 극좌표 방정식으로 표현될 수 있으며, 이에 반해 데카르트 좌표로 표현되려면 난해한 곡선이 많이 있다. 극좌표 방정식으로 표현될 수 있는 곡선은 극좌 장미 곡선, 아르키메데스 나선, 달팽이꼴 곡선, 심장형 등이 있다.

아래에 서술된 내용에는 정의역과 치역의 범위의 제한은 없다.



그래서...해봤습니다.

1. 장미 곡선 [r(θ) = acos(kθ + φ0) (φ0는 임의의 상수)]



r = 200*Math.sin(theta*4);

의 그래프 입니다.

또다시...위키백과에 의하면...;;
------
r = a*Math.sin(k*theta)

k홀수일 때는 k개의 꽃잎을 지니며, k짝수일 때는 2k개의 꽃잎을 지닌다. k가 정수가 아닐 때에는 꽃과 비슷한 모양이지만 이때는 꽃잎이 겹쳐 보이게 된다. 즉, 4n + 2개의 꽃잎을 지닌 장미 곡선을 그릴 수는 없다. 변수 a는 꽃잎의 길이를 의미한다.
------
라고 합니다.



2. 아르키메데스 나선 [r(θ) = a + ]

부터느 다음글에 적도록 하지요~;

저작자 표시 비영리 변경 금지
신고
Trackback 0 Comment 0
2008.08.31 21:41
바로....사각 플라스크!!


사용자 삽입 이미지

너무 허전한가..

ver 1.0
신고

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

[FLASK]화살 엔진 ver.1.63  (0) 2008.09.27
나의 엠블럼(?)  (0) 2008.08.31
[Flask]Bullet Effect_06[블러]  (0) 2008.08.30
[Flask]시계 (미완성)  (0) 2008.08.29
Trackback 0 Comment 0


티스토리 툴바