diary       blog       guest

hitTest를 이용한 기본적인 Navigation 제작방법

http://www.action-scripter.com/blog/trackback/754


위에 있는 swf에서 menu00~menu04까지 마우스를 오버하면, submenu가 보여지는 것을 확인 할 수 있습니다. 물론 submenu의 위치에 따라 마우스가 영역을 벋어나기전에는 계속 활성화가 되어 있는 상황이구요.. 이러한 형태의 navigation 구조는 현재 많은 사이트에서 사용을 하고 있습니다.

hitTest를 이용해서 기본적인 Navigation 구조를 제어한 것입니다.
각 메뉴에 다음과 같은 코드를 적용한 후 위에 있는 레이어의 모습을 잘 살표보시기 바랍니다.

onClipEvent(enterFrame){
        if(this.hitTest(_root._xmouse,_root._ymouse,1)){
                nextFrame();
        }else{
                prevFrame();
        }
}

마우스가 해당 메뉴에 올라오면.. 해당 무비클립을 계속 nextFrame()을 실행시켜 프레임의 끝까지 playhead를 이동시킵니다. 그럼.. 메뉴가 활성화 되어 있는 상황에서 멈추게 되겠죠.. 반대로.. 마우스를 아웃하면.. 해당 무비클립을 계속 prevFrame()을 실행시켜.. 첫 프레임까지 이동하게 됩니다. 그럼.. 첫 프레임에서 계속 멈춘 상태가 되겠죠..

한가지 중요한 것은 무비클립의 영역 입니다.
위에 레이어가 있는 이미지를 보시면.. 마지막 레이어에 mcSpace라는 것이 있습니다.
이 mcSpace가 메뉴무비클립의 마우스 영역이며, 실제 모습은 alpha값이 0%로 눈에는 보이지 않도록 한 것입니다. 메뉴가 활성화 되기전, 그리고 서브메뉴가 완전히 활성화 되었을때의 메뉴 영역을 조절하면 전체 메뉴를 hitTest를 통해 제어할 수 있습니다.

지금은 간단한 구조로 이해를 돕기위해 다른 조건문 코드를 사용하지 않았습니다.
상황에 따라 다양한 조건문을 이용해서 자유롭게 제어할 수 있고, 최적화된 메뉴 구조로도 만들수 있습니다.

이러한 hitTest릉 이용한 방법을 확실히 이해한다면.. 웬만한 navigation은 충분히 제작할 수 있습니다. 다양하게 변형된 스타일도 쉽게 제작할 수 있습니다.

■ 소스 다운로드 : sample_20031028.zip
2003/10/29 14:36 2003/10/29 14:36
   1   ... 1274  1275  1276  1277  1278  1279  1280  1281  1282   ... 1286    
ABOUT  |  WORKS  |  @seonggyu
COPYRIGHT ⓒ 2000 - 2010. ACTION-SCRIPTER.COM. ALL RIGHTS RESEVED.