메뉴 건너뛰기

XE : Xpress Engine




웹디자인 강의

이번에 할것은...  소메뉴 나오기!
버튼 클릭할때 소리 나오게 하기!
소메뉴마다 배경이미지색을 바꿔보장~
그리고 링크 걸기~ 메뉴야 완성이다!!!

이순서 입니다.^^:;


1. 소메뉴 나오게 하기

레이어 추가 아시죠? 레이어 하나 추가해 주세요~


f_7.gif

그리곤 위 그림처럼
다섯번째 칸을 모두 드래그 하여 회색으로 변하면
오른쪽 마우스를 클릭하고 insert frame해줍니다...


f_8.gif

위에 처럼 다섯번째 칸(프레임에) 네모난게 생겼지요? ^^:;

그럼 되었구요..~~

다시 3번째 레이어를 클릭합니다.
3번째 레이어에서  2번째 칸을 클릭한 상태에서
F6 클릭합니다... 그럼 점생기죠? ^^:;
그런데 이번엔 속이 빈점이죠? 검은점이 아니라...
그건 아직 아무것도 들어있지 않아서 그래요...


이젠 소메뉴를 써야겠지요?
소메뉴가 들어가야될것이 첫번째로 About me 부분이네요...
두번째 프레임 선택 상태에서
텍스트 툴을 가지고...
적당한 위치에 Profile 과  Diary 를 각각 써줍니다~




f_9.gif

글쓰는건 해봐서 어렵지 않죠? ^^:;
또! 이넘들을... 각각... 버튼심벌로 만들어줘야 합니다!!!
저번시간에 버튼심벌 만드는거 했지요?
텍스트 선택하고 F8!!! ^^:;
(기억안나시면.. 저번강좌를 다시보세요!)


각각 버튼 심벌만들어주시구~
버튼 속성으로 들어가서~
또 저번에 별표친! hit 칸에도  클릭할 영역 정해주는거 잊지 마시구요.^^:;



3번째 칸도 역시나.. 클릭하고~ F6 ->  
그런데 이전에 썼던 메뉴가 보이지요? 과감히 지워줍니다~
(지울때는... 선택하고 Delete키 누르시면되요.)
그리고... 소메뉴 써주세요...
이번엔 Photo  소메뉴네요...  My photo,  Gallery
라고 넣어줄께요.... 역시나... 그다음은 버튼심벌 하구요~




f_10.gif


네번째 칸에는...  Board , Guest
도 위와 같이 해주세요.... (반복내용은 생략할께요 -_-;; 쭘의 귀차니즘... ㅎㅎ)


f_11.gif

위와 같이 되었으면... 소메뉴 준비는 끝이예요~




2. 버튼 클릭할때 소리나게 하기~~ 오오~~
(전자버튼 소리를 넣어 보겠습니다~ 사운드는 자료실에서 다운받으세욤~
가테고리 사운드에 있습니다!)


먼저  Ctrl + R 해주면 임포트 창이 뜹니다~
소리를 불러주세요...


그다음  F11을 클릭하면 라이브러리 창이 뜹니다.
그러면 그곳에 사운드가 있을거예요... 확인하셨죠?


main 글씨를 더블 클릭하면 또 버튼 속성나오죠? ^^:;


요기서 세번째칸 에 Down 이라?있지요?
그칸 클릭하고 F6눌러주세요. 또 점 생겼습니다~
선택한 상태에서
아까 그 라이브러리창에서
사운드를 끌어다가 냅다 작업창에  져다 놓으면되요...

그럼 다음과 같이 보일거예요~


f_12.gif

Down 칸에 지지직~ 같은 선이 생겼어요!!!
그럼 된거예요~~~


나머지  다른 메뉴들도.... 위와 같이 소리를 삽입해봐요~~~ ^^;;;


차근히 하세욤!!
버튼을 클릭했을때 이젠 소리가 나올거예요~~~


ㅎㅎㅎ 지금까지 자알 따라 오셨습니다.^^;;


이제 메뉴만들기 고지가 보여요~~~


돈 기브업~ 포기하지 마세욤!


3. 소메뉴마다  배경이미지의 색을  바꾸어보장~~~ 장장~~


자 지금까지...  고이 잠가두었던...
첫번째... 레이어를
자물쇠를 풀어주세요 자물쇠 클릭하면.. 다시 점으로 변하죠~


그런다음... 이미지를 클릭하고.
F8 이번에는 그래픽으로 해주어야합니다~





f_13.gif

두번째 칸(프레임)에 클릭하구욤~ F6 띡~ 눌러주세요~

아~~ 또 점생겼다~~~(혼자 잘놀조 -_-;;)


그럼 아래쪽에 보세요~~~
아래에는  항상 Properties  창이 있지요~
오른쪽으로 보시면... 아래 그림같은것이 보일거예요...





f_14.gif


Advanced로 고친다음  옆에 세팅버튼 클릭하세요!

그럼 아래 창이떠요~



f_15.gif

전 레드값을 50%로 주었습니다...
푸르게 변했죠? (바를 움직이면서... 원하는... 색으로.. 바꾸어보세요..^^)
Alpha는 투명도예요...(처음에 배경색을 검은색으로 주었기때문에.
투명도를 낮추면... 어두워질거예요..^^)



f_16.gif

이제 색바꾸는 방법은 아시겠죠?


세번째~ 네번째 칸에도~
F6 해서... 점 만들어 준다음에~
위와 같이 색을 바꾸어 줘보세요...
각기 다른 분위기가 나게끔~~~




f_17.gif
f_18.gif

오오... 이제 벌써 링크 걸면되네욤~~~



4. 버튼 클릭시 소메뉴로 이동하기!~~


처음 화면에서.. 메뉴버튼을 클릭하면...
소메뉴가 보여야겠지요?


먼저... 처음화면에서 넘어가지 않도록
정지시켜놓아야합니다...  
액션기능을 이용하는데요...

3번째 레이어의 처음 프레임을 클릭하고
F9을 누릅니다.
그럼 액션창이 뜰거예요....


f_19.gif


그러면... stop 액션을 추가해줍니다.
그리고 창 꺼주세요...



f_20.gif


그럼 위에처럼... 첫번재 프레임에 a 표시가 되요...
그 프레임에 액션이 들어갔다는 표시랍니다~



소메뉴가 있는  메뉴에 go to 액션을 걸어줘야 합니다.
About me를 클릭하고
F9키 눌러주세요...




f_21.gif


위처럼 액션 창이뜨면...

go to 더블클릭
Go to and Stop선택
프레임에 2라고 써주세요.


Photo는 3번째 프레임으로 가게...
Board는 4번째 프레임으로 가도록...
액션을 걸어줍니다....

앗~ main 은 1 프레임으로 가도록 액션 걸어주세욤~~~


후훗...

이젠 페이지 링크만 걸어주면 됩니다~~



5. 링크 걸기  (Get URL 액션사용)

각각의 메뉴마다... 액션 걸어주시면됩니다~

이때 미리 생각해둘것은... 타겟은 모두 main으로 걸어주세요~

우선 main
역시나 액션기능 사용입니다~

main 클릭하고 F9키



f_22.gif


위와 같이 해주세요~

우린 나중에 main.htm 파일을 첫화면에 보이도록 할것입니다~



나머지 페이지들도...  이런식으로 링크를 걸어주세요~

이때 소메뉴가 있는 곳은 그 프레임으로 가서.
링크 걸어주셔야 됩니다~
profile -->  pro.htm
Diary -->  diary.htm
music -->  music.htm
myphoto -->  photo.htm
Gallery --> gallery.htm
Board --> board.htm
Guest --> guest.htm
Link --> link.htm



왜 보드주소로 바로 연결하지 않느냐구요?
음... 플래쉬는... 한번본 페이지는... 기억을 한다고 해야할까욤...
암튼... 좀 그래서... 방금 게시판에 글을 썼는데...
메뉴를 눌러보면... 그 글이 안보이는 경우가 종종있어요....
그래서... 좀 무식한 방법이지만....


저희는... 각각의 html 파일을 만들어서 보드는 iframe 을 이용하여
넣어 줄것입니다....


이렇게 하는 이유또한가지는...
저희는 창의 크기를 고정시킬 것이기 때문이구요..^^


위 메뉴 모두 링크 거시구요...
타겟은 main이라는것 잊지마시구요~~~


링크 다걸면~~
메뉴 완성입니다~~~

^^:;  

-----------------------------------------------------------------------

여기까지 메뉴 완성입니다..^^:;

고수분들이 보시기에는.. 어쩜... 무식하게 보일지도 모르고..
-_-;; 부족한 점이 많겠지만...

무엇보다... 초보분들을 위해... 저같은 플래쉬 초보가 나선것이니까요..^^;;
이쁘게 봐주시구요...
귀차니즘땜에 캡쳐가 많이 부족해요..
그래도 설명으로 최대한... 이해할수있도록 노력했으니...
이해해주시구욤...


지금 올린 강좌는 제 홈페이지에서
홈처음부터... 만드는 강좌중에 일부분 메뉴부분만 올린것이예요...
처음부터 보고싶으신분은....
http://jjums.com
으로 오셔서 보시면되구요...


질문은 제홈페이지 Q&A게시판에 올려주세요~



---------------------------------------------
만든 메뉴 보자


먼저... 파일을 보려면 ~
publish를 하여 swf파일로 만들어야합니다~
우선 Ctrl + Shift +F12 키를 동시에 눌러
창이 뜨면... Formats 탭에서
Flash와 Html에 체크를 해주세요~
확인~

그다음...

Shift + F12 누르면..
파일 저장경로에... swf파일과 html 파일이 생겼을거예요...









그럴듯 한가욤...

좀 엉성해 보이기도 하지만 -_-;;음...

할수 없죠.. ㅋㅋㅋ

아~ 페이지 링크는 빼두었습니다.^^:; (마구 -_-;; 페이지 없음이 떠부려서~)




번호 제목 글쓴이 날짜 조회 수
공지 공지 강좌를 올리기전 공지사항을 읽어주세요 [12] Eccen 2004.12.15 48035
1155 필터를 이용한 출처 간단하게 지우기. [6] SOO 2003.05.06 6296
1154 모자이크 응용한 글씨 꾸미기 [3] file 사라 2003.05.05 9902
1153 아바타 옷, 장신구 등 그리기 [15] file 여자의뿔 2003.05.04 18685
1152 - 심플한 미니버튼 만들기 ;q [10] file 의문의소년 2003.05.01 16840
1151 크리스탈같은 이미지 만들기 ☆ [8] file rainstormz☆ 2003.04.30 15391
1150 터치스크린용 버튼입니다. [10] file 김태환 2003.04.30 16916
1149 CD원판 만들기 [19] ZipShin 2003.04.29 12869
1148 볼록한 텍스트 간단하게 만들기 [10] file rainstormz☆ 2003.04.29 11719
1147 - 페인트샾도 한다!! 이미지 강조하기 :D [4] file 의문의소년 2003.04.29 6568
1146 범선 그리기 [17] file 여자의뿔 2003.04.29 8509
1145 간단하면서도 그럴듯한 포도 도트찍기 [6] file Siny™ 2003.04.28 8135
1144 - 간단한 방법으로 자신만의 액자 만들기 :$ file 의문의소년 2003.04.28 6010
1143 - 간단한 방법으로 귀여운 공 만들기 :$ [4] file 의문의소년 2003.04.27 4381
1142 [!BEST!]포토샵 7 - 2탄 - 이미지레디 - 배경 타일 재대로 불규칙 정리하기 [7] file 임종혁 2003.04.27 11203
1141 [초급]포토샵레이어의개념 [3] file rombardi 2003.04.26 4127
1140 탄성력이 있는 버튼을 만들어봅시다, [57] file 라비 2003.04.25 32459
1139 패턴을 이용해서 이미지에 타일효과주기. [12] file rombardi 2003.04.24 10731
» 쭘식 플래쉬 메뉴 만들기 (2) [15] file 쭘's 2003.04.24 37761
1137 쭘식 플래쉬 메뉴 만들기 (1) [10] file 쭘's 2003.04.24 27719
1136 아드레날린을 이용해 동영상 캡쳐하기 [4] file 쉼터-태호 2003.04.24 4629