아이디저장


더보기 >










[공지] 미션 도전하기 전에 꼭 읽어보세요.
[공지] 초급미션이 A코스,B코스로 분리되었습니다.

미션 A코스 [중급7단] 네비게이션 플래시메뉴 만들기
2011-10-28 13:34:38
아람스쿨 조회수 4846

이번엔 더욱 재미있는  네비게이션 플래시를 만들어보도록 합시다.

 

 

 

 

 

 아람스쿨 홈페이지에서  [커뮤니티 > 만들기 TIP > 소스공개] 메뉴가 있습니다. 여기서 상단 메뉴로 사용할 플래시를 다운받으시기 바랍니다.

귀차니즘 매니아들을 위해 링크 걸어드립니다. 원하시는 플래시 다운받아 사용하세요.^^

 

http://aramschool.co.kr/bbs_shop/read.htm?board_code=data&idx=993


http://aramschool.co.kr/bbs_shop/read.htm?board_code=data&idx=992


http://aramschool.co.kr/bbs_shop/read.htm?board_code=data&idx=991


http://aramschool.co.kr/bbs_shop/read.htm?board_code=data&idx=990


http://aramschool.co.kr/bbs_shop/read.htm?board_code=data&idx=989


http://aramschool.co.kr/bbs_shop/read.htm?board_code=data&idx=988


http://aramschool.co.kr/bbs_shop/read.htm?board_code=data&idx=987

 

 

 

 

 

 


 

 

 다운받은 파일에 압축을 푸시면  fla 플래시 원본 파일이 있습니다. 

 CS3 Flash로 열어 보시기 바랍니다. (CS3 이하 버젼에서는 에러 날수 있으니 꼭 CS3 이상에서 작업 하시기 바랍니다.)

 자. 그럼 3개의 액션프레임이 보이나요? ( 잘 모르시겠으면 중급6단 에 화면 있으니 한번 더 보시기 바랍니다 ^^)

 세번째 액션프레임을 선택하고  F9를 누르시면 아래와 같은 화면이 나타납니다.

 

 

 
 

필자는 24번 라인에서 950을 75로 수정하였습니다.

그리고 배경 이미지 크기도 아래와 같이 수정해주세요.

 

 


 

위 그림에서 950 을  75로 수정합니다.

마지막으로 Ctrl+J 클릭하면 아래와 같은 화면이 나옵니다.

 

 

 
 

 

여기서 950을 75로 수정해주세요.

필자는 700으로 맞추었지만 여러분의 자신의 홈페이지 가로 사이즈에 맞춰서 수정하시기 바랍니다. ^^

 

수정을 다 하셨으면  Ctrl + Enter 키를 눌러서 결과화면을 확인해보시기 바랍니다.

가로 사이즈가 정상적으로 조절되었다면 성공! ^^

 

 

 

 

 

 

 

 

[디자인관리 고급 디자인 관리 웹디자인 FTP] 으로 이동 하신 다음  생성된 SWF파일을 업로드 합니다.

(swf 파일만 업로드 해주세요.)

업로드 하고 난 뒤 파일명을 클릭 하면 좌측에 파일경로를 볼수 있습니다. 이경로를 따로 메모 해두시기 바랍니다.

 

 

 

주의! 필자의 경우는 visual.swf 파일의 경로가 /img_up/shop_pds/uhkr21/design/topMenu.swf 이지만 여러분은 파일경로가 다르므로 절대 필자와 똑같이 적으시면 안됩니다. 솔루션의 모든 계정의 파일경로는 다 다릅니다.


 

 

 

 

 

 

 


 

 [디자인관리 전문가 환경설정 네비게이션 마법사]으로 이동하시면 지금까지 메뉴를 확인 할 수 있습니다.

윗 부분에 [utf-8 XML 복사(권장)] 버튼이 있습니다. 클릭하시면 자동으로 클립보드에 XML경로가 저장 됩니다.(보안 경고창이 뜨면 [엑세스허용]버튼을 클릭하시기 바랍니다.)

[시작 > 프로그램 > 보조프로그램 > 메모장]을 열어서 붙여넣기 해보세요. (또는 Ctrl + V로 붙여넣기)

그럼 아래 그림과 같이 XML경로를 확인 할 수 있습니다.

 

 

 

 

 

 

 

 


 

 

 [디자인관리 고급 디자인 관리 메인 화면 디자인]으로 이동 후 "상단디자인"을 선택합니다.

아래와 같이 수정합니다.

 


※ HTML 소스

<table width="960" height=80 border="1">
  <tr>
    <td align=center width=200>
     <a href="/shop_main/main_body.htm">웹디모 초간단 홈페이지</a>
    </td>
    <td align=center>
     {USER_banner1}<br>
     <script>
     flash('/img_up/shop_pds/계정ID/design/topMenu.swf',700,75,'','','xml_path=/xml_center/navi_category.xml.php?category=00000000')
     </script>
    </td>
  </tr>
</table>

(주의) 위 소스는 각계정마다 파일경로가 틀리므로 똑같이 따라하시면 안됩니다. 자신의 파일경로에 맞게 수정하시기 바랍니다..

 

 

 

 

 

위 소스에서 flash() 함수는 솔루션 내부에 정의 되어 있는 사용자 함수 입니다.

사용방법은 아래와 같습니다.

flash('swf 파일경로', 가로사이즈,세로사이즈, '배경색','이름','flashvars')

flashvars는 사용자 정의 변수입니다. swf 파일이  flashvars 에서 xml_path를 인식하게 변수로 전달해주고 있습니다. ^^

 

※ 사용자 정의 변수(flashvars)를 사용하지 않는 플래시 삽입방법 ==> flash('swf 파일경로', 가로사이즈,세로사이즈)

 

 

 

 

 

수고하셨습니다.

 

완성된 화면 : http://uhkr21.aramschool.co.kr

 

재밌죠? ^^

 

위 미션 수행 후 덧글에 소감 한마디 남겨주세요~~~~ ^0^

 

 

 

 

 


댓글 128개