프로토타이핑 툴 proto.io 페이드-인 이미지 슬라이더 - 2

상태 트랜지션은 적용이 되었지만 트랜지션을 동작하게 하는 트리거(Trigger)가 없기 때문에 현재로서는 그 어떤 동작도 일어나지 않습니다.

스크린이 출력되면 상태 트랜지션이 동작하도록 인터랙션을 스크린에 추가합니다. 좌측 패인(Left Pane)에서 스크린 트랜지션 아이콘을 클릭합니다.

아래와 같이 트랜지션을 적용합니다.

- Title : auto fade start

- Trigger : Screen show

- Action : Change Container State

- Screen : HOME

- Container : photo auto fade

- State : photo 2

- Delay : 3000

이 인터랙션을 통해 스크린이 출력되고 3초 후 ‘photo 2’ 상태로 이동합니다. 프로젝트를 저장하고 미리보기로 동작을 확인합니다.

스크린 인터랙션을 통해 이미지가 페이드인 되는 것은 시작이 되었지만 다른 상태 트랜지션으로는 바뀌지 않는 것을 볼 수 있습니다. 그 이유 역시 해당하는 인터랙션이 없기 때문입니다.

이를 구현하기 위해 이번에는 각 상태 트랜지션의 마지막 프레임에 인터랙션을 추가하겠습니다. 먼저 ‘photo 1 → photo 2’ 트랜지션을 선택하고 타임라인의 마지막 프레임에 있는 인터랙션 추가 아이콘을 클릭합니다.

프레임 인터랙션을 아래와 같이 설정합니다.

- Title : next state 1

- Trigger : State transition end

- Action : Change Container State

- Screen : Current container

- Container : Current container

- State : photo 3

- Delay : 3000(ms)

인터랙션을 저장할 때 아래와 같이 트랜지션 자동 생성 여부를 묻는 창이 나오기도 하는데 이미 생성되어 있는 상태이므로 ‘Don’t ask me again’을 체크한 후 ‘CANCEL’을 클릭합니다.

같은 방법으로 각 트랜지션의 마지막 프레임에 인터랙션을 아래와 같이 추가합니다.

‘photo 2 → photo 3’ 트랜지션 프레임 인터랙션

- Title : next state 2

- Trigger : State transition end

- Action : Change Container State

- Screen : Current container

- Container : Current container

- State : photo 1

- Delay : 3000(ms)

‘photo 3 → photo 1’ 트랜지션 프레임 인터랙션

- Title : next state 3

- Trigger : State transition end

- Action : Change Container State

- Screen : Current container

- Container : Current container

- State : photo 2

- Delay : 3000(ms)

프로젝트를 저장하고 미리보기를 통해 자동으로 페이드인 되는 이미지를 확인합니다.