News and PR

㈜IPARTNERS / 디자인실 / 멀티미디어팀 대리 김 정철 XML과 Active X를 이용한 Dialogue학습 Flash제작 (교원잼클럽Site의 월요일학습에 들어가는 dialogue 학습Flash제작) 1. Dialogue 학습 Movie의 진행 흐름이해 1-1. XML연동으로 데이터로드 1-2. Movie의 진행흐름 1-3. 로드된 데이터를 이용하여 필요한 사항을 정의 체계화하기 2. 구현하기 2-1 XML문서준비 2-2 Flash에서 XML 데이터 로드 2-3 로드시킨 XML 데이터 처리 2-4 대화참여 인원수 구하기 2-5 setInterval함수로 실제 실행되는함수 2-6 Active X에서 Flash로 파라미터값 넘기기 보통의 경우 flash를 통해서 asp, php, jsp등의 웹 서버 프로그램문서와의 연동을 하시다 보면 그 프로그램 문서와의 연동이 어려운 것이 아니라 연동할 데이터를 얼마나 구조화해서 불러드릴 수 있냐가 번거롭다는 것을 알 수가 있습니다 그에 비해서 XML은 XML문서 자체가 구조화된 문서입니다 flash에서는 XML Document를 5.0버전부터 지원하고 있기에 flash에서 XML데이터를 불러올 때 특별히 구조화할 필요가 없다는 것 만으로도 엄청난 작업량을 줄 일수는 것이고 데이터의 수정 또한 flash가 아닌 XML를 통해 바로 이루어낼 수 있다는 점에서 관리의 용이함까지 가지고 있습니다. 그 외의 다른 장점들도 많죠. ^^ flash에서 XML문서의 연동과 Active X에서 flash Move를 제어하는 간단한 방법을 교원잼클럽의 월요일학습Movie 제작과정을 정리되지 않은 소스지만 간단히 소개하려고 합니다. 1. 월요일학습 Dialogue 학습의 진행이해 1-1 구조화된 XML데이터 로드 여기에서 보면 데이터가 한정된 공간에서 보여줘야 하고 로드되는 데이터의 양 또한 학습의 단계별로 틀리다(어떠한 양의 데이터가 들어와도 적용되어야 하는것이다) 사용하는 XML은 단순히 flash에만 사용하는 것이 아닌 여러곳에서 사용되기에 flash체계에 마추어 작성된 것이 아니라는점 또한 생각을 해야한다. 1-2 Movie 진행흐름 Movie가 실행되면 XML문서의 내용을 로드한다. 로드 된 데이터는 flash에서 필요한 부분을 배열화하여 화면상에 뿌려지고 화면에는 5개의 버튼 놓여있다. 지문해석, 지문듣기, 내 발음녹음, 녹음재생, 도움말 등 각각의 버튼을 이용하여 지문의 해석을 볼 수가 있고 자신의 캐릭터를 선택하고 선택된 캐릭터를 이용하여 해당부분을 자신의 음성으로 녹음하고 그것을 다시 재생할 수도 있다 자신의 캐릭터를 선택하면서 캐릭터의 모양과 상대방 캐릭터의 모양 또한 선택 가능하게 하여 flash와 user간의 재미난 커뮤니케이션이 이루어지는 것이다. 녹음의 재생이나 지문듣기의 경우는 Active X에서 javascript를 이용하여 flash로 현재 재생되고 있는 구간의 값을 보내어 해당지문의 활성화와 해당 캐릭터의 간단한 무비진행을 보여주어 학습하는 user의 학습참여도를 높이게 제작되었다. 1-3 로드된 데이터를 이용하여 필요한 사항을 정의하고 체계화하기 XML를 flash에서만 사용하는 것이 아닌 다른 곳에서 사용되고 있는 XML를 같이 사용하는 것이기에 flash에서 필요로 하는 영문캐릭터명(eng_name), 영문대화내용(eng_dialog), 국문캐릭터명(han_name), 국문대화내용( han_dialog)이라는 4개의 노드(node)만을 배열화 하여 사용한다 그 중에 영문캐릭터명의 노드를 이용하여 전체 대화에 참여하는 캐릭터의 인원수를 뽑고 그 캐릭터의 명을 다시 저장, 후에 캐릭터 선택에 사용한다. 화면상에 로드 된 데이터를 보여줄 때 step의 단계에 마추어서 지문해석 버튼을 삭제하고 영문과 지문해석을 화면상에 같이 뿌려주는 step1과 영문만 보여주고 지문은 지문해석버튼을 이용하여 보여주는 step2가 있다 이 step단계는 첨의 무비가 실행되기전에 학습 user가 선택을 할수 있게 제작되었다. 대화에 참여하는 캐릭터의 총수는 3명으로 한정을 하였으면 자신의 캐릭터의 모양은 3개, 상대방의 캐릭터모양의 수는 4개로 한정하였고 또한 상대방의 캐릭턱 보여지는곳이 한곳이기에 이 flash로 학습을 하는 대상이 유아와 초등학생이라는 점을 감안하여 혼란의 줄이기위해 상대방의 캐릭터 모양은 캐릭터의 수와 상관없이 학습 user가 선택한 한가지 모양만을 적용하게끔 하였다. 2. 구현하기 XML문서는 구조가 트리구조로 구조자체가 초보자들도 알아보기 쉬게 만들어져 있습니다 일반적인 HTML code와 같은 구조이나 HTML code를 이해하려면 Tag라는 것을 알아야 합니다 하지만 XML에서는 Tag자체를 작성자가 지정하여 사용할 수 있습니다 이로써 문서는 그 의미와 서식이 구조화 되어지는 것이죠. 그렇다고 XML를 쉬게 생각하실 수는 없죠 XML은 DTD에서 XSL이나 CSS등을 사용하여 서식을 지정하지만 flash에서는 flash자체가 서식을 지정하는 도구가 되기에 쉬게 XML을 사용할 수 있는 것이죠 DTD부분을 더 공부하시려면 XML 전문서적으로 공부 하여야겠죠. (^^)a 2-1 XML문서준비 월요일학습에서 사용되어진 XML은 문서중에 라는 상위 노드 부분만이 flash에서 사용됩니다 라는 상위 노드밑에 , , , 라는 하위 노드를 다시 가지고 있죠 는 대화에 참여하는 영문 대화명을 기입합니다 에는 영문대화의 내용을 에서는 한글대화명을 기재하고 마지막으로에는 한글대화내용을 기입하게 되는 것이죠 . 이런 식으로 만들어진 XML를 사용하여 flash movie를 제작하는 것입니다. <중략>