부드러운 모션-동적인 움직임.

플래쉬에서 자연스러운 움직임을 표현하는것은 무비 구현시 너무나도 중요하다.
이런 것들은 타임라인에서도 가능하지만 더 자연스러운 움직임을 나타내기 위해서는 스크립트를 이용해야 한다.
이때 fps값을 크게(적어도 30 이상) 설정하여야 좀 더 부드러운 움직임이 구현된다.

무비클립의 움직임은 크게 3가지로 나눌 수 있다.

첫번째는 일정한 속도로 움직이는 무비,
두번째는 가속을 지니고 있는 무비,
세번째는 진동의 움직임을 지니는 무비.

이 세가지는 각자의 공식 비스무리한 양식이 있다. 수학적인 개념이라 어떤 사람은 금새 의미하고 어떤 사람은 이해 못할지도 모른다...... 모르면 외워라 -.-;

다음과 같이 코드를 작성해 보았다. cir1이 첫번째, cir2가 두번째, cir3가 3번째의 경우이다.
가장 늦게 종료되는 cir1을 기준으로 onEnterFrame을 정지시켰다.
소스를 보자.

    cir+=1  이 의미는 cir=cir+1 을 줄여서 쓴것이다.

1) cir1._x+=2는 곧 cir1._x=cir1._x+2;이다.
    이건 간단히 cir1의 x위치를 한프래임 지나갈대마다 2씩 증가시키는 것이다. 이는 곧 등속도 운동이다.

2) cir2._x+=(230-cir2._x)*0.1      
    이것은 가속도를 갖는 움직임이다. 어떻게 보면 등가속도라고도 할 수 있겠다.
    230은 목적지의 위치이다. cir2._x는 현재의 위치이고 0.1은 스피드이다.(정확히 속도개념은 아니고 0~1사이의 정수 값이 거리의 증감속도를 결정한다.)
    아주 간단하게 설명하면 처음위치에다가 다음위치를 더하는 것이다.
    cir2._x=cir2._x+(230-cir2._x)*0.1      
    여기서 분홍색이 현재위치이고 파란색 부분이 다음에 추가될 거리이다.
    계산해보면 다음에 추가될 거리는 점점 작아지는 것을 알 수 있고 0.1 이라는 부분이 거리가 작아지는 정도를 조절하는 것을 알 수 있다. 0.1이 0.9의 값을 갖는다면 엄청 빨리 이동될 것이다.

3)   rate=(230-cir3._x)*0.1+rate*0.8;
      cir3._x+=rate;
     이부분은 진동을 나타내는 부분이다. 기본적인 것은 2)번과 같으나 뒤에 rate*0.8부분이 추가로 붙는다. 이부분은 2)보다 rate*0.8을 더 움직이고 그값이 저장된 후 계속 움직인 다는 것이다. rate위의 0.8의 숫자는 0~1사이의 숫자이고 0으로 가까워 질수록 진동의 움직임은 보이지 않는다. 보통 0.7~0.9가 진동의 효과를 뚜렷이 볼 수 있었다.
      유심이 봐야할 것은 3)의 종료조건이다. 진동을 하기때문에 _x위치에 따른 종료조건을 주기 까다로울 것이다. 종료는 다음과 같이 한다.
     if(Math.abs(목적지-this_x)<1)
    {
            delete this.onEnterFrame;
    }
    Math 클래스를 이용하여 절대값을 구한 목적지와 위치의 차이가 1보다 작을 경우 종료하도록 한다. abs를 사용한 이유는 좌우로 진동하기 때문에 음수와 양수 값을 왔다갔다 하기 때문이다.

    3가지를 고려하여 만든 것은 다음과 같다.
   


추가로 움직임 예시를 하나 만들어 보았다.

        다음은 정해진 시간에 따라 랜덤으로 움직이는 원이다. speed는 2)에서 언급한 속도개념의 0~1사이의 수이고 tx와 ty는 다음에 움직일 거리로 랜덤값으로 입력된다.
일정 간격으로 실행하기 위해서 많이 쓰이는 법은 함수를 연속으로 호출할때는 setInterval을 사용하고 그냥 위처럼 간단한 문장의 경우 %연산자를 이용한다. %는 나머지를 구하는 것으로 카운터가 아무리 증가하더라도 %다음 값에 따라 일정한 주기로 특정 숫자가 출력된다. 위는 %를 1으로 하고 1일 경우 실행을 하도록 설정하였다. 이는 카운터가 증가할때 즉 count가 1일때와 11일때 21....101일때 실행된다는 것이다.