Home > 고객지원 > 질문&답변

처음부터 만들기 매뉴얼 [달인5단] 왼쪽 메뉴 만들기
2010-01-02 21:40:19

 

상단만 플래시 하고 왼쪽은 플래시 안하냐고 궁금해 하신 분들 많으실 겁니다.

 

사실 왼쪽 메뉴 플래시가 사용하기 가장 어렵고 복잡하다보니 순서를 뒤로 빼게 되었습니다.

 

아무리 어려운미션 이라도 쉽게 따라 할 수 있도록 출제하고 있으니 포기하지마시고 잘 따라오시기 바랍니다. ㅎㅎ

 

1. 카페 메뉴중에서 [XML 플래시 오픈 소스] > [네비게이션] 이라고 있습니다. 여기서 왼쪽 메뉴로 사용할 플래시를 다운받으시기 바랍니다.

http://cafe.naver.com/webdimo/2670

http://cafe.naver.com/webdimo/2669

http://cafe.naver.com/webdimo/2668 (필자는 여기 플래시를 선택 했습니다. ^^)

 

 

2. 다운받은 파일을 압축 푸시면  FLA 플래시 원본 파일, swf파일 그리고 preview.htm 파일이 있습니다.

preview.htm 파일을 더블 클릭 하시면 인터넷 브라우져로 왼쪽메뉴를 미리 볼 수 있습니다. (메뉴가 나타나지 않는다면 브라우서 상단에 노란띠로 Active X가 차단된경우 입니다. 차단된 컨텐츠를 허용 해주세요.)

지금까지 플래시는 전부  flash() 함수를 통해 사용했지만 왼쪽 메뉴 플래시는 메뉴의 갯수에 따라 세로 높이가 자동 조절되야 하기 때문에 별도의 소스가 필요합니다.

우선 FLA의 소스를 각자 취향대로 수정합니다. (수정 방법은 이전 미션과 동일)

이전 미션에서는 FTP에 swf 파일만 업로드하였지만 왼쪽 플래시는 ARIAswf.js 파일도 같이 업로드  합니다.

 

 

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

[시작 > 프로그램 > 보조프로그램 > 메모장]을 여시구요. 아래와 같이 작업 해주세요.

 

매니져 소개 ----- XML [복사] 클릭 후 메모장에 붙여넣으세요. (Ctrl + V) 

매니져 농장 ----- XML [복사] 클릭 후 메모장에 붙여넣기

자료실 ----- XML [복사] 클릭 후 메모장에 붙여넣기

커뮤니티 ----- XML [복사] 클릭 후 메모장에 붙여넣기

마이페이지 ----- XML [복사] 클릭 후 메모장에 붙여넣기

 

이렇게 하시면 메모장에 각메뉴별  XML파일경로를 정리 할 수 있습니다.

 

 

 

 

4. 위에서 preview.htm 파일을 보셨을겁니다.

[시작 > 프로그램 > 보조프로그램 > 메모장]을 여시구요. preview.htm 을 불러 오면 아래와 같이 소스를 볼 수 있습니다.

 

----------- 수정 전 --------------

<div id="lmenuContainer"></div>
<div style="position:absolute; top:-100;display:none"><input name="textfield" type="text"

id="tf1" class=box  readonly="readonly"></div>
<script src="ARIAswf.js" type="text/javascript"></script>
<script>
var lmenuSwf = new ARIAswf({
        src:"leftMenu.swf",
        width:195,
        height:"100%",
        name:"lmenu",
        menu:"false",
        allowScriptAccess:"always"
});

lmenuSwf.setParam({
        xml_url:"menu.xml",
        selected:"99,99",
        jsFunction:"Flash2JS"    
});
lmenuSwf.play("lmenuContainer");

//Flash --> Javascript
function Flash2JS(n){ 
        document.all["tf1"].value = n; 
        document.all["lmenuContainer"].style.height = n+30;
}

</script>

      

너무 복잡한 소스가 나옵니다.  다른건 손대지 마시구요. 빨간색으로 표시된부분만 수정해 보도록 하겠습니다.

 

----------- 수정 후 --------------

<div id="lmenuContainer"></div>
<div style="position:absolute; top:-100;display:none"><input name="textfield" type="text"

id="tf1" class=box  readonly="readonly"></div>
<script src="/img_up/shop_pds/계정ID/design/ARIAswf.js" type="text/javascript"></script>
<script>
var lmenuSwf = new ARIAswf({
        src:"/img_up/shop_pds/계정ID/design/leftMenu.swf",
        width:195,
        height:"100%",
        name:"lmenu",
        menu:"false",
        allowScriptAccess:"always"
});

lmenuSwf.setParam({
        xml_url:"/xml_center/navi_category.xml.php?category=01000000",
        selected:"99,99",
        jsFunction:"Flash2JS"    
});
lmenuSwf.play("lmenuContainer");

//Flash --> Javascript
function Flash2JS(n){ 
        document.all["tf1"].value = n; 
        document.all["lmenuContainer"].style.height = n+30;
}

</script>

 

 

[디자인관리 고급 디자인 관리 그룹디자인 관리]으로 이동 합니다.

우리는 지금까지 왼쪽 디자인을

{GROUP_left1} - 매니져 소개,

{GROUP_left2} - 매니져 농장,

{GROUP_left3} - 자료실,

{GROUP_left4} - 커뮤니티,

{GROUP_left5} - 마이페이지

이렇게 총 5개를 만들었습니다.

각 그룹디자인의 소스를 위 내용으로 변경 해보도록 하시다.

 

{GROUP_left1} 옆에 [소스수정] 버튼을 클릭 하면 우리가 이전에 입력한 소스가 나타 납니다. 모두 지우시고

위 소스를 넣어주세요.

 

 

 

 

다른 그룹디자인도 위와 같은 방식으로 소스를 수정 해주세요.

주의 하실점은

 

lmenuSwf.setParam({
        xml_url:"
/xml_center/navi_category.xml.php?category=01000000",
        selected:"99,99",
        jsFunction:"Flash2JS"    
});

 

이부분에서 각 메뉴마다 XML경로가 틀리므로 해당 메뉴의 XML 경로로 수정 해주셔야 합니다.

즉, 매니져 농장은 /xml_center/navi_category.xml.php?category=02000000 으로 수정
자료실은 /xml_center/navi_category.xml.php?category=03000000 으로 수정
커뮤니티는 /xml_center/navi_category.xml.php?category=04000000 으로 수정
마이페이지는 /xml_center/navi_category.xml.php?category=05000000 으로 수정하였습니다.

 

 

수고하셨습니다.

 

완성 화면 : http://myhome18.webdimo.co.kr

 

많이 어려우셨나요? 이번 미션을 잘 수행하셨다면 이후  모든 플래시는 쉽게 풀어 나갈수 있을꺼라 봅니다.

 

이제 홈페이지가 제법 근사해졌을겁니다. ^________^

 

 

 

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