이 문서를 통해 HTML5 Canvas용 사용자 정의 구성 요소를 만드는 방법을 알아보십시오.

Animate에는 기본 구성 요소 집합이 포함되어 있습니다. 하지만 그것만으로는 프로젝트에 부족합니다. 이 항목은 Animate용 사용자 정의 HTML5 구성 요소를 만드는 방법에 대해 설명합니다.

구성 요소 정의는 크게 세 가지로 구성됩니다.

  • 메타데이터: 표시 이름, 버전, 구성 가능한 속성 집합, 아이콘 등 구성 요소에 대한 정보를 제공합니다. components.js라는 파일 안에 캡처됩니다. 구성 요소를 범주로 그룹화할 수 있으며 이 파일을 사용하여 범주에 있는 모든 구성 요소의 메타데이터를 제공할 수 있습니다.
  • 소스: 실제 구성 요소 소스에 대한 정보를 제공합니다. 구성 요소를 사용하여 동영상을 미리 보거나 제작할 때 런타임에 포함됩니다.
  • 에셋: JavaScript 라이브러리나 CSS 또는 런타임 에셋 및 아이콘 등 런타임 종속성에 대한 정보를 제공합니다. 에셋은 Animate 제작 환경에서 사용될 수 있습니다.

참고:

구성 요소 정의에는 로컬라이제이션 관련 리소스도 있습니다.

componentsJS
사용자 정의 구성 요소 범주를 위한 샘플 폴더 구성

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 디렉토리 내 별도의 폴더 안에 있습니다. 

metadata-code
비디오 구성 요소를 위한 샘플 메타데이터.

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에서 해당 속성을 구성할 수 있으며 구성된 속성은 런타임에 구성 요소를 인스턴스화하는 동안 사용 가능하게 됩니다.

각 속성 항목에는 다음과 같은 키가 포함되어 있습니다.

  1. 이름: 이 속성에 대해 PI에 표시되는 이름입니다. 사용자 친화적인 이름이어야 합니다. 지역화할 수 있습니다.
  2. 변수: 이 속성에 사용되는 내부 이름입니다. 구성된 값은 런타임에 이 변수 이름과 함께 사용 가능하게 됩니다. 자세한 내용은 이후의 섹션에서 다룰 예정입니다.
  3. 유형: 속성의 유형을 지정합니다. Animate에서는 다음과 같은 유형이 허용됩니다.
    1. 부울 - PI의 확인란
    2. 숫자 - PI의 숫자 상자
    3. 문자열    -PI의텍스트 상자
    4. 목록        - 사용자가값의배열을 구성할 수 있도록 합니다.
    5. 모음- 사용자가 <키, 값> 쌍의 목록을 구성할 수 있도록 합니다. (콤보 상자 보기)
    6. 파일 경로 - 사용자가 로컬 파일을 찾아보고 선택할 수 있도록 합니다. 문자열 값은 런타임에 제공됩니다. 파일은 ‘assets’ 폴더에서 제작된 결과물에 자동으로 복사되며 상대 경로는 런타임에 사용 가능하게 됩니다.
    7. 이미지 경로 - 사용자가 이미지를 찾아보고 선택할 수있도록합니다. 파일은 구성된 이미지 폴더에서 제작된 결과물에 자동으로 복사되며 상대 경로는 런타임에 사용 가능하게 됩니다.
    8. 비디오 컨텐츠 경로 – 사용자가 웹 포맷 비디오 소스를 찾아보고 선택할 수 있도록 합니다. 이러한 포맷에는 mp4,ogg,ogv,webm이있습니다. 구성된 에셋이 제작된 결과물에서 ‘videos 폴더에 복사됩니다.
    9. 색상 - PI의 색상 선택기
  4. 기본값: 속성의 기본값입니다. 기본값의 형식은속성 형식과동일해야 합니다.

구성 요소 소스

각 구성 요소에는 다음을 처리할 코드를 제공하는 연관된 소스 파일이 있어야 합니다.

  • 런타임에 구성 요소 인스턴스를 구성된 속성 값 집합과 함께 만들기
  • DOM에 연결 및 분리
  • 모든 프레임에서 속성 업데이트

기본 클래스가 제공되며 사용자 정의 구성 요소를 좀 더 쉽게 개발할 수 있게 해주는 유틸리티 기능이 anwidget.js 파일에 있습니다. 향후 이 인터페이스는 개선되더라도 이전 버전과 호환될 것입니다. 현재는 DOM 기반 구성 요소만 지원됩니다. 하지만 캔버스 기반 구성 요소에 대한 지원이 확장될 예정입니다. 현재는 위젯만 지원됩니다. 하지만 프레임워크를 개선하여 연결 동작(비 UI 구성 요소)을 지원할 예정입니다.

anwidget.js 파일은 첫 번째 실행 폴더에서 HTML5Components/sdk 폴더 아래에 있습니다. 사용자 정의 클래스에 대한 기본 클래스 AnWidget 그리고 사용자 정의 구성 요소를 등록하기 위한 유틸리티 메서드 $.anwidget(<className>, {Object Prototype})를 제공합니다. 현재는 jQuery를 사용합니다. 위젯에서 제공하는 서비스를 사용할 때마다 jQuery가 종속성으로 추가되기 때문입니다. 하지만 jQuery에서 암묵적인 종속성을 추가하기를 원치 않는 경우에는 위젯과 동일한 인터페이스를 제공하는 jQuery 없는 구성 요소 클래스를 구현해야 합니다.

 

AnWidget
HTML 템플릿

html은 이러한 섹션(프리로더 div)을 기본적으로 포함합니다.

animation_container
기본 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}을 설정합니다.

구성 요소 수명 주기

component_lifecycle
구성 요소 수명 주기

  1. 구성 요소 인스턴스는 컨테이너에 대한 DOM가 생성될 때 만들어집니다.

  2. 그런 다음에 구성 요소가 사용되는 프레임에 재생 헤드가 도달할 때 DOM에 연결됩니다. 그리고 런타임에 모든 틱에 대해 호출되는 업데이트 핸들러를 연결합니다. 이때 구성 요소는 ‘attached’ 이벤트도 실행합니다. 부모 요소에 있는 {id: id_of_the_instance} 이벤트 데이터가 사용됩니다.

  3. 속성은 모든 업데이트 호출에서 업데이트됩니다. 모든 속성 업데이트가 캐싱되고 틱 핸들러 도중 한 번에 적용됩니다. 현재는 사용자 정의 속성 트윈이 지원되지 않습니다. transform 및 visibility 같은 기본 속성만 업데이트됩니다.

  4. 구성 요소가 제거된 프레임에 재생 헤드가 도달하면 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 폴더 아래의 해당 폴더에서 문자열을 제공해야 합니다.

localization
.json string

사용자 정의 HTML5 구성 요소 패키징 및 배포

Animate 디자이너 및 개발자는 바로 사용할 수 있는 패키징된 구성 요소를 제공함으로써 애니메이션 제작자들이 코딩 없이 구성 요소를 설치하고 사용하도록 할 수 있습니다. 과거에는 애니메이션 제작자들이 파일 구조를 배우고, 프로그래밍을 수행하고, 파일을 특정 폴더로 직접 이동하여 HTML5 Extension을 활성화해야 했습니다.

사전 요구 사항

구성 요소를 패키징하기 전에 구성 요소의 소스 및 대상 경로 메타데이터가 있는 MXI 파일을 만드십시오. 예를 들면 다음과 같습니다.

<file source="jquery-ui-1.12.0" destination="$FLASH\HTML5Components\jQueryUI\" file-type="ordinary" />

이 소스 및 대상 파일 정보는 구성 요소를 정확하게 설치하기 위해 Extensions 유틸리티를 활성화하는 데 필요합니다.

구성 요소 패키지

HTML5 사용자 정의 구성 요소를 패키징하려면 다음 단계를 수행합니다. 

  1. MXI 파일을 만들려면 텍스트 편집기를 사용하여 샘플abc.mxi 파일과 비슷한 컨텐츠를 입력하고 MXI 확장자로 저장합니다.

    Download

    다운로드

  2. MXI 구성 요소 파일 및 기타 관련 파일을 폴더에 추가합니다.

    Add-MXI-file-to-component
  3. CC Extensions 서명 툴(ZXPSignCmd.exe)을 사용하여 확장자가 ZXP인 압축 파일을 만듭니다. ZXP 서명 명령 툴에서 다음 명령을 사용하여 ZXP 파일을 만듭니다.

    1. -selfSignedCert 옵션을 사용하여 자체 서명된 인증서를 만듭니다.

    인증서가 이미 있는 경우에는 이 단계를 건너뛸 수 있습니다.

    Self-signature
    ZXPSignCmd -selfSignedCert US NY MyCompany MyCommonName password FileName.p12

    FileName.p12 파일이 현재 폴더에 생성됩니다.

    2. 다음 명령을 사용하여 확장을 서명합니다. 

    Create-ZXP-file
    ZXPSignCmd -sign projectName projectName.zxp FileName.p12 password

    projectName은 확장 프로젝트의 이름입니다. 현재 폴더에서 projectName.zxp라는 이름의 파일이 생성됩니다.

구성 요소 배포

projectName.zxp 패키징된 구성 요소 파일을 Animate 사용자들에게 배포할 수 있습니다.

참고:

Adobe Add-ons 웹 사이트를 통해 제품을 배포하는 것이 좋습니다. 추가 기능을 공개적으로(무료 또는 유로) 배포하거나 비공개적으로(특정 사용자에게 무료로) 배포할 수 있습니다. 비공개적으로 제품을 공유하는 방법에 대해 알아보십시오.

배포된 구성 요소 설치

Animate 디자이너 또는 개발자는 Manage Extensions 유틸리티를 사용하여 배포된 ZXP 파일 구성 요소를 설치할 수 있습니다.

자세한 내용은 배포된 구성 요소 설치를 참조하십시오.

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책