요즘 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  댓글주소  수정/삭제

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

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

사실 대부분의 플래시/플렉스 개발자는 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 관련글 쓰기

댓글을 달아 주세요

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


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 관련글 쓰기

댓글을 달아 주세요

플렉스의 ToolTip의 사용방법과 스타일을 주는 것은 대부분의 플렉스를 하는 사람이라면 잘 알 것입니다. 하지만, 유용한 이 툴팁에는 몇가지 단점이 있는데, 그것은 다음과 같습니다.


1. 스타일은 어플리케이션 전체의 전역적인 클래스 타입의 스타일 밖에 적용되지 않습니다. 따라서 각각의 툴팁에 다른 스타일을 줄 수 없으며 이러한 경우 별도 UIComponent를 사용해 툴팁을 별도 제작해야합니다. 

2. 그리고 풍선 모양의 툴팁을 사용해야 할 때가 종종 있는데 이러한 경우도 지원하지 않으며 별도로 툴팁을 만들어야 합니다.


다음의 커스텀툴팁 매니저를 이용하고 스타일 이름으로 툴팁의 스타일을 매니저에게 넘겨주면 툴팁이 동적으로 생성됩니다.

원리는 툴팁 속성에 아무 값이나 주고 툴팁이 생성되게 설정한 후 toolTipCreate 이벤트에서 툴팁을 가로채서 별도의 툴팁으로 바꿔버리는 방법입니다. 


사용방법은 다음과 같습니다.

예를들어 버튼이 있다면 (toolTip 속성이 있는 UIComponent 를 상속받은 클래스들) 다음과 같이 설정합니다. 3가지를 모두 제대로 설정해야 제대로 보입니다.


CSS 에서는 다음과 같이...


컴포넌트 에서는 다음과 같이..



아래의 샘플에서 마우스 오른쪽 버튼 - view source 하시면 소스를 보실 수 있습니다.

(현재 샘플 소스가 한글이 깨져보이네요. 이부분 서둘러 잡을 테니 우선 소스를 다운로드 해서 봐주세요)






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

댓글을 달아 주세요


어도비의 테드 패트릭은 자신의 블로그에서 Flash Player 10.1 과 AIR 2.0 를 사용해서 개발 중이거나 개발 된 플래시 파일을 사용해 테스트 해 보고 버그신고 해주길 바라고 있습니다.
요즘과 같이 뒤숭숭한 때에 우리 플래시 플렉스 개발자들이 열심히 베타 테스트에 참여해서 버그를 줄일 수 있도록 해야합니다. 비록 제출한 것이 채택 안되더라도 말입니다.

테드 패트릭이 제안한 참여 방법은 다음과 같습니다.

  1. 해당 툴을 다운로드 받습니다.  (Debugger로 다운받아야 겠지요?)
    Flash Player 10.1 Beta 2 and AIR 2.0 Beta 2
  2. 당신이 가지고 있는 어플리이션을 위의 베타로 돌려봅니다.
  3. 발견된 버그를 bug.adobe.com 에 버그내용을 영어로 올립니다. (회원가입 필요)

사실 어도비 버그 트랙킹 시스템은 추첨에 의한 방식을 채택하고 있으며, 그에따라 우선순위가 부여된다고 합니다. 현재 상황에서 어도비는 10.1에 대한 안정적인 출시가 가장 중요할 것이기 때문에 특별히 버그 내용들을 예의주시 하고 있을 것입니다.

아직 몇주 후 쯤엔 베타3로 진행할 것이며, 2달 내로 RC를 발표한다 하니 시간은 충분하므로 그 사이에 한번 버그 신고해서 한국 개발자 들의 저력을 보여줍시다. 그리고 혹시라도 버그를 올리면 코멘트에다라도 달아서 서로 추천하여 반드시 버그가 처리되게 해 봅시다.

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

댓글을 달아 주세요

서문
지금까지 플렉스는 개발자의 산물이었다고 해도 과언이 아니었다. 아직까지 현존하는 Flex3는 디자이너를 배려한다고 여러가지 연계 플러그인들을 (ex, photoshop, illustrator 용 플러그인) 만들어 배포했었지만, 여전히 빌더로 와서 힘들게 코딩작업을 해야했다. 이것은 HTML이외의 MXML,ActionScript의 새로운 코딩을 배워야 한다는 것을 의미하고 디자이너에게는 엄청난 도전이었다. MXML이야 그럭저럭 쉽게 이해되지만 ActionScript로 스킨을 제작해야 하는 것을 보며 당연히 거의 모든 디자이너가 포기했다. 그냥 CSS로 모든것을 해결하고 고급 스킨제작 및 드로잉은 애석하게도 디자이너가 아닌 프로그래머의 몫이 되었었다. 그래서 프로그래머들은 여러군이 나뉘었었는데, 작게는 Biz 제작 담당, UI 제작담당, Skin 제작담당, 등으로 나뉘어 작업을 하곤 했다.

하지만 Flex4에서는 모든것이 체계가 바뀌었다. 스킨체계가 새롭게 정리되고, 디자이너는 디자인만 신경쓰는 시대가 도래했다. 지금까지 Flex3까지는 프로그램 스킨은 액션스크립트로 작업했지만, 이젠 MXML로 제작이 가능하다. 또한, 이 MXML로 제작하는 것 조차 거의 필요치 않으며, 앞으로 설명할 Flash Catalyst 만 있으면 Catalyst 가 알아서 포토샵, 일러스트레이터 파일을 읽어와 코드를 만들어 준다.

Catalyst 로 플렉스 App 제작개요
Catalyst에서 포토샵이나 일러스트레이터로 제작한 어플리케이션 디자인 파일을 불러오면 포토샵이나 일러스트레이터의 의 각 레이어와 그래픽 엘리먼트를 png파일이나 플렉스 스킨 그래픽으로 변환하고 이에 맞게 플렉스 코드를 제작해준다. 
그리고 각각 원하는 그래픽에 컴포넌트(ex 버튼) 등록을 해주고, 원하는 이벤트와 액션을 입력한다. 또는 그에 반응하여 트랜지션등도 줄 수 있다. 사실 이 정도만 전체적으로 돌아가게만 만들어 놓으면 그다음은 프로그래머의 영역이다.  따라서 여기서는 간단한 따라하기 샘플을 보여주며 이해를 돕겠다.

샘플개요
아래의 프로젝트는 필자가 다니는 교회에서 요청이 들어온 App 디자인이다. 디자인 자체는 웹을 염두해 두고 제작한 것이지만 필자가 Flex4로 쉽게 작업이 가능하겠다 생각하여 제작에 착수하였다. 디자인 샘플 자체가 플렉스에 익숙하지 않은 디자이너가 한 디자인이라 웹페이지의 느낌이 강하지만(예를들어 버튼의 디자인) 이 글을 보는 분들은 어플리케이션의 모습을 갖추도록 디자인 하면 더욱 좋을 것이다.
백문이 불여일견! 앞으로 진행할 샘플의 최종 완성본을 살펴보자. 현재 종료된 이벤트이며 글쓰기 해도 저장이 되지 않는다는 것을 참고할것! (종교적 색채가 강한 사이트의 샘플인데 필자가 제작한 마땅한 샘플이 이것밖에 없으니 양해를 구한다)
포토샵 샘플 다운로드 받기 - (포토샵 소스를 제공해준 사월이야기 님께 감사한다)


진행방식

준비하기
플래시 카탈리스트 다운로드하여 설치한다 (현재 Beta2)

따라하기
카탈리스트를 먼저 시작하면 다음과 같은 안내창이 열린다

여기에서 아래의 PSD파일을 여는 버튼을 클릭한다

열린 창에서 다운로드 받은 샘플파일을 연다

최종으로 파일을 열기 전에 분석 먼저한다.

분석이 끝나면 파일의 정보가 보이고 여기에서는 기본정보만 쓸 것이므로 바로 OK버튼을 클릭한다. 만약 자세한 설정을 하고 싶으면 Advanced를 클릭해서 불러오고 싶은 레이어를 선택해준다.

먼저 포토샵 레이어 구조를 확인한다. 
레이어는 총 4개의 그룹으로 되어있고, 각 레이어 그룹안에는 그래픽 요소들이 존재한다. 

화면에 해당 레이어들이 선택되어 나타난다.

게시글을 설정 했던 모습이 사이즈가 들어가 있지 않은 상태로 나왔다. 아래와 같은 경우 beta1때에는 사이즈 문제가 없었지만 현재의 beta2 에서는 문제가 있는 것으로 나온다. 

아래와 같이 텍스트를 확대하여 적절히 사이즈를 조절 해준다.

이제 Ctrl-Enter나 Command-Enter 를 클릭하여 미리보기로 확인해 본다.
제대로 화면이 나오나 확인했으면 저장한다.

이제 다음장에서는 리스트와 뷰 페이지 구성해 보도록 하겠다.
다음장에서 계속..

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

댓글을 달아 주세요

  1. 지돌스타 2010/02/01 01:35  댓글주소  수정/삭제  댓글쓰기

    멋진 자료 입니다. ^^

  2. BlogIcon 드럼캡 2010/02/02 11:28  댓글주소  수정/삭제  댓글쓰기

    감사합니다. 열심히 2,3부 만들어서 완료해야죠.

  3. early 2010/04/14 15:28  댓글주소  수정/삭제  댓글쓰기

    멋진 강의 입니다 카탈리스트 활용법 배우려고 어도비티비, 랩 열심히 돌아다녔었는데, 이런 친절한 고수분이 계셨네요..유용하게 활용하겠습니다 정말 감사합니다 ^^

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

      뭘요~ 제 주변에 디자이너가 많아서 지인들 도와주려고 하다가 만든 자료입니다. 어렵게 생각하지 마시고 플래시같이 접근하시면 좋을것 같습니다.

  4. 슈퍼시니 2010/05/07 18:22  댓글주소  수정/삭제  댓글쓰기

    감사합니다.
    좀더 심도 있는 강의도 부탁드립니다.^^

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

      네.. 다른 방향으로의 카탈리스트 강의도 생각중입니다. 허나 프로젝트가 진행되야 작업을 할 수 있겠죠 ^^

  5. 신라 2010/05/28 13:49  댓글주소  수정/삭제  댓글쓰기

    카탈리스트가 디자이너를 위한 애플리케이션이란 소릴 듣고 반겨하던 참인데 역시 프로그래밍 기초가 안되어있으면 체계잡기도 버겁군요.. 공부를 많이 해야할것 같네요
    좋은 강좌 감사합니다.

    • BlogIcon 드럼캡 2010/05/31 12:59  댓글주소  수정/삭제

      디자이너 관점에선 프로그래밍 기초 스킬보다는 컴포넌트에 대한 이해와 속성, 스타일들에 대한 공부가 필요하겠죠. 앞으로 도움이 되실만한 카탈리스트 강좌를 준비중입니다. 그러기 위해선 실무 위주로 해야겠기에 프로젝트가 끝나고 좋은 예제로 글을 올릴 예정입니다. ^^