다운로드 : http://labs.adobe.com/technologies/flashcatalyst/

Flex4sdk, Flash Builder4(이하 FB4)와 함께 배포된 Flash Catalyst(이하 FC)는 디자이너가 코딩없이 UI를 빠르게 만들기 위한 새로운 디자인 툴 입니다. FC가 나오기 이전에, 디자이너는 Adobe creative tools를 통해 만들어진 디자인 결과물들을 FB4로 가져와 CSS와 MX태그, 심지어 AS3.0까지 동원해가며 개발자 흉내를 내며 개발자들과 함께 너무도 힘겹고 효율적이지 못하게 작업을 해왔습니다. FC는 개발과 디자인의 완벽한 분리를 목표로 삼는 툴 입니다. 디자이너는 디자이너들이 사용해왔던 친숙한 UI를 가진 FC를 통해서, 그리고 디자이너들이 해오던 친숙한 방식 그대로를 가지고 layout, state, effect, 등 을 구현할 수 있습니다. FC의 메인 소개화면과 함께 리뷰를 시작하도록 하겠습니다.



FC를 통해서 할 수 있는 일은 다음과 같습니다.
- Photoshop과 Illustrator에서 만들어진 아트워크를 변화하기
- 상호작용하는 프로토타입 만들기
- SWF 파일로 publish 하기
- FB4를 사용하는 개발자와의 효율적인 협업

위 그림에서 알 수 있듯이 FC의 메인테마는 FB4 개발자와의 협업이라고 할 수 있습니다. 따라서 이 글에서는 FC에서 디자이너의 입장으로 하기 힘들었던 화면전환, 이펙트에 대한 작업을 하고 결과물을 FB4에서 사용 해보는 실습을 진행 하도록 하겠습니다.

먼저 프로그램을 시작하면 프로젝트 생성 화면이 나타납니다.

위 그림에서 알 수 있듯이 Illustrator, Photoshop 결과물을 기반으로 프로젝트를 시작할 수 있습니다. 우리는 이러한 결과물이 없기에... 빨간색 마크된 부분을 선택하여 프로젝트를 시작하도록 하겠습니다. 프로젝트 제목을 묻는 창이 나오면 임의의 제목을 넣은 후 확인 버튼을 선택 하면, 다음 그림처럼 FC의 구성화면을 볼 수 있습니다.


① State(상태) 목록이 보여지고, 기존 Sate 기반으로 새로운 State를 추가하거나 비어있는 State를 추가할 수 있습니다.

② 컴포넌트를 배치하고 디자인할 수 있습니다. ①번의 State 목록 중 하나를 선택하면, 해당 State에 종속되는 화면을 편집할 수 있습니다.

③ Flash CS 시리즈의 타임라인 개념으로 컴포넌트에 이펙트를 적용 하거나 각기 다른 State간의 전환시 이펙트를 적용할 수 있습니다.

④ Photoshop 에서 레이어 설정하는 것과 똑같이 컴포넌들에 대한 visible을 설정할 수 있습니다.

⑤ Flex4의 컴포넌트 목록으로서 drag&drop 형식으로 사용할 수 있습니다.

⑥ 컴포넌트를 선택할 경우 각종 속성을 설정할 수 있습니다.

⑦ 작업한 결과물을 코드로 볼 수 있습니다.

실습을 시작 하기전 이 실습에 대한 결과물을 미리 확인해 보겠습니다.



이제 본격적으로 실습을 진행 하도록 하겠습니다.
⑤번 영역에 있는 컴포넌트와 ④번 영역 상단에 있는 도형 그리기 도구를 이용해 다음 그림처럼 배치합니다.


우리는 지금까지 Page1 이라는 State에 컴포넌트를 배치 했습니다. 이렇게 배치된 컴포넌트는 현재 Sate에 종속적이며, 다른 State에서 유지할 것인지 결정할 수 있습니다. 이제 현재 배치된 컴포넌트를 유지하는 새로운 State를 추가해 보도록 하겠습니다. ①번 영역의 좌측 하단 부분에서 중복상태 버튼을 선택하면 다음 그림처럼 기존 State에 배치된 컴포넌트를 그대로 유지한 새로운 State가 추가 됩니다.


이제 새로운 State가 추가 되었으며 추가된 State를 선택하고 디자인 화면에서 컴포넌트를 추가/변경/삭제 하더라도, 오직 추가된 State에만 종속적이며, 첫번재 State에는 영향을 미치지 않습니다. 이제 우리는 추가된 State만의 컴포넌트를 재배치 할 것입니다. 다음 그림처럼 기존에 배치된 컴포넌트를 제거하고, 새로운 컴포넌트를 배치 합니다.


눈에 뜨게 변한점은 데이터 목록이 라디오 단추로 바뀐것 밖에 없습니다. 하지만 단추도 기존의 것을 삭제하고, 새로 추가한 것입니다. 새로 추가한 이유는 각기 다른 이벤트를 적용하기 위해서 입니다. 이점 유의해 주시기 바랍니다. 이제 ①번 영역에서 각각의 State를 선택해 보면 각 State에 종속된 컴포넌트를 확인할 수 있을 것 입니다. State 변경을 위한 이벤트 등록과, State 변경시 이펙트 적용을 하도록 하겠습니다. 먼저 첫번째 State를 선택해서 처음으로 돌아 갑니다. 그리고 단추를 선택한 뒤 다음 그림처럼 행동을 지정합니다.

단추를 선택하고 사용자 정의 상호 작용 우측 부분의 + 버튼을 선택한 뒤 onClick을 선택 합니다. 그리고 State 변경을 위해 다음 상태로 장면 전환 재생을 선택한 후 변경할 State를 지정합니다. 이렇게 하면 첫번째 State에서 단추를 선택할 경우 두 번째 State로 전환 되게 됩니다. 마우스 클릭 몇번 만으로 손 쉽게 이런 기능을 적용할 수 있다는 것이 참 놀랍습니다.

이제 우리가 해야 할 작업은 State 전환시 이펙트를 적용하는 것 입니다. 우리가 적용할 이펙트는 데이터 목록을 감싸고 있는 사각형을 3D회전 시키고, 동시에 데이터 목록을 천천히 사라지게 하는 것 입니다. 먼저 사각형을 선택한 뒤 하단에 있는 타임라인 영역에서 다음 그림처럼 동작추가 버튼을 선택하여 3D회전 추가를 선택 합니다.
여기서 주의할 점은 첫번째 State에서 두번째 State로 전환시 이펙트를 적용하는 것이기 때문에 반드시 타임라인 영역 좌측에 있는 상태 전환 항목에서 Page1 -> Page2 항목을 선택한 뒤에 3D회전을 추가 해야 합니다.

3D회전 이펙트가 추가되면 다음 그림처럼 타임라인이 변경 됩니다.

위 그림에서 빨간색 마크된 부분을 마우스로 늘이거나 줄임으로서 이펙트 적용시간을 제어할 수 있습니다. 마찬가지로 다음 그림처럼 데이터 목록의 이펙트 페이드 아웃 적용시간을 3D회전 만큼 동일하게 맞춰 줍니다.

지금까지 Page1에서 Page2로 전환시 이펙트 적용을 모두 마쳤습니다. 남은 일은 두번째 State인 Page2를 선택한 뒤 동일한 작업을 하는 것 입니다. 그럼 이제 Page2를 선택한 뒤 단추를 선택하고 이벤트를 등록 합니다.

Page2에 표시되는 단추는 Page1에 있던 단추가 아닌점을 다시 한번 유의 하시고, onClick 발생시 Page1로 전환 하도록 설정 합니다. 그 다음으로는 라디오 단추를 감싸고 있는 사각형을 선택하고 타임라인 영역에서 상태전환 목록중 Page2 -> Page1 항목을 선택한 상태에서 이전에 했던 방식으로 3D회전을 추가 합니다.


그 다음 작업은 데이터 목록과 같은 방식으로 라디오 단추를 3D회전과 동일하게 페이드 아웃 이펙트를 적용하는 것 입니다.

이제 모든 작업이 끝났습니다. 여러분이 직접 Ctrl+Enter 로 실행시켜 확인해 보시기 바랍니다. 마우스 클릭만으로 이런 상태전환과 이펙트적용까지 할 수 있다는 것에 놀라실 겁니다. 마지막으로 프로젝트를 저장하고 FB4에서 불러오는 것으로 글을 마치도록 하겠습니다.

확장자가 fxp 입니다. 이제 저장된 이 파일을 FB4에서 로드해 보겠습니다.


Import를 완료하면... FB4에서 그대로 작업 이어서 할 수 있습니다.



마치며..
리뷰를 하면서 처음 사용해 보는 것인데도 직관적인 인터페이스로 인해 별도의 학습없이 프로그램을 사용할 수 있었습니다. 초기버전이 이 정도면 앞으로 차기 버전은 어떻게 나올지 기대가 먼저 앞섭니다. 앞으로 개발자와 디자이너간의 효율있는 협업을 기대해 봅니다.

신고
Posted by 째코


티스토리 툴바