사용 안내서 취소

모션 트윈 애니메이션 만들기

검색
Animate

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. Animate로 객체 그리고 만들기
    9. 선 및 모양 변형
    10. Animate CC의 획, 채우기 및 그래디언트
    11. Adobe Premiere Pro 및 After Effects 작업
    12. Animate CC의 색상 패널
    13. Animate에서 Flash CS6 파일 열기
    14. Animate의 클래식 텍스트 작업
    15. Animate에 아트워크 가져오기
    16. Animate의 가져온 비트맵
    17. 3D 그래픽
    18. Animate의 심볼 작업
    19. Adobe Animate로 선 및 모양 그리기
    20. Animate의 라이브러리 작업
    21. 사운드 내보내기
    22. Animate CC의 객체 선택
    23. Animate의 Illustrator AI 파일 작업
    24. 블렌드 모드 적용
    25. 객체 배열
    26. 명령 메뉴를 사용한 작업 자동화
    27. 다국어 텍스트
    28. Animate에서 카메라 사용하기
    29. 그래픽 필터
    30. 사운드 및 ActionScript
    31. 드로잉 환경 설정
    32. 펜 도구로 그리기
  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. Animate 작업 영역의 액세스 가능성
    12. 스크립트 작성 및 관리
    13. 사용자 정의 플랫폼에 대한 지원 활성화
    14. 사용자 정의 플랫폼 지원 개요
    15. 사용자 정의 플랫폼 지원 플러그인 작업
    16. ActionScript 3.0 디버깅
    17. 사용자 정의 플랫폼에 대한 지원 활성화
  8. 내보내기 및 게시
    1. Animate CC에서 파일을 내보내는 방법
    2. OAM 게시
    3. SVG 파일 내보내기
    4. Animate를 사용하여 그래픽 및 비디오 내보내기
    5. AS3 문서 게시
    6. 모바일 앱 및 게임 엔진용으로 애니메이션 내보내기
    7. 사운드 내보내기
    8. 모범 사례 - 모바일 장치 콘텐츠 만들기 팁
    9. 모범 사례 - 비디오 규칙
    10. 모범 사례 - SWF 애플리케이션 제작 지침
    11. 모범 사례 - FLA 파일 구조화
    12. Animate용 FLA 파일을 최적화하는 모범 사례
    13. ActionScript 게시 설정
    14. Animate용 게시 설정 지정
    15. 프로젝터 파일 내보내기
    16. 이미지 및 애니메이션 GIF 내보내기
    17. HTML 게시 템플릿
    18. Adobe Premiere Pro 및 After Effects 작업
    19. 애니메이션의 빠른 공유 및 게시
  9. 문제 해결
    1. 해결된 문제
    2. 알려진 문제

 

시작하기 전에

 애니메이션을 시작하기 전에 다음 개념을 이해하십시오.

사전 요구 사항

설명

타임라인

모션 트윈으로 작업하기 전에 타임라인 및 속성 편집 사용을 이해하십시오. 스테이지, 속성 관리자에서 또는 새로 디자인된 모션 편집기를 사용하여 개별 속성 키프레임을 편집할 수 있습니다.

심볼 인스턴스 

Animate는 심볼 인스턴스 및 텍스트 필드만 트위닝합니다. 다른 모든 객체 유형은 트윈 적용 시 심볼에 래핑됩니다. 심볼 인스턴스에는 중첩된 심볼이 포함될 수 있으며, 중첩된 심볼은 자체 타임라인에서 트위닝될 수 있습니다.

트윈 범위

트윈 레이어의 최소 기본 단위는 트윈 범위입니다. 트윈 레이어의 트윈 범위는 하나의 심볼 인스턴스 또는 텍스트 필드만 포함할 수 있습니다. 심볼 인스턴스는 트윈 범위의 대상이라고 합니다. 하지만 단일 심볼이 여러 개의 객체를 포함할 수 있습니다.

대상 객체

트윈 범위에 두 번째 심볼 또는 텍스트 필드를 추가하면 트윈에 원래 있던 심볼이 바뀝니다. 트윈의 대상 객체를 변경하려면 다음 메서드 중 하나를 사용합니다.

  • 타임라인에서 라이브러리의 다른 심볼을 트윈 범위로 드래그합니다.
  • 수정 > 심볼 > 심볼 교체 명령을 사용합니다.

트윈을 제거하거나 분리하지 않고 트윈 레이어에서 심볼을 삭제할 수 있습니다. 그러면 나중에 다른 심볼 인스턴스를 트윈에 추가할 수 있습니다. 언제든지 대상 심볼의 유형을 변경하거나 심볼을 편집할 수도 있습니다.

모션 경로

트윈에 모션이 포함된 경우 모션 경로가 [스테이지]에 표시됩니다. 모션 경로는 각 프레임에서 트위닝된 객체의 위치를 보여 줍니다. 제어점을 드래그하여 [스테이지]에서 모션 경로를 편집할 수 있습니다. 트윈/역기구학 레이어에는 모션 안내선을 추가할 수 없습니다. 

참고 사항

트윈으로 위치에 애니메이션 적용

모션 경로 편집

속성 키프레임 사용

모션 트윈 범위 편집

모션 트윈 구성 요소

트윈 범위:

  • 객체가 시간 경과에 따라 변하는 하나 이상의 속성을 갖는 타임라인의 프레임 시퀀스입니다.
  • 모션 트윈 범위는 타임라인에서 단일 레이어의 배경색이 있는 프레임 그룹으로 나타납니다.
  • 트윈 범위를 단일 객체로 선택하고 이를 타임라인의 한 위치에서 다른 레이어를 포함한 다른 위치로 드래그할 수 있습니다.
  • 각 트윈 범위의 스테이지에서 하나의 객체에만 애니메이션을 적용할 수 있습니다. 이 객체를 트윈 범위의 대상 객체라고 합니다.

속성 키프레임:

  • 트윈 대상 객체에 대한 하나 이상의 속성 값이 명시적으로 정의된 트윈 범위 내 프레임입니다.
  • 이러한 속성에는 위치, 알파(투명도), 색상 농도 등이 포함될 수 있습니다.
  • 정의된 각 속성에는 자체 속성 키프레임이 있습니다.
  • 단일 프레임에 여러 개의 속성을 설정하면 이러한 속성의 각 속성 키프레임이 해당 프레임에 놓입니다.
  • 모션 편집기를 사용하여 트윈 범위의 각 속성과 속성 키프레임을 볼 수 있습니다.
  • 트윈 범위 컨텍스트 메뉴에서 타임라인에 표시할 속성 키프레임 유형을 선택하려면 속성 키프레임을 마우스 오른쪽 버튼으로 클릭하고 키프레임 보기를 선택합니다. 

트윈의 대상 객체

모션 트윈에는 트윈 범위의 단일 객체가 있으며 이를 트윈의 대상 객체라고 합니다. 트윈에 단일 대상 객체가 있는 경우 여러 가지 이점이 있습니다.

  • 트윈을 프리셋으로 저장하여 재사용할 수 있습니다.
  • 타임라인 또는 스테이지에서 모션 트윈을 손쉽게 이동할 수 있습니다(트윈 범위를 드래그함).
  • 기존 트윈에 새 인스턴스 적용하려면 다음을 수행하십시오.
    • 교체하려면 트윈에 붙여 넣습니다.
    • 라이브러리에서 새 인스턴스를 드래그합니다.
    • 심볼 교체를 사용합니다. 

트위닝 가능한 객체 및 속성

모션 트윈을 적용할 수 있는 객체 유형은 동영상 클립, 그래픽 및 버튼 심볼, 텍스트 필드입니다. 트위닝할 수 있는 이러한 객체의 속성은 다음과 같습니다.

  • 2D X 및 Y 위치

  • 3D Z 위치 (동영상 클립만 해당)

  • 2D 회전(z축 주위)

  • 3D X, Y 및 Z 회전 (동영상 클립만 해당): 제작 설정에서 FLA 파일 대상을 ActionScript 3.0 및 Flash Player 10 이상으로 설정합니다. Adobe AIR은 3D 모션도 지원합니다.

  • X 및 Y 기울이기

  • X 및 Y 배율

  • 색상 효과: 알파(투명도), 밝기, 농도 및 고급 색상 설정이 포함됩니다. 색상 효과는 심볼 및 TLF 텍스트에만 트위닝될 수 있습니다. 이러한 속성을 트위닝함으로써 객체가 페이드 인되거나 한 색상에서 다른 색상으로 페이드되는 것처럼 보이게 만들 수 있습니다. 클래식 텍스트에서 색상 효과를 트위닝하려면 텍스트를 심볼로 변환하십시오.

  • 필터 속성(그래픽 심볼에는 필터를 적용할 수 없음)

모션 트윈 애니메이션 만들기

다음 세 가지 방법 중 하나를 사용하여 모션 트윈을 만들 수 있습니다.

  • 트위닝하려는 그래픽 또는 인스턴스를 만든 다음 프레임을 마우스 오른쪽 버튼으로 클릭하고 모션 트윈 만들기를 선택합니다.
  • 트위닝하려는 그래픽 또는 인스턴스를 선택한 다음 기본 메뉴에서 삽입 > 모션 트윈을 선택합니다.
  • 트위닝하려는 그래픽 또는 인스턴스를 만든 다음 스테이지에서 인스턴스를 마우스 오른쪽 버튼으로 클릭하고 모션 트윈 만들기를 선택합니다.

 애니메이션에 ActionScript를 사용하는 것은 선택 사항입니다.

모션 트윈 애니메이션 만들기

속성 관리자를 사용하여 다른 속성 트윈

심볼 인스턴스 또는 텍스트 필드 속성에 애니메이션을 적용하려면 모션 트윈 만들기 명령을 사용합니다. 회전, 크기 조절, 투명도 또는 농도의 속성 범위입니다(심볼 및 TLF 텍스트 전용). 예를 들어 심볼 인스턴스의 알파(투명도) 속성을 편집하여 화면으로 페이드 인되도록 할 수 있습니다.

  1. 스테이지에서 심볼 인스턴스 또는 텍스트 필드를 선택합니다.

    선택 항목에 다른 객체가 포함되어 있거나 한 레이어의 여러 객체가 포함되어 있는 경우 Animate는 선택 항목을 동영상 클립 심볼로 변환할 것을 제안합니다.

  2. 삽입 > 모션 트윈을 선택합니다.

    “트윈을 위해 선택 항목을 심볼로 변환” 대화 상자가 나타나면 [확인]을 클릭하여 선택 항목을 동영상 클립 심볼로 변환합니다.

    단일 키프레임에만 있는 객체에 트윈을 적용하면 재생 헤드가 새 트윈의 마지막 프레임으로 이동합니다. 그렇지 않으면 재생 헤드가 이동하지 않습니다.

  3. 속성 값을 지정하려는 트윈 범위의 프레임에 재생 헤드를 배치합니다.

    재생 헤드를 트윈 범위의 다른 프레임에 배치할 수 있습니다. 트윈은 트윈 범위에서 첫 번째 프레임의 속성 값으로 시작합니다. 이 프레임이 항상 속성 키프레임이 됩니다.

  4. 스테이지에서 객체를 선택한 상태로 알파(투명도), 회전, 기울이기 같은 위치 이외의 속성 값을 설정합니다. 속성 관리자나 도구 패널의 도구 중 하나를 사용하여 값을 설정합니다.

    범위의 현재 프레임이 속성 키프레임이 됩니다.

     트윈 범위에 있는 속성 키프레임의 다양한 유형을 표시할 수 있습니다. 트윈 범위를 마우스 오른쪽 버튼으로 클릭(Windows) 또는 Ctrl+클릭(Macintosh)하고 컨텍스트 메뉴에서 [키프레임 보기] > 속성 유형을 선택합니다.

  5. 타임라인에서 재생 헤드를 이동하여 스테이지에서 트윈을 미리 봅니다.

  6. 속성 키프레임을 더 추가하려면 재생 헤드를 범위의 원하는 프레임으로 이동시키고 속성 관리자에서 속성 값을 설정합니다.

기존 트윈 레이어에 트윈 추가

기존 트윈 레이어에 트윈을 더 추가할 수 있습니다. 애니메이션이 있는 Animate 내용을 만들 때 더 적은 수의 레이어를 사용하려면 더 많은 트윈을 추가합니다.

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

    • 레이어에 빈 키프레임을 추가(삽입 > 타임라인 > 빈 키프레임)하고, 키프레임에 항목을 추가한 다음 항목을 트위닝합니다.
    • 별도의 레이어에 트윈을 만든 다음 범위를 원하는 레이어로 드래그합니다.
    • 정적 프레임을 다른 레이어에서 트윈 레이어로 드래그한 후 정적 프레임의 객체에 트윈을 추가합니다.
    • Alt 키(Windows) 또는 Option 키(Macintosh)를 누른 채 드래그하여 같은 레이어 또는 다른 레이어에 있는 기존 범위를 복제합니다.
    • 같은 레이어 또는 다른 레이어에서 트윈 범위를 복사하여 붙여 넣습니다.

 Adobe

쉽고 빠르게 지원 받기

신규 사용자이신가요?

빠른 링크

내 플랜 모두 보기 내 플랜 관리
빠른 링크 보기
빠른 링크 숨기기

법적 고지 사항    |    온라인 개인정보 처리방침