몇 일전 저는 뜻하지 않게 감동적인 선물을 받았습니다. "마로의 꿈 - 액션스크립트 3.0으로 배우는 소셜 게임 프로그래밍" 이라는 이명희/김종훈 님이 쓰신 책이였습니다.

몇 번 책선물을 받은 적이 있지만 이번 책은 너무도 특별했습니다. 바로 저자인 이명희님께서 직접 엽서까지 보내서 선물로 주신 겁니다. 사실 이명희님를 만난 적이 없는 것 같습니다.(제가 오프라인 활동을 너무 안하다 보니...) 이명희님께서는 원래 C/C++ , Java등 다른 분야에서 개발하시던 분인데 게임 개발을 위해 ActionScript 3.0을 접하시다가 제 블로그를 알게 되었다고 합니다. 책을 보낸 이유는 제 블로그를 통해 도움을 많이 받아 감사하다는 것이였습니다. 초판 날짜를 보니 아마도 발행되자마자 바로 보내셨더군요. 정말 감동이였습니다.

처음에는 다 그렇듯이 Flash 개발이 쉽다고들 하지만 그것은 어디까지나 Flash IDE를 통해 디자인적 접근이 그러한 것이고 게임처럼 고도의 경험과 기술이 들어가는 분야로 접근하면 다른 언어와 마찬가지로 어려운 것은 사실입니다. 왜냐하면 Flash 게임개발은 그 분야대로 노하우가 필요한 것은 분명하니깐요. 아마도 diebuster(http://diebuster.com)을 방문해서 글을 보신 경험이 있다면 Flash가 결코 만만하지는 않구나라는 생각이 들겁니다. Flash가 대중적이긴하나 VM이기 때문에 속도와 질을 극대화 시키는 것은 쉽지 않거든요. 특히나 게임분야는 말할 것도 없지요.

책 소개를 해야겠네요. 이 책은 "마로의 꿈"이라는 게임을 기반으로 쓰여진 책입니다. 저자가 직접 간단한 소셜게임을 만들었고 그 게임에 녹아있는 각종 스킬을 소개하는 내용을 담았습니다. 마지막에는 게임에 사용된 인공지능 및 소셜게임을 네이버에 등록하는 방법도 소개합니다. 게임은 2D지만 여느 소셜게임처럼 3D 느낌을 다룹니다. 자원생성, 자원관리, 지도제작, 아바타 제작 및 애니메이션등 정말 소셜게임이 필요한 핵심내용을 담고 있습니다. 게임이라는 특성상 진부하고 어려운 내용을 담을 것 같지만 실제로 이 책은 300페이지가 채안되면서도 간단하고 명쾌하게 설명해주고 있어서 처음 소셜게임에 입문하시는 분들에게는 국내서적으로 이만한 책은 없다고 생각합니다.

국내에서 IT서적하면 항상 인기부류인 기초를 다루는 책이 나오는 것이 실상임에도 이런 책이 출판이 될 수 있었다는 것도 참 신기합니다. 요즘 스마트폰 붐으로 약간 침체된듯한 국내 Flash분야에 활기를 불어넣는데 이 책이 일조할 수 있을 것이라 생각합니다.

글쓴이 : 지돌스타(http://blog.jidolstar.com/736)

이 블로그를 시작한지도 3~4년이 되어 갑니다. 그동안 Flex, Flash, 천문, 스타플 관련해서 지속적으로 글을 써왔습니다. 지금 돌이켜보면 그렇게 열심히 써왔던 것들이 피가 되고 살이 되어 돌아온다는 것을 너무도 잘 느꼈습니다. 블로그를 통해 온라인에서 다양한 사람들과 교류를 할 수 있었고 미약하게 나마 좋은 사람들도 만나게 되었습니다. 또한 ACC, ACP라는 명함도 달게 되었고요.

이 블로그에는 되도록이면 Adobe 기술에 관련된 것 외에는 담지 않으려고 노력했습니다. 그래서 Flash 관련 내용이 대부분입니다. ACC가 된 이후로는 Adobe 기술에 대한 부분만 집중적으로 올렸었는데, 요즘에는 관련 글이 잘 써지지 않습니다. 왜냐하면 현재 주 업무가 아이폰 개발이다 보니 그렇네요. 그러다보니 블로그가 죽는다는 느낌이 듭니다. 또한 스스로 정리하는 것도 많이 줄어드는 것 같구요.

그래서 이제 좀더 포괄적으로 블로그를 운영하려고 합니다. 제가 최근에 공부하고 느끼는 모든 것을 왠만하면 다 담으려고 합니다.  관련기술, 천문, 스타플에 대한 것만 올리려고 합니다. 제가 좋아하는 드럼과 개인적인 일상 내용은 전부 배제할겁니다.

많은 지식이 있어서 이 블로그를 활용하는 것은 아닙니다. 오히려 너무도 부족함을 느끼기에 블로그를 더욱 쓰고 싶습니다. 지식 욕구를 채우고 또한 좋은 정보도 제공하며 많은 사람들을 만나는 통로를 이 블로그를 통해 만들어 갈 것입니다.
아래 언급한 내용이 정확한 건지는 나도 확신이 들지 않는 부분도 있다. 동적,정적 언어에 대한 교양을 쌓아본적도 없고 단순히 블로그와 여러 자료를 읽어보고 내린 나의 결론일 뿐이다. 이 생각을 이해하려면 먼저 ActionScript 3.0에 대한 언어적 구조를 이해할 필요가 있으므로 아래글을 꼭 읽어보길 바라며 잘못된 내용이 있으면 댓글로 언제든지 지적해주었으면 한다.


동적언어와 정적언어의 차이점은 실행시점에 메모리 관리와 관계있다. 정적 언어에서는 실행시 메모리상에 정의된 클래스,함수등을 수정될 수 없지만 동적언어는 언제든지 바꿀 수 있다.  

ActionScript 3.0은 JavaScript처럼 prototype 체인을 기반으로 하는 동적언어이다. 하지만 개발자가 느끼기에 정적언어처럼 사용을 강제하는 구조로 만들어져 있다. 즉, 겉으로 보기에는 정적언어인 Java나 C++처럼 Class, 메소드 기반의 개발을 유도한다. 

동적언어는 정적언어에 비해 속도,메모리 관점에서는 불리한 면이 많으나 유연성이 좋기 때문에 그에 따른 장단이 있다. 

ActionScript 3.0은 동적언어인데 왜 굳이 정적언어 흉내를 내려고 한 것일까? 여러가지 이유가 있겠지만 언어의 패러다임을 맞춰 Java, C++개발자들과 같이 객체지향개발에 익숙한 사람들도 쉽게 접근하기 위함이 있겠고 또한 속도개선을 위한 메커니즘을 만들어내기 위한 것이 아닌가 생각된다. 

Class기반의 객체지향프로그래밍은 Java,C++개발자라면 익숙하기 때문에 접근하기 좋다. ActionScript 2.0때 부터 Class나 extends, private, public 과 같은 키워드를 도입해서 객체지향적 프로그래밍을 강제했다. 내부적으로는 prototype 체인구조로 되어 있지만 문법적으로 이들 키워드를 이용해 개발하면 컴파일시 자동으로 prototype 구조를 변형되는 것으로 판단한다. 하지만 이런식의 단순 변화는 개발의 접근성이 좋아진 반면 속도적인 이득은 없다. 

ActionScript 2.0까지 AVM1(ActionScript Virtual Machine 1) 기반하에 동작할 때는 함수 및 속성에 접근하기 위해 prototype 체인을 검색하면서 실행했기 때문에 속도적으로 너무 느리다. 하지만 ActionScript 3.0부터는 새로운 AVM2 기반에서 동작하게 되어 느린 prototype 체인 검색을 많은 부분 개선하게 되었다. 즉, prototype대신 traits라는 일종의 캐쉬기능이 도입되었다. 이 기능의 도입으로 속도와 메모리가 상당부분 개선이 되었다. 

AVM2에서 A클래스의 객체구조(출처:어도비)




분명 AVM2에서 traits 도입은 ActionScript 3.0의 매력도를 굉장히 증가를 시키게 되었다.  이렇게 하여 접근 방법이 빨라지고 클래스에 정의된 메소드들의 this는 항상 클래스 객체를 가리킬 수 있게 된것이다. 이런 개념때문에 우리는 sprite1.addEventListener(myEvent, display1.hnFunc)와 같이 아무 문제없이 이벤트 핸들링을 할 수 있게 된것이다. display1.hnFunc 안에서 this를 사용하면 이것은 sprite1이 아닌 display1을 가리키게 된다. hnFunc는 display1 객체를 정의한 클래스 내에 정의된 메소드이기 때문이다. 만약 traits 개념이 없다면 ActionScript는 여전히 prototype 기반이기 때문에 의도하는 this의 행방이 애매모호해져서 ActionScript 2.0때 처럼 delegation(대리자) 개념을 이용해야하는 불편함을 가지게 된다. 

메소드 클로저는 Class내의 메소드 일때만 유효하다. 만약 다음과 같은 경우 this는 의도하는 this가 아닌 경우가 생긴다. 예제로 아래 ActionScript 3.0코드를 보자.

class MyClass {
	function MyClass() {
	}
	public  function method():void {
		trace(this);  //[object MyClass]
		hnRun(this);  //[object global]:[object MyClass]
		function hnRun($object:*):void {
			trace(this +":"+$object); 
		}		
	}
}

위에서 언급한 대로 위 클래스의 method()는 클래스의 메소드이므로 메소드 클로저 개념이 도입되어 method() 내에서 this는 그 클래스의 객체 자신을 가리킨다. 만약 prototype구조로만 정의된다면 당연히 this는 global을 가리켜야 한다. 이러한 이유로 ActionScript 3.0이 Java나 C++처럼 this의 의미가 같아지게 되어 헷갈리지 않고 사용할 수 있게 된다. 

ActionScript 3.0은 분명 동적언어이므로 method()내에 hnRun()과 같은 형태로 메소드 안에 또 함수를 정의할 수 있다. 이 함수는 내부함수라 지칭된다. 이 경우에도 this는 MyClass를 가리켰으면 좋겠지만 실제로 출력결과를 보면 global이 나온다. 즉, 내부함수는 prototype 체인기반의 함수 특성을 여전히 가지고 있다는 것을 의미한다. 

ActionScript 3.0는 이런 내부함수를 다룰 수 있는 여지는 남겨두었지만 잘 알지 못하고 사용하면 오히려 역효과를 줄 수 있기 때문에 신경을 써야한다. 왜냐하면 this는 앞선 이유 때문이고, 메모리 부분의 경우 내부함수는 그것을 감싼 메소드가 호출될때마다 새롭게 생성되기 때문에 참조를 누적해서 사용하면 메모리누수를 일으킬 수 있다.(실제로 method()를 두번이상 호출해보고 hnRun의 메모리값을 디버깅을 통해 보면 번지수가 다르다는 것을 볼 수 있다.) 이러한 특징과 문제가 되는 사항을 잘 알면 오히려 실보다 득이 많다. 왜냐하면 내부함수를 사용하면 전체코드의 가독성을 향상시켜주는 좋은 도구이기 때문이다. 

위 ActionScript 3.0 코드를 아래처럼 조금 변경해보자. 

class MyClass {
	function MyClass() {
	}
	public  function method():void {
		trace(this);  //[object MyClass]
		hnRun(this);  //[object global]:[object MyClass]
		var a:Object;
		a = {method1:hnRun};
		a.method1(this);  //[object Object]:[object MyClass]		
		function hnRun($object:*):void {
			trace(this +":"+$object); 
		}		
	}
}

a.method1(this)를 실행하면 이번에는 this가 아닌 Object가 된다. 즉 a를 가리킨다. Object내에 정의된 속성, 메소드는 traits 캐쉬에 등록되고 그 안에서 사용된 this는 traits를 가리키도록 강제되기 때문이다. 순수 prototype 기반이라면 당연히 global이 나와야 한다. 

this에 대해서 헷갈릴 수 있는 부분 한가지는 a.method( function():void{trace(this);}); 처럼 사용할 때이다. 이때 this는 a객체에 정의된 method()에서 실행되므로 this는 a가 된다. 

이처럼 동적언어인 ActionScript 3.0에서 this에 대해서 잘 이해하고 써야한다. 안그러면 내부함수를 사용하게 되는우 원하는 클래스의 인스턴스를 참조하는게 아닌 엉뚱한 global을 참고할 수 있게 되고 이런건 컴파일 타임에 에러를 발생하지 않고 왜 그런지 이유 조차 모를 수밖에 없기 때문이다.

이런 개념을 이해하고 개발하는 것은 생산성을 극대화 시켜준다는데는 경험상 확인되었다.


직장을 옮기면서 Flash에 관심을 가진지도 3년이 넘었다. 당시만해도 PHP정도만 경험이 있었고 수년동안 웹과는 단절된 상태였기 때문에 Ajax로 만들어진 구글맵을 보고 "이런걸 만들 수 있구나..."라는 말을 중얼거리며 꽤 놀랐던 적이 있었다. Web 2.0, RIA라는 단어가 당시 트렌드였고 이 모든 것이 나에게는 매우 신선했고 가능성을 느끼게 하는데 충분했다. 

하지만 3년전 RIA 대표주자인 Flex 2를 처음 접했을때 국내 관련서적은 거의 없었다. Flash IDE를 기반으로 하는 책은 수도 없이 많았지만 개발요구사항을 만족시키기에는 매우 역부족이였고 Flex도 옥상훈님이 쓴 서적 딱 한권 뿐이였다. 사실 모두 기초서적들이라 초반학습에는 도움되었지만 실무에 적용하기에는 너무 부족했다. 또한 기술적으로 도움을 받을 수 있는 인맥도 전혀 없었다.

결국 내가 선택한 방법은 이 블로그이다. 말이 되던 안되던 Flex 하나를 중구장창 파고 들면서 얻은 귀중한 지식을 블로그에 하나씩 써내려갔다. 초반에는 livedocs가 어디 있는지도 몰랐고 구글 검색도 처음 해봤던 시절이라 너무 힘들었다. 블로그의 내용은 관련 카페에 소개하면서 계속 점접을 만들어갔다. 이러한 노력은 몇개월이 지나지 않아 바로 사람들에게 좋은 반응으로 이어졌고 지식공유가 일어났다. 또한 이쯤에 flexdocs.kr 사이트도 운영하게 되었다. 그때 생각하면 너무 어렵게 공부했던 기억뿐이다.

3년이 지난 지금... 사정은 너무도 많이 달라졌다. 3년전 한창 붐을 일으키던 RIA라는 단어는 이미 일상이 되버렸고 모바일이 이슈가 되면서 관련 서적도 쏟아지기 시작했다. Flash Platform에 관련된 서적도 엄청 많이 쏟아졌고 오프라인 서점만 찾아가면 듣도보지도 못한 관련서적을 꽤 많이 발견할 수 있었다.

아무튼 이젠 Flash 공부하는데 천국이 된 것임에 틀림없다.

나는 최근에 국내에 출판된 좋은 서적 4권을 소개하고자 한다.


okgosu의 액션스크립트 정석



okgosu의 액션스크립트 정석은 Flex 서적 2편으로 유명하신 옥상훈님의 책이다. 이 책은 ActionScript 3.0의 전반적인 내용을 다루고 있다. 기초문법부터 시작해 개발환경 및 디스플에이 객체를 다루는 방법을 꽤 상세하게 다루고 있다. 또한 Flash Player 10에 추가된 3D API의 기초를 다루고 있기 때문에 그동안 3D에 대해서 잘 몰랐던 사람이 공부하기에 딱 좋은 서적인 것 같다. 책의 내용이 방대하고 수많은 예시가 있어 ActionScript 3.0을 처음하는 사람에게 꽤 도움이 될 것이다.


플래시 ON 디바이스



이철규님이 번역하신 플래시 ON 디바이스는 Flash Platform을 이용해 모바일 애플리케이션을 개발하고자 하는 사람들을 위한 책이다. 사실 모바일 분야는 Flash Lite에 한정되어 있어서 필자처럼 Flex/ActionScript 3.0 기반으로만 했던 사람들에게는 넘어가기 힘든 장벽이였다. 하지만 이책은 Flash 모바일의 역사를 자세하게 소개하고 꽤 고급주제 심도있게 다루고 있어서 Flash를 이용한 모바일 개발에 관심을 가지는 사람에게 추천해줄 수 있는 책이다.  


비주얼 플렉스 UX 디자인

열이아빠님으로 활동중인 이준하님이 번역하신 비주얼 플렉스 UX 디자인은 Flex 3의 시각 컴포넌트를 사용하면서 생길 수 있는 다양한 어려움을 극복하는데 큰 도움을 준다. 레이아웃, 효과, 스타일, 스킨등을 전반적으로 다루면서 좀더 심도있게 컴포넌트를 적용할 수 있는 방법을 잘 설명해주고 있다. Flex를 이용해 풍부한 UX를 사용자들에게 경험시키고자 할때 이책은 큰 도움이 될 것이다.


ActionScript 3.0 Animation


윤도선님이 번역하신 시작하세요! 액션스크립트 3.0 애니메이션은 내가 베타 리더로도 참여했던 책이다. Flash IDE 타임라인을 이용해 애니메이션을 적용하던 수준을 넘어서 코드 기반으로 수학,물리를 이용한 다양한 에니메이션을 주는 기법에 대해서 아주 쉽게 설명하고 있다. 삼각함수, 속도, 가속도, 마찰, 바운드, 모션공식 일반적으로 수학/물리에 어려움을 느끼는 개발자들에게 꽤 유용하다. 또한 3D API를 이용하는 예도 담겨 있어 더욱 다양한 경험을 준다.


정리하며
최근에 발간된 총 4권의 책을 소개했다. 앞서 설명했듯이 3년전에 이런 고귀한 책들이 있었다면 아마도 지금까지 공부했던 시간의 절반이상은 절약할 수 있었을 것이다. 아무튼 좋은 책은 돈에 구애받지 말고 구입해서 자신의 것으로 만들어 가려는 노력이 빠른 배움의 지름길이다.

글쓴이 : 지돌스타(http://blog.jidolstar.com/690)
인터넷 상에 멋진 Flash 애플리케이션을 보면서 Flash 개발자라면 한번쯤은 어떻게 구현했을까 의문을 품어봤을 것이다. 필자 또한 그러했다. 하지만 남이 만든 소스를 보기 위해 SWF 파일을 디코드 하더라도 분석하기가 여간 까다로운게 아니다. 차라리 그럴바에 관련 내용을 담은 해외 서적을 하나 구입해서 공부하는게 더 빠를지도 모른다. 

이 문서는 자신의 Flash 제작 실력을 더욱 한층 높이기 위한 시도를 하고자 하는 분들을 위한 것이다. 중,고급 flash 개발 도약을 위해 도움이 되었으면 한다.

목차 
  • Wonderfl 소개 
  • Wonderfl의 주요기능 
  • Wonderfl 최고의 코드들 집합 Beautifl
  • Flash Builder 4에서 Wonderfl 코드 테스트 환경 만들기
  • Wonderfl 테스트 환경을 한번에 구축하기!
  • 정리하며
  • 참고사이트


Wonderfl 소개


Wonderfl(http://wonderfl.net)은 일본의 Kayac회사에서 제작하고 운영하고 있는 웹사이트로 ActionScript 3.0을 직접 인터넷 상에서 제작하고 컴파일할 수 있는 환경을 제공한다. Wonderfl은 Wonderful + flash가 합쳐진 단어로 생각된다. 매우 재미있고 기억하기 쉬운 단어 조합이다.

이 사이트는 단순히 컴파일하고 결과만 볼 수 있는 단계를 넘어 각종 공개된 라이브러리와 연동이 가능하며, 개발자들간에 코드 공유를 통해 더 좋은 코드로 개선할 수 있는 환경을 제공한다. 이로써 Flash 개발자간에 코드레벨 SNS를 실현했다고 생각한다.
 
개인적으로 Flash 개발자라면 이 사이트와 매우 가깝게 지내야한다고 생각한다. 실제로 일본의 매우 유명한 Flash 개발자들의 귀중한 노하우가 많이 공개되어 있기도 하다.

공개된 라이브러리를 활용하기 위한 환경을 구축하는 일을 매우 귀찮고 방법 또한 난해한 경우가 다분하다. 이런 경우 Wonderfl의 검색기능을 통해 필요한 기술을 쉽게 습득해서 그런 문제를 해결할 수도 있다.


Wonderfl 주요 기능

필자는 Wonderfl은 Flash 개발자간 코드공유 SNS라고 정의하고 싶다. Wonderfl의 몇가지 기능을 소개하면서 그 이유를 알아보도록 하자.

1. 코드 작성
Wonderfl의 가장 기본적인 기능 중에 하나로 코드 작성후 실시간으로 컴파일하고 결과를 볼 수 있는 기능이다. 이 기능은 Flex 컴파일러인 mxmlc을 활용해서 만든 것으로 파악한다. 그렇기 때문에 일반 ActionScript 3.0 코드외에도 MXML 태그로 작성해도 컴파일이 가능하다. 코드에 대한 라이센스도 함께 지정할 수 있고 작성이 완료된 코드는 블로그나 다른 커뮤니티에 퍼갈 수 있도록 되어 있다.


2. "Fork"기능을 이용한 다른 사람의 코드 수정
Fork기능은 이미 만들어진 코드를 퍼가서 자기 입맛대로 수정하는 것을 의미한다. wonderfl에 올라온 모든 코드는 이 작업이 가능하다. Fork의 강력함은 아래 소개하는 필자의 2개의 글을 참고하면 좋겠다.

10만개 입자를 이용한 유체 시뮬레이션 실험
Flash 속도 개선을 위한 실험 - 10만개 입자 유체 시뮬레이션 연장전!




3. 좋아하는 코드 찜하기
Fork 기능은 매우 강력하지만 또한 부담스러울 수 있다. 수정하지도 않을 코드를 Fork하는 것은 왠지 끌리지 않는다. 이럴때 사용할 수 있는 기능이 favorite 기능이다. 멋진 코드를 발견하면 "add to favorites"를 클릭하자. 그러면 다음에 설명할 "나의 페이지"에서 지금까지 favorite로 지정한 코드 리스트를 언제든지 참고할 수 있게 된다.


4. Following, Follower 기능
트위터와 같이 Following, Follower 기능이 존재한다. 코드 공유를 넘어 유용한 코드를 생산하는 사람을 Follow로 등록하면 나의 페이지에서 Following 리스트로 확인할 수 있고, 또 그 사람이 만들어내는 코드를 언제든지 쉽게 확인할 수 있게 된다. 그야말로 개발자 코드레벨 SNS 사이트인 것이다.

5. 나의 페이지
나의 페이지는 자신이 만든 코드, Fork나 favorite로 지정된 코드, Follow로 지정한 사람들의 동향을 확인할 수 있는 기능을 가지고 있다. 이 페이지는 "wonderfl.net/user/아이디"로 접근할 수 있다. 필자는 http://wonderfl.net/user/jidolstar 이다.



6. 질문&답변 기능
코드중에 이해하기 힘든 코드나 설명이 필요한 코드가 있다면 질문할 수 있다. 방법은 Fork를 하고 tag에 question을 달면 된다. 일본어, 영어로 해야하기 때문에 왠지 부담이 되겠지만 활용하면 분명 좋은 기능이다.





Wonderfl 최고의 코드들 집합 Beautifl
Beautifl(http://beautifl.net)은 Wonderfl에 올라온 멋진 코드들만 선별해서 종류별로 소개해준 사이트이다. 이 사이트는 Wonderfl에 올라온 코드중에 추천받은 코드만 엄선하여 보기 좋게 카테고리를 만들어 분류해주고 있다. 잘 이용하면 큰 도움이 되는 사이트이다.

Beautifl.net의 메인화면



Flash Builder 4에서 Wonderfl 코드 테스트 환경 만들기
Wonderfl에서 매우 좋은 코드 툴을 제공하고 있지만 약간의 수정외에는 Flash Builder 만큼 자유롭게 개발하기는 힘들다. Wonderfl에서 조금 놀다보면 이제 그곳에 있는 코드를 가져와 내것으로 만들어보고 싶게 된다.  

Wonderfl에는 Flash Player에서 제공하는 Native 클래스들(flash.* 패키지로 구성된 것들)뿐 아니라 외부 다른 유용한 라이브러리를 함께 활용할 수 있는 환경이기 때문에 그와 비슷한 환경을 만들어주는 것이 필요하게 된다. 필자처럼 Wonderfl에 공개된 코드를 매번 가져다가 테스트 해보는 사람은 필요할때 마다 라이브러리를 가져다 쓰는 것은 매우 귀찮은 작업이다. 그러므로 필요한 라이브러리를 한번에 가져와 언제든지 테스트 해볼 수 있는 환경을 구축할 필요성이 생긴다.

여기서는 라이브러리를 자신의 워크스페이스에 포함하는 방법과 그 라이브러리를 이용해 테스트를 하는 방법을 간단히 소개한다.

1. 라이브러리 가져오기
Wonderfl에서 사용하는 라이브러리 목록은 사이트 우측상단에 Wonderfl > libraries 메뉴로 들어가면 아래와 같은 화면을 통해 사용한 라이브러리의 종류와 버전을 확인할 수 있다.


각 라이브러리의 좌측에 download.swc를 직접 다운로드 받아 자신의 프로젝트에 포함시킬 수도 있다. 하지만 여러분은 단순히 라이브러리를 이용하는 차원이 아니라 직접 디버깅하며 코드를 분석할 필요가 있을 수 있다. 이러한 경우에는 직접 라이브러리 프로젝트를 만들어 소스를 항상 참조하는 환경을 만들어야 한다. 이러한 환경을 만들때 참고해야할 사항은 다음과 같다.

첫째. Wonderfl에 공개된 라이브러리는 다양한 배포 경로를 가진다.
공개된 라이브러리는 다양한 배포 경로를 가진다. 가령, Google Code에 최종 버전을 압축해서 배포하는 사람도 있지만 그냥 SVN에만 올려놓는 사람도 있다. 또 자신의 웹사이트(TweenMax의 경우)에서 직접 배포하는 경우도 있고 Google이 아닌 다른 커뮤니티(betweenAS3, thread의 경우 libspark.org)에서 배포하는 경우도 있다. 어떤 경우는 소스를 공개하지 않고 SWC만 공개하는 경우도 있다.(Alternative3D의 경우) 우리는 다양한 배포 경로에 맞게 알아서 참고해 사용해야한다.

둘째. Wonderfl에 사용된 라이브러리의 버전을 확인한다.
공개된 라이브러리는 왠만하면 Wonderfl에서 사용하고 있는 버전을 이용하는 것이 좋다. 그렇지 않으면 Wonderfl 코드를 사용할 때 버전차이로 컴파일 에러가 발생할 수 있다.  


셋째. 라이브러리간 의존성을 확인한다.
가령, jiglibflash 라이브러리의 경우 기본적으로 Papervision3D, Sandy3D, Alternative3D, away3d, five3d 라이브러리가 있는 경우에만 컴파일을 할 수 있다. 만약 jiglibflash에서 away3d, five3d를 제외한 다른 라이브러리만 사용하는 경우에는 해당코드를 찾아 컴파일 대상에서 제외해야한다. 아래 화면은 jiglibflash의 속성에서 필요없다고 판단한 클래스를 제외시키는 방법을 보여준다.



위와 같은 3가지 참고사항에 따라 Flash Builder의 워크스페이스에 라이브러리 프로젝트를 만들면 다음과 같은 Package Explorer의 모습을 기대할 수 있다.



2. Wonderfl 애플리케이션 제작 
위 과정을 통해 라이브러리를 자신의 워크스페이스에 받아왔으면 이제 테스트를 위한 애플리케이션 제작 프로젝트를 만들 차례이다. 

첫째. Flash Builder의 File>New를 통해 ActionScript 3.0 프로젝트를 만든다. 필자는 프로젝트 이름을 wonderfl로 했다.
둘째. 만들어진 프로젝트에 libs 폴더를 만들고 소스가 공개되지 않은 SWC 파일을 복사해둔다.

셋째. 라이브러리 경로를 잡아준다. 지금까지 만들어놓은 라이브러리를 전부 사용하기 위해 먼저 "Add Project..."버튼을 눌러 라이브러리를 모두 등록한다. 또 "Add SWC Folder..." 버튼을 눌러 libs를 입력해 libs 폴더에 SWC를 사용하는 라이브러리로 등록한다.

넷째, .actionScriptProperites의 <excludedEntries>부분을 모두 삭제한다.
<excludedEntries>는 FlexSDK를 이용해 mxmlc가 컴파일하는 과정에서 필요없는 라이브러리를 빼는 역할을 한다. 하지만 Wonderfl에 공개된 코드들은 FlexSDK의 모든 라이브러리를 거의 100% 사용하므로 이 부분을 제거할 필요가 있는 것이다. 하지만 .actionScriptProperites 파일은 숨김파일이므로 Package Explorer 창에 바로 보이지 않는다. 이 부분에 대해서는 http://blog.jidolstar.com/665 를 참고하고 <excludedEntries>를 제거하길 바란다.

다섯째, HTML wrapper 파일은 삭제해준다.
HTML wrapper 파일을 웹브라우저에서 실행하는 것을 가정하에 Flash 애플리케이션이 자동으로 HTML에 Embed처리 되도록 생성해주는 일종의 템플릿 코드이다. wonderfl의 코드들이 단독 Flash Player 에서 제대로 동작하는 경우가 있다. HTML wrapper 설정을 해지함으로써 제대로 동작하지 않는 것을 방지할 수 있는데, 굳이 이 설정을 한 상태로 하고 테스트 하다가 stageWidth, stageHeight관련 문제가 발생하면 http://blog.jidolstar.com/656를 참고하길 바란다.

 
여섯째, Wonderfl에서 마음에 드는 소스 코드를 복사한다.
일곱째, default package에 ActionScript 파일을 만들고 복사한 Wonderfl 코드를 붙인다. 이 때 주의할 것은 파일명과 클래스 명은 동일해야한다. 이때 이름규칙을 정해주면 좋다. bitmap실험은 bitmap_로, 게임은 game_으로, papervision3d면 pv3d_로 시작하도록 만들어놓으면 관리하기 용이해진다.

여덟째, 만들어진 ActionScript 코드를 실행하기 위해 Default Application으로 설정한다. (아래화면 참고)
이것은 .actionScriptProperties 파일의 <applications>에 등록하는 과정중 하나이다. 직접 .actionScriptProperties를 편집해도 되겠다.

아홉째. 실행하고자 하는 ActionScript 파일을 열고 Shift+Alt+X,W를 눌러 실행한다.
열째. 실행코드에 Wonderfl의 출처를 남겨두는 것이 좋다!
아래처럼 Wonderfl에서 가져온 코드의 출처를 남겨두면 나중에 다시 참고할 수 있게 된다.

마지막으로, 일본어 주석은 일본어 번역기를 이용한다.
필자의 경험상 네이버 일본어 번역기가 원본코드를 깨뜨리지 않고 알맞게 번역해주었다. 활용하면 도움이 된다.


Wonderfl 테스트 환경을 한번에 구축하기!
지금까지 라이브러리와 개발환경을 구축하는 방법을 소개했다. 하지만 이러한 개발환경을 만든다는 것은 너무 버겁고 귀찮은 작업이다. 필자는 이러한 문제를 한방에 해결할 수 있는 솔루션을 여러분께 선물하고자 한다.



필자는 Wonderfl 코드의 테스트 환경을 쉽게 만들어주기 위해 Naver 개발자 센터의 오픈프로젝트로 "원더플 개발환경구축 프로젝트"를 만들었다. 이 페이지는 Google Code와 유사한 오픈 프로젝트이다. SVN을 지원해주기 때문에 이 기능을 이용해서 위에서 설명한 라이브러리들을 단 한번의 Checkout으로 개발 환경을 만들 수 있다.

이것을 수행하기 위해 먼저 다음과 같은 툴이 필요하다.



위 과정을 다했으면 기본 개발 환경이 구축된 것이다. 다음으로 SVN에서 라이브러리를 다음과정을 통해 모두 checkout 한다. 

 
  • Flash Builder 4를 실행한후 새로운 워크스페이스를 만든다.
  • 메뉴에서 File>Import를 통해 창이 열리면 SVN>Checkout Projects from SVN을 선택한다.
  • Create a new repository location을 선택후 Next 버튼 누른다.
  • https://dev.naver.com/svn/wonderfl/trunk를 입력한다. 아이디는 네이버 아이디, 비밀번호는 anonsvn이다. 아이디, 비밀번호 모두 anonsvn 이다.
  • 열려있는 모든 프로젝트를 전부 선택한 뒤 Finish 버튼을 누른다. 자동으로 SVN에서 프로젝트에 필요한 라이브러리와 자료를 워크스페이스에 포함시키게 된다. 5~10분 소요됨
위 과정을 모두 완료했다면 Package Explorer에 다음과 같이 라이브러리 프로젝트들이 생성될 것이다.


또한 init_template도 있을 것이다. 이것은 테스트 프로젝트를 자동으로 만들기 위한 파일을 모아둔 것이다. 이중에 init.xml은 ANT구동 파일로서 그 역할을 담당하게 된다.(참고로 이런 방법론은 찬익님과 Hika님의 글에서 아이디어를 얻었다. 두분께 감사한다.)

테스트 프로젝트는 다음과 같은 과정으로 만든다. (복잡해 보일지 모르겠지만 한번 해보면 이보다 쉬운 방법은 없다고 생각할 것이다. ^^)


  • 워크스페이스에 ActionScript 3.0 프로젝트 생성한다.
  • init_template내에 init.xml을 생성한 프로젝트의 root에 복사한다.
  • init.xml을 열어 "프로젝트 이름을 넣는다" 안에 프로젝트 명을 넣는다.
  • Ant View에 init.xml을 드래그 해서 붙인다. 3번 항목에 붙인 프로젝트 이름이 ANT View에 표시될 것이다. 
    만약 Ant View가 없다면 Windows>Show View>Other를 선택해 ANT를 찾아 선택하여 열어준다.
    만약 ANT가 없다면 Flash Builder에 ANT 플러그인이 설치되지 않은 것이므로 먼저 플러그인부터 설치해야한다. 참고 : http://blog.flashplatform.kr/213
  • Ant View에 붙은 해당 프로젝트 이름 옆에 (+) 버튼을 눌러 init가 나오면 두번 클릭해 실행한다. 
    이때 Console창에 마지막에 BUILD SUCCESSFUL이 나오면 ANT 실행을 성공한 것이다.
  • 생성한 프로젝트를 선택한 다음 F5를 눌러 새로고침한다.  
    다음과 같은 변화가 일어난다. 
    - Main.as가 만들어지고 기본 Application으로 등록된다.
    - libs 폴더에 SWC 파일들이 복사된다.
    - remote 폴더가 생긴다. 이 폴더는 외부자원를 로드하는 예제를 작성할때 외부자원을 이곳에 놓고 쓰면 되겠다.
    - HTML Wrapper 폴더가 삭제된다. 
    - Wonderfl에서 사용하는 기본 라이브러리가 자동으로 등록된다. 


아래 화면은 위 과정을 통해 구축된 애플리케이션의 Package Explorer 화면이다. 이제부터 default package에 필요한 수만큼 Wonderfl에서 가져온 actionscript 코드를 테스트 할 수 있게 되었다.


더불어, 위 과정을 통해 개인적으로 만든 테스트 프로젝트들 모음을 아래 링크를 통해 볼 수 있다.
http://dev.naver.com/scm/viewvc.php/branches/jidolstar/?root=wonderfl

SVN의 https://dev.naver.com/svn/wonderfl/branches/jidolstar 경로로 부터 직접 받아볼 수 있으니 참고 바란다.




정리하며
개인적으로 Wonderfl은 필자에게 매우 도움이 되는 사이트이다. 한국의 Flash 개발자들도 Wonderfl을 적극적으로 활용했으면 하는 바램을 가지는 마음에서 이 문서를 작성했다. 아무쪼록 도움이 되었길 바란다. 


참고사이트



글쓴이 : 지돌스타(http://blog.jidolstar.com/669)
2009년 봄, 일본에서 ActionScript 개발자들간에 재미있는 실험이 있었다. 그것은 "Flash속도를 극대화하기" 실험중 하나로 수만개의 입자를 가지고 가상의 유체 시뮬레이션을 보여주는 예제를 만드는 것이였다.

수만개의 입자를 이용한 유체 시뮬레이션 실행


위 화면은 최초실험대상이 된 1만개 입자 유체 시뮬레이션 코드의 실행화면이다.

아래 소스는 위에서 소개된 소스를 10만개 입자로 수정하고 최대 frameRate를 110으로 조정한 것이다. 또한 마우스 클릭으로 초기화 하는 대신 500ms단위로 유체의 이동패턴과 전체색이 조금씩 변하도록 수정했다.

package {
	import flash.display.*;
	import flash.events.*;
	import flash.geom.*;
	import flash.utils.*;
	
	import net.hires.debug.Stats;
	
	[SWF(width="465", height="465", backgroundColor="0x000000", frameRate="110")];
	/**
	 * BitmapData를 이용한 파티클 렌더링 속도 테스트 
	 * @see http://clockmaker.jp/blog/2009/04/particle/
	 */ 
	public class bitmap_liquid100000 extends Sprite {
		
		private const nums:uint=100000;
		private var bmpDat:BitmapData;
		private var vectorDat:BitmapData;
		private var randomSeed:uint;
		private var bmp:Bitmap;
		private var vectorList:Array;
		private var rect:Rectangle;
		private var cTra:ColorTransform;
		private var vR:Number;
		private var vG:Number;		
		private var timer:Timer;
		
		public function bitmap_liquid100000() {
			initialize();
		}
		
		private function initialize():void {
			//stage 관련의 설정
			stage.align=StageAlign.TOP_LEFT;
			stage.scaleMode=StageScaleMode.NO_SCALE;
			stage.frameRate=110;
			
			//파티클이 렌더링 되는 메인 Bitmap. 
			bmpDat=new BitmapData(465, 465, false, 0x000000);
			bmp=new Bitmap(bmpDat);
			addChild(bmp);
			
			//파티클의 가속도를 계산하기 위한 도움 BitmapData로서 perlinNoise가 적용된다. 
			vectorDat=new BitmapData(465, 465, false, 0x000000);
			randomSeed=Math.floor(Math.random() * 0xFFFF);
			vectorDat.perlinNoise(230, 230, 4, randomSeed, false, true, 1 | 2 | 0 | 0);
			//addChild(new Bitmap(vectorDat)); //만약 이 perlinNoise가 적용된 Bitmap을 보고 싶다면 주석을 풀자 
			
			//화면크기 
			rect=new Rectangle(0, 0, 465, 465);
			
			//파티클 궤적을 그리기 위함 
			cTra=new ColorTransform(.8, .8, .9, 1.0);
			vR = 0;
			vG = 0;
			
			//파티클을 넣기 위한 List
			vectorList=new Array();
			for (var i:uint=0; i < nums; i++) {
				//파티클 위치
				var px:Number=Math.random() * 465;
				var py:Number=Math.random() * 465;
				var pv:Point=new Point(px, py);
				//파티클 가속도
				var av:Point=new Point(0, 0);
				//파티클 속도 
				var vv:Point=new Point(0, 0);
				//파티클 위치,가속도,속도 정보를 List에 저장 
				var hoge:VectorDat=new VectorDat(av, vv, pv);
				vectorList.push(hoge);
			}
			
			//지속적인 파티클 렌더링을 위한 loop 함수 호출 
			addEventListener(Event.ENTER_FRAME, loop);
			
			//500ms마다 
			timer = new Timer(500, 0);
			timer.addEventListener(TimerEvent.TIMER, resetFunc);
			timer.start();
			
			//통계 
			addChild(new Stats);
		}
		
		private function loop(e:Event):void {
			//렌더링용 BitmapData를 colorTransform로 어둡게 하여 기존에 그려진 파티클의 궤적을 보이도록 함 
			bmpDat.colorTransform(rect, cTra);
			
			//파티클의 위치를 재계산하여 렌더링한다.
			var list:Array=vectorList;
			var len:uint=list.length;
			for (var i:uint=0; i < len; i++) {
				var dots:VectorDat=list[i];
				var col:Number=vectorDat.getPixel(dots.pv.x, dots.pv.y);
				var r:uint=col >> 16 & 0xff;
				var g:uint=col >> 8 & 0xff;
				dots.av.x+=(r - 128) * .0005; //적색을 x축 가속도로 사용
				dots.av.y+=(g - 128) * .0005; //녹색을 y축 가속도로 사용
				dots.vv.x+=dots.av.x;
				dots.vv.y+=dots.av.y;
				dots.pv.x+=dots.vv.x;
				dots.pv.y+=dots.vv.y;
				
				var _posX:Number=dots.pv.x;
				var _posY:Number=dots.pv.y;
				
				dots.av.x*=.96;
				dots.av.y*=.96;
				dots.vv.x*=.92;
				dots.vv.y*=.92;
				
				//stage 밖으로 이동했을 경우 처리. 3항 연산자 처리함 
				(_posX > 465) ? dots.pv.x=0 : (_posX < 0) ? dots.pv.x=465 : 0;
				(_posY > 465) ? dots.pv.y=0 : (_posY < 0) ? dots.pv.y=465 : 0;
				
				//1*1 pixel을 bitmapData에 렌더링 
				bmpDat.fillRect(new Rectangle(dots.pv.x, dots.pv.y, 1, 1), 0xFFFFFF);
			}
		}
		
		private var seed:Number = Math.floor( Math.random() * 0xFFFF );
		private var offset:Array = [new Point(), new Point()];
		private function resetFunc(e:Event) :void{
			//파티클의 가속도를 계산하기 위한 도움 BitmapData로서 perlinNoise를 변경 
			vectorDat.perlinNoise( 230, 230, 3, seed, false, true, 1|2|0|0, false, offset );
			offset[0].x += 20;
			offset[1].y += 20;
			
			//파티클 궤적을 표시하기 위한 부분을 변경  (조금씩 색변동이 일어난다)
			var dots:VectorDat = vectorList[0];
			vR += .001 * (dots.pv.x-232)/465;
			vG += .001 * (dots.pv.y-232)/465;
			( vR > .01 ) ? vR = .01:
				( vR < -.01 ) ? vR = -.01:0;
			( vG > .01 ) ? vG = .01:
				( vG < -.01 ) ? vG = -.01:0;
			
			cTra.redMultiplier += vR;
			cTra.blueMultiplier += vG;
			( cTra.redMultiplier > .9 ) ? cTra.redMultiplier = .9:
				( cTra.redMultiplier < .5 ) ? cTra.redMultiplier = .5:cTra.redMultiplier;
			( cTra.blueMultiplier > .9 ) ? cTra.blueMultiplier = .9:
				( cTra.blueMultiplier < .5 ) ? cTra.blueMultiplier = .5:cTra.blueMultiplier;         
		}
	}
}

import flash.geom.Point;

class VectorDat {
	public var vv:Point;
	public var av:Point;
	public var pv:Point;
	
	function VectorDat(_av:Point, _vv:Point, _pv:Point) {
		vv=_vv;
		av=_av;
		pv=_pv;
	}
}

처음 이 소스를 본다면 뭔가 굉장히 복잡할 것이라고 생각할지 모른다. 지금껏 이런 것을 구현하기 위해 ActionScript 3.0의 DisplayObject객체 기반으로 입자를 구현하는 것을 먼저 생각한 분이라면 위 소스가 더 어렵게 느껴질 것이다. 참고로 만약 10만개의 입자를 전부 DisplayObject 객체로 구현하면 Flash Player는 제대로 작동도 못하고 중지될 것이다. DisplayObject와 그것을 확장한 화면 표시 객체는 다소 무겁다. Flash Player가 이런 무거운 객체를 10만개나 frameRate가 24 수준으로 그리는 것은 일반 보급 컴퓨터에서는 불가능하다.

위 소스를 잘보면 알겠지만 입자를 표현하기 위해 BitmapData(bmpDat변수 참고)를 이용한다. BitmapData 하나에 모든 입자 정보가 표현되도록 하는 것이 첫번째 아이디어이다. 이렇게 함으로써 10만개 입자 렌더링이 가능해진다.

처음 실행하면 무작위로 지정된 위치에 입자들이 배치되었다가 무작위 궤적을 따라 이동하는 것을 볼 수 있다. 이러한 이동이 뭔가 엄청나게 고난이도 물리엔진  알고리즘이 들어간 것 같지만 실상은 전혀 아니다. 입자의 위치를 이용해 가속도와 속도를 계산하는데 사용된 것은 다름 아닌 BitmapData(vectorDat변수 참고)이다. 이 BitmapData는 실제화면에는 눈에 보이지 않는다.  대신 가속도와 속도를 계산하기 위해 BitmapData에 PerlinNoise를 주어 입자의 위치정보에 해당하는 색정보를 얻어 색의 RGB값중 R값은 x축 가속도값으로 G값은 y축 가속도 값으로 참조하도록 구현되어 있다. PerlinNoise가 적용된 BitmapData는 아래와 같다. 실제로 이 화면을 보고 싶다면 위 코드의  "//addChild(new Bitmap(vectorDat))" 부분을 찾아 주석처리를 삭제하고 실행해 보면 된다.  

필자는 개인적으로 PerlinNoise 대신이 뭔가 물리학적 정보가 들어간다면 훨씬더 실용성 있는 재미난 교육용 자재로 만들 수 있지 않을까 생각했다.

입자의 가속도 계산을 위한 PerlinNoise가 적용된 BitmapData의 모습. 500ms단위로 계속 변한다.


BitmapData에 입자들의 위치를 갱신하는 것까지는 알겠는데... 입자들이 특정한 궤적을 남기도록 하는 효과는 도데체 어떻게 하는 것일가? 따로 궤적을 다루는 Array나 List가 있는 것일까? 아니다. ColorTransform 클래스에 비밀이 숨겨져 있다. loop() 함수를 보면 bmpDat.colorTransform(rect, cTra); 부분이 있다 .rect은 colorTransform을 적용할 범위이고 cTra가 적용할 ColorTransform객체이다. 이 객체에는 cTra.redMultiplier, cTra.greenMultiplier, cTra.blueMultiplier 속성등이 있다. 이 값은 기존 BitmapData에 RGB값을 해당값을 정해진 값으로 곱해주는 역할을 하는데 가령 cTra.redMultiplier가 0.8이면 loop를 돌때마가 Red값이 0.8배로 감소하게 된다. 결국 입자의 흰색(0xffffff)로 BitmapData에 찍히면 cTra.redMultiplier에 의해 계속 어두워지다가 결국 검은색이 된다. 이러한 원리로 궤적이 남게 되는거다.

하지만 위 코드는 문제가 있다. 실제로 실행해보면 필자의 컴퓨터에서는 frameRate가 10도 안나왔다. 최대치 110을 주었음에도 이 정도 밖에 안나왔다는 것에 대해 개발자로서 계산 및 렌더링 최적화에 관심을 자연스럽게 가지게 된다.

일본 개발자들은 Wonderfl의 "Fork"기능을 이용해 서로 소스를 공유하며 위 코드의 문제를 계속 개선해 나갔다. 

아래 압축파일은 필자가 여러 단계를 거쳐서 실험했던 코드를 압축한 것이다.



개선사항 1. BitmapData의 lock()과 unlock() 함수 추가 (bitmap_liquid100000_01.as)
BitmapData가 Bitmap을 통해 화면에 이미 렌더링 자원으로 활용되고 있다면 BitmapData가 수정될 때 마다 Bitmap에도 갱신한다.(즉, addChild(new Bitmap(bitmapData))일때를 의미한다.)  구체적으로 설명하자면 입자가 10만개 이므로 입자의 위치가 바뀔때마다 10만번의 BitmapData를 수정하면 그때마다 Bitmap에도 영향을 준다. 만약 BitmapData을 수정하고 난 다음에 마지막에 Bitmap에 적용될 수 있도록 하면 속도개선에 도움을 줄 것이다. 이것을 가능하게 하는 함수가 BitmapData의 lock(), unlock()함수이다. 위 코드에서 loop()함수에 맨처음과 맨끝부분에 각각 bmpDat.lock(), bmpDat.unlock()을 추가하자. 이 작업으로 전체적으로 2~3 frameRate 개선을 볼 수 있었다. frameRate가 이 실험에서는 크게 개선되지 않았지만 만약 BitmapData에 이보다 더욱 복잡한 수정이 있거나 더 크기가 크면 클수록 그 차이가 더 할 것이다.
private function loop(e:Event):void {
	bmpDat.lock();
	(생략)
	bmpDat.unlock();
}



개선사항 2. fillRect을 setPixel로 변경 (bitmap_liquid100000_02.as)
위 코드에서 가장 잘못된 부분중에 하나가 1px짜리 입자를 렌더링하기 위해 fillRect()을 이용했다는 것이다. 이 함수 대신 setPixel()로 수정한다. 이 작업으로 25~30 frameRate 개선을 했다. 여기까지만 하더라도 상당한 진전이다.

개선사항 3. point 대신 number로 (bitmap_liquid100000_03.as)
위 코드에서 비효율적인 코드부분이 있다. 바로 입자의 정보를 담은 VectorDat부분이다.

import flash.geom.Point;

class VectorDat {
	public var vv:Point; //속도
	public var av:Point; //가속도
	public var pv:Point; //위치 
	
	function VectorDat(_av:Point, _vv:Point, _pv:Point) {
		vv=_vv;
		av=_av;
		pv=_pv;
	}
}

위 클래스는 입자의 위치,속도,가속도 정보를 Point를 이용해 만들었다. 이렇게 하게 되면 10만개나 되는 입자의 위치를 vectorDat.pv.x, vectorDat.pv.y 형태로 접근해야 한다. 이것 대신 vectorDat.px, vectorDat.py로 하면 훨씬 빠른 접근이 가능해질 것이다. 반복되는 로직에 깊은 DOM을 접근을 사용하면 그만큼 느려진다는 것을 항상 염두할 필요가 있다. 다음 코드는 위 클래스를 개선한 것인다.

class VectorDat {
	public var vx:Number = 0; //x축 속도
	public var vy:Number = 0; //y축 속도
	public var ax:Number = 0; //x축 가속도
	public var ay:Number = 0; //y축 가속도
	public var px:Number; //x축 위치 
	public var py:Number; //y축 위치 
	
	function VectorDat( px:Number, py:Number ) {
		this.px = px;
		this.py = py;
	}
}

위 클래스에 맞게 전체 소스를 수정한 뒤 실행하면 frameRate가 10이상 개선되는 것을 확인할 수 있었다. 꽤 큰 진전이다.


개선사항 4. 가속도 계산을 위한 bitmapData 크기 조정 (bitmap_liquid100000_06.as)

BitmapData의 getPixel은 BitmapData의 크기가 크면 클수록 그 효율이 떨어진다. 위 코드에서 입자의 가속도를 계산하기 위해 perlinNoise를 적용한 BitmapData(vectorDat)는 렌더링하기 위한 BitmapData(bmpDat)와 크기가 동일하다. 이 크기를 465x465 대신 28x28로 줄이고 loop()함수내에 col=vectorDat.getPixel(dots.px, dots.py)대신 col=vectorDat.getPixel(dots.px>>4, dots.py>>4)로 수정해서 테스트하면 frameRate가 위 개선사항을 모두 적용한 것보다 약 10이상 증가한다. 



지금까지 개선사항 4가지를 통해 최초 코드의 frameRate를 12에서 60~70까지 끌어올릴 수 있었다. 아래는 실행화면이다.

실행 화면


결과 보러 가기 : http://wonderfl.net/code/2e15897ec742a2e2c09255bcba35c2b20a026356


다른 실험들...

필자는 VectorDat를 담는 List의 형태를 Array에서 Vector로 바꿔서 실험을 해봤다. 이 부분에 있어서는 거의 frameRate변화가 없었다. (bitmap_liquid100000_04.as참고)

또한 List형태를 Linked List로 바꿔봤는데.. 오히려 frameRate가 감소했다.  (bitmap_liquid100000_05.as참고)

마지막으로 BitmapData의 setPixel()보다 setVector()가 더 빠르다기에 그것으로 실험해 보았다. 하지만 이 방법은 위 실험에 쓰기에 적합하지 않았다. 왜냐하면 단순히 setPixel()과 setVector()만 놓고 보았을때 setVector()가 더 빠르지만 setVector()를 사용하기 위해서는 getVector()와  같은 부가적인 코드가 더 들어가게 되었고 그 코드들로 인해 오히려 frameRate가 더 줄어들었다. 그러므로 뭔가 도입할때는 그 상황에 맞게 도입해야한다. (bitmap_liquid100000_07.as참고)


추가사항 



웹눈님께서 이글을 보고 위 프로그램을 만들었는데 mouseX, mouseY 엑세스 비용문제를 해결하지 못해 속도 저하가 일어났었다.

while(pt.next) {
   var dx:Number = pt.x - mouseX;
   var dy:Number = pt.y - mouseY;
   (중간생략)
   pt = pt.next;
}


위처럼 만드셨는데...이렇게 하면 입자(파티클)이 10만개면 10번 mouseX, mouseY를 참조하게 된다. 이 속성을 엑세스 하는 것은 꽤 비싼 자원이 소비되므로 아래처럼 하면 속도개선 된다.

var mx:Number, my:Number;
mx = mouseX;
my = mouseY;
while(pt.next) {
   var dx:Number = pt.x - mx;
   var dy:Number = pt.y - my;
   (중간생략)
   pt = pt.next;
}


테스트 결과, 저렇게 바꾸는 것만으로 FPS(frame per seconds)가 무려 40에서 90까지 개선되었다.
별거 없는데도 엄청난 속도 개선이다! 


정리하며

일본에서 진행된 이 입자 유체 시뮬레이션 실험은 꽤 인기를 얻었으며 Wonderfl 사이트의 favorite와 fork기능을 통해 계속 퍼져나갔다. 필자도 예전부터 봐왔던 실험이였으나 BitmapData 활용을  이미지 에디터 정도의 프로젝트 외에는 거의 사용을 하지 않아서 깊숙히 파고들지 않았다. 

이런 단순한 실험이 일본의 여러 Flash 개발자들 사이에 인기를 끌고 함께 코드를 수정하는 모습을 보면서 그들의 개발분위기가 무척 부러웠다. 한국에도 이런 분위기가 정착되길 바란다. 

필자는 지금도 Wonderfl을 하루에도 수십번 방문한다.


참고글
Wonderfl - build Flash online
빠른 flash 연구회를 wonderfl에서
Flash 10, Massive amounts of 3D particles with Alchemy (source included).
Massive amounts of 3D particles without Alchemy and PixelBender
Flash 10, Massive amounts of 3D Particles (with haXe)
Using BitmapData.setVector for better performance


글쓴이 : 지돌스타(http://blog.jidolstar.com/670
 


Flash 애플리케이션을 제작할때 항상 고민되는 것은 메모리와 속도일 것이다. 이 문서는 이러한 고민을 했던 분들을 위해 본인의 경험을 반영하여 작성한 것이다. 주의할 것은 이 문서에서 다루는 Object Pool은 메모리, 속도 개선을 위한 하나의 방법일 뿐이지 전부는 아니다라는 것이다. Object Pool이 어떻게 당신의 애플리케이션의 속도와 메모리를 개선시켜줄 것인가 전달하는 것이 문서의 목표이다.

목차

  1. 객체 관리에 대한 질문!
  2. new 연산자는 비싸다!
  3. Object Pool이란?
  4. Object Pool을 도입할 때 고려사항
  5. Object Pool을 사용해보자.
  6. Object Pool과 new 연산자 사용 비교
  7. 메모리 사용의 폭이 급격한 애플리케이션은 좋지 못하다.
  8. 재사용할 수 있는 클래스 제작
  9. 정리하며
  10. 참고글



1. 객체 관리에 대한 질문!
제작된 애플리케이션에 필요한 최소한의 메모리에 대해서 생각해 본적이 있는가? 하나의 애플리케이션에 들어가는 최소 자원(resource)은 얼마나 될까? 그 자원은 얼마나 자주 사용하고 버리는 것일까?

슈팅 게임을 보면 동일한 적군전투기가 많이 나온다. 그 중에 적군전투기1이 있다고 하자. 적군전투기1이 한 화면에 5개가 나왔다. 아군전투기에 의해 죽든 화면에서 사라지든 어쨌든지 언젠간 화면에서 사라지고 쓸모없게 된다. 좀 있다가 또 적군전투기1이 3개가 나온다. 또 반복해서 사라진다. 당신이 이 슈팅 게임을 만든다면 적군전투기1 관리를 어떻게 할 것인가? 즉, 화면에 나타날때 new로 생성하고 사라지면 delete로 메모리에게 해지요청할 것인가? 아니면 어느 특정 영역에 화면에 나타날 전투기1을 미리 5개에서 10개 생성해놓고 필요할 때마다 재사용할 것인가?

2. new 연산자는 비싸다!
new는 클래스를 통해 객체를 생성하는 연산자이다. 이는 비교적 비용이 비싼편이다. 비용이 비싸다는 말을 구체적으로 설명하자면 new를 통해 객체를 생성하여 메모리에 올리고 다 사용했다고 판단될때 delete이나 null등을 이용해 객체참조를 제거하여 가비지 컬렉터에 맡기게 되며 결과적으로 가비지 컬렉터는 이 객체를 어느 특정시점에 제거하는 일련의 객체 생성과 삭제까지 동작이 꽤 복잡하여 메모리, CPU연산등의 자원소비가 크다라는 것을 의미한다. 특히나 클래스의 크기가 크고 복잡하다면 그 비용은 더욱 갑절로 들게 된다. new 연산 사용은 이처럼 비싼 비용을 지불해야 하기 때문에 할 수 있다면 최소한으로 사용하도록 하는 것이 속도와 메모리 관리에 도움을 준다.

앞서 설명한 슈팅 게임을 보자면 적군전투기1은 수시로 보였다가 안보였다가 한다. 이 경우 new, delete를 반복한다면 경우에 따라서 엄청난(?) 비싼 비용을 지불하게 된다.

다른 예를 들어보겠다. 본인은 얼마전에 스타플(http://starpl.com)이라는 사이트에서 제공하는 타임라인 애플리케이션을 Flash로 개발했다. 타임라인은 사용자의 기록, 앨범등을 시간순으로 보여주게 되며 좌우측으로 이동해서 내 인생의 기록을 보는듯한 느낌을 주도록 만들었다. 이때 화면에 보여지는 사용자의 기록들이 수시로 보여졌다가 사라진다. 이때 사용된 기록을 보여주는 시각객체(DisplayObject)를 new와 delete를 반복해서 생성 및 삭제한다면 너무 비싼 비용을 들이는 것과 같다.

스타플의 타임라인

참고글 : 스타플 타임라인 업그레이드 및 앨범 기능 추가 소식

앞의 2가지 예에서 언급했듯이 자주 보여지고 사라지는 객체를 필요할 때마다 new연산자를 사용하는 것보다는 어느 특정 영역에 미리 생성해놓고 재사용을 반복하는 구조를 도입한다면 메모리와 CPU연산에 있어서 큰 비용절감을 기대할 수 있게 된다.

3. Object Pool이란?
Object Pool(객체 풀)은 객체를 미리 만들어놓고 담아놓는 메모리 영역이다. 개발자는 이 Object Pool에 미리 만들어진 객체를 사용하고 다 사용한 뒤에는 다시 반환시킴으로서 재사용(또는 대여)을 하도록 한다. Object Pool을 사용하면 처음 객체를 생성할때와 더 필요한 객체가 있는 경우를 제외하고 new 연산을 최소화 할 수 있다.

4. Object Pool을 도입할 때 고려사항
Object Pool은 미리 객체를 생성하고 지속적으로 재사용하기 위해 사용한다. 이때 미리 객체를 생성한다는 것은 초반 애플리케이션 동작 퍼포먼스에 영향을 미칠 수 있다.

Object Pool을 사용했을때 다음과 같은 장점을 얻을 수 있다.

1. new 연산자를 자주 사용해야하는 경우에 도입하면 애플리케이션 속도 향상을 기대할 수 있다.
2. 가비지 컬렉터에 의존하지 않는 메모리 관리를 꾀할 수 있다.

하지만 일반적으로 10개가 필요한데 미리 100개를 만들어 항상 10% 미만 정도의 재사용률을 보인다면 그것은 메모리 낭비이다. 그러므로 다음과 같은 조건에서 Object Pool을 사용하고 관리하는 것이 좋겠다.

1. 비교적 큰 용량의 객체를 자주 사용되거나 반환해야하는 경우에 사용한다.
2. 미리 생성할 객체를 적당하게 정하도록 한다.

반대로 위 경우가 아니라면 쓸데없이 Object Pool을 사용하지 말자.


5. Object Pool을 사용해보자.

폴리고널 lab에서 간단한 Object Pool을 공개했다. 아래 링크에서 다운로드 받을 수 있다.

Download: ObjectPool_v1.1.zip

사용 방법은 매우 간단하다. ObjectPool 클래스는 아래 코드처럼 특정 클래스를 할당(allocate)하면 된다.

var isDynamic:Boolean = true;

var size:int = 100;

var pool:ObjectPool = new ObjectPool(isDynamic);

pool.allocate(MyClass, size);


isDynamic 플래그는 Object Pool내의 객체가 비어있는가 체크하기 위해 사용한다. 즉, true이면 Pool은 자동적으로 정해진 크기(size)를 넘어서더라도 Pool의 크기를 확장하여 새로운 객체를 줄 수 있으나 false이면 정해진 크기만큼 객체를 이미 준 경우에는 Pool이 비게 되므로 Error를 발생시킨다. 

크기(size)를 100으로 지정했기 때문에 미리 Object Pool에 100개의 MyClass의 객체를 생성해 두도록 한다.

이제부터 MyClass는 아래와 같은 방식으로 사용하면 되겠다.

myObjectArray[i] = new MyClass();

// 코드 대신 아래를 사용한다.

myObjectArray[i] = pool.instance;


다 사용한 MyClass객체는 Object Pool에 반환해줘야 한다. 이때 가비지 컬렉터의 기능을 이용하는게 아니라 재사용(recycle)을 위해서 다음과 같이 코딩하면 되겠다.

pool.instance = myObjectArray[i];

사용방법은 이게 전부다.

원한다면 자신의 애플리케이션에 맞게 이 공개된 ObjectPool을 개선시킬 수 있다. 가령, 100개의 Pool을 만들어놓지만 처음부터 100개를 생성해놓지는 않겠고 필요할 때마다 생성해주는 구조인 게으른(lazy) 생성을 기대할 수 있을 것이다. 또는 DisplayObject의 경우라면 사용한다는 것을 DisplayObject.parent 속성으로 판단할 수 있다. 위 처럼 pool.instance = '다 사용한 객체'와 같은 형태로 반환하는 것보다 자신의 부모가 존재하지 않는다면 재사용할 객체로 판단하도록 만들면 일종의 자동 Object Pool을 만들 수 있다. 자동 Object Pool은 다음 링크를 참고하면 좋겠다.

자동 풀링(auto pooling)을 구현해보자.



6. Object Pool과 new 연산자 사용 비교

Object Pool을 사용해야하는 타당성은 퍼포먼스 실험을 통해 쉽게 알 수 있다.  이러한 점에서 폴리고널 랩에서 제공하는 실험은 매우 유용한 자료이다.

실험 방법은 아래와 같다. (폴리고널 랩에서는 이 실험을 Window Vista, Flash Player 9.0.124에서 진행했다.) 그리고 Pool크기는 100으로 지정했다.

첫번째로 아래 코드처럼 k수 만큼 Object Pool로 부터 객체를 get만 한다.

for (var i:int = 0; i < k; i++) instances[i] = p.instance;


두번째로 아래 코드처럼 k수 만큼 Object Pool로부터 객체를 get/set 한다.

for (i = 0; i < k; i++) instances[i] = p.instance;

for (i = 0; i < k; i++) p.instance = instances[i];


세번째로 아래 코드처럼 k수 만큼 Object Pool대신 new 연산자를 사용한다.

for (i = 0; i < k; i++) instances[i] = new MyClass();



결과는 다음과 같다.


네이티브 Object 클래스의 경우 Object Pool을 사용하는 것이 new 연산자를 사용한 것보다 5배 정도 빨랐다.


Object 보다 더 크고 복잡한 flash.geom.Point의 경우는 약간더 빠른 결과를 보인다.


 flash.display.Sprite 객체를 가지고 하면 무려 80배나 속도 개선이 되었다. 이는 복잡하고 큰 클래스에 Object Pool을 도입하면 효과적일 수 있다고 판단할 수 있다.

이 실험을 통해 적절한 방법으로 Object Pool을 사용하는 것은 애플리케이션의 퍼포먼스 증가에 지대한 영향을 줄 수 있다는 것을 깨달을 수 있다.


7. 메모리 사용의 폭이 급격한 애플리케이션은 좋지 못하다.
본인은 어떤 애플리케이션(Flash가 아니더라도)이든지 그 애플리케이션에 필요한 최소한의 메모리는 항상 존재한다고 생각한다. 무조건 메모리 사용을 줄여보겠다고 new, delete를 반복하는 것은 잘못된 것이다. new, delete를 반복하면 오히려 CPU 및 메모리 사용의 반복을 부축이며 애플리케이션의 전체적인 퍼포먼스를 저하시키는 경우가 발생할 수 있다. 실제로 new,delete를 반복하는 구조로 개발한 애플리케이션을 Flash Builder의 프로파일링 기능을 통해 메모리 사용을 살펴보면 큰폭으로 메모리 사용/해지가 일어난다는 것을 확인할 수 있다. 그러므로 몇몇 사람들이 Object Pool과 같은 개념과 같이 퍼포먼스 향상에 도움이 되는 개념을 전혀 사용하지 않고 Flash는 느리고 가비지 컬렉터 동작은 비정상적이다라고 말하는 것은 섣부른 판단이다라고 생각한다. 얼마든지 메모리를 효율적으로 사용하고 속도 개선을 할 수 있음에도 불구하고 잘못된 개발 방식때문에 전체적인 퍼포먼스가 나빠지는 것은 결국 개발자의 잘못인 것이다. 이는 Flash든 어떤 언어든 동일한 생각으로 접근해야 한다.

Flash Builder의 프로파일링 기능을 이용해 Object Pool과 new 연산자간의 메모리 변화를 확인할 수 있는 간단한 실험을 해보겠다. (프로파일링 기능을 사용하는 방법은 주제에서 벗어나므로 제외하겠다.)

먼저 Shape객체를 확장해서 크기와 색이 렌덤하게 그려지는 클래스를 만든다.

//화면에 출력할 Shape

class RandomShape extends Shape {

        static private var colorPool:Array = [0xff0000,0x00ffff,0x0000ff,0x00ff00,0x0f0f0f,0xf0f0f0,0xffff00,0xf00cf0,0x00fcaa,0xff0c9a];

        public function RandomShape():void {

        }

        public function draw():void {

               var radius:Number = Math.random() * 40;

               var color:uint = colorPool[ Math.floor(Math.random()*9) ];

               graphics.clear();

               graphics.beginFill(color,1.0);

               graphics.drawCircle( 0, 0, radius );

               graphics.endFill();

        }

}


위 클래스를 가지고 자동 Pool을 구현한 클래스를 만든다.(참고 : http://www.diebuster.com/?p=1000)

//Shape 자동 객체 Pool

class RandomShapeAutoPool {

        private var _pool:Vector.<RandomShape>;

        public function RandomShapeAutoPool() {

               //적당히 수로 초기화한다.

               _pool=new Vector.<RandomShape>();

        }

 

        public function getShape():RandomShape {

               var key:*, result:RandomShape;

               //먼저 기존의 pool에서 찾아본다.

               for (key in _pool) {

                       //만약 해당 객체가 null이라면 new 통해 생성한다.

                       if (_pool[key] === null) {

                              _pool[key]=new RandomShape;

                              result=_pool[key];

                              break;

                       //null 아니라면 parent 조사하여 사용가능한지 판단한다.

                       } else if (_pool[key].parent === null) {

                              result=_pool[key];

                              break;

                       }

               }

               //기존의 pool안에서 쓸만한 찾지 못했다면

               if (result === null) {

                       result=new RandomShape;

                       _pool[_pool.length]=result;

               }

               //인스턴스를 반환한다.

               return result;

        }

}


이제 테스트할 수 있는 호스트코드를 제작해보겠다.

package {

        import flash.display.*;

        import flash.events.*;

        import flash.text.*;

        import flash.utils.*;

 

        [SWF(backgroundColor="#ffffff", frameRate="60", width="400", height="400")]

        public class ObjectPoolTest extends Sprite {

               private var pool:RandomShapeAutoPool=new RandomShapeAutoPool;

               private var poolFlag:Boolean = false;

               private var textPoolFlag:TextField;

               private var shapeCanvas:Sprite;

 

               public function ObjectPoolTest() {

                       addEventListener(Event.ADDED_TO_STAGE, ADDED_TO_STAGE);

               }

 

               private function ADDED_TO_STAGE($e:Event):void {

                       removeEventListener(Event.ADDED_TO_STAGE, ADDED_TO_STAGE);

                       stage.scaleMode=StageScaleMode.NO_SCALE;

                       stage.align=StageAlign.TOP_LEFT;

                       //rf)http://blog.jidolstar.com/656

                       if (stage.stageWidth === 0 && stage.stageHeight === 0) {

                              stage.addEventListener(Event.ENTER_FRAME, function($e:Event):void {

                                             if (stage.stageWidth > 0 || stage.stageHeight > 0) {

                                                     stage.removeEventListener($e.type, arguments.callee);

                                                     init();

                                             }

                                      });

                       } else {

                              init();

                       }

               }

 

               private function init():void {

                       //shape 부모객체

                       shapeCanvas = new Sprite;

                       addChild( shapeCanvas );

                       //PoolFlag 상태표시

                       textPoolFlag = new TextField();

                       textPoolFlag.text = "poolFlag=" + poolFlag;

                       addChild(textPoolFlag);

                       //마우스 클릭 영역

                       graphics.beginFill(0x000000,0);

                       graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);

                       graphics.endFill();

                       addEventListener(MouseEvent.CLICK, MOUSE_CLICK);

                       //반복동작     

                       addEventListener(Event.ENTER_FRAME, ENTER_FRAME);

               }

 

               private function MOUSE_CLICK($e:MouseEvent):void {

                       //마우스 클릭때마다 poolFlag 상태를 전환

                       poolFlag = !poolFlag;

                       textPoolFlag.text = "poolFlag=" + poolFlag;

               }

              

               private function ENTER_FRAME($e:Event):void {

                       var shape:RandomShape, i:int, numChildren:int;

                       //poolFlag 따라서 new연산자 또는 Object Pool에서 객체 참조

                       shape = poolFlag ? pool.getShape() : new RandomShape;

                       shape.draw();

                       shape.x = Math.random() * stage.stageWidth;

                       shape.y = 0;

                       shapeCanvas.addChild( shape );

                       //계속 아래로 떨어뜨림. 화면에서 벗어나면 removeChild시킴

                       numChildren = shapeCanvas.numChildren;

                       for( i=0; i<numChildren;i++) {

                              shape = shapeCanvas.getChildAt(i) as RandomShape;

                              shape.y += 5;

                              if( shape.y > stage.stageHeight ) {

                                      shapeCanvas.removeChild( shape );

                                      i--;

                                      numChildren--;

                              }

                       }

               }

        }

}


동작은 매우 단순하다. poolFlag가 true이면 제작한 자동 Object Pool을 사용하겠다는 것이고 false이면 new 연산자를 사용해 RandomShape객체를 생성하겠다는 것이다. poolFlag 전환은 마우스 클릭으로 할 수 있다. 그리고 비가 내리는 것처럼 Shape 객체는 위에서 부터 아래로 떨어지며 맨 아래에 닿으면 removeChild 시킨다.

테스트 화면


실행 코드와 결과물은 http://wonderfl.net/code/805dc65d1f7800b7bee5dc3cd72ca21c0a87c2d6 에서도 볼 수 있다.

이제 Flash Builder의 프로파일링 기능을 이용해 메모리 변화 및 객체 생성빈도를 살펴보자.

먼저 new 연산자를 사용했을때 메모리 변화를 보자.

new 연산자로 객체생성시 Memory Usage


new 연산자를 사용해 객체를 생성하고 필요없을때 removeChild를 하게 되면 가비지 컬렉션 처리가 되기 때문에 일정한 시점에 메모리가 해지되는 것을 반복하는 것을 확인할 수 있다.

new 연산자로 객체생성시 Live Object


위 표는 축적된 객체수(Cumulative Instances), 현재 객체수(Instances), 축적된 메모리(Cumulative Memory), 현재 메모리(Memory)를 나타낸다. 변화 무쌍하며 실제로 보여지지 않는 객체도 가비지 컬렉션 처리가 일어날때까지 메모리에 남아 있다. 분명 비효율적으로 보인다.

반대로 Object Pool을 이용했을때 메모리 변화이다.

Object Pool로 객체관리시 Memory Usage

new 연산자를 사용했을때와 비교가 안될 정도로 고요한 느낌이 든다. 거의 일직선의 메모리 사용율을 보인다.

Object Pool로 객체관리시 Live Object


축적되는 객체도 81개를 넘지 않는다. 그만큼 객체 생성과 삭제에 민감하지 않게 되고 가비지 컬렉터 도움을 받지 않고 객체관리가 되는 것을 확인할 수 있다.


8. 재사용할 수 있는 클래스 제작

Object Pool을 사용시 한가지 고려할 사항은 재사용할 수 있는 클래스를 만들어야 한다는 점이다. 왜냐하면 Object Pool은 단순히 재사용을 위한 공간만 제공하는 것이지 재사용을 하기 위한 어떤 기능을 클래스에게 줄 수 없기 때문이다. 그래서 재사용이 가능한 클래스를 설계하는 것은 하나의 기술적 이슈가 될 수 있다. 

재사용할 수 있는 클래스를 어떻게 만드는지 간단한 예를 들어보겠다.

final public class MyData {

        public var type:String;

        public var id:int;

        public var name:String;

}


위 클래스는 데이터를 담는 클래스이다. id, name은 실제 사용하는 데이타 값들이고 이 데이타의 종류는 type으로 구분한다. 이 데이타를 사용하는 인터페이스를 제작해보겠다.

public interface IMyClass {

        function init($data:MyData):void;

        function clear():void;

        function get data():MyData;

}


이 인터페이스는 앞으로 만들 MyClass01, MyClass02... 등을 구현하기 위한 것이다. 초기화 하기 위해 init()함수가 있고 인자로 위에서 제작한 MyData 객체를 받는다. 또한 사용할 필요가 없을때 내부 청소를 위해 clear()함수를 추가했다. 게다가 가지고 있는 data를 참고하기 위해 get data()도 만들었다. 이제 이 인터페이스를 구현한 클래스는 아래처럼 만든다.

final internal class MyClass01 extends Sprite implements IMyClass {

        private var _data:MyData;

        public function MyClass01() {

        }

        public function init($data:Mydata):void {

               _data = $data;

               //구현

        }

        public function clear():void {

               _data = null;

        }

        public function get data():MyData {

               return _data;

        }

}

 

final internal class MyClass02 extends Sprite implements IMyClass {

        private var _data:MyData;

        public function MyClass02() {

        }

        public function init($data:Mydata):void {

               _data = $data;

               //구현

        }

        public function clear():void {

               _data = null;

        }

        public function get data():MyData {

               return _data;

        }

}

 

final internal class MyClass03 extends Sprite implements IMyClass {

        private var _data:MyData;

        public function MyClass03() {

        }

        public function init($data:Mydata):void {

               _data = $data;

               //구현

        }

        public function clear():void {

               _data = null;

        }

        public function get data():MyData {

               return _data;

        }

}



코드가 길어보이지만 3개 클래스 모두 IMyClass를 구현했고 Sprite를 확장했다. 단지 클래스 이름만 다르며 실제 구현부는 알아서 구현하면 된다.

개발자는 MyClass01, MyClass02, MyClass03은 매우 자주 new 연산자로부터 생성되는 클래스로 판단했고 그래서 Object Pool을 도입하겠다고 결정했다고 하자. 그럼 다음과 같이 시도해 볼 수 있다.

import de.polygonal.core.ObjectPool;

import flash.display.DisplayObject;

 

public class MyPool {

        private static var poolList:Object;

       

        static public function init():void {

               poolList = {

                       'type01':new ObjectPool(true),

                       'type02':new ObjectPool(true),

                       'type03':new ObjectPool(true),

               };

               poolList.type01.allocate(20, MyClass01);

               poolList.type02.allocate(10, MyClass02);

               poolList.type03.allocate(100, MyClass03);

        }

       

        static public function getObject($data:MyData):IMyClass {

               if( $data === null ) {

                       throw new Error('인자값은 null이면 안됩니다.');

               }

               try {

                       var object:IMyClass = poolList[$data.type].object;

                       object.init($data);

               } catch {

                       throw new Error('데이타의 type값이 잘못된 값입니다.');

               }

               return object;

        }

       

        static public function returnObject($object:IMyClass):void {

               if( $object === null ) {

                       throw new Error('인자값은 null이면 안됩니다.');

               }

               $object.clear();

               if( DisplayObject($object).parent ) {

                       DisplayObject($object).parent.removeChild( DisplayObject($object) );

               }

               poolList[$object.data.type].object = $object;

        }

}



위에서 제작된 MyPool은 static클래스이며 ObjectPool을 이용해 IMyClass 인터페이스를 구현한 클래스를 init()함수에서 적당하게 할당하는 것을 확인할 수 있다. 또한 getObject()를 통해 인자값 data를 참고하여 참조할 Object Pool을 찾아 IMyClass를 구현한 각각의 클래스의 객체를 받아올 수 있으며 returnObject를 통해 다 사용한 객체를 반환한다.

실제로 실무에서 이런 형태로 개발했고 이는 매우 유용했다. MyPool 클래스를 더 개선해서 더 많은 수 Object Pool을 감당할 수 있도록 확장할 수 있다면 더욱 유용해질 것이라 생각한다.


9. 정리하며

Object Pool 개념은 Flash에만 국한되는 유용한 개념이 아니다. 이런 개념들에 대한 노하우를 계속 쌓아간다면 당신의 애플리케이션은 더욱 좋은 작품으로 탈바꿈할 수 있을 것이다.

Flash Player가 느리고 메모리 관리가 안된다고 생각하지는 말자. Flash Player 태생자체가 그런것을 어찌하겠는가? 제작한 애플리케이션이 느리다면 그것은 결국 개발자가 잘못한 것임을 항상 인지하자. 중요한 것은 여전히 Flash Player는 유용하고 많이 사용되고 있으며 지금도 나날이 발전하여 Cross OS, Cross Browser를 넘어 Cross Device 세계로 뻗어가고 있다는 점이다.


10. 참고글
글쓴이 : 지돌스타(http://blog.jidolstar.com/666)

2009년 한국천문연구원 아마추어 천문학 발전을 위한 위탁과제로 만든 대한민국 인터넷 천문대(http://realsky.org) 입니다.

이 사업은 언제 어디서나 누구나 인터넷을 통해 쉽게 밤하늘을 관측하고 정보를 얻을 수 있는 것을 목표로 최초 제작되었습니다. 2009년 6월 부터 12월까지 프로젝트가 진행되었으며 이를 위해 미국 우주망원경연구소의 디지털하늘탐사(Digitized Sky Survey, DSS) 데이터를 이용해 전천의 밤하늘 이미지를 가공했고 이것을 보여주기 위해 Adobe Flash 기술을 이용했습니다.

이미지의 편집 및 이용권한은 천문노트(http://astronote.org) 에게만 있습니다.

클라이언트 엔진은 ActionScript 3.0이며 일부 Flex 4를 이용해 개발했습니다. 서버측 통신은 ZendAMF를 이용했습니다. 최초 개발한 만큼 아직 부족하나 앞으로 유용하고 다양한 형태로 개발할 계획입니다.

http://realsky.org

글쓴이 : 지돌스타(http://blog.jidolstar.com)
stageWidthstageHeight 속성은 Stage에 정의된 속성으로 관련 디스플레이 객체가 디스플레이 리스트에 추가가 되면서 마지막에 Stage에 추가될 때 발생하는 Event.ADD_TO_STAGE 이벤트 발생 시점부터 stage.stageWidth, stage.stageHeight 형태로 참조할 수 있게 된다. 

이 값은 ActionScript 3.0 프로젝트를 진행할 시에 정해진 Stage의 기본 폭과 높이를 알려주게 된다. 아래 블로그 글을 통해서 이 속성이 어떤 의미를 가지는지 쉽게 파악할 수 있을 것이다.

AS3.0에서 stage.stageWidth 와 stage.width 의 차이

아래 코드처럼 작성한다면 이 값들을 쉽게 참고가 가능하다. SWF 메타데이터로 100,100으로 지정했기 때문에 모든 경우가 100,100으로 나와야 하는 것이 정상이다.
package {
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.text.TextField;

	[SWF(width="100",height="100")]
	public class MainApp extends Sprite {
		public function MainApp() {
			addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
		}

		private function onAddedToStage($e:Event):void {
			var textField:TextField;
			textField = new TextField();
			textField.text = stage.stageWidth + "," + stage.stageHeight;
			addChild( textField );
			
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			
			textField = new TextField();
			textField.text = stage.stageWidth + "," + stage.stageHeight;
			textField.y = 30;
			addChild( textField );
		}
	}
}

Flash Player 에서 직접 실행시키면 모두 100으로 나온다. 하지만 IE8에서는 처음에는 100이지만 다음에는 0이 나왔다. IE외에 다른 브라우져는 정상적으로 100이 나온다. 재미있는 것은 IE8에서 stage.scaleMode를 지정하면서 이 값이 리셋되어 버린다는 것이다. 이게 Mac의 FF3.0에서도 이런 현상이 있다고 한다.

내가 만든 Flash 애플리케이션이 모든 운영체제(Cross OS)의 모든 브라우져(Cross Browser)에서 동작하도록 하기 위해서 다음과 같은 처리가 필요하게 되었다.
package {
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.text.TextField;

	[SWF(width="100",height="100")]
	public class MainApp extends Sprite {
		public function MainApp() {
			addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
		}

		private function onAddedToStage($e:Event):void {
			$e.target.removeEventListener( $e.type, arguments.callee );
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			var count:int = 0;
			if( stage.stageWidth === 0 && stage.stageHeight === 0 ) {
				stage.addEventListener( Event.ENTER_FRAME, function ($e:Event):void {
					if( stage.stageWidth > 0 || stage.stageHeight > 0 ) {
						stage.removeEventListener( $e.type, arguments.callee );
						_init();
					}
					trace( ++count ); //IE8에서 두번 들어왔다.
				});
			} else {
				_init();	
			}			
		}
		
		protected function _init():void {
			var textField:TextField;
			textField = new TextField();
			textField.text = stage.stageWidth + "," + stage.stageHeight;
			addChild( textField );
		}
	}
}


Flex의 경우라면 아마도 이런 처리가 다 되어 있기 때문에 신경쓰지 않고 개발하면 될 것이다. 하지만 ActionScript 3.0으로 개발할 때에는 이런 문제를 간과하면 안될 것 같다.

참고글
Firefox 3 Mac Flash Bug stageWidth and stageHeight are 0
stageWidth is zero in IE
flash.display.Stage 클래스
flash.display.DisplayObject 클래스


글쓴이 : 지돌스타(http://blog.jidolstar.com/656)


Flash 애플리케이션을 만들때  통합개발환경(IDE)인 Flash CS3, CS4 나 Flex Builder, Flash Builder, FDT와 같은 툴을 주로 사용할 것이다. 실무에서는 당연히 이런 툴을 선택할 수 밖에 없다. 그러나 이들은 사실 유료이고 무겁다.

Flash MiniBuilder라는 프로그램은 간단하게 ActionScript 3.0 기반으로 개발할 수 있도록 Adobe AIR로 만들어진 가벼운 개발툴이다. 이것은 Victor Drâmbă라는 사람이 만들었으며 그의 블로그(http://www.victordramba.com)를 가보면 MiniBuilder에 대한 소식을 볼 수 있다.

MiniBuilder는 Flex SDK 3와 Java JRE 설치를 먼저 해야 정상적으로 사용할 수 있으며 사용하는 방법은 다음 동영상에서 잘 나와있다. 약간 복잡해 보이지만 중간에 start.bat를 실행해야하는 번거로움은 AIR 2.0에서는 없어질 것이라 생각한다.
http://www.youtube.com/watch?v=bjEc2eT_rCE&feature=player_embedded


이 프로그램은 Flex SDK에서 제공하는 컴파일러를 이용해서 만들어진 ActionScript 3.0코드를 컴파일하게 된다. 워낙 가볍기 때문에 Flash Builder에서 느껴지는 묵직함은 찾아볼 수 없다. 일반적인 코딩도 별 어려움이 없고 또한 코드힌트기능 및 에러메시지 출력 기능도 있기 때문에 이 또한 유용하다. 아쉬운 점은 디버깅을 할 수 없고 한글 주석도 못단다는 점.

MiniBuilder는 공개소스이다. GPL 라이센스를 가지며 Google Code(http://code.google.com/p/minibuilder/)에서 전반적인 설명과 소스코드를 볼 수 있다. 원한다면 Flex Builder 3나 Flash Builder 4에서 SVN으로 다운로드 받아 직접 소스를 테스트해볼 수도 있다. (본인도 SVN으로 다운받아 해봤다. 자바소스까지 포함되어 있으므로 Eclipse+Flex Builder 3 Plug-in 환경에서 작업할 것을 권한다. MXML 사용 안하고 전부 ActionScript 3.0으로 만들었다.)



MiniBuilder는 AIR뿐 아니라 Flash버전으로도 제작되어 유명한 ActionScript 3.0 코드 공유사이트인 Wonderfl의 에디터로도 활용되었다. 다음 제작자의 글을 보면 그에 대한 소개가 나와있다.
http://www.victordramba.com/?p=71



벌써 이것이 만들어져 소개된지 몇개월 되었는데 이렇게 멋진 공개 프로그램이 한국에 소개된게 딱 하나밖에 못본 것 같아 간단하게 소개해본다.

참고 링크
Victor Drâmbă의 블로그 : http://www.victordramba.com
Flash MiniBuilder Google Code : http://code.google.com/p/minibuilder
설치 및 사용방법 : http://www.youtube.com/watch?v=bjEc2eT_rCE&feature=player_embedded


글쓴이 : 지돌스타(http://blog.jidolstar.com/642)


예전에 wonderfl.net에 대해서 소개한바 있다. 여기서 소개하는 Beautifl.netWonderfl.net에서 올라온 엄선된 아름다운(?) ActionScript/Flex 컨텐츠를 목록화 해서 쉽게 볼 수 있도록 해주는 서비스이다.

Beautifl.net은 적절히 분류(3D, Effect, Physics, Game, Sound등)가 되어 있어 관심있는 영역의 Flash 컨텐츠도 감상할 수 있겠다. PV, Pick, New 순으로 정렬도 되기 때문에 이 또한 유용하다. 또한 좋은 컨텐츠가 있다면 누구든지 추천할 수 있으며 RSS feed로도 구독할 수 있다. 

Flash로 이런 것도 만들 수 있구나를 넘어 실제 코드도 볼 수 있기 때문에 Flash 개발자들의 스킬업을 위해 이보다 좋은 것도 없을 것 같다.

Wonderfl.netBeautifl.net을 통해 멋진 Flash 세계를 감상해보자.

참고로 이 둘 사이트는 모두 일본에서 만들어졌다.

글쓴이 : 지돌스타(http://blog.jidolstar.com/634)

Adobe AIR로 만든 아주아주 간단한 웹브라우져이다. Adobe AIR는 Webkit 엔진을 내장한 HTMLLoader라는 클래스가 있다. Webkit엔진은 사파리, 구글 크롬등에 사용하는 엔진이다. Flex 4에서는 이것을 HTML로 한번 랩핑해서 사용하고 있다. Adobe AIR에서 이 엔진을 사용하면 로드되는 페이지의 DOM에 직접 접근이 가능하며 DOM 이벤트 발생시 ActionScript 3.0 함수를 호출하게끔 하는 형태로도 변경이 가능해진다. 생각보다 활용도가 무궁무진하다. 게다가 AIR 2.0부터는 한글입력 문제가 해결되었다 . 또한 HTML5/CSS3를 지원하기 시작했다.

아래 코드는 AIR 2.0, Flash Builder 4 Beta 2 환경에서 만들었다. 이 환경을 구축하는 방법은 다음과 같이 한다.

  • 만약 Flash Builder를 설치 안했다면 다음 링크를 통해 받는다.
  • AIR 2.0 SDK와 Runtime을 다운로드 받는다.
  • 다운받은 Runtime을 실행해 설치한다.
  • (MS Windows의 경우)SDK는 압축을 풀고 그안에 있는 내용을 Flash builder가 설치된 sdks/4.0.0과 sdks/3.4.1 폴더에 각각 덮어씌운다. 본인의 경우는 C:\Program Files\Adobe\Adobe Flash Builder Plug-in Beta 2\sdks\4.0.0
  • Flash Builder를 실행한다.
  • 메뉴에서 File > New > Flex Project를 선택한다.
  • 프로젝트 이름을 적고 Application Type은 AIR를 선택한다. Finish를 한다.
  • 다음 아래 코드를 메인 코드에 복사해서 덮어씌운다.




  • <?xml version="1.0" encoding="utf-8"?>
    <!--
    	간단한 Adobe AIR 웹브라우져
    	제작 : 지용호 
    -->
    <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
    					   xmlns:s="library://ns.adobe.com/flex/spark" 
    					   xmlns:mx="library://ns.adobe.com/flex/halo"
    					   backgroundFrameRate="0.01"
    					   windowComplete="windowedapplication1_windowCompleteHandler(event)">
    	<fx:Script>
    		<![CDATA[
    			import flash.events.Event;
    			import flash.net.URLRequest;
    			import flash.net.navigateToURL;
    			
    			import mx.events.AIREvent;
    
    			private function windowedapplication1_windowCompleteHandler(event:AIREvent):void {
    				nativeWindow.x = 0;
    				nativeWindow.y = 0;
    				width = 1280;
    				height = 900;
    				//browser.htmlLoader.navigateInSystemBrowser = true;
    			}
    			private function linkClickHandler(o:Object):void {
    				navigateToURL( new URLRequest(o.currentTarget.href), "blank" );
    			}
    			private function browser_locationChangeHandler(event:Event):void {
    				trace( "browser_locationChangeHandler" );
    				tiAddress.text = browser.location;
    				btnBack.enabled = browser.historyPosition==0?false:true;
    				btnNext.enabled= (browser.historyPosition < browser.historyLength-1)?true:false;
    			}
    			private function onGoHandler(event:Event):void {
    				browser.location = tiAddress.text;
    			}
    			private function browser_completeHandler(event:Event):void
    			{
    				trace( "browser_completeHandler" );
    				tiAddress.text = browser.location;
    				var dom:Object = HTML(event.currentTarget).domWindow.document;
    				var links:Object = dom.getElementsByTagName("a");
    				for( var i:Number = 0; i < links.length; i++ ) {
    					if( links[i].target.toLowerCase() == "_blank" || links[i].target.toLowerCase() == "_new" ) {
    						links[i].onclick = linkClickHandler;
    					}
    				}
    			}
    		]]>
    	</fx:Script>
    	<s:VGroup width="100%" height="100%">
    		<s:HGroup verticalAlign="middle" paddingLeft="10" paddingRight="10" paddingTop="5" paddingBottom="5">
    			<s:Button id="btnBack" label="뒤로" click="browser.historyBack()"/>
    			<s:Button id="btnNext" label="앞으로" click="browser.historyForward()"/>
    			<s:Button label="새로고침" click="browser.reload()"/>
    			<s:Label text="주소 : "/>
    			<s:TextInput id="tiAddress" width="400" enter="onGoHandler(event)"/>
    			<s:Button label="가기" click="onGoHandler(event)"/>
    		</s:HGroup>
    		<s:HGroup verticalAlign="middle" paddingLeft="10" paddingRight="10" paddingTop="5" paddingBottom="5">
    			<s:Button label="지돌스타 블로그" click="browser.location='http://blog.jidolstar.com'"/>
    			<s:Button label="위콘 블로그" click="browser.location='http://weconize.com'"/>
    			<s:Button label="천문노트" click="browser.location='http://astronote.org'"/>
    			<s:Button label="Adobe RIA" click="browser.location='http://adoberia.co.kr'"/>
    			<s:Button label="Adobe Labs" click="browser.location='http://labs.adobe.com'"/>
    			<s:Button label="Adobe Development Center" click="browser.location='http://www.adobe.com/devnet/'"/>
    		</s:HGroup>
    		<!-- http://labs.adobe.com/wiki/index.php/Apollo:Articles:Using_HTML_in_Flex-based_Apollo_Applications -->
    		<mx:HTML id="browser" width="100%" height="100%" 
    				 location="http://blog.jidolstar.com"
    				 complete="browser_completeHandler(event)"
    				 locationChange="browser_locationChangeHandler(event)"/>
    	</s:VGroup>
    </s:WindowedApplication>
    
    

    Ajax, ActionScript 3.0, Flex, Flash등을 이용하면 AIR 애플리케이션을 만들 수 있다. Flash를 몰라도 Ajax를 알면 만들 수 있기 때문에 웹개발자들이 데스크탑 영역으로의 개발이 가능해졌다. 실제로 Ajax로 만들어진 애플리케이션도 꽤 된다. Adobe AIR 세계에 많은 개발자가 동참하길 바란다.


    글쓴이 : 지돌스타( http://blog.jidolstar.com/621 )


    Flash, Flex, AIR 개발자들이 한권정도는 꼭 가지고 있을 만한 책이다. 이 책은 콜린 무크의 유명한 책인 Essential ActionScript 3.0을 지금도 업계에서 활발히 일하고 계신 유윤선, 송호철님이 번역한 책이다. ActionScript 3.0에 관한한 거의 바이블 수준이다. 시간될 때마다 쭉 훑어보며 느낀 거지만 ActionScript 3.0에 대한 전반적인 개념을 습득하는데 이만한 책이 없다고 생각된다. 

    Flash, Flex, AIR를 개발할 때 가장 기초가 되는 개념은 ActionScript 3.0이다. ActionScript 3.0에 대한 전반적인 개념 및 지식없이 Flex에 접근하다 보면 결국 한계를 느끼게 될 것이다. 왜냐하면 Flex 프레임워크가 모든 기능을 수행해 줄 수 있도록 만들어진 것은 아니기 때문이다. Flex는 프레임워크로서 가치가 있는 것이지 모든 기능을 Flex에서 찾으면 안된다. 또한 Flash로 개발할 때도 마찬가지 인데 타임라인만 의지하다가 뭔가 고급기술을 다뤄야할 필요가 있을때 ActionScript 3.0을 알아야 가능해진다. Flash든 Flex든 AIR든... Flash Platform 개발자가 접근할 수 있는 가장 기초가 되는 것은 결국 ActionScript 3.0이다. (예외적으로 AIR의 경우 Javascript로 만들 수 있는데 이는 컴파일러를 지원하는 차원이지 근간은 ActionScript 이다.)  

    이 책의 한가지 단점이라면 Flash Player 10 API에 해당하는 내용까지 다루지는 않고 있다. 이와 관련된 내용은 여전히 온라인의 ActionScript 3.0 라이브 독을 참고해야한다.

    글쓴이 : 지돌스타(http://blog.jidolstar.com/615

     

    실무에 바로 쓸 수 있는있는 유용한 Flash/Flex 기반 ActionScript 3.0 라이브러리들입니다. 3번째 라이브러리도 조만간 소개하겠습니다. ^^

     

    http://opencast.naver.com/FL188/12

     

    글쓴이 : 지돌스타(http://blog.jidolstar.com/591)

     

    실무에 바로 쓸 수 있는 유용한 Flash/Flex 기반 ActionScript 3.0 라이브러리들입니다.

    이들을 이용해서 많은 테스트들이 이뤄졌으면 합니다. 물론 관련내용을 블로깅해서 트랙백도 걸어주시면 좋겠어요 ^^

     

    다음주에는 다른 라이브러리를 소개하겠습니다.

     

    http://opencast.naver.com/FL188/11

     

    글쓴이 : 지돌스타(http://blog.jidolstar.com/590)

     

     

    Tween은 속도가 관건입니다. 많은 오브젝트의 위치나 값을 어떻게 하면 빠르게 변경할 수 있을까에 대한 해결책을 제시하기 위해 그간 많은 Tween관련 라이브러리들이 쏟아져 나왔습니다. 지금까지 가장 빠르고 안정적으로 평가받는 TweenMax를 자주 사용했죠.

    몇주전 속도적인 면에서 TweenMax를 뛰어넘은 BetweenAS3를 hika님으로부터 소개받았었죠.
    BetweenAS3는 일본의 Spark 프로젝트 팀의  Yoshihiro Shindo라는 사람이 만들었습니다.

    아래 링크는 BetweenAS3의 공식 홈페이지입니다.

    위 링크로부터 소스를 다운로드 하거나 SVN으로 공유할 수 있고 각종 예시도 볼 수 있어서 실무에 언제든지 적용할 수 있을 정도입니다. Alpha버전이지만 거의 완벽해보이는군요.

    도데체 얼마나 빠를까요? 다음 링크에서 테스트 해보세요. 속도만 비교해볼때 BetweenAS3가 압승입니다.

    무슨 마술(?)을 부렸나 봅니다. ㅎㅎ
    역시 일본 Spark 프로젝트 팀는 최고네요.

    글쓴이 : 지돌스타(http://blog.jidolstar.com/587)

    한글 에러 : ArgumentError: Error #2180: AVM1 내용(AS1 또는 AS2)이 AVM2(AS3) 내용으로 로드된 경우 AVM1 내용을 displayLis의 다른 부분으로 이동할 수 없습니다."

     

    영문 에러 : ArgumentError: Error #2180: It is illegal to move AVM1 content (AS1 or AS2) to a different part of the displayList when it has been loaded into AVM2 (AS3) content.


    위와 같은 에러를 본 적이 있는가?

     

    이것은 Flash Player 9 버전으로 만들어진 애플리케이션에서는 발생하지 않는다. Flash Player 10 버전으로 만들어진 애플리케이션에서 위와 같은 문제가 발생한다.

     

    위 에러가 발생하는 조건은 다음과 같다.

     

    1. AVM2(ActionScript Virtual Machine 2)기반으로 만들어진 Flash 애플리케이션
      AVM2 기반이라는 것은 ActionScript 3.0 기반으로 만들어진 애플리케이션을 의미한다.
    2. Flash Player 10 기반으로 컴파일한다.
      컴파일 옵션에서 Flash Player 버전을 9.0.124 등이 아닌 10.0.0을 기반으로 한다.
    3. 위 두 조건하에서 AVM1기반으로 만들어진 SWF파일을 flash.display.Loader를 이용해 로드한다.
      AVM1 기반이라는 것은 ActionScript 1.0 또는 ActionScript 2.0 기반으로 만든 SWF파일을 의미한다.
    4. Loader.contentLoaderInfo.content를 addChild() 한다.
      Loader는 외부의 이미지, 플래시 파일등을 로드해서 디스플레이 객체로 등록하는 일종의 wrapper역할을 담당한다. 이들을 로드완료하면 Loader.contentLoaderInfo.content에 해당 객체의 참조를 얻을 수 있다. 일반적으로 화면에 출력하기 위해 addChild( Loader ) 식으로 하면 되는데 이렇게 안하고 addChild( Loader.contentLoaderInfo.content ) 를 하는 경우다. 이것이 가능한 이유는 Loader.contentLoaderInfo.content 도 DisplayObject이기 때문이다.

     

    위 조건에 맞춰서 ActionScript 3.0 기반으로 코딩을 아래와 같이 해보겠다.

     

    package
    {
    	import flash.display.DisplayObject;
    	import flash.display.Loader;
    	import flash.display.LoaderInfo;
    	import flash.display.Sprite;
    	import flash.events.Event;
    	import flash.net.URLRequest;
    	
    	public class AVM1LoadTest extends Sprite
    	{
    		private var loader:Loader;
    		
    		public function AVM1LoadTest()
    		{
    			loader = new Loader();
    			loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onLoadComplete);
    			loader.load( new URLRequest("avm1asset.swf") );	
    		}
    		
    		private function onLoadComplete( event:Event ):void
    		{
    			var loaderInfo:LoaderInfo = event.target as LoaderInfo;
    			trace( loader.numChildren );
    			trace( loaderInfo.content.parent );
    			var avm1asset:DisplayObject = loaderInfo.content;
    			addChild( avm1asset );
    			trace( loader.numChildren );
    			trace( loaderInfo.content.parent );
    		}
    	}
    }
    

     

     

    위 프로그램을 Flash Player 9 버전으로 컴파일하고 실행해보자. (실행되는 Flash Player 버전은 10이어야 한다. 당연히 실험 애플리케이션이 Flash Player 9버전 뿐 아니라 10버전도 만들 것이기 때문이다.)

     

    아래 화면과 같이 AVM1 기반 SWF를 예쁘게 출력해준다.

     

     

    onLoadComplete() 안을 살펴보면 addChild() 앞뒤로 똑같은 trace()문이 있다. 이것은 addChild() 전후로 loader.numChildren과 loaderInfo.content.parent(이것은 loader.content.parent와 같다)의 변화를 살펴보기 위함이다. loader.numChildren은 Loader 객체에 로드된 AVM1객체가 자식으로 등록되어 있는 경우에는 1이 출력되고 그 반대는 0이 된다. loaderInfo.content.parent는 로드된 AVM1객체의 부모가 무엇인지 가리킨다.

     

    결과는 다음과 같다.

     

    1
    [object Loader]
    0
    [object AVM1LoadTest]

     

    무엇을 의미하는가? addChild()를 하기 전에는 AVM1객체는 Loader의 자식이지만 addChild() 후로는 AVM1LoadTest객체의 자식이 된다. AVM1LoadTest는 위 프로그램의 메인 클래스이다. 이것은 당연한 결과로 자식은 두개 이상의 부모를 가질 수 없는 것을 의미한다. Flash Player 9버전으로 만든 경우에는 이러한 코딩이 가능했다.

     

    조건을 바꿔보자. 이제 위 프로그램을 Flash Player 10 버전으로 컴파일하고 실행해보자. 언급했던 에러가 발생한다.

     

    "ArgumentError: Error #2180: AVM1 내용(AS1 또는 AS2)이 AVM2(AS3) 내용으로 로드된 경우 AVM1 내용을 displayLis의 다른 부분으로 이동할 수 없습니다."

     

    무엇을 의미하는가? Flash Player 10 기반으로 만들어진 애플리케이션은 AVM1 객체를 AVM2 기반의 디스플레이 객체로의 이동을 불허한다. 즉 Loader에서 떠나지 못함을 의미한다.

     

    Flash Player 10기반에서 AVM2 SWF를 로드한 경우는 addChild( loader.contentLoaderInfo.content ) 가 가능할까? 이것은 된다!

     

    Flash Player 10에서 AVM1기반의 SWF는 부모로 Loader이어야만 하는 이유는 무엇일까? 사실 여기에 대한 답변을 나는 아직 찾지 못했다. 혹시 아시는 분은 댓글 및 트랙백을 부탁한다.

     

    일본에서는 이미 이 문제로 고민한 사람이 꽤 있었다. 재미있게도 AVM1을 AVM2로 강제로 바이트 단위로 버전을 수정해 버려 로드해버리는 커스텀 Loader까지 만들어 배포하는 사람이 있었다. 좋은 방법인지는 모르겠지만 아무튼 이런 연구가 활발히 진행되는 일본이 부럽당.. ㅡㅡ

     

    Illustrator의 벡터형식 데이터를 읽어들이는 방법(Loader 클래스편)

    Illustrator의 벡터형식 데이터를 읽어들이는 방법(Embed 태그 편)

    BeInteractive - AVM2에서 AVM1의 SWF를 억지로 로드하는 ForcibleLoader 

    BeInteractive - AVM2에서 AVM2의 SWF를 억지로 로드하는 방식 해설

    ForcibleLoader 다운로드

    ForcibleLoader 브라우징하기

     

    흑... 이것도 spark 프로젝트....


    아래 내용도 보면 좋을거다.

    로드한 SWF 내부에 작성된 ActionScript 3.0 클래스 이름 찾기

     

    글쓴이 : 지돌스타(http://blog.jidolstar.com/582)

     

    Flash가 Cross OS, Cross Browser를 지향하지만 한글문제를 비롯해 각종 몇가지 기능을 제대로 수행하지 못하는 경우가 있다. 마우스 휠(Mouse Wheel)도 그와 같은 맥락이다.

     

    Mac 운영체제에서는 마우스 휠 기능이 전혀 먹지 않는다. MS Window에서 wmode가 transparent일때 Internet Explorer를 제외하고 다른 브라우저에서는 마우스 휠 기능을 사용할 수 없다.

     

    이 문제를 해결할 수 있는 유일한 방법은 Javascript를 이용하는 방법이다. ActionScript3의 ExternalInterface를 이용해 Javascript와 통신해서 마우스 휠 이벤트를 사용하는 것이다. 자바스크립트를 이용하는 방법은 내 블로그에도 몇번 글을 올렸다.

     

    ActionScript 3.0 만으로 쿠키를 제어 - Actionscript Cookie Util 소개

    [Flex/Flash] ActionScript 3.0 으로 브라우저 종류 알아내기

     

    Pixelbreaker 블로그에 Mac에서 마우스 휠을 해결하는 방법을 다룬 유명한 글이 올라와 있다.

     

    AS3.0 MouseWheel on Mac OS

     

    하지만 이 방법은 Mac에만 유용하고 wmode=transparent 일때 대처를 하지 못한다. 또한 js파일을 따로 html에 포함 해야하니 사용하기 귀찮다.

     

    위 소스를 개선하여 어떤 경우에라도 마우스 휠을 사용할 수 있으면서 따로 js파일을 포함안하고 actionscript 코드만으로 해결한 소스가 있다. 일본 Spark 프로젝트 팀에서 만든 SWFWheel이라는 하나의 클래스 코드인데 사용하기도 쉽고 깔끔하다.

     

    공식홈페이지 : http://www.libspark.org/wiki/SWFWheel 

     

    아래에서 공개한 JS파일을 AS 3.0 코드에 포함한다. 아래 링크를 보면 쉽게 이해할 수 있겠다.

    swfwheel.js : http://www.libspark.org/browser/as3/SWFWheel/trunk/zoo/swfwheel.js

    SWFWheel.as : http://www.libspark.org/browser/as3/SWFWheel/trunk/src/org/libspark/ui/SWFWheel.as

     

    다운로드는 아래 링크에서 AS파일만 다운받아 사용하면 되겠다.

    http://www.libspark.org/svn/as3/SWFWheel/trunk/src/org/libspark/ui/

     

     

    사용법은 너무 간단하다.

    import org.libspark.ui.SWFWheel;
    SWFWheel.initialize(stage);

     

    위처럼 하고 ActionScript 를 통해 마우스 휠 이벤트를 stage로 부터 등록하여 사용한다.

    stage.addEventListener( MouseEvent.MOUSE_WHEEL, mouseWheelHandler );

    SWFObject를 이용해 아래와 같은 방법으로 Flash Content를 삽입한다.

    var flashvars = {};
    var params = {};
    var attributes = {
        id: "myDynamicContent",
        name: "myDynamicContent"
    };

    swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0", "expressInstall.swf", flashvars, params, attributes);

     

    단, 위 방법이 잘될 수 있도록 하기 위해 allowScripAccess는 같은 도메인의 swf인 경우 sameDomain, 다른 도메인의 swf인 경우 always로 지정해야한다. allowNetworking은 항상 all로 설정해야한다. 이에 대한 자세한 내용은 다음글을 참고한다.

     

    위젯도 마음대로 못다는 네이버 블로그

     

     

    SWFWheel 클래스는 browserScroll 속성이 있다. 이것을 이용해면 Flash 위에서 MouseWheel을 이용할 때 Flash를 담은 브라우저의 스크롤링을 허용할 것인가 설정할 수 있다. 기본값은 false이다.

     

    네이버 오픈캐스트의 메인 프로그램이 Flash로 만들어져 있는데 마우스 휠 기능이 어떤 운영체제든 브라우져든 잘 동작한다. 아마도 이 SWFWheel을 사용하지 않았나 생각된다.

     

    이렇게 꽁수 안부리고 마우스 휠이든 한글문제든 Flash Player가 문제 없이 잘 동작하면 얼마나 좋을까?

     

    [생각더하기]일본의 Spark 프로젝트의 이름에 눈길이 간다. Flex 4의 새로운 컴포넌트는 Spark로 명명했다. 그럼 Flex 4가 만들어질때 일본의 Spark 프로젝트의 역할이 컷던 것 아닐까? 실제로 Spark 프로젝트는 일본내에서 매우 활발하고 유명한 Flash 관련 프로젝트이다. 그 유명한 증강현실(FLARToolKit)도 이 프로젝트에서 만들어진 것이다. 우리 나라에는 왜 이런 멋진 프로젝트 팀이 없는 것일까? 안타깝다.

     

     

    글쓴이 : 지돌스타(http://blog.jidolstar.com/577)

     

     

     

     

     

    3D 환경맵핑(Environment Mapping)의 한 기법으로 Cube Maps가 있다. 말그대로 직육면체의 각면에 대한 텍스쳐 이미지로 3D 환경을 조성하는 방법인데 아래 이미지를 보면 바로 이해할 수 있다.

     

    Cube Map

    출처 : developer.com

     

    Cube Maps는 환경 맵핑 방법중 가장 빠르고 매우 사실적으로 묘사할 수 있는 방법으로 내가 알기로는 게임등에 자주 사용하는 것으로 알고  있다. 단점은 모서리 부분에서 약간 티가 난다는 점이다.

     

    Flash Player 10부터 3D API를 제공한다. 이 API들을 적절히 활용하면 Papervision3D나 Away3D와 같은 라이브러리를 이용하지 않고도 어려움 없이 Cube Maps을 구현할 수 있다.

     

    아래 프로그램은 Flash Player 10에서 제공하는 3D API만 이용해서 Cube Map을 구현한 것이다. 마우스 드래그로 회전이 가능하다.

     

    마우스로 Drag하면 회전이 됩니다.
    (Mac에서 화면이 작게 나오는데 아직 이유를 모르겠네요 ^^;)

     

    위와 같은 프로그램을 만들기 위해 6면을 가지는 텍스쳐 이미지가 필요하다. 인터넷에 많이 있는데 아래처럼 Layout이 여러종류가 있다.

     

    Cube Map Layout

    Cube Map Layout 출처 : cgtextures.com

     

    나는 가장 일반적이고 자주 쓰이는 Horizontal Cross방식 대신에 Horizontal Strip(NVidia DDS Exporter Layout)을 이용했다. 이 방식은 아래같이 구성된다.

     

    Cube Map Layout 출처 : cgtextures.com

     

    이러한 이미지가 어떻게 Cube Map을 만들 수 있는지 아래 화면을 보면 쉽게 알 수 있다.

     

    마우스로 Drag하면 회전이 됩니다.

     

    아래는 위 프로그램에 대한 소스이다.

     

     

    package
    {
    	import flash.display.*;
    	import flash.events.Event;
    	import flash.events.MouseEvent;
    	import flash.geom.*;
    	import flash.utils.getTimer;
    	
    	[SWF(frameRate=60, backgroundColor=0x000000)]
    
    	/**
    	 * Cube Map 예제 
    	 * @author Yongho, Ji (http://blog.jidolstar.com/574)
    	 * @since 2009.08.05
    	 */
    	public class CubeSky extends Sprite
    	{
    		[Embed(source="sky.jpg")]
    		private const SKY:Class;
    		
    		//투영된 Vectex 정보
    		private var projected:Vector.<Number>;
    		
    		//World 변환 행렬 
    		private var world:Matrix3D;
    		
    		//투영을 위한 변환행렬 
    		private var projection:Matrix3D;
    		
    		//Mesh 데이터 
    		private var mesh:GraphicsTrianglePath
    				
    		//Texture
    		private var texture:BitmapData = (new SKY as Bitmap).bitmapData;
    		
    		//Viewport (3D 렌더링 대상)
    		private var viewport:Shape;
    		
    		//Viewport의 Z축 위치 
    		private var viewPortZAxis:Number = 0;		
    		
    		public function CubeSky()
    		{
    			//Viewport 
    			viewport = new Shape;
    			addChild( viewport );
    			
    			//투영 변환 행렬 
    			var p:PerspectiveProjection = new PerspectiveProjection()
    			p.fieldOfView = 30;
    			projection = p.toMatrix3D();
    
    			//World 변환 행렬
    			world = new Matrix3D();
    			
    			var check3D:Vector3D = Utils3D.projectVector(
    										projection, 
    										new Vector3D(1.0,0,1.0)
    									);			
    									
    			//Mesh 데이타 
    			mesh = createCubeMesh( check3D.x );
    			projected = new Vector.<Number>(0,false);
    			viewPortZAxis = check3D.x;// * 4;
    			
    			//이벤트 핸들러 등록 
    			stage.addEventListener( Event.RESIZE, resize );
    			stage.addEventListener( Event.ENTER_FRAME, render );		
    			//stage.addEventListener( MouseEvent.MOUSE_WHEEL, onMouseWheel );	
    			stage.addEventListener( MouseEvent.MOUSE_DOWN, onMouseEvent );
    			resize();
    		}
    		
    		private function resize( event:Event = null ):void
    		{
    			viewport.x = stage.stageWidth/2;
    			viewport.y = stage.stageHeight/2;	
    		}		
    		
    		private function render( event:Event = null ):void
    		{
                world.identity(); //단위행렬로 전환 
    			world.appendRotation( zRotation, Vector3D.Z_AXIS );
    			world.appendRotation( 90+xRotation, Vector3D.X_AXIS );
                world.appendTranslation(0, 0, viewPortZAxis); //이동 
                world.append(projection); //투영 변환 적용 
                
                // mesh 데이터를  투영하여  projected 생성 
                // uvtData도 갱신된다. 갱신되는 데이터는 T값이다.             
                Utils3D.projectVectors( world, mesh.vertices, projected, mesh.uvtData );
      
                // texture를 이용해 렌더링
                viewport.graphics.clear();
                //viewport.graphics.lineStyle( 1, 0xff0000 );
            	viewport.graphics.beginBitmapFill( texture, null, false, true );
                viewport.graphics.drawTriangles( projected, mesh.indices, mesh.uvtData, mesh.culling );
            	//Cube는  z축을 굳이 정렬할 필요 없다.
                //viewport.graphics.drawTriangles( projected, getSortedIndices(mesh), mesh.uvtData, mesh.culling );            	
    		}
    		
    		/**
    		 * 마우스 휠 처리 
    		 */ 
    		private function onMouseWheel( event:MouseEvent ):void
    		{
    			viewPortZAxis += event.delta * 10;
    		}	
    
    		private var xRotation:Number = 0;
    		private var zRotation:Number = 0;
    		private var prevX:Number;
    		private var prevY:Number;		
    		/**
    		 * 마우스 이벤트 - x,y축 회전
    		 */ 
    		private function onMouseEvent( event:MouseEvent ):void
    		{
    			switch( event.type )
    			{
    				case MouseEvent.MOUSE_DOWN:
    					stage.addEventListener( MouseEvent.MOUSE_MOVE, onMouseEvent );
    					stage.addEventListener( MouseEvent.MOUSE_UP, onMouseEvent );
    					prevX = mouseX;
    					prevY = mouseY;
    					break;
    				case MouseEvent.MOUSE_MOVE:
    					if( event.buttonDown == false )
    					{
    						stage.removeEventListener( MouseEvent.MOUSE_MOVE, onMouseEvent );
    						stage.removeEventListener( MouseEvent.MOUSE_UP, onMouseEvent );
    						break;
    					}
    					var dx:Number = mouseX - prevX;
    					var dy:Number = mouseY - prevY;
    					zRotation += dx;
    					xRotation += dy;
    					if( xRotation > 90 ) xRotation = 90;
    					if( xRotation < -90 ) xRotation = -90;
    					prevX = mouseX;
    					prevY = mouseY;
    					break;
    				case MouseEvent.MOUSE_UP:
    					stage.removeEventListener( MouseEvent.MOUSE_MOVE, onMouseEvent );
    					stage.removeEventListener( MouseEvent.MOUSE_UP, onMouseEvent );
    					break;
    			}	
    		}
    	}
    }
    
    import flash.display.GraphicsTrianglePath;
    import flash.display.TriangleCulling;
    
    /**
     * Cube Mesh 데이타 작성 
     * @param size 한변의 사이즈
     * @return mesh 데이터 
     */ 
    function createCubeMesh( size:Number = 512 ):GraphicsTrianglePath
    {
    	var vertices:Vector.<Number> = new Vector.<Number>( 0, false );
    	var indices:Vector.<int> = new Vector.<int>( 0, false );
    	var uvtData:Vector.<Number> = new Vector.<Number>( 0, false );
    	var mesh:GraphicsTrianglePath = new GraphicsTrianglePath( vertices, indices, uvtData, TriangleCulling.POSITIVE );
    	var s:Number = size/2;
    	var w:Number = size * 6;
    	var u00:Number = 0;
    	var u01:Number = (size-1)/w;
    	var u10:Number = size/w;
    	var u11:Number = (size*2-1)/w;
    	var u20:Number = (size*2)/w;
    	var u21:Number = (size*3-1)/w;
    	var u30:Number = (size*3)/w;
    	var u31:Number = (size*4-1)/w;
    	var u40:Number = (size*4)/w;
    	var u41:Number = (size*5-1)/w;
    	var u50:Number = (size*5)/w;
    	var u51:Number = (size*6-1)/w;
    	
    	mesh.vertices.push( 
    		//Right		
    		s,-s,-s,	//0
    		s,-s,s,		//1
    		s,s,s,		//2
    		s,s,-s, 	//3
    
    		//Left
    		-s,s,-s, 	//4
    		-s,s,s, 	//5
    		-s,-s,s, 	//6
    		-s,-s,-s, 	//7
    		
    	
    		//Top
    		-s,-s,s, 	//8
    		-s,s,s, 	//9
    		s,s,s, 		//10
    		s,-s,s, 	//11
    		
    		//Bottom
    		-s,s,-s, 	//12
    		-s,-s,-s, 	//13
     		s,-s,-s, 	//14
    		s,s,-s, 	//15
    		
    		//Front
    		-s,-s,-s, 	//16
    		-s,-s,s, 	//17
    		s,-s,s, 	//18
    		s,-s,-s, 	//19
    
    		//Back
    		s,s,-s, 	//20
    		s,s,s, 		//21
    		-s,s,s, 	//22
    		-s,s,-s 	//23
    	);
    	
    	
    	mesh.indices.push( 
    		0,1,2, 0,2,3, 	//Right
    		4,5,6, 4,6,7,  	//Left
    		8,9,10, 8,10,11, //Top
    		12,13,14, 12,14,15, //Bottom
    		16,17,18, 16,18,19, //Front
    		20,21,22, 20,22,23 //Back
    	 );
    		
    	mesh.uvtData.push( 
    		//Right
    		u00, 1, 1,
    		u00, 0, 1,
    		u01, 0, 1,
    		u01, 1, 1,
    
    		//Left
    		u10, 1, 1,
    		u10, 0, 1,
    		u11, 0, 1,
    		u11, 1, 1,
    
    		//Top
    		u20, 1, 1,
    		u20, 0, 1,
    		u21, 0, 1,
    		u21, 1, 1,
    
    		//Bottom
    		u30, 1, 1,
    		u30, 0, 1,
    		u31, 0, 1,
    		u31, 1, 1,
    
    		//Front
    		u40, 1, 1,
    		u40, 0, 1,
    		u41, 0, 1,
    		u41, 1, 1,
    
    		//Back
    		u50, 1, 1,
    		u50, 0, 1,
    		u51, 0, 1,
    		u51, 1, 1
    	 );
    
    	
    	return mesh;
    }
    
    /**
     * GraphicsTrianglePath를 기반으로, Z축으로 sort된 인덱스를 돌려준다.
     * 이 작업을 해주어야 z축 깊이에 따라 Triangle이 제대로 그려진다. 
     * @param mesh 정보 
     * @return sort된 index 데이터 
     */
    function getSortedIndices( mesh:GraphicsTrianglePath ):Vector.<int> 
    {
        var triangles:Array = [];
        var length:uint = mesh.indices.length;
        
        //z축 sort를 위한 기반 제작 
        for ( var i:uint=0; i < length; i += 3 ) 
        {
            var i1:uint = mesh.indices[ i+0 ];
            var i2:uint = mesh.indices[ i+1 ];
            var i3:uint = mesh.indices[ i+2 ];
            var z:Number = Math.min( mesh.uvtData[i1 * 3 + 2], mesh.uvtData[i2 * 3 + 2], mesh.uvtData[i3 * 3 + 2] );
            if (z > 0) 
            { 
            	triangles.push({i1:i1, i2:i2, i3:i3, z:z}); 
            }
        }
        
        //z축으로 sort
        triangles = triangles.sortOn("z", Array.NUMERIC);
        
        //sort된 값을 이용해 Vector값 만듬 
        var sortedIndices:Vector.<int> = new Vector.<int>(0, false);
        for each (var triangle:Object in triangles) 
        {
            sortedIndices.push(triangle.i1, triangle.i2, triangle.i3);
        }
        return sortedIndices;
    }
    

     

     

    아래 이미지는 위 프로그램에서 사용한 이미지이다.

     

    위 프로그램에서는 Graphics.drawTriangle() 메소드를 이용했다. 하지만 이 함수를 사용하지 않고도 만들수 있다. 왜냐하면 Flash Player 10부터는 DisplayObject에 대해 x,y,z축 회전 및 이동 API가 추가되었기 때문이다. 그러면 위 프로그램 소스처럼 힘들게 vertex, index, uvt 데이타를 만들지 않아도 될 것이다.

     

    내 생각에 Flash에서 3D 개발을 위해 Graphics.drawTriangle()와 DisplayObject의 3D API, Matrix3D 등을 서로 섞어가면서 만드는 것이 좋을 것 같다.

     

    개발환경 : Flash Builder 4 Beta 1 (Flash CS4 에서도 개발할 수 있음.)

     

    참고내용

     

    글쓴이 : 지돌스타(http://blog.jidolstar.com/574)

     

    Flex의 SystemManager는 Flex가 구동될 때 Application이 동작하기전 각종 설정을 하면서 사용자들에게 충분히 그 시간을 기다릴 수 있도록 UI적으로 Preloading 화면을 보여준다. 하지만 Flex가 아닌 ActionScript 3.0 프로젝트로 만들면 이런 UI를 보여주지 않는다. Flex는 되는데 ActionScript라고 못할까? 사실 매우 쉬운 방법으로 이 기능을 추가할 수 있다. 방법은 다음 글을 참고하길 바란다.

     

    http://www.diebuster.com/?p=681

    http://www.bit-101.com/blog/?p=946

     

    ActionScript 3.0도 Flex 컴파일러인 mxmlc로 컴파일하는 것이기 때문에 [Frame] 메타 데이타 태그를 이용해 Preloading 기능을 추가할 수 있는 것이 핵심이다. 이를 이용해 만들어진 Preloading 기능 추가한 클래스에 각종 설정 및 자원관리를 할 수 있는 로직을 만들어 사용하면 좋겠다.

     

    한가지 팁을 소개하자면....

     

    mxmlc가 Flex 컴파일러라서 내부적으로 [Frame] 메타 데이타 태그를 사용하면 기본 CSS를 포함하게 된다. 그래서 위 글대로 하면 다음과 같은 경고 문구가 나온다.

     

    Default css file not found

     

    이 경고 문구를 없애려면 내용이 아무 것도 없는 null.css를 하나 만들고 컴파일 옵션으로 -defaults-css-url null.css를 추가하면 경고문구가 사라진다.

     

    글쓴이 : 지돌스타(http://blog.jidolstar.com)

     

     

    Adobe RIA에 대한 정보에 대한 소통의 도구로 네이버 오픈캐스트를 개설했습니다. Flex, Flash, ActionScript 3.0을 주로 다룰 것이고 그와 관련된 LCDS, BlazeDS, ColdFusion등, 다양한 Adobe RIA와 관련된 기술도 공유하고자 합니다.

     

    제 오픈 케스트에 올라왔으면 하는 글 있으면 언제든지 추천해주시고요.

    구독도 많이 해주세요~~~

    더욱 좋은 정보 공유를 위해 앞장서도록 노력하겠습니다. ^^

     

    지금 생각하는 주제를 몇가지 적어보면

    한글문제, 3D, 컴포넌트 제작, 보안, Stratus, Alchemy, LCDS, BlazeDS, CF.... , 또... 이들에 대한 세부 주제까지... 정말 많네요. ㅎㅎ

     

    지돌스타의 Adobe RIA 오픈캐스트 : http://opencast.naver.com/FL188

     

     

    Flex 3에서 DataGrid의 Header부분의 Separator는 headerSeparatorSkin 스타일로 정의되어 있다. 화면은 Flex DataGrid에 Separator가 붙은 보통의 모습이다.

     

     

    위 프로그램은 아래와 같이 프로그래밍 한다.

    <?xml version="1.0" encoding="utf-8"?>
    <!-- http://blog.flexexamples.com/2009/03/20/removing-the-header-separator-on-the-datagrid-control-in-flex/ -->
    <mx:Application
    	name="DataGrid_headerSeparatorSkin_test"
    	xmlns:mx="http://www.adobe.com/2006/mxml"
    	backgroundColor="white" 
    	layout="vertical">
    	<mx:DataGrid id="dataGrid">
    		<mx:dataProvider>
    			<mx:ArrayCollection>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    			</mx:ArrayCollection>
    		</mx:dataProvider>
    	</mx:DataGrid>
    </mx:Application>
    
    

    만약 Separator를 지우고 싶다면 단순히 headerSeparatorSkin 에 mx.skins.ProgrammaticSkin으로 정의하면 된다. 아래는 실행화면과 소스코드이다. mx.skins.ProgrammaticSkin는 프로그램적으로 스킨을 만들 필요가 있을때 사용하는 클래스로 이 클래스 내부에서는 어떤 렌더링도 하지 않기 때문에 headerSeparatorSkin 을 이 클래스로 대체하는 것만으로도 Header의 separator를 삭제할 수 있는 것이다.

     

     

     

    <?xml version="1.0" encoding="utf-8"?>
    <!-- http://blog.flexexamples.com/2009/03/20/removing-the-header-separator-on-the-datagrid-control-in-flex/ -->
    <mx:Application
    	name="DataGrid_headerSeparatorSkin_test"
    	xmlns:mx="http://www.adobe.com/2006/mxml"
    	backgroundColor="white" 
    	layout="vertical">
    	<mx:DataGrid id="dataGrid" 
    		headerSeparatorSkin="mx.skins.ProgrammaticSkin">
    		<mx:dataProvider>
    			<mx:ArrayCollection>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    			</mx:ArrayCollection>
    		</mx:dataProvider>
    	</mx:DataGrid>
    </mx:Application>
    
    

     

    위 코드 대신 아래 코드처럼 <Style/> 블록이나 외부 .CSS 파일을 이용해서 headerSeparatorSkin의 스타일을 바꿀 수 있다.

     

     

    <?xml version="1.0" encoding="utf-8"?>
    <!-- http://blog.flexexamples.com/2009/03/20/removing-the-header-separator-on-the-datagrid-control-in-flex/ -->
    <mx:Application
    	name="DataGrid_headerSeparatorSkin_test"
    	xmlns:mx="http://www.adobe.com/2006/mxml"
    	backgroundColor="white" 
    	layout="vertical">
        <mx:Style>
            DataGrid {
                headerSeparatorSkin: ClassReference("mx.skins.ProgrammaticSkin");
            }
        </mx:Style>	
    	<mx:DataGrid id="dataGrid">
    		<mx:dataProvider>
    			<mx:ArrayCollection>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    			</mx:ArrayCollection>
    		</mx:dataProvider>
    	</mx:DataGrid>
    </mx:Application>
    

     

    또는 ActionScript 를 사용해 버튼을 누를때 동적으로 headerSeparatorSkin 스타일을 변경할 수 있도록 다음 코드처럼 만들 수 있다.

    <?xml version="1.0" encoding="utf-8"?>
    <!-- http://blog.flexexamples.com/2009/03/20/removing-the-header-separator-on-the-datagrid-control-in-flex/ -->
    <mx:Application
    	name="DataGrid_headerSeparatorSkin_test"
    	xmlns:mx="http://www.adobe.com/2006/mxml"
    	backgroundColor="white" 
    	layout="vertical">
        <mx:Script>
            <![CDATA[
                import mx.skins.ProgrammaticSkin;
    
                private function btn_click(evt:MouseEvent):void {
                    dataGrid.setStyle("headerSeparatorSkin", ProgrammaticSkin);
                }
            ]]>
        </mx:Script>
    
        <mx:Button id="btn"
                label="Set header separator skin"
                click="btn_click(event);" />
                
    	<mx:DataGrid id="dataGrid">
    		<mx:dataProvider>
    			<mx:ArrayCollection>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    			</mx:ArrayCollection>
    		</mx:dataProvider>
    	</mx:DataGrid>
    </mx:Application>
    
    

     

    좀더 파헤쳐보자.

     

    DataGrid에는 drawSeparators() 메소드가 protected로 지정되어 있다. 만약 DataGrid를 커스터마이징해서 Separator 그리는 방식을 바꾸고 싶다면 drawSeparators() 부터 찾아가면 된다. 아래 코드는 DataGrid의 drawSeparators() 메소드 정의이다

    /**
     *  Creates and displays the column header separators that the user 
     *  normally uses to resize columns.  This implementation uses
     *  the same Sprite as the lines and column backgrounds and adds
     *  instances of the headerSeparatorSkin and attaches mouse
     *  listeners to them in order to know when the user wants
     *  to resize a column.
     */
    protected function drawSeparators():void
    {
        DataGridHeader(header)._drawSeparators();
        if (lockedColumnHeader)
            DataGridHeader(lockedColumnHeader)._drawSeparators();
    }
    

     

    위 코드에서 볼 수 있듯이 결국 DataGridHeader에 정의된 _drawSeparators()쪽을 살펴봐야한다. 아래는 DataGridHeader의 _drawSeparators()와 drawSeparators() 부분이다.

    mx_internal function _drawSeparators():void
    {
        drawSeparators();
    }
    
    /**
     *  Creates and displays the column header separators that the user 
     *  normally uses to resize columns.  This implementation uses
     *  the same Sprite as the lines and column backgrounds and adds
     *  instances of the headerSeparatorSkin and attaches mouse
     *  listeners to them in order to know when the user wants
     *  to resize a column.
     */
    protected function drawSeparators():void
    {
        if (!separators)
            separators = [];
    
        var lines:UIComponent = UIComponent(getChildByName("lines"));
        
        if (!lines)
        {
            lines = new UIComponent();
            lines.name = "lines";
            addChild(lines); 
        }
        else
            setChildIndex(lines, numChildren - 1);
    
        // required to deal with some 2.x clipping behavior
        lines.scrollRect = new Rectangle(0, 0, unscaledWidth, unscaledHeight + 1);
    
        if (headerSepSkinChanged)
        {
            headerSepSkinChanged = false;
            clearSeparators();
        }
    
        var n:int = visibleColumns ? visibleColumns.length : 0;
        
        if (!needRightSeparator && n > 0)
        	n--;
        
        for (var i:int = 0; i < n; i++)
        {
            var sep:UIComponent;
            var sepSkin:IFlexDisplayObject;
            
            if (i < lines.numChildren)
            {
                sep = UIComponent(lines.getChildAt(i));
                sepSkin = IFlexDisplayObject(sep.getChildAt(0));
            }
            else
            {
                var headerSeparatorClass:Class =
                    getStyle("headerSeparatorSkin");
                sepSkin = new headerSeparatorClass();
                if (sepSkin is ISimpleStyleClient)
                    ISimpleStyleClient(sepSkin).styleName = this;
                sep = new UIComponent();
                sep.addChild(DisplayObject(sepSkin));
                lines.addChild(sep);
                
                separators.push(sep);
            }
            // if not separator
            if ( !(i == visibleColumns.length-1 && !needRightSeparatorEvents) )
            {
                DisplayObject(sep).addEventListener(
                    MouseEvent.MOUSE_OVER, columnResizeMouseOverHandler);
                DisplayObject(sep).addEventListener(
                    MouseEvent.MOUSE_OUT, columnResizeMouseOutHandler);
                DisplayObject(sep).addEventListener(
                    MouseEvent.MOUSE_DOWN, columnResizeMouseDownHandler);
            }
    		else
    		{
                // if not separator
                if ( (i == visibleColumns.length-1 && !needRightSeparatorEvents) )
                {
                    DisplayObject(sep).removeEventListener(
                        MouseEvent.MOUSE_OVER, columnResizeMouseOverHandler);
                    DisplayObject(sep).removeEventListener(
                        MouseEvent.MOUSE_OUT, columnResizeMouseOutHandler);
                    DisplayObject(sep).removeEventListener(
                        MouseEvent.MOUSE_DOWN, columnResizeMouseDownHandler);
                }
    		}
    
            var cols:Array = visibleColumns;
            if (!(cols && cols.length > 0 || dataGrid.headerVisible))
            {
                sep.visible = false;
                continue;
            }
    
            sep.visible = true;
            sep.x = headerItems[i].x +
                    visibleColumns[i].width - Math.round(sepSkin.measuredWidth / 2);
            if (i > 0)
            {
                sep.x = Math.max(sep.x,
                                 separators[i - 1].x + Math.round(sepSkin.measuredWidth / 2));
            }
            sep.y = 0;
            sepSkin.setActualSize(sepSkin.measuredWidth, Math.ceil(cachedHeaderHeight));
            
            // Draw invisible background for separator affordance
            sep.graphics.clear();
            sep.graphics.beginFill(0xFFFFFF, 0);
            sep.graphics.drawRect(-separatorAffordance, 0,
    							  sepSkin.measuredWidth + separatorAffordance,
    							  cachedHeaderHeight);
            sep.graphics.endFill();
    		sep.mouseEnabled = true;
        }
    
        while (lines.numChildren > n)
        {
            lines.removeChildAt(lines.numChildren - 1);
            separators.pop();
        }
    }
    

     

    DataGridHeader의 drawSeparators()에서 headerSeparatorSkin 스타일을 사용하는 것을 찾아볼 수 있다. 개발자는 이 부분을 커스터마이징할 수 있는 것이다.

     

    DataGrid나 DataGridHeader를 커스터마이징할 필요없이 스킨만 변경하고 싶다면 headerBackgroundSkin의 기본 스킨인 mx.skins.halo.DataGridHeaderSeparator를 커스터 마이징하거나 mx.skins.Programmatics를 확장해서 사용하면 되겠다. 아래코드는 DataGrid에서 headerBackgroundSkin이 Style로 정의된 것을 보여주고 있다.

    /**
     *  The class to use as the skin that defines the appearance of the  
     *  background of the column headers in a DataGrid control.
     *  @default mx.skins.halo.DataGridHeaderSeparator
     */
    [Style(name="headerBackgroundSkin", type="Class", inherit="no")]
    

     

     

    아래 코드는 mx.skins.halo.DataGridHeaderSeparator를 보여준다.

    ////////////////////////////////////////////////////////////////////////////////
    //
    //  ADOBE SYSTEMS INCORPORATED
    //  Copyright 2005-2007 Adobe Systems Incorporated
    //  All Rights Reserved.
    //
    //  NOTICE: Adobe permits you to use, modify, and distribute this file
    //  in accordance with the terms of the license agreement accompanying it.
    //
    ////////////////////////////////////////////////////////////////////////////////
    
    package mx.skins.halo
    {
    
    import flash.display.Graphics;
    import mx.skins.ProgrammaticSkin;
    
    /**
     *  The skin for the separator between column headers in a DataGrid.
     */
    public class DataGridHeaderSeparator extends ProgrammaticSkin
    {
    	include "../../core/Version.as";
    
    	//--------------------------------------------------------------------------
    	//
    	//  Constructor
    	//
    	//--------------------------------------------------------------------------
    
    	/**
    	 *  Constructor.
    	 */
    	public function DataGridHeaderSeparator()
    	{
    		super();
    	}
    	
    	//--------------------------------------------------------------------------
    	//
    	//  Overridden properties
    	//
    	//--------------------------------------------------------------------------
    
    	//----------------------------------
    	//  measuredWidth
    	//----------------------------------
    	
    	/**
    	 *  @private
    	 */
    	override public function get measuredWidth():Number
    	{
    		return 2;
    	}
    	
    	//----------------------------------
    	//  measuredHeight
    	//----------------------------------
    
    	/**
    	 *  @private
    	 */
    	override public function get measuredHeight():Number
    	{
    		return 10;
    	}
    	
    	//--------------------------------------------------------------------------
    	//
    	//  Overridden methods
    	//
    	//--------------------------------------------------------------------------
    
    	/**
    	 *  @private
    	 */
    	override protected function updateDisplayList(w:Number, h:Number):void
    	{
    		super.updateDisplayList(w, h);
    		var g:Graphics = graphics;
    		
    		g.clear();
    		
    		// Highlight
    		g.lineStyle(1, 0xFFFFFF, 0.5);
    		g.moveTo(0, 0);
    		g.lineTo(0, h);
    		g.lineStyle(1, getStyle("borderColor")); 
    		g.moveTo(1, 0);
    		g.lineTo(1, h);
    	}
    
    }
    
    }
    

     

    이외로 단순해서 놀랬는가? 결국 이 스킨은 borderColor 스타일로 지정된 색으로 구분자 선만 그어준다. 나는 이것을 바꿔서 실선을 점선을 그리도록 해보겠다. 아래 코드는 이를 구현한 DataGridHeaderDotSeparator 클래스이다.

     

    package
    {
    import flash.display.Graphics;
    
    import mx.skins.halo.DataGridHeaderSeparator;
    
    /**
     * DataGrid Header에 점선을 그린다.
     */ 
    public class DataGridHeaderDotSeparator extends DataGridHeaderSeparator
    {
    	/**
    	 *  Constructor.
    	 */		
    	public function DataGridHeaderDotSeparator()
    	{
    		super();
    	}
    	
    	/**
    	 *  @private
    	 */		
    	override protected function updateDisplayList(w:Number, h:Number):void
    	{
    		var g:Graphics = graphics;
    		
    		g.clear();
    		
    		
    		g.lineStyle(1, getStyle("borderColor"), 1); 
    		var i:int;
    		for( i = 0; i < h; i+=4 )
    		{
    			g.drawCircle( 1.5, i, 0.5 );
    		}
    	}		
    }
    }
    

     

     

    아래 코드는 DataGridHeaderDotSeparator 스킨을 사용하는 예제이다.

    <?xml version="1.0" encoding="utf-8"?>
    <!-- http://blog.flexexamples.com/2009/03/20/removing-the-header-separator-on-the-datagrid-control-in-flex/ -->
    <mx:Application
    	name="DataGrid_headerSeparatorSkin_test"
    	xmlns:mx="http://www.adobe.com/2006/mxml"
    	backgroundColor="white" 
    	layout="vertical">
    	<mx:DataGrid id="dataGrid"
    		headerSeparatorSkin="DataGridHeaderDotSeparator">
    		<mx:dataProvider>
    			<mx:ArrayCollection>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    				<mx:Object c1="1. One" c2="1. Two" c3="1. Three"/>
    			</mx:ArrayCollection>
    		</mx:dataProvider>
    	</mx:DataGrid>
    </mx:Application>
    
    

     

    아래는 위 코드를 실행한 화면이다. Header부분에 구분자(Separator)가 점선으로 되었다. 좀 뭉뚝하지만 그냥 예제일 뿐이니깐 넘어가자. ^^;

     

     

    Flex는 이처럼 프로그램적으로 스킨을 변경할 수 있다. 물론 이미지를 이용하는 방법도 있다. 이와 같은 방법으로 스킨을 변경하는 것은 Flex의 모든 컴포넌트에서 지원하므로 이런 스킬에 익숙해질 필요가 있겠다.

     

    원본 예제 : Removing the header separator on the DataGrid control in Flex

     

    주절주절 : 그냥 이렇게 가볍게 포스팅하는 것이 좋을 것 같다는 생각이 든다.

     

    글쓴이 : 지돌스타(http://blog.jidolstar.com/546)

     

    ActionScript 3.0(이하 AS3)은 Java와 매우 유사한 구조를 가진다. 그러므로 Java를 공부한 사람이라면 AS3를 쉽게 접근할 수 있게 된다. C++을 했던 사람도 비슷한 구조때문에 쉽게 접근이 가능하다.

     

    AS2를 공부했던 사람은 객체지향적으로 설계된 AS3를 공부하면 된다.

     

    여기서는 ActionScript 3.0에 대해서 어떤 절차없이 생각나는대로 적어보았다. 매우 개인적인 생각이기 때문에 반박하고 싶으신 내용도 있을지 모르겠다. 그렇다면 얼마든지 댓글 환영이다. ^^

     

     

    Java와 ActionScript 3.0 차이점

     

    Java와 AS3간에 차이점을 보여주는 표이다. 쭉 훑어보자.

    http://blog.naver.com/surfwon/30049390718

     

     

    ActionScript 3.0의 아쉬운점

     

    AS3는 객체지향기반의 언어이지만 몇가지 아쉬운 점이 존재한다.

     

    1. 메소드(함수)의 오버로드(overload)를 할 수 없다.

     오버로드는 클래스안에 같은 이름의 함수를 중복해서 사용할 수 있는 기능이다. AS3에서는 Java나 C++에서 지원되는 이 오버로드 기능이 없기 때문에 개발시 아에 생각을 하지 않게 하는 장점도 있지만 정말 필요할때 다른 방법으로 대체해야하는 불편함이 생긴다. 아래글을 보자.

     http://blog.jidolstar.com/484

     

    2. 생성자는 하나만 존재한다.

    위 오버로드를 지원하지 않는 것과 일맥 상통하는 내용이다.

     

    3. 추상클래스가 지원되지 않는다.

    Java와 같은 abstract 키워드가 존재하지 않아 추상클래스를 만들 수 없다. 하지만 throw등을 이용해 컴파일시가 아닌 런타임에서 동작하는 추상클래스는 제작이 가능하다. 추상클래스는 AS3에도 클래스 설계시 꼭 필요하지만 아직 지원하지 않아 아쉬운 부분이다. 아래 글을 보자.

    http://blog.jidolstar.com/452

     

     

    4. private 생성자가 지원되지 않는다.

    private 생성자는 외부에서 클래스 객체를 임의로 만드는 것을 금지시켜주는 역할을 한다. 하지만 AS3에서는 생성자에 public외에는 private, protected 를 쓸 수 없다. private 생성자가 필요한 단적인 예는 싱글턴 패턴을 구현할 때인데 AS3에서는 아래와 같이 다른 방법으로 싱글턴 패턴을 구현한다.

    http://koko8829.tistory.com/304

     

    아래 링크는 싱글턴 패턴을 응용한 형태이다.

    http://blog.jidolstar.com/468

     

     

     

    ActionScript 3.0을 왜 사용해야하는가?

     

    AS2를 주로 했던 사람은 AS3의 강력함을 잘 느끼지 못해서 전향하지 않는 사람들이 많은 것 같다. 아래 글을 보고 AS3를 왜 해야하는가 알아보자.

     

    AS3를 왜 사용해야하는가? : http://ddongkang.tistory.com/76 

     

     

    ActionScript 3.0 의 재미

     

    초보자가 Java, C++에서 느끼지 못하는 AS3의 재미는 처음 만드는 애플리케이션이 시각화된 결과물이라는 점일 것이다. 이 게시판에 앞어 간단한 AS3프로젝트를 통해 3D를 단 몇줄도 안되는 코드로 구현했던 것을 보면 그 의미를 알 것이다. 또한 AS3를 하다보면 매우쉽게 데이터통신, 데이터제어, 각종 미디어 기술지원, Flex, AIR로의 개발확장성등으로 인해 C++, Java와는 또 다른 재미를 느끼게 될 것이다.

     

     

    ActionScript 3.0 공부하자.

     

    AS3는 얼마든지 공부할 수 있다. 좋은 동영상 강좌도 있다.

    AS3 강좌모음 : http://ddongkang.tistory.com/73

     

    AS3 학습을 위해 아래 링크의 문서와 친해지자.(한글이라서 좋다!)

    http://help.adobe.com/ko_KR/ActionScript/3.0_ProgrammingAS3/

    http://help.adobe.com/ko_KR/AS3LCR/Flash_10.0/

     

    위 문서는 영문도 있다.

    http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/

    http://help.adobe.com/en_US/AS3LCR/Flash_10.0/

     

     

     

    Flash 기술에 대한 오해

     

    아래 글에 오해하시는 분들이 많으신 것 같아요. 아래 제 댓글을 보시고 제가 보는 관점에서 아래 글을 판단해주셨으면 합니다. ^^

     

    C++,  Java하시던 분(기초수준 및 서버개발만 주로 한 분들)이 AS3나 Flex를 접할때 잘못된 태도가 있다. 내가 좀 언어좀 하는데 그냥 쉽게쉽게 할 수 있겠지라는 마인드이다. 또는 Flash인데 그것도 언어야?... 이런 마인드.. 금물이다.

     

    AS3나 Flex도 그만의 독특한 구조와 기능이 있다. C++, Java만 했던 사람이 데이터 바인딩, 메타데이터태그, 이벤트 모델, 비디오제어, 음원제어, 마이크로폰 제어, 디스플레이객체 다루기, 응용애플리케이션구조,각종보안, XML 다루기등에 대해서 잘 알리가 없지 않은가? 그만큼 Flash 기술이 단순히 그래픽을 위한 기술이다라고 오해하는데서 비롯된다고 생각한다. Flash 기술은 이미 데스크탑에서 모바일, 각종운영체제, 각종 브라우져에 MS계열의 기술보다 더욱 빠르고 거대하게 확장되어 이미 우리 실생활에 적용되고 있다. 그러므로 AS3.0을 공부할때 너무 가벼운 마음으로만 공부한다는 생각은 버리자. 요즘 안드로이드 폰에 Flash 지원하고 앞으로 AIR로 각종 모바일 프로그램을 만들 수 있게 된다는 것을 생각하면 가벼운 기술은 아니구나라는 생각을 할 수 있을 것이다.(못믿겠으면 여기를 본다) Flash는 이미 클라이언트 기반을 넘어 서버기반의 기술도 지원해주어 진정한 RIA의 선봉장에 있다. 이러한 점을 잘 이해하고 Flex,AS3,AIR,Flash등을 공부하는 것이 좋겠다.

     

    DisplayObject 속성중에 cacheAsBitmap을 사용해 본 적이 있나요?

     

    cacheAsBitmap은 시각화된 객체를 Bitmap으로 캐싱해주는 역할을 하는 속성입니다. 이것이 true가 되면 DisplayObject는 Bitmap처럼 되는 것이지요. Flash에서 Bitmap과 상반되는 것이 Vector입니다. 일반적으로 Flash에서 그래픽적인 요소는 거의 Vector로 처리되지요. Bitmap과 Vector에 대한 차이점과 장단점을 굳이 설명안하겠습니다.

     

    단지 제가 궁금하고 해결하고 싶은 문제는 cacheAsBitmap속성이 적용된 것을 확대/축소할때 입니다.

    이 속성을 true로 하고 이동처리(마우스 Drag등)을 하는 것과 안한것은 엄청난(?)속도 차이를 보입니다. 복잡한 Graphic이 들어가고 이동이 필요한 경우 cacheAsBitmap을 true로 설정하여 애플리케이션의 퍼포먼스를 높힐 수 있지요. 하지만 cachAsBitmap은 메모리와는 적입니다. 가령 확대/축소할때 가장 큰 문제가 되는데 Bitmap이 확대/축소할때 이미지는 그 크기만큼 메모리를 잡아먹습니다. 아래 제가 쓴 글을 보시면 이해될 겁니다.

     

    [Flex/AIR] 메모리의 무서운 적! DisplayObject의 cacheAsBitmap 속성

     

    저는 이동시에는 cacheAsBitmap을 true로 설정하고 확대/축소할때는 false로 설정해서 퍼포먼스 개선을 하려고 합니다. 하지만 cacheASBitmap을 설정하더라도 적용되는 시점이 문제입니다. 확대/축소하기 전에 false로 지정하고 바로 확대/축소를 하면 메모리를 잡아먹는다는 것이지요. 다음 Render시점에서 확대/축소를 해야하는 것인가 생각이 드는데 아직 뾰족한 묘안이 없습니다.

     

    혹시 저와 같은 경험을 하셨다던가 아니면 해결책을 알고 계신분 있다면 댓글 부탁드리겠습니다.

     

     

    Adobe Flex가 아닌 Flash CS3, CS4, ActionScript 3.0로 개발해본 사람이면 Stage를 자주 접하게 된다. 하나의 ActionScript 3.0 애플리케이션은 Stage 하나를 가지고 있다. 이것은 모든 DisplayObject 계열의 객체가 addChild()를 통해 시각화 과정이 완료후에 그 객체의 stage속성을 통해 접근이 가능하다. 모든 DisplayObject 계열의 객체에서 stage속성에 접근할 수 있다는 것은 stage가 매우 중요하다는 것을 암시하고 있다. 그러므로 잘 알고 활용해야 삽질을 방지할 수 있지 않을까?



    1. Stage.invalidate()와 Event.RENDER 이벤트의 이해 


    Stage 클래스에는 invalidate() 메소드가 있다. 이것을 호출하면 다음 렌더링 시점에 Event.RENDER 이벤트를 발생시킨다. 모든 DisplayObject 객체는 stage에 접근이 가능하므로 Event.RENDER 이벤트를 청취할 수 있다. 이는 애플리케이션 퍼포먼스를 향상시키고자 하는 개발자들이 반드시 알고 있어야할 사항이라고 생각한다. Stage의 invalidate()와 Event.RENDER 이벤트를 이용해 쓸데없는 렌더링을 예방함으로써 퍼포먼스를 향상시킬 수 있기 때문이다. 그 이유를 명확하게 알기 위해 다음 예제를 보자.


    필자는 일반 ActionScript 3.0 프로젝트를 만들고 Sprite기반에서 애플리케이션을 만들고자 한다. 이때 두개의 클래스를 만드는데 하나는 Stage.invalidate()를 사용한 클래스이고 하나는 사용하지 않는것이다. 이 두개를 비교하면 Stage.invalidate()의 유용성을 확연히 알 수 있다.


    InvalidateTest.as

    package {
    	import flash.display.Sprite;
    	import flash.display.StageScaleMode;
    	import flash.display.StageAlign;
    
    	/**
    	 * Stage.invalidate() 테스트 메인 
    	 * @author Yongho, Ji (jidolstar@gmail.com)
    	 * @since 2009.6.1
    	 */ 
    	public class InvalidateTest extends Sprite
    	{
    		public function InvalidateTest()
    		{
    			super();
    			
    			stage.align = StageAlign.TOP_LEFT;
    			stage.scaleMode = StageScaleMode.NO_SCALE;
    			
    			var button1:NotUseInvalidateButton = new NotUseInvalidateButton();
    			button1.setWidth( 100 );
    			button1.setHeight( 100 );
    			button1.backColor = 0xff0000;
    			button1.lineColor = 0x00ff00;
    			button1.x = 20;
    			button1.y = 20;
    			addChild( button1 );
    			
    			var button2:UseInvalidateButton = new UseInvalidateButton();
    			button2.setWidth( 100 );
    			button2.setHeight( 100 );
    			button2.backColor = 0xff00ff;
    			button2.lineColor = 0x0000ff;
    			button2.x = 130;
    			button2.y = 20;
    			addChild( button2 );			
    		}
    
    	}
    }
    

    위처럼 두개의 버튼 클래스를 만들었다. 2개 모두 폭, 높이, 배경색, 선색을 지정하도록 되어 있다. 결과는 비슷하다. 하지만 내부적으로 NotUseInvalidateButton은 내부에 Stage.invalidate()를 사용하지 않았고 UseInvalidateButton은 사용했다. 소스를 보자.


    NotUseInvalidateButton.as

    package
    {
    	import flash.display.Sprite;
    
    	/**
    	 * Stage.invalidate()를 사용하지 않는 Button
    	 * @author Yongho, Ji (jidolstar@gmail.com)
    	 * @since 2009.6.1
    	 */ 
    	public class NotUseInvalidateButton extends Sprite
    	{
    		private var _height:Number = 50;
    		private var _width:Number = 50;
    		private var _backColor:Number = 0xffffff;
    		private var _lineColor:Number = 0x000000;
    		
    		public function NotUseInvalidateButton()
    		{
    			super();
    		}
    		
    		public function get backColor():Number
    		{
    			return _backColor;
    		}
    		
    		public function set backColor( value:Number ):void
    		{
    			_backColor = value;
    			drawNow();
    		}
    		
    		public function get lineColor():Number
    		{
    			return _lineColor;
    		}
    		
    		public function set lineColor( value:Number ):void
    		{
    			_lineColor = value;
    			drawNow();
    		}
    		
    		public function getWidth():Number
    		{
    			return _width;
    		}
    		
    		public function setWidth( value:Number ):void
    		{
    			_width = value;
    			drawNow();
    		}
    		
    		public function getHeight():Number
    		{
    			return _height;
    		}
    		
    		public function setHeight( value:Number ):void
    		{
    			_height = value;
    			drawNow();
    		}
    		
    		public function drawNow():void
    		{
    			trace( "[NotUseInvalidateButton] drawNow" );			
    			graphics.clear();
    			graphics.beginFill( backColor, 1 );
    			graphics.lineStyle( 1, lineColor, 1 );
    			graphics.drawRect( 0, 0, getWidth(), getHeight() );
    			graphics.endFill();
    		}
    		
    	}
    }
    


    UseInvalidateButton.as

    package
    {
    	import flash.display.Sprite;
    	import flash.events.Event;
    
    	/**
    	 * Stage.invalidate()를 사용하는 Button
    	 * @author Yongho, Ji (jidolstar@gmail.com)
    	 * @since 2009.6.1
    	 */ 
    	public class UseInvalidateButton extends Sprite
    	{
    		private var _height:Number = 50;
    		private var _width:Number = 50;
    		private var _backColor:Number = 0xffffff;
    		private var _lineColor:Number = 0x000000;
    		
    		private var isDrawNow:Boolean = false;
    		private var isInvalidated:Boolean = false;
    				
    		public function UseInvalidateButton()
    		{
    			super();
    			
    			this.addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
    		}		
    		
    		private function onAddedToStage( event:Event ):void
    		{
    			this.removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
    			
    			if( isInvalidated )
    			{
    				isInvalidated = false;
    				this.stage.addEventListener(Event.RENDER, onRender, false, 0, true );
    				this.stage.invalidate();
    			}
    		}
    		
    		private function onRender(event:Event):void
    		{
    			if( this.stage )
    			{
    				this.stage.removeEventListener( Event.RENDER, onRender, false );
    			}
    			if( isDrawNow )
    			{
    				isDrawNow = false;
    				drawNow();
    			}
    		}
    		
    		private function invalidate():void
    		{
    			if( this.stage )
    			{
    				this.stage.addEventListener(Event.RENDER, onRender, false, 0, true );
    				this.stage.invalidate();
    			}
    			else
    			{
    				isInvalidated = true;	
    			}
    		}
    		
    		
    		public function get backColor():Number
    		{
    			return _backColor;
    		}
    		
    		public function set backColor( value:Number ):void
    		{
    			_backColor = value;
    			isDrawNow = true;
    			invalidate();
    		}
    		
    		public function get lineColor():Number
    		{
    			return _lineColor;
    		}
    		
    		public function set lineColor( value:Number ):void
    		{
    			_lineColor = value;
    			isDrawNow = true;
    			invalidate();
    		}
    		
    		public function getWidth():Number
    		{
    			return _width;
    		}
    		
    		public function setWidth( value:Number ):void
    		{
    			_width = value;
    			isDrawNow = true;
    			invalidate();
    		}
    		
    		public function getHeight():Number
    		{
    			return _height;
    		}
    		
    		public function setHeight( value:Number ):void
    		{
    			_height = value;
    			isDrawNow = true;
    			invalidate();
    		}
    		
    		public function drawNow():void
    		{
    			trace( "[UseInvalidateButton] drawNow" );
    			graphics.clear();
    			graphics.beginFill( backColor, 1 );
    			graphics.lineStyle( 1, lineColor, 1 );
    			graphics.drawRect( 0, 0, getWidth(), getHeight() );
    			graphics.endFill();
    		}		
    		
    	}
    }
    
    

    디버깅 모드로 프로그램을 실행해보면 콘솔창에 다음과 같이 출력된다.


    [NotUseInvalidateButton] drawNow

    [NotUseInvalidateButton] drawNow

    [NotUseInvalidateButton] drawNow

    [NotUseInvalidateButton] drawNow

    [UseInvalidateButton] drawNow 


    NotUseInvalidateButton은 drawNow()메소드가 4번 호출되고 UseInvalidateButton은 1번만 호출된다. 이것만 보더라도 쓸데없는 렌더링을 줄여준 UseInvalidateButton 클래스가 더 잘 설계되었다는 것을 확인할 수 있다. 


    NotUseInvalidateButton를 잘 살펴보면 setWidth(), setHeight(), set backColor, set lineColor 를 호출할 때마다 drawNow() 메소드를 호출한다. 개발자라면 이 4가지 속성이 모두 적용된 다음에 drawNow()를 호출하여 한번만 그려주고 싶어질 것이다. 이때 유용하게 사용할 수 있는 것이 Stage.invalidate() 이다.


    UseInvalidateButton을 보자 NotUseInvalidateButton보다 약간 복잡해보이지만 잘 따라가보면 어렵지 않게 분석이 가능할 것이다. 결국 4개의 속성이 설정되면 invalidate() 메소드가 호출되고 Event.RENDER 이벤트를 받는 onRender()에서 drawNow()가 호출되도록 한다. 이렇게 되면 4개든 여러개든 할 것 없이 렌더링에 영향을 주는 다중 속성을 설정할 때마다 drawNow()를 호출하여 그림을 그려주는 부담을 줄일 수 있다. 


    그림을 그리는 행위는 일반 속성을 설정하는 것보다 더 비싼 비용을 가진다. 그러므로 그림을 그리는 것은 되도록 한번에 처리할 수 있도록 하는 것이 애플리케이션 퍼포먼스 향상의 중요한 요소가 될 수 있는 것이다. 



    2. Stage.invalidate()의 버그와 해결방법 


    하지만 이렇게 좋은 Stage.invalidate() 가 있음에도 불구하고 실제로 이 메소드를 호출해도Event.RENDER 이벤트가 발생하지 않아 당황스러운 경우가 필자에게 있었다. 그래서 어떤 것은 drawNow()가 호출되고 또 어떤 것은 호출안되는 상황이 발생한 것이다. 너무도 어이가 없지만 Flash Player 10으로 넘어오면서도 이 버그는 아직까지도 Fix가 되지 않은 모양이다. 



    위 링크는 모두 Adobe Bugs 관리 시스템에 등록된 것이다.(여러분도 가입해서 투표하길 바란다. 버그 시스템을 잘 이용하면 해결하지 못하는 문제도 쉽게 해결할 수 있을지 모른다. ^^)


    Event.RENDER가 발생한 중간에 stage.invalidate()가 호출되면 이게 무시가 되나보다. 그래서 동작상으로는 문제없지만 개발자에게는 버그처럼 느껴질 수 있을지 모르겠다. 어쨌든 필자도 이 문제로 고민을 하다가 한가지 해결방법을 찾았는데 그것은 Event.ENTER_FRAME 이벤트를 이용하는 방법이다. 


    Event.ENTER_FRAME을 이용해서 stage.invalidate()의 버그를 말끔히 해결할 수 있다. 다음 코드는NotUseInvalidateButton을 Event.ENTER_FRAME을 이용하는 것으로 바꿔본 것이다.


    NotUseInvalidateButton.as



    package
    {
    	import flash.display.Sprite;
    	import flash.events.Event;
    
    	/**
    	 * Stage.invalidate()를 사용하는 Button.
    	 * Event.ENTER_FRAME 로 Stage.invalidate() 버그 우회 
    	 * @author Yongho, Ji (jidolstar@gmail.com)
    	 * @since 2009.6.1
    	 */ 
    	public class UseInvalidateButton extends Sprite
    	{
    		private var _height:Number = 50;
    		private var _width:Number = 50;
    		private var _backColor:Number = 0xffffff;
    		private var _lineColor:Number = 0x000000;
    		
    		private var isDrawNow:Boolean = false;
    		private var isInvalidated:Boolean = false;
    				
    		public function UseInvalidateButton()
    		{
    			super();
    			
    			this.addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
    		}		
    		
    		private function onAddedToStage( event:Event ):void
    		{
    			this.removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
    			
    			if( isInvalidated )
    			{
    				isInvalidated = false;
    				this.stage.addEventListener(Event.RENDER, onRender, false, 0, true );
    				this.stage.addEventListener(Event.ENTER_FRAME, onRender, false, 0, true );
    				this.stage.invalidate();
    			}
    		}
    		
    		private function onRender(event:Event):void
    		{
    			if( this.stage )
    			{
    				this.stage.removeEventListener( Event.RENDER, onRender, false );
    				this.stage.removeEventListener( Event.ENTER_FRAME, onRender, false );
    			}
    			if( isDrawNow )
    			{
    				isDrawNow = false;
    				drawNow();
    			}
    		}
    		
    		private function invalidate():void
    		{
    			if( this.stage )
    			{
    				this.stage.addEventListener(Event.RENDER, onRender, false, 0, true );
    				this.stage.addEventListener(Event.ENTER_FRAME, onRender, false, 0, true );
    				this.stage.invalidate();
    			}
    			else
    			{
    				isInvalidated = true;	
    			}
    		}
    		
    		
    		public function get backColor():Number
    		{
    			return _backColor;
    		}
    		
    		public function set backColor( value:Number ):void
    		{
    			_backColor = value;
    			isDrawNow = true;
    			invalidate();
    		}
    		
    		public function get lineColor():Number
    		{
    			return _lineColor;
    		}
    		
    		public function set lineColor( value:Number ):void
    		{
    			_lineColor = value;
    			isDrawNow = true;
    			invalidate();
    		}
    		
    		public function getWidth():Number
    		{
    			return _width;
    		}
    		
    		public function setWidth( value:Number ):void
    		{
    			_width = value;
    			isDrawNow = true;
    			invalidate();
    		}
    		
    		public function getHeight():Number
    		{
    			return _height;
    		}
    		
    		public function setHeight( value:Number ):void
    		{
    			_height = value;
    			isDrawNow = true;
    			invalidate();
    		}
    		
    		public function drawNow():void
    		{
    			trace( "[UseInvalidateButton] drawNow" );
    			graphics.clear();
    			graphics.beginFill( backColor, 1 );
    			graphics.lineStyle( 1, lineColor, 1 );
    			graphics.drawRect( 0, 0, getWidth(), getHeight() );
    			graphics.endFill();
    		}		
    		
    	}
    }
    


    위에서 stage.addEventListener( Event.ENTER_FRAME )과 stage.removeEventListener( Event.ENTER_FRAME ) 이 추가된 것을 확인하자. 무작정 이벤트를 청취하고 있으면 안되므로 적절하게 삭제도 하고 있다. 


    이렇게 처리함으로써 stage.invalidate()가 제대로 작동안하더라도 drawNow()메소드가 호출이 안되는 경우는 없게 된다.



    3. fl.core.UIComponent 수정하기 


    Flash의 UIComponent 를 보면 이것 stage.invalidate() 때문에 렌더링이 안되는 경우가 종종 발생한다고 한다. 필자는 Flash는 해본적이 없기 때문에 확실하게 모르지만 이것도 Event.ENTER_FRAME 을 이용해 해결할  수 있다. 그 방법은 다음 링크를 참고한다.


    How to Fix the Flash CS3 Components


    UIComponent의 callLater()가 어떻게 동작하는 것인지 이것을 보고 감을 잡을 수 있을 것이다. 결국  Event.RENDER, Event.ENTER_FRAME 으로 한다!


    4. mx.core.UIComponent의 무효화 메소드들


    Flex의 UIComponent에는 invalidateDisplayList(), invalidateProperties(), invalidateSize()와 같은 invalidate() 메소드가 존재한다. 이는 앞선 메소드들의 호출에 대해 각각 updateDisplayList(), commitProperties(), measure() 메소드가 다음 렌더링 시점에 호출되도록 하고 있다. 이는 invalidate/validate 패턴이다. 


    재미있게도 Flex에서는 Stage.invalidate()에서 처럼 동작하지 않는 버그는 존재하지 않는다. 어떻게 된 것일까?


    사실 Flex 내부를 살펴보면 Stage.invalidate() 와 Event.ENTER_FRAME을 이용해 invalidate 계열의 메소드를 처리하도록 되어 있다. UIComponent 부터, LayoutManager, SystemManager 를 들춰보면 Event.RENDER와 Event.ENTER_FRAME을 가지고 invalidate/validate 패턴을 구현하고 있다. (Flex 개발자도 어쩔 수 없었나보다. ㅡㅡ;;) 


    이에 대한 자료는 아래 링크를 읽어보면 되겠다.


    Flex internals: Setting a button label



    Flex만 접해보고 ActionScript 3.0 학습에 소홀히 했다면 절대 이런 문제를 발견할 수 없었을 것이다. 




    정리하며


    Stage.invalidate()가 호출할 때 때떄로 Event.RENDER가 호출되지 않는 문제는 버그가 아닐 수 있다. 원래 그렇게 만들어졌을지도 모른다. 하지만 개발자는 이것을 버그로 여긴다. 왜냐하면 보통 개발할때는 그런 것은 생각안하고 메뉴얼만 보고 당연히 그러겠지 생각하기 때문이다. 좀 황당하지만 버그 아닌 버그로 Flex 까지 다 까보게 되었다 ㅡㅡ;


    Event.RENDER, Stage.invalidate() 모를때는 setTimeout()과 Timer를 이용해 invalidate/validate 패턴을 구현했었다. 아~ 무식은 용감하다. ㅋ



    Flash에서는 Remoting 호출을 위한 클래스가 존재하지 않는다. NetConnection을 가지고 할 수 있으나 Remoting 호출을 위한 전용 클래스가 아니기 때문에 실용적이지 못하다.

    Flex에서는 Remoting 호출을 위해서 RemoteObject 클래스가 있다. 하지만 Flex 전용이라 Flash CS3, 4 개발자는 쓸 수 없다.

    여기서는 NetConnection을 한번 wrapping하여 Remoting 호출을 구현한 Service 클래스를 소개한다. 이 Service 클래스는 byteArray.org 블로그 운영자가 만든 것으로 필요할 때 사용하면 매우 유용할 것이라 생각한다.

    mport org.bytearray.remoting.Service;
    import org.bytearray.remoting.PendingCall;
    import org.bytearray.remoting.events.FaultEvent;
    import org.bytearray.remoting.events.ResultEvent;
     
    var service:Service=new Service("HelloRemoting",
    "http://localhost:8001/amfphp/gateway.php");
     
    var pendingCall:PendingCall=service.sayHello("remoting");
    pendingCall.addEventListener(ResultEvent.RESULT,onResult);
    pendingCall.addEventListener(FaultEvent.FAULT,onFault);
     
    function onResult(e:ResultEvent):void{
    trace(e.result);
    }
     
    function onFault(e:FaultEvent):void{
    trace(e.fault);
    }

    사용법은 위처럼 너무 간단하다. AMFPHP, OpenAMF등으로 Remoting 서비스를 위한 서버를 구축하고 클라이언트는 Flash를 통해 개발하려는 사람에게 매우 유용할 듯 싶다. 또는 Flex가 아닌 순수 ActionScript 3.0 으로만 개발하려는 사람에게도 괜찮을 것 같다.



    더 자세한 내용은 아래에 이 코드를 만든 원저자의 글을 보길 바란다.


    Making Flash Remoting easier in Flash CS3


    ByteArray.org에 기존 Flash Player 9에서 사용되는 corelib의 JPGEncoder보다 더 빠른 Flash Player 10용으로 제작된 JPGEncoder를 만들어 공개했다. 더 빠를 수 있었던 것은 VectorBitmapData.setVector() 때문이다. 기존 Array 형태보다 글쓴이 컴퓨터에서는 2.5배 빠르다고 한다. 아래 프로그램에서 테스트 할 수 있다. 2880 x 2800 비트맵데이타를 encoding 하도록 만들어졌다.

     

     

     

    필자는 아직 여러가지 문제로 Flash Player 10용으로 개발하지 못하고 있어 아쉽지만 위와 같은 기능을 앞으로 잘 사용하면 속도개선에 큰 도움이 될 것이라 판단이 된다.

     

    Flex, Flash, ActionScript, AIR....

    Adobe RIA 기술을 처음 접해본 이들에게 이 용어들의 구분은 매우 생소하다. 앞에 3개는 모두 Flash Player에서 돌아가는 SWF파일을 만들어주는 툴 및 언어이다. AIR는 이러한 것을 확장해서 데스크탑 영역까지 애플리케이션을 제작할 수 있는 기술이라고 할 수 있다.

     

    많이 헷갈리는 것중에 하나가 바로 Flex, Flash, ActionScript 의 구분이다. ActionScript는 Flex, Flash 애플리케이션을 개발하는 가장 핵심이면서 기반이 되는 언어이다. Flex는 ActionScript 3.0을 확장해 RIA를 지원하기 위한 일종의 프레임워크이다. Flash는 ActionScript 초기 시절부터 있는 일종의 툴로서 이펙트 및 다양한 효과를 제작하는데 적절하도록 구성된다. 결국 Flex, Flash의 태생은 ActionScript 이고 어떤 목적을 가지고 제작하느냐에 따라 Flex, Flash로 구분해서 개발한다. 물론 어떤 것을 선택하든지 결과물은 SWF이다.

     

    재미있는 사실은 Flash는 뭔가 디자인 중심적으로 느껴지는 반면, Flex는 개발적이고 기술적으로 여겨는 풍토가 있다. Flash 개발자라고 말하는 것보다 Flex 개발자라고 하면 연봉협상에도 유리할지 모른다. 하지만 Flash 개발이든 Flex 개발이든 어떤 애플리케이션을 만드냐에 따라 선택이 달라지는 것이지 개발의 질이 달라지는 것은 절대 아니다. 여기서 선택이라는 것은 가령 이렇다. 기업솔루션을 구축해야하는 상황이면 서버 구성 및 데이타 통신, 데이터 관리, 각종 컴포넌트를 아낌없이 지원해주는 Flex로 개발하는 것이 좋다. 하지만 Google Map과 같이 Flex 컴포넌트를 전혀 사용하지 않는다면 Flash 기반이나 순수 ActionScript 기반으로 개발하는 것이 맞다.

     

    Adobe에서 Flex Builder 3의 다음 버전을 Flex가 아닌 Flash Builder 4로 지정하기로 했다. Flash Builder 4는 현재 Flash CS4와 같은 툴이 아니라 지금의 Flex Builder와 같이 Eclipse기반으로 만들어진 툴이다. 또한 Flex 4 SDK(현 Flex Gumbo)를 기반으로 Flex 개발환경을 지원한다. 결국 그런거다. Adobe RIA기술의 핵심은 Flash다. 그리고 Flex도 결국 Flash다. 다만 Flex SDK를 기반으로 제작하면 Flex SDK로 만들어진 Flash 애플리케이션인 것이다.

     

    차기 버전이 Flex Builder 4 대신 Flash Builder 4로 지정한 것은 여러모로 바람직해 보인다. 일단 같은 SWF 결과물을 만들어 준다는 암시를 지니기 때문에 의미전달이 쉬워진다. 겉모습은 전부 Flash이지만 개발방법은 선택하기 나름인 것이다. Flex SDK를 사용하면 그 사람은 여전히 Flex 개발자인 것이다. 앞으로 디자이너와 개발자간에 협력 도구인 Flash Catalyst는 Flash Builder와 매우 자연스럽게 연동이 된다. 그런데 어떤것은 Flex, 어떤 것은 Flash, 이렇게 되면 뭔가 섞일 수 없는 느낌이 든다.

     

    2009년 6월 쯤에 1차 베타버전이 나오고 4분기면 정식 버전이 출시될 것이다. 아무튼 기존 보다 개발의 편의성을 극대화 시킬 수 있는 Flash Builder 4가 나오길 기대한다.

     

    이것만은 기억하자.

    이제 더 이상 Flex는 Flex Builder를 지칭하지 않는다. Flex는 Flex SDK를 지칭하며 그것을 이용해서 개발하는 툴은 Flash Builder 4인 것이다.

    Flash Builder 4는 다음 링크를 통해 다운받으세요.
    http://www.adoberia.co.kr/pds/down.html?src=text&kw=000026 

    Flex Builder에서 라이브러리 프로젝트를 구성하다가 컴파일시 "unable to export SWC oem" 에러가 발생하며 SWC를 생성하지 못하는 경우가 종종 발생한다. 대부분의 경우, 라이브러리 빌드 Assets 경로에 등록한 파일의 경로가 강제로 수정되거나 삭제되었을 때 발생한다. 이 에러를 해결하기 위해 다음과 같이 진행해보자.

     

    이 Assets 경로는 SWC로 만들때 필요한 자원을 포함하기 위한 것으로 comps 컴파일러의 옵션중에 -include-file 을 주는 것과 동일하다.

     

    만약 존재하는 asset이 Assets 리스트에 존재하는데도 불구하고 에러가 발생했다면

     

    1. Project 메뉴 > Properties > Flex Library Build Path > Assets 탭

    2. asset을 uncheck한다.

    3. OK버튼을 누른다.

    4. 다시 똑같이 돌아가서 해당 asset을 re-check한뒤 OK버튼을 누른다.

     

     

    만약 존재하지 않는 asset이 Asset 리스트에 등록되어 있어 에러가 발생했다면 임시로 해당 asset을 추가하는 방법으로 해결한다.

     

    1. New > File 에서  하나의 파일을 만든다.

    2. Project 메뉴 > Properties > Flex Library Build Path > Assets 탭

    3. 새로 만든 파일을 check한다.

    4. OK 버튼을 누른다.

    5. 다시 돌아가 새로운 파일을 uncheck한 뒤 그것을 삭제한다.

     

     

    같은 에러가 발생한 분들에게 도움이 되었으면 한다. ^^

    대부분의 Adobe RIA관련 개발자들은 AIR, Flex, Flash 애플리케이션을 개발하기 위해 Flash IDE또는 Flex Builder를 많이 사용할 것 입니다. 또는 FDT(Flash Development Tools)라는 것도 쓰고요. 그런데 이들 툴의 단점은 유료라는 겁니다.

     

    이런 툴이 없어도 Flex, AIR의 경우 개발이 가능하다만 개발툴없이 개발하는 것은 그만큼 생산력이 떨어지지요.

     

    지금 소개하는 FlashDevelop은 Flash 기반 개발툴입니다. 중요한 것은 무료인데다가 개발도 큰 불편함이 없다는 장점이 있습니다. 또한 수시로 업데이트되어 관리가 되는 툴입니다. FlashDevelop은 일단 Flex Builder나 FDT에 비해 가볍고, AS2, AS3 환경에서도 모두 개발이 가능하다는 장점이 있습니다. 몇가지 기능적 제한(?)이 있을지 모르겠지만 개발하는데 크게 무리가 없다는 생각이 듭니다. 제게 필요한 ANT 개발 및 SVN 소스 관리가 되는지는 잘 모르겠군요.

     

    우리나라에서도 FlashDevelop을 이용해 개발하시는 분들이 꽤 있나봅니다. Naver 카페에 "FlashDevelop을 쓰는 사람들"이 만들어졌더군요. 올해 4월 30일에 만들어졌으니 1개월도 안된 신생 카페입니다. 그래도 벌써 회원수가 100명이 넘었습니다. FlashDevelop에 대한 정보를 공유하고자 하는 사람에게 매우 유용할 것 같습니다. 필자도 FlashDevelop를 많이 써본적 없고 관련 정보에 매말라 있었는데 이렇게 좋은 카페가 생겨서 흐뭇하네요. 기회가 닿으면 FlashDevelop으로도 개발해보고 싶네요.

     

    좋은 카페를 만들어 주신 재규어님께 감사합니다. ^^

     

     

     

    + Recent posts