'플래시'에 해당되는 글 23건

  1. 2009.06.19 [ 00 ] 중력 & 반중력? 에서 제작할 무비 예제 [Gravity Play]
  2. 2009.06.11 [ 01 ] 중력 & 반중력 ?
  3. 2008.11.29 [플래시] 디지털 시계 만들기 [1] (18)
  4. 2008.11.24 [수학]극좌표 -1-
  5. 2008.10.23 [FLASK]화살 엔진 ver.1.64
  6. 2008.10.12 Preloading (프리 로딩) (2)
  7. 2008.10.12 [Flask] Rotation ver 0.35
  8. 2008.10.12 ASCII Art
2009.06.19 17:08

-6/ 19 업데잇-


무비 예제 입니다. 아직 미완성이라 글을 차차 쓰면서 업데잇할 계획입니다.



가만히 내비두면 저렇게 자취를 남깁니다.
(컴 사양을 많이 탑니다, 그래서 최적화 버튼을 만들어 봤었는데 제대로 동작하지 않아서  동작합니다..ㅋ.,)







장난 치는 방법은, 아래에 버튼을 보시면 됩니다.

컴 사양을 많이 타기에 저사양 유저분들은 플래시-우클릭-퀼리티-로우 설정을 해주시면 됩니다.

주기적으로 최적화 함수를 호출해서 어느정도 괜찮아 졌습니다...ㅎ


패치_01

화면 사이즈를 640x360 으로 크게 만들었습니다.
폭팔하는 혜성도 추가하였습니다.(add P2) 2개 이상, 27개 이하의 조각이 나옵니다.
역시 속도 벡터는 렌덤입니다.
무비 중심으로 부터의 거리가 600을 초과하면 해당 혜성은 사라집니다.
또한 중력공과 혜성의 거리가 8 미만이 되면 해당 혜성은 사라집니다.
만유인력 상수를 전버전에 비해 두배로 적용시켰습니다.




저작자 표시 비영리 변경 금지
신고
크리에이티브 커먼즈 라이선스
Creative Commons License
Trackback 0 Comment 0
2009.06.11 13:04
요즘 테스트 중인 중력에 대해서 설명을 해볼까 합니다..

그러면, 중력(만유인력)은 무엇일까요?


중력 (만유인력)
질량을 가진 물질들 사이에 서로 당기는 힘이다.

서로 당기는힘,,,이라는거죠. 뉴턴의 만유인력의 법칙 아시죠?

                               F = G {m_1 m_2 \over r^2}

이게 중력에 대한 식인데요, 여기서 F는 중력, G는 만유인력 상수(6.6726×10-11N·㎡/kg2), m1, m2는 질량, r 는 두 물체사이의 거리입니다.           (그림 출처 : 위키)

하지만,,,플래시 공간에서는 2차원입니다......즉, 무비클립의 위치를 x, y 로 나타내야 한다는거죠.

그러면 벡터를 분해해야 합니다. 오래전에 포스팅한 포물선에서 보시면 아시겠지만,,,다시 그려봅니다...



대각선 화살표를 x축, y축에 대해서 분해를 한건데요, x축에 해당하는 화살표(벡터)는 벡터 F의 x성분이라고 하고 y축에 해당하는 화살표는 벡터 F의 y성분 이라고 합니다.


여기서 F의 크기를 구할 수 있으니(위에 있는 만유인력의 법칙) 각 성분을 구할 수 있겠죠?

Fx = F*Math.cos(θ)
Fy = F*Math.sin(θ)

이렇게 삼각함수로 나타낼 수 있습니다.

이것을 정리하면,

Fx = (G*m1*m2*diffX)/(r*r*r)
Fy = (G*m1*m2*diffY)/(r*r*r)

이렇게 됩니다. (diffX, diffY 는 두 물체의 x, y 의 차이, 자세한건 신명용님의 플래시 mx 액션 스크립트 1 물리편을 참조해 주세요.)

액션 스크립트(~2.0) 으로 나타내면,

var K:Number = -25;
//G*m1*m2 를 하나의 상수(K)로 생각한겁니다. 이건 마음대로 질량을 할당해주셔도 됩니다^^ 그런데, 여기서 수상한 점은 '음수'란건데요, 그 이유는 끌어 당기는 힘이기에 힘은 중심으로 향합니다,,,  반대로 양수가 되면 반중력이 되겠죠?
var tempx:Number = 0;
var tempy:Number = 0;
var i:Number=0;
var j:Number=0;

function dis(target1, target2) { // 두 무비클립 사이의 거리를 계산 (피타고라스)
    var diffX:Number = target1._x - target2._x;
    var diffY:Number = target1._y - target2._y;
    return Math.sqrt(diffX * diffX + diffY * diffY);
}

function GForceX(targetM, targetG) { //X축에 해당하는 중력 벡터
    var r:Number = dis(targetM, targetG);
    var diff:Number = targetM._x - targetG._x;
    var Fx:Number = K * diff / (r * r * r);
    return Fx;
}

function GForceY(targetM, targetG) { //Y축에 해당하는 중력 벡터
    var r:Number = dis(targetM, targetG);
    var diff:Number = targetM._y - targetG._y;
    var Fy:Number = K * diff / (r * r * r);
    return Fy;
}

function MoveBall(targetM, targetG) { //중력이 작용하는 공을 움직이게
    targetM.tempx += GForceX(targetM, targetG);
// 힘은 가속도x질량 이라서 임시(위치) 변수에 담고 이걸 속도 벡터에 더한뒤 다시 속도 벡터를 무비클립의 _x, _y 에 더합니다.
    targetM.tempy += GForceY(targetM, targetG);
    targetM.vx += targetM.tempx;
    targetM.vy += targetM.tempy;
    targetM._x = targetM.ox + targetM.vx;
//ox는 오리지널 x, 즉, 이 공이 생성된 위치 입니다..
    targetM._y = targetM.oy + targetM.vy;
}

function varGen(MBname) { // 중력이 작용하는 공 무비클립에 변수를 생성해주고 변수값을 초기화
    MBname.tempx = 0.5; //초기 속도의 x성분 벡터가 0.5
    MBname.tempy = 0.5; //초기 속도의 x성분 벡터가 0.5
    MBname.vx = 0;
    MBname.vy = 0;
    MBname.ox = MBname._x;
    MBname.oy = MBname._y;
}

_root.onLoad = function() { // 무비 로드시 중력이 작용하는 공에 변수 생성및 초기화
        varGen(_root["MB"+1]);
};

_root.onEnterFrame = function() { // 매 프레임마다 중력이 작용하는 공을 움직임
            MoveBall(_root["MB"+1],_root["GB"+1]);
};



< 다음 글 내용은~? >

지금 상태는 중력이 작용하는 공 1개, 중력공 1개인데요,,,,

1개씩만 장난치면 재미가 없겠죠?

다음 글에는 여러개의 공을 가지고 노는 방법 및 중력이 작용하는 공 과 중력공과의 직선 잇기, 자취 만들기가 되겠습니다...



궁금하신건 코맨트를 달아주세요, 그러면 제가 아는 한도내에서 답변을 드립니다^^
저작자 표시 비영리 변경 금지
신고
크리에이티브 커먼즈 라이선스
Creative Commons License
Trackback 0 Comment 0
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.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 + ]

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

저작자 표시 비영리 변경 금지
신고
크리에이티브 커먼즈 라이선스
Creative Commons License
Trackback 0 Comment 0
2008.10.23 00:12
test

[FLASK]화살 엔진 ver.1.64

첨가된것들:

슈팅 히스토리 생성(노오란 선..)

폰트 바꿈

* 버그가 아직 있는데..;; 화살을 너무 많이 쏴서 과다출혈로 만들면 화살이 생성되지 않습니다..

뎁스에 대한 오류가 있는듯...한데..;;

다음 버젼에는 고쳐서 올리겠습니다..;;
폴딩을 여시면 무비가 재생됩니다.

더보기





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

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

[Flask]화살엔진 ver 1.64 test  (1) 2009.01.31
[FLASK]화살 엔진 ver.1.64  (0) 2008.10.23
[Flask] Rotation ver 0.35  (0) 2008.10.12
[Flask] Rotation ver 0.3  (0) 2008.09.28
Trackback 0 Comment 0
2008.10.12 22:56
Preloading(프리 로딩)이란?

프리 로딩이란, 글자 그래도 미리 로드해둔다...(미리 로딩한다...)
이런 뜻입니다.
즉, 아직 로딩이 다 되지 않았음에도 불구하고, 플래시나, 기타 무비를 재생했을때 그림, 글씨, 소리가 제대로, 정확히 나와야할 지점에 나오지 않을때가 간혹 있습니다.
이걸 방지 하기위하여, 프리로딩이 필요한겁니다.                           (제 생각)


* 생각해보기

왜, 저렇게 될까요?
바로 이 플래시또는 무비를 인터넷 상에서 실행하기에, 다운로드를 다 받지 못할수 있습니다.
이것이 제일 첫번째 이유이며, 가장 큰 이유일겁니다...
다운로드를 다 받지 못했으니 당연히 제대로 재생되거나 시작되지못하겠죠?

그럼 어떻게 하면 좋을까요?!
이렇게 생각하셨겠죠? '당연히 다 다운로드 안받았을때는 재생하지 안으면 되지 멀..'
딩동댕~

그럼 이제 어떻게 다 다운로드되었는지 알아야하겠죠?(아래 내용은 모두 as2.0기준입니다.)


플래시에 보면, 이런 함수가 있습니다.

_root.getBytesTotal()
_root.getBytesLoaded()

이게 핵심입니다. (절라 중요하니, 별표 하고싶은 만큼 하세요..;;)

네..이게 끝입니다..


너무 간단한가요..
그럼 아래는 그래도 잘 모르겠다 싶으신분들을 위해~(첨부 파일은 cs3로 저장되어 있습니다.)

화질은 상당히 않좋습니다... 양해 바랍니다...ㅠ


먼저 자기 맘대로 로딩바를 만듭니다.


주황색 바에 인스턴스 네임을 "bar" 라고 지어줬습니다.


이쪽이 상당히 생략 되어있군요..

액션 레이어와, 무비클립 레이어를 따로 만들어 줬습니다.
그런후, 액션 레이어에는 키 프레임을 하나 넣어주고(1, 2 프레임에 키프레임이 있게 됩니다.)
무비클립 레이어에는 그냥 F5를 눌러서 프레임을 넣어줍니다.
그런후 액션 레이어의 프레임 1에 F9를 눌러서 입력합니다.


[프레임 1]

var Loaded:Number = _root.getBytesLoaded()/_root.getBytesTotal()//다운로드된 량을 계산합니다. 아무것도 안받았을때는 0이고, 완전히 받아 졌을때는 1이 됩니다.

_root.onLoad = function(){
   _root.bar._xscale = 0;//bar의 초기 x비율을 0으로 지정해줍니다.
}
_root.onEnterFrame = function(){
   _root.bar._xscale = Math.round(100*Loaded);//매 프레임 마다 스케일을 조절합니다.완전히 받아졌다면 100을 출력하게 됩니다.(그래서 bar의 x비율이 100%가 되는거죠.)
}


[프레임 2]

if(Loaded==1){
   _root.gotoAndPlay(3);//만약, 모두 다운받아졌다면, 3번 프레임으로 가서 본 무비를 실행합니다.
}else{
   _root.gotoAndPlay(1);//그렇지 않으면, 다시 프레임 1 로 가서 재생합니다.
}






저는 무비넣을게 없어서 그림으로 대체했습니다. 무비가 재생되면, 매 프레임마다 그림이 올라갑니다.


컴파일!!


바로 그림이 떠서 재생되죠?
그 이유는 이 무비가 하드디스크에 이미 받아져 있어서 다운로드 과정을 거치지 않기 때문입니다.
그러면 확인할 방법이 인터넷에 올려야하는것인가?
아닙니다. 아래로~


보시면, 뷰 탭을 눌르면, '다운로드 셋팅'이 있습니다. 보시면 여러가지 회선 종류가 있고, 커스터마이징도 할수 있습니다.
(저는 adsl을 만들어 놨는데..;; 아무거나 선택하시면 됩니다.)


선택하신뒤에, 뷰탭에 있는 '시뮬레이트 다운로드'를 누릅니다.


그럼 로딩되는모습이 보여질꺼에요^^



완성 하셨나요?
여기 예제 올려드립니다.(cs3로 저장 되어 있습니다, 혹시나 해서..그림(만화)소스는 속깊은 여자 친구 이야기 1편입니다.)





본 내용은 http://www.gotoandlearn.com/의 강좌를 글로 쓴것입니다.
저작자 표시 비영리 변경 금지
신고
크리에이티브 커먼즈 라이선스
Creative Commons License
Trackback 0 Comment 2
  1. KooH 2009.08.23 22:47 신고 address edit & del reply

    좋은 예제 감사합니다 ^^

  2. Favicon of http://blog.kkyhome.com BlogIcon KKY 2010.09.15 16:26 신고 address edit & del reply

    감사합니다. 많은 도움이 되었습니다.

2008.10.12 21:49
[Flask] Rotation ver 0.35

// 도움말

more..

[Flask] Rotation ver 0.35 열기



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

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

[FLASK]화살 엔진 ver.1.64  (0) 2008.10.23
[Flask] Rotation ver 0.35  (0) 2008.10.12
[Flask] Rotation ver 0.3  (0) 2008.09.28
[FLASK]화살 엔진 ver.1.63  (0) 2008.09.27
Trackback 0 Comment 0
2008.10.12 08:30

예제: ASCII Art

ASCII Art 예제에서는 ActionScript 3.0에서 String 클래스를 사용한 작업의 다양한 기능을 보여 줍니다. 다음은 그 기능 중 일부입니다.

  • String 클래스의 split() 메서드는 문자 구분 문자열에서 값을 추출(탭 구분 텍스트 파일의 이미지 정보)하는 데 사용됩니다.
  • split(), 연결 및 substring(), substr()을 사용한 문자열 일부 추출 등을 비롯한 여러 문자열 조작 기술은 이미지 제목에서 각 단어의 첫 번째 글자를 대문자화하는 데 사용됩니다.
  • getCharAt() 메서드는 문자열에서 단일 문자를 가져오는 데 사용됩니다(회색 음영 비트맵 값에 해당하는 ASCII 문자를 결정하기 위해).
  • 문자열 연결은 한 번에 하나의 문자씩 이미지의 ASCII Art 표현을 작성하는 데 사용됩니다.

ASCII Art는 Courier New 문자와 같은 고정폭 글꼴 문자로 구성된 격자를 사용하여 이미지를 표시하는 것으로, 이미지를 텍스트로 표현한 것을 나타냅니다. 다음 이미지는 응용 프로그램에서 생성된 ASCII Art의 예입니다.

ASCII Art 출력 샘플 이미지, 배 이미지와 ASCII 문자를 사용하여 만들어진 배의 이미지

사용자 삽입 이미지

오른쪽 이미지는 그래픽의 ASCII Art 버전입니다.


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

파일

설명

AsciiArtApp.mxml

또는

AsciiArtApp.fla

Flash(FLA) 또는 Flex(MXML) 형식의 기본 응용 프로그램 파일입니다.

com/example/programmingas3/asciiArt/AsciiArtBuilder.as

텍스트 파일의 이미지 메타데이터 추출, 이미지 로딩, 이미지-텍스트 변환 프로세스 관리 등을 비롯한 응용 프로그램의 주요 기능을 제공하는 클래스입니다.

com/example/programmingas3/asciiArt/BitmapToAsciiConverter.as

이미지 데이터를 문자열 버전으로 변환하기 위한 parseBitmapData() 메서드를 제공하는 클래스입니다.

com/example/programmingas3/asciiArt/Image.as

로드된 비트맵 이미지를 나타내는 클래스입니다.

com/example/programmingas3/asciiArt/ImageInfo.as

제목, 이미지 파일 URL 등과 같은 ASCII Art 이미지에 대한 메타데이터를 나타내는 클래스입니다.

image/

응용 프로그램에서 사용된 이미지가 포함되어 있는 폴더입니다.

txt/ImageData.txt

응용 프로그램에 로드되는 이미지에 대한 정보가 포함되어 있는, 탭으로 구분된 텍스트 파일입니다.

세부 목차

탭 구분 값 추출

String 메서드를 사용하여 이미지 제목 정규화

ASCII Art 텍스트 생성

탭 구분 값 추출

이 예제에서는 응용 프로그램 자체와 응용 프로그램 데이터를 별도로 저장하는 일반적인 규칙이 사용되어, 데이터가 변경된 경우에도(예: 다른 이미지가 추가되거나 이미지 제목이 변경된 경우) SWF 파일을 다시 만들 필요가 없습니다. 이 경우 이미지 제목, 실제 이미지 파일의 URL, 이미지를 조작하는 데 사용된 일부 값 등을 비롯한 이미지 메타데이터는 텍스트 파일에 저장됩니다(프로젝트의 txt/ImageData.txt 파일). 이 텍스트 파일의 내용은 다음과 같습니다.

FILENAME    TITLE    WHITE_THRESHHOLD    BLACK_THRESHHOLDFruitBasket.jpg    Pear, apple, orange, and banana    d8    10Banana.jpg    A picture of a banana    C8    20Orange.jpg    orange    FF    20Apple.jpg    picture of an apple    6E    10

이 파일은 특정 탭 구분 포맷을 사용합니다. 첫 번째 줄(행)은 머리글 행입니다. 나머지 행에는 로드할 각 비트맵에 대한 다음 데이터가 포함됩니다.

  • 비트맵의 파일 이름
  • 비트맵의 표시 이름
  • 비트맵의 흰색 임계값 및 검정 임계값. 16진수 값으로 이 값 위 및 아래의 픽셀은 완전한 흰색이나 완전한 검정으로 간주됩니다.

응용 프로그램이 시작되면 즉시 AsciiArtBuilder 클래스에서는 AsciiArtBuilder 클래스의 parseImageInfo() 메서드의 다음 코드를 사용하여, 표시할 이미지의 "스택"을 만들기 위해 텍스트 파일의 내용을 로드하고 파싱합니다.

  1. var lines:Array = _imageInfoLoader.data.split("\n");
  2. var numLines:uint = lines.length;
  3. for (var i:uint = 1; i < numLines; i++)
  4. {
  5.     var imageInfoRaw:String = lines[i];
  6.     ...
  7.     if (imageInfoRaw.length > 0)
  8.     {
  9.         // Create a new image info record and add it to the array of image info.
  10.         var imageInfo:ImageInfo = new ImageInfo();
  11.         // Split the current line into values (separated by tab (\t)
  12.         // characters) and extract the individual properties:
  13.         var imageProperties:Array = imageInfoRaw.split("\t");
  14.         imageInfo.fileName = imageProperties[0];
  15.         imageInfo.title = normalizeTitle(imageProperties[1]);
  16.         imageInfo.whiteThreshold = parseInt(imageProperties[2], 16);
  17.         imageInfo.blackThreshold = parseInt(imageProperties[3], 16);
  18.         result.push(imageInfo);
  19.     }
  20. }

텍스트 파일의 전체 내용은 단일 문자열 인스턴스, _imageInfoLoader.data 속성에 포함됩니다. 개행 문자("\n")를 매개 변수로 한 split() 메서드를 사용하여, 문자열 인스턴스를 각 요소가 텍스트 파일의 개별 행인 배열(lines)로 분할합니다. 그런 다음, 코드에서 루프를 사용하여 각 행에 대한 작업을 실행합니다(첫 번째 행은 실제 내용이 아닌 머리글만 포함되므로 제외). 루프 내에서 split() 메서드를 한 번 더 사용하여 한 행의 내용을 하나의 값 세트(imageProperties라는 Array 객체)로 분할합니다. 이때 split() 메서드와 함께 사용되는 매개 변수는 각 행의 값이 탭 문자로 구분되어 있으므로 탭("\t") 문자입니다.

String 메서드를 사용하여 이미지 제목 정규화

이 응용 프로그램의 디자인 결정 사항 중 하나는 모든 이미지 제목을 각 단어의 첫 번째 글자를 대문자로 표시하는 표준 포맷을 사용하여 표시하는 것입니다(영어 제목에서 일반적으로 대문자로 쓰이지 않는 일부 단어 제외). 텍스트 파일에 적절하게 포맷된 제목이 포함되었다고 가정하는 것이 아니라, 이 응용 프로그램은 텍스트 파일에서 제목을 추출할 때 직접 제목을 포맷합니다.

이전 코드 샘플에서 개별 이미지 메타데이터 값 추출의 일부로 다음 코드 행이 사용됩니다.

        imageInfo.title = normalizeTitle(imageProperties[1]);

이 코드에서 텍스트 파일의 이미지 제목은 ImageInfo 객체에 저장되기 전에 normalizeTitle() 메서드를 통해 전달됩니다.

private function normalizeTitle(title:String):String{    var words:Array = title.split(" ");    var len:uint = words.length;    for (var i:uint; i < len; i++)    {        words[i] = capitalizeFirstLetter(words[i]);    }        return words.join(" ");}

이 메서드는 split() 메서드를 사용하여 제목을 개별 단어(공백 문자로 구분)로 분리한 뒤 capitalizeFirstLetter() 메서드를 통해 각 단어를 전달하고 Array 클래스의 join() 메서드를 사용하여 단어를 단일 문자열로 다시 결합합니다.

이름에서 알 수 있듯이 capitalizeFirstLetter() 메서드는 각 단어의 첫 번째 글자를 대문자로 바꾸는 작업을 합니다.

/**
* Capitalizes the first letter of a single word, unless it's one of
* a set of words that are normally not capitalized in English.
*/
private function capitalizeFirstLetter(word:String):String
{
switch (word)
{
case "and":
case "the":
case "in":
case "an":
case "or":
case "at":
case "of":
case "a":
// Don't do anything to these words.
break;
default:
// For any other word, capitalize the first character.
var firstLetter:String = word.substr(0, 1);
firstLetter = firstLetter.toUpperCase();
var otherLetters:String = word.substring(1);
word = firstLetter + otherLetters;
}
return word;
}

영어에서는 제목에 "and," "the," "in," "an," "or," "at," "of," "a"와 같은 단어가 있을 경우 해당 단어의 첫 자는 대문자로 쓰지 않습니다(간소화된 규칙 버전). 이 논리를 실행하기 위해 코드에서는 먼저 switch 문을 사용하여 단어가 대문자로 쓰면 안 되는 단어인지 확인합니다. 대문자로 쓰면 안 되는 단어 중 하나일 경우 코드는 switch 문을 빠져 나옵니다. 반면 대문자로 써야 할 단어일 경우 다음과 같이 여러 단계를 수행합니다.

  1. 단어의 첫 번째 글자가 substr(0, 1)을 사용하여 추출됩니다. 이 메서드는 인덱스 0에 있는 문자(첫 번째 매개 변수 0으로 지정된 대로 문자열의 첫 번째 글자)로 시작되는 하위 문자열을 추출합니다. 하위 문자열은 두 번째 매개 변수 1로 지정된 길이 대로 한 문자가 됩니다.
  2. 이 문자를 toUpperCase() 메서드를 사용하여 대문자화합니다.
  3. 원래 단어의 나머지 문자는 substring(1)을 사용하여 추출되며, 이 메서드는 인덱스 1에서 시작하는 하위 문자열(두 번째 글자)을 문자열의 끝까지(substring() 메서드의 두 번째 매개 변수를 생략하여 지정) 추출합니다.
  4. 최종 단어는 문자열 연결(firstLetter + otherLetters)을 사용하여 대문자로 바뀐 첫 번째 글자와 나머지 글자를 결합하여 만들어집니다.

ASCII Art 텍스트 생성

BitmapToAsciiConverter 클래스는 비트맵 이미지를 ASCII 텍스트 표현으로 변환하는 기능을 제공합니다. 이 프로세스는 parseBitmapData() 메서드에서 수행되며 아래에 프로세스 일부가 나와 있습니다.

var result:String = ""; // Loop through the rows of pixels top to bottom: for (var y:uint = 0; y < _data.height; y += verticalResolution) { // Within each row, loop through pixels left to right: for (var x:uint = 0; x < _data.width; x += horizontalResolution) { ... // Convert the gray value in the 0-255 range to a value // in the 0-64 range (since that's the number of "shades of // gray" in the set of available characters): index = Math.floor(grayVal / 4); result += palette.charAt(index); } result += "\n"; } return result;

이 코드는 비트맵 이미지의 ASCII Art 버전을 작성하는 데 사용될 result라는 문자열 인스턴스를 먼저 정의합니다. 그런 다음 소스 비트맵 이미지의 개별 픽셀에 대해 작업을 반복합니다. 즉, 여러 색상 조작 기술을 사용하여(지면 관계상 자세한 내용은 생략) 개별 픽셀의 빨강, 녹색, 파랑 색상 값을 단일 회색 음영 값(0-255)으로 변환합니다. 그런 다음 위의 코드와 같이 이 값을 4로 나누어 0-63 사이의 값으로 변환한 후, 변수 index에 저장합니다. 이 응용 프로그램에서 사용되는 사용 가능한 ASCII 문자 "팔레트"에 64개의 값이 포함되므로 0-63 사이의 값이 사용됩니다. 문자의 팔레트는 BitmapToAsciiConverter 클래스에서 문자열 인스턴스로 정의됩니다.

// The characters are in order from darkest to lightest, so that their
// position (index) in the string corresponds to a relative color value
// (0 = black).
private static const palette:String = "@#$%&8BMW*mwqpdbkhaoQ0OZXYUJCLtfjzxnuvcr[]{}1()|/?Il!i><+_~-;,. ";

index 변수가 비트맵 이미지의 현재 픽셀에 해당하는 팔레트의 ASCII 문자를 정의하므로, 문자는 charAt() 메서드를 사용하여 palette String에서 가져옵니다. 그런 다음 이 문자를 연결 대입 연산자(+=)를 사용하여 result 문자열 인스턴스에 추가합니다. 또한 각 픽셀 행의 끝에서, 개행 문자를 result String의 끝에 연결하여 새 문자 "픽셀" 행을 줄을 바꿔 표시하도록 합니다.


출처 : Flash CS3 레퍼런스

신고
크리에이티브 커먼즈 라이선스
Creative Commons License
Trackback 0 Comment 0


티스토리 툴바