sub_title
 Flash
제   목 xml 을 이용하여 메뉴 동적으로 만들기
작성자 웹돌이 등록일 2007-10-01 01:10:60 조회수 4,739

정말 오랜만에 글을 작성하네요^^
이것저것하다보니^^
회사 프로젝트 때문에 xml 과 플래시를 연동하는것을 하게되었는데 하다보니 잼있어서 시간이 날때마다 만들어본것입니다.





메뉴를 동적으로 만드는것입니다 xml 파일에 원하는 메뉴와 서브메뉴를 만들수 있고 링크도 적용, 색상등...
플래시 버젼은 MX 로저장을 하려했지만 MX 로저장을 하니 액션이 적용이안되는것이 있어서 2004 로 저장을 했습니다
하다보니 액션이 많아서 다설명드리기는 좀 그래서 간략히 설명드리겠습니다
일단 xml 파일을 만들겠습니다 파일확장자를 xml 로 주셔야됩니다 xml 이잘모르시는분은 이리저리 찾아보세요^^


<?xml version="1.0" encoding="euc-kr"?>
<menus gap="45" start="20">
        <mainmenu menu="menu1입니당" url="http://www.flasia.co.kr/1" borderColor="0B2E86" backColor="D4DF88">
                <submenu src="http://www.1_1.co.kr">sub1_1</submenu>
                <submenu src="http://www.1_2.co.kr">sub1_2</submenu>
                <submenu src="http://www.1_3.co.kr">sub1_3</submenu>
                <submenu src="http://www.1_4.co.kr">서브메뉴임당</submenu>
        </mainmenu>
        <mainmenu menu="menu2" url="http://www.flasia.co.kr/2"  borderColor="88DFAD" backColor="DFC188">                
                <submenu src="http://www.2_1.co.kr">sub2_1</submenu>
        </mainmenu>
        <mainmenu menu="menu3이요" url="http://www.flasia.co.kr/3"  borderColor="DFCBEF" backColor="C6B9C8">
                <submenu src="http://3_1.co.kr">sub3_1</submenu>
                <submenu src="http://3_2.co.kr">sub3_2</submenu>                
        </mainmenu>
        <mainmenu menu="menu4" url="http://www.flasia.co.kr/4"  borderColor="0B2E86" backColor="D4DF88">                
        </mainmenu>
</menus>



xml 은 정해진 태크가 없습니다 다시말해 b,u,i 등 html처럼 뜻이 정해져있는것이아니라 자기가원하는 태크를 만들어서 사용할수가 있습니다 물론 한글도 가능합니다 가장상단부분은 xml 선언부분입니다 버젼과 encoding 선언
그리고
menus 라는 메인노드안에 mainmenu 라는 노드가있고그안에는 submenu 노드가 있습니다 쉽게애기하자면 menus 라는 폴더안에 mainmenu라는 폴더가 여러게 있고 그안에는 submenu 라는 폴더가 있을수도 있고 없을수도 있습니다
이xml 파일만으로는 아무것도 할수가 없습니다 단지 이러한 정보가 있는것을 알수만있습니다
이제는 플래시로 가서 xml 과연동을 해보겠습니다

플래시 액션스크립트를 플래시안에다가 작성하지 않고 외부에 xml.as 라는 액션스크립트파일을 만들고 그파일을 include 하였습니다 include 하는것이나 직접작성하는것이나 상관은 없습니다
저는 메인메뉴갯수도 xml 파일에서 원하는갯수만큼만들수 있게 만들지알았는데 지금보니 딱4개박에 못하게되있네요^^ 지금 하자니 밤도 늦고 공부도 해야되서 좀........ 그냥 올립니당^^ 메인 메뉴갯수도 동적으로 만들수 있게 함해보세요^^

일단 다이나믹 텍스트 를만들고
이름은 menuO1,menuO2,menuO3,menuO4 이고
변수값은 _parent.menuT2,_parent.menuT2,_parent.menuT3,_parent.menuT4 라고주었습니다 이것들은 메인메뉴를 나타내기 위한 텍스트 입니다 여기서 주의하실점은 이름과 변수는 틀린것입니다 이름은 일반적으로 생각하는 무비클립 이름같은것입니다 그객체를 제어하기위한 이름 그리고 변수는 다이나믹텍스트 와 값을 연동하기위한 변수(헷갈리넹~) 그리고 변수값을 _parent.menuT1 이렇게 _parent 라고준이유는 이상하게 이변수에 값을 주려는데 배열연산자가 잘먹질않아서 _parent 에 변수값을 준것입니다 그러니 menuT1이라는 변수는 메인 루트에 있는것입니다

그리고 서브메뉴가 나올 다이나믹텍스트를 만들어 위의방식으로 이름을 줍니다
이름과 변수명은 menuO1 이아닌 subO1 이런식으로
그리고 이제 액션 좀 깁니당^^


//서브메뉴가 있는지확인여부 배열
submenu = new Array();
subBorderColor = new Array();
subBackColor = new Array();
menuSize = new Array();
main_url=new Array()
System.useCodepage = true;
myXML = new XML();
myXML.ignoreWhite = true;
myXML.load("test.xml");
myXML.onLoad = startShow;
function startShow(success) {
        //메인메뉴의 노드갯수
        mainNode = myXML.firstChild.childNodes.length;
        for (i=0; i<mainNode; i++) {
                //서브테두리색상
                subBorderColor[i] = myXML.childNodes[0].childNodes[i].attributes.borderColor;
                //서브백색상
                subBackColor[i] = myXML.childNodes[0].childNodes[i].attributes.backColor;
                //다이나믹텍스트 사이즈는 auto
                eval("menuO"+(i+1)).autoSize = true;
                //다이나믹텍스트 변수값을 _parent로줌
                _parent["menuT"+(i+1)] = myXML.childNodes[0].childNodes[i].attributes.menu
                //다이나믹텍스트가무비클립아래에 있으므로 링크를 적용할수 없어 배열에 넣고 나중에무비클립에 링크를적용
                main_url[i]=myXML.childNodes[0].childNodes[i].attributes.url
                //배열에 서브메뉴가 를 대입(서브가 있는지없는지 확인을 위해)
                submenu[i+1] = myXML.childNodes[0].childNodes[i].childNodes[0].childNodes[0];
                //서브메뉴가 있다면
                if (submenu[i+1] != null) {
                        eval("subO"+(i+1)).autoSize = true;
                        eval("subO"+(i+1)).multiline = true;
                        eval("subO"+(i+1)).border = true;
                        eval("subO"+(i+1)).borderColor = "0x"+subBorderColor[i];
                        eval("subO"+(i+1)).background = true;
                        eval("subO"+(i+1)).backgroundColor = "0x"+subBackColor[i];
                        //<p>태그가저절로 들어가서 없애기위해
                        _parent["subT"+(i+1)] = "";
                        //서브메뉴를 안보이게함
                        eval("subO"+(i+1))._visible = false;
                        //서브메뉴 노드갯수 확인
                        subNode = myXML.firstChild.childNodes[i].childNodes.length;
                        //서브노드갯수만큼 실행
                        for (j=0; j<subNode; j++) {
                                _parent["subT"+(i+1)] += "<a href=""+myXML.childNodes[0].childNodes[i].childNodes[j].attributes.src+"">"+myXML.childNodes[0].childNodes[i].childNodes[j].childNodes[0]+"</a>"+"<br>";
                        }
                }
        }
        //메뉴위치 함수호출
        position(mainNode);
}

//메뉴의위치정의
function position(mainNode) {
        //값을 받아오면 string 이므로 number로 변환
        var menuGap:Number = Number(myXML.firstChild.attributes.gap);
        var menuStart:Number = Number(myXML.firstChild.attributes.start);
        //좌표위치가 않맞으므로 -200
        menuO1._x = menuStart-200;
        for (i=0; i<mainNode; i++) {
                menuSize[i] = eval("menuO"+(i+1))._width;
                if (i>0) {
                        var menuX:Number = menuGap+eval("menuO"+i)._x+eval("menuO"+i)._width;
                        eval("menuO"+(i+1))._x = menuX;
                        eval("subO"+(i+1))._x = menuX;
                }
                //무비클립을생성하기위해함수호출
                createMovie(i, mainNode);
        }
}
//무비클립을 생성
function createMovie(i, mainNode) {
        //무비클립을 라이브러리에서 스테이지로위치
        this.attachMovie("menuMovie", "menuMovie"+(i+1), i);
        eval("menuMovie"+(i+1))._x = eval("menuO"+(i+1))._x;
        eval("menuMovie"+(i+1))._y = eval("menuO"+(i+1))._y;
        eval("menuMovie"+(i+1))._width = eval("menuO"+(i+1))._width;
        eval("menuMovie"+(i+1))._height = eval("menuO"+(i+1))._height;
        eval("menuMovie"+(i+1))._alpha=0
        //메인메뉴에 마우스올라갔을때 자기서브를제외한 나머지를 가린다
        eval("menuMovie"+(i+1)).onRollOver = function() {
                eval("subO"+(i+1))._visible=true
                for (j=0; j<mainNode; j++) {
                        if (eval("subO"+(j+1))._visible==true && i != j) {
                                eval("subO"+(j+1))._visible = false;
                        }
                }
        };
        //메인메뉴에 링크(무비클립이 다이나믹텍스트위에있으므로 무비클립에 링크를적용)
        eval("menuMovie"+(i+1)).onRelease=function(){
                getURL(main_url[i])
        }
}





좀길죠^^
가장상단에는 배열을 선언한것입니다 new Array
그리고 가장중요한 부분인 xml 과 연결하는 부분입니다

System.useCodepage = true;      //한글이 깨지는 것을 방지
myXML = new XML();               //myXML 객체를 생성합니다
myXML.ignoreWhite = true;        //이부분은 솔직히 잘모름^^(없으면 않되요 몬지는 모르지만)
myXML.load("test.xml");           //myXML 객체를 load해라 test.xml 파일을
myXML.onLoad = startShow;    //myXML 이 로드되면 sratrShow 함수를 실행
function startShow(success) {
   ...............
}

그리고xml 과 연동시 사용할속성은
myXML.firstChild.childNodes.length  
//myXML객체의 첫번째노드 밑의 노드의길이 즉다시말해서 firstChild 는 menus 노드를 말하는것이고 childNodes는 그다음노드인 mainmenu 를 말하는것입니다 그러니 그거의 갯수입니다
그리고
myXML.childNodes[0].childNodes[i].childNodes[0]
//이런식으로 값을 연동하면 됩니다 childNodes[0] 은 첫번째원소인 menus 를 말하고
그다음인 childNodes[i] 는 i 의 값을 for 문으로 반복을하여 mainmenu를 각각 선택할수있고 그다음은 물론
submenu 를 말합니다

위의 myXML.firstChild.childNodes.length   이부분도 첫번째 담의 노드들의 갯수이므로
myXML.childNodes[0].childNodes.length 라고 주어도됩니다

그러니 xml 에서 원소의 값을 가져 올때에는
객체이름.childNodes[0].childNodes[0] 이런식으로 childNodes[0]의 배열 원소값을 바꿈으로써 값을 가져오면됩니다

그리고 xml 에서 속성의 값(여기서 말하는 속성은 예를들어 xml 파일의 menus gap="45" start="20" gap이나start 같이 태그안에 값을 주는 것을 말합니다)을 가져올때에는
myXML.childNodes[0].attributes.gap 과같이 원하는 노드까지 찾아간다음에
attuributes.속성이름  을주면됩니다

위의방법들만 이해하신다면 연동하는 것은 간단할것입니다

그리고 나머지부분은 다이나믹텍스트의 위치를 설정하고 테두리색상 등...을 만들고 서브메뉴도 만들고
마지막으로 메인 메뉴에 마우스가 올라가면 서브메뉴가 나와야되므로 메인메뉴위치에 attachMovie메소드를 주어서 무비클립을 스테이지로 꺼내서 알파를 0으로주고 그무비클립에 onRollOvr 이벤트일때 서브 메뉴를 보이게 합니다~

다이나믹텍스트에 이름은 그텍스트에 위치, 크기, 등을 조적할때 사용하였고 변수값을 텍스트에 값을 출력할때 사용하였습니다 텍스트에 링크를걸기위해 html 태그를 사용하였는데 만약 다이나믹텍스트이름이 aaO라고하고
변수명을 aaV 라고한다면
aaO.text="<a href="http://www.flasia.co.kr">gogo</a>"  이렇게하면 링크가 적용 될것같은데 제가 내공이 적어서그런지 이상하게 되질않더군요 그래서
변수를 이용하여 텍스트를 뿌린것입니다
aaV="<a href="http://www.flasia.co.kr">gogo</a>"
물론 다이나믹텍스트의 html 을 적용할수있게하는 부분은 선택하였습니다

근데 하나 이상한점은 xml 과 연동시 꼭 xml 파일의 root 부분노드부터 경로를 찾아가야하느냐하는 것입니다
만약이방법박에 없다면 프로그램을 다짜고 xml 파일에 하나의 노드가 추가되면 액션스크립트를 다수정해야됩니다 경로가 바뀌기때문에.....
아마 다른방법이 있겠죠? 제가 몰라서 그러는 것이겠죠......
시간날때 열심히 찾아봐야겠어요~~
xml 과 연동만 잘하면 왠만한것은 플래시로 만들수 있을것같네요
쓰다보니 벌써 밤 12시가 지났네요^^
공부해야되는뎅 .......
이만 여기까지 하겠습니다
만약 xml 연동을 잘하시는 분계시면 tip 좀 가르켜주세요^^(ㅋㄷ)
2일만 지나면 또 주말이넹 ㅎㅎ~

출처 : http://www.flasia.co.kr/old/homeV2.0/index.htm 권용재 님의 글입니다.

 
0
    
 
0
        list
 
※ 짧은 댓글일수록 예의를 갖추어 작성해 주시기 바랍니다.
line
reply cancel
 
번호 제목 글쓴이 추천 조회 날짜
24  Flash CS4 새로운 클래스 FileReference.save()   member 웹돌이 0 / 0 7404 2008-11-01
23  setRGB() 메서드 사용법   member 울트라마 0 / 0 2669 2008-01-28
22  FLEX, FLASH 강추 ActionScript 3.0 한글 메뉴얼   member 오렌지 0 / 0 2924 2007-11-28
21  톰캣+아파치+Flex 설치하기   member 오렌지 0 / 0 5005 2007-10-10
20  피타고라스를 이용한 거리계산 이미지   member 웹돌이 0 / 0 4207 2007-10-06
19  For 문으로 버튼에 액션주기   member 웹돌이 0 / 0 3044 2007-10-02
18  xml 을 이용하여 메뉴 동적으로 만들기   member 웹돌이 0 / 0 4739 2007-10-01
17  프레임 진행상태 확인하기!   member 웹돌이 0 / 0 2603 2007-09-29
16  로딩바 만들기 (root) 이미지   member 웹돌이 0 / 0 4599 2007-09-19
15  액션스크립트의 개념 이미지   member 웹돌이 0 / 0 2592 2007-09-17
14  투명플래쉬 팝업   member 오렌지 0 / 0 4244 2007-08-31
13  메뉴보다 빠른 단축키(Hot Key)   member 오렌지 0 / 0 2936 2007-08-31
12  Full 플래쉬 사이트 만들때 주의할점!   member 오렌지 0 / 0 2793 2007-08-31
11  시작시 랜던한 프레임으로 가기   member 오렌지 0 / 0 2588 2007-08-31
10  특정프레임에서 액션스크립트 추가!   member 오렌지 0 / 0 2792 2007-08-31
9  VISTA에서 FLASH8 심볼 편집시 느려지는 버그 해결방법 이미지   member 오렌지 0 / 0 2511 2007-08-31
8  플래쉬 CS3 의 주요기능! 이미지   member 오렌지 0 / 0 3144 2007-08-31
7  플래쉬 그림판 소스   member 오렌지 0 / 0 3703 2007-08-31
6  플래쉬 액션스크립트 모음   member 오렌지 0 / 0 3839 2007-08-30
5  플래쉬 초간단팁! 일정시간 멈췄다가 진행하기!   member 오렌지 0 / 0 2710 2007-08-21
4  간단하게 플래쉬에서 팝업띄우기 이미지   member 오렌지 0 / 0 3240 2007-08-17
3  플래쉬에서 특정 무비클립 프린트하기 이미지   member 오렌지 0 / 0 2990 2007-08-16
2  플래쉬에서 마우스 모양 바꾸기 이미지   member 오렌지 0 / 0 4119 2007-08-16
1  플래쉬 슬라이딩 엔진 이미지   member 오렌지 0 / 0 3000 2007-08-14
write