이름
- Adobe Animate 사용 안내서
- Animate 소개
- 애니메이션
- Animate의 애니메이션 기본 사항
- Animate에서 프레임 및 키프레임을 사용하는 방법
- Animate의 프레임별 애니메이션
- Animate에서 클래식 트윈 애니메이션을 사용하여 작업하는 방법
- 브러시 도구
- 모션 안내선
- 모션 트윈 및 ActionScript 3.0
- 모션 트윈 애니메이션 정보
- 모션 트윈 애니메이션
- 모션 트윈 애니메이션 만들기
- 속성 키프레임 사용
- 트윈으로 위치에 애니메이션 적용
- 모션 편집기를 사용하여 모션 트윈을 편집하는 방법
- 트윈 애니메이션의 모션 경로 편집
- 모션 트윈 조작
- 사용자 정의 속도 추가
- 모션 사전 설정 만들기 및 적용
- 애니메이션 트윈 범위 설정
- XML 파일로 저장한 모션 트윈을 사용한 작업
- 모션 트윈과 클래식 트윈의 비교
- 모양 트위닝
- Animate에서 뼈 도구 애니메이션 사용하기
- Animate에서 캐릭터 리깅으로 작업하기
- Adobe Animate에서 마스크 레이어를 사용하는 방법
- Animate에서 장면으로 작업하는 방법
- 대화형 기능
- 작업 영역 및 작업 과정
- 칠 브러시 만들기 및 관리
- HTML5 Canvas 문서에서 Google Fonts 사용
- Creative Cloud 라이브러리와 Adobe Animate 사용
- Animate의 스테이지 및 도구 패널 사용
- Animate 작업 과정 및 작업 영역
- HTML5 Canvas 문서에서 웹 글꼴 사용
- 타임라인과 ActionScript
- 여러 타임라인을 사용한 작업
- 환경 설정
- Animate 제작 패널 사용
- Animate로 타임라인 레이어 만들기
- 모바일 앱 및 게임 엔진용으로 애니메이션 내보내기
- 객체 이동 및 복사
- 템플릿
- Animate의 찾기 및 바꾸기
- 실행 취소, 다시 실행 및 작업 내역 패널
- 키보드 단축키
- Animate에서 타임라인을 사용하는 방법
- HTML 확장 만들기
- 이미지 및 애니메이션 GIF에 대한 최적화 옵션
- 이미지 및 GIF에 대한 내보내기 설정
- Animate의 에셋 패널
- 멀티미디어 및 비디오
- Animate의 그래픽 객체 변형 및 결합
- Animate에서 심볼 인스턴스를 만들고 작업하기
- 이미지 추적
- Adobe Animate에서 사운드를 사용하는 방법
- SVG 파일 내보내기
- Animate에서 사용할 비디오 파일 만들기
- Animate에서 비디오를 추가하는 방법
- Animate로 객체 그리고 만들기
- 선 및 모양 변형
- Animate CC의 획, 채우기 및 그래디언트
- Adobe Premiere Pro 및 After Effects 작업
- Animate CC의 색상 패널
- Animate에서 Flash CS6 파일 열기
- Animate의 클래식 텍스트 작업
- Animate에 아트워크 가져오기
- Animate의 가져온 비트맵
- 3D 그래픽
- Animate의 심볼 작업
- Adobe Animate로 선 및 모양 그리기
- Animate의 라이브러리 작업
- 사운드 내보내기
- Animate CC의 객체 선택
- Animate의 Illustrator AI 파일 작업
- 블렌드 모드 적용
- 객체 배열
- 명령 메뉴를 사용한 작업 자동화
- 다국어 텍스트
- Animate에서 카메라 사용하기
- 그래픽 필터
- 사운드 및 ActionScript
- 드로잉 환경 설정
- 펜 도구로 그리기
- 플랫폼
- Animate 프로젝트를 다른 문서 유형 포맷으로 변환
- 사용자 정의 플랫폼 지원
- Animate에서 HTML5 Canvas 문서 만들고 게시하기
- WebGL 문서 만들고 게시하기
- iOS용 AIR에 맞추어 애플리케이션을 패키징하는 방법
- Android용 AIR 애플리케이션 게시
- 데스크톱용 Adobe AIR에 맞춘 게시
- ActionScript 게시 설정
- 모범 사례 - 애플리케이션에서 ActionScript 구성
- Animate에서 ActionScript를 사용하는 방법
- Animate 작업 영역의 액세스 가능성
- 스크립트 작성 및 관리
- 사용자 정의 플랫폼에 대한 지원 활성화
- 사용자 정의 플랫폼 지원 개요
- 사용자 정의 플랫폼 지원 플러그인 작업
- ActionScript 3.0 디버깅
- 사용자 정의 플랫폼에 대한 지원 활성화
- 내보내기 및 게시
- Animate CC에서 파일을 내보내는 방법
- OAM 게시
- SVG 파일 내보내기
- Animate를 사용하여 그래픽 및 비디오 내보내기
- AS3 문서 게시
- 모바일 앱 및 게임 엔진용으로 애니메이션 내보내기
- 사운드 내보내기
- 모범 사례 - 모바일 장치 콘텐츠 만들기 팁
- 모범 사례 - 비디오 규칙
- 모범 사례 - SWF 애플리케이션 제작 지침
- 모범 사례 - FLA 파일 구조화
- Animate용 FLA 파일을 최적화하는 모범 사례
- ActionScript 게시 설정
- Animate용 게시 설정 지정
- 프로젝터 파일 내보내기
- 이미지 및 애니메이션 GIF 내보내기
- HTML 게시 템플릿
- Adobe Premiere Pro 및 After Effects 작업
- 애니메이션의 빠른 공유 및 게시
- 문제 해결
이 문서를 통해 HTML5 Canvas용 사용자 정의 구성 요소를 만드는 방법을 알아보십시오.
Animate에는 기본 구성 요소 집합이 포함되어 있습니다. 하지만 그것만으로는 프로젝트에 부족합니다. 이 항목은 Animate용 사용자 정의 HTML5 구성 요소를 만드는 방법에 대해 설명합니다.
구성 요소 정의는 크게 세 가지로 구성됩니다.
- 메타데이터: 표시 이름, 버전, 구성 가능한 속성 집합, 아이콘 등 구성 요소에 대한 정보를 제공합니다. components.js라는 파일 안에 캡처됩니다. 구성 요소를 범주로 그룹화할 수 있으며 이 파일을 사용하여 범주에 있는 모든 구성 요소의 메타데이터를 제공할 수 있습니다.
- 소스: 실제 구성 요소 소스에 대한 정보를 제공합니다. 구성 요소를 사용하여 동영상을 미리 보거나 제작할 때 런타임에 포함됩니다.
- 에셋: JavaScript 라이브러리나 CSS 또는 런타임 에셋 및 아이콘 등 런타임 종속성에 대한 정보를 제공합니다. 에셋은 Animate 제작 환경에서 사용될 수 있습니다.
구성 요소 정의에는 로컬라이제이션 관련 리소스도 있습니다.
Animate는 사용자 정의 HTML5 구성 요소에 대해 다음 폴더를 확인하고 시작할 때 로드합니다.
• Windows:
<AppData>/Local/Adobe/Adobe Animate 2017/en_US/Configuration/HTML5Components
• MAC:
~/Library/Application Support/Adobe/Animate 2017/en_US/Configuration/HTML5Components/
위의 폴더 경로는 미국 영어 버전에만 해당합니다. 다른 언어로 된 Animate를 사용하는 경우 언어별 폴더 이름을 찾아 en_US를 바꾸십시오.
‘components.js’ 파일을 포함하는 위치 내의 각 폴더에 대해 Animate는 범주를 만들고 그 안의 모든 구성 요소를 로드합니다.
구성 요소 메타데이터
구성 요소의 메타데이터는 components.js라는 파일에서 캡처됩니다. 이 파일은 HTML5Components 디렉토리 내 별도의 폴더 안에 있습니다.
Components.js
Components.js
다음 섹션을 포함하는 JSON 파일:
- 범주: 이 구성 요소 집합에 대해 [구성 요소] 패널에 있는 이름으로, 지역화될 수 있습니다.
- 구성 요소: 구성 요소에 대한 메타데이터가 각 항목에 포함되어 있는 배열입니다. 위 샘플의 경우 배열에 요소가 하나만 있습니다. 메타데이터에는 다음과 같은 섹션이 있습니다.
|
필수 |
설명 |
---|---|---|
ClassName |
지원 |
소스 파일에 지정된 구성 요소의 클래스 이름입니다. 클래스 이름은 한 레벨의 네임스페이스를 지원합니다. 예: Video.
|
버전 |
지원하지 않음 |
구성 요소의 버전 번호입니다. 미래의 구성 요소 업그레이드에 사용됩니다. 하지만 이 시점에서는 플로우가 정의되지 않습니다. |
위치 |
지원 |
구성 요소 기본 소스 파일의 상대 경로입니다. 소스에 포함된 사항에 대한 자세한 내용은 다음 단원에서 설명합니다. |
아이콘 |
지원하지 않음 |
구성 요소 아이콘의 상대 경로입니다. 이 아이콘은 구성 요소와 해당 이름에 대한 인스턴스를 만들 때 구성 요소 패널과 스테이지에서 사용됩니다. 아무것도 제공하지 않으면 기본 아이콘이 사용됩니다. 로드할 아이콘의 png 이름을 지정할 수 있습니다(일반적으로 32x32). 또는 밝은 UI와 어두운 UI에 대해 서로 다른 아이콘을 지원하려면 다음 명명 규칙을 사용하여 두 개의 .png를 제공하십시오. custom_icon_N.png – 어두운 UI를 위한 아이콘 custom_icon_D.png – 밝은 UI를 위한 아이콘 그리고 ‘custom_icon’ 이름을 이 필드에 대한 값으로 지정합니다. 현재 사용자 설정을 기준으로 접미사가 자동으로 추가됩니다. |
크기 |
지원하지 않음 |
구성 요소 인스턴스의 기본 크기입니다. 사용자가 [구성 요소] 패널에서 스테이지로 구성 요소를 드래그 앤 드롭할 때마다 새로운 인스턴스가 생성됩니다. 이 필드는 구성 요소 인스턴스의 기본 초기 크기를 지정합니다. 값은 배열 [폭, 높이]이어야 합니다. 지정된 값이 없는 경우 Animate는 기본 크기를 선택합니다. 또한 Animate는 크기를 [2,2] ~ [1000, 1000] 범위 내로 제한합니다. |
종속성 |
지원하지 않음 |
구성 요소의 종속성 집합입니다. 각 항목이 로컬 소스(key = “src”) 및 CDN 경로(key=’cdn’)의 상대 경로를 제공하는 배열입니다. CDN 경로는 필수가 아닙니다. 이 경로는 제작 설정에서 호스팅된 라이브러리를 사용할 때 사용됩니다. 그렇지 않으면 미리 보거나 제작할 때 로컬 소스가 사용됩니다. 위 예제(비디오)에 사용된 상대 경로를 메모하십시오. 한 레벨 위로부터 종속성을 로드하기 때문에 여러 구성 요소 집합에서 일부 종속성을 공유할 수 있습니다. |
속성 |
지원 |
속성의 배열입니다. 스테이지에서 이 구성 요소의 인스턴스를 만들 때, 여기에 구성된 속성 집합이 PI에 자동으로 표시됩니다. 이 구성 요소의 사용자는 Animate에서 해당 속성을 구성할 수 있으며 구성된 속성은 런타임에 구성 요소를 인스턴스화하는 동안 사용 가능하게 됩니다. 각 속성 항목에는 다음과 같은 키가 포함되어 있습니다.
|
구성 요소 소스
각 구성 요소에는 다음을 처리할 코드를 제공하는 연관된 소스 파일이 있어야 합니다.
- 런타임에 구성 요소 인스턴스를 구성된 속성 값 집합과 함께 만들기
- DOM에 연결 및 분리
- 모든 프레임에서 속성 업데이트
기본 클래스가 제공되며 사용자 정의 구성 요소를 좀 더 쉽게 개발할 수 있게 해주는 유틸리티 기능이 anwidget.js 파일에 있습니다. 향후 이 인터페이스는 개선되더라도 이전 버전과 호환될 것입니다. 현재는 DOM 기반 구성 요소만 지원됩니다. 하지만 캔버스 기반 구성 요소에 대한 지원이 확장될 예정입니다. 현재는 위젯만 지원됩니다. 하지만 프레임워크를 개선하여 연결 동작(비 UI 구성 요소)을 지원할 예정입니다.
anwidget.js 파일은 첫 번째 실행 폴더에서 HTML5Components/sdk 폴더 아래에 있습니다. 사용자 정의 클래스에 대한 기본 클래스 AnWidget 그리고 사용자 정의 구성 요소를 등록하기 위한 유틸리티 메서드 $.anwidget(<className>, {Object Prototype})를 제공합니다. 현재는 jQuery를 사용합니다. 위젯에서 제공하는 서비스를 사용할 때마다 jQuery가 종속성으로 추가되기 때문입니다. 하지만 jQuery에서 암묵적인 종속성을 추가하기를 원치 않는 경우에는 위젯과 동일한 인터페이스를 제공하는 jQuery 없는 구성 요소 클래스를 구현해야 합니다.
html은 이러한 섹션(프리로더 div)을 기본적으로 포함합니다.
위 그림은 요소가 DOM에 추가되는 순서를 보여 줍니다. 따라서 dom_overlay_container div가 캔버스 위에 표시되어 있습니다.
첫 번째 릴리스에서처럼 dom_overlay_container div의 ID를 변경하지 마십시오. 코드 조각처럼 이 ID를 사용하는 기능이 몇 가지 있습니다.
위 일러스트레이션에 나온 것처럼 dom_overlay_container div는 캔버스 위에 오버레이로 표시됩니다. 마우스 이벤트가 기본 캔버스에도 제대로 전달되도록 이 div에 대해 CSS 속성 {pointer-events: none}을 사용합니다. 프로젝트에서 Animate로 구성한 모든 구성 요소 인스턴스가 인스턴스화되고 이 dom_overlay_container div의 자식으로 연결됩니다. 구성 요소 인스턴스의 상대적 순서는 런타임에 그대로 유지되지만, 현재는 모든 구성 요소 인스턴스가 항상 오버레이로 표시됩니다. 마우스 이벤트를 받을 수 있도록 런타임에 모든 구성 요소 인스턴스에 대해 {pointer-events: all}을 설정합니다.
구성 요소 수명 주기
-
구성 요소 인스턴스는 컨테이너에 대한 DOM가 생성될 때 만들어집니다.
-
그런 다음에 구성 요소가 사용되는 프레임에 재생 헤드가 도달할 때 DOM에 연결됩니다. 그리고 런타임에 모든 틱에 대해 호출되는 업데이트 핸들러를 연결합니다. 이때 구성 요소는 ‘attached’ 이벤트도 실행합니다. 부모 요소에 있는 {id: id_of_the_instance} 이벤트 데이터가 사용됩니다.
-
속성은 모든 업데이트 호출에서 업데이트됩니다. 모든 속성 업데이트가 캐싱되고 틱 핸들러 도중 한 번에 적용됩니다. 현재는 사용자 정의 속성 트윈이 지원되지 않습니다. transform 및 visibility 같은 기본 속성만 업데이트됩니다.
-
구성 요소가 제거된 프레임에 재생 헤드가 도달하면 DOM에서 분리됩니다. 이때 부모 요소에서 ‘detached’ 이벤트가 실행됩니다.
$.AnWidget이라고 하는 기본 클래스는 다음과 같은 재정의를 제공합니다.
이름 |
필수 |
설명 |
---|---|---|
getCreateOptions() |
지원하지 않음 |
구성 요소 인스턴스화 중에 구성 요소에 적용해야 할 옵션이 반환됩니다. 일반적인 재정의가 이것을 전역 변수 _widgetID와 함께 사용하여 모든 인스턴스에 고유한 ID를 할당하는 경우가 많습니다. 다음 섹션의 예제를 보면 사용법이 명확해집니다. |
getCreateString() |
지원 |
DOM 인스턴스 생성을 위한 문자열을 반환합니다. 이 문자열은 jQuery에 전달되어 실제 DOM 요소를 만들고, 이것이 나중에 기본 DOM에 연결됩니다.
예를 들어 이미지 구성 요소의 경우에는 “<image>”가 반환되어야 합니다.
런타임에 요소가 만들어지고 jQuery 래퍼에 대한 참조가 구성 요소 인스턴스에 다음과 같이 저장됩니다.
this._element = $(this.getCreateElement())
// this._element – jQuery wrapper for the underlying DOM element created.
복합 요소를 만들 수도 있습니다. 자세한 내용은 예제 섹션에서 다룰 예정입니다. |
getProperties() |
지원하지 않음 |
구성 가능한 CSS 속성 이름의 배열을 반환합니다. 일반적으로 components.json에서 구성한 모든 속성과 일치합니다.
예를 들어 비디오 구성 요소의 경우 이 배열에는 다음 항목이 포함됩니다.
["left", "top", "width", "height", "position", "transform-origin", "transform"] |
getAttributes() |
지원하지 않음 |
구성 가능한 특성의 배열을 반환합니다. 일반적으로 components.json에서 구성할 수 있는 모든 특성과 일치합니다.
예를 들어 비디오 구성 요소의 경우 이 배열에는 다음 항목이 포함됩니다.
["id", "src", "controls", "autoplay", "loop", "class"] |
attach(parent) |
지원하지 않음 |
이 함수는 구성 요소 인스턴스가 ‘부모’ DOM 요소에 연결되려고 할 때마다 호출됩니다.
기본 구현은 다음 작업 그리고 몇 가지 기타 작업을 수행합니다.
// Appends the element to the parent DOM $(parent).append(this._element);
//Stores the ref in this._$this this._$this = $(this._element);
//Calls force update to apply all properties this.update(true); this._attached = true;
//Triggers the attached event on parent $(parent).trigger("attached", this.getEventData("attached"))
이 함수는 재정의할 필요가 없습니다. 하지만 복합 요소의 경우에는 재정의해야 할 수도 있습니다. 자세한 내용은 예제 섹션에서 다룰 예정입니다.
참고: this._superApply(arguments)를 사용하여 재정의로부터 기본 클래스 메서드를 호출할 수 있습니다. |
detach() |
지원하지 않음 |
이 함수는 구성 요소 인스턴스가 DOM에서 분리되려고 할 때마다 호출됩니다. 기본 구현은 다음 작업을 수행합니다.
//Removes the element from the DOM this._$this.remove(); //Triggers the detached event on parent $(parent).trigger("detached", this.getEventData("detached")); |
setProperty(k,v) |
지원하지 않음 |
이 함수는 인스턴스의 속성을 설정하는 데 사용됩니다. 이러한 변경 사항은 캐싱되고 모든 속성이 더티 상태인 모든 프레임에 대해 update()가 호출되는 동안 한 번에 적용됩니다. |
update(force) |
지원하지 않음 |
이 함수는 구성 요소가 DOM의 일부이며 표시될 때 모든 프레임에서 호출됩니다. 기본 구현은 변경되었거나 force 매개 변수가 true인 모든 CSS 속성 및 특성을 적용합니다. |
show() |
지원하지 않음 |
요소 인스턴스를 표시합니다. 일반적으로 재정의할 필요가 없지만, 복합 요소에 대해서는 재정의해야 할 수도 있습니다. |
hide() |
지원하지 않음 |
요소 인스턴스를 숨깁니다. 일반적으로 재정의할 필요가 없지만, 복합 요소에 대해서는 재정의해야 할 수도 있습니다. |
getEventData(e) |
지원하지 않음 |
이름이 ‘e’인 이벤트에 대해 모든 사용자 정의 데이터를 반환합니다. 기본 구현은 연결된 이벤트와 분리된 이벤트에 대해 {id: instance_id} 데이터를 전달합니다. |
destroy() |
지원하지 않음 |
구성 요소 인스턴스가 DOM에서 분리될 때 메모리를 비웁니다. 일반적으로 재정의할 필요가 없습니다. |
applyProperties(e) |
지원하지 않음 |
CSS 속성을 jQuery 래퍼 e에 적용하기 위한 도우미 API입니다. |
applyAttributes(e) |
지원하지 않음 |
특성을 jQuery 래퍼 e에 적용하기 위한 도우미 API입니다. |
로컬라이제이션
범주 문자열, 구성 요소 표시 이름, 속성 이름을 로컬라이즈할 수 있습니다. components 폴더 아래의 locale 폴더에 strings.json이라는 파일을 만드십시오. 로컬라이즈할 모든 문자열에 대해 키-값 쌍을 제공하고 components.js에 있는 키를 사용하십시오. 다른 로케일의 경우에는 locale 폴더 아래의 해당 폴더에서 문자열을 제공해야 합니다.
사용자 정의 HTML5 구성 요소 패키징 및 배포
Animate 디자이너 및 개발자는 바로 사용할 수 있는 패키징된 구성 요소를 제공함으로써 애니메이션 제작자들이 코딩 없이 구성 요소를 설치하고 사용하도록 할 수 있습니다. 과거에는 애니메이션 제작자들이 파일 구조를 배우고, 프로그래밍을 수행하고, 파일을 특정 폴더로 직접 이동하여 HTML5 Extension을 활성화해야 했습니다.
사전 요구 사항
- 개발자가 만든 구성 요소. 구성 요소를 만드는 방법에 대한 지침을 보려면 여기를 클릭하십시오.
- CC Extensions 서명 툴킷.
구성 요소를 패키징하기 전에 구성 요소의 소스 및 대상 경로 메타데이터가 있는 MXI 파일을 만드십시오. 예를 들면 다음과 같습니다.
<file source="jquery-ui-1.12.0" destination="$FLASH\HTML5Components\jQueryUI\" file-type="ordinary" />
이 소스 및 대상 파일 정보는 구성 요소를 정확하게 설치하기 위해 Extensions 유틸리티를 활성화하는 데 필요합니다.
구성 요소 패키지
HTML5 사용자 정의 구성 요소를 패키징하려면 다음 단계를 수행합니다.
-
MXI 파일을 만들려면 텍스트 편집기를 사용하여 샘플 abc.mxi 파일과 비슷한 컨텐츠를 입력하고 MXI 확장자로 저장합니다.
다운로드
-
MXI 구성 요소 파일 및 기타 관련 파일을 폴더에 추가합니다.
-
CC Extensions 서명 툴(ZXPSignCmd.exe)을 사용하여 확장자가 ZXP인 압축 파일을 만듭니다. ZXP 서명 명령 툴에서 다음 명령을 사용하여 ZXP 파일을 만듭니다.
1. -selfSignedCert 옵션을 사용하여 자체 서명된 인증서를 만듭니다.
인증서가 이미 있는 경우에는 이 단계를 건너뛸 수 있습니다.
ZXPSignCmd -selfSignedCert US NY MyCompany MyCommonName password FileName.p12
FileName.p12 파일이 현재 폴더에 생성됩니다.
2. 다음 명령을 사용하여 확장을 서명합니다.
ZXPSignCmd -sign projectName projectName.zxp FileName.p12 password
projectName은 확장 프로젝트의 이름입니다. 현재 폴더에서 projectName.zxp라는 이름의 파일이 생성됩니다.
구성 요소 배포
이 projectName.zxp 패키징된 구성 요소 파일을 Animate 사용자들에게 배포할 수 있습니다.
Adobe Add-ons 웹 사이트를 통해 제품을 배포하는 것이 좋습니다. 추가 기능을 공개적으로(무료 또는 유로) 배포하거나 비공개적으로(특정 사용자에게 무료로) 배포할 수 있습니다.
배포된 구성 요소 설치
Animate 디자이너 또는 개발자는 Manage Extensions 유틸리티를 사용하여 배포된 ZXP 파일 구성 요소를 설치할 수 있습니다.