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

안녕하세요..보헤입니다. 혹자는 아디가 왜 "보헤"냐고 물어보시는 사람이 많습니다. 그러면서 다 들 한마디 하시는 게 왜 술이름을 아디로 했냐고? 저 술이름 아닙니다. ㅡ.ㅡ 소주 이름은 "보해" 입니다. 저기 전라도 쪽에 가면 보해 소주 팝니다. 제 아디는 bohemian 에서 앞에만 따서 bohe 입니다.. bohemian의 뜻이 넘 좋아서^^   보통의 영한 사전을 찾으면 뜻이 집시라는 뜻으로 나와 있습니다..그럼 우린 생각을 하죠.. 옷 좀 지저분하게 입고, 길거리를 방랑하는 사람?   어는 순간부터 영영사전을 보게 되었고 거기서 본 bohemian 의 뜻.. A person that does not follow the usual social life Though obeying the law... 또는 A person with artistic or literary interests who disregards conventional standards of behavior.   이런 뜻이더라구요....저의 가치관과 일치 합니다..^^     저번 5_1 시간에는 움직임에 대해서 알아 보았습니다. 오늘은 부드러움에 대해서 알아 보겟습니다. 부드럽다는 자연스럽다는 말과 거의 비슷하겠죠..   하나의 물체가 움직일때 등속의 움직임 보다는 가속 및 감속의 움직임이 더욱더 자연스럽습니다 왜 그런지는 물리나라님께서 설명해주시리라고 믿습니다^^.. 자연의 법칙인디..관성의 법칙인가?  중력의 법칙인가? (아참 수학 정석이랑 고등학교 물리 참고서 샀습니다...열심히 공부하세^^)   우선 등속 감속 가속의 뜻부터 정확하게 알아야 겠죠. 우리나라 말에는 한자가 참 많습니다.... 그리고 한자를 잘 알면 도움되는 단어가 정말 많죠..많은 단어들이 한자로 되어 있으니   뜻풀이...   등속 = 속도가 같은 거 감속 = 속도가 늦어지는 것 가속 = 속도가 빨라지는 것   한자로 보는 것보다 훨 이해하기가 쉽죠? 그럼 실제 화면으로 보는게 젤 좋겠죠^^   등속, 감속, 가속의 예         등속은 가장 위에꺼..(속도가 일정합니다.) 감속은 중간꺼...(점점 느려지죠?) 가속은 가장 아래꺼가 됩니다.  (점점 빨라집니다.)   이것은 모션으로 아주 쉽게 할 수 있습니다. 트윈 주고 나서 Ease 값을 조절 해 주면 됩니다.   Ease 값이 클수록 처음에는 빨리 가다가 늦어지고 작을수록 처음에는 늦었다가 점점 빨라지게 되는 거죠^^   우리가 요즘 보는 메뉴들의 움직임들은 대부분 등속의 움직임이 아니라. 감속의 움직임입니다. 처음에는 빨랐다가 점점 느려지는 것이죠..   우리가 흔히 보는 메뉴들의 움직임.       우리가 주로 보는 것들은 1번보다는 2번의 움직임이죠.. 2번이 더 자연스럽게 보이고 리듬감 있게 보입니다.   1번은 등속의 속도이고 2번은 감속의 속도입니다.     이제 모션이 아니라 액션으로 저러한 움직임을 표현 해야 합니다.   좌표 0에서 200 까지 움직일려고 할 때 표현할 수 있는 방법은 여러가지가 있겠지만 등속과 감속의 움직임을 먼저 알아 보겠습니다.   등속 부터 알아야 합니다.   등속이라는 것은 항상 같은 속도로 움직인다는 뜻입니다.   먼저 조건은 내버려두고 움직임 부터 표현 해야겠죠? mc 라는 무비클럽을 하나 만들고 프레임에 다음과 같이 코딩합니다.   움직임만을 표현 한 것(조건 무시) mc.onEnterFrame = function () {   this._x += 5 }   이러면 mc 라는 무비클립은 자기자신의 위치를 계속해서 5씩 증가하게 됩니다. 항상 5씩 증가 하게 되므로 같은 속도로 움직이게 되는 겁니다.   움직임은 표현 했습니다. 그런데 조건이 있습니다. 처음 위치가 0 이고 200까지만 움직여야 합니다. 따라서 다음과 같은 조건을 ..   조건 만족한 움직임 mc._x = 0  // mc 무비클립의 x좌표를 0으로 만든다 mc.onEnterFrame = function () {    if(this._x < 200) {  // mc의 무비클립의 위치가 200 보다 작다면       this._x += 5   //  자기자신(mc) x 위치를 자기자신의 위치에서 5만큼 증가    } else {  // 그렇지 않다면 , 즉 mc의 위치가 200보다 크다면       delete this.onEnterFrame  // 엔터 프레임 죽여라. 죽으므로 더 이상 안 움직임    } }   자 우리는 mc 라는 무비클립을 일정한 속도로 0에서 200으로 움직이는 코딩을 완성 했습니다.   제가 조건 없는 것과 조건 있는 것을 다 코딩한 이유를 빨리 눈치 채시길 바랍니다.   조건 없는 코딩은 보면 일단 간단해 보이지 않습니까? 조건 있는 거는 왠지 복잡해 보입니다. 가장 간단한 것부터 시작해서 조건이 필요하면 그에 맞는 조건을 달다 보면 코딩이 늘어나는 것 뿐입니다.   여러분들이 어떤 코딩을 보았을 때... 헉....복잡해..어려워.... 이런것도 다 기본적인 코딩에서 점점 살을 붙혀가는 것 뿐입니다.   2번째 조건이 있는 코딩을 볼때   여러분들이 어렵게 느껴진다면 첫번째...if 문을 이해 못한 경우도 있고 두번째...움직임을 표현하는 액션을 이해 못한 경우도 있습니다. if 와 움직임을 표현하는 액션이 다 이해가 되었을 때 위의 액션코딩이 이해가 완벽히 되는 겁니다.   항상 제가 강조 했듯이   아무리 어려운 액션이라도 가장 기본적인거 부터 시작해서 점점 살을 붙혀 가는 겁니다.   감속을 해 Boa요   감속이란는 것은 점점 속도가 줄어든다는 뜻입니다. 그럼 속도가 줄어 든다는 것은 무얼 의미할까요? 플래시의 움직임은 좌표의 변화라고 설명한 적이 있습니다. 좌표의 변화가 계속해서 5씩 움직이게 되면 같은 속도의 움직임이 되지만   좌표의 변화가 처음에는 5 다음에는 4 다음에는 3 다음에는 2 다음에는 1   이런씩으로 된다면 점점 속도가 줄어드는 게 되겠죠. 실제로는 5, 1.5, 0.45 이런씩으로 줄어드는게 더 자연스럽습니다만 우리에겐 중요한건 개념이지요..   mc._x = 0 mc.onEnterFrame = function () {   this._x = this._x+0.3*(200-this._x) } 앗..식사시간이네요.. 다 들 점심 맛나게 드세요.. 점심을 먹고 와서 계속 씁니다..ㅎㅎ   위의 코딩으로 하면 점점 늦어지면서 200의 위치에서 mc 무비클립이 멈춰집니다. 정확하게 말하자면 멈춰 있는 것 처럼 보이게 되는 거죠.. 실제로는 혼자 열심히 계산되지고 있답니다... 음...요건 조금 있다가 자세히 설명 드리겠습니다.   암튼 저렇게 쓰면 우리가 원하는 감속이 됩니다.   이렇게 넘어갈 수 없죠..^^ 파헤치기....   달라진 점 부터 함 볼까요?   1. 등속 mc._x = 0 mc.onEnterFrame = function () {  this._x = this_x+5 }   2. 감속 mc._x = 0 mc.onEnterFrame = function () {  this._x = this._x + 0.3*(200 - this._x) }   예 보시는 바와 같이 빨간색 부분만 다릅니다. 나머지는 같습니다. 아 이거 설명 할꺼 생각 하니 빡시네요.. 그래도 해야죠^^   우선 저 식을 증명하라고 하면 저 못합니다. 저 수학과 아닙니다.^^;;   다만 저 식을 이해 하고만 있습니다.   젤 처음 부터 보죠   한번 돌때 this._x = 0+0.3*(200-0) this._x = 0+60 this._x = 60   다음 돌때 this._x = 60+0.3*(200-60) this._x = 60+0.3*(140) this._x = 60+42 this._x = 102   다음 돌때 this._x = 102+0.3*(200-102) this._x = 102+0.3*(98) this._x = 102+29.4 this._x = 131.4   다음 돌때... ㅠ.ㅠ 힘들어요...     결론을 보죠.. 빨간 부분의 값이 점점 작아지는게 보이죠? 빨간 부분은 다음번에 움직이는 거리 입니다. 다음번에 움직일 거리가 점점 작아진다는 것은 점점 움직임이 적어 진다는 거죠. 움직임이 적어 지는것이 우리 눈에는 점점 느리게 가는 걸로 보이게 되는 겁니다.   그럼 약간 보기 좋게 정리를 해보죠..     mc.onEnterFrame = function () {    this._x = this._x + spd*(target -this._x) }   target  : 최종적인 목표값 spd : 1에 가까울 수록 => 움직이는 속도 빠름 0에 가까울 수록 => 움직이는 속도 늦음     위와 같이 요약 할 수 있습니다.   target 은 최종적인 목표값입니다...   이 목표값은 무엇이 목표냐에 따라서 달라지게 됩니다.   this._x ==> 위치를 움직일 때 this._alpha  ==> 투명도를 조절할 떄 this._xscale ==> 크기를 조절 할 떄   즉 목표에 따라 다른 효과를 나타나게 되는 겁니다.   spd 를 보죠   spd가 1일 때를 보겠습니다.      this._x = this._x + 1*(target -this._x)    this._x = this._x + target -this._x    this._x = target   결국에는 this의 x 위치는 target 이 됩니다. 즉 한번의 움직임으로 바로 target의 위치로 이동하게 되는거죠..   이해하기 쉽게 숫자를 넣어서 한 번 해보죠.   현재의 this._x 위 위치가 100이고 300으로 움직이고 싶을 때 spd에 1을 넣은 결과는   this._x = this._x + 1*(300-this._x) this._x = this._x + 300-this._x this._x = 300   따라서 시작하자 말자 바로 300으로 이동하게 됩니다.   spd가 0일 때를 보겠습니다.      this._x = this._x + 0*(target -this._x)    this._x = this._x   결국에는 this의 x 위치는 this._x 가 됩니다. 즉 위치가 움직이지 않게 됩니다. 가만히 정지 해 있게 되는 거죠.   이해하기 쉽게  또 숫자를 넣어서 한 번 해 Boa요.   현재의 this._x 위 위치가 100이고 300으로 움직이고 싶을 때 spd에 0을 넣은 결과는   this._x = this._x + 0*(300-this._x) this._x = this._x   따라서 시작을 해도 결국 자기 자리에 있습니다.   이제 이해가 가시죠? 1에 가까울 수록 빨리 움직이고 0에 가까울 수록 늦어 진다는게..^^   이제 부드러움에 대해서 배웠습니다.     이 부분은 신명용씨 책에 아주 자세히 설명히 잘 되어 있습니다.. 이해하실때까지 읽으시길 바랍니다.     과제   다음과 같은 효과를 액션만을 써서 만들어 보세요   1. 부드러운 알파값(alpha) 조절       2. 부드러운 스케일(scale) 조절       3. 부드러운 어드밴스 이펙트(advanced effect) 조절           힌트 1. _alpha 2. _scale 3. getTransform(), setTransform()     음...엄청 길어졌네요. 다음 부터 좀 더 짤라서 적어야 겠네요...   이제 마지막으로 hitTest 가  남았습니다. 현재의 대부분의 메뉴가 서브메뉴를 가지고 있기 때문에 hitTest를  꼭 배워야 버튼안에 버튼을 쓰는 효과를 낼 수 있습니다. 꼭 알아야 하는 내용이죠..^^