모션 트윈을 사용하여 인포그래픽 애니메이션을 만드는 방법과 사용자 정의 패스를 따라 객체를 움직이는 방법, 액션 패널을 사용하여 팝업 창을 추가하는 방법 등을 살펴봅니다.
animated-infographic_1000x560

Adobe Illustrator 파일 가져오기

Adobe Animate에서 Adobe Illustrator 파일을 가져옵니다.

학습한 내용: Adobe Illustrator 파일을 Adobe Animate로 가져오기

  • Illustrator 문서의 레이어 구조가 Adobe Animate 타임라인 레이어로 변환되므로 Adobe Illustrator에서 먼저 레이어를 올바르게 설정하는 것이 중요합니다. Illustrator 예제 파일은 2개의 레이어로 구성되어 있습니다. 하나는 움직이는 모든 객체가 포함된 레이어, 하나는 배경 객체 레이어입니다.
  • 첫 단계로, Adobe Animate 파일을 설정합니다. Animate 시작 화면에서 고급 > HTML5 Canvas를 선택합니다. Illustrator 문서와 동일한 크기를 선택합니다. 이 예제에서는 900 X 500 픽셀입니다.
  • 파일 > 가져오기 > 스테이지로 가져오기를 선택합니다. 파일을 선택하고 모든 레이어 선택이 체크 표시되어 있는지 확인하고 가져오기를 클릭합니다. 이제 모든 객체가 배치되고 개별적으로 선택 가능합니다.
  • 애니메이션을 적용하기 전에 먼저 배경 콘텐츠를 실수로 이동하지 않도록 배경 레이어를 잠급니다. 타임라인 패널에서 Background 레이어 잠금 아이콘을 클릭합니다.

움직이는 구름 만들기

반복 모션 트윈을 만들어 움직이는 구름을 만듭니다.

학습한 내용: 모션 트윈을 만들어 움직이는 구름 만들기

  • 툴 패널에서 선택 툴을 선택합니다. 이제 스테이지에 있는 구름을 선택하고 마우스 오른쪽 버튼으로 클릭한 다음 심볼로 변환을 선택합니다.
  • 심볼로 변환 대화 상자에서 심볼 이름을 Cloud로 지정하고 확인을 클릭합니다.
  • 심볼을 만든 다음에는 애니메이션을 적용할 수 있습니다. 먼저 구름을 시작 위치 즉, 스테이지의 왼쪽 바깥쪽으로 이동합니다.
  • 구름을 두 번 클릭하여 구름 심볼 자체의 타임라인으로 이동합니다. 구름에 애니메이션을 적용할 것이므로 이 심볼 '안'으로 이동해야 합니다. 심볼 안에 있는지 확인하려면 Adobe Animate 창의 왼쪽 상단을 봅니다. 장면 1 > Cloud가 표시되어 있으면 맞습니다.
  • 이제 구름을 마우스 오른쪽 버튼으로 클릭하고 모션 트윈 만들기를 클릭하여 Cloud 심볼에 모션 트윈을 추가합니다. 그러면 왼쪽에서 오른쪽으로 이동할 수 있습니다.
  • 다시 이 구름을 심볼로 변환할지 묻는 메시지가 표시됩니다. 이제 애니메이션을 적용할 수 있습니다. 전에 심볼로 변환했었지만 지금 다시 해도 상관없습니다. 이제 확인을 클릭하면 됩니다.
  • 이제 모션 트윈이 타임라인에 자동으로 추가됩니다. 이 모션 트윈은 1초 분량의 애니메이션입니다(아직 아무것도 작동하지 않음).
  • 구름을 스테이지의 오른쪽 바깥쪽으로 이동합니다.
  • 이제 애니메이션이 만들어졌습니다. Enter 또는 Return을 눌러 확인합니다. 이 애니메이션은 1초 분량이므로 매우 빠르게 움직입니다. 다음 단계에서 이를 변경하겠습니다.
  • 타임라인 패널에서 모션 트윈의 끝 지점을 오른쪽 16초까지 드래그하여 모션 트윈을 길게 만듭니다.
  • 메뉴 막대에서 컨트롤 > 테스트를 클릭하여 브라우저에서 이 애니메이션을 테스트합니다.

풍차와 화살표 회전

회전하는 모션 트윈 애니메이션을 만듭니다.

학습한 내용: 회전하는 모션 트윈 애니메이션 만들기

  • 선택 툴로 왼쪽에 있는 풍차 날개를 선택합니다.
  • 마우스 오른쪽 버튼으로 클릭하고 심볼로 변환을 선택하여 날개를 심볼로 변환합니다.
  • 심볼로 변환 대화 상자에서 이 심볼 이름을 Windmill로 지정하고 확인을 클릭합니다.
  • 날개를 두 번 클릭하여 심볼 자체의 타임라인으로 이동합니다. 창의 왼쪽 상단에 장면 1 > Windmill이 표시되어 있어야 합니다.
  • 이제 다시 날개를 마우스 오른쪽 버튼으로 클릭하고 모션 트윈 만들기를 선택합니다.
  • 표시되는 대화 상자에서 확인을 클릭합니다.
  • 타임라인 패널에서 모션 트윈 가운데 아무 곳을 클릭합니다.
  • 속성 패널에서 회전 필드에 1을 입력합니다. 이제 날개가 1초에 한 번 회전할 것입니다.
  • Enter를 눌러 타임라인을 재생합니다.
  • 날개가 너무 빠르게 회전하므로 타임라인 패널에서 모션 트윈의 끝 지점을 오른쪽 3초까지 드래그하여 모션 트윈을 길게 만듭니다.
  • 메뉴 막대에서 컨트롤 > 테스트를 클릭하여 브라우저에서 이 애니메이션을 테스트합니다.

모션 패스를 따라 움직이는 화살표 만들기

사용자 정의 패스를 따라 움직이는 항목을 만듭니다.

학습한 내용: 사용자 정의 패스를 따라 움직이는 항목 만들기

  • 모션 패스를 따라 움직이는 화살표를 만드는 기본 단계는 이전 비디오에서 살펴본 움직이는 객체를 만드는 방법과 유사합니다.
  • 먼저 나중에 사용할 파이프라인 Illustrator 패스가 필요합니다. 나중에 사용하기 위해 먼저 이 패스를 선택하고 Command-C(macOS) 또는 Ctrl-C(Windows)를 눌러 복사합니다.
  • 선택 툴로 화살표를 선택합니다.
  • 마우스 오른쪽 버튼으로 클릭하고 심볼로 변환을 선택하여 화살표를 심볼로 변환합니다.
  • 심볼로 변환 대화 상자에서 이 심볼 이름을 arrow1로 지정하고 확인을 클릭합니다.
  • 화살표를 두 번 클릭하여 이 심볼 자체의 타임라인으로 이동합니다. 창의 왼쪽 상단에 장면 1 > arrow1이 표시되어 있어야 합니다.
  • 다시 화살표를 마우스 오른쪽 버튼으로 클릭하고 모션 트윈 만들기를 선택합니다.
  • 표시되는 대화 상자에서 확인을 클릭합니다.
  • 타임라인 패널에서 재생 헤드가 모션 트윈의 끝 지점에 있는지 확인한 다음 화살표를 스테이지에서 파이프라인 오른쪽으로 옮깁니다. 이때 Shift를 누릅니다.
  • Enter 또는 Return을 눌러 애니메이션을 테스트합니다. 애니메이션이 너무 빠르므로 타임라인 패널에서 모션 트윈의 끝 지점을 6초까지 드래그하여 길게 만듭니다.
  • 다시 Enter를 눌러 애니메이션 속도를 테스트합니다.
  • 스테이지에서 모션 패스를 선택합니다. 모션 패스를 이전에 복사한 패스로 교체할 수 있습니다. 이제 편집 > 붙여넣기를 선택합니다.
  • 패스를 약간 위로 이동하여 기본 패스에 맞게 만듭니다. 패스를 클릭한 다음 원하는 위치로 이동합니다.
  • Enter를 눌러 애니메이션을 테스트합니다. 보시는 대로 화살표가 원하는 방향으로 회전하지 않습니다. 화살표가 회전하도록 만들려면 모션 트윈을 선택한 다음 속성 패널에서 패스 방향으로 옵션을 체크 표시합니다.
  • 장면 1을 클릭하여 기본 타임라인으로 다시 이동합니다. 다른 화살표도 움직이게 만들 수 있습니다.
  • 메뉴 막대에서 컨트롤 > 테스트를 클릭하여 브라우저에서 이 애니메이션을 테스트합니다.    

인터랙티브 버튼 만들기

액션 패널에서 인터랙티브 버튼과 팝업 창을 만듭니다.

학습한 내용: 문서에 인터랙티브 요소 추가

  • 이전 비디오에서 회전하고 움직이는 객체를 만들어 보았습니다. 이제 문서에 인터랙티브 요소를 추가하겠습니다.
  • 이 튜토리얼을 간단하게 살펴보기 위해 인터랙티브 요소의 작동 방식을 보여주는 이 새로운 빈 문서를 엽니다.
  • 브러우저에서 이 문서를 테스트합니다. 컨트롤 > 테스트를 선택합니다.
  • 보시는 대로 이 문서에는 반복하는 애니메이션이 포함되어 있습니다. 팝업 창이 열리고 닫히는 동작을 반복합니다. 먼저 이 애니메이션을 중지하는 몇 가지 중지 액션을 추가한 다음 사용자가 클릭할 때 애니메이션이 시작하도록 버튼에 몇 가지 액션을 추가하겠습니다.
  • Adobe Animate에서 버튼의 오른쪽에 있는 팝업을 두 번 클릭합니다.
  • Enter 또는 Return을 눌러 애니메이션을 테스트합니다.
  • 팝업 애니메이션이 표시되는데, 첫 번째 프레임에서 중지해 보겠습니다. 이미 만들어져 있는 Actions 레이어에서 첫 번째 프레임을 클릭합니다.
  • 윈도우 > 액션으로 이동하여 액션 패널을 엽니다. 액션 마법사를 사용하여 일부 코드를 추가할 수 있습니다.
  • 마법사를 통해 액션 추가 아이콘을 클릭하면 됩니다. 타임라인의 이 지점에서 작동할 액션을 지정해야 합니다. 이 예제에서는 애니메이션을 중지해야 하므로 첫 번째 메뉴에서 아래로 스크롤하고 Stop을 클릭합니다.
  • 다음 메뉴에서 This timeline을 클릭한 후 다음 버튼을 클릭하여 다음 단계로 이동하고 With this frame을 클릭합니다. 종료 및 추가를 클릭하여 코드를 추가합니다.
  • 10번째 프레임에도 이러한 단계를 반복합니다. 사용자가 버튼을 클릭할 때 다시 애니메이션이 중지해야 하므로 타임라인 패널에서 10번째 프레임을 선택하고 마법사를 통해 액션 추가 버튼을 클릭한 다음 첫 번째 메뉴에서 아래로 스크롤하고 Stop을 클릭합니다. This timeline을 클릭한 후 다음 버튼을 클릭하고 With this frame을 클릭한 다음 종료 및 추가를 클릭합니다.
  • 모든 Stop 액션이 추가되었습니다. 장면 1을 클릭하여 장면 1로 다시 이동합니다.
  • 인터랙티브 요소를 추가하기 전에 기본 타임라인에서 모든 심볼 인스턴스의 이름을 지정해야 합니다. 선택 툴로 정보 버튼을 클릭하고 속성 패널에서 인스턴스 이름 필드에 info_button을 입력합니다.
  • 팝업 인스턴스를 선택하고 인스턴스 이름 필드에 popup을 입력합니다.
  • Actions 레이어의 첫 번째 프레임에 실제 인터랙티브 요소를 추가합니다. 타임라인 패널에서 프레임 1을 클릭한 다음 액션 패널에 액세스합니다.
  • 마법사를 통해 액션 추가 버튼을 클릭합니다. 첫 번째 메뉴에서 아래로 스크롤하고 Play를 클릭합니다. 정보 버튼을 클릭할 때 팝업 애니메이션이 재생해야 하므로 다음 필드에서 popup을 클릭해야 합니다.
  • 다음을 클릭합니다. 이제 애니메이션을 시작하는 트리거를 지정해야 합니다. 이는 마우스 클릭이므로 On Mouse Click을 선택합니다. 사용자가 info_button을 클릭할 것이므로 다음 필드에서 info_button을 선택해야 합니다. 종료 및 추가를 클릭합니다.
  • 코드가 첫 번째 프레임에 추가되었습니다.
  • 인터랙티브 요소가 완성되었습니다. 메뉴 막대에서 컨트롤 > 테스트를 선택하여 브라우저에서 테스트합니다.
09/23/2019

발표자: Rob de Winter

트레이닝 회사: DWM Trainingen

이 페이지가 도움이 되었습니까?