ProtoPie로
동영상 플레이어 만들기 Part 1
ProtoPie, 프로토파이, 프로토타이핑툴, 동영상플레이어
Free Your Ideas, ProtoPie
Formula와 Variable를 활용하여 Scrubber로 동영상 플레이 프로토타입 만드는 방법을 배워보겠습니다. 이번 ProtoPie로 동영상 플레이어 제작하기 가이드는 아래의 6가지 섹션으로 나눠져 있으며, 이번 <Part 1>에서는 먼저 3가지 방법에 대해 소개해드리겠습니다.
<Part 1>
1. 스크롤에 따라 동영상 재생/일시정지하기
2. 동영상 카드를 탭 하여 화면 확장 전환하기
3. 진행 표시줄 탭하고 재생 위치 변경하기
<Part 2>
4. 진행 표시줄 드래그하여 재생 위치 변경하기
5. 현재 재생 시간 표시하기
6. 동영상이 재생되는 동안 댓글 섹션 열고 닫기
함께 만들어 볼 영상의 완성본과 시작 파일을 확인해보세요.
참고로 위 기능은 ProtoPie 5.5 버전 이상에서만 사용 가능합니다.
1. 스크롤에 따라 동영상 재생/일시정지하기
1. Scene Profile에서 scene과 동일한 크기(834 x 1194)의 Scroll Container를 만들고 이곳에 모든 레이어를 삽입합니다.
2. Scroll Container의 스크롤 값을 Variable에 저장합니다.
· 새로운 For This Scene Variable Scroll 생성하기
· Number 선택하기
· Use Formula 체크하기(For This Scene 변수에 대해서만 작동)
· 'Scroll'.scrollOffset 입력하기
· variable 이름 옆 debug 아이콘 클릭하기
참고로, Scroll Container 스크롤 값 추적이 가능하기 때문에 Detect 트리거와 Assign response가 필요하지 않습니다.
3. 스크롤 값에 따라 영상을 재생 또는 일시 정지합니다.
· Variable Scroll에 두 개의 Range 트리거 추가하기
· 하나의 범위를 210 ≤ Scroll 으로 설정하기
· 다른 하나는 Scroll ≤ 209 으로 설정하기
· 각 Range trigger에 대해 하나씩, Video 1에 두 개의 Playback response를 추가하기
· 첫 번째 Range (210 ≤ Scroll), Play 선택하고 Playback에서 Looping 확인하기
· 두 번째 Range (Scroll ≤ 209), Playback에서 Pause 선택
2. 동영상 카드를 탭 하여 화면 확장 전환하기
1. 영상을 확장하여 전체 화면으로 표시합니다.
· Video 1 컨테이너가 있는 Video 1에 Tap trigger 추가하기
· Video 1에 Scale response 추가하고 834 x 1194로 확장하기
2. 탭할 때 영상을 알맞은 포지션으로 이동합니다.
· Tap 아래에 Move response를 추가하여 각각 X, Y 축을 아래와 같이 이동하기
toLayerX("Scroll",0,0)
toLayerY("Scroll",0,0)
Video 1은 Scroll Container 안에 포함되기 때문에 그 위치는 Scroll Container를 기준으로 하며 스크롤 값에 관계없이 화면을 기준으로 (0, 0)으로 이동해야 합니다. 때문에 toLayerX 와 toLayerY 함수가 필요합니다.
toLayerX: 컨테이너 또는 컴포넌트를 기준으로 x좌표를 반환합니다. 컨테이너 및 컴포넌트의 레이어는 해당 컨테이너 또는 컴포넌트 기준의 좌표를 따릅니다.
toLayerX(containerName: LAYER, x: NUMBER, y: NUMBER)
→ NUMBER
toLayerY: 컨테이너 또는 컴포넌트를 기준으로 y좌표를 반환합니다. 컨테이너의 레이어는 해당 컨테이너 또는 컴포넌트 기준의 좌표를 따릅니다.
toLayerY(containerName: LAYER, x: NUMBER, y: NUMBER)
→ NUMBER
3. 다음 scene으로 건너뛰기 전에 영상을 앞으로 가져옵니다.
· Video 1에 Radius response를 추가하여 radius를 0으로 리셋하기
· Video 1에 Reorder response를 추가하여 Video 1을 앞으로 가져오기
· Scene Video에 Jump response와 0.2초 딜레이 추가하기
3. 진행 표시줄을 탭하여 동영상 재생 위치 변경하기
1. 영상 자동 재생 및 반복 재생을 설정합니다.
· 두 번째 scene video의 동영상 레이어 video 속성 패널에서 "Play Automatically"와 Looping 모두 선택하기
2. 영상을 재생하는 동안 Scrubber와 Playhead 가 이동하도록 만듭니다.
· Video와 Time property에 Chain trigger 추가하기
· Dot에 Move response를 추가하여 Dot이 이동할 거리와 영상의 길이를 매핑하기
· Progress에 Scale response를 추가하고 Progress가 확장할 너비와 영상의 길이를 매핑하기
3. 동영상이 scrubber를 탭한 위치를 기반으로 특정 타임스탬프를 찾도록 합니다.
· 컨테이너 Progress bar에 Tap trigger 추가하기
· Dot에 Move response 추가하여 x좌표를 아래와 같이 이동하기
toLayerX('Progress bar', $touchX, 8)
정의된 variable $touchX를 사용하여 터치 x좌표를 반환합니다. toLayerX 함수를 사용하여 이 값을 Progress bar를 기준으로 x좌표로 변환하고 Dot의 초기 포지션은 (0, 8)이므로 세 번째 매개변수로 8을 사용합니다.
· Video에 Playback response 추가하기
· 동영상 찾기
17 * toLayerX(Progress bar, $touchX , 8) / 618
· 17: Video 총 길이. 618: Progress bar 너비
· Video 현재 재생 시간 = Video 지속 시간 * Dot 현재 위치 / Progress bar 너비
참고로 Scrubber Progress는 Video 시간 속성에 연결되어 있어 함께 확장되므로 추가 Scale response가 필요하지 않습니다.
다음 <Part 2>편에 이어질 3가지 방법의 ProtoPie로 동영상 플레이어 제작하기 가이드도 많이 기대해 주세요!
ProtoPie로 동영상 플레이어 만들기 <Part 2>
4. 진행 표시줄 드래그하여 재생 위치 변경하기
5. 현재 재생 시간 표시하기
6. 동영상이 재생되는 동안 댓글 섹션 열고 닫기
