요즘 추세가 전체적으로 플래쉬를 쓴다는것은 상당히 어려운 일입니다. 버벅거림도 있고요 그래서 다이나믹한 메뉴부분만을보통 플래쉬로 제작해서 접근하기 용이하도록 만들고 있습니다. 그렇기에 거기에 발맞춰 이렇게 플래쉬 메뉴를 만듭니다.

----------------------------------------------------------------------
이 메뉴는 move 무비클립을 제어해서마우스가 각 해당하는 버튼위로 올라갔을때 그곳으로 이동하는 아이콘을 같이 한것이 조금 다르죠~~ 그럼 따라해볼까요..그리고 이 강좌의 피드백은 http://poctan.pe.kr 에서 받습니다/
-----------------------------------------------------------------------

준비할 파일들은 백그라운드 들어갈 이미지, 링크가 걸릴 텍스트 이미지, 마우스에 따라 움직일 화살관련이미지
이렇게 준비하고 들어가겠습니다.



1. 그럼 우선 새문서를 하나 열고 아래의 설정처럼 백그라운드 이미지에 맞춰서 250 x 150 으로 맞춘다.







2.미리 만들었던 파일들은 png 투명파일로 만드는게 좋다.그 부분은 페인트샵에서 다루겠다.그럼 파일들을 모두 import해온다.
!! ctrl을 누르고 하나씩 선택하면 원하는것만 선택해서 불러올수 있다.






3.각각을 심벌로 등록시켜준다 각각을 선택하고 F8을 누르면 등록을 할수 있는데 백그라운드와 텍스트 부분은 graphic 심볼로 만들고 icon만 movie 파일로 만들면 된다.(fig_05,06)

텍스트와 백그라운드를 그래픽심볼로 등록할때



아이콘을 무비심벌로 등록할때




4.총 3개를 위와 같은 방법으로 등록시켜준다.등록이 되었으면 이제 바탕화면에 너저분한것들을 다 지워준다.그리고 이제 백그라운드부터 하나씩 라이브러리에서 가져오겠다.(fig_07,08)
기본적으로 하나의 레이어가 있는데 그곳에 이름을 등록하고 (ctrl + L) 라이브러리에서 가져옵니다. 그럼 다음과 같은 모습이 나옵니다. 안나온다면 나올때 까지 해보세요~!!(2칸이 적용이 되어야 합니다)







5.그리고 새로운 레이어를 하나더 만들어 텍스트 심볼을 가져옵니다.방법은 동일합니다.(fig_09,10)






6.그리고 아이콘심볼도 가져옵니다. 그럼 아래와 같은 모습으로 배치시키세요.(fig_11)




7.여기까지는 아직 따라하시겠죠? script부분은 이미 만들어져 있는 부분을 쓰기 때문에 넘 걱정안하셔도 됩니다. 그럼 4개의 메뉴에 링크를 걸 버튼을 만들어보죠 이번에도
새로운 레이어를 하나 만들어 버튼을 만들겠습니다. 우선은 하나만 만들고 4개는 복사하는 방법을 써보겠습니다.~(fig_12)




8.그리고 버튼에서는 세부적으로 조금더 신경을 써주셔야 합니다. 마우스가 올라갔을때 반짝이는 모션트위닝을 쓸꺼기 때문에 버튼안에서 마우스 over와 down, hit  일때를 반짝이는
무비를 하나 만들어 넣어줘야 합니다. 그럼 버튼으로 들어와서 원래의 상자를 f8을 눌러 무비로 등록시켜줍니다.(fig_13)




9.그럼 등록된 무비로 들어가서 모션트위닝을 만들어 줍니다.이부분은 상세하게 설명드리지 않고 다시 세부강좌를 하나 따로 만들겠습니다.(fig_14)




10.자 그럼 버튼1을 오른쪽 마우스로 클릭을 해서 copy 를 선택하고 paste를 메뉴 수만큼 복사한다.(fig_15)




11.여기까지 하면 전체적인 형태가 완성되어 있을것이다.레이어의 위치는 텍스트가 젤 위로 가는것이 좋다.그리고 지금부터는 액션을 각각 집어 넣어야 한다.
먼저 백그라운드의 이미지를 브라우저에 상관없이 원래 크기를 유지하게 하는 아래의 스크립트를 집어 넣는다.(fig_16)

fscommand("allowscale", "false"); //브라우저에 상관없이 원래의 크기를 유지한다.



12.그리고 새로운 레이어를 하나 만들고 각각의 frame에 아래와 같이 스크립트를 집어 넣는다.




slidY = getProperty("move", _y);// 첫번째 프레임
sY = (btnY - slidY) / 4;
if (Click == 1) {
        setProperty ("move", _y, slidY + sY);
}






두번째: gotoAndPlay(1); //두번째 프레임


13. 그리고 아이콘의 무비클립 속성에서 name 을 move 로 해준다.!! move를 스크립트가 제어하기 때문이다.(fig_19)




14.그리고 이제는 actions 을 열어서 버튼부분에 각각의 스크립트를 삽입한다.(fig_20,21,22)

예제에서 사용된 스크립트는

1번버튼 : on (rollOver) {
        btnY = 60;
        Click = 1;
}

2번 버튼 : on (rollOver) {
        btnY = 120;
        Click = 1;
}

3번 버튼 : on (rollOver) {
        btnY = 180;
        Click = 1;
}

4번 버튼 : on (rollOver) {
        btnY = 240;
        Click = 1;
}


이러한 순으로 했다. action 각각의 버튼을 선택해서 스크립트를 넣어준다.










15.이까지 완성하면 다음과 같은 모습으로 될것이다. 이것을 이제 실행을 해보자 ctrl + F12 (fig_23)



자 수고하셨습니다..알고 있는걸 쉽게 할려고 하는데 그래도 어려울꺼 같네요~~~
아무쪼록 어려우면 한번더 보시고 설명중 세부강좌를 만들부분에 대해서는 따로 만들겠습니다..아래는 완성작입니다.
아직 링크는 걸지 않았는데 링크는 버튼부분에서 url을 지정해주면 되겠죠? ^^ 모르시면..조금더 있어보세요 강좌는 계속됩니다..