프로토타이핑 proto.io 이미지 슬라이더

proto.io에서는 이미지 슬라이더를 콘테이너(container) 기능 + 페이지 콘트롤러(page controller) 를 사용해서 손쉽게 만들 수 있습니다.

<Swipe 로 이미지 슬라이딩>

먼저 슬라이더로 만들 이미지를 캔버스에 넣습니다. 현재 이 캔버스는 프론트 페이지에서 사용되고 있는 세로 스크롤(Vertical scroll)콘테이너 Front page container의 안(內部)입니다.

캔버스로 이동된 이미지의 크기를 슬라이더로 사용할 크기로 조절하고(여기서는 750*560 정도) 콘테이너로 변환합니다.

콘테이너 내부에서 마우스 오른 클릭을 한 후 옵션 항목 중 Container Properties 로 들어갑니다.

Edit container properties 설정 창에서

Container title Container : front page image slider

Container width : 750px의 세 배인 2250px로 수정합니다. 우측의 [x3] 버튼을 클릭하면 자동으로 3배수로 계산됩니다.

콘테이너 크기가 변경된 것을 확인합니다.

Project Assets 에 있는 나머지 이미지들을 넣은 후 위치와 크기를 조정합니다.

상위 콘테이너(Front page container)로 돌아온 후 이미지 슬라이더용 콘테이너의 크기를 정확히 맞춥니다.

아래와 같이 콘테이너 크기가 정확히 맞아야 합니다.

이미지 슬라이더용 콘테이너를 클릭하고 Properties 탭에서 Scroll 항목을 Horizontally 로 선택한 후 아래의 항목 중에서 상단에 비활성화 되어 있던 Treat scroll container as snap (carousel)을 체크하여 활성화 합니다.

프로젝트를 저장하고 미리보기를 통해 동작을 확인합니다.

<버튼 탭(tap)으로 이미지 슬라이딩>

아이템 라이브러리에서 Page Controller 를 선택하여 이미지 슬라이더용 콘테이너에 넣습니다. 레이어 상하 관계에 주의합니다.

먼저 콘트롤러 전체를 선택하고 Properties 탭에서 Active Button (기본 활성화 버튼)을 Button 1 으로 설정합니다.

다음으로 콘트롤러를 구성하고 있는 버튼 각각에 인터랙션을 넣기 위해 먼저 첫번 째 버튼을 클릭한 후 아래와 같이 인터랙션을 설정합니다.

Title : 임의

Trigger : Tap (Triggers after a quick)

Action : Go to snap container page

Screen : Current container

Item : front page image slider

Horizontally : 1

Duration : 임의

Delay : No delay

만들어진 인터렉션을 [ctrl+c]로 클립보드에 복사한 후

두 번째 버튼의 인터랙션으로 붙여 넣습니다.

붙여 넣은 인터랙션을 수정하여 Horizontally 항목을 2 로 고칩니다.

마찬가지 방법으로 3번 버튼도 Horizontally 항목을 3 으로 고칩니다.

프로젝트를 저장하고 프리뷰를 통해 동작을 확인합니다.

슬라이더 이미지 Swipe와 버튼 싱크(Sync) 맞추기

front page image slider 콘테이너를 클릭하고 인터랙션을 아래와 같이 추가합니다.

Title : 임의

Trigger : Container scroll

Action : Sync Page Controller item

Screen : Current container

Item : Page Controller 1 (혹은 설정한 다른 이름)

Delay : No delay

인터랙션과 프로젝트를 모두 저장하고 프리뷰를 통해 동작을 확인합니다.