이번에 알아볼 것은 mouse 객체이다. 이또한 Key나 Color처럼 따로 생성이 필요 없는 최상위 레벨 클래스이다.
Mouse클래스는 아래와 같이 나뉘어 진다.
양도 별로 없고 어렵지 않다..


여기서도 Key 객체처럼 Listener를 이용한다.
여기서는 onMouseDown등은 _root.MouseDown=function(){}로 직접 사용이 가능하나 (onKeyDown과는 다르게) Listener를 이용해 보도록 하자.

일단 hide와 show는 커서를 숨기느냐 마냐 하는 것이다.
타임테이블에 간단히 Mouse.hide()또는 Mouse.show()를 이용하여 숨기거나 나타낼 수 있다.
많이 쓰이는 패턴은 Mouse.hide()를 이용하여 마우스를 숨기고 자신이 등록하고자하는 무비를 onMouseMove를 이용하여 마우스 좌표를 항상 따라다니게 하는 원리를 이용한다.

그럼 마우스 등록을 간단히 만들어 보자.



/*으로 주석처리한부분으로 나타내어도 되긴된다. 그 부분이 오히려 단순하고 이해하긴 쉽지만 앞으로나 계속 사용하게될 것들을 고려해보면 지금 사용한 부분을 연습하는 것이 가장 바람직하다.
다음은 간단한 마우스 포인터이다.

 

위 코드로 작성된 swf파일. html자체에 마우스 휠 기능이 있어서 오각형 선에 잘 대고 위로 올려야 돌아간다.




다음은 다양한 onMouse이벤트를 이용하여 하나 만들어 보았다.
onMouseDown과 onMouseMove, onMouseUp을 사용하였다.
아래코드는 마치 드래그&드랍처럼 마우스 범위를 지정하는 것이다.
그 후 범위 중심점을 이동하여 확대한 것이다.


9번까지는 bg라는 배경 사진을 원상복귀(처음 설정대로 바꾸기 위한 설정이다.
중심점이 (150.6, 99.5)로 이루어 졌기 때문에 위와 같이 설정하였다.

마우스 왼쪽을 눌렀을때 드래그를 mouseMove를 통해 한고 onMouseUp을 통해 무브를 종료한다.
onMouseMove내의 코드는 사각형을 실시간으로 그리는 의미이다.
mc.clear는 전에 했던것과 같이 실시간으로 마우스 움직임에 변화하는 최신 값을 표시하기 위함이다. 기타 moveTo나 lineTo는 전에 언급한바 있을 것이다. 사각형을 만들고 Fill한 것이다.


마우스를 다운하게 된다면 해당 사각형 무비의 범위를 계산하여 확대한다.
요약하자면 드래그한 범위의 중심점을 기준으로 확대하는 것이다.
사각형에서는 무비를 이용하는 것이 아니라 사각형의 좌표값(lineTo였을때의 값)을 이용한다.
전체 스테이지가 (300, 200)의 크기이다. 세로가 더 짧기 때문에 높이를 기준으로 확대 비율을 정한다.

그후 확대한 후에 배율에 맞추어 이동을 한다.
처음 이부분에서 헷갈렸던 것이 이동한 다음에 확대하면 되지 않을까 생각했는데 그렇게 되면 이동하는 중심점이 다르게되어 전체적으로 달라진다.
하지만 뭐 중심점 계산만 잘 한다면 별일은 없을 것이다.

단, 중심점 연산은 가운데를 좌표값으로 두고 해야 편하다...(무비의 중심 좌표값)
무비 중심좌표값을 설정할때 위치를 가운데로 할지 왼쪽 위 상단으로 할지 정확히 해야
차후 무비의 모든 연산시 안정적이다.

마지막 43~46은 전체 이미지의 크기 및 위치를 초기화 시키는 이벤트이다.
<원하는 사진 원하는 부위를 드래그하면 그 부위가 확대되어서 보임. 해상도 높거나 벡터 파일이 있으면 깔끔하게 확대된다. 이 사진은 어디선가 퍼온 싸구려 이미지라....^^;, 버튼은 원상복귀버튼>

눈치있는 분들은 소스를 보고 약간 의아하겠지만.. 그게 옳다.
이상적인 마우스 드래그를 구현할려면 한가지를 더 추가하여야 함.
위의 소스대로만 하면 바로 위의 swf파일이 나오지 않는다. 마우스는 down한 시점에서 왼쪽 위로 올라가거나 오른쪽 위로 마우스를 이동할 경우에는 올바른 결과가 나오지 않는다.
그래서 아래와 같이 swap소스를 추가해줘야 한다.
뭐 대단한건 아니고 걍 서로를 바꿔주는 것이다. 마우스 다운시와 업할때 기준점을 조건에 따라 바꿔주는 것이다.
(예를 들면 기준점을 잡고 왼쪽 위로 마우스를 올렸을 경우 기준점은 mouseUp한 시점이 되고 max값들은 mouseDown한 시점이 된다.)


위의 소스를 onMouseUp 이벤트의 맨 처음 부분에 추가를 시켜야 한다. 그래야 자유자재의 부드러운 마우스 범위 설정이 된다.

       <최종 완료 된 마우스를 이용한 범위 설정>

마지막에서는 코드 onMouseUp의 최 하단 부분에 removeMovieClip(mc);을 넣어 드래그 자국을 없애도록 설정하였다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.