HTML 확장 만들기

Animate는 HTML 확장을 사용하여 확장될 수 있습니다. Adobe Extension Builder 3을 사용하여 Animate용 HTML 확장을 만들 수 있습니다. 이전에는 SWF 확장만 사용하여 Animate를 확장할 수 있었습니다. 하지만 Adobe Extension Builder 3을 사용하면 Creative Cloud 애플리케이션용 HTML 확장을 만들 수 있습니다. 시작하려면 Eclipse 및 Extension Builder 3.0을 다운로드하여 설치해야 합니다.

HTML 확장을 만들려면 다음을 수행하십시오.

1. Eclipse를 시작합니다. 
2. New Project(새 프로젝트) 마법사에서 새 애플리케이션 확장 프로젝트를 만듭니다. 프로젝트에 의미 있는 이름을 지정한 후 Next(다음)를 클릭합니다.
3. New Adobe Application Extension Project(새 Adobe 애플리케이션 확장 프로젝트) 패널에서 Adobe Animate를 선택합니다. [다음]을 클릭합니다.
4. 다음과 같이 사용 가능한 옵션을 사용하여 확장을 구성합니다.
   
   1. Bundle ID(번들 ID)는 사용자의 확장을 고유하게 식별합니다.
   2. Menu name(메뉴 이름)은 확장의 표시 이름입니다. 메뉴 이름은 Animate 내의 창 > 확장 메뉴에 나타납니다.
      
   3. Window Details(윈도우 정보)에서 옵션을 사용하여 확장 윈도우 유형과 크기를 사용자 정의할 수 있습니다.
      
      Next(다음)를 클릭합니다.
5. 다음 몇 개의 화면에서 확장의 참조 라이브러리를 추가로 사용자 정의할 수 있습니다.
   1. CEP Interface Library(CEP 인터페이스 라이브러리)는 호스트 애플리케이션과 상호 작용하는 데 사용되는 기능을 제공합니다. 이 옵션은 기본적으로 선택됩니다.
   2. Frameworks(프레임워크)는 jQuery 같은 공통 Javascript 라이브러리에 사용됩니다.
      
   3. Services(서비스)에는 Adobe 애플리케이션, 확장, 외부 애플리케이션 간에 통신할 수 있도록 지원하는 Adobe IPC Communication Toolkit이 포함되어 있습니다. Services는 Creative Cloud 통신의 허브 역할을 수행하는 CEP Service Manager를 통해 메시지를 전송하는 데 사용되는 프로토콜을 제공합니다.
      
      Finish(완료)를 클릭하여 새 Eclipse 프로젝트를 만듭니다.

Animate에서 확장 디버깅 

Eclipse에서 확장을 바로 실행할 수 있습니다.

1. 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 Run As(실행 형식) > Adobe Flash Extension(Adobe Flash 확장)을 선택합니다. Animate가 실행됩니다.
2. Animate에서 창 > 확장 메뉴 항목을 선택합니다. 그러면 확장 패널이 열립니다.

확장 내보내기

확장을 배포하려면 ZXP 패키지 형식으로 내보내야 합니다. 그런 다음 ZXP 패키지를 다운로드한 후 Creative Cloud 애플리케이션의 Adobe Extension Manager로 실행할 수 있습니다.

1. Eclipse에서 Script Explorer(스크립트 탐색기) 보기로 전환하고 프로젝트를 마우스 오른쪽 버튼으로 클릭한 후 Export(내보내기) > Adobe Extension Builder 3 > Application Extension(애플리케이션 확장)을 선택합니다. 그러면 Export Wizard(내보내기 마법사)가 표시됩니다.
2. 확장 패키지를 서명할 인증서가 있어야 합니다. 기존 인증서를 찾아 선택하거나 Create(만들기)를 클릭하여 새 인증서를 만듭니다.
3. Finish(완료)를 클릭합니다.
4. 내보내기가 완료되면 확장을 배포할 수 있도록 준비된 ZXP 패키지가 프로젝트 폴더에 나타납니다.

참고: 설치하려면 <extension>\.staged-extension\CSXS\manifest.xml 파일에 액세스한 후 host 태그를 업데이트하여 Animate의 최소 버전을 13.0으로 설정해야 합니다.

Animate에서 확장 설치

Adobe Extension Manager를 사용하여 Animate 내에서 HTML 확장을 설치할 수 있습니다. HTML 확장을 통해 Animate의 여러 기능을 확장할 수 있습니다.

HTML 확장에 대화형 기능 추가

컨트롤을 추가하고, 비헤이비어를 정의하며, 호스트(Animate 및 운영 체제 포함) 환경에 대한 정보를 가져와 Animate와 상호 작용하도록 HTML 확장을 만들 수 있습니다. 이러한 작업은 다음과 같은 두 가지 방법으로 수행할 수 있습니다.

1. CEP 인터페이스 라이브러리 사용: CEP 인터페이스 라이브러리는 호스트 환경에 대한 정보를 가져오기 위한 API와 JSFL을 실행할 수 있도록 해 주는 eval 스크립트를 제공합니다. CEP 인터페이스 라이브러리에 대한 자세한 내용을 보려면 Eclipse 내에서 Help(도움말) > Help Contents(도움말 내용) > Adobe Extension Builder > References(참조)를 여십시오.
2. JSFL 사용: JSFL 스크립트는 CEP 인터페이스 라이브러리의 Eval 스크립트 API를 사용하여 실행할 수 있습니다.
   
   JSFL과는 별개로, Animate 내의 CEP 인프라는 HTML 패널 내에서만 사용할 수 있는 다음 이벤트도 표시합니다.
   • com.adobe.events.flash.documentChanged: 현재 활성 문서의 변경 사항으로 인해 트리거됩니다.
   • com.adobe.events.flash.timelineChanged: 현재 활성 문서의 타임라인을 변경하는 경우 트리거됩니다.
   • com.adobe.events.flash.documentSaved: 현재 문서를 저장하는 경우 트리거됩니다.
   • com.adobe.events.flash.documentOpened: 새 문서를 여는 경우 트리거됩니다.
   • com.adobe.events.flash.documentClosed: 현재 활성 문서를 닫는 경우 트리거됩니다.
   • com.adobe.events.flash.documentNew: 새 문서를 만드는 경우 트리거됩니다.
   • com.adobe.events.flash.layerChanged: 다른 레이어를 선택하는 경우 트리거됩니다.
   • com.adobe.events.flash.frameChanged: 다른 프레임을 선택하는 경우 트리거됩니다.
   • com.adobe.events.flash.selectionChanged: 스테이지에서 다른 객체를 선택하는 경우 트리거됩니다.
   • com.adobe.events.flash.mouseMove: 스테이지로 마우스를 가져가는 경우 트리거됩니다.

예제

위 코드 조각에서 각각은 다음과 같습니다.

• csinterface: CEP 인터페이스 라이브러리의 객체입니다.
• com.adobe.events.flash.selectionChanged: 객체의 선택 내용 내 변경을 트리거하는 이벤트입니다. 위에서 언급한 임의의 이벤트를 사용할 수도 있습니다.
• CallbackFunction: 트리거된 이벤트를 수신 대기하는 메서드입니다.