[튜토리얼] Flash Catalyst와 Flash Builder4 활용 PART.1

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

안녕하세요

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

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

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

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

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

 fcfb1.zip

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



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

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

보는바와 같이 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