메뉴 만들기 (5) 부드러운 움직임의 이해

안녕하세요....... 오늘은 메뉴 만들기의 5번째 시간이네요....   요즘 현존하는 메뉴의 대부분이 부드러운 움직임이 들어간 메뉴죠? 또는 부드러운 컬러값의 변화가 있는 거도 있구요.   부드러운....   이게 핵심이 되겠네요..   또는 탄력적인 움직임이 들어간 메뉴이구요.. 탄력적인 움직임을 할려면 그전에 부드러운 움직임을 이해를 해야 탄력적인 움직임을 표현 할 수 있습니다.   사실 부드러운 움직임은 물리 부분이 조금 들어가는 거라서 물리나라님이나 과학사랑님께서 설명을 해 주시는게 더 잘 해주시겠지만. 제 강좌에서도 맞물려 있어서 제가 설명 하게 되네요..   오늘은 부드러운 움직임 에 대해서 알아보겠습니다   부드러운 움직임........... 우선 부드러움은 던져 버리고 움직임에 대해서 생각해보죠.   그럼 플래시에서의 움직임이라는 것은 무엇일까요? 플래시에서의 움직임이란 무엇일까? 한 번 눈을 감고 3초 정도 생각해보세요..   움직임...움직임..움직임..........   플래시에서의움직임이라는 것은 단지 좌표의 이동입니다.   하나의 대상의 좌표가 연속적으로 이동을 하면 우리는 그 대상이 움직이는 것처럼 보이게 됩니다   그 움직임의 시간이 빠를 수록 우리 눈에는 자연스럽게 보이는 거구 그 움직임의 시간이 적을 수록 우리 눈에는 그 움직임이 부자연스럽게 보이는 겁니다.   가장 쉬운 예를 들어 볼께요.   똑 같은 거리를 똑같은 시간에 12fps로 움직일때랑 36fps로 움직일떄의 차이점을 아래의 swf 에서 확인 하세요.     12 fps의 움직임                                               36 fps의 움직임   ㅠ.ㅠ  에니메이션으로 하니 조금의 오차가 있네요.. 똑같은 거리에 똑같은 시간인데... 이유야 뻔하지만....     ==================================================   생각해보기   왜 이런 오차가 나게 될까요.. 12 fps 는 24frame 동안 300 px 움직였고 36 fps 는 72frame 동안 300 px 움직였습니다. 둘다 2초 동안 똑같은 거리를 움직였죠? 그런데 똑 같은 시간에 안 끝나는 이유는? 이건  Naver 지식검색에 물어봐도 안 나올꺼에요..ㅎㅎ   ==================================================   암튼 우리가 만화영화를 보면 미국 만화영화는 자연스럽게 보이고 일본 만화영화는 좀 끊껴져 보이는 것도 이와 같은 맥락입니다.   미국 만화는 24frame 으로 일본 만화는 18frame으로 제작 되기 때문이죠?  맞나?  대략 저 정도 수치입니다.   결론적으로 말하면 자주 움직여 줄수록 우리 눈에는 자연스럽게 보입니다. 따라서 우리가 액션으로 움직임을 표현할 때도 fps를 30 정도 잡아 주시면 더욱더 자연스러운 움직임을 볼 수가 있습니다.   자 그럼 움직임으로 가볼까요?   일단 움직임이니 끊임없이 좌표가 바껴야 겠죠..   부드러운 움직임에 앞서. 액션으로 움직임을 표현 하는 것 부터 배워야 합니다.   가장 쉬운 예......   오른쪽으로 하나의 무비클립을 움직여 보아요.. 스테이지에 하나의 원을 그립니다. 그리고 그 원의 인스턴스 이름을 ball 이라고 합니다.   ball 무비클립을 움직일려면 ball 좌표를 바꾸어 주어야 합니다 오른쪽으로 움직이기로 했으니.. ball 의 x 좌표를 바꾸어 주어야 겠죠.   플래시의 좌표 체계는 오른쪽으로 갈수록 x 의 값이 증가함으로 x 의 좌표를 증가 시켜 주면 ball 이 오른쪽으로 움직이는 것처럼 보이게 됩니다.   그럼 오른쪽으로 계속해서 움직일려면 어떻게 해야 될까요? 네.그렇습니다..   계속해서 ball 의 x 좌표를 증가 시켜 주면 ball 은 오른쪽으로  계속해서 움직이게 됩니다..       한글로 생각하기   ball 이라는 것이 오른쪽으로 움직인다. ball 을 오른쪽으로 움직일려면 ball 의 x 좌표를 증가시켜야 한다. ball 이 계속해서 움직임으로 현재 자기 자신의 x 좌표를 계속해서 증가시켜야 한다.   유사코드로 접근하기   ball._x를 증가시킨다. 자기 자신의 위치에서 계속해서 증가해야 하기 때문에 // ball의 (새로운)x 위치는  // 플래시에서 기억하는 (과거의)ball의 x 위치에서 10을 더한 만큼의 위치 ball._x = ball._x + 10  계속해서 증가시켜야 하기 때문에 enterFrame 이나 setInterval 이벤트를 써야 한다.   액션으로 표현하기   _root.onEnterFrame = function () {   _root.ball._x = ball._x + 10 }   또는 this.ball.onEnterFrame = function () {     this._x = this._x + 10 }   조금더 간편하게 표현하기   _root.onEnterFrame = function () {   _root.ball._x +=10 }   또는 this.ball.onEnterFrame = function () {     this._x += 10 }   참고 a = a+1  ===> a+= 1 a = a-1   ===> a-= 1 a = a*1   ===> a*= 1 a = a/1   ====>  a/=1   이제 플래시에서의 움직임에 대해서 아시겠죠.. 정리하자면... 오른쪽으로 움직임 x의 좌표를 증가시킨다.   왼쪽으로 움직임 x의 좌표를 감소시킨다.   위로의 움직임 y의 좌표를 감소시킨다. 아래로의 움직임 y의 좌표를 증가시킨다.     플래시로 자기가 생각하는 것을 표현할려면 우선 한글로 완전히 자기가 생각하는 것을 또는 표현할려는 것을 정리한다음 유사코드로 접근을 하고 마지막으로 액션으로 코딩하고 가장 나중에 최적화를 시키면 됩니다.   항상 가장 자기만의 예제를 가지고 있는게 중요합니다. 자기만의 가장 쉬운 예제로 부터 시작하고 거기서 부터 살을 붙여 나가는 거죠. 그리고 살을 다 붙인 후 완전히 표현 되면 최적화 코드로 바꾸는거라고 생각합니다.   쓰다보니 길어졌네요... 부드러움은 다음시간에서 하고 이번시간은 움직임에서 끝내는 게 좋을 듯 싶네요..