아이디저장


더보기 >










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

미션 A코스 [중급10단] 왼쪽 메뉴를 플래시로 만들기
2011-10-29 20:20:33
아람스쿨 조회수 2292

상단만 플래시로 적용하고 왼쪽은 플래시 적용을 하지않아 궁금해 하신 분들 많으실겁니다.

 

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

 

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

 

 

 

 

 

 

 

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

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

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

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

(필자는 여기 플래시를 선택했습니다. ^^)

 

 

 

 

 

 

 

 

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

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

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

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

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

 

 

 

 

 

 

 

 

 

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

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

 

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

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

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

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

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

 

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

 

 

 

 

 

 

 

 


 

 

  [커뮤니티 > 만들기 TIP > 소스공개] 에서 해당 파일을 압축 풀면 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;
}

</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;
}

</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://uhkr24.aramschool.co.kr/shop_add_page/index.htm?page_code=page1

 

 

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

 

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

 

 

 

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

 

 

 



 

 

댓글 122개