지돌스타 - 쿠키랩 블로그

Flex 4에 대해서 자료를 모으고 공부하는 중에 매우 괜찮은 블로그를 찾았다.

http://www.hulstkamp.com/

이 사람 블로그에 가면 Flex 4기반 커스텀 컴포넌트를 만든 예제들이 정말 많다. 한동안 이 사람 블로그와 친해져야 겠다는 생각이 들었다. ㅎㅎ

올라온 자료중에 Gumbo(4.0.0.4932) 버전으로 만든 Knob Button 예제가 있었는데 Flex 4 SDK Beta버전이 정식으로 나오기 전이라 바로 실행할 수 없었다. 그래서 소스를 보면서 마이그레이션 작업을 해보았다. 아래 실행 예제는 바로 이 작업의 결과물이다.



마이그레이션 하면서 Spark 기반 커스텀 컴포넌트를 제작하는 법에 더욱 익숙해질 수 있었다.

Flex 3의 Halo 기반 컴포넌트는 스킨이 그래픽 기반만 지원했는데 Flex 4의 Spark기반 컴포넌트들은 스킨이 그래픽적 요소 뿐 아니라, 상태변화(state), 다른 컴포넌트 배치, 데이타 표현등이 된다. 또한 FXG를 지원하고 MXML형태로 스킨을 만들 수 있기 때문에 그 확장력이 무궁무진하게 되었다. Halo 컴포넌트의 경우에는 상태변화 바꾸거나 내부 컴포넌트 배치만 달라져도 컴포넌트 자체를 확장해서 다시 만들어야 하는 불편함이 있었지만 Spark컴포넌트는 큰 변경없이 커스텀 스킨만 제작하는 것만으로도 충분히 해결할 수 있게 되었다. 이 내용은 여기에 올려놓은 소스 또는 "Spark DropDownList 사용하기"를 보면 알 수 있을 것이다.

Spark 컨테이너의 경우에는 Layout까지 동적으로 변경할 수 있도록 만들어져서 언제든지 다른 Layout으로 바꿀 수 있고 또는 커스텀 Layout를 만들어 쓸 수도 있다. 반면 Halo 기반 컨테이너는 컨테이너의 Layout을 바꾸기 위해 기존 컨테이너를 다시 확장하거나 새로 만들어야만 했다. 이 내용에 대해서는 "Spark 컨테이너의 Layout, Scrolling, Viewport 소개"를 읽어보길 바란다.

CSS는 정말 획기적으로 많이 추가 되었다. 기존 Class, Type Selector밖에 없었는데 Flex 4로 넘어오면서 ID, Descendant, Pseudo, Mutiple Class등 다양한 Selector가 추가되었다. 이에 대한 글은 "Flex 4의 CSS"를 참고하길 바란다.

아래는 위 프로그램의 소스이다. 참고바란다.


개발 환경은 Flash Builder 4 Beta 1 이다. Flash Builder는 아래 링크에서 다운 받을 수 있다.

예전부터 Flex4 프로젝트의 일환인 Gumbo를 다운로드를 받았지만 쓸 기회가 없어서 안쓰다가 Flash Player 10에서 3D 회전 예제가 있어서 한번 해봤다.

Flex Builder 3에서 작업을 하기 위해 수행해야할 일은 다음과 같다.

1. Gumbo 최신버전을 다운받는다. [다운로드 받으러가기]

2. 다운로드 받는 Flex 4 SDK를 Flex Builder 설치폴더안에 sdks 폴더에 압축하여 풀어준다.

3. Flex Builder 3를 실행해서 메뉴에 Windows->Preperences...에 들어가면 창이 뜬다. 창 왼쪽에 Flex->Installed Flex SDKs를 선택한 다음 아까 압축을 푼 SDK폴더를 등록한다.

4. File->New->ActionScript Project를 선택하면 창이 뜬다. 창 아래부분에 Use a specific SDK를 선택한다음 Flex 4를 선택하고 프로젝트 명을 CubeRotationExample로 프로젝트를 만든다.

5. 아래 소스를 복사해서 메인 소스에 덮어쓴다.

 

package{
	import flash.display.*;
	import flash.events.*;
	import flash.geom.*;
 
	public class CubeRotationExample extends Sprite {
		
		private static const EDGE	:Number = 40;		//edge length
		private var mtxWorld		:Matrix3D;			//world transform matrix
		private var vCube			:Vector.<Number>;	//cube points
		private var vFlatCube		:Vector.<Number>;	//projected cube points
		private var vUVT			:Vector.<Number>;	//uvt data
		private var vIndicies		:Vector.<int>;		//triangle indicies
		private var sprCube			:Sprite;			//canvas object
		
		public function CubeRotationExample(){
			// setup and initialize
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.quality = StageQuality.BEST;			
			
			mtxWorld = new Matrix3D();
			vCube = Vector.<Number>([	EDGE,EDGE,-EDGE,
				 						EDGE,-EDGE,-EDGE, 
										-EDGE,-EDGE,-EDGE,
										-EDGE,EDGE,-EDGE, 
										EDGE,EDGE,EDGE,
										EDGE,-EDGE,EDGE,
										-EDGE,-EDGE,EDGE,
										-EDGE,EDGE,EDGE
										]);
			vFlatCube = new Vector.<Number>(16);
			vUVT = new Vector.<Number>(24);
			vIndicies = Vector.<int>([0,1,2, 2,3,0, 4,7,6, 6,5,4, 0,4,5, 5,1,0, 1,5,6, 6,2,1, 2,6,7, 7,3,2, 4,0,3, 3,7,4]);
			
			sprCube = new Sprite();
			addChild(sprCube);

			addEventListener(Event.ENTER_FRAME, onEnterFrame);
		}
		
		private function onEnterFrame(eo:Event):void {
			// center the cube
			sprCube.x = stage.stageWidth/2;
			sprCube.y = stage.stageHeight/2;
			
			// rotate the transform matrix
			mtxWorld.appendRotation(2, new Vector3D(0,1,0));
			mtxWorld.appendRotation(2, new Vector3D(0,0,1));
			mtxWorld.appendRotation(2, new Vector3D(1,0,0));
			
			// project 3D data to 2D plane
			Utils3D.projectVectors(mtxWorld, vCube, vFlatCube, vUVT);
			
			// draw the cube using cube data
			sprCube.graphics.clear();
			sprCube.graphics.beginFill(0xFF00FF);
			sprCube.graphics.lineStyle(1,0xFF0000,1);
			sprCube.graphics.drawTriangles(vFlatCube, vIndicies, null, TriangleCulling.POSITIVE);
			sprCube.graphics.endFill();
		}
	} 
}

 

6. 저장하면 에러가 날거다. Flash Player 10에서 작동하므로 그에 따른 설정을 해주어야 한다. 메뉴에서 Project->Properties 로 들어가면 창이 뜬다. 왼쪽메뉴에 ActionScript Compiler를 선택하고 오른쪽 아래 Require Flash Player version을 10.0.0으로 맞춰준다.

7. 실행한다.(단 Flash Player 10이 설치되어 있어야 한다.)

다시한번 언급하지만 Flash Player 10 환경에서만 된다.

위의 소스를 보면 예전 ActionScript 3.0에서 볼 수 없었던 것들이 보인다.
Vector, Matrix3D, Util3D등이다. Papervision3D와 같은 것을 쓰지않아도 쉽게 네이티브 코드로 3D를 구현할 수 있게 한 Flash Player 10. 아직 다양한 표현을 위한 많은 API를 가지고 있지 않지만 더욱 발전될 가능성이 크다고 생각한다. 기대해보겠다.

[소스출처]
http://dispatchevent.org/calebjohnston/flash-player-10-3d-example/

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