플래시 MX 통신
플래시 MX는 다양한 통신 방법을 제공한다. 플래시에서의 통신 범위와 통신에 사용되는 함수들을 정리해보면 다음과 같다.
플래시 MX는 다양한 통신 방법을 제공한다. 플래시에서의 통신 범위와 통신에 사용되는 함수들을 정리해보면 다음과 같다.
| ||||||||||||||
| ||||||||||||||
|
getURL()은 예전부터 사용되던 함수인데 주로 페이지를 이동하는데 사용됐지만 자바 스크립트를 호출하는데도 사용될 수 있다.
loadVariables()는 외부로부터 데이터를 읽어내는 함수이다. getURL()과 마찬가지로 URL을 지정하고 여기 “이름=값” 쌍을
읽어내어 플래시 변수(variable)에 할당한다. 만일 URL에 파일명을 지정하면(“a.txt”), SWF이 다운로드 된 URL과 같은 위치에
있는 파일로부터 읽어 들인다. LoadVars.load()는 MX에 새로 추가된 기능이다. loadVariables()를 이용하는 것보다
간편하며 비동기로 동작하기 때문에 데이터를 읽어오는 동안 ‘로딩중입니다’를 표시하는 것 같이 다른 동작을 하는 것을 손쉽게 구현할 수 있다.
XML 객체 역시 LoadVars와 사용하는 방법이 거의 같다. 다른 점은 XML 문서를 가져와서 파싱을 한다는 점이다. 플래시
MX에서는 XML DOM을 다루는 메쏘드들이 제공된다. XML을 이용하면 잘 구조화된 데이터를 처리할 수 있다는 장점이 있으며, 훨씬 유연한
애플리케이션을 제작할 수 있다. 실제로 애니메이션 방법을 XML로 기술해 SWF 파일은 하나인데 상황에 따라 다른 애니메이션을 보여주는 방법도
사용할 수 있다.
fscommand를 사용하는 예를 살펴보자. 다음과 같은 액션 스크립트가 있다면, “close”를 인자로 넘겨 자바 스크립트를 호출한다. fscommand ("close"); 브라우저 스크립트에서 인자를 받아 수행된다. 브라우저의 fs_DoFSCommand() 스크립트가 호출된다. 다음에 나오는 소스 코드는 자동으로 생성된 FSCommand 템플릿(HTML 파일)의 스크립트를 수정한 것이다. 전달받은 command, args에 따라 적절한 작업을 하도록 자바 스크립트를 수정하면 된다. function fs_DoFSCommand(command, args) { var fsObj = InternetExplorer ? fs : document.fs; // // Place your code here... // if(command = "close") { window.self.close(); } } 자바 스크립트에서 플래시로 값을 전달 플래시에 특정한 값을 전달하려면 플래시 플레이어 <OBJECT>의 ID를 이용하고 SetVariable() 함수를 이용한다. 이 함수는 SWF의 변수에 지정된 값을 셋팅하는 함수로 플레이어가 제공한다.
<화면 5>는 이 페이지를 수행한 결과이다. HTML 페이지에 입력된 값을 SWF로 전달해 입력된 문자열이 그대로 SWF에 표시되는 것을 확인할 수 있다. movie.SetVariable("inputText",
form1.inputVal.value) ; SWF에 있는 텍스트박스의 변수명(vars)가 “inputText”이다. form1에 있는 값을 SWF가 가지고 있는 “inputText” 변수에 할당하는 것이다. <HTML> <HEAD> <meta http-equiv=Content-Type content="text/html; charset="> <TITLE>JsToFlash</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function SetFlashVariable() { var movie = window.document.JsToFlash; movie.SetVariable("inputText", form1.inputVal.value) ; } //--> </SCRIPT> </HEAD> <BODY bgcolor="#999999"> <!-- URL's used in the movie--> <!-- text used in the movie--> <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" WIDTH="300" HEIGHT="100" id="JsToFlash" ALIGN=""> <PARAM NAME=movie VALUE="JsToFlash.swf"> <EMBED autostart=true src="JsToFlash.swf" WIDTH="300" HEIGHT="200" NAME="JsToFlash" ALIGN="" </EMBED> </OBJECT> <br/> <form id="form1"> <input name="inputVal" type ="input" value="여기에 입력하세요"><br/> <input type ="button" value="플래시에설정" onClick="SetFlashVariable ()"> </form> </BODY> </HTML> 플래시와 플래시간 통신 하나의 페이지에 두 개 이상의 플래시가 있고 이들 사이에 통신을 하려면 어떻게 할까? 플래시 MX 이전에는 SWF간에 통신을 하기 위해 앞서 살펴본 자바 스크립트를 중간에 이용해야 했다. 즉, SWF 자바 스크립트 SWF 이런 방법을 사용했다. 이 방법은 브라우저에 의존하는 면이 강해서 익스플로러나 넷스케이프에 따라 다르게 처리를 해줘야 하므로 매우 불편했다. 플래시 MX에서는 SWF간 통신을 지원하기 위해 LocalConnection라는 객체를 제공한다. 같은 브라우저 내에서는 간편하게 SWF간에 통신을 할 수 있다. 여러 개의 윈도우를 가진 플래시 컨텐츠를 비교적 간단하게 만들 수 있다. 예를 들어, 메뉴를 담고 있는 SWF과 내용을 보여주는 SWF를 따로 제작해 훨씬 유연한 컨텐츠를 제작할 수 있을 것이다. 간단히 사용법을 살펴보자. 먼저 명령을 수신하는 쪽은 다음과 같이 작성한다. // LocalConnection 객체를 생성 lcObj = new LocalConnection(); // 객체에 onContentSelect 메쏘드를 정의 lcObj.onContentSelect = function(num) { // num 값에 따라 처리 } // lcObj를 오브젝트를 아이디로 "contents"를 지정 lcObj.connect("contents"); 상대편, 즉 명령을 보내는 쪽은 다음과 같이 작성한다. lcObj = new LocalConnection(); // 메뉴 선택시 "contents"로 전송하는 데이터 정의 _root.menu1.onRelease = function() { lcObj.send("contents", "onContentSelect", 100); } _root.menu2.onRelease = function() { lcObj.send("contents", "onContentSelect", 200); } 이처럼 LocalConnection을 사용하면 자바 스크립트를 작성하지 않고도 훨씬 간편하게 SWF간에 데이터를 송수신 할 수 있다. 플래시 HTTP 통신 getURL()은 특정 URL을 호출하는 기능을 가지고 있다. 따라서 URL을 다음과 같이 지정한다면 특정 URL에 값을 전달하도록 할 수 있다. 예를 들어, SWF에서 입력받은 결과를 특정 페이지에 다음과 같이 전달할 수 있다. getURL(
'http://localhost/memo.aspx?n="홍길동"') getURL()보다 훨씬 다양하게 사용될 수 있는 것이 loadVariables() 함수이다. 이 함수는 URL에서 값들을 읽어 올 수 있다. URL은 파일일 수도 있고 http로 시작하는 페이지일 수도 있다. loadVariables()는 다음과 같은 형태로 사용한다. loadVariables ("url" , level/"target"[,
variables]) loadVariablesNum ("url" ,level [, variables]) 만약에 loadVariables()가 “이름1=값1&이름2=값2&이름3&값3”과 같은 값을 수신했다면, SWF 내의 변수 중에서 “이름1”에 “값1”을 할당하게 된다. 여러 개의 값을 한꺼번에 지정할 때 각기 다른 이름을 줘야하므로 보통 변수명에 번호를 붙여서 사용한다. ◆ loadVariablesNum 샘플 on(release) { loadVariablesNum("phonebook.txt", 0); loadVariablesNum("data.txt", 0); } ◆ phonebook.txt의 내용 name=홍길동&phone=013-443-2331 ◆ data.txt의 내용 memo=안녕하세요? 길동님.. 메모를 남깁니다. 여기서는 phonebook.txt와 data.txt 파일에서 값들을 읽어서 변수에 할당하는 예이다. SWF에는 name, phone, memo를 변수 이름으로 가지는 객체가 각각 있다. phonebook.txt, data.txt와 작성된 html, swf 파일을 같은 폴더에 웹 서버에 올려놓고 테스트를 해 보라. 수정해야 할 것은 전혀 없다. 즉, 로컬에서 수행되는 것과 마찬가지로 웹상에서도 똑같이 수행된다. 물론 다음과 같이 특정 URL을 지정할 수 도 있겠지만, 파일명만 지정하면 기본적으로 SWF가 다운로드된 URL과 같은 위치를 요청하게 된다. loadVariablesNum("http://localhost/test/phonebook.txt",
0); 이제 ASP.NET 페이지에 데이터를 보내고 보낸 내용에 따라 다르게 반응하는 예제를 만들어 보자.
<화면 6>과 같이 화면을 구성하고, 메모로 되어 있는 회색 영역의 변수 이름은(vars)는 “memo”로 되어 있다. GET 버튼에는 다음과 같은 액션 스크립트가 작성되어 있다. 이 내용은 localhost의 test 폴더에 memo.aspx를 호출하는 내용이다. on(release) {
loadVariablesNum("http://localhost/test/memo.aspx?name=" + name, 0); } 서버측의 페이지는 아주 간단한 ASPX 페이지로, “홍길동”이 인자로 전달되면, “memo=홍길동님 12시까지 오세요”란 문자열이 리턴되고 아닌 경우는 “memo= 메모가 없읍니다”가 리턴된다(<리스트 1>).
여기서 한 가지 주의할 것이 있다. 앞서 이야기한대로 System.useCodepage = true로 하고 <리스트 1>의 memo.aspx 파일이 있는 곳에 web.config를 다음과 같이 수정한다. 요청(request) 인코딩과 응답(response) 인코딩을 다음과 같이 모두 “ecu-kr”로 맞춰준다. 이렇게 하는 것이 테스트하기도 좋고, 실제 대부분의 사이트들이 EUC-KR(KSC5601)을 사용하기 때문에 글자가 깨지는 문제를 일으키지 않는다. ◆ web.config 파일의 일부 <globalization requestEncoding="euc-kr" responseEncoding="euc-kr" /> loadVariables는 배경색과 같은 SWF의 설정 등을 읽어오는데도 사용할 수 있다. 가능한 데이터를 SWF 안에 두지 말고 파일이나 혹은 특정 URL(apsx 페이지)에서 생성된 데이터를 읽어 들여 처리하는 것이 훨씬 좋다. 내용이 변경되어도 SWF를 다시 제작하는 수고를 덜어 줄 것이기 때문이다. 훨씬 더 유연하고 동적인 SWF를 구성할 수 있다. LoadVars 객체 LoadVars 객체는 앞서 이야기한 loadVariables()를 대신해 사용할 수 있으며, 훨씬 다양한 기능을 제공한다. 특히 다양한 데이터를 읽어 들어 처리할 때 매우 유용하다. loadVars()는 다음과 같이 객체를 생성하여 사용한다. lv = new loadVars(); loadVars 객체는 다음과 같이 다양한 메쏘드와 속성을 제공한다(<표 3>).
<리스트 2>는 액션 스크립트 예제이다. 액션 스크립트의 Array를 이용했고 onLoad를 이용해 load가 다 끝난 뒤에 데이터를 처리하도록 했다. 데이터가 로드되면 loaded가 함수가 수행된다.
<리스트 3>는 이전(prev) 버튼을 눌렀을 때 동작하는 액션 스크립트이다. <리스트 4>는 서버측 ASPX 페이지이며, 여기서 이 페이지에서 데이터를 보기 좋게 하기 위해 ‘&’ 문자를 두 번에 나눠 쓴 것을 눈여겨보자. ‘&’을 연속해서 사용해 개행 문자 사이를 이어 줄 수 있다.
<화면 7>은 이 주소록의 수행되는 화면이다. 총 4개의 주소를 ASPX 페이지로부터 로드하여 이전 이후를 볼 수 있도록 되어 있다. 서버측이 무척 간단하게 되어 있지만 요청을 받았을 때 이 내용을 데이터베이스에서 읽어오도록 할 수도 있을 것이다. 결과적으로 플래스 MX가 HTTP 통신을 위해 다양한 방법들이 제공되지만 LoadVars 객체를 이용하는 것이 가장 유연하고 좋은 방법이다.
플래시의 경쟁자들 SVG 포맷은 벡터그래픽을 위한 표준 XML 문서로 1998년 어도비, 썬마이크로시스템즈, 넷스케이프가 제안한 PGML(Precisson Graphics Markup Language)과 매크로미디어와 마이크로소프트가 제안한 VML(Vector Markup Language)을 기반으로 만들어졌다. SVG는 W3C의 표준 권고안으로 채택되어 어도비를 포함하여 여러 회사에서 지원하고 있다. 플래시의 SWF 파일 포맷은 공개되어 있지만 FLA 파일 포맷은 공개되어 있지 않다. 반면 SVG는 오픈 표준으로 순수하게 XML로만 제작이 가능하다는 장점 때문에 오픈 진영에서도 다양한 도구들이 많이 만들어 지고 있다. 반면에 플래시는 이미 광범위하게 사용되고 있어 SVG와 플래시가 향후 어떻게 발전할지 그 귀추가 주목된다. 사실상 플래시는 클라이언트 환경에서 자바 애플릿을 제치고 좀더 다양한 기능을 제공하고 있다(이 배경에는 마이크로소프트가 JVM을 더 이상 지원하지 않는 이유도 크게 작용했다). 플래시는 자바 애플릿과 달리 프로그래밍 도구가 아닌 디자인 도구에서 출발했다는 점이 풍부하고 다양한 컨텐츠를 가능하게 했고, 이 때문에 플래시가 더욱 많이 사용되게 됐다. 아직 CLR이 설치된 클라이언트가 그리 많지는 않지만 장기적으로 볼 때, 닷넷의 XML 웹 서비스, 리모팅 기술을 포함한 스마트 클라이언트 기술도 플래시의 경쟁 기술 중의 하나가 될 수 있다. 이제 플래시 MX는 개발 도구로서의 면모를 갖추기 시작했고, 기업 환경에 적용될 채비를 모두 갖추었다. 닷넷이나 웹 서비스 등의 분야들과 마찬가지로 플래시 또한 하나의 새로운 개발 영역이 되었으며 사용상의 편의와 풍부한 인터페이스를 기반으로 계속 확장될 것이다. 이번 글에서는 플래시 MX의 다양한 통신 방법과 기본적인 HTTP 통신에 대해 살펴봤다. 예제들을 실행해 FLA 파일을 살펴보면 충분히 소화할 수 있을 것이다. 플래시를 처음 접하는 독자라면 인터넷에 많은 플래시 강좌들이 있으니 이들을 먼저 접해보기 바란다. 다음에는 플래시에서 XML 문서를 다루는 방법들과 XML 웹 서비스 그리고 리모팅에 대한 주제를 다뤄 본다. @ |
