Mr. Drumcap.com

맥유저가 Eclipse 3.6 Helios 에 Flash Builder Plugin 설치하는 방법

드럼캡 — Thu, 18 Nov 2010 00:29:57 +0900

맥 OSX용 이클립스가 3.6 Helios로 업그레이드 되면서 Eclipse 사이트 다운로드 분류에 Carbon이 사라졌다. 현재 Flash Builder4는 카본으로 제작되었기 때문에 Eclipse에 플러그인으로 작업하던 사람들은 카본으로 제작된 이클립스 플랫폼을 사용해야 한다. 따라서 이제 Flash Builder4는 새로 출시되는 이클립스 버전에 맞춰 업그레이드가 불편하게 됐다. 하지만 시도해봐서 안될 것은 없듯이, 그 방법이 전혀 없진 않다. 다만 불편할 뿐..

(며칠전 Preview로 출시된 Flash Builder Buritto 는 코코아로 제작되어 있는 것을 확인했으므로 향후 Buritto가 출시되면 이 글은 쓰레기통으로 직행하게 될 예정이다. 몆달만에 글을 쓰면서 쓰레기통에 넣을 생각을.. ^^)

방법은 eclipse에 carbon이 남아있는 유일한 곳은 오직 이클립스 플랫폼 뿐이다. 이 것은 그냥 에디터와 도움말, 그리고 이클립스의 UI 껍데기 등등 밖에 없다. 따라서 자바, CVS, SVN, xml편집, php 편집, 등등의 기능은 플러그인을 설치해서 직접 구성해야 한다.

우선 기존 Flash빌더 플러그인이 설치되어 있다고 가정한다. 만약 없으면 플러그인 버전으로 기존 eclipse에 타겟으로 설치할 것

1. Eclipse.org 접속

2. Download 링크를 클릭

3. Eclipse Classic 에서 Other Download를 선택하거나 아래의 url로 바로이동.

http://download.eclipse.org/eclipse/downloads/

4. Lastest Release -> 3.6 클릭

5. 중간쯤 Platform Runtime Binary 에서 Mac OSX (Mac/Carbon) -> http (다운로드)클릭

6. 압축해제후 dropins 폴더에 기존 이클립스의 dropins 폴더에 있는 파일(com.adobe.flexbuilder.feature.core.nl1.link)을 복사하여 붙어넣기

7. 실행하여 플렉스 빌더 실행해 봐서 설치완료 되었나 확인

8. 기타 필요한 플러그인들 추가설치 (Subversive, JDT, JEE 등등)

기타 참고로 개인적으로 반드시 설치하는 Eclipse에서 제공하는 플러그인들이다. 설치 방법은..

1. Help -> Install New Software

2. Install 창이 열린다

3. Work With 옆에 콤보박스중 Helios 를 선택하고 기다린다.

4. 그러면 하단에 설치 가능한 목록이 표시되는데 아래의 내용들을 찾아 선택해주고 설치해준다.

추천 플러그인 ( 협업 - cvs,git,mylyn,subversive)

Collaboration

Eclipse CVS Client
Eclipse EGit (Incubation)
Eclipse JGit (Incubation)
Mylyn Bridge: Eclipse IDE
Mylyn Bridge: Java Development
Mylyn Bridge: Team Support
Mylyn Connector: Bugzilla
Mylyn Connector: Trac
Mylyn Task List (Required)
Mylyn Task-Focused Interface (Recommended)
Subversive Revision Graph (Optional) (Incubation)
Subversive SVN Integration for the Mylyn Project (Optional) (Incubation)
Subversive SVN Team Provider (Incubation)

추천 플러그인 ( 언어 - jdt, xet, javascript)

Programming Language

Eclipse Java Development Tools
Eclipse XML Editors and Tools
JavaScript Development Tools

추천 플러그인 ( 웹, JavaEE - JavaEE 쪽 설치하려한다면 반드시 아래의 목록 모두 설치)

Web,XML and Java EE Development

Eclipse Faceted Project Framework
Eclipse Faceted Project Framework JDT Enablement
Eclipse Java EE Developer Tools
Eclipse Web Developer Tools
Eclipse XML Editors and Tools
JavaScript Development Tools
JavaServer Faces Tools (JSF) Project
JST Server Adapters
JST Server UI
JST Web UI
Web Page Editor (Optional)
WST Server Adapters

SVN 에서 Git으로 저장소 가져오기

드럼캡 — Tue, 27 Jul 2010 20:06:38 +0900

요즘 SVN -> Git으로 소스 버전컨트롤 이전중입니다.

예전에 SVN의 History가 아쉬워서 이전 작업을 못했었는데, git-svn이라는 툴을 별도로 제공하고 있었네요.

우분투 기준으로 설명드리면 아래와 같이 설치하면 끝!!

sudo apt-get install git-svn

이런 멋진 기능을 제공하는 Git이 참 고마울 따름입니다. ㅠ

일반적인 구조의 SVN Repository 전체 가져오기 (trunk,branches,tags 폴더로 구성되어있는 경우)

(앞의 prefix는 가져온 리비전내용 앞에 붙여줄 내용)

git svn clone --prefix svn/ --username yds -s <<SVN address>>

트렁크의 이름이 다를때 SVN Repository 전체 가져오기

git svn clone --prefix svn/ --username yds -T <<Trunk Folder>> <<SVN address>> <<Repository Name>>

트렁크와 브랜치의 이름이 다를때 SVN Repository 전체 가져오기

git svn clone --prefix svn/ --username yds -T <<Trunk Folder>> -b <<Branch Folder>> <<SVN address>> <<Repository Name>>

구글 크롬에서 플래시 플레이어 디버거 활성화 하는 방법

드럼캡 — Fri, 25 Jun 2010 18:03:55 +0900

플래시/플렉스 개발자라면 구글 크롬을 많이들 애용하실 겁니다. 그런데 어느날 갑자기 구글 크롬에 플래시 플레이어가 Release 버전이 깔려 있어 디버깅이 안되었습니다. 제가 맥 환경이라 플레이어는 오직 하나뿐이고 플래시는 브라우저 플러그인 아키텍쳐로 실행되기 때문에 사파리, 파폭은 잘 되는데 크롬만 Release로 돌아가는 것이 너무 이상했습니다. 그래서 플래시 플레이어를 지웠다 설치했다를 몇번을 반복해도 잘 안되길래 완전히 지우고 크롬을 실행해 봤습니다. 그랬더니 사파리, 파폭은 지워져서 실행이 안되는데 크롬에는 지워지지 않고 여전히 플래시 플레이어가 남아있었습니다.

이를 해결하기 위해 구글 크롬 페이지에 가서 확인해 봤더니 5.0.360.4 부터는 플래시 플레이어가 크롬에 내장되어 나온답니다. 크롬을 쓰면 이제부터는 크롬의 플래시 플레이어가 항상 최신버전으로 유지되겠죠. 버전의 정확한 번호는 모르겠지만, 기존에는 단축 아이콘에 별도의 --enable-internal-flash 인수를 넣어야 했는데, 지금은 인수를 넣지 않아도 디폴트로 실행 되게 되어있더군요.

구글 크롬에 플래시가 빌트인 된 부분에 대해 반감을 가지시는 분이 가끔 계실텐데, 이에대해 브라우저 플러그인 아키텍쳐로 구성되어있는 플래시 플레이어는 성능의 한계가 분명히 있고 브라우저의 자원을 사용하게 되어 이를 개선하기 위한 프로젝트의 첫 단계로써 지속적인 플래시 플레이어 관리가 초기 목표인 것으로 보아주시면 되겠습니다. 자세한건 구글 블로그의 포스트를 참고하시고...

구글의 플래시 포함에 대한 입장: http://googlekoreablog.blogspot.com/2010/04/blog-post_05.html

(사실 플래시의 2D 렌더링 퍼포먼스는 OS,브라우저마다 다릅니다. 그만큼 브라우저의 영향을 많이 받습니다. 심지어 플래시 플레이어 10의 텍스트 엔진이 맥의 사파리,크롬(웹킷) 에서는 아직 한글입력이 제대로 안됩니다. 그래서 맥에서 한글 테스트를 해보려면 파이어 폭스를 써야 합니다.)

그럼 이제 우리 개발자들은 크롬의 빌트인 플래시 플레이어가 아직은 필요가 없으니, 이걸 비 활성화 시켜보겠습니다.

브라우저 주소창에 chrome://plugins 를 입력합니다.
플러그인 리스트가 나옵니다.
자세히 보시면 플래시 플레이어가 2개가 보일 것입니다.
이중에서 크롬이 설치된 폴더에 있는 플래시 플레이어를 disable 해 줍니다.
naver나 daum에 들어가서 디버거로 실행 되고 있는지 확인해봅니다.

이걸로 삽질 하는 분이 한분이라도 없길 바라면서...

LCDS/BlazeDS services-config.xml 컴파일러 세팅 안하도록 만들어보자

드럼캡 — Mon, 21 Jun 2010 10:07:09 +0900

LCDS나 BlazeDS는 플렉스와 서버와의 통신을 도와주는 미들웨어 입니다. 여기서 서버 설정에 대한 부분은 인터넷에 널려있으니 넘어가고, 플렉스에서의 설정에 대해서만 이야기 해 보도록 하겠습니다.
플렉스 프로젝트를 만들면 RemoteObject 등을 사용하여 통신하기 위해 아래와 같이 프로젝트 생성 위자드에서 설정을 하는 과정을 거칩니다.

그러면 빌더는 다음과 같은 프로젝트 설정 정보들을 화면에 보여주면서 LCDS/BlazeDS 등의 서버 기술을 사용할 수 있게 도와 줍니다.

차례대로 설명하면, 서버 탭에 생긴 정보들은 빌더에서 사용하는 정보로써, 이 정보를 참고하여 플래시 빌더4의 서비스 생성 위자드, 컴파일, 실행 등을 매끄럽게 할 수 있습니다.
컴파일러 탭의 Additional Compiler Arguments 항목에 –services 에 LCDS/BlazeDS의 서비스 xml 이 지정되어 있는 것을 보실 수 있습니다. 이것은 컴파일 시에 해당 서비스 xml 정보를 플래시 안에 넣기 위함이며, 컴파일러가 알아서 해 줍니다. 공동 작업 시에는 이 services 컴파일러 아규먼트가 달라서 개발자마다 이 정보를 변경해 줘야 했습니다.

여기서 고민이 생겼습니다.
개발자마다 파일은 같지만 위치가 다르다고 해서 설정을 바꾸는 수고를 매번 해야할까? 라고 말이죠. 이것으로 쏠쏠하게 세팅할 때마다 불려 다니곤 했습니다.

해결책1. RemoteObject에 endpoint 속성을 매번 넣어주기

사실 RemoteObject 클래스에는 endpoint 라는 속성이 있는데, 여기에 해당 서비스의 endpoint 를 아래와 같이 지정해 주시면 됩니다. 다만, RemoteObject 선언할 때 매번 설정해 줘야겠죠

해결책2. 직접 services-config.xml 정보를 넣어주기.

위와 같이 일일이 설정하는 것은 답이 아니라 생각해서 컴파일러 아규먼트에 촛점을 맞춰 해결책을 강구해 봤습니다. 이 아규먼트가 들어감으로 해서 어떤 일이 생기는지 분석해 보면 자연스레 해결될 것이니까요. 그래서 컴파일러 아규먼트에 -keep을 추가해서 mxml에서 생성되는 as 클래스들을 찾아 하나하나 자세히 분석해 보았습니다. 그랬더니 의외의 결과가 나왔는데, 컴파일러는 –services 아규먼트를 지정하면 부가 코드를 여럿 생성하지만 가장 중요한 부분이 지정한 xml을 읽어와 mx.messaging.config.ServerConfig 클래스의 스태틱인 xml속성에 넣어주는 것 밖에 없었습니다.

궁금하시면 컴파일러 아규먼트 –services 를 지정하셨다면 아래와 같이 해 보세요. services-config.xml 설정 정보가 쫙 펼쳐져 보일 것입니다.

trace(ServerConfig.xml.toXMLString());

결론은 간단합니다. 글을 장황하게는 썼지만 그냥 다음과 같은 간단한 클래스를 만들어 mxml코드에 넣어주기만 하면 됩니다. 초기화 시에 서비스를 다녀와야 할 일이 있다면 as 코드에 직접 설정정보를 예제와 같이 넣으시고요. 아니라면 xml를 읽어온 이후에 서버의 타이밍에 따라 다르지만 대체로 applicationComplete 이벤트 디스패치 된 이후에 세팅완료 됩니다. RemoteObject 에서 endpoint를 찾을 수 있습니다.

LcdsServiceInitializer.as

package
{
	import mx.core.IMXMLObject;
	import mx.core.mx_internal;
	import mx.messaging.config.ServerConfig;
	import mx.rpc.AsyncToken;
	import mx.rpc.Responder;
	import mx.rpc.events.FaultEvent;
	import mx.rpc.events.ResultEvent;
	import mx.rpc.http.HTTPService;

	use namespace mx_internal;

	/**
	 * LCDS , BlazeDS의 Services Config를 컴파일러에서 세팅하지 않고 
	 * 동적으로 세팅하게 해 주는 초기화 클래스
	 *  
	 * @author Yun Dosun
	 */
	public class LcdsServiceInitializer implements IMXMLObject
	{
		//-----------------------------------------------------------
		//
		// Constants
		// 
		//-----------------------------------------------------------
		private static const DEFAULT_XML_LOCATION:String = "config/services-config.xml";
		private static const DEFAULT_SERVICES:XML = 
				
					
						
							
						
					
				
				
					
						
							
						
					
				
				
				
				
					
						
						
							true
							4
						
					
					
						
						
						
					
					
						
						
						
					
				
			;


		/**
		 * IMXMLObject 를 구현한 클래스 (MXML에서 세팅한 속성값 적용을 위한 목적)
		 * @param document
		 * @param id
		 */
		public function initialized(document:Object, id:String):void
		{
			this.document = document;
			this.id = id;

			setROService();
		}

		/**
		 * configPath 설정파일 경로에서 잘 찾아오면 그 값으로, 
		 * 설정파일이 없으면 기본 설정정보로 셋  
		 */
		private function setROService():void
		{
			var service:HTTPService = new HTTPService();
			service.url = configPath;
			service.resultFormat = "e4x";

			var resultFunc:Function = function(event:ResultEvent):void
				{
					var xml:XML = event.result as XML;
					ServerConfig.xml = xml;
				}

			var faultFunc:Function = function(event:FaultEvent):void
				{
					ServerConfig.xml = DEFAULT_SERVICES;
				}

			var responder:Responder = new Responder(resultFunc, faultFunc);

			var token:AsyncToken = service.send();
			token.addResponder(responder);
		}

		//--------------------------------------------------------
		//
		// Variables
		// 
		//--------------------------------------------------------

		mx_internal var document:Object;
		mx_internal var id:String;

		/**
		 * services-config.xml(플렉스용) 파일의 경로
		 * @return 
		 */
		public function get configPath():String
		{
			var ret:String = _configPath;

			if (!_configPath)
			{
				ret = DEFAULT_XML_LOCATION;
			}

			return ret;
		}
		private var _configPath:String;

		/**
		 * services-config.xml(플렉스용) 파일의 경로
		 * @param value
		 */
		public function set configPath(value:String):void
		{
			if (_configPath == value)
			{
				return;
			}
			_configPath = value;
			
			setROService();
		}
		
		/**
		 * 현재 어플리케이션에 설정 되어있는 services-config 정보
		 * @return 
		 */
		public function get serverConfigXml():XML
		{
			return ServerConfig.xml;
		}
	}
}

main.mxml



	
		<![CDATA[
			import mx.rpc.CallResponder;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;

			import volcano.uxsb.platform.utils.RemoteObjectHelper;

			private var cr:CallResponder;

			protected function datagrid1_clickHandler(event:MouseEvent):void
			{
				cr.token=RemoteObjectHelper.sendRemote(new Object, "getData111", "drumcap");
				cr.addEventListener(ResultEvent.RESULT, onResultEventHandler);
			}

			private function onResultEventHandler(event:ResultEvent):void
			{
				trace("result===", event.result);
			}
		]]>

시작하세요 액션스크립트 3.0 애니메이션 소스코드

드럼캡 — Thu, 29 Apr 2010 15:31:49 +0900

시작하세요 액션스크립트 애니메이션의 소스코드를 출판사에만 올리고 제 블로그엔 올리지 않았었군요. 너무 정신없어서 미처 체크하지 못했었습니다. 도서를 구매하신 분들께 죄송하다는 말씀을 거듭 드리구요. 다음의 링크를 클릭하셔서 다운로드 받으시면 되겠습니다.

AS3MTM_source.zip

112 페이지 내용의 이해를 돕는 데모파일(as2로 되어있습니다)..

multicurvedemo.fla

영어로 되어있던 소스코드 주석부분을 한글로 바꿔서 올립니다.

소스코드의 인코딩은 UTF8이므로 이점 참고하시면 좋을것 같습니다.

참고로 각 인터넷 서점 별 구매링크는 다음과 같습니다.

------

정오표를 아래에 발견하는대로 기재해 나가도록 하겠습니다.

63쪽의 그림 3-6에서

양과 음의 위치가 바뀌어야 함

348쪽 두 번째 공식에서

G = (6.6742 ± 0.0010) * 10-11 * m3 * kg-1 * s-2

---> G = (6.6742 ± 0.0010) * 10-¹¹ * m³ * kg-¹ * s-²

시작하세요! 액션스크립트 3.0 애니메이션 -모션의 원리부터 고급 액션까지-

드럼캡 — Tue, 27 Apr 2010 18:12:33 +0900

2000초반 액션스크립트를 처음에 접한 계기가 화려한 효과를 웹에서 볼 수 있다는 장점에 매료되어 플래시를 시작했었습니다. 하지만 언제나 외국의 멋있는 결과물을 볼 때마다 한계를 느끼곤 했습니다. 이것은 아무리 소스코드를 분석해도 알 수 없는 것이고, 쓰인 공식의 원리를 알아내기는 너무 힘들었습니다.

초반엔 이징 공식 하나를 알아내는 것도 수학적 지식이 전무한 제겐 너무 힘든 일이었습니다. 물론 고등학교, 대학교 모두 이과, 공대를 나온 공학도 였지만, 물리를 싫어한 제겐 이러한 응용이 정말 쉽지 않았죠.

제가 이 책을 번역하겠다고 결심하게 된 계기는 바로 이러한 저의 갈증에 도움을 준 책이었기 때문이며, 액션스크립트의 고급 활용으로써의 첫걸음을 딛게 만들어 준 책이었습니다. 이러한 좋은 내용의 책은 많은 스크립터들이 보고 도움을 받았으면 하는 마음에서 번역을 시작하게 되었고 번역을 하게 도와주신 위키북스 관계자께 감사드립니다.

더불어 바쁜 와중에 책의 베타리더가 되어주신 강성규, 김형인, 신정훈, 엄진우, 지용호, 한상훈 님께 진심으로 감사드립니다. :)

책 예약구매 바로가기

AS3에서 패키지는 네임스페이스다.

드럼캡 — Tue, 09 Mar 2010 14:11:07 +0900

코딩하다 좀 황당해서 글을 남깁니다. 이미 알고 계신분도 계시겠지만요. ;-)

사실 대부분의 플래시/플렉스 개발자는 flash.utils.getQualifiedClassName을 가끔 쓸 때가 있습니다.

그리고 그럴때마다 trace 해보면 이상한 점을 발견할 수 있습니다. 다음과 같이요.

trace(flash.utils.getQualifiedClassName(MouseEvent));
// trace결과 ==> flash.events::MouseEvent

하지만 대부분은 원래 그러려니 하고 넘어갑니다. 저도 그랬으니깐요.

그런데 이 블로그의 글을 보고 다음과 같이 테스트 해 본결과 깜짝 놀랐습니다.

package
{
	import flash.display.Sprite;
	
	public class TestAS3 extends Sprite
	{
		namespace flash_events = "flash.events";
		
		public function TestAS3()
		{
			trace(flash_events::MouseEvent);
		}
	}
}

결과적으로 임포트는 내부적으로 네임스페이스를 설정해 주는 것이라는 것을 알 수 있습니다.

Flash Catalyst로 디자이너 관점에서 플렉스 App 제작하기 3부

드럼캡 — Fri, 19 Feb 2010 13:33:59 +0900

지난 1,2부에서는 PSD 가져와서 화면 기본 구성하는 것과 게시판의 리스트, 뷰 화면들을 완성했다면 이번에는 화면에 생명을 불어넣는 인터랙션/이펙트를 위한 과정을 실시 합니다. 만약 1,2부를 보지않고 이 페이지로 바로 오셨다면 1,2부를 전부 보시고 다시 여기로 오셔야 합니다.

Flash Catalyst로 디자이너 관점에서 플렉스 App 제작하기 1부
Flash Catalyst로 디자이너 관점에서 플렉스 App 제작하기 2부

2부에 이어 계속 진행해 보겠습니다.

따라하기

이제 리스트 이미지 (텍스트 이지만 포토샵에서 이미지 처리 했습니다. 플렉스 App 용으로 디자인 된 것이 아니라 이렇게 되었습니다)를 버튼으로 만들 차례입니다. 선택을 하고 아래 화면과 같이 HUD에서 버튼으로 변환을 눌러줍니다.

이제 List는 버튼이 되었고 HUD에서 버튼의 4가지 State로 바로 편집할 수 있는 상태가 된 것을 확인할 수 있습니다.

마찬가지로 업로드,Prev,Next 등의 이미지를 버튼으로 바꿔줍니다.

이제 2부에서 만들어 놓은 Data List에서 게시물을 클릭했을때 View페이지로 이동하는 것을 구현해 봅시다. 아래 화면과 같이 Data List 컴포넌트를 클릭하고 우측에 위치한 Interations 패널에서 Add Interation 버튼을 눌러줍니다. 그러면 아래 화면과 같은 팝업창이 띄워집니다. 이것은 플래시에서 심볼에 onClick, onMouseOver등의 이벤트 달았던 것과 같다고 생각하시면 됩니다.

우리는 데이터 리스트를 클릭하면 발생하는 Change 이벤트에 다음과 같이 View 스테이트로 화면전환(Transition)을 할 것이므로,

첫번째 콤보박스는 on Change를 선택합니다.

두번째 콤보박스는 Play Transition to State를 선택합니다.

세번째 콤보박스는 View를 선택해줍니다.

이제 List 버튼에 인터랙션을 줄 차례입니다. List 버튼을 클릭합니다.

Add Interation - onClick - Play Transition to State - List 로 선택해줍니다.

이제 기본 인터랙션이 설정되었습니다. 한번 Ctrl-Enter 또는 Command-Enter를 눌러서 테스트 해보시 바랍니다. 게시글을 클릭하면 View 페이지로 넘어가고, View 페이지에서 List 버튼을 누르면 List 페이지로 넘어갑니다. 쉽게 화면을 만들어서 놀랐죠? 이게 카탈리스트의 힘입니다 ^^;

이제 마지막으로 화면에 이펙트를 줄 차례입니다. 카탈리스트는 스테이트를 생성할 때마다 아래의 타임라인의 좌측과 같이 모든 스테이트 상황에 대한 정보가 생기며, 현재는 당연히 List->View, View->List 두개밖에 없습니다. 이 두개의 상황에 대한 이펙트를 정의해 보겠습니다. 먼저 List->View를 설정해 봅시다.

쉽게 설정하기 위해서 아래의 Smooth Transition 버튼을 눌러 Move와 Fade 이펙트가 설정되도록 합니다.

아래와 같이 잘 설정되었습니다.

마찬가지 방법으로 View->List도 이와같이 Smooth Transition을 클릭하여 이펙트를 설정해줍니다.

이제 다시 Ctrl-Enter, Command-Enter를 클릭하여 확인해 봅시다. 어떠신가요? 훨씬 마음에 드는 결과가 나왔죠?

이 타임라인은 아래의 그림과 같이 플래시의 타임라인 컨셉과 비슷합니다. 한번 아래와 같이 세팅하고 다시 플래이 해보세요.

현재는 Fadein-out 또는 Move만 있는데 별도로 다른 이펙트를 추가 할 수도 있으며, 플렉스4에 적용된 3D 이펙트도 적용가능합니다.

지금까지 했던 방식대로 작업하면 1부의 완성된 예제의 모습을 만드는데 그리 어렵지 않게 작업할 수 있을 것이며 필자는 포토샵 레이어 정리 끝나자 마자 최종 모습을 만들어 내는데 까지 2시간만에 완성해 버렸습니다.

이와같이 디자이너 여러분들의 크리에이티브를 마음껏 발휘할 툴이 바로 이 카탈리스트 인 것이라는 것을 몸소 체험하셨을 것입니다. 여러분의 능력을 십분 활용하여 멋진 결과물이 많이 나왔으면 좋겠습니다.

Flash Catalyst로 디자이너 관점에서 플렉스 App 제작하기 1부
Flash Catalyst로 디자이너 관점에서 플렉스 App 제작하기 2부

Flash Catalyst로 디자이너 관점에서 플렉스 App 제작하기 2부

드럼캡 — Fri, 19 Feb 2010 13:24:33 +0900

지난 1부에서는 PSD 가져와서 화면 기본 구성하는 것을 완성했다면 이번에는 게시판의 기본형태를 만들고 페이지를 만들어서 3부에 할 인터랙션/이펙트를 위한 과정을 해야 합니다. 만약 1부를 보지않고 이 페이지로 바로 오셨다면 1부를 보시고 다시 여기로 오셔야 합니다.

Flash Catalyst로 디자이너 관점에서 플렉스 App 제작하기 1부
Flash Catalyst로 디자이너 관점에서 플렉스 App 제작하기 3부

1부에 이어 계속 진행해 보겠습니다.

따라하기

아래와 같이 게시판에서 반복되는 부분들을 (아래의 라인까지) 선택해줍니다.

메뉴-Modify-Group을 선택하거나 Ctrl-G 또는 Command-G를 눌러 그룹을 만들어줍니다.

만들어진 그룹이 선택된 상태에서 화면에 둥둥 떠다니는 HUD Interface를 살펴보면 Group으로 바뀌어 있는 것을 확인할 수 있습니다. (HUD 인터페이스에는 그래픽 컴포넌트의 실제 사용할 컴포넌트로의 변환이나 간단한 State 정보 확인, 편집으로 바로가기등을 수행할 수 있습니다) 여기서 하단의 Convert Artwork to Component 를 클릭하고 DataList 컴포넌트로 변환해줍니다.

변환하면 Group이 Data List로 변경된 것을 확인할 수 있습니다. 우리는 이로써 매우쉽게 데이터를 리스트 형태로 반복하여 보여주는 DataList 컴포넌트를 만들게 되었습니다. 더불어 Component Issue 경고가 나타나는데 이것은 Data List 컴포넌트가 반드시 선택해야 하는 부분(플렉스4에서는 이것을 Part라 부릅니다)이 있다는 뜻 입니다. 이와같이 모든 컴포넌트가 그런것은 아니지만, 반드시 선택해야 하는 Part가 있을 수 있습니다. 그럴땐 이렇게 노란 이슈아이콘이 만들어 집니다. 이제 왼쪽의 Edit Parts 버튼을 클릭합시다

그럼 기존의 Group이 선택된 상태로 나타나는데 이는 플래시의 심볼안으로 들어온 것과 비슷하다고 생각하시면 되겠습니다. 여기서 Convert Artwork to DataList Part 콤보박스를 누르면 Repeated Item(Required) 가 나옵니다.

우리는 선택한 그룹을 반복시킬 것이므로 여기에 체크박스를 클릭합니다. 만약 다른 반복하길 원하는 아이템이 있다면 (ex:이미지) 그것도 함께 선택한 후 버튼을 누르시면 가능합니다. 그러면 아래와 같이 데이터가 반복되어 보여집니다.

원하는 사이즈로 적절히 조절해 줍니다. 저는 5개의 글을 보여주는 크기로 조절했습니다.

조금 전 심볼과 비슷하다고 말씀드렸는데, 플래시의 심볼편집 인터페이스와 동일합니다. 좌 상단에 DataList2라는 컴포넌트에 들어와 있는데 다시 Writeform을 클릭하여 메인으로 돌아갑니다.

DataList 컴포넌트가 선택되어 있는 상태로 창 아래에 위치해있는 DesignTime Data를 열어봅니다. 그러면 화면에 보여지는 디자인 작업을 위한 임의의 데이터가 보여집니다. 원하는 대로 아래와 같이 수정해 봅시다.

이제 거의 됐습니다. 지금까지는 List라는 State를 만들었으니 페이지 이름을 아래와 같이 더블클릭하여 List로 변경해줍니다.

그리고 보기 State를 만들기 위해 현재의 리스트 State를 아래의 Duplicate State버튼을 클릭하여 복사해줍니다.

그리고 복사된 State를 View 로 수정해줍니다.

View 스테이트가 선택된 상태에서 오른쪽 위의 Layers를 클릭하여 아래와 같이 눈 아이콘을 설정합니다. 잠김버튼은 메인,BG,Background를 설정합니다.

그리고 아래의 화면과 같이 되도록 이리저리 조절해 주고 마무리 합니다.

마지막으로 상단의 List, View 스테이트 버튼을 눌러보면 화면이 성공적으로 전환되는 것을 확인해 볼 수 있습니다. 여기까지 따라오시느라 수고하셨습니다.

이제는 지금까지 작성한 페이지에 생명력을 불어넣는 시간입니다. 수많은 디자이너 여러분 힘내세요!!

Flash Catalyst로 디자이너 관점에서 플렉스 App 제작하기 3부 바로가기

드디어 AIR 어플리케이션이 Android로...

드럼캡 — Tue, 16 Feb 2010 00:19:46 +0900

드디어 AIR 어플리케이션 for Android 가 MWC(Mobile World Congress)에서 발표되었습니다. 드디어 플래시/플렉스 개발자들이 아이폰용 어플리케이션 뿐만 아니라, 안드로이드용 어플리케이션도 동시에 개발할 수 있는 환경이 마련되었습니다. 이로써 어도비는 FlashCS5로 아이폰용 어플리케이션과 안드로이드용 어플리케이션을 동시에 배포할 수 있는 환경을 마련하면서 개발자들이 서로 다른 언어와 API를 익혀서 어플리케이션을 배포해야 하는 스트레스를 받지 않아도 되었습니다. 이러한 환경이 잘 다듬어 지면 정말 좋겠습니다. 2010년 상반기에 Flash Player 10.1이 런칭되고, 안정화 된 이후에 2010년 하반기에 AIR for Android가 런칭될 가능성이 큽니다. 이러한 이야기를 Adobe의 에반젤리스트 Ted Patrick이 예고하고 있습니다..

사실 모바일에서는 성능이 중요한 이슈인데, 모바일에 맞춰 CPU, 배터리, 메모리등을 최적화 했다고 했으니 (아마도 안드로이드에서는 플래시가 올라가는 형태이겠죠) 이건 뚜껑을 열어봐야 알겠지만 점차 개선되는 형태로 진행될 가능성이 높다고 보여집니다.

이미 예견된 일이었지만 이렇게 빨리 진행될 줄은 몰랐네요. 최근 어도비의 행보는 정말 마음에 듭니다. 애플의 스티브 잡스 덕이라 해야하나요? ㅋㅋ 잡스형 쌩유!!