프레임 시계는 프레임 안의 움직임을 따로 담습니다.
씬의 타임라인은 씬 전체를 한 시간 줄로 움직입니다. 프레임에 시계를 두면 카드 · 버튼 · 아이콘처럼 프레임 안의 움직임을 그 프레임에 담아, 씬이 열릴 때 스스로 돌게 하거나 인터랙션으로 재생할 수 있습니다.
프레임 안에서 계속 도는 애니메이션 만들기
프레임 하나와 그 안에 든 오브젝트로 시작합니다. 예에서는 'Card' 프레임 안의 별을 2초에 한 바퀴씩 돌립니다. 프레임을 만드는 법은 도형과 프레임에 있습니다.
-
프레임 선택하기
캔버스에서 'Card' 안의 빈 곳을 클릭하세요. 별이 아니라 프레임이 선택됩니다. 오른쪽 패널에 프레임 패널이 보입니다. 타임라인이 보이지 않으면 오른쪽 패널을 아래로 내리세요.
-
애니메이션 추가하기
프레임 패널의 타임라인에서 애니메이션 오른쪽의 + 버튼(애니메이션 추가)을 누르세요. 'anim1' 줄이 생기고 애니메이션 모드로 바뀝니다. 타임라인 버튼 줄 맨 앞의 시계 이름이 '씬 › Card'가 됩니다.
애니메이션 추가를 누르자 'anim1' 줄이 생기고, 타임라인의 시계 이름이 '씬 › Card'로 바뀝니다. 영상: 'Card' 프레임을 선택하고 프레임 패널의 애니메이션 추가 버튼을 누르자 'anim1' 줄이 생기고, 애니메이션 모드의 타임라인 시계 이름이 '씬 › Card'로 바뀝니다. -
길이 정하기
타임라인 버튼 줄 오른쪽에 '0 / 5000 ms'처럼 숫자 두 칸이 있습니다. 뒤 칸(클록 길이)에 2000을 입력하고 ↩ 키를 누르세요. 이 애니메이션이 2초가 됩니다. 눈금자를 한 번 클릭한 뒤 F 키를 누르면 2초 전체가 눈금자에 들어옵니다.
-
한 바퀴 돌리기
눈금자에서 2s를 클릭하세요. 캔버스에서 별을 선택하고, 오른쪽 패널 회전의 Z 칸에 360을 입력한 뒤 ↩ 키를 누르세요. 별의 줄 0초와 2초에 키프레임이 생깁니다. 키프레임이 생기지 않으면 타임라인 버튼 줄의 자동 키프레임이 켜져 있는지 보세요.
2초에서 별의 회전 Z에 360을 넣자, 0초와 2초에 키프레임이 생깁니다. 영상: 눈금자의 2초를 클릭하고 별을 선택한 뒤 회전 Z 칸에 360을 입력하자, 별의 줄 0초와 2초에 키프레임이 생깁니다. -
자동 재생과 반복 켜기
'Card' 안의 빈 곳을 다시 클릭해 프레임을 선택하세요. 프레임 패널의 'anim1' 줄에서 세모 모양의 자동 재생과 돌아가는 화살표 모양의 반복을 켜세요.
'anim1' 줄의 자동 재생과 반복을 누르자 두 버튼이 파랗게 켜집니다. 영상: 프레임을 다시 선택하고 프레임 패널의 'anim1' 줄에서 자동 재생과 반복 버튼을 누르자 두 버튼이 파랗게 켜집니다. -
프레젠테이션에서 확인하기
오른쪽 위 버튼 줄에서 세모 모양의 현재 씬부터 재생 버튼을 누르세요. 씬이 열리자마자 별이 계속 돕니다. 클릭을 기다리지 않습니다. esc 키를 누르면 편집 화면으로 돌아옵니다.
프레젠테이션을 시작하자 클릭하지 않아도 카드 안의 별이 계속 돕니다. 영상: 현재 씬부터 재생을 누르자 프레젠테이션 화면이 열리고, 클릭하지 않아도 카드 안의 별이 2초에 한 바퀴씩 계속 돕니다. Esc 키로 돌아옵니다.
프레임 시계가 열려 있으면 프레임 밖은 키프레임이 되지 않습니다
프레임 시계는 그 프레임과 안에 든 것만 움직입니다. 그래서 프레임 밖의 오브젝트는 타임라인 줄이 흐려지고, 옮기면 키프레임 없이 오브젝트 자체가 바뀝니다. 씬의 움직임을 만들려면 시계 이름의 '씬'을 눌러 씬 시계로 돌아오세요.
상태: 프레임이 머무는 모습
애니메이션은 처음부터 끝까지 재생되고, 상태는 프레임이 머무는 모습입니다. 버튼의 기본 모습과 눌린 모습, 카드의 접힌 모습과 펼친 모습처럼 오갈 모습이 있다면 상태로 만드세요.
상태 오른쪽의 + 버튼(상태 추가)을 처음 누르면 'state1'이 생기고 '처음 상태'로 표시됩니다. 지금 그려 둔 모습이 곧 처음 상태라 따로 열리는 것은 없습니다.
다시 누르면 'state2'가 생기고 타임라인에 열립니다. 플레이헤드는 그 상태의 끝(0.3초)에 놓입니다. 거기서 프레임 안의 모습을 바꾸면 그 모습이 'state2'가 됩니다.
상태는 스스로 재생되지 않습니다. 프레젠테이션에서 씬이 열리면 프레임은 처음 상태의 모습으로 놓이고, 인터랙션의 '상태로' 액션이 다른 상태로 옮겨 갑니다. 버튼을 만드는 순서는 프레임 상태로 버튼 만들기에 있습니다.
프레임 시계를 열고 닫는 길
아래 길은 모두 타임라인에 그 프레임의 시계를 엽니다. 에디터는 프레임마다 마지막으로 연 시계를 기억합니다.
프레임 패널의 줄
프레임 패널의 상태 · 애니메이션 줄에는 이름과 재생 길이가 보입니다. 줄을 누르면 그 시계가 타임라인에 열리고, 열린 줄이 강조됩니다.
- 줄 클릭그 시계 열기
캔버스에서 더블클릭
애니메이션 모드에서 프레임을 더블클릭해 안으로 들어가면, 타임라인도 그 프레임의 시계로 바뀝니다.
- 프레임 더블클릭그 프레임의 시계
- 빈 캔버스 더블클릭한 단계 위로
시계 배지
애니메이션 모드에서 캔버스의 프레임 이름표 옆과 오브젝트 목록의 프레임 줄에 시계 모양과 시계 개수가 붙습니다. 이름표의 배지를 누르면 그 프레임의 시계가 열리고, 열린 시계는 파랗게 이름과 길이를 보입니다. 시계가 여럿이면 옆의 화살표나 목록의 배지로 다른 시계를 고릅니다.
- 이름표 배지 클릭시계 열기
- 화살표 · 목록 배지 클릭다른 시계 고르기
타임라인 클록
타임라인 버튼 줄 맨 앞의 '씬 › Card'입니다. 앞쪽 이름을 누르면 그 시계로 돌아갑니다. 프레임에 시계가 여럿이면 끝에 열린 시계 이름과 화살표가 붙고, 누르면 다른 시계를 고를 수 있습니다. esc 키는 한 단계 위(감싼 프레임이나 씬)로 갑니다.
- '씬' 클릭씬 시계로
- 끝 이름 클릭다른 시계 고르기
- esc한 단계 위로
프레젠테이션할 때 프레임 시계가 도는 방식
프레젠테이션 · 재생 링크 · 인터랙션 미리 보기에서 씬이 열리면, 프레임마다 처음 상태의 모습으로 놓이고 자동 재생을 켠 애니메이션이 시작됩니다. 자동 재생은 프레임마다 하나만 켤 수 있어, 하나를 켜면 다른 애니메이션의 자동 재생은 꺼집니다.
자동 재생을 켜지 않은 애니메이션과 상태는 인터랙션으로 재생합니다. 액션을 고를 때 'anim1 애니메이션 재생' · 'state2 상태로'처럼 시계 이름이 붙은 항목이 보입니다. 트리거·액션·조건에서 설명합니다.
반복하지 않는 자동 재생은 끝나면 그려 둔 모습으로 돌아갑니다
자동 재생한 애니메이션은 시계의 길이가 다 지나면 끝나고, 프레임 안의 오브젝트는 디자인 모드에서 보이는 모습으로 돌아갑니다. 끝 모습에 머물러야 한다면 프레임 시계 대신 씬의 타임라인에 키프레임을 두세요. 씬의 타임라인은 끝 모습에 머물지만, 프레젠테이션을 시작한 첫 씬에서는 첫 클릭에 재생됩니다.
프레임 시계 다듬기
일정한 빠르기로 돌리려면. 별의 0초 키프레임을 더블클릭해 모션 - 키프레임 패널을 여세요. 템플릿에서 선형을 고르고 적용을 누르면, 출발과 도착에서 느려지지 않고 같은 빠르기로 돕니다.
정지점과 작업 영역도 씁니다. 프레임 시계에도 정지점과 작업 영역을 둘 수 있습니다. 프레임 애니메이션은 정지점에서 멈추고, 그 애니메이션을 재생하는 액션이 다시 실행되면 이어서 재생합니다.
이름을 바꾸거나 지우려면. 줄 끝의 ⋯ 모양 더 보기 버튼을 누르면 이름 바꾸기 · 삭제가 있고, 상태에는 처음 상태로 지정도 있습니다. 이 시계를 부르는 인터랙션이 있으면 삭제 옆에 그 수가 보이고, 지울 때 그 인터랙션에서 이 시계를 부르는 부분도 함께 지워집니다. ⌘Z로 모두 되돌릴 수 있습니다.
이 페이지의 단축키
| 프레임 시계에서 한 단계 위로 | esc |
|---|---|
| 타임라인 화면에 맞추기 | F |
| 타임라인 재생 · 일시정지 | Space |
| 현재 씬부터 재생 | ⇧F5 |
2026년 10월 11일에 고침 · 이 페이지의 영상은 현재 에디터로 녹화했습니다.