사용 안내서 취소

Animate의 애니메이션 기본 사항

  1. Adobe Animate 사용 안내서
  2. Animate 소개
    1. Animate의 새로운 기능
    2. 시각적 용어집
    3. Animate 시스템 요구 사항
    4. Animate 키보드 단축키
    5. Animate에서 여러 파일 유형을 사용하여 작업하기
  3. 애니메이션
    1. Animate의 애니메이션 기본 사항
    2. Animate에서 프레임 및 키프레임을 사용하는 방법
    3. Animate의 프레임별 애니메이션
    4. Animate에서 클래식 트윈 애니메이션으로 작업하는 방법
    5. 브러시 도구
    6. 모션 안내선
    7. 모션 트윈 및 ActionScript 3.0
    8. 모션 트윈 애니메이션 정보
    9. 모션 트윈 애니메이션
    10. 모션 트윈 애니메이션 만들기
    11. 속성 키프레임 사용
    12. 트윈으로 위치에 애니메이션 적용
    13. 모션 편집기를 사용하여 모션 트윈을 편집하는 방법
    14. 트윈 애니메이션의 모션 경로 편집
    15. 모션 트윈 조작
    16. 사용자 정의 속도 추가
    17. 모션 사전 설정 만들기 및 적용
    18. 애니메이션 트윈 범위 설정
    19. XML 파일로 저장한 모션 트윈을 사용한 작업
    20. 모션 트윈과 클래식 트윈의 비교
    21. 모양 트윈 만들기
    22. Animate에서 뼈 도구 애니메이션 사용하기
    23. Animate에서 캐릭터 리깅으로 작업하기
    24. Adobe Animate에서 마스크 레이어를 사용하는 방법
    25. Animate에서 장면으로 작업하는 방법
  4. 대화형 기능
    1. Animate로 버튼을 만드는 방법
    2. Animate 프로젝트를 다른 문서 유형 포맷으로 변환
    3. Animate에서 HTML5 Canvas 문서를 만들고 게시하기
    4. Animate에서 코드 조각을 사용하여 대화형 기능 추가하기
    5. 사용자 정의 HTML5 구성 요소 만들기
    6. HTML5 Canvas의 구성 요소 사용
    7. 사용자 정의 구성 요소 만들기: 예제
    8. 사용자 정의 구성 요소의 코드 조각
    9. 모범 사례 - Animate를 사용한 광고
    10. 가상 현실 제작 및 게시
  5. 작업 영역 및 작업 과정
    1. 칠 브러시 만들기 및 관리
    2. HTML5 Canvas 문서에서 Google Fonts 사용
    3. Creative Cloud 라이브러리와 Adobe Animate 사용
    4. Animate의 스테이지 및 도구 패널 사용
    5. Animate 작업 과정 및 작업 영역
    6. HTML5 Canvas 문서에서 웹 글꼴 사용
    7. 타임라인과 ActionScript
    8. 여러 타임라인을 사용한 작업
    9. 환경 설정
    10. Animate 제작 패널 사용
    11. Animate로 타임라인 레이어 만들기
    12. 모바일 앱 및 게임 엔진용으로 애니메이션 내보내기
    13. 객체 이동 및 복사
    14. 템플릿
    15. Animate의 찾기 및 바꾸기
    16. 실행 취소, 다시 실행 및 작업 내역 패널
    17. 키보드 단축키
    18. Animate에서 타임라인을 사용하는 방법
    19. HTML 확장 만들기
    20. 이미지 및 애니메이션 GIF에 대한 최적화 옵션
    21. 이미지 및 GIF에 대한 내보내기 설정
    22. Animate의 에셋 패널
  6. 멀티미디어 및 비디오
    1. Animate의 그래픽 객체 변형 및 결합
    2. Animate에서 심볼 인스턴스를 만들고 작업하기
    3. 이미지 추적
    4. Adobe Animate에서 사운드를 사용하는 방법
    5. SVG 파일 내보내기
    6. Animate에서 사용할 비디오 파일 만들기
    7. Animate에서 비디오를 추가하는 방법
    8. 비디오 큐 포인트를 사용한 작업
    9. Animate로 객체 그리고 만들기
    10. 선 및 모양 변형
    11. Animate CC의 획, 채우기 및 그래디언트
    12. Adobe Premiere Pro 및 After Effects 작업
    13. Animate CC의 색상 패널
    14. Animate에서 Flash CS6 파일 열기
    15. Animate의 클래식 텍스트 작업
    16. Animate에 아트워크 가져오기
    17. Animate의 가져온 비트맵
    18. 3D 그래픽
    19. Animate의 심볼 작업
    20. Adobe Animate로 선 및 모양 그리기
    21. Animate의 라이브러리 작업
    22. 사운드 내보내기
    23. Animate CC의 객체 선택
    24. Animate의 Illustrator AI 파일 작업
    25. 스프레이 브러시 도구로 패턴 적용하기
    26. 블렌드 모드 적용
    27. 객체 배열
    28. 명령 메뉴를 사용한 작업 자동화
    29. 다국어 텍스트
    30. Animate에서 카메라 사용하기
    31. Animate를 Adobe Scout와 함께 사용하기
    32. Fireworks 파일 작업
    33. 그래픽 필터
    34. 사운드 및 ActionScript
    35. 드로잉 환경 설정
    36. 펜 도구로 그리기
  7. 플랫폼
    1. Animate 프로젝트를 다른 문서 유형 포맷으로 변환
    2. 사용자 정의 플랫폼 지원
    3. Animate에서 HTML5 Canvas 문서 만들고 게시하기
    4. WebGL 문서 만들고 게시하기
    5. iOS용 AIR에 맞추어 애플리케이션을 패키징하는 방법
    6. Android용 AIR 애플리케이션 게시
    7. 데스크톱용 Adobe AIR에 맞춘 게시
    8. ActionScript 게시 설정
    9. 모범 사례 - 애플리케이션에서 ActionScript 구성
    10. Animate에서 ActionScript를 사용하는 방법
    11. 모범 사례 - 액세스 가능성 지침
    12. Animate 작업 영역의 액세스 가능성
    13. 스크립트 작성 및 관리
    14. 사용자 정의 플랫폼에 대한 지원 활성화
    15. 사용자 정의 플랫폼 지원 개요
    16. 액세스 가능한 콘텐츠 만들기
    17. 사용자 정의 플랫폼 지원 플러그인 작업
    18. ActionScript 3.0 디버깅
    19. 사용자 정의 플랫폼에 대한 지원 활성화
  8. 내보내기 및 게시
    1. Animate CC에서 파일을 내보내는 방법
    2. OAM 게시
    3. SVG 파일 내보내기
    4. Animate를 사용하여 그래픽 및 비디오 내보내기
    5. AS3 문서 게시
    6. 모바일 앱 및 게임 엔진용으로 애니메이션 내보내기
    7. 사운드 내보내기
    8. QuickTime 비디오 파일 내보내기
    9. ActionScript로 외부 비디오 재생 제어하기
    10. 모범 사례 - 모바일 장치 콘텐츠 만들기 팁
    11. 모범 사례 - 비디오 규칙
    12. 모범 사례 - SWF 애플리케이션 제작 지침
    13. 모범 사례 - FLA 파일 구조화
    14. Animate용 FLA 파일을 최적화하는 모범 사례
    15. ActionScript 게시 설정
    16. Animate용 게시 설정 지정
    17. 프로젝터 파일 내보내기
    18. 이미지 및 애니메이션 GIF 내보내기
    19. HTML 게시 템플릿
    20. Adobe Premiere Pro 및 After Effects 작업
    21. 애니메이션의 빠른 공유 및 게시

Animate (이전의 Flash Professional CC)의 요소 대부분과 마찬가지로, 애니메이션에는 ActionScript가 필요하지 않습니다. 하지만 원하는 경우에는 ActionScript를 사용하여 애니메이션을 만들 수 있습니다.

애니메이션의 유형

Animate에서는 여러 가지 방법으로 애니메이션 및 특수 효과를 만들 수 있습니다. 각 방법을 사용하여 다양하고 흥미로운 애니메이션 내용을 만들어 보십시오.

Animate에서는 다음과 같은 유형의 애니메이션을 지원합니다.

모션 트윈

모션 트윈을 사용하여 한 프레임에서 위치 및 알파 투명도와 같은 객체 속성을 설정하고 다른 프레임에서 다시 설정할 수 있습니다. 그러면 Animate에서 그 사이 프레임에 속성 값을 보간합니다. 모션 트윈은 객체의 연속적인 모션 또는 변형으로 구성된 애니메이션을 만들 때 유용합니다. 모션 트윈은 타임라인에 연속된 프레임 범위로 나타나며 기본적으로 단일 객체로 선택 가능합니다. 모션 트윈은 기능이 강력하고 만들기 쉽습니다.

클래식 트윈

클래식 트윈은 모션 트윈과 비슷하지만 조금 더 만들기 복잡합니다. 클래식 트윈은 범위에 따른 트윈으로 나타낼 수 없는 일부 특정 애니메이션 효과에 사용됩니다.

역기구학 포즈(Animate에서 더 이상 사용 안 됨)

역기구학 포즈를 사용하면 모양 객체를 잡아당기거나 구부리고 심볼 인스턴스 그룹을 연결하여 이들이 자연스럽게 함께 움직이도록 할 수 있습니다. 뼈를 모양 또는 심볼 그룹에 추가한 이후에는 서로 다른 키프레임에서 뼈 또는 심볼의 위치를 변경할 수 있습니다. Animate는 중간의 프레임에서 위치를 보간합니다.

모양 트윈

모양 트위닝의 경우 타임라인의 특정 프레임에 모양을 그리고 또 다른 특정 프레임에 해당 모양을 변경하거나 다른 모양을 그립니다. 그러면 Animate에서 그 사이 프레임에 중간 모양을 삽입하여 한 모양이 다른 모양으로 변형되는 애니메이션을 만듭니다.

프레임별 애니메이션

이 애니메이션 기법은 타임라인에서 각 프레임에 서로 다른 아트를 지정할 수 있습니다. 이 기법을 사용하여 빠르고 연속적으로 재생되는 필름 프레임 같은 효과를 만들 수 있습니다. 이 기법은 각 프레임의 그래픽 요소가 서로 다른 복잡한 애니메이션을 만들 때 유용합니다.

프레임 속도

애니메이션이 재생되는 속도인 프레임 속도는 초당 프레임(fps) 수로 측정됩니다. 프레임 속도가 너무 느리면 애니메이션이 멈췄다 움직였다 하는 것처럼 보이고 너무 빠르면 애니메이션의 세부적인 내용이 흐리게 보일 수 있습니다. 새 Animate 문서에서 프레임 속도의 기본값은 24fps이며 대개 웹에서 최적의 결과를 가져옵니다. 일반 영화의 표준 속도도 24fps입니다.

애니메이션의 복잡성과 애니메이션이 재생되는 컴퓨터의 처리 속도에 따라 얼마나 부드럽게 재생되는지가 결정됩니다. 최적의 프레임 속도를 결정하려면 다양한 시스템에서 애니메이션을 테스트해 보십시오.

전체 Animate 문서에 대한 프레임 속도는 한 번만 지정하므로 애니메이션을 만들기 전에 이 속도를 먼저 설정해야 합니다.

타임라인에서 애니메이션 식별

Animate에서는 내용이 들어 있는 각 프레임에 서로 다른 표시기를 표시하여 타임라인에서 트위닝된 애니메이션과 프레임별 애니메이션을 구분합니다.

타임라인에 표시되는 프레임 내용 표시기는 다음과 같습니다.

  • 파란색 배경의 프레임 범위는 모션 트윈을 나타냅니다. 범위의 첫 번째 프레임에 검정 점이 있는 경우 트윈 범위에 대상 객체가 할당되어 있음을 나타냅니다. 검정 마름모는 마지막 프레임 및 기타 속성 키프레임을 나타냅니다. 속성 키프레임은 사용자가 명시적으로 정의한 속성 변경 사항이 포함된 프레임입니다. 모션 트윈 범위를 마우스 오른쪽 버튼으로 클릭(Windows)하거나 Command 키를 누른 상태에서 클릭(Macintosh)하고 컨텍스트 메뉴에서 [키프레임 보기] > 유형을 선택하여 표시할 속성 키프레임의 유형을 선택할 수 있습니다. Animate에서는 기본적으로 모든 유형의 속성 키프레임을 표시합니다. 해당 범위에 있는 기타 모든 프레임에는 대상 객체의 트위닝된 속성에 대한 보간 값이 포함되어 있습니다.

     

     

  • 첫 번째 프레임의 빈 점은 모션 트윈의 대상 객체가 제거되었음을 나타냅니다. 트윈 범위에는 여전히 속성 키프레임이 포함되어 있으며 새로운 대상 객체를 적용할 수 있습니다.

     

     

  • 녹색 배경의 프레임 범위는 역기구학(IK) 포즈 레이어를 나타냅니다. 포즈 레이어는 IK 뼈대와 포즈를 포함합니다. 각 포즈는 타임라인에 검정 마름모로 나타납니다. Animate에서 포즈 사이의 프레임에 뼈대 위치를 보간합니다.

     

     

  • 클래식 트윈의 경우 파란색 배경과 검정 화살표와 함께 시작 키프레임에 검정 점이 표시됩니다.

     

     

  • 파선은 마지막 키프레임 누락 등 클래식 트윈이 제대로 구성되지 않았음을 나타냅니다.

     

     

  • 모양 트윈의 경우 연한 녹색 배경과 검정 화살표와 함께 시작 키프레임에 검정 점이 표시됩니다.

     

     

  • 단일 키프레임의 경우 검정 점이 표시됩니다. 단일 키프레임 뒤의 연한 회색 프레임은 변경 사항 없는 동일한 내용을 포함합니다. 이러한 프레임에서는 범위의 마지막 프레임에 검정 수직 선과 함께 빈 사각형이 표시됩니다.

     

     

  • [액션] 패널에서 프레임 액션을 지정한 프레임의 경우 소문자 a가 표시됩니다.

     

     

  • 프레임에 레이블이 포함되어 있는 경우 빨간색 깃발이 표시됩니다.

     

     

  • 프레임에 주석이 포함되어 있는 경우 녹색 이중 슬래시가 표시됩니다.

     

     

  • 프레임이 지정된 앵커인 경우 금색 닻 그림이 표시됩니다.

     

트위닝된 애니메이션의 레이어

Animate 문서의 각 장면은 여러 타임라인 레이어로 구성할 수 있습니다. 레이어와 레이어 폴더를 사용하여 애니메이션 시퀀스의 내용을 구성하고 애니메이션 객체를 분리할 수 있습니다. 이와 같이 레이어와 폴더로 구성하면 객체가 서로 겹치는 경우 지워지거나 연결되거나 분리되지 않습니다. 둘 이상의 심볼 또는 텍스트 필드의 트위닝된 이동을 포함하는 애니메이션을 즉시 만들려면 각 객체를 별도의 레이어에 배치합니다. 한 레이어를 정적 아트워크를 포함하는 배경 레이어로 사용하고, 추가 레이어마다 별도의 애니메이션 객체를 하나씩 넣을 수 있습니다.

모션 트윈을 만들면 Animate에서는 트위닝하려고 선택한 객체가 들어 있는 레이어를 트윈 레이어로 변환합니다. 타임라인의 트윈 레이어에는 레이어 이름 옆에 트윈 아이콘이 표시됩니다.

다른 객체가 트위닝된 객체로 같은 레이어에 있는 경우 Animate에서 필요에 따라 원래 레이어 위 또는 아래에 새로운 레이어를 추가합니다. 원래 레이어에서 트위닝된 객체 아래 있던 객체는 원래 레이어 아래 새 레이어로 이동됩니다. 원래 레이어에서 트위닝된 객체 위에 있던 객체는 원래 레이어 위의 새 레이어로 이동합니다. Animate에서는 이러한 새 레이어를 타임라인의 기존 레이어 사이에 삽입합니다. 이런 식으로 Animate에서는 스테이지에 있는 모든 그래픽 객체의 원래 쌓인 순서를 유지합니다.

트윈 레이어에는 트윈 범위(트윈을 포함하는 연속된 프레임 그룹), 정적 프레임, 빈 키프레임 또는 빈 프레임만 포함될 수 있습니다. 각 트윈 범위에는 단일 대상 객체 및 대상 객체에 대한 선택적 모션 경로만 포함될 수 있습니다. 트윈 레이어에서는 그릴 수 없으므로 다른 레이어에서 추가 트윈 또는 정적 프레임을 만든 다음 트윈 레이어로 드래그해야 합니다. 트윈 레이어에 프레임 스크립트를 배치하려면 다른 레이어에 프레임 스크립트를 만든 다음 트윈 레이어로 드래그하십시오. 프레임 스크립트는 모션 트윈 범위 밖의 프레임에만 위치할 수 있습니다. 일반적으로 모든 프레임 스크립트는 ActionScript만 들어 있는 별도의 레이어에 두는 것이 가장 좋습니다.

문서에 여러 개의 레이어가 있는 경우 한 개 이상의 레이어에 있는 객체를 추적 및 편집하기 어려울 수 있습니다. 이런 작업을 해야 하는 경우에는 한 번에 한 개의 레이어 내용만 다루는 것이 더 쉽습니다. 현재 작업하지 않는 레이어를 숨기거나 잠그려면 타임라인에서 레이어 이름 옆에 있는 눈 또는 자물쇠 모양 아이콘을 클릭하십시오. 레이어 폴더를 사용하여 레이어를 관리가 가능한 그룹으로 구성할 수 있습니다.

트위닝된 애니메이션을 위해 레이어에 객체 배포

객체에 모션 트윈을 적용하면 Animate에서 자동으로 객체를 자체 트윈 레이어로 이동합니다. 그러나 객체를 직접 별도의 레이어에 배포할 수도 있습니다. 예를 들어, 내용을 구성할 때 직접 객체를 배포하도록 선택할 수 있습니다. 또한 객체가 레이어 간에 이동하는 방법을 정확히 제어하면서 객체에 애니메이션을 적용하려는 경우에도 수동 배포가 유용합니다.

[레이어에 배포] 명령([수정] > [타임라인] > [레이어에 배포])을 사용하면 Animate에서 선택된 각 객체를 별도의 새로운 레이어에 배포합니다. 다른 프레임의 객체를 포함하여 선택하지 않은 객체는 원래 레이어에 그대로 유지됩니다.

스테이지에서 그래픽 객체, 인스턴스, 비트맵, 비디오 클립, 분리된 텍스트 블록 등의 요소에 대해 [레이어에 배포] 명령을 적용할 수 있습니다.

레이어에 배포 명령으로 만들어진 새 레이어

[레이어에 배포] 작업을 하는 동안 만들어진 새 레이어에는 각각에 포함된 요소의 이름에 따라 이름이 지정됩니다.

  • 심볼, 비트맵, 비디오 클립 등의 라이브러리 에셋이 포함된 새 레이어에는 에셋과 동일한 이름이 부여됩니다.

  • 이름이 있는 인스턴스가 포함된 새 레이어에는 인스턴스 이름이 부여됩니다.

  • 분리된 텍스트 블록의 문자가 포함된 새 레이어에는 그 문자가 이름으로 지정됩니다.

  • 이름이 없는 그래픽 객체가 포함된 새 레이어에는 레이어1, 레이어2 등의 이름이 지정됩니다.

    Animate에서는 새 레이어가 선택된 모든 레이어 아래에 삽입됩니다. 또한 새 레이어는 선택된 요소가 원래 만들어진 순서대로 위에서 아래로 배치됩니다. 분리된 텍스트의 레이어는 문자의 순서에 따라 왼쪽에서 오른쪽으로, 오른쪽에서 왼쪽으로 또는 위에서 아래로 배치됩니다. 예를 들어, FLASH라는 텍스트를 분리하여 레이어에 배포한다고 가정해 보십시오. 새 레이어 F, L, A, S 및 H가 맨 위에 F를 시작으로 위에서 아래로 배열됩니다. 이러한 레이어는 처음에 텍스트가 들어 있던 레이어의 바로 아래에 나타납니다.

레이어에 객체 배포

  1. 별도의 레이어에 배포할 객체를 선택합니다. 객체는 비연속 레이어를 포함하여 단일 레이어나 여러 레이어에 배포될 수 있습니다.
  2. 다음 중 하나를 수행합니다.
    • [수정] > [타임라인] > [레이어에 배포]를 선택합니다.
    • 선택한 객체 중 하나를 마우스 오른쪽 버튼으로 클릭(Windows)하거나 Command 키를 누른 상태에서 클릭(Macintosh)한 다음 [레이어에 배포]를 선택합니다.

객체를 키프레임에 배포하여 트위닝된 애니메이션 만들기

Animate의 새로운 기능

Animate에서는 자동으로 객체를 별도의 키프레임 각각에 배포할 수 있습니다. 스테이지에서 내용을 구성할 때 객체를 배포하도록 선택할 수 있습니다. 수동으로 수행할 경우 이 프로세스는 번거롭고 시간이 많이 걸립니다. 배포 기능은 개별 키프레임에 객체를 배치하여 트위닝된 애니메이션을 만들 때 특히 유용합니다. 개별 키프레임 각각에 서로 다른 객체 또는 객체 상태를 할당할 수 있습니다. 실제로 이러한 키프레임에서 재생 헤드를 이동하면 트위닝된 애니메이션 효과가 분명히 나타납니다.

[키프레임에 배포] 명령을 사용하면 Animate가 각각의 선택한 객체를 새로운 별도의 키프레임에 배포합니다. 다른 프레임의 객체를 포함하여 선택하지 않은 객체는 원래 레이어에 그대로 유지됩니다.

스테이지에서 그래픽 객체, 인스턴스, 비트맵, 비디오 클립, 텍스트 블록 등의 요소에 대해 [키프레임에 배포] 명령을 적용할 수 있습니다.

[키프레임에 배포]를 사용하여 만들어진 새 키프레임

  • [키프레임에 배포] 작업 중에 만들어진 새 키프레임은 객체가 선택된 시퀀스에 따라 정렬됩니다.
  • [키프레임에 배포] 작업을 수행할 때 레이어에서 선택되지 않은 객체가 있을 경우 이러한 객체에 대한 원본 프레임은 그대로 유지됩니다. 배포를 위해 선택된 객체에는 원래 내용의 마지막 프레임 바로 다음의 프레임에서 시작하는 키프레임이 할당됩니다. 예를 들어 Object1Object2가 50개의 프레임으로 구성된 레이어에 있는 경우 Object1을 배포하도록 선택하면 51번째 키프레임에 배치됩니다.

키프레임에 객체 배포

  1. 별도의 레이어에 배포할 객체를 선택합니다. 객체는 비연속 레이어를 포함하여 단일 레이어나 여러 레이어에 배포될 수 있습니다.

  2. 선택한 객체 중 하나를 마우스 오른쪽 버튼으로 클릭(Windows)하거나 Command 키를 누른 상태에서 클릭(Macintosh)한 다음 [키프레임에 배포]를 선택합니다.

추가 리소스

다음 문서에서는 Animate에서 애니메이션을 사용한 작업에 대해 설명합니다.

Adobe 로고

내 계정 로그인