예제로 배우는 Flash catalyst, Flex4

출처 : 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 변경에 대한 글을 읽어보시면 실마리를 찾으실 수 있을 것입니다.