Animate에서 타임라인을 사용하는 방법

Adobe Animate의 타임라인은 시간별 문서 내용을 레이어와 프레임으로 정리하고 제어합니다. 영화와 같이 Animate 문서는 시간 길이를 프레임으로 나눕니다. 레이어는 스테이지에 표시될 이미지가 포함된 필름 조각과 같으며, 여러 개를 겹쳐서 표시할 수 있습니다. 타임라인의 주요 구성 요소는 레이어, 프레임 및 재생 헤드입니다.

타임라인은 프레임별 애니메이션, 트위닝된 애니메이션 및 모션 경로를 비롯하여 문서에서 애니메이션을 실행하는 위치를 표시합니다. 타임라인의 레이어 섹션에 있는 컨트롤을 사용하면 레이어를 표시하거나 숨기고 잠그거나 잠금 해제할 수 있을 뿐만 아니라, 레이어 내용을 외곽선으로 표시할 수 있습니다. 타임라인 프레임을 동일한 레이어의 새 위치 또는 다른 레이어로 드래그할 수 있습니다.

최신형 타임라인

타임라인 패널의 디자인이 개선되어 프레임 간격이 명확하게 표시되며 프레임 및 시간 표시자를 더 쉽게 읽을 수 있습니다. 또한 어니언 스키닝이 향상되었고, 키프레임/빈 프레임 등을 만드는 데 사용할 수 있는 버튼도 추가되었습니다.

타임라인 컨트롤

이제는 타임라인 머리글의 전면에 추가 기능이 표시되므로 타임라인을 더욱 유용하게 활용할 수 있습니다.

레이어 보기

카메라

카메라를 활성화/비활성화하려면 카메라 버튼을 클릭합니다.

레이어 부모/자식 관리

레이어의 부모/자식 관리 계층이 표시됩니다.

레이어 심도

레이어 심도 패널을 만들고 목록에서 제공되는 활성 레이어의 심도를 수정할 수 있습니다. 

어니언 스키닝

어니언 스키닝 기능이 더욱 간편하게 개선되었습니다. 어니언 스킨 버튼을 클릭하여 어니언 스키닝를 활성화할 수 있습니다. 또한 어니언 스킨 범위 내의 아무 어니언 스킨 프레임이나 마우스 오른쪽 버튼으로 클릭하여 프레임을 선택적으로 포함/제거할 수 있도록 어니언 스키닝이 더욱 향상되었습니다. 

다음 중 하나를 수행합니다.

• 어니언 스킨 버튼 을 클릭하여 어니언 스키닝을 활성화하거나 비활성화합니다. 어니언 스키닝이 활성화되면 타임라인 머리글에서 시작 어니언 스킨과 끝 어니언 스킨 표시자 사이의 모든 프레임이 문서 윈도우에서 프레임 하나로 겹쳐 쌓입니다.
• 어니언 스킨 버튼 을 마우스로 길게 클릭하면 선택한 범위, 모든 프레임, 앵커 표시자, 고급 설정 등의 옵션을 보고 선택할 수 있습니다.
• 타임라인에서 어니언 스킨 아이콘 (루프 아이콘 왼쪽의 아이콘)을 선택합니다. 

이 패널의 어니언 스킨 매개 변수 중 일부는 윤곽선 모드, 어니언 스킨 이전/미래 프레임 색상 환경 설정, 앵커 표시자 등의 기존 기능입니다:.

• 키프레임 전용 모드: 어니언 스킨 범위의 키프레임만 렌더링하고 트윈 프레임 사이의 키프레임은 건너뜁니다.
• 시작 불투명도: 활성 프레임 한쪽의 첫 번째 어니언 스킨 프레임 불투명도입니다.
• 감소 단위: 모든 어니언 스킨 프레임의 델타 감소 백분율입니다.
• 제한: 제한을 활성화하면 이전 프레임과 다음 프레임의 범위가 동일하게 설정됩니다. 제한을 활성화하지 않는 경우에는 사용자가 타임라인에서 범위를 편집할 수 있습니다.

자세한 내용은 어니언 스키닝 사용을 참조하십시오.

여러 프레임 편집

이 설정을 사용하면 선택한 범위 내의 여러 프레임 내용을 확인하고 편집할 수 있습니다.

여러 프레임 편집 버튼을 마우스로 클릭한 상태로 선택한 범위 편집을 표시하여 선택하면 모든 프레임을 편집할 수 있습니다. 이 버튼을 클릭해 여러 프레임 편집 모드를 활성화/비활성화합니다.

트윈 만들기

트윈 만들기 아이콘을 마우스로 길게 클릭하면 옵션을 보고 선택할 수 있습니다. 타임라인에서 프레임 범위를 선택하고 트윈 만들기를 클릭하여 최근에 선택한 항목에 따라 트윈을 만듭니다.

타임라인 모양 변경

기본적으로 타임라인은 기본 문서 윈도우 아래에 표시됩니다. 타임라인의 위치를 변경하려면 타임라인을 문서 윈도우에서 분리하고 고유한 윈도우에서 띄웁니다. 타임라인을 선택한 다른 패널에 고정할 수 있습니다. 타임라인을 숨길 수도 있습니다.

표시되는 레이어와 프레임의 수를 변경하려면 타임라인의 크기를 조절합니다. 타임라인에 표시 가능한 것보다 더 많은 레이어가 있을 때 추가 레이어를 보려면 타임라인 오른쪽에 있는 스크롤 막대를 사용합니다.

• 문서 윈도우에 결합된 타임라인을 이동하려면 타임라인의 왼쪽 위 모서리에 있는 제목 표시줄 탭을 드래그합니다.

• 분리된 타임라인을 애플리케이션 윈도우에 결합하려면 제목 표시줄 탭을 문서 윈도우의 맨 위 또는 맨 아래로 드래그합니다.

• 분리된 타임라인을 다른 패널에 결합하려면 타임라인 제목 막대 탭을 선택한 위치로 드래그합니다. 타임라인이 다른 패널에 결합되지 않게 하려면 Ctrl 키를 누른 상태에서 드래그합니다. 타임라인이 결합되는 위치를 나타내는 파란색 막대가 나타납니다.

• [타임라인] 패널에서 레이어 이름 필드의 길이를 늘리거나 줄이려면 타임라인의 레이어 이름과 프레임 부분을 구분하는 막대를 드래그합니다.

타임라인 보기 사용자 정의

타임라인에서 레이어 높이 변경

레이어 색상 표시 및 고정

레이어 이름 바로 뒤에 표시되는 점을 클릭하여 쉽게 식별 가능하도록 레이어를 고정하거나 특정 색상으로 표시할 수 있습니다. 이 기능을 활성화하면 레이어를 빠르게 알아볼 수 있도록 레이어 윤곽선 색상이 지정된 밑줄이 레이어를 가로질러 표시됩니다. 

레이어 불투명도 설정

다음 중 하나를 수행합니다.

• 표시 여부를 불투명으로 설정하려면 타임라인의 눈 모양 열을 Shift 키를 누른 상태에서 클릭합니다.
  
• 타임라인에서 해당 레이어 아이콘(레이어 이름 왼쪽에 있는 아이콘)을 두 번 클릭합니다.
• 레이어 이름을 마우스 오른쪽 버튼으로 클릭(Windows)하거나 Command 키를 누른 상태에서 클릭(Macintosh)한 후 컨텍스트 메뉴에서 속성을 선택합니다. 레이어 속성 대화 상자에서 표시 여부 > 불투명을 선택합니다.
• 레이어 이름을 마우스 오른쪽 버튼으로 클릭(Windows)하거나 Command+클릭(Macintosh)하고 다른 항목을 투명하게 표시
  를 선택합니다.

타임라인 패널의 크기 조절

• 타임라인이 주 애플리케이션 윈도우에 결합된 경우 스테이지 영역에서 타임라인을 구분하는 막대를 드래그합니다.

• 타임라인이 주 애플리케이션 윈도우에 고정되어 있지 않은 경우 오른쪽 하단 모서리(Windows) 또는 오른쪽 하단 모서리의 크기 상자(Macintosh)를 드래그합니다.

문서가 재생되는 동안 타임라인 맨 위에 있는 빨강 재생 헤드가 이동하여 스테이지에 현재 표시된 프레임을 보여 줍니다. 타임라인 헤더는 애니메이션의 프레임 번호를 보여 줍니다. 스테이지에 프레임을 표시하려면 재생 헤드를 타임라인의 프레임으로 이동합니다.

많은 프레임으로 작업할 때 특정 프레임을 표시하려면 타임라인을 따라 재생 헤드를 이동합니다.

• 특정 프레임으로 이동하려면 타임라인 헤더에서 프레임 위치를 클릭하거나 재생 헤드를 원하는 위치로 드래그합니다.

• 현재 프레임이 타임라인의 가운데 오도록 하려면 타임라인의 아래쪽에서 [가운데 프레임] 버튼을 클릭합니다.

• 이제 루프 섹션 위로 드래그하여 루프 범위를 만들 수 있습니다. 이렇게 하면 선택한 범위에서 프레임을 동영상이나 비디오로 내보낼 수 있습니다.
• 타임라인에서 루프 옵션을 설정하여 다른 애니메이션의 일정 프레임 범위 내에서 스트리밍 오디오를 루핑할 수도 있습니다.

프레임과 함께 시간 보기

타임라인에는 초 단위 시간이 프레임 번호와 함께 표시됩니다. 이 기능을 사용하면 프레임에서 시간으로 보다 빠르게 변환할 수 있을 뿐 아니라 애니메이션 프로세스 전반에 걸쳐 설정한 FPS(초당 프레임 수) 값을 기억할 수 있습니다. 

다음 스냅샷의 타임라인에는 FPS(초당 프레임 수)가 20으로 표시되어 있습니다. 

애니메이션 속도 관리

프레임 범위의 크기를 조절하고 시간 간격을 기준으로 애니메이션을 적용하여 애니메이션 속도를 관리하거나 타임라인 컨트롤을 사용하여 애니메이션을 확장 및 압축할 수 있습니다. 

프레임 범위 크기 조절

애니메이션 속도를 변경하지 않고도 애니메이션의 초당 프레임 수(fps)를 변경할 수 있습니다. fps를 변경할 때 시간을 그대로 유지하려면 프레임 범위 조절을 사용합니다. 

시간 간격을 기준으로 애니메이션 적용

프레임 범위를 1초, 2초, 3초 또는 원하는 간격으로 설정할 수 있습니다. 이 기능은 클래식 트윈 범위, 모양 트윈 범위, 모션 트윈 범위, 키프레임 범위 또는 빈 키프레임 범위에서 작동합니다.

프레임별 애니메이션으로 변환 옵션은 수정 메뉴에서 사용할 수 있습니다. [키보드 단축기] 대화 상자에서 원하는 키를 할당하여 이러한 작업을 수행할 수도 있습니다. 

타임라인 컨트롤을 사용하여 애니메이션 확장 또는 압축

이제는 프레임 범위 확장 필드에서 원하는 수의 프레임을 입력하여 선택한 프레임의 프레임 지속 시간을 연장할 수 있습니다. 선택한 프레임의 지속 시간은 프레임 범위 확장에 입력한 수만큼 길어집니다.

타임라인에서 선택한 범위의 시간을 연장하거나 단축할 수 있습니다. 프레임 범위를 선택하고 타임라인에서 선택한 범위의 오른쪽 가장자리를 앞이나 뒤로 드래그합니다. 타임라인 내의 프레임이 자동으로 조정됩니다.

타임라인에서 프레임 범위를 드래그하여 애니메이션을 여러 배(2배, 3배 등)의 크기로 복제할 수 있습니다. 또한 확장한 프레임은 표준 위치로 압축할 수도 있습니다. 

타임라인에서 프레임을 선택하고 선택한 프레임의 강조 표시된 오른쪽 가장자리를 클릭하여 드래그합니다.

다음 스크린샷과 같이 드래그하는 동안 애니메이션을 2배, 3배 등 배로 확장하여 확인할 수 있습니다. 

다음 스크린샷에서는 2배로 확장된 범위를 확인할 수 있습니다. 2배는 선택한 범위 크기의 2배를 의미합니다. 3배는 범위 원래 크기의 3배를 의미합니다. 

이제는 프레임 범위 확장 필드에 원하는 숫자를 입력하여 프레임 지속 시간을 연장할 수 있습니다. 선택한 프레임의 지속 시간은 시간 범위 확장에 입력한 프레임 수만큼 길어집니다.

타임라인 탐색

키프레임 탐색

이제는 한 프레임 뒤로 이동 또는 한 프레임 앞으로 이동 버튼을 클릭하여 이전 프레임이나 다음 프레임으로 이동할 수 있습니다. 그리고 한 프레임 뒤로 이동 또는 한 프레임 앞으로 이동 버튼을 마우스로 클릭한 상태로 각각 첫 번째 프레임이나 마지막 프레임으로 이동할 수도 있습니다.

재생 버튼을 클릭하여 애니메이션 미리 보기를 확인합니다.

컨트롤 메뉴를 사용하여 활성 레이어에서 키프레임 간에 탐색할 수 있습니다. 또한 Alt+. 및 Alt+,를 사용하여 타임라인에서 다음 키프레임 또는 이전 키프레임으로 각각 이동할 수 있습니다. 

레이어에서 왼쪽 및 오른쪽 컨트롤을 사용하여 활성 레이어의 키 프레임 간을 이동할 수 있습니다. 또한 메뉴와 키보드 단축키도 사용할 수 있습니다. 

프레임 및 키프레임 삽입

이제는 타임라인 패널에서 키프레임 또는 빈 키프레임을 삽입하면 시각적 피드백이 표시됩니다. 그리고 작업이 수행되었음을 나타내는 후광 효과가 희미하게 표시됩니다.

활성 레이어 전용 모드

타임라인 보기 아이콘이 수정되어 활성 레이어 전용이라는 새 모드가 추가되었습니다. 타임라인에서 활성 레이어만 확인하려면 타임라인 보기 옵션을 마우스로 클릭한 상태로 활성 레이어 전용을 선택합니다. 

스테이지에서 타임라인 패닝

• 이제 손 모양 도구를 사용하여 타임라인을 수평으로 움직일 수 있습니다.
• 새로운 시간 스크럽 도구를 사용하면 스테이지에서 직접 타임라인을 스크럽할 수 있습니다. 이 도구는 [도구] 패널에서 [손] 도구와 함께 그룹화되어 있습니다. 스페이스바+T 키보드 단축키를 사용하여 이 툴을 일시적으로 활성화할 수도 있습니다. 왼쪽이나 오른쪽으로 드래그하여 팬 방향으로 타임라인을 확인합니다. 

사용자 정의가 가능한 타임라인 도구 모음

사용자 정의가 가능한 타임라인을 사용하여 타임라인 도구 모음에 표시할 동작 버튼을 선택할 수 있습니다. 타임라인의 햄버거 메뉴에서 타임라인 도구 사용자 정의를 클릭합니다.

타임라인 도구 모음에서 추가하거나 제거할 수 있는 도구 모음 버튼이 있는 패널이 표시됩니다. 패널 바깥쪽의 아무 곳이나 클릭하여 패널을 닫습니다. 패널이 열려 있으면 타임라인 도구 모음에 표시된 버튼이 패널에서 선택됩니다. 버튼 선택을 전환하려면 해당 버튼을 클릭합니다. 변경된 내용이 타임라인 도구 모음에 바로 표시됩니다. 

비디오를 통해 타임라인을 사용자 정의하는 방법을 살펴봅니다.

다음 단계?

지금까지 타임라인을 사용하고 개인화하는 방법을 살펴보았습니다. 이제 에셋 패널
을 사용하여 애니메이션을 만드는 방법에 대해 살펴보겠습니다.