요즘 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>>
TAG GIT, svn

TRACKBACK ADDRESS : http://drumcap.com/trackback/85 관련글 쓰기

댓글을 달아 주세요

  1. hika 2010/09/02 13:03  댓글주소  수정/삭제  댓글쓰기

    근데 말이죠. git을 쓰면 다 좋은데 미묘한 모순점이 있어요.
    꼭 커밋코맨트를 달라고 요구하는데, 푸쉬면 몰라도 커밋은 구지 코맨트가 없이 로컬히스토리 대신에 쓰는 경우가 많은데 귀찮다는.
    결국 커밋코멘트가 a로 통일되는 현상이...
    차라리 커밋코멘트는 선택이고 푸쉬코멘트는 필수였던게 좋았을지도 모르겠다는 생각입니다.

    • BlogIcon 드럼캡 2010/09/02 19:54  댓글주소  수정/삭제

      전 항상 코멘트를 달기때문에 그런생각은 안했고 잘됐다 생각했었는데 로컬히스토리 대용으로 쓰신다면야 할말 없슴돠..ㅋㅋ


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

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

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

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

그럼 이제 우리 개발자들은 크롬의 빌트인 플래시 플레이어가 아직은 필요가 없으니, 이걸 비 활성화 시켜보겠습니다. 
  1. 브라우저 주소창에 chrome://plugins 를 입력합니다.
  2. 플러그인 리스트가 나옵니다.
  3. 자세히 보시면 플래시 플레이어가 2개가 보일 것입니다.
  4. 이중에서 크롬이 설치된 폴더에 있는 플래시 플레이어를 disable 해 줍니다.
  5. naver나 daum에 들어가서 디버거로 실행 되고 있는지 확인해봅니다.

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

TRACKBACK ADDRESS : http://drumcap.com/trackback/82 관련글 쓰기

댓글을 달아 주세요

  1. hika 2010/06/28 15:44  댓글주소  수정/삭제  댓글쓰기

    큰 도움이 되었습니다!!!!

  2. jin_u 2010/07/04 02:53  댓글주소  수정/삭제  댓글쓰기

    호.. 좋은 정보! 내 것도 살펴보니...

    크롬플러스 (1.4.0.0), 크롬 버전 ver 5.0.375.38 인데, 아래와 같이 플래시보다 더 높은 걸 사용하고 있네?? Flash Player 업뎃 받아야 겠넹. ㅋ

    Shockwave Flash - 버전: 10,1,53,38
    설명: Shockwave Flash 10.1 r53
    위치: C:\Program Files\ChromePlus1.4.0.0\1.4.0.0\gcswf32.dll

    Shockwave Flash - 버전: 10,1,52,14
    설명: Shockwave Flash 10.1 r52
    위치: C:\WINDOWS\system32\Macromed\Flash\NPSWF32.dll

  3. 워니 2010/07/07 08:59  댓글주소  수정/삭제  댓글쓰기

    올레~!!!!! 이것 때문에 메인 브라우저를 다시 파폭으로 가야 하나 고민 중이였는데 한방에 해결 되었네요!!! 정말 좋은 정보 감사드립니다. 구글에서 영어로 검색하다 안되서 혹시나 하는 맘에 한글로 검색했더니 한방이네요~ ㅎㅎㅎ
    호~ 그나저나 위에 리플다신 분들이 다들 유명하신 분들~~ ^^

  4. krescendo 2010/07/31 04:07  댓글주소  수정/삭제  댓글쓰기

    감사합니다. 도움이 되었습니다.

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);
			}
		]]>
	

	
	

	


TRACKBACK ADDRESS : http://drumcap.com/trackback/81 관련글 쓰기

댓글을 달아 주세요

  1. hika 2010/06/23 00:15  댓글주소  수정/삭제  댓글쓰기

    와 오랜만에 포스팅. 역시 모임에서 한마디 건내드린게 효과가 있었던건가요 ^^

    • BlogIcon 드럼캡 2010/06/24 11:57  댓글주소  수정/삭제

      ^^ 저는 블로그에 글을 올리기가 트위터만큼 편하게 쓰지는 못하겠어요. 블로그를 편하게 만들어 볼까도 고민중이구요. 제가 사진과 음악에도 관심이 많거든요. 기록이 휘발성이 아닌 블로그가 더 좋은것 같기도 하고요 ^^

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

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


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

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

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

TRACKBACK ADDRESS : http://drumcap.com/trackback/80 관련글 쓰기

댓글을 달아 주세요

  1. 무직밥 2010/05/27 19:04  댓글주소  수정/삭제  댓글쓰기

    열심히 보겠습니다.@~@

  2. 사자 2010/05/31 00:50  댓글주소  수정/삭제  댓글쓰기

    다운받아가요- 감사합니다~

  3. 떡장군 2010/07/01 20:43  댓글주소  수정/삭제  댓글쓰기

    책 112쪽에.. multicurvedemo.fla 파일 받을수 있다고 나와있는데.. 어디에 있나요??

    • BlogIcon 드럼캡 2010/07/05 20:22  댓글주소  수정/삭제

      원 저자가 이 책의 이전버전(AS2)에서 글을 AS3용으로 바꾸면서 빠뜨린 소스 같습니다. AS2용으로 되어있는 것을 다운받아서 올려드립니다. 소스를 다운받으시고 실행해 보시면 글을 전반적으로 이해하시는 데는 무리가 없을 듯 합니다. 미처 체크하지 못해 죄송합니다.

  4. -협- 2010/09/09 19:46  댓글주소  수정/삭제  댓글쓰기

    책 p.149 11~13줄에 오타인듯한데
    var radians:Number = angle * Math.PI/180;
    var vx:Number = Math.cos( radians)* speed;
    var vy:Number = Math.sin( radians)* speed;
    요렇게 해야 맞는건가요??


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

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

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

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

책 예약구매 바로가기

TRACKBACK ADDRESS : http://drumcap.com/trackback/79 관련글 쓰기

  1. 시작하세요! 액션스크립트 3.0 애니메이션

    Tracked from Hangun's World - Blog 2010/04/28 00:12  삭제

    윤도선님이 Foundation Actionscript 3.0 Animation: Making Things Move!를 번역한 시작하세요! 액션스크립트 3.0 애니메이션 -모션의 원리부터 고급 액션까지-가 위키북스에서 4월 28일에 출간될 예정입니다. 아마존에서 헤메다가 이 책을 발견하고서 제법 재밌는 책일 것이라고 생각하고 있던 차에, 때마침 번역서가 준비중이라는 소식을 듣고 반가웠던 기억이 나네요. 이 책은 기본적인 ActionScript 3.0...

댓글을 달아 주세요

  1. 2010/04/27 23:42  댓글주소  수정/삭제  댓글쓰기

    책 나오면... 한권만 굽신굽신...
    절 회사에 혼자두고 가시다니... ㅠ_-

  2. hika 2010/04/29 12:50  댓글주소  수정/삭제  댓글쓰기

    이 책이 참 좋죠. 단지 안타까운건 플9 기반이라 점이겠죠.
    그래도 참 쓸모가 많다는 ^^;
    혹시 다른 프렌즈오브 것도 혹시 번역 계획이 있으시면 베타리더로 불러주세요~

    • BlogIcon 드럼캡 2010/04/29 14:39  댓글주소  수정/삭제

      저도 번역하면서 고민을 많이 했는데, 어차피 원론적인 부분의 설명을 보는것도 좋겠다 해서 Foundation쪽도 번역을 시작하게 되었습니다. Advanced는 에이콘쪽에서 작업중인걸로 알고있습니다. 제가 앞으로 번역 또 할지는 모르겠지만 hika님은 언제나 환영입니다. ^^

  3. hika 2010/05/01 22:19  댓글주소  수정/삭제  댓글쓰기

    오늘 영풍에 들렸다가 사왔습니다. 오랜만에 다시 보니 새록새록 하네요 ^^; 제가 영문판을 보고 나서 실제로 책을 산건 일판이었는데 다시 한국판을 접해보니 뭔가 각 언어별로 번역할 때 원저작자의 의도야 정확하게들 표현하시려 하겠지만 성격을 이해하는 방식이 다른듯.
    뭔가 일판 역자가 생각하는 원저자는 더 객관적이고 로봇같은 느낌이었는데, 그것에 비하면 도선님의 번역에선 보다 인간적인거 같기도 하고 ㅎㅎ

    • BlogIcon 드럼캡 2010/05/03 09:34  댓글주소  수정/삭제

      오홋!! 역자인 저보다 먼저 구매하셨군요. 저도 이제야 받았습니다. 저는 저자가 옆에서 친절하게 1:1 과외해 주는 느낌을 받아서 그렇게 친절하고, 쉽게 설명하려하는 느낌을 담았는데, 잘 되었나 모르겠네요~ 그래서 출판사와 이야기 한 후 의역을 많이 하게 되었습니다. ^^

  4. 무직밥 2010/05/03 21:48  댓글주소  수정/삭제  댓글쓰기

    오늘 책이 집으로 왔습니다. 이제 한장 넘기기 직전에 블러그가 있어서 찾아왔네요. 많이 고생하셨을텐데 수거하셨습니다.

  5. hika 2010/05/17 17:21  댓글주소  수정/삭제  댓글쓰기

    그러니까, 오타가 많이 있어요 ^^

  6. blamei 2010/05/24 16:36  댓글주소  수정/삭제  댓글쓰기

    오타 찾는 재미가 솔솔?!

  7. 리쓰 2010/05/25 20:37  댓글주소  수정/삭제  댓글쓰기

    책 보고 왔는데요..소스는 어디 있을까요? ㅠ.ㅠ 안보이네요..
    아.. 유용한 정보 잘 보고 갑니다^-^/

    • BlogIcon 드럼캡 2010/05/26 20:07  댓글주소  수정/삭제

      죄송합니다. 제가 올려놓은줄 알았는데 글을 공개안해 놨었군요. 이제 올렸으니 다운로드 받으실 수 있을거예요

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

사실 대부분의 플래시/플렉스 개발자는 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);
		}
	}
}
결과적으로 임포트는 내부적으로 네임스페이스를 설정해 주는 것이라는 것을 알 수 있습니다. 

TRACKBACK ADDRESS : http://drumcap.com/trackback/78 관련글 쓰기

댓글을 달아 주세요

  1. BlogIcon jin_u 2010/03/11 16:52  댓글주소  수정/삭제  댓글쓰기

    웁스... EA로 출력할때 항상 보던것이였는데... 그렇군요. 네임스페이스였군요. 헐~

지난 1,2부에서는 PSD 가져와서 화면 기본 구성하는 것과 게시판의 리스트, 뷰 화면들을 완성했다면 이번에는 화면에 생명을 불어넣는 인터랙션/이펙트를 위한 과정을 실시 합니다. 만약 1,2부를 보지않고 이 페이지로 바로 오셨다면 1,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시간만에 완성해 버렸습니다. 
이와같이 디자이너 여러분들의 크리에이티브를 마음껏 발휘할 툴이 바로 이 카탈리스트 인 것이라는 것을 몸소 체험하셨을 것입니다. 여러분의 능력을 십분 활용하여 멋진 결과물이 많이 나왔으면 좋겠습니다.

TRACKBACK ADDRESS : http://drumcap.com/trackback/77 관련글 쓰기

댓글을 달아 주세요

  1. 야아리 2010/07/07 17:59  댓글주소  수정/삭제  댓글쓰기

    유용한 정보 감사드립니다.^^ 카탈로크 참편해 졌네요.

    • BlogIcon 드럼캡 2010/07/08 10:40  댓글주소  수정/삭제

      도움이 되셨다면 그게 제 기쁨입니다. 지금 카탈리스트로 프로젝트 하고 있으니 좋은 샘플로 포스팅 하여 더 많은 도움을 드릴 기회가 있을 예정입니다.

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

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 스테이트 버튼을 눌러보면 화면이 성공적으로 전환되는 것을 확인해 볼 수 있습니다. 여기까지 따라오시느라 수고하셨습니다.

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

TRACKBACK ADDRESS : http://drumcap.com/trackback/76 관련글 쓰기

댓글을 달아 주세요

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

IT 이야기 | 2010/02/16 00:19 | Posted by 드럼캡

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

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

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



TRACKBACK ADDRESS : http://drumcap.com/trackback/74 관련글 쓰기

댓글을 달아 주세요

플렉스로 대형 어플리케이션 프로젝트를 하다보면 프리로더를 수정하여 사용할 때가 반드시 오는데 이때 발생하는 문제는, 로딩이 길어질 때 스테이지를 클릭하면 마우스 이벤트에 가끔 오작동을 일으켜 런타임 에러를 발생시킬 때가 있다는 것이다. 에러를 한번 살펴보자.


TypeError: Error #1009: Cannot access a property or method of a null object reference. 
        at mx.managers::SystemManager/stageEventHandler()[E:\dev\trunk\frameworks\projects\framework\src\mx\managers\SystemManager.as:3275]
에러를 만나면 당황스럽고 짜증이 밀려오는데, 이유는 mouseCatcher가 바로 null 이라는 것.
코드를 살펴보면 클릭이벤트 핸들러가 다음과 같이 mouseCatcher가 null 체크 하지않고 사용되고 있다.

구글링 해보니 이에 관련된 버그는 Adobe Bug System에 이미 있었고 SDK 버그로 분류되어 Flex4에서 고쳐졌다. [버그 바로가기] 하지만 아직 Flex3에서는 발생되고 있으니 우회방법을 사용하여 회피해야 한다.

이에대해 한 일본인 블로거가 해결책을 제시하였는데 [바로가기] 간단하게 프리로더 상태에서 마우스다운 이벤트 자체를 프리로더에서 걸고 프리로드가 완료되면 마우스다운 이벤트를 해지하는 것이다.
해결을 위한 코드는 다음과 같다.


TRACKBACK ADDRESS : http://drumcap.com/trackback/73 관련글 쓰기

댓글을 달아 주세요