ProtoPie로
동영상 플레이어 만들기 Part 2
ProtoPie, 프로토파이, 프로토타이핑툴, 동영상플레이어
Free Your Ideas, ProtoPie
앞서 소개해드렸던, ProtoPie로 동영상 플레이어 만들기 <Part 1>에 이은 두 번째 편을 소개해드리겠습니다. 시작하기 전에 만들어 볼 동영상 플레이어의 예제 파일을 미리 다운로드하여 준비해주세요. 보다 빠른 이해를 위해 완성된 파일을 확인하실 수도 있습니다.
<Part 1>
1. 스크롤에 따라 동영상 재생/일시정지하기
2. 동영상 카드 탭 하여 화면 확장 전환하기
3. 진행 표시줄 탭하고 재생 위치 변경하기
<Part 2>
4. 진행 표시줄 드래그하여 재생 위치 변경하기
5. 현재 재생 시간 표시하기
6. 동영상이 재생되는 동안 댓글 섹션 열고 닫기
참고로 소개해드리는 기능은 ProtoPie 5.5 버전 이상에서만 사용 가능하며, <Part 1>의 내용이 궁금하시다면 아래 링크에서 확인하시기 바랍니다.
4. 진행 표시줄 드래그하여 재생 위치 변경하기
1. 드래그 가능한 play head로 scrubber를 만듭니다.
· Dot에 Drag 트리거 추가하기
· Dot에 Move response을 추가하기. 이때, 방향을 먼저 설정하고 Limit을 Container로 선택하여 Dot이 Progress bar 내에서 이동할 수 있도록 하기
2. 동영상이 진행 표시줄에서 Dot의 x좌표 위치와 일치하는 타임스탬프를 찾도록 합니다.
· Detect 트리거로 Dot의 x좌표 위치 추적하기
· Playback response (Seek)를 Video에 추가하기
참고로 현재 ProtoPie는 Chain에서 Playback을 지원하지 않으며 Detect에서만 사용 가능합니다.
3. 이 단계에서 영상이 멈추는 것을 확인할 수 있습니다.
멈춤 현상은 Progress bar에 할당된 Drag와 Chain 그리고 Tap 간의 충돌로 일어납니다. 이 현상을 해결하기 위해서는 Progress bar에서 Tapping과 Dragging을 구분해야 합니다.
· Drag: 손으로 Dot을 드래그할 때, x좌표의 위치는 현재 Video 재생 시간에 영향을 미치며 손을 떼면 Dot이 Video 속도에 맞게 이동합니다.
· Tap: Tap 아래의 response는 손을 떼는 즉시 실행됩니다.
ProtoPie에서 이 두 가지 작업을 variable을 활용하여 구분할 수 있습니다.
· Scene에 대한 Variable을 만들고 숫자 값 0 할당하기
· Assign response에 Touch Down 트리거와 Touch Up 트리거를 추가하기
· Touchdown 일 때, variable = 0
· Touchup 일 때, variable = 1
· Variable이 1일 때만 Detect 아래에 Condition 추가하여 Playback response 트리거 하기
5. 현재 재생 시간 표시하기
1. 현재 재생 시간과 지속 시간을 표시합니다.
· Video Time에 Detect 트리거 추가하기
· Content에 아래 포뮬러와 두 가지 Text response 추가하기
floor(Video.currentTime)
currentTime: 영상 또는 오디오, Lottie 레이어의 현재 재생시간으로, 기본 형식은 초와 밀리 초로 구성됩니다.
· Floor나 Round를 사용하면 플레이 시간 값을 반올림하여 분과 초만 노출 가능하며 Floor의 정확도가 더 높음
Floor: 숫자보다 작거나 같은 가장 큰 정숫값을 가져옵니다.
e.g.floor(1.5) -> 1
Round: 반올림된 값을 가져옵니다.
e.g.round(1.5)-> 2
· 각각의 Text response 아래에 Condition을 추가하기
· 재생시간 < 10초 일 때, 아래 수식 앞에 0:0 을 추가하기
· 재생시간 ≥ 10초 일 때, 아래 수식 앞에 0: 을 추가하기
floor(Video.currentTime)
6. 동영상이 재생되는 동안 댓글 섹션 열고 닫기
1. Comments를 위한 자리를 만들기 위해 Video 사이즈를 재설정합니다.
· Comments에 Tap 트리거 추가하기
· Video에 Scale response 추가하기:
· 아래의 Parent 포뮬러를 Height에 사용하여 Video 와 상위 Video contents 높이를 같게 하기
parent(Video).height
Parent: 컨테이너 또는 컴포넌트와 같은 상위 레이어를 나타내거나 해당 레이어 속성을 가져옵니다.
예시,
parent(Rectangle 1).x
→ Rectangle 1의 상위 레이어의 x 좌표
· 같은 비율의 너비를 갖기 위해 아래 포뮬러를 사용하기
Video.width/Video.height*parent(Video).height
2. Video contents의 높이와 일치하는 y 위치로 comments를 이동합니다.
· Y 아래에 포뮬러와 Move response를 추가하기
'Container'.height
실제 영상 사이즈보다 Video Contents를 더 작게 만들면 상위 포뮬러를 사용하여 영상의 높이를 다이나믹하게 변경할 수 있습니다. 따라서 위 영상과 같이 Video Contents의 높이가 변경됐을 때, Scale 값을 다시 수정하지 않아도 되죠.
3. Close button을 탭할 때 scene을 첫 단계로 리셋합니다.
· Close button에 Tap 트리거 추가하기
· Comments와 Profile을 리셋하기 위해 두 개의 Reset 리스폰스 추가하기
· Video에 Scale 리스폰스 추가하기. 이때, Progress bar가 동시에 리셋되는 것을 방지하기 위해 Reset을 사용하지 않습니다.
· 영상 크기를 변경할 때 값을 다시 계산하지 않아도 되도록 아래의 두 가지 포뮬러를 Scale에 사용하기
initial(Video,"width")
initial(Video,"height")
Initial: 인터렉션 전 레이어 속성의 초깃값을 가져옵니다.
예시,
initial(Oval 1, "opacity")
→ Oval 1 초기 불투명도
· Progress bar에 Move 리스폰스 추가하기
· Y에 아래 포뮬러를 사용하여 진행 표시줄을 초기 위치로 옮기기
initial(Progress bar component,"y")
더 실감 나는 결과물을 위해 Video Contents에 썸네일 Fill을 추가할 수도 있습니다.
Summary
지금까지 진짜보다 더 진짜 같은 동영상 플레이어 만드는 방법을 배워보았는데요, 아마 ProtoPie를 시작한 지 얼마되지 않은 초보자분들에게는 logic이나 formula가 조금 어렵게 느껴졌을 수도 있습니다. 아래 목록을 통해 오늘 배운 포뮬러를 정리해보세요!
$touchX
toLayerX(containerName, x, y)
'Layername'.currentTime
floor(Number)
parent(LayerName).property
initial(LayerName, "Property")
더 자세한 내용이 궁금하시다면 포뮬러 관련 설명을 참고해보세요.
