CMS매뉴얼 6.XML네비게이션 플래시 적용하기
2012-02-25 10:40:22

예스탑 솔루션에서는 작업의 효율성을 높이기 위해 웹디모 공식 솔루션 홈페이지에서 XML플래시를 공개하고 있습니다. XML은 웹상에서 여러 가지 용도로 사용할 수 있으며“'어떤 정보를 표현하는데 있어 필요한 부가 정보를 함께 기술하기 위한 방법을 사용자가 새롭게 정의하여 사용할 수 있는 표기 방법”이라고 정의하고 있습니다. 이것을 플래시에 적용한다면 플래시를 전혀 모르는 사용자라도 XML을 사용하는 방법만 알고 있다면 쉽게 수정하여 사용할 수 있는 장점을 가지고 있습니다. 이러한 XML을 이용해서 플래시를 만들게 되면 이미지나 문자를 외부에서 가져와서 사용할 수 있습니다. XML네비게이션을 플래시로 적용하면 플래시 원본파일의 수정 없이 XML파일에서 메뉴와 링크를 변경할 수 있기 때문에 쉽게 작업할 수 있습니다. 또한 웹디모 솔루션에서 자체적으로 XML을 생성하는 기능을 가지고 있기 때문에 사용방법만 숙지한다면 매우 쉽게 작업이 가능합니다. XML네비게이션 원본파일은 예스탑 솔루션 홈페이지(http://www.yestop.co.kr)에서 다운로드 받으시기 바랍니다.

(1) 네비게이션 마법사로 메뉴 만들기

EMB000005e01aa5 src

? 웹디모 공식 XML네비게이션을 적용하기 위해 네비게이션 메뉴를 먼저 만들어 보도록 하겠습니다.

EMB000005e01aa6 src

? [디자인 관리》디자인 마법사 설정》네비게이션 마법사]에서 대메뉴(최상위)생성버튼을 클릭합니다.

? 텍스트 분류명에 대메뉴(최상위)의 명칭을 입력합니다. ( : 회사소개)

? 메뉴의 출력여부를 설정하는 부분이며, 마이페이지가 네비게이션에 표시되지 않도록 할 수 있습니다.

? 네비게이션 메뉴를 이미지로 만들거나 롤오버효과를 적용시킬 수 있는 부분으로 마우스를 올렸을 때 다른 이미지가 나타나도록 할 수 있습니다.

? 메뉴의 링크위치를 설정하는 부분입니다. 세부페이지, 추가페이지, 게시판, 나만의 등록 폼, 나만의 목록에서 링크 위치를 설정하거나 직접 URL을 입력할 수도 있습니다.

? 메뉴의 링크위치를 새로운 추가페이지나 게시판으로 생성할 경우에 사용합니다.

? 등록 버튼을 클릭하면 대메뉴가 생성됩니다.

EMB000005e01aa7 src

? 생성된 대메뉴(최상위)의 하위메뉴를 생성하기 위해서 하위메뉴생성버튼을 클릭합니다.

대메뉴(최상위)와 동일한 방법으로 하위메뉴를 생성합니다.

? 아래와 같이 네비게이션 메뉴의 생성이 완료되었습니다.

EMB000005e01aa8 src

? 위의 ?에서 마이페이지를 출력안함으로 설정할 경우 네비게이션 마법사에 나타나는 화면입니다.

? [디자인관리》디자인 마법사 설정》네비게이션 마법사]의 우측에서“(최상위)XML경로복사”를 클릭하여 XML경로를 클립보드에 복사합니다. 예스탑 공식 XML네비게이션에는 솔루션과 연동되는 경로가 지정되어 있기 때문에 XML경로를 따로 수정할 필요는 없습니다.

(2) 웹디모 공식 XML네비게이션 적용하기

앞에서 네비게이션 메뉴가 생성되었으므로 지금부터 예스탑 솔루션 홈페이지(http://www.yestop.co.kr)에서 다운받은 XML플래시를 홈페이지의 매뉴얼에 맞게 수정해 보도록 하겠습니다.

EMB000005e01aa9 src

EMB000005e01aaa src

? 다운로드 받은 JowrneyComponent 파일의 압축을 푼 다음 아래의 경로에 넣습니다. 예를 들어, C드라이브에 영문버전 플래시 IDE 프로그램이 설치된 경우에는 아래의 경로에 SWC파일들을 위치시킵니다.

C:Program FilesAdobeAdobe Flash CS3enConfigurationComponentsJowrneyComponents

? 다운로드 받은 webdimo_topmenu.zip압축을 해제합니다. topMenu.fla파일을 열고 AS_MENU레이어의 1프레임에 위치시키고 F9키를 누르면 위의 그림과 같이 액션스크립트가 표시됩니다.

? 메뉴의 크기와 위치 등을 설정하는 액션스크립트 소스입니다.

? ?의 소스를 웹디모 기업에 맞게 변경해 보도록 하겠습니다.

? MAIN_MENU_BG 무비클립은 메뉴의 백그라운드 이미지이며 웹디모 기업에 맞게 변경합니다.

EMB000005e01aab src

? SUB_MENU_BG 무비클립은 서브 메뉴의 백그라운드 이미지이며 웹디모 기업에 맞게 변경합니다.

EMB000005e01aac src

? 플래시를 저장한 후에 Ctrl + Enter를 눌러 swf파일을 생성하고, 생성된 swf파일을 [디자인관리 》고급 디자인 관리 》웹디자인 FTP]에 업로드 합니다.

? [디자인관리 》고급 디자인 관리 》메인 화면 디자인]으로 이동하여 상단디자인의“메인_상단(플래시버전)”소스를 드림위버에 붙여 넣고 네비게이션이 출력되는 위치의 <td>~</td>에 소스를 삽입합니다. (플래시의 경로와 크기는 디자인에 맞게 바꾸셔야 합니다.)

<td valign=top><script>flash("/img_up/shop_pds/uhome003/design/topMenu.swf",714,65)</script></td>

EMB000005e01aad src

? 수정된“메인_상단(플래시버전)”을 [디자인관리 》고급 디자인 관리 》메인 화면 디자인]의 상단디자인에 삽입하면 아래와 같이 나타납니다.

EMB000005e01aae src