사용 안내서 취소

사용자 정의 구성 요소 만들기: 예제

  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. 애니메이션의 빠른 공유 및 게시

이 문서에서 샘플 HTML5 사용자 정의 구성 요소에 대해 알아보십시오.

이 문서는 사용자 정의 구성 요소를 만드는 방법에 대해 설명합니다. 첫 번째 예제에서는 개발과 관련된 프레임워크 및 단계를 이해하기 위한 이미지 구성 요소(Animate와 함께 제공) 및 프로세스에 대해 설명합니다. 두 번째 예제에서는 기존 UI 구성 요소(jQueryUI 등)를 래핑하여 Animate 안으로 가져오는 방법에 대해 설명합니다.

  1. DOM 이미지 구성 요소 만들기

    My Components라는 범주를 만듭니다. 

    a. 처음 실행할 때 <HTML5Components> 폴더 아래에 mycomponents라는 폴더를 만듭니다.

    b. 첨부된 myimage.zip 파일을 다운로드하고

        mycomponents 폴더 아래에 컨텐츠를 압축 해제합니다.

    다운로드

    c. Animate를 다시 시작합니다.

mycomponents 폴더 내의 디렉토리 구조
mycomponents 폴더 내의 디렉토리 구조

구성 요소 폴더에 “My Components”라는 새 범주 그리고 그 안에 My Image라는 새 구성 요소가 보일 것입니다. 이 구성 요소를 스테이지로 드래그 앤 드롭하고, 이미지 소스 속성을 설정하고, 동영상을 제작하여 사용자 정의 구성 요소가 어떻게 사용되는지를 볼 수 있습니다. 

구성 요소 메타데이터 - components.js

Components.js 코드
Components.js

범주는 CATEGORY_MY_COMPONENTS로 설정되어 있습니다. 각 속성의 이름도 비슷한 키를 사용하고 있습니다. 이것은 범주 이름에 대해 지역화된 문자열의 키입니다. 로케일 폴더에서 strings.json을 열면 다음과 같은 항목이 보입니다.

 이 파일을 편집할 때의 가장 흔한 오류는 배열에 있는 마지막 요소의 뒤에 불필요한 쉼표를 두는 것입니다.

범주 세부 정보
범주 세부 정보

아이콘 필드의 값은 Sp_Image_Sm으로 설정됩니다. 에셋 폴더로 이동하면 그 아래에 Sp_Image_Sm 접두사가 붙은 두 개의 png가 있을 것입니다.

아이콘 필드의 값
아이콘 필드의 값

어두운 UI 및 밝은 UI에 대한 아이콘입니다.

components.json에 있는 ‘소스’ 필드의 값이 ‘src/myimage.js’로 설정됩니다. 

(function($) {    

// 구성 요소를 className: my.Image로 등록하고,
 // 다음 오버라이드로 프로토타입 설정 
 // getCreateOptions
 // getCreateString
 // getProperties
 // getAttributes
    $.anwidget(&quot;my.Image&quot;, {
         options: {
   'visible': true,
   'position': 'absolute'
         },
  _props: [&quot;left&quot;, &quot;top&quot;, &quot;width&quot;, &quot;height&quot;, &quot;position&quot;, &quot;transform-origin&quot;, &quot;transform&quot;],
  
_attrs: [&quot;id&quot;, &quot;src&quot;, &quot;alt&quot;, &quot;class&quot;, &quot;border&quot;],
  
// 접두사 이미지가 있는 고유 ID 반환
  // _widgetID는 위젯에서 선언하는 글로벌 변수
  // 이 ID는 사용자가 Animate의 구성 요소에 대한 인스턴스 ID를 설정하지 않았을 때만 사용
  // 그 외의 경우 사용자가 구성한 이름 사용
  getCreateOptions: function() {
   return $.extend(this.options, { 'id': &quot;image&quot; + _widgetID++ });
  },
  
// DOM 요소 생성에 대한 스트링 반환
  // 이미지의 경우 <img> 태그만 만들면 됨
  getCreateString: function() {
   return &quot;<img>&quot;;
  },
  
// 구성할 수 있는 속성 세트
  getProperties: function() {
   return this._props;
  },
  
// 구성할 수 있는 속성 세트
  getAttributes: function() {
   return this._attrs;
  }    
 });   
})(jQuery);

코드에 있는 주석을 통해 쉽게 이해할 수 있습니다. 

Animate와 함께 제공되는 다른 구성 요소의 소스도 자유롭게 살펴보십시오. 대부분의 경우 그중 하나를 시작점으로 사용한 후에 각자의 요구 사항에 맞게 구성할 수 있습니다.

jQuery-UI 구성 요소 래핑

이 섹션에서는 jQuery-UI 위젯을 래핑하고 Animate에서 사용하는 방법에 대해 설명합니다. 같은 개념을 사용하여 다른 UI 프레임워크로부터 다른 기존 구성 요소를 래핑할 수도 있습니다.

Animate와 함께 패키징된 DatePicker 구성 요소를 살펴보겠습니다. 이 구성 요소는 jQuery-UI 위젯입니다. 다음 아카이브의 컨텐츠를 다운로드 및 압축 해제하고 참조를 위해 사용하십시오.

다운로드

압축 해제된 컨텐츠의 구조
압축 해제된 컨텐츠의 구조

원본 DatePicker 위젯 그리고 이미지 및 css와 같은 해당 리소스를 포함하고 있는 jQuery UI 프레임워크의 소스인 jquery-ui-1.12.0이라는 폴더를 여타 HTML5 구성 요소처럼 Animate에서 래핑하고 사용하고자 합니다. 이것은 로컬 미리 보기에 대해서만 필수입니다. 제작 설정에서 “호스팅되는 라이브러리”를 사용할 때는 cdn을 사용하여 종속 소스를 다운로드할 수 있습니다. 

Components.js 코드
Components.js

jQuery 및 anwidget.js의 두 가지 기본 종속성이 있습니다. anwidget.js는 CDN에 있지 않기 때문에 이에 대한 CDN 항목이 없습니다.

다음 항목 세트는 jQuery UI로부터 datepicker 위젯을 로드하는 데 필요한 다른 리소스를 위한 것입니다. 다른 라이브러리로부터 위젯을 래핑하는 경우 해당 위젯에 대한 종속성 세트를 비슷하게 지정할 수 있습니다. 이러한 종속성은 구성 요소가 초기화되기 전에 다운로드됩니다.

속성 섹션에서는 label이라는 하나의 속성만 표시됩니다. 이것은 date-picker 구성 요소의 label 속성에 연결되어 있습니다. 사용자가 Animate의 제작 환경에서 구성할 수 있도록 할 다른 속성을 표시할 수도 있습니다. 런타임에 인스턴스의 옵션 배열에서 각각을 키-값 쌍으로 사용할 수 있습니다. 구성된 값을 추출하여 런타임에 적용할 수 있습니다.

기본 소스 파일: src/datepicker.js.
기본 소스 파일: src/datepicker.js.

예제와 다른 섹션

  1. getCreateString:

    jQuery-UI의 datepicker 위젯은 이러한 입력 텍스트 요소를 가져와서 런타임에 date-picker 요소로 변환합니다. 따라서 이에 맞게 DOM을 초기화합니다.

  2. attach:

    이 위젯에 대해 이 기능을 재정의해야 합니다. 이 API는 요소가 DOM에 연결될 때마다 호출됩니다. 하지만 기본 런타임(이 경우에는 createjs)의 작동 방식 때문에 이 API는 프레임 범위 동안 여러 번 호출될 수도 있습니다.

    기본 요소의 연결된 상태를 기억한 후에 기본 클래스의 연결 API를 호출합니다(this._superApply(arguments)를 사용함). 요소를 부모 DOM에 처음 연결하는 경우에는 기본 jQuery-UI 위젯의 호출을 사용하여 구성 요소의 DOM을 datepicker로 변환합니다. 참조 - https://jqueryui.com/datepicker/

    대부분의 javascript 위젯은 비슷한 방식으로 작동합니다. 동일한 기술을 사용하여 원하는 구성 요소를 래핑하고 같은 방법으로 Animate로 가져올 수 있습니다.

  3. 업데이트: 업데이트를 재정의하고 컨테이너 div의 css 속성을 실제 DOM 요소에 연결합니다.

     attach, detach 또는 update와 같이 API를 재정의할 때는 기본 클래스의 기본 구현을 평가하고 적절한 시점에 기본 구현을 호출하십시오. 그렇게 하지 않으면 구성 요소 초기화가 실패할 수 있습니다.

Adobe 로고

내 계정 로그인