웹디자인 강의
Flash smooth한 움직임을 표현해보자
2007.01.03 01:05
안녕하세요 ㄱ나니 입니다.
최근 제로보드 웹스터디에서 많은 도움을 받아서 너무너무 감사한 마음에 초급 실력이지만 간단한 강좌하나 올려봅니다. ^^;
그이름도 유명한 두둥!! smooth한 움직임!!
웹사이트를 돌아다니다보면 메뉴바에 마우스를 올리면 옆에서 smooth하게 오브젝트가 움직여 오는것을 볼 수 있는데요
간단하게 올려볼게요..(강좌를 뒤져보니 없어서.. 초보때 이거 하고 정말 기뻣거덩여 ㅡ_ㅡ;;)
플래시를 실행시켜 간단한 shape을 만들어 무비클립으로 등록시킵니다.
참고로 저는 무비클립의 인스턴스명을 "ball" 로 주었습니다.
(그림을 첨부할려고 했는데 올리기가 힘드네요.. ^^;)
무비클립 ball을 클릭하고 ball의 Action Script 창에 가서
===============================================================
onClipEvent(enterframe){
this._x += 0.02*(_root._xmouse-this._x);
this._y += 0.02*(_root._ymouse-this._y);
}
===============================================================
이라고 작성해줍니다.
그리고 테스트 해보면 마우스를 향해서 부드럽게 따라오는 무비클립 ball을 볼 수 있으실 것입니다.
==============================================================
밑에글에서 자세한 설명이 필요하다는 분이 있어서 간단하게 설명드릴게요..
onClipEvent(enterframe)
-무비클립에 대한 이벤트로서 keydown keyup 등등 어떠한 행위에 대해서 반응하는 이벤트입니다.
enterframe은 해당 프레임을 연속적으로 실행시키는 놈이라고 보시면 될듯하네요..
this._x,this._y,_xmouse,_ymouse
- this란 현재 우리가 선택한 ball을 지칭하는것입니다. 한마디로 풀어쓰면 ball._x 가되는것이죠. 뜻은 this 즉 ball의 x 좌표를 뜻합니다.
this._y 도 this._x 와 같은 개념이고 y축을 지칭하는것입니다. _xmouse는 현재 마우스 커서의 x좌표이고요 같은개념으로 _ymouse는
mouse의 y좌표를 나타냅니다.
this._x += 0.02*(_root._xmouse - this._x);
-
this._x += 0.02*(_root._xmouse - this._x); 이것은 this._x = this._x+0.02*(_root._xmouse - this._x); 와같다는건 다아시죠? ^^;
예를들어
this._x = 10
_xmouse = 20
이라고 가정할때
onClipEvent(enterframe)에 의해 계속적으로 체크 실행하게 됍니다
마우스를 움직이면
'어 마우스 좌표가 변했네' 하고 식에 대입하겠죠 물론 안움직일때도 계속 적용 중이랍니다. 다만 움직여야 값이 달라지므로 인해서
눈에 보이는것 뿐이죠..
본론으로 와서
그럼 식은
this._x = 10 + 0.02*(20-10);
이와 같이 돼겠죠?
첨의 this._x 는 10 입니다. 그리고 마우스 x좌표는 20입니다. 한번 만 적용해볼까요?
this._x= 10+0.02*(10);
this._x = 10+0.2
this._x = 10.2
어때요? this._x 가 20인 마우스 x쪽으로 다가가는것을 알수 있겠죠?
한번만 더 계산해봅시다
this._x = 10.2 + 0.02*(20-10.2);
this._x = 10.2+ 0.02*(9.8);
this._x = 10.2+0.196;
this._x = 10.396;
이제 확실히 아시겠죠? ^^
점점 더해지는 값이 작아지면서 목표에 다가 올 수록 천천히 오는것을요 0.02를 더 크게 하면 더 빨리 온답니다.
허접한 강의 들어주셔서 감사드리고
혹이나 틀리거나 부족하다면 리플로 꾸짖어주세요 ㅠㅠ
p.s 너무 이상하면 자삭할게요 ㅜㅜ
최근 제로보드 웹스터디에서 많은 도움을 받아서 너무너무 감사한 마음에 초급 실력이지만 간단한 강좌하나 올려봅니다. ^^;
그이름도 유명한 두둥!! smooth한 움직임!!
웹사이트를 돌아다니다보면 메뉴바에 마우스를 올리면 옆에서 smooth하게 오브젝트가 움직여 오는것을 볼 수 있는데요
간단하게 올려볼게요..(강좌를 뒤져보니 없어서.. 초보때 이거 하고 정말 기뻣거덩여 ㅡ_ㅡ;;)
플래시를 실행시켜 간단한 shape을 만들어 무비클립으로 등록시킵니다.
참고로 저는 무비클립의 인스턴스명을 "ball" 로 주었습니다.
(그림을 첨부할려고 했는데 올리기가 힘드네요.. ^^;)
무비클립 ball을 클릭하고 ball의 Action Script 창에 가서
===============================================================
onClipEvent(enterframe){
this._x += 0.02*(_root._xmouse-this._x);
this._y += 0.02*(_root._ymouse-this._y);
}
===============================================================
이라고 작성해줍니다.
그리고 테스트 해보면 마우스를 향해서 부드럽게 따라오는 무비클립 ball을 볼 수 있으실 것입니다.
==============================================================
밑에글에서 자세한 설명이 필요하다는 분이 있어서 간단하게 설명드릴게요..
onClipEvent(enterframe)
-무비클립에 대한 이벤트로서 keydown keyup 등등 어떠한 행위에 대해서 반응하는 이벤트입니다.
enterframe은 해당 프레임을 연속적으로 실행시키는 놈이라고 보시면 될듯하네요..
this._x,this._y,_xmouse,_ymouse
- this란 현재 우리가 선택한 ball을 지칭하는것입니다. 한마디로 풀어쓰면 ball._x 가되는것이죠. 뜻은 this 즉 ball의 x 좌표를 뜻합니다.
this._y 도 this._x 와 같은 개념이고 y축을 지칭하는것입니다. _xmouse는 현재 마우스 커서의 x좌표이고요 같은개념으로 _ymouse는
mouse의 y좌표를 나타냅니다.
this._x += 0.02*(_root._xmouse - this._x);
-
this._x += 0.02*(_root._xmouse - this._x); 이것은 this._x = this._x+0.02*(_root._xmouse - this._x); 와같다는건 다아시죠? ^^;
예를들어
this._x = 10
_xmouse = 20
이라고 가정할때
onClipEvent(enterframe)에 의해 계속적으로 체크 실행하게 됍니다
마우스를 움직이면
'어 마우스 좌표가 변했네' 하고 식에 대입하겠죠 물론 안움직일때도 계속 적용 중이랍니다. 다만 움직여야 값이 달라지므로 인해서
눈에 보이는것 뿐이죠..
본론으로 와서
그럼 식은
this._x = 10 + 0.02*(20-10);
이와 같이 돼겠죠?
첨의 this._x 는 10 입니다. 그리고 마우스 x좌표는 20입니다. 한번 만 적용해볼까요?
this._x= 10+0.02*(10);
this._x = 10+0.2
this._x = 10.2
어때요? this._x 가 20인 마우스 x쪽으로 다가가는것을 알수 있겠죠?
한번만 더 계산해봅시다
this._x = 10.2 + 0.02*(20-10.2);
this._x = 10.2+ 0.02*(9.8);
this._x = 10.2+0.196;
this._x = 10.396;
이제 확실히 아시겠죠? ^^
점점 더해지는 값이 작아지면서 목표에 다가 올 수록 천천히 오는것을요 0.02를 더 크게 하면 더 빨리 온답니다.
허접한 강의 들어주셔서 감사드리고
혹이나 틀리거나 부족하다면 리플로 꾸짖어주세요 ㅠㅠ
p.s 너무 이상하면 자삭할게요 ㅜㅜ
