위 그림과 같이 자동차가 x축 0인 위치에서 x축 100인 위치에 있는 깃발을 향해서 이동할 경우 자동차와 깃발 사이의 거리는 깃발의 좌표에서 자동차의 좌표를 뺀 100이 됩니다.
이러한 경우 자동차가 깃발에 도달하기 위해서는 자동차의 현재 위치에서 100만큼 더해야 하는데 우리가 원하는 효과는 한 번에 목표점에 도달하는 것이 아니라 천천히 목표점에 도달하는 것이므로, 100보다 작은 40 정도만 이동하게 합니다.
즉, 자동차가 깃발까지 도달하기 위해서는 자동차의 현재위치에 자동차와 깃발 사이의 거리만큼 더해야 하지만, 천천히 이동하기 위해 자동차의 현재 위치에 오리와 깃발 사이의 거리에 0.4를 곱한 만큼만 이동하는 것입니다. 이렇게 되면, 자동차의 x위치는 40이 됩니다.
자동차가 40의 위치까지 도달했으니, 깃발과 자동차의 거리는 60이 되었습니다. 여기에서도 자동차가 오른쪽으로 60(자동차와 깃발사이의 거리)만큼 이동하면 깃발에 도달할 수 있지만, 자동차와 깃발사이의 거리보다 작은 즉 자동차와 깃발 사이의 거리에 0.4를 곱한 만큼 이동시킵니다.
입력 값이 0.4로 정해진 것은 아닙니다. 가장 자연스러운 가속도의 값이 0.4를 기입해서 얻어지기 때문에 0.4를 가속도 인자라고도 합니다.
this._x = this._x + 0.2 * (500 - this._x);
}
green.onEnterFrame = function(){
this._x = this._x + 0.1 * (500 - this._x);
}
speedX = 0.1; //x축 속도
speedY = 0.1; //y축 속도
}
onClipEvent(enterFrame){
this._x = this._x + speedX*(targetX - this._x);
this._y = this._y + speedY*(targetY - this._y);
}
위 스크립트는 speedX = 0.1이라는 변수를 사용했습니다.
this._x = this._x + speedX*(targetX - this._x); 여기에서 speedX 대신에 0.4를 기입하면 되는데 소스가 길어지는데도 불구하고 왜 변수를 사용했을까요?
그것은 소스가 더 복잡해질 경우 변수로 지정하지 않으면 값이 변할 때마다 일일이 값을 수정해서 기입해아 하는데, 변수로 지정해놓으면 맨 위의 변수 값만 수정하면 모든 값이 자동으로 대입되도록 하기 위해서 입니다.
targetY = 0;
speed = 0.3;
green.onEnterFrame = function(){
targetX = _root._xmouse;
targetY = _root._ymouse;
this._x = this._x + speed * (targetX - this._x);
this._y = this._y + speed * (targetY - this._y);
}
red.onEnterFrame = function(){
this._x = this._x + 0.2 * (green._x - this._x);
this._y = this._y + 0.2 * (green._y - this._y);
}
blue.onEnterFrame = function(){
this._x = this._x + 0.1 * (red._x - this._x);
this._y = this._y + 0.1 * (red._y - this._y);
}
위 스크립트는 green 무비클립의 targetX와 targetY를 마우스가 위치한 시점으로 정한 다음 red와 blue의 무비클립의 target을 green과 blue로 정하였습니다.
결과는 마우스가 움직이는 대로 부드럽게 green 무비클립이 이동하며 red와 blue는 그 뒤를 순서대로 부드럽게 따라다닙니다.
부드러운 움직임
다음위치 = 현재위치 + 거리/2
목적지까지 가는데 얼마나 걸리는가?
속도계수 : 0.1 -----> 60프레임 걸린다!
속도계수 : 0.2 -----> 30프레임 걸린다.
*/
// 부드러운 움직임
_root.black_mc.onEnterFrame = function() {
this._x = this._x + speed * (targetX - this._x);
this._y = this._y + speed * (targetY - this._y);
}
// 마우스를 누르면, targetX, targetY를 마우스 위치로 설정해주자!!
_root.black_mc.onMouseDown = function() {
targetX = _root._xmouse;
targetY = _root._ymouse;
speed = random(10) / 20;
}
부드러운 움직임
다음위치 = 현재위치 + 거리/2
목적지까지 가는데 얼마나 걸리는가?
속도계수 : 0.1 -----> 60프레임
속도계수 : 0.2 -----> 30프레임
*/
// 부드러운 움직임
_root.black_mc.onEnterFrame = function() {
this._x = this._x + speed * (targetX - this._x);
this._y = this._y + speed * (targetY - this._y);
}
// 마우스를 누르면, targetX, targetY를 마우스 위치로 설정해주자!!
_root.black_mc.onMouseDown = function() {
targetX = _root._xmouse;
targetY = _root._ymouse;
speed = random(10) / 20;
}
위 그림처럼 버튼을 클릭하면 해당 이미지가 부드럽게 해당 영역으로 이동하도록 만들어보겠습니다.
주로 엘리먼트, 갤러리에 많이 쓰이며 2.0버전에서는 이보다 약간 업그레이드된 방법을 사용하지만 여기에서는 가장 간단한 방법으로 제작해보겠습니다.
가) 가로 길이 500픽셀짜리 이미지 7개를 각각 무비클립으로 만들고 인스턴스 이름을 img0부터 img6까지 부여한다. 기준점은 왼쪽 상단 끝으로 정하여 7개를 하나의 무비클립으로 만든다.
나) 무비클립을 다시 무비클립으로 만든 다음에 무비클립에 아래와 같은 액션스크립트를 만들어 준다.
//이미지 순서대로 정렬하기
this.img0._x = 0;
this.img1._x = 500;
this.img2._x = 1000;
this.img3._x = 1500;
this.img4._x = 2000;
this.img5._x = 2500;
this.img6._x = 3000;
targetX = 0;
speedX = 0.1;
}
onClipEvent(enterFrame){
this._x = this._x + speedX * (targetX - this._x);
}
다) 각 버튼에 아래 스크립트를 삽입하여 클릭하면 이미지가 이동하도록 한다.
on(release){
_root.menu.targetX = 0;
}
// 각 버튼별로 0, 500, 1000, 1500, 순으로 값을 다르게 넣어주고 Ctrl+enter로 확인해봅시다.