몇 일전 저는 뜻하지 않게 감동적인 선물을 받았습니다. "마로의 꿈 - 액션스크립트 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)

아래 언급한 내용이 정확한 건지는 나도 확신이 들지 않는 부분도 있다. 동적,정적 언어에 대한 교양을 쌓아본적도 없고 단순히 블로그와 여러 자료를 읽어보고 내린 나의 결론일 뿐이다. 이 생각을 이해하려면 먼저 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을 참고할 수 있게 되고 이런건 컴파일 타임에 에러를 발생하지 않고 왜 그런지 이유 조차 모를 수밖에 없기 때문이다.

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


이번에 남아공 월드컵이 있어 스타플(http://starpl.com) 에서 관련 이벤트를 하고 있습니다.


여기서는 개발자분이라면 다들 궁금해하시는 기술적(?) 설명을 드릴까 합니다.

축구게임은 Flash로 만들었습니다. Flash로 게임제작은 처음해보는 것이라 생각보다 여러 어려움이 있었습니다.
  • 제작툴 : Flash Builder 4.0 Eclipse plug-in 버전
  • 언어 : ActionScript 3.0 (Flex는 사용안함)
  • 동작환경 : Flash Player 10 이상
  • 사용한 공개라이브러리 : Papervision3d(3d엔진), jiglibflash(3D 물리엔진), TweenMax(트윈엔진)
  • 제작기간 : 10일
  • 키워드 : 축구게임엔진, 물리엔진, 3D, 게임상태변화, 사운드, 랭킹시스템, MVC

축구라는 소재를 어떻게 풀어가야할까 고민을 많이 했습니다. 그러다가 3D와 물리엔진을 도입할 필요를 느꼈고 간단하게 Away3d+jiglibflash 또는 Papervision3d+jiglibflash 로 테스트를 해봤습니다. 관련 내용은 이미 http://blog.jidolstar.com/689 에 공개했었고요.

하지만 게임이 만만치 않은게... 저 정도로 끝나지 않는다는 겁니다. 자원관리, 속도향상, 게임상태변화, 사운드등 여러가지 다양한 문제가 있더군요. 하나하나 해결해 가면서 완성해 나갔습니다. 가장 어려웠던 부분은 사운드였습니다. 디자인 부분이야 우리 회사에 막강한 캐릭터 디자이너가 있어서 문제가 없었는데... 사운드는 그런 사람이 전혀 없다보니 자원을 찾고 편집하는데 시간을 너무 소비했죠. 물론 무료를 찾느라고 시간을 다 보낸겁니다. 역시 개발자가 디자인, 음원편집을 할 수 없듯이 그에 적절한 사람을 알아두는 것도 좋을 것 같습니다.

전체적으로는 정말 간단한 게임입니다. 너무 단순해서 10일이나 걸려서 만든게 시간이 아깝다는 생각이 드네요. 다음에 만들면 더 속도를 낼 수 있겠죠? ^^

아래는 스크린 샷입니다. 구경하시죠.




하는 방법은 매우 단순합니다. 공을 찰 지점을 마우스로 선택하고 마우스 Down으로 힘조절을 한뒤 마우스 Up하면 공이 차지는 방식입니다. 공 차는 지점을 정확히 잡고 힘조절을 잘할 필요가 있습니다.

환경적 요소로 골대, 골키퍼, 수비수, 바람등이 있습니다. 레벨이 올라갈때마다 수비수가 늘어나며, 바람도 더 세집니다. 1골당 점수도 높아지죠. 골위치도 랜덤하게 되므로 높은 점수 얻는건 쉽지 않을겁니다. 스타플(http://starpl.com/)에 연계되어 최고점수를 기록하면 자신의 별에 기록되는 기능도 포함합니다.

이 게임은 2D 처럼 보이지만 그건 배경만 그렇고 실제 움직임은 전부 3D입니다. 골대도 안보이지만 3D 골대가 배치 되어 있죠. ^^ 만약 Papervision3D와 jiglibflash와 같은 공개라이브러리를 사용하지 않았다면 10일이라는 짧은 시간안에 이런 게임 만드는 것은 거의 불가능입니다. 나름 고급기술 사용했다는... ㅋ

하지만 Flash에서 3D 엔진과 물리엔진은 속도에 지극히 악영향을 줍니다. 그래서 적절한 합의점을 찾아가야 합니다. 완성본에는 공의 그림자도 모두 표현되어 있었지만 저급 PC에서 FPS가 나오지 않아서 제외시킨게 그 예이죠. 아쉽다는.... 그리고 Papervision3D 보다 Away3dlite를 이용했으면 더 좋았을 뻔 했습니다. 아무래도 Flash Player 10에서 3D API를 제공하기 때문에 이를 이용해서 만들어진 Away3dlite가 퍼포먼스 측면에서는 더 이득일 겁니다. 하지만 표현력에 있어서는 Papervision3D가 더 우세라는...

3D 물리엔진으로 jiglibflash를 사용했습니다. wow엔진이라는 것이 있는데... 이는 망한듯 합니다. 더 이상 업데이트도 안되고요. 그나마 jiglibflash가 튜토리얼도 있고 어느정도 예시도 있어서 사용했죠. jiglibflash는 papervision3d, away3d, away3dlite, sandy3d등 다양한 3D 엔진에 대응하여 물리엔진을 도입할 수 있도록 반쪽짜리 추상층을 제공합니다. 아무튼 이것을 이용하면 별 무리없이 물리엔진과 같은 효과를 만날 수 있죠. 하지만 FPS에 따라서 다르게 결과가 나오는 부분이 있어서 그다지 실용적이지는 못합니다. 말이 물리엔진이지... 그냥 눈속임이라는... 어쨌든 그나마 있어서 유용하게 썼습니다.

이 게임은 아쉽게도 1회성 이벤트 용입니다.

축구게임 이벤트 : http://starpl.com/#/main/event/big/ing/view/48

이벤트용이므로 게임을 즐기시려면 스타플(http://starpl.com)에 가입하셔야 합니다. ^^

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

한창 축구게임을 만들고 있다. 이에 관련되어 테스트 해본 코드를 공유해본다.

3D를 표현하기 위해 Papervision3d와 물리엔진을 표현하기 위해 jiglibflash를 이용했다. 공을 클릭하면 임의의 힘이 주어지고 클릭한 부분을 참조하여 방향이 결정된다. 키보드 A,S,D,W로 카메라 조정이 된다.

원더플(wonderfl.net)에 소스를 올려두었으니 부디 많은 Fork가 이뤄져서 더 좋은 모습으로 탈바꿈 되는 모습을 보고 싶다. ^^

http://wonderfl.net/c/j8ly

package {
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.BlendMode;
	import flash.display.Graphics;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageQuality;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.KeyboardEvent;
	import flash.events.MouseEvent;
	import flash.filters.BlurFilter;
	import flash.geom.Vector3D;
	import flash.system.IME;
	import flash.system.IMEConversionMode;
	import flash.ui.Keyboard;
	import flash.ui.Mouse;
	import flash.ui.MouseCursor;
	import flash.utils.getTimer;
	
	import jiglib.cof.JConfig;
	import jiglib.geometry.JBox;
	import jiglib.geometry.JCapsule;
	import jiglib.geometry.JPlane;
	import jiglib.geometry.JSphere;
	import jiglib.geometry.JTerrain;
	import jiglib.math.JMatrix3D;
	import jiglib.physics.RigidBody;
	import jiglib.plugin.papervision3d.Papervision3DPhysics;
	import jiglib.plugin.papervision3d.Pv3dMesh;
	import jiglib.plugin.papervision3d.pv3dTerrain;
	
	import net.hires.debug.Stats;
	
	import org.papervision3d.Papervision3D;
	import org.papervision3d.core.utils.InteractiveSceneManager;
	import org.papervision3d.core.utils.Mouse3D;
	import org.papervision3d.events.FileLoadEvent;
	import org.papervision3d.events.InteractiveScene3DEvent;
	import org.papervision3d.lights.PointLight3D;
	import org.papervision3d.materials.BitmapMaterial;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.materials.MovieAssetMaterial;
	import org.papervision3d.materials.MovieMaterial;
	import org.papervision3d.materials.WireframeMaterial;
	import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
	import org.papervision3d.materials.shaders.FlatShader;
	import org.papervision3d.materials.shaders.GouraudShader;
	import org.papervision3d.materials.shaders.LightShader;
	import org.papervision3d.materials.shaders.PhongShader;
	import org.papervision3d.materials.shaders.ShadedMaterial;
	import org.papervision3d.materials.special.FogMaterial;
	import org.papervision3d.materials.utils.MaterialsList;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.objects.parsers.Collada;
	import org.papervision3d.objects.parsers.DAE;
	import org.papervision3d.objects.primitives.Cube;
	import org.papervision3d.objects.primitives.Cylinder;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.view.BasicView;
	import org.papervision3d.view.layer.ViewportLayer;
	import org.papervision3d.view.layer.util.ViewportLayerSortMode;
	
	[SWF(width="465", height="465", backgroundColor="#000000", frameRate="24")]
	/**
	 * Papervision3D + jiglibflash 을 이용한 축구게임 프로토 타입 
	 * 간단하게 만들어 봤습니다. Fork를 통해 향상되고 멋진 기능을 가진 게임이 탄생하기 바랍니다. 
	 * 1. click ball
	 * 2. press key w,a,s,d
	 * 
	 * author : Yongho Ji, jidolstar@gmail.com
	 */ 
	public class SoccerGamePrototype extends BasicView {
		private var _physics:Papervision3DPhysics;
		private var _light:PointLight3D;
		private var _vpBallLayer:ViewportLayer;
		
		private var _ground:Plane;
		private var _ball:RigidBody;
		private var _ballRadius:Number = 30;
		
		private var _isShooting:Boolean = false;
		private var _isIniting:Boolean = false;
		private var _firstTime:Number;
		private var _ballX:Number;
		private var _windForce:Vector3D;
				
		private var _keyForward:Boolean=false;
		private var _keyBackward:Boolean=false;
		private var _keyLeft:Boolean=false;
		private var _keyRight:Boolean=false;
		
		/**
		 * 생성자 
		 */ 
		public function SoccerGamePrototype() {
			super(465, 465, true, true, "Target");
			configStage();
			configScene();
			initPhysics();
			createBall();
			createGround();
			createGoalNet();
			createGoalPost();
			createBox();
			startRendering();
			addEventHandler();
			addChild(new Stats);
		}
		
		/**
		 * 스테이지 환경 설정 
		 */ 
		private function configStage():void {
			stage.scaleMode=StageScaleMode.NO_SCALE;
			stage.align=StageAlign.TOP_LEFT;
			stage.quality=StageQuality.BEST;
			stage.frameRate = 24;
			stage.showDefaultContextMenu = false;
		}
		
		/**
		 * 이벤트 핸들러 함수 등록 
		 */ 
		private function addEventHandler():void {
			stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
			stage.addEventListener(KeyboardEvent.KEY_UP, keyUpHandler);
		}
		
		/**
		 * 3D 환경 기본 설정 
		 */ 
		private function configScene():void {
			viewport.containerSprite.sortMode=ViewportLayerSortMode.INDEX_SORT;
			viewport.containerSprite.addLayer(_vpBallLayer=new ViewportLayer(viewport, null));
			_vpBallLayer.sortMode=ViewportLayerSortMode.Z_SORT;	

			camera.x=-500;
			camera.y=200;
			camera.z=0;
			
			_light=new PointLight3D(true, false);
			_light.x=-400;
			_light.y=300;
			_light.z=-100;
		}
		
		/**
		 * 물리엔진 기본 설정 
		 */ 
		private function initPhysics():void {
			_physics=new Papervision3DPhysics(scene, 10);
		}
		
		/**
		 * 바닥 생성  
		 */ 
		private function createGround():void {
			_ground = new Plane( new WireframeMaterial(0xff0000), 1000, 1000, 10, 10 );
			scene.addChild(_ground);
			var jGround:JPlane = new JPlane(new Pv3dMesh(_ground));
			jGround.setOrientation(JMatrix3D.getRotationMatrixAxis(90));
			_physics.addBody(jGround);
			jGround.y = 0;
			jGround.friction = 10;
		}
		
		/**
		 * 그물망 생성
		 */ 
		private function createGoalNet():void {
			var i:Number, dx:Number = 15, dy:Number = 15, dd:Number = 15;
			var w:Number = 600, h:Number = 300, d:Number = 100;
			var movie : Sprite = new Sprite();
			var g:Graphics = movie.graphics;
			var jGoalNet:RigidBody;
			var material:MovieMaterial,materials:MaterialsList;
			
			//Back
			g.lineStyle(3,0xaaaaaa,2);
			for( i = 0; i <= w; i+=dx ) {
				g.moveTo(i,0);
				g.lineTo(i,h);
			}
			for( i = 0; i <= h; i+=dy ) {
				g.moveTo(0,i);
				g.lineTo(w,i);
			}
			material = new MovieMaterial(movie,true,false,false,null);
			material.oneSide = false;
			materials=new MaterialsList();
			materials.addMaterial(material, "back");
			jGoalNet = _physics.createCube( materials, w, 100, h, 5, 1, 5, 0, 0 );
			jGoalNet.movable = false;
			jGoalNet.rotationY = 90;
			jGoalNet.material.restitution = 0.01;
			jGoalNet.moveTo(new Vector3D(600+50,150,0,0));
			
			//Top
			movie = new Sprite;
			g = movie.graphics;
			g.lineStyle(3,0xaaaaaa,2);
			for( i = 0; i <= w; i+=dx ) {
				g.moveTo(i,0);
				g.lineTo(i,d);
			}
			for( i = 0; i <= d; i+=dd ) {
				g.moveTo(0,i);
				g.lineTo(w,i);
			}			
			jGoalNet = _physics.createCube( materials, w, 1, d, 3, 1, 1, 0, 0 );
			jGoalNet.movable = false;
			jGoalNet.rotationY = 90;
			jGoalNet.rotationZ = 90;
			jGoalNet.material.restitution = 0.01;
			jGoalNet.moveTo(new Vector3D(550,300,0,0));
			
			//Left
			movie = new Sprite;
			g = movie.graphics;
			g.lineStyle(3,0xaaaaaa,2);
			for( i = 0; i <= d; i+=dd ) {
				g.moveTo(i,0);
				g.lineTo(i,h);
			}
			for( i = 0; i <= h; i+=dy ) {
				g.moveTo(0,i);
				g.lineTo(d,i);
			}			
			jGoalNet = _physics.createCube( materials, d, 1, h, 1, 1, 1, 0, 0 );
			jGoalNet.movable = false;
			jGoalNet.material.restitution = 0.01;
			jGoalNet.rotationY = -180;
			jGoalNet.moveTo(new Vector3D(550,h/2,-w/2,0));
			
			//Right
			jGoalNet = _physics.createCube( materials, d, 1, h, 1, 1, 1, 0, 0 );
			jGoalNet.movable = false;
			jGoalNet.material.restitution = 0.01;
			jGoalNet.moveTo(new Vector3D(550,h/2,w/2,0));
			
		}
		
		/**
		 * 볼 포스트 생성 - Cylinder 3개로 생성 
		 */ 
		private function createGoalPost():void {
			function createCapsule($radius:Number,$height:Number):JCapsule {
				var material:FlatShadeMaterial = new FlatShadeMaterial(_light, 0xFFFFFF, 0x555555, 5);
				var cylinder:Cylinder = new Cylinder(material,$radius,$height,15,1,-1,true,false);
				var jCapsule:JCapsule = new JCapsule(new Pv3dMesh(cylinder),$radius,$height);
				jCapsule.movable = false;
				jCapsule.material.restitution = 0.9;
				scene.addChild(cylinder);
				_physics.addBody( jCapsule );
				return jCapsule;
			}	
			
			var jCapsule:JCapsule;
			jCapsule = createCapsule(10,300);
			jCapsule.moveTo(new Vector3D(500,150,-300,0));
			jCapsule = createCapsule(10,300);
			jCapsule.moveTo(new Vector3D(500,150,300,0));
			jCapsule = createCapsule(10,610);
			jCapsule.rotationX = 90;
			jCapsule.moveTo(new Vector3D(500,300-5,0,0));
		}
		
		/**
		 * 4개의 Box들 생성 
		 */ 
		private function createBox():void {
			var materials:MaterialsList=new MaterialsList();
			materials.addMaterial(new FlatShadeMaterial(_light, 0x00FF00, 0x555555, 5), "all");
			var box:RigidBody;
			for (var i:int=1; i < 5; i++) {
				box=_physics.createCube(materials, 100, 100, 100, 3, 3, 3);
				box.mass=1;
				box.x = 300;
				box.y=300 * i;
				_vpBallLayer.addDisplayObject3D(_physics.getMesh(box));
			}
		}
		
		/**
		 * 축구공 생성 
		 */ 
		private function createBall():void {
			var material:FlatShadeMaterial = new FlatShadeMaterial(_light, 0xFFFFFF, 0x555555, 105);
			_ball=_physics.createSphere(material, _ballRadius, 10, 8);
			material.interactive = true;
			_vpBallLayer.addDisplayObject3D(_physics.getMesh(_ball));
			_ball.x=-300;
			_ball.y=300;
			_ball.mass=1;
			_ball.friction=10;
			
			var mesh:DisplayObject3D = _physics.getMesh(_ball);
			mesh.addEventListener(InteractiveScene3DEvent.OBJECT_PRESS, press);
			
			//공을 누른다.
			function press($e:InteractiveScene3DEvent=null):void {
				mesh.removeEventListener(InteractiveScene3DEvent.OBJECT_PRESS, press );
				mesh.addEventListener(InteractiveScene3DEvent.OBJECT_RELEASE, release );
			}
			//공을 찬다!
			function release($e:InteractiveScene3DEvent=null):void {
				mesh.addEventListener(InteractiveScene3DEvent.OBJECT_PRESS, press );
				mesh.removeEventListener(InteractiveScene3DEvent.OBJECT_RELEASE, release );				
				shootBall();
			}			
		}
		
		/**
		 * 축구공을 찬다.
		 */ 
		private function shootBall():void {
			_isShooting = true;
			_ballX = _ball.x;
			_firstTime = getTimer();
			
			var mesh:DisplayObject3D = Pv3dMesh(_ball.skin).mesh;
			mesh.calculateScreenCoords(camera); //공의 스크린 좌표 계산. 3D->2D
			var kickPower:Number = Math.random()*500+200;
			var kickPosZTheta:Number = Math.tan( (stage.mouseX-mesh.screen.x-viewport.width/2)/_ballRadius )
			var kickPosYTheta:Number = Math.tan( (stage.mouseY-mesh.screen.y-viewport.height/2)/_ballRadius );
			var kickPowerX:Number = kickPower * Math.cos(kickPosYTheta)*Math.cos(kickPosZTheta);
			var kickPowerY:Number = kickPower * Math.sin(kickPosYTheta);
			var kickPowerZ:Number = kickPower * Math.cos(kickPosYTheta)*Math.sin(kickPosZTheta);
			_ball.addWorldForce(new Vector3D(kickPowerX,kickPowerY,kickPowerZ),_ball.currentState.position);
			_ball.addBodyTorque(new Vector3D(0, 0, 0));
			
			_windForce = new Vector3D( 0, 0, Math.random()*10-5);
		}
				
		/**
		 * 3D 렌더링, 물리엔진 가동, 키보드에 따른 카메라 이동, 축구공 액션 
		 */ 
		protected override function onRenderTick(event:Event=null):void {
			_physics.step(); 
			if( _isShooting ) {
				_ball.addWorldForce(_windForce,_ball.currentState.position);
				if( _ball.x > 500 || _ball.x < _ballX || getTimer() - _firstTime > 2000 ) {
					_isShooting = false;
					_isIniting = true;
					_firstTime = getTimer();
				}
				_ballX = _ball.x;
			}
			if( _isIniting ) {
				if( getTimer() - _firstTime > 2000 ) {
					_isIniting = false;
					_ball.x=-300;
					_ball.y=400;
					_ball.z = 0;
					_ball.setVelocity( new Vector3D(0,0,0) );
				}
			}
			moveCamera();
			super.onRenderTick(event);
		}
		
		/**
		 * 카메라 이동 
		 */ 	
		private function moveCamera():void {
			var dist:Number = 30;
			if (_keyForward) {
				camera.moveForward(dist);
			}
			if (_keyBackward) {
				camera.moveBackward(dist);
			}
			if (_keyLeft) {
				camera.moveLeft(dist);
			}
			if (_keyRight) {
				camera.moveRight(dist);
			}
		}
		
		/**
		 * 키보드 Down 핸들러 
		 */ 
		private function keyDownHandler(e:KeyboardEvent):void {
			if (e.keyCode == 229) {
				IME.conversionMode=IMEConversionMode.ALPHANUMERIC_HALF;
			}
			switch (e.keyCode) {
				case 87:
					_keyForward=true;
					break;
				case 83:
					_keyBackward=true;
					break;
				case 65:
					_keyLeft=true;
					break;
				case 68:
					_keyRight=true;
					break;
				
			}
		}
	
		/**
		 * 키보드 Up 핸들러 
		 */ 
		private function keyUpHandler(e:KeyboardEvent):void {
			switch (e.keyCode) {
				case 87:
					_keyForward=false;
					break;
				case 83:
					_keyBackward=false;
					break;
				case 65:
					_keyLeft=false;
					break;
				case 68:
					_keyRight=false;
					break;
			}
		}

	}
}




글쓴이 : 지돌스타(http://blog.jidolstar.com/689)
C로 이미지,구조체등 바이너리 데이터를 MySQL에 담는 방법을 알아보자.  또한 C로 저장한 바이너리 데이터를 Flash에서 엑세스하는 법도 다루겠다.

이 글을 이해하려면 기본적으로 C와 ActionScript 3.0, Flex 4에 대해 알아야 한다. 그리고 예제에서 테스트한 C코드는 전부 이클립스+CDT+MinGW 환경에서 작업한 것들이다. 이런 환경을 구축해 본적이 없다면 다음 글을 참고한다.

  • Eclipse Galileo에서 C,C++ 개발환경 구축하기 - CDT, MinGW 
  • Eclipse, MinGW, CDT 환경에서 C/C++과 MySQL 연동



  • 1. Binary 타입 데이터를 DB에 저장하는 것에 대해
    바이너리(Binary) 타입의 데이터를 DB에 저장한다는 것은 가령, 이미지나 사운드와 같은 데이터를 DB에 저장한다는 의미로 해석하면 편하다.

    Binary파일을 DB에 넣을때 어떤 형태로 넣을 수 있을까? 

    한가지 예는 익히 잘 알고 있는 Base64로 치환해서 text형태로 넣는 방식을 생각해볼 수 있다. Base64는 ASCII코드로 화면에 출력할 수 있는 64개 문자(ABCD...89+/e등)을 이용해 Binary 데이터를 Text로 표현해준다. 하지만 이 방식의 단점은 데이타를 64진수로 표현한 문자열이기 때문에 용량이 필연적으로 커지고 또 encode/decode를 해야하는 부담이 존재한다. base 64에 대해서 알고 싶다면 다음 링크를 보자.

    Tistory에서 블로그 데이터 백업파일은 XML이다. 이 XML에 이미지와 같은 바이너리 파일은 담을 수 없으므로 Base64로 변형해 담게된다. 단지 대체하는 문자의 순서가 표준 방식인 ABCD...89+/e 순이 아니라 Vezh...식인 점이 다를 뿐이다. 참고로 아래 링크에 우야꼬님이 Flash로 컨버팅 해놓은 것이 있다.


    티스토리에서 백업기능을 왜 XML로 했을까? XML은 화면에 출력해볼 수 있는 언어이다. 화면에 출력할 수 없는 Binary보다는 훨씬 사용하기 쉽고 공유하기 쉽다.

    Base64는 아스키 시대의 유물이다. 요즘에는 pc에서 모바일까지 UTF8을 지원해주므로 이제 Base64에 의존하지 않고 Base256과 같은 것을 만들 수 있다. 이는 꽤 유용하다. 아래 hika님의 블로그를 보면 ActionScript 3.0으로 이와 관련된 글이 있다. 참고 바란다.


    하지만 Binary를 text로 decode/encode하는 과정이 반복되는 환경에 Base64와 같은 것을 적용하면 오히려 부담이 된다. 그러므로 필요하다면 Binary는 직접 Binary 자체를 저장하는 것이 좋겠다. 

    많은 DB에 BLOB(Binary Large OBject) 타입을 지원한다. 이 타입을 이용하면 DB에 어떤 형태의 Binary 데이타든지 넣을 수 있게 된다. 이 타입은 Text와 거의 동일하며 Binary 데이터를 넣을 수 있는 것만 다르다.

    아래는 인터넷에서 찾은 BLOB에 대해 설명이다.
    컴퓨터에서, BLOB[블랍]은 대체로 이미지나 사운드 파일과 같은 하나의 커다란 파일을 말하며, 그 크기 때문에 특별한 방법으로 다루어져야한다. 에릭 레이몬드에 따르면, BLOB에 관한 주요 아이디어는 DBMS와 같은 파일 처리기가 BLOB을 어떻게 처리할 것인가를 해결하기 위해 파일을 이해할 방법이 없다는 것이다. 다른 자료들에서는, 이 용어가 커다란 데이터 객체를 지칭하기 위해, 그리고 이러한 것들을 다룰 때 존재하는 문제점들을 암시하기 위해 만들어졌다고 강조한다. BLOB을 다루는 애플리케이션은 영화나 TV 프로그램 등과 같은 대형 멀티미디어 객체들의 데이터베이스 저장이다. BLOB은 이미지, 비디오, 사운드 등과 같은 멀티미디어 객체들을 저장하기 위해 주로 사용된다. 그러나 모든 DBMS가 BLOB을 지원하는 것은 아니다.

    컴퓨터 그래픽에서, blob(소문자로 쓴 BLOB)은 "재미있는 모양 형태"를 갖는 시각적 객체로서, 유연하고, 애니메이션을 따른다.

    일반적으로, blob은 무정형이며, 정의를 내리기 힘든 객체이다. UFO 연구에서는 물론, 천문학에도 blob이라는 것이 있다. "The Blob"이라는 제목의 과학 공상영화도 있었다.


    2. 이미지를 DB에 저장하기
    사실 Binary타입의 일종인 이미지(jpg,png등)를 DB에 저장하는 예제는 정말 많다(php에서 만큼은...). 그래서 굳이 여기에 예제를 적을 필요가 있겠냐만은.. 요즘 C를 이용해 다양한 시도를 하는 만큼, 이 부분도 적어본다.

    필자는 앞서 Eclipse기반에서 C/C++ 개발을 위한 환경만들기에 관련된 글을 적었다.

    아래에 소개할 예제들은 모두 위 글에서 언급한 환경에서 작성되었음을 밝힌다.

    간단히 이미지를 저장할 수 있는 테이블을 만들어보자. DB는 MySQL을 사용한다.
    mysql> describe images;
    +-------+------------+------+-----+---------+-------+
    | Field | Type       | Null | Key | Default | Extra |
    +-------+------------+------+-----+---------+-------+
    | id    | int(11)    | NO   | PRI |         |       |
    | data  | mediumblob | YES  |     | NULL    |       |
    +-------+------------+------+-----+---------+-------+
    2 rows in set (0.00 sec)
    


    위와 같은 구조의 테이블을 만들것이다. 다음 Create문으로 위 테이블을 생성한다.

    CREATE TABLE `images` (
      `id` int(11) NOT NULL auto_increment,
      `data` mediumblob,
      PRIMARY KEY  (`id`)
    ) ENGINE=MyISAM DEFAULT CHARSET=utf8

    테이블을 만들때 data field가 mediumblob라는 것에 주목하자. 참고로 MySQL에서 BLOB타입은 Tiny BLOB(255, 2^8-1 bytes), BLOB(65,535=2^16-1 bytes), Medium BLOB(16777215=2^16-1 bytes), Long BLOB(4294967295=2^32-1 bytes)등을 지원한다.

    다음은 임의 크기의 이미지를 불러와 제작한 테이블에 저장하는 C코드이다. (공개된 PHP코드는 많은데 이외로 C코드는 많이 없다.)
    #define SOCKET int
    
    #include <stdio.h>
    #include <stdlib.h>
    #include <string.h>
    #include <mysql/mysql.h>
    
    #define DB_HOST "localhost or ip or domain"
    #define DB_USER "DB 접속 ID"
    #define DB_PASS "DB 접속 password"
    #define DB_NAME "데이타베이스 이름"
    
    int main(void) {
    	MYSQL *connection, conn;
    	FILE *fp;
    	unsigned long len, file_size;
    	int query_stat;
    	char *buf , *buf_to, *query, *stat = "INSERT INTO images(data) VALUES('%s')";
    
    	//DB 초기화 및 접속
    	mysql_init(&conn);
    	connection = mysql_real_connect(&conn, DB_HOST, DB_USER, DB_PASS, DB_NAME, 3306, (char*)NULL, 0);
    	if(connection==NULL) {
    		fprintf(stderr, "Mysql connection error : %s", mysql_error(&conn));
    		return EXIT_FAILURE;
    	} else {
    		printf("Mysql connected\n");
    	}
    
    	//이미지를 불러오기
    	fp = fopen("d:/image.png", "rb");
    	if(fp==NULL) {
    		fprintf(stderr, "image open error");
    		mysql_close(connection);
    		return EXIT_FAILURE;
    	}
    	rewind(fp);
    	fseek(fp,0,SEEK_END);
    	file_size = ftell(fp); //파일의 사이즈를 찾음
    	fseek(fp,0,SEEK_SET);
    	buf = (char*)malloc(file_size);
    	fread(buf, sizeof(char), file_size, fp); //파일을 읽어와 buf에 참고
    	fclose(fp);
    
    	//이미지내 escape string 적용
    	buf_to = (char*)malloc(file_size*2+1);
    	mysql_real_escape_string(connection, buf_to, buf, file_size); 
    
    	//Query 문 작성
    	query = (char*)malloc(strlen(stat)+file_size*2+1);
    	len = snprintf(query, strlen(stat)+file_size*2+1, stat, buf_to); 
    
    	//Query 문 실행
    	query_stat = mysql_real_query(connection, query, len); 
    	if(query_stat != 0) {
    		fprintf(stderr, "Mysql query error : %s\n", mysql_error(&conn));
    	}
    
    	//할당한 메모리 반환
    	free(buf);
    	free(buf_to);
    	free(query);
    
    	//DB 커넥션 닫기
    	mysql_close(connection);
    	return EXIT_SUCCESS;
    }
    

    위 코드는 d:/image.png 를 로드해 DB 테이블에 insert 하는 과정을 보여주고 있다. 실제로 테스트가 완료되었고 잘 동작한다.

    mysql_real_escape_string() 함수는 바이너리 데이터를 insert하기 위해 SQL insert 문을 작성하는데 있어서 '\0'과 같은 문자가 들어가는 것을 방지해준다. SQL insert문은 텍스트 데이터로 작성되어야 하므로 '\0'과 같은 문자가 중간에 삽입되어 있으면 그것이 문자열의 종료를 의미하기 때문에 이 함수의 호출은 필연적이다.

    mysql_real_escape_string() 함수의 2번째 인자는 to, 3번째 인자는 from이다. 즉 from에서 '\0'과 같은 문자를 피하도록(escape) "\\0"등으로 치환해줘 그것이 to에서 참조되도록 하는 것이다. 이때 to의 사이즈는 from의 2배+1 이어야 한다.  buf_to = (char*)malloc(file_size*2+1); 문에서도 볼 수 있듯이 buf는 file_size의 크기를 가지는데 buf_to는 그의 2배+1로 메모리를 할당했다. 그 이유는 최악의 상황에서 escape처리할 문자가 from데이터의 2배가 될 수 있기 때문이다. 그리고 마지막 +1은 문자열의 마지막은 항상 '\0' 처리가 되어야 하므로 그 공간을 만들어주는 것을 의미한다.

    mysql_real_escape_string()에 대해서는 다음 링크를 참고한다.


    Query문을 작성하는데 있어서 snprintf() 함수를 이용했다. 이 함수는 printf나 sprintf와 용법이 비슷하게 문자열 치환 용도로 사용하는데 이 함수는 특별히 buffer 길이에 맞게 null문자까지 포함해 안전하게 복사해주는 기능을 가진다. 다음글을 참고하길 바란다.


    mysql_real_query() 함수는 바이너리 데이터를 포함한 Query를 수행하기 위해 사용한다. mysql_real_query에 대해서는 다음 링크를 참고한다.


    이제 저장한 이미지를 불려들어 saved-image.png로 파일에 저장해보자.


    #define SOCKET int
    
    #include <stdio.h>
    #include <stdlib.h>
    #include <string.h>
    #include <mysql/mysql.h>
    
    #define DB_HOST "localhost or ip or domain"
    #define DB_USER "DB 접속 ID"
    #define DB_PASS "DB 접속 password"
    #define DB_NAME "데이타베이스 이름"
    
    int main(void) {
    	MYSQL *connection, conn;
    	MYSQL_RES *result;
    	MYSQL_ROW row;
    	FILE *fp;
    	int query_stat;
    	unsigned long *lengths;
    
    	//DB 초기화 및 접속
    	mysql_init(&conn);
    	connection = mysql_real_connect(&conn, DB_HOST, DB_USER, DB_PASS, DB_NAME, 3306, (char*)NULL, 0);
    	if(connection==NULL) {
    		fprintf(stderr, "Mysql connection error : %s", mysql_error(&conn));
    		return EXIT_FAILURE;
    	} else {
    		printf("Mysql connected\n");
    	}
    
    	//Query문 수행
    	query_stat = mysql_query(connection,"SELECT data FROM images WHERE id=1");
    	if(query_stat != 0) {
    		fprintf(stderr, "Mysql query error : %s\n", mysql_error(&conn));
    		return EXIT_FAILURE;
    	}
    
    	//Query문 수행한 결과를 통해 데이터 참조
    	result = mysql_store_result(connection);
    	if(result == NULL) {
    		fprintf(stderr, "result is null\n");
    		return EXIT_FAILURE;
    	}
    	row = mysql_fetch_row(result);
    	lengths = mysql_fetch_lengths(result);
    	mysql_free_result(result);
    	printf("file lengths : %ld\n", lengths[0]);
    
    	//이미지 저장
    	fp = fopen("d:/savedImage.png", "wb");
    	if(fp==NULL) {
    		fprintf(stderr, "image save error");
    		mysql_close(connection);
    		return EXIT_FAILURE;
    	}
    	fwrite(row[0], lengths[0], 1, fp);
    	fclose(fp);
    
    	//DB 커넥션 닫기
    	mysql_close(connection);
    	return EXIT_SUCCESS;
    }
    
    코드를 보면 이미지를 insert하는 것보다 select하는게 오히려 쉽다. 실행후 마지막에 d:/savedImage.png가 있다면 성공한 것이다.


    3. 구조체를 DB에 저장하기
    대학시절 C언어의 구조체를 파일로 저장해본 경험이 있는가? 또 저장한 구조체를 다시 읽어 화면에 출력해본 적이 있는가? 이런 짓을 해봤다면 당신은 이미 DB에 구조체도 넣을 수 있다. 이 구조체도 일반 이미지와 같은 Binary파일이기 때문이다.

    이 방법은 일반 이미지를 DB에 넣어본 경험이 있는 분이라면 쉽게 이해할 수 있다.


    3.1 테스트 구조체 만들기

    저장할 구조체를 만들어보자. 개인정보를 담는 아주 간단한 구조체인 Personal을 만든다.

    #include <stdio.h>
    #include <stdlib.h>
    
    //#pragma pack(1) //struct member alignment를 1로 설정, 기본 설정이 8이라면 이것으로 20->19로 줄인다.
    typedef struct st_person {
    	unsigned __int16 user_id; //id, 2bytes 정수
    	char user_name[15]; //이름, 15bytes 캐릭터형
    	unsigned __int16 age; //나이, 2bytes 정수형
    
    }PERSON;
    //#pragma pack() //struct member alignment 원상복구
    
    int main(void) {
    	printf("struct PERSON size : %d\n",sizeof(PERSON));
    	return EXIT_SUCCESS;
    }
    


    분석할 것도 없다. 총 19bytes의 데이터를 담는 구조체를 만들었고 main함수에서 이 구조체의 크기를 출력한다.

    하지만 이 프로그램을 실행하면 실제 구조체 크기인 19bytes가 아닌 20bytes로 출력된다. 왜 그럴까 찾아보다가 발견한 것이 struct member alignment라는 용어였고 이것을 설정하는 코드중에 #pragma pack()이 있다는 것이다.

    위 코드에서 #pragma pack() 2부분 주석처리를 해제하고 다시 실행하면 19byte로 나온다. 19가 20로 된다는 것은 운영체제 별, 기본설정별로 전부 다르기 때문에 자세한 설명은 관련 내용을 찾아보길 바란다.

    필자는 DB에 저장시에 하나의 Field에 여러명의 Personal 정보를 넣는것을 목적으로 하기 때문에 1~2bytes 차이가 저장되는 사람의 숫자만큼 증가되는 문제가 생길 수 있다. 이런 경우에 #pragma pack()을 적절히 사용하면 남는 공간을 줄일 수 있다.

    #pragma pack는 온라인 게임이나 네트워크 프로그램에서 이기종간 통신 간 패킷단위를 struct로 정의해 통신하는 경우에 유용하다. 그리고 사용시 주의 사항도 있으므로 이에 대해서는 더욱 학습이 필요하다.


    3.2 구조체를 담을 DB 테이블 제작

    위 구조체를 담을 DB 테이블은 다음 쿼리로 만들면 되겠다.


    CREATE TABLE `persons` (
      `AREA` int(11) NOT NULL auto_increment,
      `COUNT` smallint(5) unsigned default NULL,
      `DATA` blob NOT NULL,
      PRIMARY KEY  (`AREA`)
    ) ENGINE=MyISAM DEFAULT CHARSET=utf8
    


    area가 key값이고 area별로 사람들의 데이터가 data에 담긴다. 이 data는 여러명의 데이터가 담겨질 것이다. 아마도 이게 유용한거냐?라는 질문을 한다면 이것은 한가지 예일 뿐이고 필자는 실제로 유용한 방법이였다. ^^


    3.3 구조체 포인터 배열을 만들어 DB에 저장하고 읽어오기
    구조체를 DB 테이블에 저장하는 것은 이미지를 저장할때와 별반 다른 것이 없다. 위에서 제시한 구조체로 이루어진 데이터의 경우가 특별할 것 같지만 실제로는 똑같다. 구조체를 만들때 user_id, user_name, age 순으로 만들었기 때문에 각각 2+15+2 = 19바이트가 1개의 개인정보 바이너리 데이터가 된다. 만약 2명이면 19x2=38 바이트의 바이너리 데이터가 되는 것이다. 이 모든 것을 수행하는 간단한 코드는 다음과 같다.


    #define SOCKET int
    
    #include <stdio.h>
    #include <stdlib.h>
    #include <memory.h>
    #include <string.h>
    #include <mysql/mysql.h>
    
    #define DB_HOST "localhost or ip or domain"
    #define DB_USER "DB 접속 ID"
    #define DB_PASS "DB 접속 password"
    #define DB_NAME "데이타베이스 이름"
    
    #define TABLE_NAME "persons"
    #define SQL_DROP_TABLE "DROP TABLE IF EXISTS %s"
    #define SQL_CREATE_TABLE "CREATE TABLE `%s` (\
    `AREA` int NOT NULL AUTO_INCREMENT,\
    `COUNT` smallint unsigned,\
    `DATA` BLOB NOT NULL,\
    PRIMARY KEY(`AREA`)\
    ) ENGINE=MyISAM DEFAULT CHARSET=utf8"
    #define SQL_INSERT_DATA "INSERT INTO %s(DATA,COUNT) values('%s',%d)"
    #define SQL_SELECT_DATA "SELECT `DATA`, `COUNT` FROM %s WHERE `AREA`=%d"
    
    #pragma pack(1) //struct member alignment를 1로 설정, 기본 설정이 8이라면 이것으로 20->19로 줄인다.
    typedef struct st_person {
    	unsigned __int16 user_id; //id, 2bytes 정수
    	char user_name[15]; //이름, 15bytes 캐릭터형
    	unsigned __int16 age; //나이, 2bytes 정수형
    
    }PERSON;
    #pragma pack() //struct member alignment 원상복구
    
    int connect();
    int close();
    int create_table();
    int drop_table();
    PERSON* add_data(PERSON *person_list, int index, unsigned __int16 user_id, unsigned __int16 age, char* user_name);
    int remove_all_data(PERSON* person_list);
    int insert_data(PERSON* person_list, int count);
    int select_data(int area);
    
    MYSQL *connection, conn;
    
    int main(void) {
    	printf("PERSON struct size : %d\n",sizeof(PERSON));
    	connect();
    	drop_table();
    	create_table();
    
    	PERSON *person_list;
    	person_list = add_data(NULL,0,1,30,"jidolstar");
    	person_list = add_data(person_list,1,2,22,"joykim");
    	person_list = add_data(person_list,2,3,2,"tae hyun");
    	insert_data(person_list,3);
    	free(person_list);
    	select_data(1);
    
    	person_list = add_data(NULL,0,4,30,"addlayer");
    	person_list = add_data(person_list,1,5,22,"eye");
    	person_list = add_data(person_list,2,6,2,"unclejoe");
    	person_list = add_data(person_list,3,7,3,"miracle");
    	insert_data(person_list,4);
    	free(person_list);
    	select_data(2);
    
    
    	close();
    	return EXIT_SUCCESS;
    }
    
    /**
     * DB 접속
     */
    int connect() {
    	// mysql 초기화
    	mysql_init(&conn);
    
    	// DB 연결
    	connection = mysql_real_connect(&conn, DB_HOST, DB_USER, DB_PASS, DB_NAME, 3306, (char*)NULL, 0);
    	if(connection==NULL) {
    		fprintf(stderr, "Mysql connection error : %s", mysql_error(&conn));
    		exit(0);
    	} else {
    		printf("Mysql connected\n");
    	}
    	return 0;
    }
    /**
     * 데이타 베이스 닫음
     */
    int close() {
    	mysql_close(connection);
    	printf("mysql closed\n");
    	return 1;
    }
    
    /**
     * 테이블 생성
     */
    int create_table() {
    	int query_stat;
    	char buff[1024];
    
    	memset(buff,0x00,sizeof(buff));
    	sprintf( buff, SQL_CREATE_TABLE, TABLE_NAME );
    	query_stat = mysql_query(connection,buff);
    	if( query_stat != 0 ) {
    		fprintf(stderr, "Mysql query error : %s\n", mysql_error(&conn));
    		exit(0);
    	} else {
    		printf("created table\n");
    	}
    	return 0;
    }
    
    /**
     * 기존 테이블 삭제
     */
    int drop_table() {
    	int query_stat;
    	char buff[1024];
    
    	//기존 테이블 삭제
    	memset(buff,0x00,sizeof(buff));
    	sprintf( buff, SQL_DROP_TABLE, TABLE_NAME );
    	query_stat = mysql_query(connection,buff);
    	if( query_stat != 0 ) {
    		fprintf(stderr, "Mysql query error : %s\n", mysql_error(&conn));
    		exit(0);
    	} else {
    		printf("table dropped\n");
    	}
    	return 0;
    }
    
    /**
     * 데이터 추가
     */
    PERSON* add_data(PERSON *person_list, int index, unsigned __int16 user_id, unsigned __int16 age, char* user_name) {
    	PERSON *current;
    	if(person_list == NULL ) {
    		person_list = (PERSON*)malloc(sizeof(PERSON));
    		current = person_list;
    	} else {
    		person_list = (PERSON*)realloc(person_list, sizeof(PERSON)*(index+1));
    		current = person_list + index;
    	}
    	current->user_id = user_id;
    	current->age = age;
    	memset(current->user_name,0x00,sizeof(current->user_name));
    	strcpy(current->user_name,user_name);
    	//printf("added user_id:%d, age:%d, name:%s\n",current->user_id,current->age,current->user_name);
    	return person_list;
    }
    
    /**
     * 모든 데이터 삭제
     */
    int remove_all_data(PERSON* person_list) {
    	free(person_list);
    	return 0;
    }
    
    /**
     * 데이타를 디비 테이블에 삽입
     */
    int insert_data(PERSON* person_list, int count) {
    	int query_stat;
    	unsigned long len, size;
    	char *buf_to, *query;
    
    	size = sizeof(PERSON)*count*2+1;
    	buf_to = (char*)malloc(size);
    	mysql_real_escape_string(connection, buf_to, (char*)person_list, sizeof(PERSON)*count);
    
    	//Query 문 작성
    	query = (char*)malloc(sizeof(SQL_INSERT_DATA)+size);
    	len = snprintf(query, sizeof(SQL_INSERT_DATA)+size, SQL_INSERT_DATA, TABLE_NAME, (char*)buf_to, count );
    
    	//Query 문 실행
    	query_stat = mysql_real_query(connection, query, len);
    	if(query_stat != 0) {
    		fprintf(stderr, "Mysql query error : %s\n", mysql_error(&conn));
    	} else {
    		printf("insert complete\n");
    	}
    
    	//할당한 메모리 반환
    	free(buf_to);
    	free(query);
    	return 0;
    }
    
    /**
     * 데이타를 디비에서 읽어옴
     */
    int select_data(int area) {
    	char query[1024];
    	int query_stat;
    	int count=0;
    	int i;
    	PERSON *person_list, *person;
    	MYSQL_RES *result;
    	MYSQL_ROW row;
    
    	memset(query,0x00,sizeof(query));
    	sprintf(query, SQL_SELECT_DATA, TABLE_NAME, area);
    	query_stat = mysql_query(connection,query);
    	if(query_stat != 0) {
    		fprintf(stderr, "Mysql query error : %s\n", mysql_error(&conn));
    		exit(0);
    	}
    
    	//갯수만큼 화면에 데이터 출력
    	result=mysql_store_result(connection);
    	row = mysql_fetch_row(result);
    	mysql_free_result(result);
    	count = atoi(row[1]); //갯수
    	person_list = (PERSON*)row[0]; //한개의  데이터
    	for( i=0; i<count; i++ ) {
    		person = person_list + i;
    		printf("user_id:%d, age:%d, name:%s\n",person->user_id,person->age,person->user_name);
    	}
    	free(person_list);
    	return 0;
    }
    

    위 코드를 천천히 분석하면 어떻게 구조체 정보를 데이타베이스에 저장하고 읽어올 수 있는지 어렵지 않게 분석할 수 있을 것이다. 코드 자체는 연습용으로 급조된 거라서 중간중간 엉성한 부분은 그냥 넘어가자 ^^


    4. ActionScript 3.0으로 바이너리 데이터 읽어오기 

    필자가 C를 지금까지 파고 든 가장 큰 목적은 Flash에서 C로 저장된 구조체 데이터를 읽어오는 것에 있다. ActionScript 3.0 API에는 바이너리 데이터를 다룰 수 있는 강력한 클래스가 존재한다. 그것은 ByteArray이다. 이 ByteArray를 이용하면 구조체 바이너리 데이터를 아주 쉽게 사용할 수 있게 된다.

    DB에 저장된 바이너리 데이터를 Java로 로드해 AMF로 flash로 전송해주고 Flash에서는 이 데이터를 해석해 사용한다.

    자바에서 해당 데이터를 로드할 때 변환되는 Value Object의 형태는 다음과 같을 것이다.
    package com.jidolstar.person.domain;
    
    public class PersonArea {
    	private int area;
    	private int count;
    	private byte[] data;
    	
    	public int getArea() {
    		return area;
    	}
    	public void setArea(int area) {
    		this.area = area;
    	}
    	public int getCount() {
    		return count;
    	}
    	public void setCount(int count) {
    		this.count = count;
    	}
    	public byte[] getData() {
    		return data;
    	}
    	public void setData(byte[] data) {
    		this.data = data;
    	}
    }
    


    위 자바객체를 BlazeDS나 LCDS를 이용해 AMF(ActionScript Message Format)으로 전송하면 Flex나 ActionScript 3.0에서 직렬화되는 객체는 다음과 같을 것이다.
    package {
    	import flash.utils.ByteArray;
    
    	[RemoteClass(alias="com.jidolstar.person.domain.PersonArea")]
    	public class PersonArea	{
    		public var area:int;
    		public var count:int;
    		public var data:ByteArray;
    	}
    }
    


    위 클래스에서 자바에서 AMF로 넘겨주는 PersonArea를 직렬화 처리하기 위해 [RemoteClass(alias="com.jidolstar.person.domain.PersonArea")] 를 사용했다는 것에 주목하자. 또한 자바의 byte[] 포멧은 ActionScript 3.0의 ByteArray로 직렬화 처리된다.

    우리는 최종적으로 다음 ActionScript 3.0 클래스로 변환되기를 희망한다.

    package {
    	public class AreaDetail {
    		public var area:int;
    		public var id:int;
    		public var name:String;
    		public var age:int;
    	}
    }
    


    다음 코드는 이를 진행해 줄 Flex 4 코드이다.
    <?xml version="1.0" encoding="utf-8"?>
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    			   xmlns:s="library://ns.adobe.com/flex/spark" 
    			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" 
    			   xmlns:halo="library://ns.adobe.com/flex/halo">
    	<fx:Declarations>
    		<s:RemoteObject id="ro" destination="personRO">
    			<s:method name="getPersonArea" result="result_handler(event)" fault="mx.controls.Alert.show(event.fault.faultString)"/> 
    		</s:RemoteObject>
    		<s:ArrayCollection id="ac"/>
    	</fx:Declarations>
    	<fx:Script>
    		<![CDATA[
    			import mx.collections.ArrayCollection;
    			import mx.controls.Alert;
    			import mx.rpc.events.ResultEvent;
    			
    			private function result_handler($event:ResultEvent):void {
    				var personArea:PersonArea = $event.result as PersonArea;
    				var count:int = personArea.count;
    				var person:PersonDetail;
    				var data:ByteArray = personArea.data;
    				var area:int = personArea.area;
    				ac.removeAll();
    				data.endian = Endian.LITTLE_ENDIAN; //구조체로 저장된 데이터가 little endian인 경우 이 설정을 해야한다.//http://blog.naver.com/kimsumin75/20055881438
    				ac.disableAutoUpdate();
    				while( count-- ) {
    					person = new PersonDetail;
    					person.area = area;
    					person.id = data.readShort()
    					person.name = data.readUTFBytes(15,"utf-8");
    					person.age = data.readShort();
    					//trace(data.readByte()); //만약 c에서 #progma pack(1)을 사용하지 않았다면 19가 아닌 20바이트가 넘어올 것이므로 1바이트가 비게 된다. 이때는 이 부분의 주석이 풀어져야 제대로 읽어올 수 있다.
    					ac.addItem(person);
    				}
    				ac.enableAutoUpdate();
    				ac.refresh();
    			}
    
    			protected function button1_clickHandler(event:MouseEvent):void
    			{
    				ro.getPersonArea(parseInt(tiArea.text));
    			}
    
    		]]>
    	</fx:Script>
    	<halo:Form x="10" y="7" width="225" height="132">
    		<halo:FormItem label="area">
    			<s:TextInput id="tiArea" text="1"/>
    		</halo:FormItem>
    		<s:Button label="불러오기" click="button1_clickHandler(event)"/>
    	</halo:Form>
    	<halo:DataGrid x="243" y="10" height="360" width="385" dataProvider="{ac}">
    		<halo:columns>
    			<halo:DataGridColumn headerText="AREA" dataField="area"/>
    			<halo:DataGridColumn headerText="ID" dataField="id"/>
    			<halo:DataGridColumn headerText="NAME" dataField="name"/>
    			<halo:DataGridColumn headerText="AGE" dataField="age"/>
    		</halo:columns>
    	</halo:DataGrid>
    </s:Application>
    


    위 코드에서 중요한 부분은 result_handler() 메소드 부분이다. ByteArray로 직렬화되어 들어온 데이터를 어떻게 읽어들이고 사용하는지 보여주고 있다. 중요한 것은 구조체의 정의시 user_id, user_name, age순으로 했기 때문에 ByteArray로 읽을때도 그와 같은 순으로 읽어야 하며 각각 읽어들일때 Byte도 잘 따져야 한다. 각각 2, 15, 2 바이트씩 총 19바이트를 저장했기 때문에 ByteArray에서 2바이트 정수를 읽어주는 readShort()메소드를 사용했다. 또한 문자열을 읽기 위해 readUTFBytes()를 이용했다.

    //trace(data.readByte()); 으로 주석된 부분이 있다. 이 부분은 c코드에서 #progma pack(1)으로 처리하지 않았을때 구조체의 크기는 19바이트가 아닌 20바이트가 되므로 ByteArray로 읽을때 항상 1바이트가 남게된다. 그러므로 c코드에서 #progma pack(1)가 꼭 필요하다는 것을 여기서도 알 수 있다. 

    마지막으로 ByteArray를 읽기전에 data.endian = Endian.LITTLE_ENDIAN 처리를 했다. Endian의 종류는 두가지이다. Big Endian과 Little Endian이다. 이것은 데이타를 메모리에 쓰는 방식의 차이로 필자가 c코드를 돌려 구조체를 저장할때 방식이 Little Endian방식으로 저장했기 때문에 ByteArray로 넘어온 데이타도 그렇게 읽을 수 밖에 없게 된다. 이 방식의 차이와 장단점은 아래 링크를 통해 살펴보길 바란다.

    Big Endian과 Little Endian


    5. 정리하며

    바이너리 데이터를 데이타 베이스에 저장하고 최종적으로 Flash기반에서 로드하는 것까지 다뤄봤다. 꽤 많은 내용을 다룬 것 같지만 실상은 매우 단순하다. 바이트 단위로 데이타를 이해한다면 그리 어렵지 않은 내용들이며 결국 이런 처리를 익숙하게 할 수 있겠는가가 중요한 것 같다.

    필자는 ActionScript나 Java등에 익숙하다 보니 이들 언어에서 메모리 관리등을 모두 다 해주니깐 게을러지는 것 같다. 이들 언어를 하더라도 c언어는 꾸준히 해주어야하고 종종 실무에도 적용해줘야겠다.

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

    Flash는 다양한 보안모델을 가진다. 보안모델에 따라 동작하지 않는 경우에는 Flash Player는 여지없이 Security Error를 발생시킨다. 이러한 보안모델이 있으면 개발할 때는 난해하지만 사용자 입장 및 서버 관리자 입장에서 보안문제를 적절히 처리할 수 있기 때문에 안심하고 Flash 어플리케이션을 사용할 수 있는 것이다.

    Flash Player 보안에 관련된 것은 다음 글을 보면 자세히 나온다.

    Flash Player 보안


    각설하고...
    SWF파일과 그것을 감싸는 HTML이 동일한 도메인에 위치하는 경우에는 <object>및 <embed> 태그에 allowScriptAccess 매개변수값을 sameDomain이나 always를 지정하는 것만으로 SWF에 ExternalInterface.addCallback() 함수로 자신내부의 메소드를 호출할 수 있게끔 되어 있는 경우 보안상 아무 문제없이 HTML에서 SWF의 메소드를 호출할 수 있다. 다음글을 참고해 보자.

    아웃바운드 URL 액세스 제어

    하지만 SWF파일과 HTML이 동일한 도메인에 위치하지 않은 경우에는 Flash Player 보안이 더욱 강화된다. allowScriptAccess 매개변수를 기본적으로 allowScriptAccess="always"로 지정해야 하는 것 외에 다른 보안 설정이 필요하다. 그것은 SWF에 Security.allowDomain()  메소드가 가능하게 한다.

    SWF가 domain1.com에 있고 HTML이 domain2.com에 있다고 할 때 HTML에서 SWF내에서 ExternalInterface.addCallback()으로 외부접근을 허락한 메소드를 접근하려면 SWF에  Security.allowDomain("domain2.com");을 지정해 주어야 한다. 이 말은 이 SWF는 domain2.com에 있는 HTML에서 접근하는 것을 허락한다는 것을 의미한다.

    어떤 도메인에 있던지 SWF 내부의 메소드 접근을 항상 허용하려면 Security.allowDomain("*") 로 지정하면 된다. 하지만 이것은 보안상 좋지 않는 방법이다.

    서로 다른 도메인에 있는 SWF와 HTML에 대해서 이런 보안이 있는 이유는 명료하다. 내가 배포한 SWF에 정의된 함수를 HTML에서 접근할 수 있도록 ExternalInterface.addCallback()을 정의했는데, 다른 사람이 다른 도메인에서 이것을 악용할 소지가 있을 수 있기 때문이다.

    일반서비스인 domain.com과 파일서버인 file.domain.com을 보자. 두개다 domain.com을 사용하지만 domain.com은 file.domain.com의 슈퍼도메인이다.  이는 Flash Player 6 이전에는 같은 것으로 인식했으나 Flash Player 7이상으로 되면서 다른 도메인으로 인식하게 되었다. 이렇게 된 것은 보안상 문제로 보안정책의 변경이 필요했기 때문이다. file.domain.com에 어떤 사용자가 악성 스크립트를 심은 swf를 업로드 했다고 가정하자. 이때 domain.com과 file.domain.com을 동일하게 인식해버리면 이 swf는 domain.com에 마음대로 접근이 가능해진다. 그래서 flash player는 file.domain.com과 domain.com을 다르게 인식하는 것이다. 이것은 crossdomain정책과 같다.

    더 자세한 내용은 다음 글을 참고한다.

    Security.allowDomain()에 대해

    아쉬운 것은 Security.allowDomain("*.domain.com") 식의 지정이 안된다는 것이다.  crossdomain.xml 설정시에는 와일드카드(*)를 *.domain.com 형태로 사용할 수 있지만 Security.allowDomain()에서 안되는 것은 이외다.

    개인적으로 개발환경과 테스트환경, 배포환경이 모두 다르기 때문에 와일드카드 지원이 있으면 좀 편할텐데 하는 아쉬움이 남는다.

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



    게임에서 키보드 제어는 가장 기본이면서 중요하다. 요즘 Flash 관련 게임을 제작해보겠다는 열의를 가지고 이것저것 테스트 해보고 있는데 게임 분야는 워낙 방대하고 알아야할 것도 많아서 계속 도전하고 싶은 충동을 강하게 만든다.

    일단 가장 기본적인 슈팅게임을 만들어보겠다는 목표를 세웠다.

    원더플(http://wonderfl.net)에 올라오는 다양한 완성된 게임들을 보면서 나름대로 코드를 분석하고 정리하면서 하나씩 완성해 나가고자 한다.

    키보드 제어에 대해서는 Hika님의 글이 매우 유용하다.

    마우스/키보드의 인터렉션 최적화 2/2

    나는 키보드 제어에 대한 기본 지식을 위 글을 통해서 공부했고 뭔가 슈팅게임을 위한 적당한 클래스를 만들어봤야겠다는 생각을 했다. 좀 더 범용적인 클래스가 좋겠다고 했는데.. 마침 원더플에 올라온 KeyMapper 클래스가 눈길을 끌었다.


    // Key mapper
    //----------------------------------------------------------------------------------------------------
    class KeyMapper {
    	public var flag:int=0;
    	private var _mask:Vector.=new Vector.(256, true);
    
    	function KeyMapper(stage:Stage):void {
    		stage.addEventListener("keyDown", function(e:KeyboardEvent):void { flag|=_mask[e.keyCode]; });
    		stage.addEventListener("keyUp", function(e:KeyboardEvent):void { flag&=~(_mask[e.keyCode]); });
    	}
    
    	public function map(bit:int, ... args):KeyMapper {
    		for (var i:int=0; i < args.length; i++) {
    			_mask[args[i]]=1 << bit;
    		}
    		return this;
    	}
    }
    

    매우 단순하고 아름답기 까지 하다. ㅎㅎ
    사용법은 꽤 간단하다. 아래는 사용할 키를 등록하는 방법이다.

    // keyboard mapper
    _key=new KeyMapper(stage);
    _key.map(0, 37, 65).map(1, 38, 87).map(2,39,68); //좌 : Left(37), A(65); 위:Up(38),W(87); 우:Right(39),D(68)
    

    _key.map() 메소드의 첫번째 인자값은 해당 키가 눌려졌을때 참조할 bit위치이다. 2번째 부터는 이 bit위치가 변경되기 위한 키코드를 넣을 수 있다. 가령 0번 bit에 Left키 또는 A키를 눌렀을때 bit가 on될 수 있도록 한다.

    사용된 키코드는 KeyboardEvent가 발생할때 이벤트의 keyCode속성에 나오는 코드이다. 이 값은 범용적으로 약속된 값으로 다음 글에서 참조하길 바란다.

    키코드값 표

    KeyMapper에 등록된 키들은 EnterFrame 이벤트 발생되는 시점에서 다음과 같이 사용하면 된다.

    var inkey:int = _key.flag;
    //회전
    ar=(((inkey & 4)>>2) - (inkey & 1))*0.5; //회전가속
    vr += ar; //회전속도
    r += vr; //회전값
    ar *= .96; //계속 증가 못하도록 방지
    vr *= .92; //계속 증가 못하도록 방지
    ( r < 0 ) ? r += 360 : ( r > 360 ) ? r-=360 : 0; //0~360으로 Normalization
    
    //이동
    a = -((inkey & 2)>>1)*1.2; //가속
    ax = a * Math.sin((360-r)*D2R); //가속 x성분
    ay = a * Math.cos((360-r)*D2R); //가속 y성분 
    vx += ax; //속도 x성분
    vy += ay; //속도 y성분
    x += vx; //위치 x성분
    y += vy; //위치 y성분 
    ax *= .96; //계속 증가 못하도록 방지
    ay *= .96;
    vx *= .90;
    vy *= .90;
    



    즉 inkey & 4(10진수)는 inkey & 100(2진수)과 같다. 즉 3번째 bit의 값이 on이냐 off이냐에 따라서 3번째으로 지정된(여기에서는 우측이동키 또는 D)키가 눌려졌는지 알 수 있다. 이 값에 shift연산자로 >>2를 하면 눌려졌으면 1, 안눌려졌으면 0을 참조할 수 있게 된다.

    이처럼 키보드를 참조하기 위해 if문이 아닌 bit연산으로 참조함으로 이 부분에 있어서 더 빠른 참조가 가능해진다고 본다.

    단지 현재 이 KeyMapper 클래스는 키동작의 순서를 담지 않기 때문에 액션대전게임등과 같은 것을 만드려면 그와 관련된 Key동작을 mapping할 수 있는 것이 필요할 것이다.

    필자는 이것으로 한대의 비행기를 회전, 이동하는 Flash 애플리케이션을 간단하게 만들어봤다.


    보러가기 : http://wonderfl.net/code/53e6c9b9ed9a776dd45b529304937d13ea9398ac

    참고로 비행기는 아래 이미지를 참고했으며 출처는 다음 링크에 있다.
    http://www.brighthub.com/internet/web-development/articles/11010.aspx



    위 이미지를 회전시켜 BitmapData를 만드는 방법은 다음글을 참고한다.
    Flash 속도 개선을 위한 실험 - 10만개 입자 유체 시뮬레이션 연장전!


    추가사항

    hika님께서 댓글로 다음처럼 지적해주셨습니다.

    결사반대!
    그러니까 80년대에 사용하던 비트or연산 합체는 제발 지양해주세요.
    그 원조인 c업계에서도 철폐를 위해 노력하고 있습니다.
    코드는 점점 암호화 되고 그걸 다시 가시화하기 위해 엄청난 const를 잡게 됩니다. 나락으로 빠지는 길이죠.
    빠른 벡터를 컨테이너로 사용하세요 ^^

    var keyDown:Vector.<Boolean> = new Vector.<Boolean>();

    stage.addEventListener("keyDown", function(e:KeyboardEvent):void { keyDown[e.keyCode] = true; });
    stage.addEventListener("keyUp", function(e:KeyboardEvent):void { keyDown[e.keyCode] = false; });

    if( keyDown[Keyboard.UP] ){

    if( keyDown[Keyboard.SHIFT] ){
       if( keyDown[Keyboard.SPACE] ){

    이러한 코드는 가독성만 좋은게 아닙니다.
    http://help.adobe.com/ko_KR/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7d01.html
    이 문서를 보세요.

    키와 키 코드의 매핑은 장치 및 운영 체제에 따라 다릅니다. 따라서 키 매핑을 사용하여 액션을 트리거해서는 안 됩니다. 대신에 Keyboard 클래스에서 제공하는 미리 정의된 상수 값을 사용하여 적당한 keyCode 속성을 참조해야 합니다. 예를 들어, Shift 키의 키 매핑 대신 Keyboard.SHIFT 상수를 사용하십시오

    이러한 멘트가 나옵니다. 플래시플레이어는 운영체제 버전에 따라 키코드값을 적절하게 매핑해주기 때문에 개발한 게임이 맥에서 안도는 사태를 막아줍니다 ^^

    여하튼 그 모든걸 떠나서 결국 38, 39를 외우는 것도 무리고 코드를 해석하기 위해 맨날 키코드표를 참조한다는것도 말도 안되고 그 결과 const를 도입해서 느려지는 식입니다.

    저 방식은 원더플에 올라오는 수준이거나 데모를 만드는 수준에서만 키셋이 몇개 없을때 통용되는거지 실제 게임에서 유저가 키셋팅을 커스터마이즈하는 것도 흔하고 플래시 특성상 이기종에서 실행되는것도 흔하기 때문에 아니되옵니다 ^^


    네.. 중요한건 Adobe문서에 잘 나와있었다는 거죠 ^^;
    그래서 기존 KeyMapper를 버리고 새로운 형태로 만들어봤습니다.


    class Key {
    	static private var _down:Vector.=new Vector.(256, true);
    	static private var _stage:Stage;
    
    	static public function start($stage:Stage):void {
    		stop();
    		if (Capabilities.hasIME) {
    			IME.enabled=false;
    		}
    		if ($stage === null) {
    			throw new Error("인자값이 null이면 안됩니다.");
    		}
    		_stage=$stage;
    		_stage.addEventListener("keyDown", KEY_DOWN);
    		_stage.addEventListener("keyUp", KEY_UP);
    	}
    
    	static public function stop():void {
    		if (Capabilities.hasIME) {
    			IME.enabled=true;
    		}
    		if (_stage) {
    			_stage.removeEventListener("keyDown", KEY_DOWN);
    			_stage.removeEventListener("keyUp", KEY_UP);
    		}
    	}
    
    	static private function KEY_DOWN($e:KeyboardEvent):void {
    		_down[$e.keyCode]=1;
    	}
    
    	static private function KEY_UP($e:KeyboardEvent):void {
    		_down[$e.keyCode]=0;
    	}
    
    	static public function isDown($keyCode:int):int {
    		return _down[$keyCode];
    	}
    }
    


    IME 부분은 한글로 입력되어 제대로된 키코드가 들어오는 것을 방지하기 위함입니다.(이 부분은 좀더 생각해볼 필요가 있을듯..) Vector를 Boolean말고 int로 한 것은 간단한 연산처리가 필요한 경우에 활용하기 위함입니다. 이렇게 해두면 호스트쪽은 아래처럼 참조하면 됩니다.
    var a:Number; //inkey:int = _key.flag;
    var right:int=Key.isDown(KEY_RIGHT) | Key.isDown(KEY_D);
    var left:int=Key.isDown(KEY_LEFT) | Key.isDown(KEY_A);
    var up:int=Key.isDown(KEY_UP) | Key.isDown(KEY_W);
    
    // rotation
    ar=Number(right - left) * 0.5; //ar=(((inkey & 4)>>2) - (inkey & 1))*0.5;
    vr+=ar;
    r+=vr;
    ar*=.96;
    vr*=.92;
    (r < 0) ? r+=360 : (r > 360) ? r-=360 : 0;
    
    // move
    a=-Number(up) * 1.2; //a = -((inkey & 2)>>1)*1.2;
    ax=a * Math.sin((360 - r) * D2R);
    ay=a * Math.cos((360 - r) * D2R);
    vx+=ax;
    vy+=ay;
    x+=vx;
    y+=vy;
    ax*=.96;
    ay*=.96;
    vx*=.90;
    vy*=.90;
    


    이렇게 함으로써 가독성 향상도 되고 운영체제에 따른 다른 키코드에 대한 대응도 되겠네요. 

    물론 KEY_DOWN, KEY_UP등은 Keyboard.DOWN, Keyboard.UP값으로 정의했습니다. 

    사실... Key.isDown($keyCode:int) 대신 Key.isDown(...args)로 하려고 했는데... 이게 문제인것이 |연산인지 &연산인지 호스트 코드를 작성하는 입장에서는 저 함수명으로는 알기 힘들어지고... 사실 이런 요구가 계속 넘쳐날것 같아서 결국 가장 간단하게 만들어놓고 필요하면 그때그때 대응하는 편이 훨씬 좋다는 판단을 했습니다.

    아무튼 좋은거 배웠습니다. 감사합니다.

    결과 : http://wonderfl.net/code/23e1ea553ffa7994af88933059c1a55b04e683eb


    참고
    원더플(wonderfl.net)
    마우스/키보드의 인터렉션 최적화 2/2
    키코드값 표
    Flash 속도 개선을 위한 실험 - 10만개 입자 유체 시뮬레이션 연장전!
    원더플(Wonderfl)을 이용해 ActionScript 3.0을 공부하자. - 자동 테스트 환경 구축 소개

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

    인터넷 상에 멋진 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)
    이전에 "10만개 입자를 이용한 유체 시뮬레이션 실험"이라는 제목으로 글을 적었다. 이 글로 10만개의 1x1 픽셀의 입자를 되도록 빠르게 렌더링하기 위한 기술을 습득할 수 있었다.

    이번에는 조금 더 실용적으로 접근한다. 이 실험은 입자 유체 시뮬레이션의 연장전으로 입자대신 화살표를 이용한다. 소개하고자 하는 것은 원래 일본의 Yasu 아이디를 가진 개발자가  Wonderfl에 단순한 학습자료 용도로 올린 소스였다. 이 소스는 계속 Fork(원본소스를 퍼가서 수정하는 작업)가 거듭됨에 따라 매우 흥미롭고 재미있는 실험으로 탈바꿈하기 시작했다. 수십번의 Fork와 수백번의 favorite로 지정된 이 실험은 필자로 하여금 Flash 속도 개선에 대한 아이디어를 얻을 수 있다는 기대를 가지게 하기에 충분했다.


    최종 실험 결과 화면



    이 글은 Yasu님의 블로그에 소개된 글을 다시 한번 검토해보고 분석하는 정도이다.
    (참고로 Yasu님은 Wonderfl과 블로그에서 clockmaker 아이디로 활동중이며 꽤 재미있는 컨텐츠를 많이 생산하고 있다.)

    앞으로 소개할 내용은 아래 첨부파일내 ActionScript 3.0 코드를  참고하길 바란다.  Flash Builder 또는 Flash CS4에서 Flash Player 10기반으로  테스트하면 되겠다. 





    BitmapData 배열을 활용한 속도 증가

    Yasu님은 그의 블로그를 통해 Flash 속도 개선을 위한 매우 좋은 아이디어를 알려주었다.

    [다음 Flash의 속도를 체험] BitmapData를 배열에 저장하면 2 ~ 3 배 속도 - 일본어 번역기를 통해 보세요.


    이 실험은 2가지 경우의 예를 들고 있다. (첨부파일의 bitmap_arrow_01.as, bitmap_arrow_02.as를 참고)

    1. 화살표를 정해진 수만큼 Sprite로 생성하고 회전/이동 처리 
    2. 화살표의 모양을 회전값에 따라 BitmapData로 만들어 배열에 저장한 뒤, 정해진 수만큼 화살표를 렌더링할 Bitmap을 만든다. 1번과 같이 Bitmap의 위치를 지정하되 화살표의 방향은 이미 만든 BitmapData를 이용하여 회전된 모양 처리

    (Wonderfl이 아닌 첨부파일 소스에서)
    1번 예제는 화살표 500개로 FPS(frame/seconds)가 50정도의 속도가 나온다. 2번예제는 화살표 3000개로 FPS 50정도 나온다. 같은 FPS이지만 화살표를 더 렌더링할 수 있는 2번 예제의 경우가 훨씬 빠르다는 것을 알 수 있다. (물론 FPS는 개인 PC사양에 따라 다르게 나온다.)

    일반적으로 많은 Flash 입문자가 처음 접하는 예제는 1번 일것이다. 하지만 화살표 모양의 Vector 데이터가 500개나 되기 때문에 회전, 이동때 마다 많은 수의 Vector정보를 렌더링하기 위해 계산이 많아질 수 밖에 없다. 2번 예제의 경우에는 이 문제를 해결하기 위해 화살표 회전값에 따라 미리 BitmapData를 만들어 놓고 실제 렌더링시에는 회전각도에 따라 선별적으로 미리 만든 해당 화살표 BitmapData를 가져와 사용할 수 있도록 만들었다. 일단 이렇게 하면 렌더링을 위한 계산량이 급격하게 떨어지므로 FPS 증가를 도모할 수 있게 된다.

    이것만 보더라도 1번 예제처럼 만들고 Flash는 너무 느려요 라고 말하시는 분들이 있다면 반성해야한다. 어떤 언어로 만들던지 1번처럼 만들면 당연히 느려진다. 이것은 필요하다면 속도 개선을 위한 노력이 필요하다는 것을 말해주는 단적인 아주 좋은 예제이다. ^^


    Fork! Fork!

    Wonderfl 사이트의 강점 중에 하나가 바로 Fork 기능이다. 이를 이용해 다른 사람이 만들어 놓은 ActionScript 코드를 더욱 개선하거나 발전시킨 코드로 만들 수 있고 공유할 수 있다. 실제로 이 기능을 통해 Yasu님이 올려놓은 코드는 바로 다른 개발자들의 입맛에 맛게 다음과 같은 암묵적인 약속에 의해 변경되기 시작했다. 

    1. 속도에 따라 화살표 색이 달라진다.(빠를수록 빨강, 느릴수록 파랑)
    2. 속도가 빠른 화살표가 가장 화면 상단에 배치된다. 
    3. 위 조건으로 했을 때 최대 속도를 내도록 코드를 갱신한다.

    즉, 위 조건은 보는 이로 하여금 더욱 예쁘고 멋진 효과를 보여주도록 하는 구체적인 목표인 것이다. 

    이 시발점은 Wonderfl 아이디 keno42 님으로부터 시작한다.

    속도개선 전, 색깔을 입힌 화살표 모습


    - 화살표의 속도에 따라 색과 레이어를 달리 지정하도록 수정 (첨부파일의 bitmap_arrow_04.as 참고)

    확실히 밋밋했던 화살표가 색이 들어가니 보기가 좋아졌다. 하지만 이에 따라 FPS가 급격하게 떨어지게 되었다. 가장 큰 이유는 2번 조건때문에 화살표의 레이어 위치를 수시로 변동시켜 주는 아래와 같은 코드가 추가되었기 때문이다.

    arrow.parent.removeChild(arrow);
    worldAlphaChildren[speed].addChild(arrow);	
    

    이 때문에 FPS가 급격히 줄어들어 앞선 실험에서 사용된 화살표 3000개를 1000개로 줄일 수 밖에 없었다. 이렇게 해서야 FPS 57정도 나왔다. 


    (참고)Fork된 코드는 diff기능으로 비교하자.


    Wonderfl의 강력한 기능중에 하나는 Fork된 원본코드와 Fork를 통해 수정된 코드를 비교할 수 있다는 것이다. 위 Wonderl의 캡쳐 화면에서 볼 수 있듯이 Fork한 코드는 forked from과 원래 제작자 및 코드의 제목이 나와 있고 그 옆에 diff(104)가 표시되어 있다. 이 말은 이 소스가 원본 소스와 104개 줄이 추가/삭제/수정 되었다는 것을 의미한다. 이것을 클릭하면 다음과 같은 화면이 나온다. 


    이것을 사용하면 어느부분이 수정되었는지 바로 알 수 있기 때문에 매우 유용하다.


    속도개선 1 (bitmap_arrow_05.as 참고)

    첫번째로 생각한 것은 마우스 이벤트 전파부분이였다. 빠른 속도를 가진 화살표가 위로 올라오게 하는 조건을 만들기 위해 앞선 코드에서는 단계별 레이어를 만들었다. 이 레이어는  Sprite로 만들어졌다. Sprite는 DisplayObjectContainer를 확장한 클래스로 자식을 가질 수 있는 시각객체를 렌더링하는데 기본이 되는 클래스중 하나이다. 시각객체들은 자식과 부모관계(addChild()에 의해)를 가지게 되면 이벤트 전파 메커니즘에 따라 이벤트가 전파된다. 그중에 마우스 이벤트가 대표적이다. 하지만 이 이벤트 메커니즘은 Flash 속도 저하에 큰 요소가 되기도 한다. 그러므로 이벤트 전파가 필요 없는 곳에는 사용하지 않도록 강제로 설정해줄 필요가 있다. 그 역할을 하는 것은 Sprite속성중에 mouseChildren, mouseEnabled 이다. 화살표가 올라갈 부모로서의 Sprite 레이어들은 어떠한 마우스 이벤트를 받을 필요가 없기 때문에 이들 속성을 모두 false로 지정하도록 한다. 이 설정으로 약간의 FPS개선이 있었다. 

    두번째로 arrow.parent.removeChild(arrow); 부분을 삭제하는 것이였다. 시각객체는 2개 이상의 부모가 존재할 수 없다. 그러므로 otherParent.addChild(arrow); 하는 것만으로 arrow.parent.removeChild(arrow)가 이미 실행된 것이다. 이는 비싼 실행 비용을 지불하므로 제거하면 확실히 속도 개선이 된다. 실제로 FPS가 70이상으로 개선되며 거의 20이상 증가하게 되었다. 


    속도개선 2 (bitmap_arrow_06.as 참고)
    아직도 비싼 실행 비용을 지불하는 것이 있다. 바로 addChild()이다. 속도에 따라 레이어를 변경하더라도 굳이 변경할 필요가 없는 경우도 있다. 이러한 경우에는 선별적으로 변경되도록 해야한다. 아래 코드처럼 단순한 조건문 하나 넣어 쓸데없이 addChild를 실행하지 않게 하는 것만으로 속도 개선이 된다. 

    if (arrow.parent != world.getChildAt(speed)) {
    	Sprite(world.getChildAt(speed)).addChild(arrow);
    }
    
    이 작업으로 무려 FPS가 90 이상으로 상승했다. 속도개선 1 보다 약 20정도가 증가했다. 


    속도개선 3 (bitmap_arrow_07.as 참고) 
    속도개선 2에서 getChildAt()하는 것은 그리 빠른 방법이 아니다. 그래서 Array를 이용해 아래와 같이 바꾸게 된다.
    if( arrow.parent != childrenArr[speed] )
    	childrenArr[speed].addChild(arrow);	
    
    원래 실험자는 개선이 있었다고 하나 필자는 그리 큰 개선은 못보았다.

    속도개선 4 (bitmap_arrow_08.as 참고)
    화살표는 정사각형 영역이 아닌 직사각형 영역에 그려진다. 무슨말인가? 회전된 화살표가 그려지는 영역은 항상 작아졌다가 커졌다가 한다. 이는 화살표의 영역을 담은 BitmapData가 실제 화살표 크기보다 클 수 있다는 것을 의미한다. 실제 화살표 크기보다 큰 BitmapData에서 쓸데 없는 부분을 제거하는 작업을 트리밍(trimming)이라고 한다. 이 작업으로 실제로 렌더링하는 화살표의 적당한 크기의 영역만을 가진 BitmapData를 만들기 때문에 물리적인 렌더링 시간 향상에 도움을 줄 수 있다.

    while (i--) { //각도에 따라 화살표 비트맵 생성 
    	matrix=new Matrix();
    	matrix.translate(-11, -11);
    	matrix.rotate((360 / ROT_STEPS * i) * Math.PI / 180);
    	matrix.translate(11, 11);
    	
    	temp = new BitmapData(22,22,true,0x0);
    	temp.draw(dummyHolder, matrix);
    
    	//트리밍 처리(중심점의 조정은 하지 않는다)
    	rect = temp.getColorBoundsRect(0xff000000, 0x00000000); //알파채널이 0이 아닌 사각형 이미지 경계 
    	rotArr[i + k]=new BitmapData(rect.width, rect.height, true, 0x0);
    	rotArr[i + k].copyPixels(temp, rect, new Point(0,0));
    }
    

    위 코드에서 보는데로 BitmapData의 getColorBoundsRect() 메소드를 이용해 트리밍 처리를 하고 있다. 이 작업으로 FPS를 거의 100까지 올릴 수 있었다.


    속도개선 5 (bitmap_arrow_09.as 참고)
    지금까지의 방식은 화살표 하나를 표현하는 도구로 Bitmap을 사용했다. 이것은 시각객체(DisplayObject)의 하나이다. 이 방식은 화살표 1000개를 그릴려면 시각객체 1000개가 필요하다는 말과 같다. 속도개선 1~4까지 하면서 사실 거의 최대한으로 속도개선했다. 이제 속도개선에 기대할 수 있는 마지막 단계는 바로 화살표를 렌더링하는 방법 조차도 BitmapData 를 이용하는 것이다. 이때는 1000개의 시각객체가 아니라 1000개의 위치/방향 정보를 담는 객체가 필요하므로 일단 상대적인 메모리 부담이 줄어든다. 그리고 기존 방식과 거의 동일하나 그려지는 Canvas가 이제는 Sprite를 이용한 레이어가 아니라 BitmapData 하나가 된다. 그러므로 화살표는 BitmapData의 copyPixels()메소드를 이용해 그리게 된다. 또한 화살표의 속도에 따른 위치를 정렬하기 위해서 Array.sortOn()함수를 이용한다. 

    결과적으로 FPS가 120까지 상승했으며 초반에 60미만이였던 것에 비해서 거의 2배이상 빨라졌다. 그뿐인가? ColorTransform적용으로 화살표 궤적도 보여줄 수 있게 되었다. 

    속도개선 최종화면



    실행 : http://wonderfl.net/code/834201fba6c3562ca6fd7a0f1f229138b263b446 


    조금더 예쁘게!!!!
    지금까지 속도개선은 모두 Wonderfl의 Fork기능을 통해 각각 다른 사람들에 의해 구현된 것들이다. 최초에 화살표를 이용한 예제를 만든 Yasu님은 자신의 블로그에 지금까지 필자가 다루웠던 내용을 요약하면서 마지막으로 한번더 Fork를해 더 예쁘게 보여주기 위한 코드로 수정했다. 

    마지막으로 더 멋진 화면을 만들기 위한 작업 결과




    분명히 이전 코드와 속도상에 차이는 없으면서 더욱 아름다운(?) 결과물을 도출해냈다. 

    그리고 1000개의 화살표가 아닌 3000개로 바꾸어도 FPS가 40이상 나왔다. 


    정리하며
    1픽셀짜리 데이터를 다룰때는 10만개나 다루었다가 그와는 상대적으로 너무 적은 3000개 화살표 렌더링하는 것으로 전환되면서 너무 숫자가 급감하는 것처럼 보일 수 있다. 하지만 실제로 렌더링하는 데이터 요소는 10만픽셀 이상으로 많은 데이터를 다루는 것이다.(조금만 생각하면 감이 올거다.)  렌더링 자원 숫자를 줄이는 것도 중요하지만, 그 자원이 어떤 조건의 것인가와 어떻게 렌더링 할 것인가도 역시 중요하다. 결국, 화면 렌더링을 어떻게 하느냐에 따라 Flash 애플리케이션의 속도와 밀접한 관계가 있는 것이다. 실무에서 제약된 환경의 디바이스나 서비스의 경우라면 이러한 노력은 필수이다. 

    이 글에 소개된 아이디어는 정답은 아니다. 더 분석하고 더 최적화할 여지가 있다. 

    Wonderfl은 아주 고급의 스킬을 다루지는 않지만 적어도 중고급 실력에 도달하기 위한 예제를 찾는데는 이만한 곳이 없다고 생각한다. 필자는 이곳에 올라온 코드들을 보면서 수없이 감격하고 있다. 

    마지막으로 라이브 코딩을  SNS 영역으로까지 승격한 Wonderfl을 이용해 다양한 실험들을 하는 일본의 개발 문화를 보면서 항상 감탄한다. 아무쪼록 이러한 일본의 개발 문화가 한국에도 정착되길 희망한다. 


    글쓴이 : 지돌스타(http://blog.jidolstar.com/671)
    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)

    Frame 메타데이터 태그는 Flex 기반에서 만든 Flash Application에 Preloader를 구현하기 위해서 가장 많이 사용합니다. 실제로 Flex를 뜯어보면 [Frame(factoryClass="mx.managers.SystemManager")] 부분이 존재합니다. 이때 이 SystemManager가 바로 Preloader 역할을 합니다. 재미있게도 이렇게 유용한 Frame 메타데이터 태그에 대한 어떠한 공식문서를 저는 본적이 없다는 겁니다. Flex기반이지만 ActionScript 3.0으로만 개발할때 꼭 필요한 요소인데도 말이죠.

    각설하고,
    지금 말하고자 하는 것은 Flash Builder 4, Flex 4 기반에서 ActionScript 3.0 기반 프로젝트를 만들어 Frame 메타데이터 태그를 사용할때 다음과 같은 에러메시지가 난다는 겁니다.(에러 안날 수 있습니다. 하지만 제 프로젝트에서는 나버리네요.)

    1172: mx.skins.spark:BorderSkin 정의를 찾을 수 없습니다.
    1202: 정의되지 않은 속성 BorderSkin(mx.skins.spark 패키지)에 액세스했습니다.


    이쯤되면 엄청 짜증나죠. 

    ActionScript 3.0기반에서는 chart.swc, spark.swc 같은 것은 사용하지 않죠? 여기서 해결 아이디어가 나옵니다. Flash Builder나 Flex Builder에서 프로젝트를 생성하면 .actionScriptProperties 파일이 생성됩니다. 이 안에는 Flex 컴파일러인 mxmlc를 통해 컴파일할때 필요한 설정이 들어가 있지요. 내부를 살펴보면 <excludedEntries>부분이 보입니다. 이 부분은 기본 Flex SDK에 있는 SWC나 SWZ중에 ActionScript 3.0 기반에서 제작시에 필요없는 SWC, SWZ를 포함해서 컴파일하지 않겠다는 것을 명시하는 겁니다. 그런데 Frame 메타데이터 태그를 사용하면 mxmlc컴파일러가 mx.skins.spark:BorderSkin가 들어가는 코드를 만들어주는데 그게 없어서 에러를 던지는 겁니다. 이 클래스는 sparkskin.swc에 포함되어 있는데 이게 <excludeEntries>에 포함되어 있습니다. 그러므로 <excludedEntries>부분을 주석처리를 하거나 삭제하면 sparkskin.swc를 컴파일시 참조할 수 있습니다.  결국 이렇게 하면 깔끔하게 에러가 없어집니다. 명확히 그 이유를 확인하고 싶으시다면 -keep-generated-actionscript 컴파일 옵션을 사용해보세요.

    참고로 Flash Builder에서 .actionScriptProperties 파일은 숨겨져 있습니다. 숨김설정을 푸는 방법을 간단히 소개하자면...

    1. Package Explorer에서 Filters를 선택합니다.


    2. Flex Package Explorer Filters 창이 뜨면 체크되어 있는 모든 항목 풉니다. .actionScriptProperties만 풀어도 됩니다.


    3. 이제 자신의 프로젝트에 .actionScriptProperties 파일을 볼 수 있습니다.


    추가사항 1
    댓글로 hika님께서 Embed 태그문제를 거론해주셨습니다. mxmlc 컴파일러는 Embed 메타데이터 태그를
    사용하면 중간에 mx.core.BitmapAsset, mx.core.MovieClipAsset, mx.core.FontAsset과 같은 클래스를 확장한 클래스를 만들어줍니다. 그렇기 때문에 이들 클래스가 있는 swc를 프로젝트 내에 포함해야겠지요. 정확히 알고 싶다면-keep-generated-actionscript 컴파일 옵션을 이용해 bin-debug에 들어간 generated 폴더를 확인해 보시면 됩니다.

    Flash 애플리케이션을 만드는데 사용되는 SWC는 playerglobal.swc 뿐입니다. 하지만 mxmlc를 사용해 Embed, Frame 메타데이터와 같은 편리한 기능을 사용하려면 그외에 swc를 포함해줘야합니다. Flash Builder에서 ActionScript 3.0 프로젝트를 만들면 playerglobal.swc, textLayout.swc, flex.swc, utilities.swc를 포함되는 것은 다 이런 이유 때문입니다. 나머지 swc는 모두 <excludedEntries>로 제외해버리죠. 하지만 Frame을 썼을때 위에서 언급한 에러가 발목을 잡으므로 <excludedEntries>를 제거함으로써 문제를 해결할 수 있었다는 것을 언급한겁니다. 그때그때 상황에 맞게 .actionScriptProperties를 가지고 조절하시면 된다는 말씀~ ^^; (간단한건데.. 왜이렇게 설명을 장황하게 했는지 저도 모르겠습니다. ㅎㅎ)

    추가사항 2
    CSS파일이 없습니다라는 에러도 <excludedEntries>를 제거하면 없어집니다. -defaults-css-url 컴파일 옵션이나 .actionScriptProperties내에 <!-- --> 빈 주석을 달아 없애는 것 외에 또 하나의 팁!

    참고글
    Flex에서 순수 AS3로 Preloader 구현하기
    AS3로 SystemManager 의 Preloading을 흉내내기
    ActionScript 3.0에서 Preloader 구현 및 Default css file not found 경고 메시지 없애기
    Preloader의 기본 css 파일이 없습니다(Default css file not found) 경고 문제
    프로젝트 템플릿 ant
    Preloaders in AS3

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

    나는 Flex나 기타 무거운 프레임워크를 사용하지 않고 ActionScript 3.0 API 수준으로 개발을 한지 이제 겨우 1년이 넘은 것 같다. Flex로 개발할 것과 ActionScript로 개발해야할 것에 대한 구분은 항상 명확하다. 자주 새로 빠르게 로드되어야 하는 애플리케이션 제작은 무조건 ActionScript 기반으로 제작한다. 하지만 가끔 사용하며 Flex 컴포넌트를 잘 활용해야하는 애플리케이션이라면 Flex로 개발한다.

    ActionScript 3.0기반으로 개발하고 완성하고 나서는 뭔가 꼬여있는듯한 느낌, 유지보수가 안될 것 같은 느낌을 항상 받아왔다. 또한 깨끗하지 못한 객체관리가 항상 걸렸고 너무 길어져서 지저분해지는 코드 또한 마음에 들지 않았다. 그리고 클래스간 역할 분담이 분명하지 않는다는 느낌을 받았다. 동작은 뭔가 석연치 않은 느낌을 계속 받았다. 어떤 개발의 스킬이나 전문적인 지식에 대해서 학습을 해보지 못해봤던 나로써는 설계때부터 항상 고민거리가 생긴다.

    나는 근 한달동안 블로그 활동 및 외부 활동을 거의 안하면서 개발에만 매진하면서 지냈다. 바로 스타플의 타임라인 개발때문이였다. 타임라인이 궁금하시다면 아래 링크로 접속해보면 된다.

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


    개발하면서 위에서 제시한 문제점을 어느정도 해소시킬 수 있는 몇가지 개념들이 있었다. 여기에 간단하게 적어두도록 하겠다.


    1. 객체의 재사용 Object Pool
    Flash 개발하면서 항상 걸리는 문제중에 하나가 메모리이다. Flash Player가 정확한 가비지 컬렉터(GC)를 가진다고 하지만 지금도 그다지 명확한 신뢰를 받지 못하고 있다. 하지만 분명 GC는 동작한다. 중요한 것은 Flash Player의 GC를 너무 맹신하지는 말자는 것이다.

    new를 통한 객체 생성은 항상 지양하는 것이 가장 중요한 메모리 관리의 첫걸음이다. MyClass.Factory()와 같은 static 클래스를 통해 내부적으로 new를 사용하고 각종 처리는 factory가 담당하는 것이 각종 초기화 및 객체관리에 도움이 된다.

    더불어 매우 자주 사용하다가 없어지는 객체를 계속 new를 통해 생성하고 GC객체화 시키는 것은 메모리 관리에 도움이 안될뿐 더러 퍼포먼스에도 문제가 있다. 실제로 비교적 큰 디스플레이 객체인 Sprite를 new를 자주하면 전체적인 퍼포먼스에 좋지 않은 영향을 줄 수 있다. 이런 경우에 퍼포먼스와 메모리를 동시에 해결할 수 있는 방법은 바로 Object Pool을 이용하는 것이다.

    Using object pools : http://lab.polygonal.de/2008/06/18/using-object-pools/ 

    위의 글은 Object Pool의 강력함을 시각적으로 말해주고 있다. 특히나 Object나 Point와 같은 작은 클래스가 아닌 Sprite와 같은 큰 클래스의 경우 new 연산자 사용보다 Object Pool의 사용은 큰 이점을 주고 있다는 것을 알 수 있다.

    사용한 객체를 그냥 버리지 말자. 잘 보관했다가 다시 사용할 수 있게 만들고 사용하자... 특히나 시각객체(Sprite기반)이 자주 생성,소멸해야하는 경우라면 강력히 Object Pool을 사용하라고 주장한다.


    2. Linked List 와 Dictionary
    컴퓨터를 전공한 사람이라면(본인은 아님) 자료구조를 배우면서 Linked List는 반드시 이해해야할 필수 항목이다. 나는 이번 타임라인을 제작하면서 Linked List를 활용해 중간중간에 얻어진 시간순서 데이터를 엮어주는데 요긴하게 사용했다. 일반적인 Array형태의 데이터는 중간에 데이터 삽입하는 것은 효율적이지 못하지만 Linked List는 연결하고자 하는 지점의 연결부의를 끊고 그 중간에 삽입하여 앞뒤로 연결만 하면 되기 때문에 훨씬 효율적이다.

    Data Structures example : linked lists http://lab.polygonal.de/2007/08/13/data-structures-example-linked-lists/

    또한 특정 key의 자료검색에 Dictionary를 사용했다. Dictionary를 직접 사용하는 것보다는 한번 감싸서 클래스를 만들어 추가/삭제/편집/데이터접근등을 처리하기 쉽게 하면 정말 요긴해진다. 나는 Linked List와 더불어 Dictionary를 통해 key값을 통한 데이터 검색에 사용했다. 이것을 이용하면 아무래도 index 순으로 찾는 것보다 훨씬 빠른 검색을 할 수 있다.


    3. MVC
    개발자라면 Model-View-Controller에 대한 개념을 잘 알고 있을 것이다. 이러한 개념은 Flex 수준의 개발이라면 Flex가 어느정도 지원해주는 편이기 때문에 그나마 괜찮지만 ActionScript 수준에서 개발하려면 이 점을 고려하는 것이 좋다. 기본적으로 Model의 데이터 변화는 View에 영향을 미치고 View의 변화는 Controller에 영향을 준다. Controller는 View와 Model을 통제하며 서로의 상호작용에 조절한다. 그리고 View가 Model을 절대 변경하지 않는다. 이런 약속으로 MVC 구조를 설계하면 View와 View관계도 명확해지고 아직 로드되지 않는 View(모듈)에게도 도움이 된다.

    타임라인의 경우 최초 구동될때 달력과 보기설정은 아에 모듈로 만들어 버린다. 그리고 보여달라고 요청할때만 모듈을 로드해 시각화시킨다. 이때 모듈은 부모 애플리케이션에 Model에 있는 데이터를 사용한다. 이 데이터는 View(모듈)의 존재를 모르기 때문에 어떤 상황이 되든 사용할 수 있다. 또 달력과 보기설정은 같이 보여질 수 없다. 각각 show()와 hide()함수가 있는데 달력이 show하면 보기설정은 hide가 호출되어야하는 식이다. 그런데 View에서 이런것을 컨트롤해버리면 View간에 상호 간섭이 생긴다. 이런 경우 Controller가 중재하도록 하면 훨씬 쉽게 이런 문제를 해결할 수 있다.


    4. 인자객체를 이용하자.
    TextField를 이용해서 객체를 생성해본적이 있을 것이다. 1개 Text를 출력하기 위해서 얼마나 많은 설정을 해야하고 또한 수십줄이 넘는 코딩을 해야하는가? 타임라인의 달력 기능에는 한개 한개가 다 TextField 객체들이다. 물론 반복적으로 생성해주면 되지만 이 마저도 마우스오버,클릭,선택등과 같은 동작에 대응해야하기 때문에 단 몇줄 코드로는 이런 기능을 구현하기가 어렵다.

    나는 이러한 문제를 인자객체를 이용해 해결했다.
    이에 대해서는 더이상 말이 필요없다. 다음 글을 보자.
    인자객체 : http://diebuster.com/flash/?s=인자객체


    5. Helper 수준의 프레임워크
    이번 타임라인을 제작하면서 가장 도움이 되었다고 생각하는 사람은 hika님이다. 물론 같은 회사도 아니고 자주 만나본 것도 아니지만 hika님의 블로그에 정리해놓은 내용은 나에게 큰 자극제가 되었다. 그중에 hika님이 만들어놓은 ActionScript 3.0 프레임워크는 나에게 큰 도움이 되었다. 이는 흔히 말하는 무거운 프레임워크 아니다. 정확히 말하자면 Helper 수준이다. Helper 수준이라는 것은 Flex처럼 Button, Label, DataGrid와 같은 컴포넌트를 가지는 것이 아니라 Sprite, Shape, TextField, Loader등의 기본 ActionScript 3.0 기반의 클래스를 더욱 효율적으로 사용하게 하기 위한 것이라는 것이다.

    나는 이 프레임워크를 이용해서 시각객체관리, 레이어관리, Embed자원관리, 원격자원관리, 이벤트관리, 데이터관리등 전반적으로 큰 도움이 되었다. 나는 hika님이 만들어놓은 프레임워크를 분석하면서 큰 구조의 변경없이 나만의 프레임워크로 변경하고 이번 타임라인 개발에 적극적으로 사용했다. 만약 프레임워크의 도움이 아니였다면 역시나 어려운 코딩을 감당해야할지도 모르겠다.


    6. EnterFrame 수준의 동작 관리
    MouseMove 이벤트를 시각객체를 이동하는데 사용하지 말자. 대신 EnterFrame 이벤트시에 stage.mouseX, stage.mouseY등을 사용해서 시각객체를 이동시키자. 실제로 MouseMove 이벤트는 그 동작이 매우 느리다. 그러나 EnterFrame 이벤트는 최소한 stage.frameRate에 지정된 수준에서 발생하기 때문에 느린 마우스 동작에 걱정하지 않아도 된다.

    나는 타임라인을 마우스로 움직일 때 이 방법을 사용했다.

    마우스 이벤트 최적화 : http://diebuster.com/flash/category/algorithm/io


    7. Event 사용의 최소화
    나는 Event 사용을 최소화 하려고 많이 노력했다. 정말 필요한 곳에만 사용해도 개발에 무리가 없었다. 시각객체를 통한 이벤트 전파는 생각보다 매우 느린 편이기 때문에 되도록이면 사용을 지양해야한다. 이것도 정말 필요하고 요긴하다고 판단할때만 사용하는 것이 옳다. 사용한 이벤트는 반드시 remove시키는 것이 현명하다. useWeakReference는 정말 필요할때만 사용하는 것이 좋다. 되도록이면 명시적으로 remove 시키는 것이 메모리 관리에 도움이 된다.


    8. arguments.callee 활용
    arguments.callee는 함수 자신을 말한다. 이는 꽤 유용한데 특히나 이벤트 리스너 함수에서 자신을 호출한 이벤트를 삭제할때 사용될 수 있다.

    스스로 삭제되는 이벤트 리스너 : http://diebuster.com/flash/110


    9. BitmapData.clone() 사용 지양
    BitmapData 클래스는 비트맵 데이터를 저장하는 클래스이다. 이 데이터를 시각화 하기 위해 사용하는 클래스는 Bitmap이다. new Bitmap( bitmapData ) 시에 첫번째 인자가 BitmapData 객체이다.  같은 bitmapData가 자주 사용되어져야 하는 경우에 bitmapData.clone() 을 통해 계속 생성하지 말고 그냥 원본 bitmapData를 이용해 Bitmap객체를 생성해서 시각화 처리하자.

    나는 타임라인에 들어가는 각종 비트맵 객체에서 bitmapData를 뽑아내어 static으로 참조해 계속 사용하도록 했고 Bitmap 또한 Object Pool 관리를 통해 최소한의 객체 생성을 유도시켜 메모리 관리를 하도록 했다.


    10. mouseChildren, mouseEnabled, tabChildren과 같은 속성은 왠만하면 false로 지정하자.
    이러한 속성들이 필요없는 곳에 사용되면 오히려 퍼포먼스에 악영향을 준다. 정말 필요한곳에만 사용하는 것이 좋다. 이들 속성의 의미를 파악해두는 것이 중요하다.


    11. cacheAsBitmap은 이동에만 사용하자.
    cacheAsBitmap은 확대,축소,회전,Alpha값 변경되는 곳에는 사용하지 않는 편이 좋다.
    다음 글을 참고하자.

    왜 cacheAsBitmap은 나쁜가? http://www.bytearray.org/?p=290


    12. 동적언어의 장점을 충분히 살리자.
    동적언어와 정적언어의 차이점은 메모리를 사용하는 차이점에서 비롯된다. 실행하는 시점에 초기에 메모리를 확보해서 사용하는 언어는 정적이다라고 하며 거대한 메모리를 먼저 잡아놓고 실행하는 시점에 메모리를 자유롭게 사용하는 것은 동적언어이다. ActionScript 는 동적언어이기 때문에 중간중간에 실행도중 클래스 정의, 함수를 추가/수정/삭제가 가능하다. 이에서 나온 개념이 클로저라는 것인데 이 개념을 잘 이용하면 코딩이 훨씬 간편하고 편리해질 경우가 많다. Flex의 대부분 코딩 방법은 정적언어처럼 되어 있는데 사실 ActionScript는 동적언어이므로 이를 더 잘 사용해서 만들어져야 한다고 생각한다. 

    Closure에 대해 : http://diebuster.com/flash/82


    추가사항

    13. package 격리원칙
    클래스 격리에 대해서는 들어봤을 것이다. 클래스내 함수에 public, private를 적절하게 잘 사용해서 외부에 노출되는 메소드는 3~4개정도로 하고 내부 동작방식을 몰라도 클래스를 쉽게 이해할 수 있도록 하는데 필요한 개념이다. 이는 사용하는 관점도 그렇고 상속받는 관점에서도 마찬가지로 적용되도록 한다.

    패키지 격리라는 것은 internal을 적극활용한다는 의미이다. 아마도 많은 개발자들이 internal의 강력함을 잘 인지하지 못할것이다. 이에 대해서는 내가 굳이 설명할 필요 없다. 다음글을 보자.

    플래시 애플리케이션 개발하기 : http://diebuster.com/flash/86


    14. 적절한 코딩규칙
    개발하는데 코딩규칙은 무엇보다 중요하다. 가령 클래스 private 변수에는 _을 붙힌다던지 const값은 대문자로 표시한다던지 그런것 말이다. ActionScript 3.0에서 코딩규칙은 더욱 상세화 되면 좋다. 왜냐하면 워낙 동적인데다가 다른 언어에 비해서 명확한 컴파일 단계의 문법체크가 약하기 때문이다.

    hika님의 2009년도 코딩 규칙을 잠깐 보자. http://diebuster.com/flash/3 

    나는 처음에 클래스에 C, 정적클래스에 CS를 붙이는 의도에 대해서 잘 이해할 수 없었다. 하지만 이에 대한 강력함은 개발해보면 안다. 나는 클래스에 C, 정적클래스에 S, 인자객체는 A, internal 클래스는 앞에 _, 어떤 클래스의 Part라면 클래스명뒤에 _파트명 이런식으로 클래스 이름 규칙을 정했다. 실제로 이렇게 관리하면 클래스가 정확히 어떤 역할을 하는지 눈에 팍 들어온다. 함수를 인자로 받아야하는 경우 FN_intNumberString_Boolean:Function 과 같이 쓰면 이 인자로 들어올 함수는 반드시 function( a:int, b:Number, c:String):Boolean 형태로 만들어야 된다. 이런 규칙은 코딩시 코드힌트기능에도 표시되기 때문에 사용하면 정말 편리하다.

    반복구문에 대해 : http://diebuster.com/flash/?s=%EB%B0%98%EB%B3%B5%EA%B5%AC%EB%AC%B8&submit=

    결국 코딩규칙을 사용하는 명확한 의미는 한눈에 코드를 파악하고자 하는 의도에서 찾아야 한다.


    정리하며
    앞서 말했지만 타임라인 개발하는데 많은 도움을 주신 분을 꼽자면 hika님이다. 부족하지만 이 분의 도움으로 나는 스킬업을 할 수 있었다. 사실 hika님 입장에서는 이런 외부활동과 저술활동이 없어도 부족함이 없어보인다. 하지만 그의 공유정신 때문에 개발에 입문하는 많은 사람들에게 큰 도움이 되는 것은 사실이다. 이 글을 통해 감사하다고 전하고 싶다.

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

    애플이 아이패드를 발표하면서 Flash Player 지원을 공식적으로 거부했습니다.
    그 이후로 엄청난 논란이 있는 가운데...
    Adobe CTO 케빈 린치는 다음 처럼 의견을 제시했습니다.

    Adobe 케빈 린치의 '컨텐츠 및 애플리케이션에 대한 오픈 액세스

    아무튼 이런 상황에서 아래와 같은 기사도 올라왔네요.
    한번 읽어보시고 각자의 의견을 들어보는 것도 좋을 것 같아요. ^^

    ---------------------------------------------------------------------

    [원문]
    http://online.wsj.com/article/SB20001424052748703546004575055184080144688.html


    [월 스트리트 저널(Wall Street Journal)]


    애플(Apple)의 마이크로소프트(Microsoft)화?


    2010.02.09 / 홀먼 W. 제킨스 주니어(Holman W. Jenkins, Jr.)


    애플은 증오적 라이벌 관계로 인해 제로섬 전략에 집착하는 회사로 전락할 위험에 놓여있습니다.

    현재를 언급하는 것이 아니라 애플의 시가총액이 상상할 수 없는 규모에 달하여 마이크로소프트의 시가총액을 뛰어넘는 해의 이야기가 될 수 있습니다. 당연히 축하 인사가 따르겠지만 위로의 말도 함께 따를 것입니다. 제품 개발에만 전념하는 회사의 경우 전략에 집착하는 회사가 될 위험의 소지가 있기 때문입니다. 그리고 여기서 “전략”이란 증오적 라이벌 관계로 인한 제로섬 전략을 의미합니다.

    안타깝게도 현재 우리는 신뢰를 찾기 힘든 타락한 세상에 살고 있습니다.

    아이패드(iPad)의 예를 들어보겠습니다. 아이패드는 세상에 공개되자마자 “구세주 태블릿”이라는 별명을 얻었습니다. 아이패드는 상상하지 못할 만큼 탁월한 제품이 아닌 단지 애플이 넷북 경쟁에 뛰어들기 위해 출시한 제품으로, 아이팟 터치(iPod Touch)를 확대해 놓은 버전에 불과합니다. 아이패드는 최상의 웹 브라우징 시스템으로 부각될 수 없을 수도 있습니다. 왜냐하면 애플이 웹 상에서 비디오를 전달하는 데 75% 가량 사용되고 있는 플래시(Flash) 지원을 거부했기 때문입니다. 그러나 아이패드(iPad)(‘지불’이라는 영어 PAID의 철자 순서를 바꾸어 만든 말)는 애플의 온라인 서비스를 통해 판매되고 있는 e북, 음악 및 비디오를 사용하기에는 적합한 디바이스로 보입니다. 단도직입적으로 말하자면 아이패드는 마치 아이튠즈(iTunes) 스토어를 후원하기 위해 최적화된 디바이스로 보입니다.


    그렇다면 왜 애플은 플래시를 제외시키기로 결정했는지 궁금하지 않을 수 없습니다. 애플과 애플의 후원업체들은 플래시가 짜증나는 웹 광고를 만드는데 사용되는 제품이라는 미학적이고 철학적인 이유를 내세우고 있습니다.


    애플이 플래시를 거부하는 이유는 바로 여기에 있습니다. 플래시를 사용하면 아이폰(iPhone) 및 아이패드 사용자는 아이튠즈를 통하지 않고 비디오 및 기타 엔터테인먼트를 사용할 수 있을 것이고 애플 앱 스토어(Apple App Store)에서만 현재 구입할 수 있는 다양한 기능을 무료로 얻을 수 있게 됩니다.


    네트 중립성 옹호자들이나 독점 금지법 집행자들이 스티브 잡스(Steve Jobs)를 연행해가는 오류를 범하지 않도록, 한 가지 덧붙이자면 애플은 플래시를 거부할 수 있는 적법한 권리를 가지고 있습니다. 그러나 한 가지 짚고 넘어가야 할 것은 애플은 엄청난 양의 웹 컨텐츠와 사용자를 분리시키려는 전략적 선택을 내세우고 있다는 점입니다. 플래시가 버그를 부른다는 주장 등에 대해 플래시 옹호자의 시점에서 잠시 벗어나 설명해 보겠습니다. 플래시는 다른 비디오 플레이어와의 시장 경쟁에서 우위를 점하고 있으며 10억 명에 달하는 PC 사용자가 정기적인 업데이트를 다운로드하고 있다는 사실은 엄청난 성공이라고 해도 과언이 아닐 것입니다. Hulu.com에서 TV 프로그램을 시청하거나 MLB.com에서 야구 경기를 보거나 Facebook을 통해 친구와 커뮤니케이션할 때에도 플래시가 필요합니다.


    현재로선 플래시를 소유하고 있는 어도비는 최소한 플래시 프로그래머가 애플의 앱 스토어를 통해 자신이 개발한 컨텐츠나 애플리케이션을 제공할 수 있도록 몇 가지 툴을 출시하고 있다고 말하고 있습니다. 이것도 애플의 축복이 있어야 가능할 것입니다. 그러나 애플은 미래의 웹 표준은 독점적인 플래시를 대체하게 될 것이라고 주장하고 있습니다. 이것은 지켜봐야 할 일입니다. 플래시는 현재 전세계 95%의 PC에 설치되어 있어 하루 아침에 웹 표준이 바뀔 가능성은 극히 희박합니다. 또한 파이어폭스(Firefox) 같은 브라우저 제작업체 모두가 애플이 말한 새로운 표준과 생각을 함께 하고 있는 것도 아닙니다.


    더 크게 우려되는 바는 여기에 있습니다. 애플이 이러한 무모한 목표로 인해 자사의 모바일 디바이스 사용자층을 확대하여 단지 더 많은 사용자가 아이튠즈만 이용하도록 사용자를 가두는 “네트워크 효과”의 매혹적인 유혹에 무릎을 꿇을 수 있다는 점입니다. 애플은 최근까지 제휴 관계를 유지했던 구글(Google)과 전면전에 돌입했습니다.


    지난달 말  애플 직원과의 미팅에서 스티브 잡스가  “지금까지 애플은 검색 시장에서 구글과의  경쟁을 피하기 위해 노력했지만 ‘아이폰  타도’ 를 위해 자사의 모바일 디바이스르  출시했다.” 면서 “사악해지지 말자(Don't be evil) " 라는 구글의 모토를 폄하한 발언이 일파 만파 퍼졌습니다.


    구글폰으로 인해 아이폰이 없어지지는 않을 것입니다. 시장은 수많은 모바일 디바이스를 수용할 수 있는 여건을 충분히 갖추고 있습니다. 그러나 실제 위협이 되는 것은 수천만 명의 소비자를 앱 스토어인 아이튠즈만 이용할 것을 주입시킬 수 있는 애플의 능력입니다. 구글이 아이패드가 공개되기 며칠 전 자사의 슬레이트 모양의 디바이스 모델을 발표한 것은 의미 있는 행보였습니다. 구글의 모바일 디바이스는 플래시를 지원하고 있습니다. 애플 사용자가 사용할 수 없는 비디오 및 기타 웹 기능을 사용자가 구매하거나 사용할 수 있도록 했습니다.


    애플이 아이폰에서 구글을 대체하기 위해 마이크로소프트의 검색 엔진인 빙(Bing)과 거래를 고려하고 있다는 소문이 돌고 있습니다. 또한 애플이 광고 사업에도 뛰어들어 구글의 서비스와 경쟁하기 위해 클라우드 서비스를 확대할 것이라는 소문도 들리고 있습니다. 어디서 많이 들어본 스토리 아닌가요?


    네트워크 효과는 권력과 부를 가져오는 방법이 될 수는 있지만 마이크로소프트의 사례에서 볼 수 있듯이 너무 많은 성과는 특권의 지위를 유지하기 위한 방어적이고 망상적 시도로 인해 물거품이 될 수 있습니다. 회사의 최고 심미가이자 완벽주의자가 더 이상 정상적인 의사 결정을 내리지 못하게 되면 과연 애플은 어떤 회사가 될 것인지 많은 전문가들은 의문을 가지고 바라보고 있습니다. 애플이 점점 더 많은 사용자들에게 아이튠즈 앱 스토어만 사용할 수 있는 질이 나쁜 디바이스를 출시하는 회사로 전락되지 않을까 우려되는 바입니다.
     

    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로 못할 것이 없다."라는 말을 들어보셨나요? 이번에 소개하는 것은 beautifl.net에 올라온 Flash 코드중 개인적으로 자극을 받은 것만 선정해본 것들입니다. wonderfl.net에 올라온 것들이기 때문에 코드도 공개되어 있어 언제든지 분석도 할 수 있습니다. Flash의 세계를 만끽해보세요.

    보러가기 : http://opencast.naver.com/FL188/16

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

    LCDS, BlazeDS, ZendAMF등을 이용해 AMF(ActionScript Message Format)으로 데이터를 주고받는 형태는 이미 많은 예제들과 문서들이 있다. AMF는 데이터 통신을 위한 일종의 약속된 규약이고 이 데이터를 주고 받고 하는 과정에서 서로의 언어에 맞게 직렬화(Serialization)하는 것은 각 언어에서 지원해주는 라이브러리를 사용하면 된다. ActionScript 3.0은 기본 API에서 지원해준다. 자바의 경우는 BlazeDS나 LCDS를 사용하면 된다. PHP의 경우에는 ZendAMF를 사용하면 된다. 이들을 이용하면 가령, 자바와 java.lang.Interger는 ActionScript의 int나 uint로... java.lang.Double은 ActionScript의 Number형과 직렬화된다. 이는 일종의 기본적으로 지원되는 직렬화이다.

    다음은 BlazeDS에서 기본적으로 지원되는 직렬화이다.
    Serializing between ActionScript and Java

    하지만 이런 기본 직렬화과정을 사용하지 않고 직렬화 자체를 커스터마이징(customizing)할 수 있다. 가령 클라이언트(예,Flash 애플리케이션)에서는 아이디, 이름, 속성, 가격의 정보가 중요하지만 서버(예,자바)에서는 재고(inventory)가 중요한 경우가 있다. 이런 경우에는 Flex와 Java쪽의 직렬화하는 클래스를 다음과 같이 디자인 할 수 있겠다.

    // Product.as
    package samples.externalizable {
    
    import flash.utils.IExternalizable;
    import flash.utils.IDataInput;
    import flash.utils.IDataOutput;
    
    [RemoteClass(alias="samples.externalizable.Product")]
    public class Product implements IExternalizable {
        public function Product(name:String=null) {
            this.name = name;
        }
    
        public var id:int;
        public var name:String;
        public var properties:Object;
        public var price:Number;
    
        public function readExternal(input:IDataInput):void {
            name = input.readObject() as String;
            properties = input.readObject();
            price = input.readFloat();
        }
    
        public function writeExternal(output:IDataOutput):void {
            output.writeObject(name);
            output.writeObject(properties);
            output.writeFloat(price);
        }
    }
    }
    


    // Product.java
    package samples.externalizable;
    
    import java.io.Externalizable;
    import java.io.IOException;
    import java.io.ObjectInput;
    import java.io.ObjectOutput;
    import java.util.Map;
    
    /**
    * This Externalizable class requires that clients sending and 
    * receiving instances of this type adhere to the data format
    * required for serialization.
    */
    public class Product implements Externalizable {
        private String inventoryId;
        public String name;
        public Map properties;
        public float price;
    
        public Product()
        {
        }
    
            /**
            * Local identity used to track third party inventory. This property is
            * not sent to the client because it is server-specific.
            * The identity must start with an 'X'.
            */
            public String getInventoryId() {
                return inventoryId;
            }
    
            public void setInventoryId(String inventoryId) {
                if (inventoryId != null && inventoryId.startsWith("X"))
                {
                    this.inventoryId = inventoryId;
                }
                else
                {
                    throw new IllegalArgumentException("3rd party product
                    inventory identities must start with 'X'");
                }
            }
    
            /**
             * Deserializes the client state of an instance of ThirdPartyProxy
             * by reading in String for the name, a Map of properties
             * for the description, and 
             * a floating point integer (single precision) for the price. 
             */
            public void readExternal(ObjectInput in) throws IOException,
                ClassNotFoundException {
                // Read in the server properties from the client representation.
                name = (String)in.readObject();
                properties = (Map)in.readObject();
                price = in.readFloat();
                setInventoryId(lookupInventoryId(name, price));
            }
            /**
             * Serializes the server state of an instance of ThirdPartyProxy
             * by sending a String for the name, a Map of properties
             * String for the description, and a floating point
             * integer (single precision) for the price. Notice that the inventory 
             * identifier is not sent to external clients.
             */
            public void writeExternal(ObjectOutput out) throws IOException {
                // Write out the client properties from the server representation
                out.writeObject(name);
                out.writeObject(properties);
                out.writeFloat(price);
            }
            
            private static String lookupInventoryId(String name, float price) {
                String inventoryId = "X" + name + Math.rint(price);
                return inventoryId;
            }
    }
    

    위 코드는 ActionScript의 flash.utils.IExternalizable 인터페이스와 Java의 java.io.Externalizable 인터페이스를 이용해 기본직렬화를 무시하고 이들 인터페이스에 정의된 readExternal와 writeExternal 메소드를 호출하여 직렬화 자체를 커스터마이징 할 수 있다는 것을 의미한다. Externalizable 인터페이스를 구현한 클래스에 정의된 메소드가 기본 직렬화보다 우선순위가 높다는 것을 기억하면 되겠다.

    Flex의 ArrayCollection을 다시 한번 보기 바란다. 이 클래스는 flash.utils.IExternalizable를 구현했다.
    mx.collections.ArrayCollection

    꼭 이런 경우만은 아니다. 쓸데없는 데이터의 크기를 줄이기 위한 방법도 해당한다. 예를들어 ActionScript 코드를 보면 다음과 같다.


    class Example implements IExternalizable {
      
          public var one:Boolean;
          public var two:Boolean;
          public var three:Boolean;
          public var four:Boolean;
          public var five:Boolean;
          public var six:Boolean;
          public var seven:Boolean;
          public var eight:Boolean;
           public function writeExternal(output:IDataOutput) {
               var flag:int = 0;
               if (one) flag |= 1;
              if (two) flag |= 2;
              if (three) flag |= 4;
              if (four) flag |= 8;
              if (five) flag |= 16;
              if (six) flag |= 32;
              if (seven) flag |= 64;
              if (eight) flag |= 128;
               output.writeByte(flag);
          }
           public function readExternal(input:IDataInput) {
               var flag:int = input.readByte();
               one = (flag & 1) != 0;
              two = (flag & 2) != 0;
              three = (flag & 4) != 0;
              four = (flag & 8) != 0;
              five = (flag & 16) != 0;
              six = (flag & 32) != 0;
              seven = (flag & 64) != 0;
              eight = (flag & 128) != 0;
          }
     }
    

    데이터 통신을 위해 쓸데없이 Boolean객체를 주고 받을 필요없다. 위 코드처럼 직렬화를 커스터마이징한다면 송수신 데이터 자체의 크기도 줄일 수 있다. 이는 매우 유용하다.


    참고글
    flash.utils.IExternalizable
    커스텀 직렬화의 사용
    ActionScript 3.0 데이터 유형 및 직렬화(serialization)
    Serializing between ActionScript and Java
    AMF 3 스팩
    AS3 BitmapData AMF solution using IExternalizable
    Flex and PHP: remoting with Zend AMF

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


    아래는 Papervision3D에 쓸 수 있는 Primitive인 GeodesicSphere 클래스를 만들어 테스트한 화면이다.


    위 프로그램의 소스는 아래 링크를 참고한다.
    http://wonderfl.net/code/e6f14ed092706ba9f539f64da252a92200724769

    소스코드상에서 GeodesicSphere 클래스 부분만 제외하고 전부 테스트 코드이다.

    Away3DLite환경에서 만든 GeodesicSphere도 만들었다.

    http://wonderfl.net/code/5dcd89ac60896ae55604aa018747bc0d861b2bff

    참고글 : http://blog.jidolstar.com/589

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

    로컬자원을 서버에 전송하기 위해 우리는 FileReference Class를 사용하면 된다.
    FileReference로 파일을 서버에 전송하는 방법은 많이 공개가 되어 있다.
    알다시피 FileReference의 browse()함수를 호출한 뒤, select 이벤트가 발생시 upload() 함수를 이용하여 선택한 로컬자원을 서버로 보낸다.

    서버에서는 아주 단순하게 서버 임시 저장소에 저장된 파일을 원하는 곳에 복사하기만 하면 된다.
    php의 경우 move_uploaded_file() 메소드를 사용하면 되겠다.

    그럼 Flex 시행도중 캡쳐한 화면을 저장하는 경우에도 위와 같은 방법으로 저장이 가능할까?

    답은 "된다"


    나는 예전에 ImageSnapshot 클래스를 이용해 base64로 변환해서 서버로 전송한 뒤에 base64를 decode하여 저장하는 방법에 대해서 언급한적이 있다. (http://blog.jidolstar.com/301 참고)
    이 방법의 단점은 이미지가 큰 경우 base64로 encode, decode 하는 과정에서 서버성능 및 클라이언트 성능에 따라 속도 및 부하에 영향을 준다. 그러므로 이 방법으로는 PNGEncoder 및 JPGEncoder로 PNG, JPG 파일 형식에 맞는 데이타를 만들었다고 해도, FileReference와 같이 데이타를 전송을 할 수 없었다.

    하지만 Google을 열심히 돌아다녔다니 이 문제점에 대한 해결의 실마리를 찾을 수 있었다.
    (역시 Google!!!)

    간단히 방법을 요약하자면
    화면을 BitmapData로 만들어 PNGEncoder나 JPGEncoder를 이용하여 encode한 다음, 그 결과값인 byteArray값을 서버에 전송한다. 전송된 데이타는 FileReference에서 upload()을 이용해 보낸 파일을 저장할때와 동일하게 저장하면 되겠다.

    1. BitmapData로 캡쳐해라.

    아래 target은 캡쳐할 UIComponent와 같은 DisplayObject 객체이다.

    BitmapData로 캡쳐
    var bitmapData:BitmapData = new BitmapData(target.width, target.height, true, 0xFFFFFF);
    var drawingRectangle:Rectanglenew Rectangle(0, 0, target.width, target.height);
    bitmapData.draw(target, new Matrix(), null, null, drawingRectangle, false);

    단, BitmapData를 이용해서 화면을 캡쳐할 대상이 외부 동영상이나 사진같은 거라면 crossdomain.xml 에 대한 check가 있어야 한다. 컨텐츠 로드시 checkPolicyFile 속성을  true로 설정할 필요가 있겠다.
    그리고 2880px 이상의 크기는 BitmapData로 만들 수 없다.



    2. JPG나 PNG로 Encode 하여 ByteArray를 얻는다.


    Flex 3 SDK에는 mx.graphics.codec 패키지에 JPGEncoder와 PNGEncoder가 있다. 인터넷을 뒤져보면 GIFEncoder등도 있을것이다. Flex 2 환경에서 작업한다면 Google code에 Adobe AS3 Corelib에 이들이 제공된다. 만약 JPGEncoder를 사용한다면 다음과 같이 하면 되겠다.

    JPGEncoder를 이용하여  JPG  ByteArray값 만들기
    import mx.graphics.codec.JPGEncoder;

    var byteArray:ByteArray = new JPGEncoder().encode(bitmapData);


    Flex 3 SDK는 이러한 Encoder가 IImageEncoder로 구현되었다. 필요하다면 언제 어디서나 Encoder를 바꿔야 하는 경우 IImageEncoder를 사용하는 것이 좋을 수 있겠다.
    가령 아래 예제처럼 말이다.

    다양한 Image Encoder 사용하기
    import mx.graphics.codec.*;

    var imageType:String = "jpg";
    var imageEncoder:IImageEncoder;
    if( imageType.toUpperCase() == "JPG" ) imageEncoder= new JPEGEncoder();
    else if( imageType.toUpperCase() == "PNG" ) imageEncoder= new PNGEncoder();
    var byteArray:ByteArray = imageEncoder.encode(bitmapData);



     

    3. 서버에 ByteArray를 전송한다.

    데이타를 전송할때는 FileReference를 사용하지 않는다.
    바로 URLLoader와 URLRequest만 이용해서 전송이 가능하다. 참고 데이타는 POST방식으로 URLVariable을 이용해서 보낼 수 있다.

    Flex/AIR 데이터 전송 방법
    //assumed variable declarations
    //var byteArray:ByteArray = 2번째 단계에서 JPG 데이타를 얻었다.
    //var fileName:String = "desiredfilename.jpg" //저장할 파일 이름이다. 아무거나 적자!
    //var uploadPath:String = "저장할 때 사용되는 서버측 script 경로"
    //var parameters:URLVariables = 이미지 이외에 다른 보낼 다른 데이타가 있다면 이것을 이용한다.
    //function onComplete(eventObj:Event):void {  성공적으로 데이타를 전송했을때 핸들러 함수 정의
    //function onError(eventObj:ErrorEvent):void {  이미지 전송을 실패했을때 핸들러 함수 정의

    var urlRequest:URLRequest = new URLRequest();
    urlRequest.url = uploadPath;
    //urlRequest.contentType = 'multipart/form-data; boundary=' + UploadPostHelper.getBoundary();
    urlRequest.method = URLRequestMethod.POST;
    urlRequest.data = UploadPostHelper.getPostData(file, byteArray, parameters);
    urlRequest.requestHeaders.push( new URLRequestHeader( 'Cache-Control', 'no-cache' ) );
    urlRequest.requestHeaders.push( new URLRequestHeader( 'Content-Type', 'multipart/form-data; boundary=' +UploadPostHelper.getBoundary()) );

    var urlLoader:URLLoader = new URLLoader();
    urlLoader.dataFormat = URLLoaderDataFormat.BINARY;
    urlLoader.addEventListener(Event.COMPLETE, onComplete);
    urlLoader.addEventListener(IOErrorEvent.IO_ERROR, onError);
    urlLoader.addEventListener(SecurityErrorEvent.SECURITY_ERROR, onError);
    urlLoader.load(urlRequest);


    위에 진한 부분에 대한 클래스는 아래에 정의되어 있다. 당신은 이 클래스가 어떻게 구성되었는가 열심히 공부할 필요가 없다.(원한다면 해도 된다. 말리지 않음 ^^)

    UploadPostHelper Class (Language : java)
    package {

        import flash.events.*;
        import flash.net.*;
        import flash.utils.ByteArray;
        import flash.utils.Endian;

        /**
         * Take a fileName, byteArray, and parameters object as input and return ByteArray post data suitable for a UrlRequest as output
         *
         * @see http://marstonstudio.com/?p=36
         * @see http://www.w3.org/TR/html4/interact/forms.html
         * @see http://www.jooce.com/blog/?p=143
         * @see http://www.jooce.com/blog/wp%2Dcontent/uploads/2007/06/uploadFile.txt
         * @see http://blog.je2050.de/2006/05/01/save-bytearray-to-file-with-php/
         *
         * @author Jonathan Marston
         * @version 2007.08.19
         *
         * This work is licensed under a Creative Commons Attribution NonCommercial ShareAlike 3.0 License.
         * @see http://creativecommons.org/licenses/by-nc-sa/3.0/
         *
         */

        public class UploadPostHelper {

            /**
             * Boundary used to break up different parts of the http POST body
             */

            private static var _boundary:String = "";

            /**
             * Get the boundary for the post.
             * Must be passed as part of the contentType of the UrlRequest
             */

            public static function getBoundary():String {

                if(_boundary.length == 0) {
                    for (var i:int = 0; i < 0x20; i++ ) {
                        _boundary += String.fromCharCode( int( 97 + Math.random() * 25 ) );
                    }
                }

                return _boundary;
            }

            /**
             * Create post data to send in a UrlRequest
             */

            public static function getPostData(fileName:String, byteArray:ByteArray, parameters:Object = null):ByteArray {

                var i: int;
                var bytes:String;

                var postData:ByteArray = new ByteArray();
                postData.endian = Endian.BIG_ENDIAN;

                //add Filename to parameters
                if(parameters == null) {
                    parameters = new Object();
                }
                parameters.Filename = fileName;

                //add parameters to postData
                for(var name:String in parameters) {
                    postData = BOUNDARY(postData);
                    postData = LINEBREAK(postData);
                    bytes = 'Content-Disposition: form-data; name="' + name + '"';
                    for ( i = 0; i < bytes.length; i++ ) {
                        postData.writeByte( bytes.charCodeAt(i) );
                    }
                    postData = LINEBREAK(postData);
                    postData = LINEBREAK(postData);
                    postData.writeUTFBytes(parameters[name]);
                    postData = LINEBREAK(postData);
                }

                //add Filedata to postData
                postData = BOUNDARY(postData);
                postData = LINEBREAK(postData);
                bytes = 'Content-Disposition: form-data; name="Filedata"; filename="';
                for ( i = 0; i < bytes.length; i++ ) {
                    postData.writeByte( bytes.charCodeAt(i) );
                }
                postData.writeUTFBytes(fileName);
                postData = QUOTATIONMARK(postData);
                postData = LINEBREAK(postData);
                bytes = 'Content-Type: application/octet-stream';
                for ( i = 0; i < bytes.length; i++ ) {
                    postData.writeByte( bytes.charCodeAt(i) );
                }
                postData = LINEBREAK(postData);
                postData = LINEBREAK(postData);
                postData.writeBytes(byteArray, 0, byteArray.length);
                postData = LINEBREAK(postData);

                //add upload filed to postData
                postData = LINEBREAK(postData);
                postData = BOUNDARY(postData);
                postData = LINEBREAK(postData);
                bytes = 'Content-Disposition: form-data; name="Upload"';
                for ( i = 0; i < bytes.length; i++ ) {
                    postData.writeByte( bytes.charCodeAt(i) );
                }
                postData = LINEBREAK(postData);
                postData = LINEBREAK(postData);
                bytes = 'Submit Query';
                for ( i = 0; i < bytes.length; i++ ) {
                    postData.writeByte( bytes.charCodeAt(i) );
                }
                postData = LINEBREAK(postData);

                //closing boundary
                postData = BOUNDARY(postData);
                postData = DOUBLEDASH(postData);

                return postData;
            }

            /**
             * Add a boundary to the PostData with leading doubledash
             */

            private static function BOUNDARY(p:ByteArray):ByteArray {
                var l:int = UploadPostHelper.getBoundary().length;

                p = DOUBLEDASH(p);
                for (var i:int = 0; i < l; i++ ) {
                    p.writeByte( _boundary.charCodeAt( i ) );
                }
                return p;
            }

            /**
             * Add one linebreak
             */

            private static function LINEBREAK(p:ByteArray):ByteArray {
                p.writeShort(0x0d0a);
                return p;
            }

            /**
             * Add quotation mark
             */

            private static function QUOTATIONMARK(p:ByteArray):ByteArray {
                p.writeByte(0x22);
                return p;
            }

            /**
             * Add Double Dash
             */

            private static function DOUBLEDASH(p:ByteArray):ByteArray {
                p.writeShort(0x2d2d);
                return p;
            }

        }
    }



    한가지 중요한 정보를 언급하겠다.
    URLLoader를 이용해 서버에 전송할때, 프로그램이 같은 도메인상에 있는 경우에는 보안문제가 없다. 하지만 다른 도메인에 위치한 서버로 이미지를 전송할때는 반드시 crossdomain.xml을 check해야한다.

    1. Security.loadPolicyFile(http://다른도메인/crossdomain.xml); 를 URLLoader의 load()함수를 호출하기 전에 호출한다.

    2. Flash Player 9.0.124.0 버전부터는 HTTP Header 보안취약점을 해결하기 위해서 cross domain 정책이 변경되었는데.... 서버측에 있는 crossdomain.xml에 allow-http-request-headers-from가 추가되어져야 한다. 이것은 HTTP 헤더 전송을 허용할지 결정해준다.

    crossdomain.xml (Language : xml)
    <?xml version="1.0"?>
    <!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
    <cross-domain-policy>
          <allow-access-from domain="*.jidolstar.com" />
          <allow-http-request-headers-from domain="*.jidolstar.com" headers="*"/>
    </cross-domain-policy>

    위 처럼 서버측 crossdomain.xml에 allow-http-request-headers-from을 추가함으로 다른 도메인간에 HTTP 헤더 전송을 허용할 수 있다.

    서로 다른 도메인에 SWF와 서버측 코드가 배치되어 있다면 반드시 이 사실을 숙지하길 바란다.


    3. Flash Player 10에서는 사용자 인터렉션이 반드시 필요하다.

    다음글을 참고하세요.

    http://blog.jidolstar.com/411 


     

    4. 서버측 코드 작성

    만약 위 3번 코드에서 var parameters:URLVariables를 아래와 같이 작성했다고 하자.

    URLVariables 설정 (Language : java)
    var parameters:URLVariables = new URLVariables();
    parameters.method = "id";
    parameters.userId = "2000321";


    그럼 PHP 코드로 아래와 같은 방법처럼 만들면 되겠다.(테스트는 안해봤음)

    PHP 코드 예제 (Language : php)
    <?php
    $method = $_POST['method'];
    $userId = $_POST['userId'];
    $file_temp = $_FILES['Filedata']['tmp_name'];
    $file_name = $_FILES['Filedata']['name'];
    $file_size = $_FILES['Filedata']['size'];

    if( $method == "id" )
    {
      $movePath = "/home/myPath/images/$userId_$file_name";
    }
    else
    {
      $movePath = "/home/myPath/images/time_".time()."_".$file_name;
    }

    move_uploaded_file($file_temp,$movePath);

    echo "save Complete";
    ?>


    마지막 save Comple 메시지를 받기 위해서는 Flex의 Complete 이벤트 발생시 아래와 같은 방법으로 받으면 되겠다. 이것을 알아내는데도 많이 힘들었다. 일종의 팁이다. ^^;

    데이타 받기 (Language : java)
    var loader:URLLoader = URLLoader(event.target);
    var bytedata:ByteArray = loader.data;
    var strData:String = bytedata.toString();
    trace( strData)


    실제 업무에도 잘 이용하고 있다.
    이미지 에디터 등을 만들때 아주아주 유용한 자료가 될 것이다.

    누가 예제 프로그램 만들어서 트랙백 걸어 주시면 고맙겠다.


    자료 출처 
    http://marstonstudio.com/2007/08/19/how-to-take-a-snapshot-of-a-flash-movie-and-automatically-upload-the-jpg-to-a-server-in-three-easy-steps/


    지돌스타 블로그내 참고자료
     - ImageSnapshot 클래스에 대해 : http://blog.jidolstar.com/301
     - FileReference의 UploadCompleteData 이벤트 : http://blog.jidolstar.com/324
     - 동영상 캡쳐 방법 : http://blog.jidolstar.com/215


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


    지난 2009년 12월 18일에 프로젝트 코드명 Squiggly(스퀴글리)가 Prerelease판으로 업데이트 되었다.
    http://labs.adobe.com/technologies/squiggly/

    Squiggly는 Flash Player 10, AIR 1.5이상에서 동작한다. 이 엔진은 ActionScript 3.0 기반이며 영어로 문장에서 사용된 단어를 영어사전의 그것과 비교하여 단어의 철자를 체크한다. 이번 업데이트는 TLF(Adobe Text Layout Framework)를 기반으로 하는 Flex 4 Spark 컴포넌트를 지원하도록 했다. Squiggly는 Flex Builder, Flash Builder, Flash CS4등 다양한 툴에서 사용할 수 있다. 단지 아쉬운 것은 영어단어만 체크한다는 점이다.


    다음 페이지는 Squiggly 데모이다.
    http://labs.adobe.com/technologies/squiggly/demo/

    개발자는 언제든지 예제소스와 ASDoc을 아래 링크에서 받아볼 수 있다.


    이것을 쓸지 모르겠지만 아무튼 알아두고 있어 나쁠 것도 없으니....

    참고
    http://adnaru.com/242

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

     



    예전에 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)


    Flash 엔터프라이즈 개발 업체를 제외하고는 플래시 개발자가 2~3명인 업체가 대부분입니다. 게다가 Flex/AIR등에 처음 접하는 경우도 다분하죠. 결국 Flash 프로젝트의 실무를 어찌 진행할 것인가 고민이 되는 것이 현실입니다. 그래서 도움이 될만한 글들을 모아봤습니다.

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

    이 캐스트는 베스트 No.로 12월 10일에 추천되었습니다. ^^
    http://opencast.naver.com/home/bestNo.nhn?exposureDate=20091210 

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

    어떤 분이 Flex 3.4환경에서 MenuBar에 색을 입히려하다가 잘 안되서 본인의 블로그에 질문을 해주셨다.


     <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    	<mx:Style>
    		MenuBar { 
    			font-weight:bold; 
    			color:#FFFFFF;
    			fill-colors:#0D0A92, #1B16F4, #37920A, #59EB12;
    			fill-alphas:1.0,1.0;
    		}
    		MenuBarItem {
    			theme-color:#0000FF;
    		}
    		Menu { 
    			alternatingItemColors:#ffffff,#eff4fa;
    			color:#000000;
    			top:4px;
    			bottom:2px;
    			horizontalGap:2px;	
    			roll-over-color:#00ff00;
    		}
    	</mx:Style>
    	<mx:MenuBar id="myMenuBar" labelField="@label" >
    		<mx:XMLList>
    			<menuitem label="MenuItem A">
    				<menuitem label="SubMenuItem A-1" enabled="false"/>
    				<menuitem label="SubMenuItem A-2"/>
    			</menuitem>
    			<menuitem label="MenuItem B"/>
    			<menuitem label="MenuItem C"/>
    			<menuitem label="MenuItem D">
    				<menuitem label="SubMenuItem D-1" 
    						  type="radio" groupName="one"/>
    				<menuitem label="SubMenuItem D-2" 
    						  type="radio" groupName="one"
    						  selected="true"/>
    				<menuitem label="SubMenuItem D-3" 
    						  type="radio" groupName="one"/>
    			</menuitem>
    		</mx:XMLList>
    	</mx:MenuBar>
    </mx:Application>
    



    질문은 MenuBarItem의 themeColor를 #0000FF로 지정했는데 저렇게 나오냐는 것이였다. 참고로 MenuBar는 저 파란색의 바를 말하는 것이고 MenuBarItem은 MenuItem A, MenuItem B...등으로 표시된 것이다. 이들은 모두 UIComponent를 상속했다. 마지막으로 Menu는 서버메뉴로써 List를 확장한 것이다.

    질문처럼 직관적으로 봐도 문제가 있어 보인다. 이렇게 나오는 이유를 알기 위해서는 스킨부분을 찾아봐야 한다.

    (아래내용이 약간 복잡할 수 있으나 천천히 따라오면 그리 복잡한 것도 아니다. 원래 이런걸 말로 설명해야 빠른 건데 글로 설명하려 하니 어렵다. ^^;)


    원인 찾기

    MenuBar의 아이템렌더러는 menuBarItemRenderer속성에 지정된다. 기본적으로 MenuBarItem 클래스가 된다. 쉽게 이야기해 위 그림에서 MenuItem A, MenuItem B... 등은 다 MenuBarItem으로 생성되어 그려진 것이다. 만약 MenuBarItem을 다른 것으로 대체하고 싶다면 IMenuBarItemRenderer 인터페이스를 구현해서 다른 MenuBarItem을 만들면 되겠다. 아래는 MenuBar의 menuBarItemRenderer 속성을 설명하고 있다.

    (문제의 원인을 파악하기 위해 가장 먼저 찾아야 할 것은 API 문서이다.)



    MenuBarItem의 스킨은 무엇일까? 아래 MenuBar에서 Style부분을 보자. MenubarItem의 스킨은 바로 ActivatorSkin 클래스라는 것을 알 수 있다. 결국 스킨도 내 마음대로 바꿀 수 있는 것이다.

    Flex 3.4에서 스킨은 크게 그래픽기반 스킨과 프로그램적 스킨(Programmatic Skin)이 있다. 그래픽기반 스킨은 이미지를 생각하면 된다. 하지만 프로그램적 스킨은 ActionScript 3.0 코드이다. MenuBar의 itemSkin 스타일 속성으로 mx.skins.halo.ActivatorSkin을 썼다는 것은 바로 프로그램적 스킨을 사용한다는 이야기이다.

    (문서를 봐도 해결의 실마리가 안보인다면 SDK를 뜯어보자!)

    그럼 이들이 어떻게 동작하는 것일까? MenuBar부터 시작해 MenuBarItem, ActivatorSkin으로 자연스럽게 찾아보면 된다. Flex 3.4 SDK 소스는 공개되어 있으므로 아래 그림처럼 Flash builder 4에서 쉽게 찾아볼 수 있다. Flex Builder 3를 사용한다면 이 기능은 사용할 수 없다.

    Flex SDK 클래스를 보려면 framework.swc를 펼쳐보면 된다.



    MenuBar 소스에서 mouseOverHandler, mouseUpHandler, mouseDownHandler 메소드들을 보자. 이들 메소드는 마우스 이벤트를 처리하는데 잘 보면 이런 코드들이 있다.

    item.menuBarItemState = "itemDownSkin";
    


    여기서 item은 IMenuBarItemRenderer 인터페이스의 참조이다. 그리고 MenuBarItem 클래스는 이 인터페이스를 구현한 것이다. 결국 MenuBarItem의 menuBarItemState 속성에 itemDownSkin이라고 지정한 것이다.

    그럼 MenuBarItem 소스의 menuBarItemState 부분을 보자.


        public function set menuBarItemState(value:String):void
        {
            _menuBarItemState = value;
            viewSkin(_menuBarItemState);
        }   
    
        private function viewSkin(state:String):void
        {  	
        	var newSkinClass:Class = Class(getStyle(state));
        	var newSkin:IFlexDisplayObject;
        	var stateName:String = "";
        	    	
        	if (!newSkinClass)
        	{
        		// Try the default skin
        		newSkinClass = Class(getStyle(skinName)); 		
        		    	
        		if (state == "itemDownSkin")
        			stateName = "down";
        		else if (state == "itemOverSkin")
        			stateName = "over";
        		else if (state == "itemUpSkin")
        			stateName = "up";
        		
        		// If we are using the default skin, then 
        		if (defaultSkinUsesStates)
        			state = skinName;
        		
         		if (!checkedDefaultSkin && newSkinClass)
        		{
    	    		newSkin = IFlexDisplayObject(new newSkinClass());
    	    		// Check if the skin class is a state client or a programmatic skin
    	    		if (!(newSkin is IProgrammaticSkin) && newSkin is IStateClient)
    	    		{
    	    			defaultSkinUsesStates = true;
    	    			state = skinName;
    	    		}
    	    		
    	    		if (newSkin)
    	    		{
    		    		checkedDefaultSkin = true;
    		    	}
        		}
        	}
        	
          	newSkin = IFlexDisplayObject(getChildByName(state));
    
            if (!newSkin)
            {
                if (newSkinClass)
                {
                    newSkin = new newSkinClass();
    
                    DisplayObject(newSkin).name = state;
    
                    if (newSkin is ISimpleStyleClient)
                        ISimpleStyleClient(newSkin).styleName = this;
    
                    addChildAt(DisplayObject(newSkin), 0);
                }
            }
    
            newSkin.setActualSize(unscaledWidth, unscaledHeight);
    
            if (currentSkin)
                currentSkin.visible = false;
    
            if (newSkin)
                newSkin.visible = true;
    
            currentSkin = newSkin;
            
            // Update the state of the skin if it accepts states and it implements the IStateClient interface.
    		if (defaultSkinUsesStates && currentSkin is IStateClient)
    		{
    			IStateClient(currentSkin).currentState = stateName;
    		}
        }
    

    MenuBarItem의 menuBarItemState에 상태변화 값을 넣어주면 MenuBarItem의 viewSkin() 메소드에서 각 상태값에 따라서 스킨을 만들어준다. viewSkin 메소드에서 newSkin = IFlexDisplayObject(new newSkinClass()); 은 새로운 스킨을 만드는 부분이 newSkinClass가 바로 ActivatorSkin 클래스가 된다. 그리고 newSkin = IFlexDisplayObject(getChildByName(state));  부분은 이전에 만든 스킨이 있는지 확인하는 부분이다. viewSkin() 메소드는 그래픽적 스킨, 프로그램적 스킨등에 모두 대응되며 게으른(lazy) 스킨 생성을 한다. 여기서 게으른 생성이라는 것은 가령, 애플리케이션이 실행 당시에 마우스 Over스킨을 생성하는 것이 아니라 마우스Over시에 스킨은 바로 그때 생성해준다는 것이다. viewSkin() 메소드가 결국 ActivatorSkin 클래스로 하여금 스킨을 만들어주는 것이다.

    ActivatorSkin 클래스의 일부분을 보자.

    	private static function calcDerivedStyles(themeColor:uint,  fillColor0:uint, fillColor1:uint):Object
    	{
    		var key:String = HaloColors.getCacheKey(themeColor,fillColor0, fillColor1);
    				
    		if (!cache[key])
    		{
    			var o:Object = cache[key] = {};
    			
    			// Cross-component styles.
    			HaloColors.addHaloColors(o, themeColor, fillColor0, fillColor1);
    		}
    		
    		return cache[key];
    	}
    
    	/**
    	 *  @private
    	 */
    	override protected function updateDisplayList(w:Number, h:Number):void
    	{
    		super.updateDisplayList(w, h);
    
    		if (!getStyle("translucent"))
    			drawHaloRect(w, h);
    		else
    			drawTranslucentHaloRect(w, h);
    	}
    
    	/**
    	 *  @private
    	 */
    	private function drawHaloRect(w:Number, h:Number):void
    	{
    		var fillAlphas:Array = getStyle("fillAlphas");
    		var fillColors:Array = getStyle("fillColors");
    		var highlightAlphas:Array = getStyle("highlightAlphas");				
    		var themeColor:uint = getStyle("themeColor");
    
    		var themeColorDrk1:Number =
    			ColorUtil.adjustBrightness2(themeColor, -25);
    
    		// Derivative styles.
    		var derStyles:Object = calcDerivedStyles(themeColor, fillColors[0], fillColors[1]);
    												 
    		graphics.clear();
    
    		switch (name)
    		{
    			case "itemUpSkin": // up/disabled
    			{
    				// invisible hit area
    				drawRoundRect(
    					x, y, w, h, 0,
    					0xFFFFFF, 0);
    				break;
    			}
    
    			case "itemDownSkin":
    			{
    				// face
    				drawRoundRect(
    					x + 1, y + 1, w - 2, h - 2, 0,
    					[ derStyles.fillColorPress1, derStyles.fillColorPress2], 1,
    					verticalGradientMatrix(0, 0, w, h )); 
    									
    				// highlight
    				drawRoundRect(
    					x + 1, y + 1, w - 2, h - 2 / 2, 0,
    					[ 0xFFFFFF, 0xFFFFFF ], highlightAlphas,
    					verticalGradientMatrix(0, 0, w - 2, h - 2));
    
    				break;
    			}
    
    			case "itemOverSkin":
    			{
    				var overFillColors:Array;
    				if (fillColors.length > 2)
    					overFillColors = [ fillColors[2], fillColors[3] ];
    				else
    					overFillColors = [ fillColors[0], fillColors[1] ];
    
    				var overFillAlphas:Array;
    				if (fillAlphas.length > 2)
    					overFillAlphas = [ fillAlphas[2], fillAlphas[3] ];
      				else
    					overFillAlphas = [ fillAlphas[0], fillAlphas[1] ];
    
    				// face
    				drawRoundRect(
    					x + 1, y + 1, w - 2, h - 2, 0,
    					overFillColors, overFillAlphas,
    					verticalGradientMatrix(0, 0, w, h )); 
    
    				// highlight
    				drawRoundRect(
    					x + 1, y + 1, w - 2, h - 2 / 2, 0,
    					[ 0xFFFFFF, 0xFFFFFF ], highlightAlphas,
    					verticalGradientMatrix(0, 0, w - 2, h - 2));
    				
    				break;
    			}
    		}
    
    		filters = [ new BlurFilter(2, 0) ];
    	}
    


    그림을 그릴때 drawHaloRect() 메소드를 호출해서 각 상태값에 따라서 그림을 그려준다. 우리가 처음 themeColor를 지정했음에도 불구하고 다른 색으로 보였던 부분을 알기 위해서는 drawHaloRect()에 switch분기점에서 "itemDownSkin"을 보면 된다. derStyles.fillColorPress1, derStyles.fillColorPress2 색을 사용하는 것을 볼 수 있으며 코드에서 derStyles는 calcDerivedStyles(themeColor, fillColors[0], fillColors[1]);에 의해 만들어진다. calcDerivedStyles() 메소드를 보면 결국 HaloColors.addHaloColors(o, themeColor, fillColor0, fillColor1); 으로 색이 결정됨을 볼 수있다. 여기서 HaloColors 클래스내에서 addHaloColors() 정적 메소드를 보면 다음과 같다.

    public static function addHaloColors(colors:Object,  themeColor:uint,  fillColor0:uint, fillColor1:uint):void
    {
    	var key:String = getCacheKey(themeColor, fillColor0, fillColor1); 
    	var o:Object = cache[key];
    	
    	if (!o)
    	{
    		o = cache[key] = {};
    		
    		// Cross-component styles
    		o.themeColLgt = ColorUtil.adjustBrightness(themeColor, 100);
    		o.themeColDrk1 = ColorUtil.adjustBrightness(themeColor, -75);
    		o.themeColDrk2 = ColorUtil.adjustBrightness(themeColor, -25);
    		o.fillColorBright1 = ColorUtil.adjustBrightness2(fillColor0, 15);
    		o.fillColorBright2 = ColorUtil.adjustBrightness2(fillColor1, 15);
    		o.fillColorPress1 = ColorUtil.adjustBrightness2(themeColor, 85);
    		o.fillColorPress2 = ColorUtil.adjustBrightness2(themeColor, 60);
    		o.bevelHighlight1 = ColorUtil.adjustBrightness2(fillColor0, 40);
    		o.bevelHighlight2 = ColorUtil.adjustBrightness2(fillColor1, 40);
    	}
    	
    	colors.themeColLgt = o.themeColLgt;
    	colors.themeColDrk1 = o.themeColDrk1;
    	colors.themeColDrk2 = o.themeColDrk2;
    	colors.fillColorBright1 = o.fillColorBright1;
    	colors.fillColorBright2 = o.fillColorBright2;
    	colors.fillColorPress1 = o.fillColorPress1;
    	colors.fillColorPress2 = o.fillColorPress2;
    	colors.bevelHighlight1 = o.bevelHighlight1;
    	colors.bevelHighlight2 = o.bevelHighlight2;
    }
    

    위에서 우리가 주목할 점은 o.fillColorPress1와 o.fillColorPress2를 설정할 때 ColorUtil.adjustBrightness2(themeColor, 85);와 같은 방법으로 새로 색을 설정하는 부분이다.

    결국 무엇인가? 지금까지 MenuBar, MenuBarItem, ActivatorSkin 클래스를 쭉 따라가며 themaColor 스타일값이 원하는대로 보여지지 않은 것은 바로 HaloColors 클래스의 addHaloColors() 부분에서 찾을 수 있는 것이다.


    해결하기

    위처럼 themeColor가 원하는대로 적용되지 않은 것 처럼 보인 이유를 분명히 알았다. Flex 3.4가 매우 잘 만들어졌다고 할지라도 이것도 결국 사람이 만든거라 완벽히 원하는대로 기능을 쓸 수 없는 경우가 생긴다. 그러면서 발생하는 문제를 해결하기 위해 단지 피상적으로 문서만 의지해서 해결하려고 하면 절대 답을 못찾을 수 있다. 표면상 문제를 해결할 수 없다면 문제의 부분을 찾기위해 SDK 소스를 위와 같이 찾아보는 스킬을 길러야 한다.
     
    어떤 문제인지 파악했으니 이제 해결해보자. 일단 기본적으로 CSS로 themeColor 와 같은 설정값으로 해결못하는 것을 알았으니 MenuBarItem에 새로운 ActivatorSkin 와 비슷한 MyActivatorSkin 을 만들고 더불어 HaloColors도 동일하게 MyHaloColors를 만들자. 이들은 기존 ActivatorSkin.as와 HaloColors.as 소스를 복사해서 만들면 된다. 물론 package부분 설정 및 include부분 설정으로 인한 에러는 제거해주자.

    MyHaloColors 클래스내에 o.fillColorPress1, o.fillColorPress2에서 ColorUtil.adjustBrightness2(themeColor, 85); 처럼 된 것을 ColorUtil.adjustBrightness2(themeColor, 0);으로 바꾸자.

    그런 다음 메인소스에 CSS에서 MenuBar 셀렉터에 itemSkin을 다음처럼 추가한다.

    MenuBar { 
    	font-weight:bold; 
    	color:#FFFFFF;
    	fill-colors:#0D0A92, #1B16F4, #37920A, #59EB12;
    	fill-alphas:1.0,1.0;
    	itemSkin: ClassReference("skins.MyActivatorSkin");
    }
    


    문제가 해결되었다.


    결론
    나는 개인적으로 Flex 프레임워크가 완벽하다고 보지 않는다. 그래도 전체적으로 잘 구조가 잘 잡혀있는 만큼 구조를 이해하고 잘 따라가보면 표면상으로만 해결하지 못한 부분을 해결할 수 있다. 너무 책과 문서에만 의존하지 말고 개발자라면 Flex 소스도 조금씩 분석해보길 바란다.

    참고로 몇가지 덧붙여 말하면...
    사실 본인은 Flex 3를 손놓은지 꽤 되었다. Flex 4도 지금 입문단계정도이다. 기본적으로 실무에서 Flex 프레임워크로 개발한다기 보다 애플리케이션의 퍼포먼스나 개발적 스타일의 문제로 ActionScript 3.0기반으로 개발한다. Flex 는 너무 유연하게 만들려고 노력해서 그런지 전체적으로 무겁다는 것을 지울 수 없어 간단히 또 빠르고 사용자에게 불편함이 없는 그런 개발이 필요할때는 Flex를 이용하지만 속도,메모리가 중요한 개발은 무조건 ActionScript 3.0으로 개발한다.

    Flex는 ActionScript 3.0으로 만들어진 프레임워크 일종이며 mxml이라는 것은 이 Flex 프레임워크를 손쉽게 쓰기 위해 도입된 xml이다. 이를 파싱해서 ActionScript 3.0으로 해석해 다시 swf로 만드는 컴파일러가 compc, mxmlc인 것이다. Flex에 대해서 이러한 점을 알고 공부하고 개발하신다면 여러가지로 도움이 될 것이다. 


    참고글

    [Flex] 자식 컴포넌트에 CSS를 적용시키는 통상적인 방법 소개
    [Flex] 스킨(Skin)을 이용하여 확장가능한 게이지 컴포넌트 제작


    글쓴이 : 지돌스타(http://blog.jidolstar.com/627)
    찬익님의 블로그(http://blog.chanik.com/25)로 부터 매우 재미있는 내용을 봤다. 바로 커스텀 메타데이터 태그(custom metadata tag)에 대한 내용인데 커스텀 컴포넌트, 커스텀 이벤트등의 용어는 들어봤어도 커스텀 메타데이터 태그는 생소하다. 말그대로 Flex에서 사용하는 메타데이터 태그인 [Event], [Bindable] 이런 것 들은 사실 예전부터 mxmlc로 컴파일될 때에 ActionScript 3.0으로 변환된다는 것은 알고 있었지만 메타데이터 태그가 이렇게 사용되는지에 대한 내막은 전혀 알지 못했던 것이 사실이다. 아무튼 너무 좋은 정보라 공유하고자 한다.

    사실 Flex 2시절부터 커스텀 메타데이타에 대한 이야기가 있었다고 한다. 하지만 Flex 3서부터 컴파일 옵션에 "-keep-as3-metadata MyTag"와 같은 형태로 사용할 수 있게 되었다. 이는 다음과 같이 ActionScript 3.0 코드에서 사용할 수 있게 된다.
    [Listen(obj="this.closeButton", event="click")]
    public function closeClickHandler(event:MouseEvent) {...}
    

    메타데이타 태그는 위처럼 메소드 뿐 아니라 변수 및 클래스에도 사용할 수 있다.


    커스텀 메타데이타를 사용하는 방법

    커스텀 메타데이타를 사용하는 방법은 3단계로 이뤄진다.

    1. 컴파일러 구성
    Flex 프로젝트 컴파일 옵션으로 "-keep-as3-metadata+=Meta1, Meta2" 를 삽입한다. 만약 라이브러리 프로젝트에서 한다면 거기에 이 옵션을 사용하면 이 라이브러리 프로젝트를 참조하는 다른 프로젝트에 따로 줄필요는 없다.

    2. metadata를 작성

    package
    {
        [Meta2(param1 = "param 1 value")]
        public class TestClass
        {
    
            [Meta1(param1 = "param 1 value", param2 = "param 2 value")]
            public var test1:String;
            
            
            [Meta2(paramA = "param 1 value", paramB = "param 2 value")]
            public function get test2():String
            {
                return null;
            }
            
            public function set test2(val:String):void
            {
            }
    
            [Meta1(param1 = "param 1 value")]
            public function someMethod():void
            {
            };
    
        }
    }
    

    3. 런타임(runtime)시에 작성한 메타데이타를 사용
    describeType(TestClass)를 이용한다. 위처럼 클래스와 메소드에 메타데이타를 작성했다면 다음과 같이 E4X형태의 XML로 접근할 수 있다.

    <type name="TestClass" base="Class" isDynamic="true" isFinal="true" isStatic="true">
      <extendsClass type="Class"/>
      <extendsClass type="Object"/>
      <accessor name="prototype" access="readonly" type="*" declaredBy="Class"/>
      <factory type="TestClass">
    
        <metadata name="Meta2">
          <arg key="param1" value="param 1 value"/>
        </metadata>
    
        <extendsClass type="Object"/>
    
        <method name="someMethod" declaredBy="TestClass" returnType="void">
          <metadata name="Meta1">
            <arg key="param1" value="param 1 value"/>
          </metadata>
        </method>
    
        <variable name="test1" type="String">
          <metadata name="Meta1">
            <arg key="param1" value="param 1 value"/>
            <arg key="param2" value="param 2 value"/>
          </metadata>
        </variable>
    
        <accessor name="test2" access="readwrite" type="String" declaredBy="TestClass">
          <metadata name="Meta2">
            <arg key="paramA" value="param 1 value"/>
            <arg key="paramB" value="param 2 value"/>
          </metadata>
        </accessor>
    
      </factory>
    </type>
    

    만약 Class의 [Meta2]의 param1에 접근한다면 다음과 같처럼 하면 된다.
    var testClass:TestClass = new TestClass();
    var xml:XML = describeType(testClass);
    trace(xml.metadata.(@name==Meta2).arg.(@key==param1).@value);
    

    위에 대한 결과는 'param 1 value'이 된다.


    어떻게 활용할 수 있을까?
    이것을 어떻게 활용할지에 대해서는 찬익님의 언급처럼 FlexUnit 4에서 지원하는 [Test] [BeforeClass]등과 같은 좋은 예시가 있다. 그 외에 것도 예제가 있는지 확인해봤다. 그 결과 재미있는 글을 발견했다.

    Annotating ActionScript Classes with Custom Metadata + Simple ORM Framework for AIR

    이 글에서 말하고 있는 요지는 커스텀 메타데이타를 이용해서 Value Object로 작성한 클래스에 이로 만들어진 객체가 데이타베이스의 어떤 테이블과 어떤 필드에 들어가는지 결정해줄 수 있다는 것이다.


    package
    {
    	[Bindable]
    	[Table(name="contact")]
    	public class Contact
    	{
    		[Id]
    		[Column(name="contact_id")]
    		public var contactId:int;
    
    		[Column(name="first_name")]
    		public var firstName:String;
    
    		[Column(name="last_name")]
    		public var lastName:String;
    		public var address:String;
    		public var city:String;
    		public var state:String;
    		public var zip:String;
    		public var phone:String;
    		public var email:String;
    	}
    }
    
    

    위처럼 작성된 클래스는 contactId 값은 contact 테이블의 contact_id 필드와 매치가 되도록 만든다는 것이다. [Id]메타데이타는 Primay Key와 같은 존재이다. 결국 이것을 해석해서 DB와 연동하는 AIR기반의 EntityManager를 만들어 위 클래스의 객체를 다음과 같이 사용하면 DB연동까지 된다.


    var contact:Contact = new Contact();
    contact.firstName = "Christophe";
    contact.lastName = "Coenraets";
    contact.email = "ccoenrae@adob.com";
    entityManager.save(contact);
    


    이를 수정하려면 다음처럼 쓴다.
    contact.firstName = "Chris";
    entityManager.save(contact);
    


    삭제하려면 다음처럼 쓴다.
    entityManager.remove(contact);
    

    너무 기발하다. 만약 Metadata를 사용하지 않았다면 Value Object와 DB 테이블의 필드명을 맞추기 위해 좀 노가다를 해야할지 모른다. 그런데 Metadata를 이용함으로써 프레임워크 단위로 말끔하게 이 문제를 해결해준다. 

    이에 대한 소스와 테스트 자료는 [여기]에서 다운로드 받는다.
    혹시 링크가 깨졌다면 다음 링크에서 받길 바란다. 
     
    이렇게 활용할 수 있다는 것이 감동이다. 
     

    정리하며
    찬익(http://blog.chanik.com)님 덕분에 아침부터 재미있는 정보를 얻을 수 있었다. 좋은 정보를 공유해주신 찬익님께 감사하며 커스텀 메타데이타에 대한 활용을 담은 글들이 많이 나왔으면 한다.


    참고글
    Custom metadata in three simple steps.
    Annotating ActionScript Classes with Custom Metadata + Simple ORM Framework for AIR
    찬익님의 커스텀 메타데이터 태그


    위 모든 예제는 Flash Builder 4 및 Flex Builder 3에서 테스트 해볼 수 있습니다.


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

    안녕하세요. 1개월간 http://flexdocs.kr개인적인 이유로 운영하지 못하다가 좋은 무료웹호스팅을 통해 다시 정상적으로 열었습니다. 무료 웹호스팅 계정은 http://000webhost.com으로 외국 서비스이고 몇몇 한국분들이 잘 사용하신다고 들어서 부랴부랴 다시 복구하게 되었습니다. 약간 단점이 있다면 외국 서비스인 만큼 밤시간대에 느릴 수 있다는 겁니다.

    단, 기존에 SVN으로 Flex 2문서를 수정하는 작업이 진행되었는데 이제 그 시스템을 사용할 수 없게 되었습니다. 사실 이제 더이상 필요성을 못느끼고 있는터라 이제 안정적으로 서비스를 운영하는데만 초점을 맞출 예정입니다. 호스팅서비스 회사에서 강제로 계정을 지우거나 망하지 않는 이상 flexdocs.kr은 살아있을 겁니다.

    이제 flexdocs로 공개적인 모임이나 문서 업데이트는 하지 않을 것이며 Flex한글문서에 목마름을 조금이나마 달래주는 그런 사이트로서의 명맥을 유지할 것이라 생각합니다.

    Flex 4도 나온 마당에 버젓한 Flex 4 한글문서가 나오길 간절히 바라는 마음입니다.

    관심가져주신 분들께 깊은 감사드립니다.

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


    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

      

    일본에 Spark 프로젝트가 있다. 이 프로젝트는 ActionScript Class Library를 오픈소스로 만들고 공유하는 것을 하나의 모토로 삼고 있는데 그 유명한 증강현실(FLARToolKit)을 Flash로 구현한 것도 이 프로젝트에서 진행된 것이다. 이외에도 너무 멋진 라이브러리가 이 프로젝트를 통해 만들어졌고 여기서 만들어진 몇몇 라이브러리를 실무에 적용하고 있다.

     
    Flex 4에는 Spark로 구성된 새로운 컴포넌트들이 존재한다. 그런데 이 Spark가 바로 일본의 Spark 프로젝트의 이름에서 온것임이 확신된다. 즉, Flex 4의 Spark 컴포넌트는 많은 부분에서 일본이 관여했다는 것을 의미한다. 실제로 2009 Adobe MAX에서 Spark 패키지 설계에 나이 20정도 되는 젊은 일본 개발자와 관계가 있다는 것을 확인했다.

    Spark 프로젝트로 일본은 Adobe의 큰 관심을 받게 되었고, 일본 RIA시장에 있어서 없어선 안될 정도로 크게 성장해 있는 상태이다. 아마 일본 RIA 분야에 있어서 자부심을 생기게 하는 훌륭한 프로젝트 팀이라고 생각한다.

    이에 반해 한국은 이 정도로 활발히 진행되는 오픈 프로젝트가 전무하다. 이는 빨리빨리 주위의 한국의 개발 환경덕택에 개발자들이 다른 활동할 수 있는 여지가 없는 것이 가장 큰 문제겠고, 오픈 지향이 미덕으로 방향을 잡고 있는 마당에도 유독 소프트웨어는 폐쇄적인 것도 문제라고 생각한다. 또한 개발자들은 무슨 문서 작성하는 사람처럼 취급해 버리는 무지한 관리자들이 있는한 한국에서 일본과 같은 개방적이고 활발한 개발 커뮤니티나 오픈 소스, 오픈 프로젝트는 어려울 것이다. 당장 문제를 해결하고 이익만 추구하는 한국의 IT시장이 지속된다면 소프트웨어 개발자는 그저 노동만 하고 그에 대한 돈만 벌어가는 존재로 전락할 수 밖에 없다. 창의적인 개발자는 사라지고 그저 일만 받고 처리하는 수동적인 개발자만 늘어나게 될 것이고 결국 한 나라의 IT시장의 발전에 큰 저해요소로 작용할 것이 분명하다.

    한국에도 일본 Spark 프로젝트와 같은 활발하고 멋진 팀이 자발적으로 시행될 수 있는 국가적, 기업적 지원이 적극적으로 이뤄지길 희망한다.

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


    프로그램상에 폰트를 포함할 때 다음과 같은 문장을 사용할 것이다.

    [Embed(source='C:/WINDOWS/Fonts/ARIAL.TTF', fontName = "MyFont", mimeType = "application/x-font-truetype")]
    private var font:Class;
    

    그런데 Flash Builder 4에서 작업할 때부터 위처럼 Embed한 폰트가 적용이 되지 않았다. 사용한 True Type 폰트는 언제나 테스트할때 문제없이 동작한 것이기 때문에 왜 안되는지 의문이 들었다. Flash Builder 4의 컴파일러인 mxmlc가 버그가 있거나 다른 설정이 추가되었나 싶었지만 그렇지 않았다. 그래서 열심히 구글링해봤더니 폰트를 Embed 처리할때 embedAsCFF 속성이 추가되었다는 것을 발견하고 아래처럼 테스트 코드를 작성해봤다.

    package {
    	import flash.display.Sprite;
    	import flash.text.TextField;
    	import flash.text.TextFormat;
    	import flash.text.TextFieldAutoSize;
    	import flash.text.AntiAliasType;
    	[SWF(width = "500", height = "240", backgroundColor = "#FFFFFF", framerate = "24")]
    	public class FontTest extends Sprite {
    		[Embed(source='C:/WINDOWS/Fonts/ARIAL.TTF', embedAsCFF="false", fontName = "MyFont", mimeType = "application/x-font-truetype")]
    		private var font:Class;
    		public function FontTest() {
    			var format:TextFormat = new TextFormat();
    			format.font = "MyFont";
    			format.size = 30;
    			format.color = 0x000000;
    			var label:TextField = new TextField();
    			label.embedFonts = true;
    			label.autoSize = TextFieldAutoSize.LEFT;
    			label.antiAliasType = AntiAliasType.ADVANCED;
    			label.defaultTextFormat = format;
    			label.text = "blog.jidolstar.com";
    			addChild(label);
    			label.rotation = 5;
    		}
    	}
    }
    


    여기서 embedAsCFF 속성은 도데체 뭔가? 이 전에 CFF(Compact Font Format)가 뭔지 알아야만 했다.

    폰트형태는 여러가지 종류가 있다. OTF(Open Type Font)와 TTF(True Type Font)등이 있다. OpenType은 MS와 Adobe가 TrueType의 후속작으로 Cross Platform을 지원하도록 만들 파일 포멧이라고 한다. 이 OpenType에는 Glyph Outline형식에 대한 정의는 없고 TrueType, CFF, Adobe Type 1(PostScript)를 사용한다고 한다. 이 말은 OTF중에는 TrueType으로 글자모양을 정의한 폰트도 있고 CFF 또는 PostScript Font로 정의한 폰트도 있음을 의미한다.
     
    OpenType과 TrueType에 대한 더욱 자세한 내용은 아래 링크를 참고하자.
    http://en.wikipedia.org/wiki/OpenType
    http://en.wikipedia.org/wiki/TrueType

    CFF는 OpenType의 하나로서 다음 링크에 더 세세하게 설명하고 있다.
    http://en.wikipedia.org/wiki/Compact_Font_Format#Compact_Font_Format

    CFF에 대한 스펙은 다음 파일을 참고한다.


    Flash Player 10과 Adobe AIR 1.5이상부터 TTF뿐 아니라 CFF도 지원하게 되었다. 이는 PDF와 직접적인 관계가 있는 것 같다.  그래서 폰트를 포함할때 TTF인지 CFF인지 명시할 필요에 의해 생긴 것이 embededAsCFF인듯하다. 만약 TTF를 사용한다면 위 예제처럼 embededAsCFF를 false로 지정해야한다.

    필자도 Font Type에 대한 지식은 거의 없어서 난감했다. CFF를 포함하면 글꼴 렌더링시에 텍스트를 보다 쉽게 읽을 수 있으며 작은 크기에서 글꼴의 표시 품질이 향상된다고 Adobe ActionScript 3.0 가이드 문서에는 나와 있을뿐 정확히 TTF와 CFF에 대한 명확한 해석을 찾지는 못했다.

    Adobe ActionScript 3.0 가이드 : 글꼴을 이용한 작업


    갑자기 대두된 Font 포함문제 때문에 매우 당혹스러웠지만 그나마 해결방법이라도 찾아 다행이다. 이에 대해 정확히 기술된 한글문서를 아직 찾지 못했다. 더욱 다양한 글들이 많이 올라왔으면 한다.

    이 실험은 Flash Builder 4 Beta 2에서 테스트 했으며 아래 링크로부터 Flash Builder 4를 다운받을 수 있다.
    http://www.adoberia.co.kr/pds/down.html?src=text&kw=000026



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

     

    실무에 바로 쓸 수 있는있는 유용한 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)

     

     

    + Recent posts