색인
》》》》》》》1![자습서 플래시Flash 강좌,[플래쉬] [액션스크립트] [고급강좌] 쉬운 업데이트를 위한 플래시 구축소스 Empty](https://2img.net/i/empty.gif)
자습서 플래시Flash 강좌,[플래쉬] [액션스크립트] [고급강좌] 쉬운 업데이트를 위한 플래시 구축소스 Tue May 24, 2011 5:43 am
Admin
Admin
| 쉬운 업데이트를 위한 플래시 구축소스 | |
| 통념적으로 플래시 사이트는 다이나믹한 효과에 비해 업데이트가 쉽지 않다고 인식하고 있다. 플래시 사이트의 이러한 통념을 깨고 쉽게 업데이트가 가능하게 하고 클라이언트에게 비용적인 측면에서 부담을 줄일 수 있는 방식을 제공하는 것이 이번 싸이 사이트의 제작 의도이다. 이를 위해 싸이 사이트는 WYSWYG 방식의 멀티 미디어 관리자 툴이라는 개념을 도입하였다. WYSWYG 방식의 멀티 미디어 관리자 툴이란 관리자가 플래시의 기술을 몰라도 사이트에 관리자 아이디로 접근했을 때, 컨텐츠의 수정과, 확인을 실시간으로 할 수 있는 방식을 말한다. 또한 관리자는 별도의 관리자 페이지에서 수정하는 것이 아니라 사이트 사용자와 동일한 페이지를 직접 접속하여 수정할 수 있다는 장점이 있다. 클라이언트는 이를 위해서 새로운 어플리케이션 프로그램을 구입해야 하는 추가 비용의 부담을 줄일 수 있도록 하였다. 이를 위해서 데이터를 XML로 처리하여 플래시에서 연동시킬 수 있도록 하였고, 일반적인 게시판은 플래시와 DB연동을 통해서 해결하고자 했다. ‘싸이’의 플래시 사용 이 번 싸이의 공식 사이트는 전체 플래시로 작업되었다. 단지 플래시로 사이트만 만든 것이 아니라 관리자와 streaming music player, 게시판과 포럼, 회원가입 같은 각종 폼이 모두 플래시로 만들어진 것이다. 사실상 이미 플래시 사이트는 이미 많은 사람들이 보아왔던 것이지만 아직까지 플래시는 네비게이션이나 무비, 배너, 애니메이션 등 그 적용 분야가 상당히 고정적이고 정해진 부분들이 많았다. 항상 변해야 하고 업데이트 되어야 하는 사이트에서 전체플래시를 만든다는 것은 유지보수에 있어서 끊임없는 문제를 발생시키는 것이다. 따라서 이번 ‘싸이’ 프로젝트에서는 그런 부분을 해결함과 동시에 다른 많은 새로운 것들을 시도하였다. 이것은 기존 플래시 사이트와의 완전한 차별화를 이루고, 플래시를 이용한 사이트들의 전혀 새로운 활용사례가 될 수 있을 것이다. 이제 그 중에서 몇 가지 요소들을 하나씩 살펴보겠다. XML이 적용된 컨텐츠 싸 이의 사이트에서는 처음 홈페이지가 열리면 기본적인 XML 데이터들을 서버로부터 전송받는다. 그러면 플래시는 미리 주어진 데이터들과 전송 받은 데이터를 조합해서 화면을 구성해나가게 되는 것이다. 각 메뉴를 선택하면 해당 메뉴의 XML데이터들이 전송되고 플래시는 데이터를 기반으로 화면을 구성하게 된다. 이것은 단지 텍스트 리스트를 화면에 뿌려주는 것으로 끝나는 게 아니라 데이터의 유무와 내용, 사용자의 행동을 바탕으로 한 인터랙션이 이루어지게 된다. 예를 들어 NEWS에서는 뉴스리스트의 제목과 날짜 등을 전송 받아서 뉴스리스트를 화면에 나타내주고, 사용자가 선택한 뉴스의 내용을 보여주되 뉴스의 순서에 따라 네비게이션을 위한 버튼들이 보여지게 되는 것이다. MUSIC에서는 입력된 음반들의 데이터와 각 음반에 대한 정보들을 전송 받아서 음반리스트와 해당음반의 곡들을 보여주고, 사용자가 선택한 노래들로 플레이 리스트를 만들어 플레이어에서 음악을 들려주는 모든 일련의 과정이 XML과 그 데이터를 가지고 이루지게 된다. // xml 로딩 loadXML = function() { newsXML = new XML() newsXML.ignoreWhite = true // 공백을 무시한다 newsXML.[안내]태그제한으로등록되지않습니다-xxonLoad = loadEND; //로딩이 되면 loadEND함수를 실행한다 newsXML.load("news_newslist.xml") } loadXML() // XML데이터를 불러온다 //xml 데이타 해석 function loadEND() { var topnode = newsXML.firstChild var news_Data = topnode.childNodes _global.news_total = news_Data.length //전체뉴스의 숫자 for (i=0; i < _global.news_total; i++) { var listNum = Number(news_Data.attributes.num) var varNews = news_Data[i].childNodes var date = varNews[0].firstChild.nodeVal!ue var title = varNews[1].firstChild.nodeVal!ue _global["newsNum"+listNum] = listNum // 뉴스 리스트 번호 _global["newsDate"+listNum] = date // 뉴스 리스트 날짜 _global["newsTitle"+listNum] = title // 뉴스 리스트 제목 } _global.news_totalpage = Math.ceil(_global.news_total / 5) // 전체 페이지 숫자 _parent.mc_articlelist.gotoAndPlay(2) go_newslist() delete newsXML 이것은 실제로 뉴스부분에 사용된 스크립트로서 XML을 전송 받고 데이터를 해석하는 부분이다. 이제 이렇게 받은 데이터를 갖고 플래시를 리스트를 뿌려주고 뉴스 내용을 보여주게 되는 것이다. 웹을 통한 실시간 업데이트 - 플래시 관리자 XML이 HTML과 가장 다른 점은 바로 정보의 구조화가 가능하다는 점이다. 그리고 그 점은 플래시에 적용했을 때도 마찬가지이다. 싸 이의 사이트 중에는 플래시와 DB를 연동해서 만든 부분도 있지만 많은 부분이 XML을 활용해서 만들어졌다. 이것은 플래시가 XML을 받아들이고 해석할 수 있으며 XML을 만들 수도 있기 때문에 가능한 것이다. 컨텐츠의 내용을 XML로 구조화시켜서 각각을 데이터로 만들어 두고 이것을 플래시가 받아들이면 그에 맞도록 컨텐츠가 형성이 되어지는 것이다. 그러므로 컨텐츠를 업데이트 하기 위해서 일일이 디자이너가 플래시 프로그램을 열어서 작업할 필요가 없이 관리자가 그저 XML데이터만 변경해주면 플래시는 저절로 내용이 변하는 것이다. 여기에 덧붙여서 우리는 관리자 페이지가 입력 필드들만 나열되어 어떤 정보와 어떻게 연결되는지 알 수가 없는 기존 관리자와는 다르게 관리자가 실제 사이트에 접속해서 로그인하면 사이트 자체가 관리자 모드로 바뀌어서, 관리자는 언제 어디서든지 사이트에 들어와서 원하는 부분을 직관적으로 확인해가면서 업데이트 할 수 있도록 하였다. 여 기서 직관적이라는 것은 누구라도 별도의 교육 없이 관리자로서 업데이트 시킬 수 있으며 업데이트한 내용이 즉시 화면에 보이므로 쉽게 작업이 가능하고, 웹에서의 실시간 업데이트이므로 별도 컴퓨터에서 관리자만 하던 작업이 언제 어디서든, 집에서든 PC방에서든 사이트의 관리가 가능하다는 것을 의미한다. 이런 일들이 가능해지는 것은 플래시가 XML데이타를 만들어낼 수 있기 때문인데, 관리자는 사이트에 접속해 로그인을 한 후 화면에 보여지는 내용을 업데이트하게 된다. 컨텐츠를 변경한다는 것은 곳 XML데이터를 변경한다는 것과 같은 말이 되므로 플래시는 변경된 데이터를 다시 서버로 보내서 해당 데이터를 저장하게 된다. 플래시에서 XML데이터를 만들어낼 수는 있지만 파일로서 저장하는 것은 하지 못하기 때문에 서버에는 데이터를 받아서 파일로 저장하는 간단한 서버 스크립트가 필요하게 된다. 관리자가 간단히 컨텐츠를 업데이트 한 후에는 사이트가 업데이트된 내용으로 보여지게 되는 것이다. //XMLE데이타 만들기 function make_videoXML() { psy_videomakeXML = new XML() var topnode = psy_videomakeXML.createElement("video") for (i=0; i<_global.video_totalNum; i++) { var sub_data = psy_videomakeXML.createElement("list") sub_data.attributes.thum = _global.video_thum[i] sub_data.attributes.name = _global.video_title[i] var sub_data_txt = psy_videomakeXML.createTextNode(_global.video_file[i]) sub_data.appendChild(sub_data_txt); topnode.appendChild(sub_data) } psy_videomakeXML.appendChild(topnode) //서버로 데이타 전송& 파일 생성 file_name = xml_folder+"psy_video.xml" xml_txt = psy_videomakeXML loadVariables("receve_data.asp", "", "POST"); // delete file_name delete xml_txt trace("새로운 XML 데이타 psy_video.xml="+psy_videomakeXML) delete psy_videomakeXML } 이 것은 실제로 PSY&FRIEND에 사용된 스크립트로서 비디오관련 데이터의 생성을 하는 부분이다. 관리자가 컨텐츠를 업데이트 하게 되면 플래시가 가진 데이터가 바뀌게 되고 이것들을 모아서 XML데이터를 만들어내는 것이다. 새로운 XML객체를 만들고 여기에 해당 데이터들을 하나씩 붙여나가는 과정이다. XML데이터가 생성되고 나면 이것을 서버로 보내는데 서버에 있는 'receve_data.asp'가 받아서 서버에 파일로서 해당 폴더에 저장을 하게 된다. 일단 데이터가 저장되고 나면 이후부터 사이트에 접속하는 사람들은 변경된 내용을 보게 된다. |
| [You must be registered and logged in to see this image.] |
| [You must be registered and logged in to see this image.] |
[i]http://www.mbc-academy.co.kr]
