Axure RP로 이미지 Carousel 만들기

개요

Axure RP로 Carousel을 만드는 방법입니다. Carousel이란 이미지나 배너 등을 좌우로 슬라이드쇼 보듯 자동 혹은 수동으로 넘겨보는 형태를 의미합니다. 이 내용은 Axure RP 공식 홈페이지에 올라온 내용을 제가 이해한대로 옮겨적은 글입니다.

 

실습 예제 파일 다운로드

실습을 위해 공식 홈페이지에 있는 예제 파일을 다운로드하시기 바랍니다.
예제 파일 다운로드

 

설정

예제 파일 중, Carousel 페이지를 엽니다. 페이지에는 세 개의 이미지와 두 개의 화살표 아이콘으로 구성되어 있습니다.

 

Carousel Dynamic Panel 만들기

Image 1을 우클릭하고 Convert to Dynamic Panel을 선택합니다.

Dynamic panel의 이름을 Carousel로 변경합니다.

방금 만든 dynamic panel을 더블 클릭하여 Dynamic Panel State Manager를 엽니다. + 아이콘을 클릭하여 총 세 개의 State를 만듭니다. ‘OK`를 눌러 창을 닫습니다.

Image 2를 잘라서 State2에 (0,0) 위치에 붙여 넣습니다. 마찬가지로 Image 3도 State3에 붙여 넣습니다.

 

인터랙티브 Back 버튼 만들기

Carousel 페이지로 돌아갑니다. Back arrow 위젯을 선택하고 PROPERTIES 탭에서 OnClick에 더블클릭하여 케이스를 만듭니다.

Case Editor의 왼쪽 화면에서 Set Panel State를 선택합니다. 오른쪽 화면에서 Carousel (Dynamic Panel)에 체크합니다. 아래쪽에서 Select state 드롭다운 박스를 클릭하여 Previous를 선택합니다. 그리고 Wrap from last to first에 체크합니다. 이렇게 하면 이미지가 루프 형태로 계속 넘겨볼 수 있게 됩니다. 슬라이딩되는 효과를 주기 위해 Animate In과 Animate Out을 모두 slide right로 설정합니다. OK를 눌러 저장합니다.

 

인터랙티브 Forward 버튼 만들기

이번에는 Forward arrow 위젯을 선택하여 위와 거의 유사한 과정을 진행합니다. 위와 다른 점은 Select state에서 Next를 선택하고 Animate In과 Animate Out을 slide left로 선택하는 점만 다릅니다.

 

Carousel이 자동으로 회전하도록 만들기

Dynamic panel을 선택한 후, PROPERTIES 탭에서 OnLoad를 더블클릭하여 새로운 케이스를 추가합니다.

Case Editor의 왼쪽 화면에서 Set Panel State를 선택하고, 오른쪽 화면에서 This Widget에 체크합니다. 아래에서 Select state 드롭다운 박스를 클릭하여 Next를 선택합니다. Wrap from last to first와 Repeat every에 체크합니다. 기본 설정은 1000ms 간격으로 회전하는 것인데, 이 값을 4000ms로 변경해 봅니다.

Delay first state change by 1000ms에 체크합니다. 이렇게 하면 페이지가 처음 로딩되고 나서 1000ms 이후부터 회전을 시작합니다. 시간 간격은 위에서 설정한 값을 그대로 승계합니다.

Animate In과 Animate Out을 모두 Slide left로 설정하고 OK를 눌러 저장합니다.

 

미리보기

Preview 버튼을 눌러 미리보기합니다.

 

Carousel 회전에 따라 함께 연동되는 메뉴 만들기

아래와 같이 Carousel의 이미지나 배너가 변동될 때 아래쪽의 선택 표시도 함께 연동되어 변동되도록 하는 방법입니다.

이미지나 배너가 포함된 영역의 Dynamic panel 중 아무 state나 더블클릭하여 편집 페이지로 이동합니다. OnPanelStateChange를 더블클릭하여 새로운 케이스를 추가합니다.

Case Editor에서 가운데 화면의 Case 1을 더블클릭하여 Condition Builder 창을 띄웁니다. 현재 상태 그대로 OK를 눌러 저장합니다.

왼쪽 화면에서 Selected를 선택하고 상태를 변경할 위젯에 체크합니다.

위와 같이 모든 이미지 혹은 배너에 대해 Case를 만들어 줍니다. 아래 예시는 세 개의 케이스가 있는 경우에 dynamic panel에 지정된 case 화면입니다. 첫 번째 케이스를 해석하자면 Dynamic Panel의 state가 state1이 될 경우 그에 대응하는 Ellipse 위젯의 상태를 selected로 변경한다는 뜻입니다.