메뉴 건너뛰기

XE : Xpress Engine




웹디자인 강의

이 강좌는 제가 옛날에 야웅닷컴 (yawoong.com)에서 개떡같은세상 이라는 닉으로 쓴 강좌입니다.
힘들게 썼어요 ,ㅜ 불펌은제발 ,

1. 부드럽게 움직이게 하기



먼저 부드럽게 움직이게 하기 전에 움직일 타겟이 필요하겠죠...



onClipEvent(enterFrame){

   tagetX = 이동할 타겟의 x 좌표

   tagerY = 이동할 타겟의 y 좌표

}



계속해서 타겟쪽으로 이동하기 위해서 enterFrame을 사용했습니다.

그리고 부드럽게 움직이려면 이동하는동안 이동하는 속도가 점점 줄어들어야 합니다..



한 무비클립이 x 좌표 쪽으로 100 픽셀 움직여야 한다고 합시다.

무비클립니 100픽셀 x 좌표 쪽으로 가야 하는데 우리가 원하는 효과는 한번에 목표점에 도달하는 것이 아니라 천천히 목표점에 도달하는 것이므로, 100보다 작은 40정도만 이동하게 합니다.

무비클립과 타겟 사이의 거리에 0.4를 곱한 만큼만 이동하는 것입니다. 이렇게 되면, 무비클립의

x 의치는 "원래 부비클립의 위치 + 40" 이 됩니다.

이제 무비클립이 40인 위치까지 도달했으니, 오리와 깃발사이의 거리는 60이 되었습니다. 여기서도 무비클립과 타겟사이의 거리에 0.4 를 곱한 24만큼 이동한 것이므로 64가 되고 타겟까지의 거리는 36이 됩니다.

이렇게 무비클립이 점점 천천히 움직이게 되면 부드럽게 움직으는것처럼 보입니다.

이러한 움직임을 무비클립에 적을 때는 다음과 같이 적습니다.



onClipEvent(enterFrame){

   tagetX = 이동할 타겟의 x 좌표

   this._x = this._x + 0.4 * (targetX - this._x);

}



위 액션 스크립트에서 this 는 무비클립 자체를 의미합니다.

targetX - this._x 는 타겟의 x 좌표 까지의 거리가 됩니다.

즉 무비클립에 x 좌표에서  무비클립에서 타겟까지의 x 좌표 거리에 0.4 를 곱한 만큼 더해지는 거죠.

마찬가지로 y 좌표도 적어주면 부드러운 움직임을 표현 할 수 있는 액션 스크립트가 완성됩니다.



onClipEvent(enterFrame){

   tagetX = 이동할 타겟의 x 좌표

   tagetY = 이동할 타겟의 y 좌표

   this._x = this._x + 0.4 * (targetX - this._x);

   this._y = this._y + 0.4 * (targetY - this._y);

}



그런데 밑에 먼저 부드러운 움직임 강좌하신 님이 말씀하신 것처럼 0.4 로 잡으면 너무 딱딱합니다.

그래서 초당 프래임 재생 수는 36 정도로 해놓고 0.4를 0.1 정도로 고치면 부르럽게 움직입니다.

무비클립이 마우스를 부드럽게 따라다니게 하려면 이동할 타겟의 좌표에 마우스의 위치를 대입해 주면 되겠죠...



onClipEvent(enterFrame){

   tagetX = _root._xmouse

   tagetY = _root._ymouse

   this._x = this._x + 0.4 * (targetX - this._x);

   this._y = this._y + 0.4 * (targetY - this._y);

}



이것으로 이번 강좌를 마치겠습니다. 허좁하지만 끝까지 봐주셔서 감사합니다.

번호 제목 글쓴이 날짜 조회 수
공지 공지 강좌를 올리기전 공지사항을 읽어주세요 [12] Eccen 2004.12.15 48033
2414 귀여운 아쿠아 버튼 만들기 (새로운 버젼) [39] file 이오르 2003.10.10 46701
2413 [일러스트페이지]일러스트로 얼굴그리기~(1) 눈그리기~ [39] file 현주 2002.08.07 43571
2412 플래쉬 메뉴 만들기 (위치표시) [24] {동준짱} 2002.07.22 39872
2411 포토샵을 이용해서 인물 일러스트 명암을 쉽게 따보자~ ^^ [33] file caramelkiss 2004.01.18 39871
2410 입체감 있는 메뉴버튼 만들기 (완성된 버튼 다운로드 가능) [10] file 이오르 2003.09.26 38093
2409 (왕초보도 따라하는) 심플한 버튼 만들기 [53] file SaRa's 2004.02.27 38085
2408 쭘식 플래쉬 메뉴 만들기 (2) [15] file 쭘's 2003.04.24 37760
2407 메뉴버튼만들기 [25] file 워니 2002.08.24 36489
2406 사진의 테두리를 붓으로 칠한듯하게 - 초보자를 위한 강좌 [12] file 방정환 2004.07.24 36331
2405 [초보]사진 효과 내기.. [21] file OnceAgain 2003.07.23 35954
2404 탄성을 가진 투명 물방울 메뉴 [34] file 여어자 2003.10.07 35862
2403 [하이링고]아쿠아 물로 글씨를 쓰자!! [50] file 하이링고 2003.05.12 35273
2402 필름을 클릭하면 사진이 찰칵! [17] file 여어자 2003.05.29 34387
2401 [하이링고]칵테일 아쿠아 [96] file 하이링고 2003.02.17 34383
2400 [동영상]그림이 서서히 바뀌는 효과 [6] 이희덕 2002.09.24 34212
2399 미술용 4B연필로 문자 디자인한듯한 효과 [52] file SaRa's 2003.07.11 34066
2398 오래된 종이에 먹이 묻은듯한 효과 [29] file Wings 2003.12.11 33959
2397 [쩌비]아쿠아,브러쉬스타일등 파일모음 3종세트 [25] file 쩌비 2002.10.19 33040
2396 탄성력이 있는 버튼을 만들어봅시다, [57] file 라비 2003.04.25 32459