출처 : http://powerfl.com/?p=520

예제로 배우는 Flash catalyst, Flex4 –개론-
 

파워플이 팀 블로그를 시작한다고 했을 때 저는 “바로 이거야” 하면서 너무나 좋아했습니다. 왜냐하면, 외국의 insideRIA 와 같은 플래시에 대한 전문 팀 블로그가, 그것도 우리나라에서 제가 초대멤버로 참여하게 되었으니 말입니다. 해서 저는 조금이나마 플래시 플랫폼의 저변을 조금이라도 넓히는데 공헌을 해야 하겠다고 생각으로  hika님께 플렉스 쿼터도 만들어 달라고 요청해서 플렉스를 맡게 되었습니다.
그런데 막상 플렉스 파트를 맡고 보니까 제가 쓴 글을 볼 대상을 정하기가 참 애매했습니다. 처음에는 플렉스 초,중급 개발자를 대상으로 난이도 있게 진행 하려고 했다가, 시작을 어렵게 가면 안되겠다고 판단하여 쉽게 Flash Catalyst와, Flex4로 만드는 RIA(Rich Internet Application) 예제를 가지고 최대한 재미있게 구성해보려고 합니다.

이 글을 읽는 대상

Html-Javascript를 약간은 볼 줄 아는 디자이너, 초급 Flex 개발자, 그 외 관심 있는 누구나..^^

개인적으로 Head First 시리즈를 좋아하는데요,제가 지식을 전달할 경우 그 책의 설명하는 접근방식이 개인적으로 전달력이 좋았기 때문입니다. 그 중에 질의 응답 및 토론코너를 상당히 좋아했습니다. 그래서 한번 저도 따라 해 봤습니다.

질의 응답 코너

왜 하필 제목을 예제로 배우는 시리즈로 선택하셨나요?

다른 필자 분들께서 모두 고급 주제를 다루시니 제가 누구나 쉽게 따라 할  수 있는 예제들을 가지고, 플렉스의 미래를 보실 수 있기를 희망하면서 이러한 제목을 선택하였습니다. 앞으로 제가 하는 예제로 배우는 시리즈는 최소한 Html,Javascript를 이해 할 수만 있으면 문제 없이 진행하려 합니다. 팀블로그에 독자층이 넓으면 좋은 것이겠죠? 솔직히 관심 좀 끌어보려 했습니다 :-)

Flex 왜 쓰는 겁니까?

플렉스의 초창기 컨셉은 개발자도 만드는 RIA였습니다. 실제로 HTML, JavaScript, CSS와 비슷한 문법을 MXML, ActionScript, CSS 와 같이 지원하므로 폭발같이 개발자들이 늘었습니다. 레이아웃을 잡고 데이터 연결하는 것이 정말 쉬웠거든요. 서버는 Java 그대로 두고 UI만 예쁘게 플렉스로 만들어 주면 사용자들은 (특히 기업고객) 너무 좋아했습니다. 하지만 곧 문제에 봉착하게 되었는데 디자이너들이 같이 흡수되지 못했습니다. 쉽게 말해서 디자이너, 플래셔들이 플렉스를 배우려면 엄청 어려워 했습니다. 왜냐하면 MXML, ActionScript가 아무리 겉 모습이 비슷하더라도 기능이 많이 다르긴 달랐거든요. 사실 많은 수의 디자이너는 HTML도 드림위버가 만들어주는 것을 좋아하지 직접 코드를 보면서 하는걸 좋아하진 않습니다.

Flex? 느려터졌잖아!

굳이 이렇게 질문하시면 부인하지 않겠습니다. 사실이니까요. 현재 FLEX는 버전이 4.5까지 진행되고 있지만 속도문제, SWF 사이즈의 경량화 문제 등은 거의 개선되지 않았다고 봐도 무방합니다. 그게 왜 그럴까요?Adobe에서는 이전 버전의 플렉스와 호환을 이루고 계속 버전 업그레이드를 해 나가길 원했습니다. 그래서 몇 개의 핵심 요소들은 그냥 놔두고 (SystemManager, UIComponent 클래스들 등등)  버전 업그레이드를 진행 했습니다. 어도비는 앞으로도 이것은 계속 바뀌지 않을 것 같습니다만 지금 어도비에서 개발중인 4.5 (Hero) 버전부터는 SDK  자체가 FlashPlayer의 버전과 상당히 의존적이 되어버렸습니다. 얼핏 예상해보기론 플렉스의 성능 향상을 위해 SDK 코드와 플래시 플레이어와의 긴밀한 작업을 하는 걸로 봐선 상당히 희망적이라 생각하고 있습니다. 예전엔 이런 일이 전혀 없었으니까요. 하지만 현재도 약간 느리고 무거운 만큼 편리성, 표준화 라는 장점은 분명히 있습니다.

도대체 Flex에 미래는 있는 겁니까?

이 부분은 저도 잘 모릅니다. 하지만 플렉스는 플래시 플랫폼의 하나의 큰 축인 것은 누구도 부인할 수 없습니다. 플렉스는 작은 어플리케이션부터 큰 대용량 어플리케이션 같은 것을 만들어 내기에 아주 수월합니다. 왜냐하면 아이러니컬 하게도 느리고 무거운 만큼 편리하고 표준화가 잘 되어있기 때문입니다. 게다가 향후 4.5 이후 버전에서는 모바일 개발지원 기능도 들어가 있어서 간단한 화면은 플렉스로 만들면 훨씬 편리하고 쉽게 제작이 가능합니다. 블로깅을 계속 하다 보면 4.5 Hero가 정식으로 릴리즈 될 것이고, 그 때쯤이면 플렉스의 모바일 개발에 관련한 글도 포스팅 할 수 있겠네요 ^^;

저는 디자이너인데 플렉스를 어떻게 배우면 좋을까요?

솔직히 플렉스3까지는 배우기가 너무 힘들었습니다. 플렉스3 까지는 액션스크립트 코딩을 할 줄 모르면 원하는 디자인을 플렉스로 만들어 낼 수가 없었으니까요. 하지만 플렉스4 부터는 다릅니다. Flash Catalyst가 플렉스의 디자인이 포토샵, 일러스트레이터와 완벽 호환됩니다. 특히 일러스트레이터로 디자인 하시면 벡터 정보 전체가 보기쉽게 MXML로 저장이 되므로 매우 편리하게 작업하실 수 있습니다. 또한 Catalyst에서는 PSD나 AI로 제작한 디자인에 버튼, 텍스트, 리스트 등의 기능을 부여할 수 있으며, 마우스 인터랙션, State 편집, 이펙트 타임라인 편집 등을 쉽게 할 수 있어서 PSD나 AI 파일만 잘 구성이 되어있다면 누구나 빠른시간에 RIA를 만들어 내실 수 있습니다.

저는 초급 개발자(Java, Actionscript)인데 플렉스를 어떻게 배우면 좋을까요?

플렉스 개발자의 종류는 다양합니다. 개발자의 종류가 다양한 만큼 배울 것과 공부할 것이 많고 다양하며, 한 사람이 모든 영역을 깊이 있게 공부하지는 못합니다. 제가 생
각해 봤을 때 플렉스 개발자 종류는 아키텍트, 스킨-인터랙션 디자이너(개발자와 디자이너의 경계 영역의 사람), 서비스 개발자, 컴포넌트 개발자, 플랫폼 개발자 등등으로 나뉜다고 볼 수 있을 것 같습니다. 현재 대다수의 개발자가 서비스, 컴포넌트 개발자에 포진되어 있구요. 많다라는 것은 수요에 반증하는 결과이겠지만 나머지 부류의 개발자가 결코 무시되는 사람들이 아니라 오히려 많지 않기 때문에 진입장벽도 높고 연봉도 높습니다. 우선 자기가 어느 부류에 두각을 나타낼 수 있는 사람인지 판단하는 것이 먼저일 것 같구요. 이것이 힘들면 플렉스 멘토의 도움을 받아보시는 것도 좋겠습니다.

그럼 대체 필자 당신은 어느 부류의 개발자인가요?

사실 저는 디자이너로 일을 시작했고, php, java개발, 서비스기획, 플래시 콘텐츠 개발, 소프트웨어 설계, QA 등을 두루두루 경험해온 경력 덕분에 플렉스라는 기술을 처음 봤을 때 바로 이것이 제가 해야 할 일이라 생각했고, 모든 역량을 총 동원하여 이제는 위에서 말씀 드린 개발자 부류를 골고루 경험해 보았으며, 현재는 아키텍트에 더 가깝습니다. 한마디로 관심이 가고 좋아하는 것들을 하다 보니 어느새 여기까지 왔다는…

그럼 이제 본격적으로 시작해 주세요.

네!! 안 그래도 그럴 참이었답니다. ^^; 질의 응답은 이제 여기까지 하고요..

준비물

제가 앞으로 진행 하려는 RIA 개발에는 두 개의 툴이 필요합니다.
하나는 Flash Catalyst 이구요. 또 하나는 Flash Builder 입니다. 앞으로 예제로 배우는 시리즈의 포스팅이 진행 될 동안 이 두 툴이 모두 설치되어 있어야 하며, 현재 CS5 패키지에 포함되어 있거나 Adobe 공식 다운로드 사이트에서 배포하는 버전을 쓰시는 것이 아니라,  현재 (2011년 2월 기준) Adobe에서 Preview 버전으로 내놓은 Flash Catalyst Panini 와 Flash Builder Buritto 를 http://labs.adobe.com 사이트에서 다운받아 설치하셔야 합니다. 사실 이런 지식을 공유 하는 포스팅에서는 베타나 프리뷰 버전의 툴 사용을 자제해야 함에도 불구하고 굳이 제가 설치하시길 권장 하는 것은 두 툴이 CS5 버전과 기능과 UI가 눈에 띄게 확 달라진 것은 아니라, 오히려 CS5 에서 개선되어야 하는 가장 중요한 기능인 RoundTrip 기능이 보강 되었고 Flex Hero가 올라가 있기 때문입니다. 한 마디로 디자이너가 작업한 Catalyst 작업물을 개발자가 Flash Builder에서 고치면 예전엔 다시 Catalyst로 불러오지 못했지만 이제는 이게 가능해 졌습니다.

Flash Catalyst Panini 다운로드 (Adobe 계정 필요합니다. 없다면 만드세요)
Flash Builder Buritto 다운로드 (Adobe 계정 필요합니다. 없다면 만드세요)

이 두 개의 툴은 기존 CS5의 시리얼을 입력해 주면 기간제한이 없이 사용가능 하며, 공부하는 학생은 데모로 설치하시기 바랍니다.

오늘의 주 내용은 설치로 끝~~~ 헐… 뭐냐? -_-;

다음에는…

이제 다음 포스팅에 게재할 예제를 소개합니다.


http://tutsarena.com/2009/06/create-a-stylish-portfolio-layout/
포토샵 강의로 진행되고 있는 내용 중 포트폴리오 사이트 샘플을 가져와 봤습니다. 제 철학은 “예제는 최대한 실전과 비슷하게”라서 충분히 응용하실 만한 샘플을 가져와 봤는데 마음에 드시나요?

여기서 우리는 PowerFL 메인에 보이는 것과 같은 슬라이더를 Catalyst 만으로 구현해볼 생각입니다. 사실 슬라이더 같은 간단한 것은 플래시로 구현하는 것이 더 좋습니다만, Catalyst로 디자이너도 정말 쉽고 빠르게 구현하실 수 있습니다. 다만 위의 예제에 대한 라이센스 명시가 없기 때문에 다음 포스팅때 비슷한 다른 예제로 바뀔 가능성은 있습니다.


http://www.bevelandemboss.net/website-template-herbal-treats

위의 디자인은 열심히 검색신공을 펼쳐본 결과 무료로 완전 Free하게 사용가능하며 RIA를 구현할 좋은 샘플이라 생각해서 골라봤습니다. 실제로 언제 하게될지는 반응을 지켜 보면서 다양하게 진행해 보도록 하겠습니다.

당부합니다!

제가 당분간 예제로 배우는 시리즈를 시작할 예정인데 혹시라도 직접 제작하신 PSD,AI를 무료 제공해 주실 분이나, RIA로 꼭 구현해보고 싶으신 좋은 예제 사이트가 있으시면 댓글로 알려주시기 바랍니다. 반응을 봐서 꼭 수용해보도록 하겠습니다.
그리고 지인 디자이너에게 한번 읽게 해봤는데 이해가 안되는 것이 없다고는 했습니다. 혹시라도 이 글을 읽는 디자이너 분께서 이해가 안되는 부분이 있다면 마찬가지로 글을 올려주시면 참고하여 글을 적어보도록 하겠습니다.


 

예제로 배우는 FLASH CATALYST, FLEX4 – Slider

이번 포스팅의 목표 및 결과물

지난 포스팅에서 예고로 보여드렸던 예제를 제가 이미지만 딸랑 보여드리고 말았는데. 오늘 저와 같이 만들어 볼 샘플은 다음과 같습니다

다들 느끼시겠지만 액션스크립트를 하시는 분 에게는 매우 일반적인 기능 이라할 수 있습니다. 구현하기도 너무 쉬워서 뭐라드릴 말씀이 없습니다만, 디자이너는 약간다르죠. 화면 인터랙션에 대한 아이디어는 있겠지만 기능을 붙이는 것은 좀 막연할 것입니다.

먼저 위와같은 예제를 만들기 위해선 꼭 알아야 할 것이 두가지 있습니다.

  1. 버튼 제작
    버튼은 모든 컨트롤(또는 컴포넌트)의 기본입니다. 한마디로 사용자 인터랙션을 유발하는 기본 출발점이 되기도 하죠. 디자인 할때 이 버튼을 얼마나 예쁘게, 요즘 디자인 트렌드에 맞추어서 디자인 하는가가 중요하다고 할 수 있습니다. 이 예제에서 쓰이는 버튼은 좌우 슬라이드를 컨트롤하는 버튼과, 메뉴에 쓰이는 버튼이 있겠습니다.
  2. 리스트 제작
    리스트는 보통 반복되는 게시판, 트위터 같은 컨텐츠를 담아서 보여주는데 쓰이는 용도로 쓰이는 것이라 할 수 있습니다. 이런 것을 플렉스에서는 컨테이너(container)라고 합니다. 플렉스에는 실제 다양한 컨테이너가 있는데 이는 예제를 진행하면서 차차 다루겠습니다.
    그리고 리스트를 다루다보면 당연히 스크롤바에 대해 다뤄야 합니다. 스크롤 바도 물론 아주 쉽게 디자인 된 것을 붙일수 있지만 이번 예제에선 스크롤바가 나오는 것이 없기 때문에 다루지 않고 화면의 기능 구현에만 집중하겠습니다

1. 디자인 포토샵파일 다운로드

먼저 작업할 포토샵 파일을 아래 링크에서 다운로드 받습니다.

http://tutsarena.com/2009/06/create-a-stylish-portfolio-layout/

난감한 일이 발생 했는데요. 글을 쓴 시점은 2주 전인데, 올리기 전인 오늘 확인해 보니 해당 사이트가 죽었네요. 포토샵 파일의 라이센스는 튜토리얼 사이트라서 자유로운 사용이나 배포처는 반드시 해당 사이트여야 합니다. 따라서 지금은 해당 튜토리얼 사이트가 다시 살아나기 전 까지만 파워플에 링크를 걸겠습니다
임시 PSD 다운로드

그리고 포토샵에서 해당 파일을 열어봅니다. 다들 작업하시는 방식대로 엄청난 레이어로 디자인이 되어 있습니다. 이대로 카탈리스트에서 불러와 작업해도 되지만 플래시 작업을 떠올려 보시면 필요한 이미지는 자르고 심볼로 불러와서 작업하셨던 것 처럼 카탈리스트도 약간의 레이어 정리작업을 해 주는 것이 작업하기에 편리합니다. 그럼 먼저 레이어를 정리해 보도록 하겠습니다.

2. 레이어 정리

  1. 먼저 Menu라는 레이어폴더를 하나 새로 만듭니다. 그리고 Typo 폴더에 들어가면 이 디자인에 쓰인 텍스트레이어들이 모여있는데, 여기서 메뉴인 Home,Blog,Servie,Contact를 Menu 폴더로 이동시킵니다. 그리고, 하단의 부근의 Nav Rollover 레이어도 Menu 폴더로 이동시킵니다.
  2. 이제 슬라이더 차례입니다. 다행이 슬라이더의 레이어는 jQuery라는 폴더에 정리가 잘 되어있습니다. 따라서 슬라이더는 별도의 작업이 필요 없습니다.
  3. 이제 나머지 레이어들을 모두 병합해 버리겠습니다. 현재 작업한 레이어 폴더의 visible 버튼을 눌러 안 보이게 하고 레이어에서 마우스 우클릭 – merge visible 을 클릭하여 나머지 레이어를 병합합니다. 아래는 최종 레이어 구조입니다.

거듭 말씀 드리자면 레이어 작업은 카탈리스트에서 작업을 편리하게 하기위함일 뿐이니 복잡함을 감수하고 작업하실분은 그냥 작업하셔도 무방합니다. 하지만 안그래도 복잡한데 깔끔하게 정리한 후에 디자이너와 프로그래머가 의사소통하는것이 훨씬 낫겠죠?

3. 상태(state) 디자인 구상

플렉스4에서는 화면의 요소별로 마우스의 이벤트에 의한 반응이나 데이터에 따라 달리나오는 화면을 상태(state)로 설정할 수 있습니다. Flash Catalyst에서 이러한 상태 디자인을 구성할 때 필요한 화면을 우리는 미리 구상해 둬야 하겠죠?

  1. 버튼 디자인
    이제 버튼의 일종인 메뉴를 보통일때, 마우스 오버, 다운 상태일 때의 디자인을 다음과 같이 할 것입니다.

    이제 또다른 버튼인 슬라이더 좌 우 버튼은 마우스 오버일 때 다음과 같이 회전을 시킬것입니다. 다음과 같이 맞춰줍니다. 이제 버튼관련 디자인은 모두 끝났습니다.
  2. 리스트 디자인
    이제 센터의 슬라이더를 디자인 해야 합니다. 슬라이더는 데이터로 인한 이미지와 텍스트의 반복이므로 데이터 리스트로 설정하여 기능을 넣을 수 있습니다. 우리는 다음과 같이 이미지, 이미지 제목 텍스트, 상세 텍스트를 데이터 리스트의 항목으로 넣을 것입니다.

4. 슬라이더 관련 데이터 다운로드

슬라이더에서 쓰일 추가 이미지 및 데이터를 다운로드 합니다. 다운로드 하시면 적절한 기억하기 쉬운곳에 압축을 풀어 놓습니다. 다음 단계에서 이를 불러 올 것입니다

슬라이더 데이터 다운로드

5. Flash Catalyst 작업 동영상

카탈리스트 작업은 Step by Step 으로 이미지로 캡쳐하기에는 분량이 너무 많으므로 동영상으로 준비했습니다. 아래 동영상을 재생하여 따라하시기 바랍니다.

6. Flash Builder 작업

위에서 기본적인 state(상태) 디자인과 효과등을 설정 했다면 이제 슬라이드를 구현할 차레입니다. 이 부분은 코딩을 최소화 하기 위하여 다음과 같은 소스 파일을 다운로드 받아 주시기 바랍니다.

라이브러리 소스 다운로드

Flash Builder 작업은 대부분 개발자가 하지만 디자이너도 할 수 있도록 쉽게 구성했습니다. 또한 이 역시 작업 분량이 상당히 되고 초보자들의 접근성을 고려하여 동영상으로 준비했습니다.

숙제

숙제라고 말하니 거창하지만, 여기에는 아직 자동 슬라이딩 기능이 빠져 있습니다.

  1. 자동 슬라이딩도 한번 넣어보시고
  2. 다양한 디자인 템플릿으로 테스트를 해보시면서
  3. 완성품을 아래의 댓글로 링크를 올려주시면

서로서로에게 도움이 될 것 같습니다.

당부의글

향후 예제의 방향 설정도 댓글로 이루어지길 희망해 봅니다.
아직 인터랙션 디자이너가 이 사이트를 보지 않아서 걱정이긴 합니다만..그래도 앞으로 생길것을 기대하며 작성해 보았습니다.
다양한 하고싶은 예제의 건의, 방향, 샘플제공등이 댓글로 커뮤니케이션 되면 좋겠습니다.

그럼 4주간 열공 하세요~ 

 

예제로 배우는 FLASH CATALYST, FLEX4 – Widget part 1

이번 포스팅의 목표 및 결과물

이번에는 좀 흥미로운 주제를 가지고 접근해 보겠습니다.
이번엔 카탈리스트와 플렉스로 제작할 수 있는 여러가지 멋진 예제 중에서 소셜위젯을 하나 만들어 보도록 하겠습니다. 소셜위젯이라고 거창하게 제목을 붙여보니 여러 소셜서비스와 연결해 놓고 한눈에 볼 수 있을 것 같은데 불가능한건 아닙니다만, 이 강의의 주제를 벗어나는 포스팅이 될 것이므로 서비스에 사용자 인증이 없이도 간단히 글을 조회해 올 수 있는 소셜 서비스인 트위터, 미투데이를 기준으로 위젯을 만들어 보겠습니다. 먼저 완성된 화면 동영상을 보실까요?

사실 이와 비슷한 트위터 검색 만들기 카탈리스트, 플렉스 강좌는 인터넷에 널렸는데요. (ex: gotoandlearn.com) 그럼에도 불구하고 제가 굳이 진행하는 이유는, 첫째로 그 동영상들이 영어로 되어있어서 많은 분들이 접하기 어려웠을 것이고, 영어를 안다고 해도 이해가 잘 안됐을 것입니다. 둘째로 이 예제만큼 다양한 플렉스 카탈리스트 기능을 쓰는 예제가 없기에 학습을 위해서라도 이번 단계를 꼭 거쳐가려합니다.

여러분은 이번 예제를 따라해 보심으로써 여러 기능을 익히게 되는데 그 중 가장 중요한 4가지를 말씀드리겠습니다.

  1. 스테이트(상태) 제작
    제작하는 화면부터해서 그 안에 들어가는 모든 컨트롤들은 다 스테이트가 있습니다. 카탈리스트에선 이해하기 편하라구 Page라 표현 하기도 하는데요. 쉽게말해 버튼의 경우를 생각해 보면 평상시의 상태,마우스 오버시의 상태, 마우스 다운시의 상태, 사용불가일때의 상태등의 디자인이 다 다른 것을 알수 있습니다. 우리는 지난 Slider 편에서 그러한 작업을 약간 맛보았습니다. 하지만 이미 정의되어있는 스테이트의 디자인을 바꾸는 정조였다면 이번에는 스테이트를 만들고 이름을 짓고, 마찬가지로 디자인을 할 수 있습니다.
  2. 이펙트 제작
    카탈리스트를 이용하는 중요한 기능이 되겠는데요. 바로 이펙트입니다. 플래시와는 달리 플렉스는 타임라인이 없습니다. 하지만 카탈리스트에는 하단에 이펙트 타임라인이라는 것이 존재합니다. 이 타임라인은 플래시처럼 그냥 언제나 프레임기반으로 애니메이션 되는 것이 아니라 위에서 언급한 스테이트의 트랜지션(전환) 때에만 트윈 이펙트들을 지원합니다. 예를들면, 버튼에 마우스 오버 했을때 (버튼의 상태가 UP->MouseOver로 상태가 바뀌게 되겠죠) 버튼이 휙 돌아가는 3d 이펙트를 주고 싶다면 해당 스테이트 변경에 대한 이펙트를 찾아 플래시같이 타임라인 컨트롤 하듯이 적용하기만 하면 됩니다. 이건 설명을 정말 자세히 해도 잘 못알아 들으실 것입니다. 그냥 나중에 제가 따로 보여드리는 동영상을 보시면 아하 하고 이해되실 것입니다.
  3. TextInput 제작
    폼 컨트롤 중 버튼과 Textinput은 가장 중요한 컨트롤 중 하나이죠? TextInput의 디자인은 보통 매우 제한되어 있는 디자인이 많이 있었습니다. 하지만 Flash Catalyst는 이러한 TextInput도 모두 디자인에 기능을 입혀줍니다. 포토샵에서 그린 멋진 비트맵 사각형이든지, 일러스트레이터에서 그린 예쁜 벡터 사각형이든지 가리지 않고 사용자가 원하면 바로 TextInput 컨트롤로 바로 변환시켜 줍니다. 단, 삼각형, 원 같은 디자인은 피해주시는게 정신건강에 이롭겠죠?
  4. ScrollBar 제작
    드디어 스크롤바를 마음대로 디자인 할 수 있게되었습니다. 그것도 클릭 몇번에 말이죠. 클릭 몇번만에 스크롤바의 기능을 붙일 수 있다니.. 놀랍지 않으세요? 아래에 진행되는 동영상을 보시면 무릎을 치실겁니다. ^^

2. 디자인 소스 다운로드

첨부된 디자인 소스를 다운로드 받습니다.
twittertrends_theme1.psd 소스 다운로드

3. 상태(state)별 디자인 구상

위의 이미지를 보시면 아시겠지만 두가지의 디자인 템플릿이 존재합니다.
이번주는 이중 왼쪽의 디자인 샘플을 가지고 진행할 것이며, 다음주는 다른 템플릿도 입히면서 디자인 테마변경 기능을 넣어보도록 하겠습니다.

4. Flash Catalyst 작업 동영상

카탈리스트 작업은 Step by Step 으로 이미지로 캡쳐하기에는 분량이 너무 많으므로 동영상으로 준비했습니다. 아래 동영상을 재생하여 따라하시기 바랍니다

6. Flash Builder 작업

위에서 기본적인 state(상태) 디자인과 효과등을 설정 했다면 이제 위젯에 실제 소셜 서비스를 구현할 차례입니다.
우리는 대표적인 소셜서비스인 트위터를 연결해 보겠습니다. 트위터의 조회 관련 서비스 url은 다음과 같습니다.

http://search.twitter.com/search.json

Flash Builder 작업은 대부분 개발자가 하지만 디자이너도 할 수 있도록 쉽게 구성했습니다. 특히 Flash Builder 의 데이터위자드를 사용하여 제작하였습니다. 사실 대부분의 플렉서, 액션스크립터들은 그냥 코딩하는것이 편하겠지만 위자드는 단번에 클릭 몇번으로 서비스를 만들어 주니 매우 편리한 기능 중 하나입니다. 또한 이 역시 작업 분량이 상당히 되고 초보자들의 접근성을 고려하여 동영상으로 준비했습니다.

숙제

아무래도 유튜브에도 올리고 해야해서 서비스는 트위터로 만들었지만 미투데이도 금새 만드실 수 있습니다. 한번 만들어 보세요.
이와 비슷한 다른 형태의 위젯도 한번 생각해 보시고 직접 디자인 해 구현해 보세요.

마무리

이로써 위젯을 다루었네요. 카탈리스트의 기능 공부에 중점을 조금씩 두다보니 다양한 기능을 고루 익힐 수 있는 예제를 고르고 있습니다. 향후에는 여러분이 기능을 다 익혀갈 적절한 시기에 멋진 Rich Internet Site의 UI를 같이 만들어 보겠습니다.



예제로 배우는 FLASH CATALYST, FLEX4 – Widget part2
 

 

이번 포스팅의 목표 및 결과물

지난 Social Widget part1에서 많은 부분을 다루었습니다. 하지만 영상에 목소리가 나오지 않아 이해 하시는데 적잖이 어려우셨을 것 같은데 괜찮으셨는지요? 원래 목소리 없이 영상제작을 하려했는데 많은 분들이 목소리를 넣어야 겠다는 말씀들을 하셔서 이번부터는 영상에 제 목소리가 들어갑니다. 기쁘시죠? (웬지 강요같네요 ㅎㅎ) 제가 녹화하고 모니터링 쭉 해봤는데, 제 목소리의 톤이 매우 졸립네요 -_-;;; 따라서 주무시기 전에 틀어놓고 주무셔도 상관없겠습니다.

사실 Social Widget part1에서 필요한 기능은 거의 다루었습니다. 몇가지 디테일하게 잡을데가 있지만, 공부용으로 이만큼이면 됐다 싶었는데, 기획단계에서 여기에 테마라는 컨셉을 하나 더 추가했습니다. 그렇게 결정하고 보니 도저히 하나로 끝을 낼 수가 없겠더군요. 원래 한 회당 한 예제만을 다루려 했으나 불가피하게 두개로 쪼개게 되었었습니다. 어쨌든, 이번 회의 주제는 테마기능입니다. 컨셉은 맥의 위젯 컨셉을 가져 왔으며, 이 강의를 보시게 되면 다양한 방법으로 응용이 가능하게 될겁니다.

먼저 결과 동영상을 보실까요?

이젠 카탈리스트가 등장한 이상 툴 자체에서 이미 최상의 결과를 보여주기 때문에, 멋진 Rich Interface를 구현하는 것에 이젠 인터랙티브 디자이너, 개발자 여러분에게 필요한건 기술보다 아이디어라 생각합니다. 저는 이번 위젯을 구상함에 있어서 강좌용으로 흉내내기 수준에 그쳤다면, 여러분은 더욱 창조적인 결과물을 만들어 내실 수 있으리라 생각합니다.

여러분은 이번 예제를 따라해 보심으로써 다음의 2가지 기능을 익히시게 됩니다.

  1. State의 다양한 응용(Theme 제작)
    State는 지난 Widget Part1 포스팅때 언급하였고, 실제 이를 이용해 제작해 보았습니다. 그리고 State는 아이디어를 생각해보면 볼 수록 다양한 가능성을 볼 수 있을 것입니다. 우리는 여기서 State를 사용하여 또다른 테마를 제작해 볼 것입니다. 테마를 제작하는 것은 여러가지 방법이 있지만 이 방법이 디자이너, 개발자 모두가 아주 쉽고 편하게 구현할 수 있기 때문에 이러한 방법을 선택했습니다.
  2. Rotate3D 이펙트 제작
    Flex4는 Flash Player10 이후 버전을 타겟으로 제작되었습니다. Flash Player 10 부터 Adobe는 본격적으로 3D를 지원하기 시작했는데요. Flex4는 관련된 중요한 기술들이 녹아들어가 있고, 그 중 대표적인 이펙트가 Rotate3D 입니다. 우리는 위젯의 테마를 지정하는 뒷면으로 돌릴 때 Rotate3D 이펙트를 이용하여 뒷면으로 돌릴 것입니다.

디자인 소스 다운로드

첨부된 디자인 소스를 다운로드 받습니다.
디자인 소스 다운로드

상태(state)별 디자인 구상


지난번의 디자인에 비해 살짝 바뀌었습니다. 이제 두 테마의 디자인이 비슷하죠?
테마를 선택하는 뒷면 디자인은 여기에 있지 않지만 위에 첨부한 PSD에 존재합니다.

Flash Catalyst 작업 동영상

카탈리스트 작업은 Step by Step 으로 이미지로 캡쳐하기에는 분량이 너무 많으므로 동영상으로 준비했습니다. 아래 동영상을 재생하여 따라하시기 바랍니다

Flash Builder 작업

Flash Builder 작업은 대부분 개발자가 하지만 디자이너도 할 수 있도록 쉽게 구성했습니다. 또한 이 역시 작업 분량이 상당히 되고 초보자들의 접근성을 고려하여 동영상으로 준비했습니다.

위의 작업과 관련된 코드작업을 아래에 정리해 놓았습니다.
코딩을 따라하기 힘든 분은 동영상 보시면서 아래의 소스를 복사&붙여넣기 하시면서 작업하시기 바랍니다.

– Main

1 [Bindable]
2 privatevar widgetTheme:String;
3  
4 <s:RadioButtonGroup id="themeGroup" selectedValue="{widgetTheme}"itemClick="themeGroup_itemClickHandler(event)" />
5  
6 protected function themeGroup_itemClickHandler(event:ItemClickEvent):void
7 {
8      widgetTheme = themeGroup.selectedValue.toString();
9 }

– Back

1 <s:RadioButtonGroup id="themeGroup" />
2  value="skyblue" group="{themeGroup}"/>
3  value="gray" group="{themeGroup}"/>
4  
5 protected function button_clickHandler():void
6 {
7      mx.core.FlexGlobals.topLevelApplication.currentState = themeGroup.selectedValue.toString();
8 }

– Skyblue

1 [Bindable]
2 public var dataAC:IList;
3  
4 <s:List x="9" y="64" skinClass="components.DataListSkin1"
5 useVirtualLayout="false"
6 dataProvider="{dataAC}"
7 >
8  
9 protected function button2_clickHandler():void
10 {
11      mx.core.FlexGlobals.topLevelApplication.twitService(textinput1.text);
12 }

– Gray

1 source="{data.profile_image_url}"
2 width="30" height="30"
3 text="{data.text}"
4 text="{data.from_user}"

숙제

테마를 하나 더 늘려서 한번 작업해 보세요.

마무리

이 예제에서는 사실 치명적인 결함이 있습니다.
바로 불필요한 state를 두개 더 만들었다는 것입니다. 그래서 조회 버튼을 누르면 화면에는 보이지 않지만 다른 state의 결과화면에도 데이터가 뿌려지게 됩니다. 쉽게 하려다보니 이렇게 했는데, 사실 이런식으로 작업하면 안됩니다. 따러서 state는 opened와 closed 두개만 존재하면 됩니다. 시간이 되시는 분은 Flex4의 동적 Skin 변경에 대한 글을 읽어보시면 실마리를 찾으실 수 있을 것입니다.

출처 : http://ni6htmare.tistory.com/58

안녕하세요

이번 Flash Catalyst와 Flash Builder4 beta2 버전을 활용하여 Catalyst와 Flash Builder4의 협업에 대한 이해를 돕기 위해 이번 튜토리얼을 포스팅하게 되었습니다.

PART.1은 카탈리스트에 대해 이해하는 시간을 PART.2에서는 플래시 빌더와의 협업에 대해 진행하도록 하겠습니다.




PART.1의 목표는 일러스트&포토샵으로 디자인된 환경에서 카탈리스트를 통해 기능을 삽입해보도록 하겠습니다.

결과적으로 스크롤바, 데이터리스트, 이벤트, 이펙트에 대해 다룰것입니다.

우선 튜토리얼을 따라가기 위해서는 일러스트나 포토샵으로 디자인된 레이아웃이 필요합니다.



본인이 직접 제작한 레이아웃을 준비하셔도 좋지만 진행을 따라가기 위해서는 소스를 참고하세요^^



일러스트에서 불러온 레이아웃입니다. 검색을 하기 위한 검색부분과 스크롤바 부분 내용 컨텐츠 부분으로 구성되있습니다.



 이제 카탈리스트를 열어주세요


보는바와 같이 Illustrator, Phoroshop, FXG 파일을 불러와 이용할 수 있습니다.
우리는 일러스트를 이용하여 디자인 하였음으로 From Adobe Illustrator AI File을 선택하여 해당 파일을 불러오도록 하겠습니다.


최적화를 위한 창이 뜨는군요.
그냥 ok눌러주심 됩니다^^


플래시와 비슷한 플래시 카탈리스트의 화면을 볼 수 있다.


스크롤바에 해당하는 부분을 선택해 줍니다.


Convert Artwork to Component항목에서 Vertical Scrollbar를 선택합니다.


Edit Part를 선택합니다.


스크롤바의 bar 부분을 클릭한 후 Convert to Vertical Scrollbar Part에서 Thumb 항목을 선택합니다.


같은 방법으로 스크롤바의 배경 부분을 선택 후 Track를 선택하세요


Twitsearch 항목으로 되돌아 가보겠습니다.



컨텐츠 영역에 들어갈 세 부분을 선택해 줍니다. Shift 버튼을 누른후 세 부분을 클릭하면 됩니다.


컨트롤+G 버튼을 이용해 그룹을 지정해 줍니다.


방금 만든 컨트롤 그룹과 스크롤바 영역을 선택 후 Data List 항목을 선택해 줍니다.


Edit Parts항목을 들어갑니다.


컨텐츠로 들어갈 영역을 선택 후 Repeated Item 항목을 선택합니다.


DEGINE-TIME DATA를 통해 파싱해오는 데이터를 확인&변경 할 수 있습니다.


아이템 배열간 폭을 늘려보도록 하겠습니다.



컨트롤 + 엔터를 눌러 지금 까지 만든 프로젝트를 RUN 시켜보도록 하죠



자 이제 기본적인 스크롤바 속성은 다 만들어졌습니다.

하지만 보금 심심해보이지않나요 ?

스크롤바와 데이터리스트 항목의 속성을 변경해 봅시다.

카탈리스트 화면으로 돌아가 데이터아이템 리스트에서 항목을 더블클릭하세요.




RepeatedItem1 에 들어오신 것이 보이시나요?

Selected 페이지를 선택해보세요



해당 페이지에서는 마우스 Over와 Selected 이벤트에 반응하여 동작하며, 손쉽게 편집이 가능합니다.

자 이제 Selected 항목을 선택 후 색상을 변경해 보도록 하겠습니다.



컨트롤 + 엔터를 눌러 RUN 시켜보죠


아이템을 선택하면 우리가 바꾼 색상으로 변경된 것을 확인할 수 있습니다.

자 이제 우리가 만든 스크롤바가 있는 데이터리스트에 검색 기능을 추가해 봅시다.



twitSearch 스테이트로 이동합니다.


우리가 검색 버튼으로 지정할 버튼 아이템을 선택 후 Button으로 지정해 줍니다.

이제 컴포넌트 속성을 지정하는 일은 껌이겠죠?^^


이제 같은 방법으로 검색어를 입력할 인풋창을 선택 후 TextInput 으로 지정해줍니다.

컨트롤+엔터를 눌러 RUN 시켜 볼까요?

이제 그냥 그림에 불과했던 부분이 텍스트 입력도 가능해졌고 버튼 클릭도 가능하게 되었습니다.


그럼 이제 조금 더 재미있는 기능을 추가해 볼까요?

page1의 이름을 더블클릭하여 변경모드로 바꾼 후 open으로 지정해줍니다.


Duplicate State 버튼을 눌러 같은 내용의 스테이트를 하나 더 추가한 후 같은 방법으로 이름을 closed로 변경합니다.

closed State를 선택한 후 검색창과 Search 버튼을 없애보도록 하겠습니다.
해당 내용을 없애려면 간단히 레이어에서 활성화 버튼만 체크해제 하면 됩니다 ^^




참 쉽죠잉?
그다음 맨 위의 검은색 타이틀 부분을 선택 후 버튼속성을 지정해 줍니다.


이제 타이틀 부분과 바로 밑에 직사각형을 쉬프트버튼을 눌러 한번에 선택 한 후 밑으로 내려보겠습니다.



이런 Rectangle 레이어가 컨텐츠 부분의 Rectangle을 덮어버렸군요
어떻게하면 될까요 ?
컨텐츠 부분의 Rectangle 레이어를 위로 올려주면 되겠죠?^^





자 이제 말끔히 해결됐습니다.
이제 open state와 closed state를 선택해가며 차이점을 살펴볼까요?





그렇습니다.
이미 눈치 채셨겠지만 타이틀을 클릭하면 검색창이 생겼다 안생겼다 하는 기능을 만들기 위해 우리가 지금 이 노력을 하고있는 것이지요^^
다시 closed state를 선택 후 버튼으로 만들었던 항목을 선택 후 
INTERACTIONS창에서 Add Interaction을 선택합니다.




해당 속성을
On Clicn, Play Transition to State, open, closed로 선택후 ok버튼을 눌러줍니다.
이제 closed State에서 타이틀 Button을 선택하게 되면 해당 State가 open으로 변경됩니다.
이제 같은 방법으로 open State에서 closed 스테이트로 변경되는 이벤트를 만들어야겠죠?
open State를 선택 후
On Clicn, Play Transition to State, closed, open으로 선택후 ok버튼을 눌러줍니다.


이제 RUN시켜봅시다.


타이틀을 클릭해볼까요?^^
사라졌다 생겼다 하는 것이 보이실 겁니다.
이제 카탈리스트에서 손쉽게 버튼에 이벤트를 만들어 보았습니다.

하지만 뭔가 또 아쉽죠?

보다 재밌는 스테이트 변경을 위해서 간단한 이펙트를 넣어 보겠습니다.

타임라인에서 스테이트를 선택 후 해당 컴포넌트 별로 타임라인의 값을 조절해 보세요
자신이 원하는 값에 따라 다양한 이펙트가 가능합니다.



RUN을 한 후 타이틀 버튼을 클릭해보시면 이펙트가 들어간 것을 확인할 수 있습니다.


지금까지 스크롤바, 테이터리스트, 버튼속성을 이용한 스테이트 이동 및 클릭 이벤트에 대해서 만들어보았습니다.

하지만, 실제로 카탈리스트에서 이러한 작업들은 플렉스와 플래시를 이용하여서 모두 가능했던작업인데요. 

플렉스의 장점과 플래시의 부가적인 기능을 활용할 수 있다는 점이 카탈리스트의 
장점인 것 같습니다.

Flash Catalyst와 FLash Builder4 활용 PART.1 편은 이것으로 마치기로 하고,

Flash Catalyst와 FLash Builder4 활용 PART.2 편을 기대해 주세요. PART.2에서는 카탈리스트에서 작업한 결과물을 FLEX에서 활용하여 진행됩니다 .


원본 동영상 강의 : 
http://www.gotoandlearn.com/play?id=110

출처 : http://blog.naver.com/adobe_korea/100131060434


Flash Builder 4.5
 Flash Catalyst 5.5를 활용한

현실적인 RIA 개발 워크플로우를 찾아라!

  

 

윤도선 (drumcap@gmail.com)

Adobe Flex Developer / 감성 테크놀로지 차장

PowerFL 팀 블로그 멤버 

시작하세요 액션스크립트 3.0 애니메이션 (모션의 원리와 고급 액션까지) 역자

 

들어가며

Flash Builder가 각각 4.0에서 4.5, Flash Catalyst 5.0에서 5.5로 업그레이드 되었다이 업그레이드의 중심에는 Flex 4 SDK가 있는데, Flex 4 SDK가 정식 출시된 이후 1년이 조금 넘은 이 시점에 정식 출시된 Flex 4.5 SDK모바일 개발 지원 이라는 강력한 기능을 중심으로 'Hero’라는 이름과 함께 야심차게 출시 되었다.

해외와 달리 국내에는 아직 Spark Component(Flex 4)를 제대로 사용하지 않고 있는 실정이다있다 하더라도 회사가 만들어 놓은 MX Component(Flex 3) Flex 4 환경에서 돌아가도록 만드는 수준이며완전한 Spark Architecture로의 개발은 대부분의 회사가 이제야 완성 중에 있거나이제 시작하는 수준일 것이다.

이유는 여러 가지가 있을 것인데 예를 들면회사의 기술적 문제, Component 개발할 인력 부족변경된 Spark Skin 디자인 적용 문제 등은 회사의 비용과 직결되고당장의 프로젝트를 진행하는데는 기존 Flex 3 환경으로 진행하거나, MX ComponentFlex 4에서 보여주는 식으로만 해도 전혀 문제가 되지 않았기 때문이다.

하지만 상황은 급격히 바뀌어서 이제 모바일이 이슈가 되고 Flex 진영에서 모바일을 지원하기로 결정한 순간 그 중심엔 MX는 없어지고 Spark Component만이 있게 되었다실제로 웹 프로젝트에서는 MX가 존재하지만이젠 정말 Spark를 본격적으로 사용하지 않으면 향후 Flex 4에서의 모바일 개발에 대한 미래가 없는 것이다앞으로 모바일 지원으로 인해 Flex 4가 코드네임처럼 Adobe의 미래를 이끌어갈 영웅(hero)이 될 것인지 좀더 지켜보면 좋을 것이고여기서는 개선된 Flash Catalyst Flash Builder의 디자인과 개발 워크플로우를 살펴보려 한다.

 

Design in Mind?

Flex 4의 메인 컨셉은 Design in Mind 였다.

여러 가지 있지만 그 중에 가장 핵심적인 이유 세 가지만 들어보면,

 

• Flash Catalyst 5에서 작업한 후 FXP 파일로 저장하고 Flash Builder 4에서 FXP 파일을 읽어와 작업한 후 Flash Builder에서 저장한 FXP 파일을 Catalyst에서 읽어올 수 없었다한마디로 한번 정의된 디자인을 수정하려면 Flash Builder에서 직접 코딩 하여 작업해야 했다.

• 프로젝트를 하다 보면 대부분 Custom Spark Component를 제작해서 작업해야 하는데, Catalyst 자체가 이를 지원하지 못했다 Custom Component에 대한 것은 대부분 수작업으로 Flash Builder 4에서 작업해야 했다.

 • 제작된 Component들은 리사이징이 불가능 했다즉 크기 조절은 Flash Catalyst에서 직접 하지 못했으며, Flash Builder에서 직접 수작업으로 코딩 하고 컴파일 해서 확인해야 했다.

 

이 세 가지 이유는 매우 커다란 문제가 되며 디자이너가 일일이 스킨 코딩을 타이핑 해서 해야 한다는 것을 의미했다따라서 이미 Spark Architecture는 너무나 멋진 Design in Mind를 가지고 탄생했지만 이를 보조하는 Flash Catalyst가 반쪽 짜리이다 보니 현실적으로 적용되기 어려운 면이 있었다그렇지만 Photoshop Illustrator의 디자인을 코드로 자동으로 만들어 주는 기능 덕에 Flex 4로 작업하는 사람들은 Spark Skin 작업을 많이 줄일 수 있었다.

 

드디어 완성된 Design in Mind

부족했던 점을 업그레이드했으며기능 개선을 하여 Flash Catalyst CS 5.5 제품이 출시되었다특히 위의 세 가지 단점을 모두 해결한 버전을 내 놓은 것이다. Adobe에서 제공하는 도움말에 자세히 나와 있으니 각 툴의 기능 설명은 직접 하지 않고 해당하는 기능에 대한 링크로 설명을 대체하겠다.

한글 도움말이고 매우 중요한 기능의 업그레이드 이므로 꼭 한번씩 정독하길 바란다.

 

    Flash Catalyst  Flash Builder 통합
http://help.Adobe.com/ko_KR/flashcatalyst/cs/using/WS022ac6da934778d0-8b403d512ea24bcabf-8000.html

 

    사용자 정의 스킨 가능 구성 요소
http://help.Adobe.com/ko_KR/flashcatalyst/cs/using/WS2B22ACEF-93B3-45c2-B367-E58FB6D15059.html

 

    응용 프로그램 및 구성 요소 크기 조정
http://help.Adobe.com/ko_KR/flashcatalyst/cs/using/WSEAC67949-FECA-48bc-8167-426116C25F86.html

 

국내현실에 맞는 최적의 워크플로우

국내의 RIA 제작은 크게 두 종류로 나뉘는데그래픽 요소가 많이 들어가고 Custom 차트가 많이 들어간 대시보드 시스템이 한가지이고기존 프로그램으로 제작된 업무화면을 Rich하게 표현하는 업무 시스템이 또 한가지 종류가 되겠다.

두 프로젝트 모두 Custom Component가 많이 활용되는 프로젝트인데기존에 Flex 3에서 작업하던 프로세스를 설명하자면디자이너는 화면의 스킨과 스타일이펙트 작업을 끝내고 완성된 MXML CSS 파일을 작업하고 개발자에게 넘긴다개발자는 이를 받아 기능을 붙이고 추가 디자인이나 화면이 생길 경우 위와 같은 흐름을 반복하여 개발자가 직접 찾아가 화면을 붙였다.

, Flex 3의 디자인-개발 워크플로우는 다음 그림으로 설명할 수 있겠다

Designers: Design -> Flash -> MXML Coding -> Interative Designer: ActionScript Skin Coding ->Designer: CSS -> Developer: Scripting

 

이 프로세스의 단점은 일단 디자이너가 다양한 툴에서 작업한 후 직접 수작업으로 완성해야 하고특이한 모션을 주기 위해서는 Flash의 무비클립을 사용해야 했으며디자이너가 고급 스킨작업을 할 수 없었다따라서 스킨 작업은 코더의 도움을 받아야만 했다.

이제 Flash Catalyst에서는 위의 MXML Coding, Skin Coding 등을 도와준다상당수의 스킨은 이제 Flash Catalyst에서 해결이 가능하며디자이너가 직접 코딩해야 했던 MXML, SWC 등의 파일이 이젠 Catalyst에서 FXP FXPL 파일로 개발자와 파일 교환을 하게 된다이에 맞추어 Adobe는 도움말 문서에 새롭게 개선된 Flash Catalyst에 맞춰 워크플로우도 개선하여 제시하였다.

링크 바로가기http://help.Adobe.com/ko_KR/flashcatalyst/cs/using/WS4bebcd66a74275c3-563135ab12e54a37f0a-7ffe.html

 

  Flash Catalyst 내의 와이어프레임 및 프로토타입 워크플로우

(이미지 출처 : http://help.Adobe.com/ko_KR/flashcatalyst/cs/using/images/fb_workflow_popup.png)

프로토 타입 워크 플로우는 명확히 UI 설계가 되어있다면 건너 뛰어도 상관없지만일반적으로 하는 것이 좋고, Flash Catalyst가 익숙해 지면프로토 타이핑 하기 편리하게 관련된 모든 Component를 제공하고 있기에 빠른 속도로 프로토타입을 볼 수 있다.    이로써 간편하게 기획자디자이너개발자 간의 상호 커뮤니케이션을 결과를 미리 봄으로써 쉽게 할 수 있다는 장점이 있다.

 

  Flash Catalyst Flash Builder 간의 작은 팀 워크플로우

 

(이미지 출처 : http://help.Adobe.com/ko_KR/flashcatalyst/cs/using/images/fb_small_team_popup.png)

필자는 이 워크플로우를 디자이너 중심의 워크플로우로 재정의 하였다왜냐하면 중간에 개발자로 넘어가는 흐름 자체는 디자인을 완성하기 위한 꼭 필요한 기능의 완성 정도이지그 이상의 코딩을 개발자가 하면 안 되기 때문이다즉 디자이너 1명 또는 여러 명이 공동 작업을 하고디자인의 역할이 무엇보다도 중요한 대시보드 시스템 같은 프로젝트나 표준 Component만 사용하는 업무 시스템 제작 프로젝트에서는 이렇게 작업할 만하다다만 차트 등의 Component 등은 이미 Flex 3 기반으로 되어 있을 테니 CSS로 정의해서 마무리 해야 하겠지만 그 외의 그래픽적 요소나 애니메이션은 충분히 Catalyst로 표현한 이후 개발자에게 넘길 수 있을 것이다.

Flash Catalyst에서 계속 디자인 작업을 완성하려면, Flash Builder로 코딩 작업을 할 때  Flash Catalyst 호환성을 유지하는 코딩을 해야 한다예를 들면 RadioButton Component group 이라는 속성이 있어야 인터랙션 및 관련 데이터 처리를 용이하게 할 수 있는데  Flash Builder 4.5에서 개발자가 코딩할 때 이 속성은 Flash Catalyst 호환성을 깨뜨리는 속성이기 때문에 사용하지 말라는 warning(경고)이 발생한다따라서 개발자는 맨 마지막 프로세스에서야 비로소 호환성과 관련 없는 코딩을 진행할 수 있다.

 

  Flash Builder Flash Catalyst 간의 여러 사람 워크플로우

 

(이미지 출처 : http://help.Adobe.com/ko_KR/flashcatalyst/cs/using/images/fb_medium_team_popup.png)

필자는 위의 워크플로우가 디자이너 중심이었다면 이 워크플로우는 개발자 중심의 워크플로우라 정의하였다왜냐하면 이 워크플로우는 Custom Component이긴 하지만 개발자가 정의한또는 이미 기능의 정의가 완료된 Component 세트가 있는 상황을 정의한 것이기 때문이다따라서 이미 완성되거나 완성할 Component를 미리 만들어 놓고필요한 Skin Part State를 미리 정의해 놓아야 한다그리고 나서 디자이너와의 프로젝트 공유를 FXPL이라는 라이브러리 파일로 디자이너와 공유한다그렇게 하면 디자이너는 Flash Catalyst에서 해당 FXPL을 열고 만들고 붙여야 할 Skin을 열고나서 거기에 디자인을 적용시키는 방법을 취한다 

여기서 개발자나 아키텍트(프로그램 설계자)가 한가지 주의해야 할 점은 Custom Component가 반드시 Skinnable Component를 바로 상속한 Component만 이 방법이 유효하다는 점이다예를 들면 Skinnable Component의 하위 클래스인Button 등의 클래스는 Catalyst에서 스킨 제작이 불가능한 것이다따라서 디자이너에게 디자인을 진행시키기 위한 Button State Skin Part 등을 정의한 Skinnable Component Dummy Class를 정의하고 제작이 최종 완료 되었을 때 제작 완료된 파일로 덮어씌우는 방법 등을 생각해 볼 수 있다이 부분은 향후 Catalyst의 버전 업그레이드를 통해서 개선되리라 예상해 본다.

 

마치며..

Flash Catalyst를 교육하면서 받았던 대표적인 디자이너들의 질문을 정리해보고 간단한 답변을 게재하며 마치기로 하겠다.

    Flash Catalyst를 왜 배워야 해요?
 
향후 Flex의 발전에 맞춰 반드시 배워야 하는 툴로 생각하시면 되겠습니다사용자 인터페이스는 Flash와 비슷하다고 생각하시면 되고교육해보니 하루나 이틀이면 대부분 작업하는데 무리가 없는 정도였습니다.

   예전같이 Flash에서 작업해서 CSS로 작업할 순 없나요?
 불가능합니다물론 Flex 3 프로젝트나 Component에서는 아직도 가능합니다만 웬만하면 쓰지 마시고 향상된 Flash Catalyst에서 스킨작업을 해주세요

   Photoshop 작업은 다른 디자이너가 하는데누가 Layer 정리를 해야 하나요?
 Photoshop, Illustrator
의 경우 Flash Catalyst 작업은 Layer 정리가 필수입니다디자인 작업 시작 전에 Layer 정리를 요구하시던가아니면 최소한 각각 Layer 폴더로 나누어 달라고 요청하셔야 합니다.

   리사이즈가 되게 하려면 어떻게 해야 하나요?
 Flash Catalyst 5.5
에 새로운 리사이즈가 가능하게 하는 기능이 들어가 있습니다링크해   놓은 Adobe 도움말을 참고하세요
http://help.Adobe.com/ko_KR/flashcatalyst/cs/using/WSEAC67949-FECA-48bc-8167-426116C25F86.html

   Photoshop으로 작업한 비트맵 이미지들을 위의 방법대로 작업해서 리사이즈가 되게 했습니다그런데 리사이즈를 할 때 이미지가 깨지는데 어떻게 해야 하나요?
 예전엔 이미지들을 Flash로 가져와 Scale9Grid를 주시거나 CSS에서 코드로 직접Scale9Grid를 주셨을 것입니다이젠 Flash Builder에서 MXML 코드에서 직접 주셔야 합니다.다음과 같은 코드로 Flash Catalyst에서 제작이 되었다면 ,
<s:Image source="@Embed(source='assets/logo.png')"/>


아래와 같이 이미지에 직접 Scale9Grid를 주세요. Scale9Grid 관련 4개의 속성 모두 적어주셔야 에러가 나지 않습니다.
<s:Image source="@Embed(source='assets/logo.png', scaleGridTop='55', scaleGridBottom='137', scaleGridLeft='57', scaleGridRight='266')"/>

 

<Flash Catalyst 관련글 바로가기>