정말 오랜만에 글을 작성하네요^^ 이것저것하다보니^^ 회사 프로젝트 때문에 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 권용재 님의 글입니다. |
|
|