지난 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시간만에 완성해 버렸습니다.
이와같이 디자이너 여러분들의 크리에이티브를 마음껏 발휘할 툴이 바로 이 카탈리스트 인 것이라는 것을 몸소 체험하셨을 것입니다. 여러분의 능력을 십분 활용하여 멋진 결과물이 많이 나왔으면 좋겠습니다.
반응형