베스트 키워드
주간 월간 연간
검색  상세검색
이벤트 디자이너를 위한 디자인 세상 아사달이 만들어갑니다.
디자인센터 보유 현황 오늘어제이번달지난달누적
웹기획
HTML 사용법
포토샵 사용법
일러스트 사용법
플래시 사용법
일러스트 만들기
편집사진 만들기
사물 편집사진 만들기
플래시 모션 만들기
플래시 스크립트 만들기
    - 액션스크립트 기초
    - 함수
    - for문 이해하기
    - Load 무비
    - 배열
웹구성 요소 만들기
웹 페이지 만들기
비즈니스 홈페이지 만들기
생활 홈페이지 만들기
쇼핑몰 홈페이지 만들기
액션스크립트 기초
Home > 디자인 센터 > 웹강좌 > 플래시 스크립트 만들기 > 액션스크립트 기초
메서드 콜백함수 계층구조의 이해 무비클립 속성 설정 onClipEvent 핸들러 1
onClipEvent 핸들러 2 if문 1 if문 2 startDrag 1 startDrag 2
부드러운 움직임

① 부드러운 움직임 기초
부드러운 움직임은 아주 중요한 공식 중에 하나입니다. 꼭 암기해야하며 정확히 원리를 이해를 해야 나중에 자유롭게 응용이 가능합니다.

<공식>
onClipEvent(enterFrame){ this._x = this._x + 0.4*targetX - this._x)

위 그림과 같이 자동차가 x축 0인 위치에서 x축 100인 위치에 있는 깃발을 향해서 이동할 경우 자동차와 깃발 사이의 거리는 깃발의 좌표에서 자동차의 좌표를 뺀 100이 됩니다.
이러한 경우 자동차가 깃발에 도달하기 위해서는 자동차의 현재 위치에서 100만큼 더해야 하는데 우리가 원하는 효과는 한 번에 목표점에 도달하는 것이 아니라 천천히 목표점에 도달하는 것이므로, 100보다 작은 40 정도만 이동하게 합니다.
즉, 자동차가 깃발까지 도달하기 위해서는 자동차의 현재위치에 자동차와 깃발 사이의 거리만큼 더해야 하지만, 천천히 이동하기 위해 자동차의 현재 위치에 오리와 깃발 사이의 거리에 0.4를 곱한 만큼만 이동하는 것입니다. 이렇게 되면, 자동차의 x위치는 40이 됩니다.
자동차가 40의 위치까지 도달했으니, 깃발과 자동차의 거리는 60이 되었습니다. 여기에서도 자동차가 오른쪽으로 60(자동차와 깃발사이의 거리)만큼 이동하면 깃발에 도달할 수 있지만, 자동차와 깃발사이의 거리보다 작은 즉 자동차와 깃발 사이의 거리에 0.4를 곱한 만큼 이동시킵니다.
입력 값이 0.4로 정해진 것은 아닙니다. 가장 자연스러운 가속도의 값이 0.4를 기입해서 얻어지기 때문에 0.4를 가속도 인자라고도 합니다.

② 부드러운 움직임 만들기
▶ red, green이라는 이름으로 무비클립을 두 개 만든 후에 아래 액션스크립트를 입력해봅시다.
red.onEnterFrame = function(){
    this._x = this._x + 0.2 * (500 - this._x);
}
green.onEnterFrame = function(){
    this._x = this._x + 0.1 * (500 - this._x);
}

<변수의 활용>
onClipEvent(load){
    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를 기입하면 되는데 소스가 길어지는데도 불구하고 왜 변수를 사용했을까요?
그것은 소스가 더 복잡해질 경우 변수로 지정하지 않으면 값이 변할 때마다 일일이 값을 수정해서 기입해아 하는데, 변수로 지정해놓으면 맨 위의 변수 값만 수정하면 모든 값이 자동으로 대입되도록 하기 위해서 입니다.

▶ 마우스(목표지점)를 따라다니는 부드러운 움직임
targetX = 0;
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개를 하나의 무비클립으로 만든다.
나) 무비클립을 다시 무비클립으로 만든 다음에 무비클립에 아래와 같은 액션스크립트를 만들어 준다.

onClipEvent(load){
    //이미지 순서대로 정렬하기
    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로 확인해봅시다.

사이트명 : 아사달닷컴 | 회사명 : (주)아사달 | 대표이사 : 서창녕 | 대표전화 : 070-7510-3007 | 팩스번호 : 02-2026-2008
사업자등록번호 : 206-81-24351 | 법인등록번호 : 110111-1940504 | 통신판매업신고 : 제18-890호 | 벤처확인번호 : 051134532200563
(우편번호 : 153-803) 서울특별시 금천구 가산동 371-28번지 우림라이온스밸리 A동 8층 (주)아사달
Copyright ⓒ asadal.com All rights reserved.
아사달 이용 가능 브라우저