Animate에서 HTML5 Canvas 문서 만들기 및 게시

Canvas는 그래픽, 차트, 이미지 및 애니메이션을 동적으로 생성하고 렌더링할 수 있는 API를 제공하는 HTML5의 새로운 요소입니다. HTML5용 Canvas API가 있으면 2차원 드로잉 기능을 제공하여 HTML5 플랫폼을 더욱 강화합니다. 이러한 기능은 현재 배포된 대부분의 운영 체제와 브라우저에서 지원됩니다.

기본적으로 Canvas는 비트맵 렌더링 엔진이므로 생성된 드로잉은 최종 버전이며 크기를 조정할 수 없습니다. 또한 Canvas에 그려진 객체가 웹 페이지 DOM의 일부도 아닙니다.

웹 페이지 내에서 <Canvas> 태그를 사용하여 Canvas 요소를 추가할 수 있습니다. 그런 다음 JavaScript를 사용하여 이러한 요소를 향상시켜 대화형 기능을 구축할 수 있습니다. 자세한 내용은 이 링크를 참조하십시오.

새 HTML5 Canvas 문서 유형

Animate에서는 풍부한 아트워크, 그래픽, 애니메이션 등이 포함된 HTML5 Canvas 문서를 만들 수 있습니다. 풍부한 대화형 HTML5 내용을 만들 수 있도록 기본적으로 지원하는 HTML5 Canvas라는 새 문서 유형이 Animate에 추가되었습니다. 즉, 기존 Animate 타임라인, 작업 영역 및 도구를 사용하여 내용을 만들고 HTML5 출력으로 제작할 수 있습니다. 몇 번만 클릭하면 HTML5 Canvas를 만들고 완벽한 기능의 출력을 생성할 준비를 마칠 수 있습니다. 게다가 Animate 내의 문서 및 제작 옵션이 HTML5 출력을 생성하도록 사전 설정되어 있습니다.

Animate는 HTML5를 통해 개방형 웹 기술에서 풍부한 대화형 내용을 사용할 수 있는 CreateJS와 통합됩니다. Animate는 스테이지에서 만든 내용(예: 비트맵, 벡터, 모양, 사운드, 트윈 등)에 대한 HTML 및 JavaScript를 생성합니다. 해당 출력은 HTML5 Canvas를 지원하는 모든 장치 및 브라우저에서 실행할 수 있습니다.

Animate 및 Canvas API

Animate에서는 Canvas API를 활용하여 HTML5로 제작합니다. Animate에서는 스테이지에서 만든 객체를 해당하는 Canvas로 원활하게 변환합니다. Canvas 내에서 API와 함께 Animate의 일대일 매핑 기능을 제공하여 Animate에서 복잡한 내용을 HTML5로 제작할 수 있습니다.

HTML5 Canvas 문서 만들기

HTML5 Canvas 문서를 만들려면 다음을 수행하십시오.

1. 파일 > 새로 만들기를 선택하여 [새 문서] 대화 상자를 표시합니다. 화면 상단에서 고급 탭을 선택하고 [HTML5 Canvas] 옵션을 클릭합니다. 그러면 HTML5 출력을 만들기 위해 수정된 제작 설정과 함께 새 FLA가 열립니다.

이제 Animate 내의 도구를 사용하여 HTML5 내용을 만들기 시작할 수 있습니다. HTML5 Canvas 문서를 사용한 작업을 시작하면 특정 기능 및 도구가 지원되지 않고 비활성화됩니다. 이 경우 Animate가 HTML5 내의 Canvas 요소가 지원하는 기능을 지원하기 때문입니다. 예를 들어 3D 변형, 점선, 경사 효과는 지원되지 않습니다.

HTML5 Canvas 문서에 대화형 기능 추가

Animate는 CreateJS 라이브러리를 사용하여 HTML5 내용을 제작합니다. CreateJS는 HTML5를 통해 개방형 웹 기술에서 풍부한 대화형 내용을 사용할 수 있도록 지원하는 모듈식 라이브러리 및 도구 모음입니다. CreateJS 모음은 EaselJS, TweenJS, SoundJS 및 PreloadJS로 구성되어 있습니다. CreateJS는 이러한 개별 라이브러리를 사용하여 스테이지에서 만든 내용을 HTML5로 변환하고 HTML 및 JavaScript 출력 파일을 제작합니다. 또한 이 JavaScript 파일을 조작하여 내용을 더욱 향상시킬 수 있습니다.

하지만 Animate를 사용하면 프로그램 내에서 HTML5 Canvas용으로 만든 스테이지의 객체에 대화형 기능을 추가할 수 있습니다. 즉, Animate 내에서 스테이지의 개별 객체에 JavaScript 코드를 실제로 추가할 수 있으므로 제작하면서 미리 보기가 가능합니다. 결과적으로 Animate는 코드 편집기 내에서 유용한 기능과 함께 JavaScript를 기본 제공하므로 프로그래머 작업 과정의 효율성을 크게 향상시킵니다.

타임라인에서 개별 프레임과 키프레임을 선택하여 내용에 대화형 기능을 추가할 수 있습니다. HTML5 Canvas 문서의 경우 JavaScript를 사용하여 대화형 기능을 추가할 수 있습니다. JavaScript 코드를 작성하는 방법에 대한 자세한 내용은 이 링크를 참조하십시오.

JavaScript 코드를 [액션] 패널에서 직접 작성할 수 있습니다. JavaScript 코드를 작성할 때 지원되는 기능은 다음과 같습니다.

실수 없이 JavaScript 코드를 빠르게 삽입하고 편집할 수 있도록 도와줍니다. [액션] 패널에서 문자를 입력하면 입력 가능성이 높은 제안 목록이 표시됩니다.

더욱이 Animate는 HTML5 Canvas로 작업할 때 [액션] 패널에 기본적으로 포함된 일부 기능을 지원합니다. 이러한 기능은 스테이지의 객체에 대화형 기능을 추가하는 작업 과정의 효율성을 높이는 데 유용합니다. 이들은 다음과 같습니다.

구문에 따라 코드를 다른 글꼴이나 색상으로 표시합니다. 이러한 기능을 통해 체계적으로 코드를 작성할 수 있으며 올바른 코드를 시각적으로 구분하고 구문 오류를 방지하는 데 도움이 됩니다.

구문에 따라 코드를 다른 색상으로 표시합니다. 따라서 여러 부분의 구문을 시각적으로 구분할 수 있습니다.

JavaScript 코드를 작성할 때 여는 대괄호와 소괄호가 있으면 자동으로 닫는 대괄호와 소괄호를 추가합니다.

JavaScript를 사용하여 스테이지의 모양이나 객체에 대화형 기능을 추가할 수 있습니다. 개별 프레임 및 키프레임에 JavaScript를 추가할 수 있습니다.

1. JavaScript를 추가하려는 프레임을 선택합니다.
2. 윈도우 > 액션을 선택하여 [액션] 패널을 엽니다.

JavaScript 코드 조각 사용

Animate 내에서 제공하는 JavaScript 코드 조각을 사용하여 대화형 기능을 추가할 수 있습니다. 코드 조각을 액세스하여 사용하려면 윈도우 > 코드 조각을 선택합니다. JavaScript 코드 조각 추가에 대한 자세한 내용은 이 문서를 참조하십시오.

CreateJS 설명서 참조

인터랙티브한 요소를 유도하는 코드

Javascript를 사용하면 애니메이션을 인터랙티브하게 해주는 다양한 옵션을 제공할 수 있습니다. 캐릭터에 인터랙티브한 움직임을 추가하는 방법을 뱅고 싶습니까? 이 예제의 끝에 있는 자습서를 보고 다음 단계를 따르십시오.

HTML5에서 콘텐츠를 인터랙티브하게 만드는 방법

애니메이션을 HTML5로 제작

스테이지의 내용을 HTML5로 제작하려면 다음을 수행하십시오.

1. 파일 > 제작 설정을 선택합니다.
2. [제작 설정] 대화 상자에서 다음 설정을 지정합니다.

기본 설정

FLA가 제작되는 위치의 디렉토리입니다. 이는 FLA와 동일한 디렉토리로 설정되지만 "..." 브라우저 버튼을 클릭하여 변경할 수 있습니다.

타임라인이 반복하도록 선택됩니다. 선택되어 있지 않을 경우, 끝까지 재생되면 멈춥니다.

선택 취소된 경우 숨겨진 레이어가 출력에 포함되지 않습니다.

스테이지가 가로로, 세로로 또는 두 가지 모두로 가운데에 배치되어야 할지를 사용자가 선택할 수 있습니다. HTML 캔버스/스테이지는 기본적으로 브라우저 창의 가운데에 표시됩니다.

애니메이션이 폭, 높이 또는 두 가지 모두에 대해 대응하고 다양한 폼 팩터에 따라 제작된 출력의 크기를 조정할지를 사용자가 선택할 수 있습니다. 그 결과, 대응적이며 더 선명하고 생생한 HiDPI 호환 출력을 얻게 됩니다.

또한 출력은 테두리 없이 전체 스크린 영역을 채우도록 늘일 수 있지만, 캔버스의 일부가 보기에 포함되지 않더라도 원래 종횡비는 유지됩니다.

• 폭, 높이 또는 모두 옵션을 사용하면 전체 내용의 크기가 캔버스 크기로 축소되고, 작은 화면(예: 모바일 장치 또는 태블릿)에서 보는 경우에도 표시됩니다. 화면 크기가 제작된 스테이지 크기보다 더 큰 경우 캔버스는 원래 크기로 표시됩니다.

애니메이션이 출력을 전체 화면 모드로 보기에 맞출지 아니면 늘여서 맞출지를 사용자가 선택할 수 있습니다. 기본적으로 이 옵션은 비활성화됩니다.

보기에 맞추기: 출력을 전체 화면 공간을 사용하여 전체 화면 모드로 표시하지만 종횡비는 유지됩니다.

늘여서 맞추기: 출력에 테두리 공간이 없도록 늘입니다.

기본 프리로더를 사용할지, 아니면 문서 라이브러리에서 원하는 프리로더를 선택할지를 사용자가 선택할 수 있습니다.

프리로더는 애니메이션을 렌더링하는 데 필요한 스크립트 및 에셋이 로드되는 동안 표시되는 애니메이션 GIF 형태의 시각적 표시기입니다. 에셋이 로드되면 프리로더는 숨겨지고 실제 애니메이션이 표시됩니다.

기본적으로 프리로더 옵션은 선택되지 않습니다.

• 기본 옵션은 기본 프리로더를 사용합니다.
• 찾아보기 옵션은 선택한 프리로더 GIF를 사용합니다. 프리로더 GIF는 이미지 내보내기 에셋의 구성된 이미지 폴더에 복사됩니다.
• 선택된 GIF를 미리 보려면 미리 보기 옵션을 사용합니다.

전환 옵션을 사용하여 루트 또는 하위 폴더 수준에서 제작하도록 선택할 수 있습니다. 이 버튼은 기본적으로 켜기로 설정됩니다. 끄기로 전환하면 폴더 필드가 비활성화되고 에셋이 출력 파일과 동일한 폴더에 내보내집니다.

서류를 텍스처로 내보내기  애니메이션의 성능을 향상시키기 위해 텍스처로 벡터 애니메이션을 내보냅니다. 자세한 내용은 텍스처 게시를 참조하십시오.

 이미지를 [스프라이트 시트에 결합] 옵션을 선택하지 않은 경우에만 적용할 수 있습니다.

 크기를 유지한 채로 캔버스 문서에서 가져온 문서(압축 문서 포함)를 모두 내보낼 수 있습니다. [기본] 탭에 있는 [문서를 텍스처로 내보내기] 및 [이미지를 스프라이트 시트에 결합] 옵션의 선택을 해제합니다. 이미지를 크기 변경 없이 내보냅니다.

이미지 에셋을 배치하고 참조할 폴더입니다.

스프라이트 시트로 결합: 모든 이미지 에셋을 하나의 스프라이트 시트로 결합하려면 이 옵션을 선택합니다. 더 많은 스프라이트 시트 옵션은 비트맵을 스프라이트 시트로 내보내기를 참조하십시오.

문서의 사운드 에셋을 배치하고 참조할 폴더입니다.

CreateJS 라이브러리를 배치하고 참조할 폴더입니다.

 기본 설정을 사용하면 계속해서 파일을 논리적 하위 폴더로 분리하여 게시합니다.

고급 설정

이미지, 사운드 및 지원하는 CreateJS JavaScript 라이브러리를 내보낼 관련 URL입니다. 오른쪽의 체크 상자가 선택되어 있지 않을 경우 해당 에셋을 FLA에서 내보내지 않지만 지정된 경로는 계속 해당 URL을 조합하는 데 사용됩니다. FLA에서 많은 미디어 에셋으로 제작하는 작업의 속도를 높여주거나 수정된 JavaScript 라이브러리가 덮어써지는 것을 방지합니다.

모든 비트맵을 스프라이트 시트로 내보내기 옵션을 사용하면 캔버스 문서의 모든 비트맵을 스프라이트 시트로 패킹할 수 있으며, 이로 인해 서버 요청의 수가 감소하고 성능이 향상됩니다. 높이 및 폭 값을 지정하여 스프라이트 시트의 최대 크기를 지정할 수 있습니다.

기본값 사용: 기본 템플릿을 사용하여 HTML5 출력을 제작합니다.

새로 가져오기: HTML5 문서에 대한 새 템플릿을 가져옵니다.

내보내기: HTML5 문서를 템플릿으로 내보냅니다.

선택된 경우 이는 code.createjs.com의 CreateJS CDN에서 호스팅되는 라이브러리의 사본을 사용합니다. 따라서 라이브러리를 캐싱하고 다양한 사이트에서 공유할 수 있습니다.

선택 취소된 경우 숨겨진 레이어가 출력에 포함되지 않습니다.

선택된 경우 벡터 명령이 압축 형식으로 출력되지 않습니다. 선택 취소하면 가독성 있는 간단한 명령을 내보낼 수 있습니다(학습 목적으로 유용함).

선택된 경우 타임라인의 각 프레임 경계에 해당하는 사각형 배열을 포함하는 frameBounds 속성이 타임라인 심볼에 포함됩니다. 다중 프레임 경계는 제작 시간을 상당히 높입니다.

[HTML에 JavaScript 포함]이 선택된 경우, [제작 시 HTML 파일 덮어쓰기] 체크 상자가 선택되고 비활성화됩니다. [제작 시 HTML 파일 덮어쓰기] 체크 상자의 선택을 취소하면 [HTML에 JavaScript 포함]의 선택이 취소되고 비활성화됩니다.

3. [게시]를 클릭하여 지정한 위치에 콘텐츠를 게시합니다.

 단일 프레임에 중첩된 타임라인을 사용하여 디자인한 애니메이션에는 반복을 적용할 수 없습니다.

HTML 템플릿 변수

제작 중 새 사용자 정의 HTML 템플릿을 가져오는 경우, 해당 FLA 파일의 구성 요소에 따라 기본 변수가 사용자 정의된 코드 조각으로 바뀝니다. 

다음 표에는 Animate에서 인식하고 바꾸는 현재 템플릿 변수가 나열되어 있습니다.

이전 버전의 다음과 같은 토큰은 현재 버전에서 더 이상 사용되지 않습니다.

 이러한 토큰은 모듈화되고 다른 토큰으로 바뀝니다.

캔버스 문서에 대해 HTML 템플릿을 가져오고 내보낼 수 있는 JSAPI 지원

다음 JSAPI는 캔버스 문서에 대한 HTML 템플릿의 가져오기 및 내보내기를 지원합니다.

• 지정된 위치의 특정 문서에 대해 HTML5 Canvas 제작 템플릿을 내보냅니다.

bool document::exportCanvasPublishTemplate(pathURI)

• 예제:

var pathURI ="file:///C|/Users/username/desktop/CanvasTemplate.html” 

var exportFlag =fl.getDocumentDOM().exportCanvasPublishTemplate(pathURI);

if(!exportFlag)

        fl.trace(“템플릿을 내보낼 수 없습니다”);

• 지정된 위치 pathURI에서 특정 문서에 대해 HTML5 Canvas 제작 템플릿을 가져오고 설정합니다.
  

bool document::importCanvasPublishTemplate(pathURI)

• 예제: 

var pathURI= “file:///C|/Users/username/desktop/CanvasTemplate.html”;

var exportFlag =fl.getDocumentDOM().importCanvasPublishTemplate(pathURI);

if(!exportFlag)

        fl.trace(“템플릿을 내보낼 수 없습니다”);

HTML에 JavaScript 포함

Animate에서는 캔버스 제작 중에 HTML 파일 내에 JS 파일을 포함할 수 있는 기능이 도입되었습니다.

1. 제작 설정 메뉴에서 고급 탭으로 전환하고 HTML에 JavaScript 포함을 선택합니다. 
2. 제작 시 HTML에 JavaScript 포함 대화 상자에서 확인을 선택하여 HTML을 덮어쓰는 내용을 다시 제작합니다.
3. 그러면 제작 시 HTML 파일 덮어쓰기 체크 상자가 비활성화되고, 모든 제작 이벤트 중에 HTML이 생성되지만 덮어써집니다.
4. HTML에 JavaScript 포함 중지 선택에서 확인을 선택하여 JavaScript를 제외하고 HTML 파일을 다시 제작합니다.
5. 제작 시 HTML 파일 덮어쓰기가 선택되지 않은 경우 HTML에 JavaScript 포함 옵션이 자동으로 비활성화됩니다.

 HTML을 덮어쓰기를 원하지 않는 경우 [게시 시 HTML 파일 덮어쓰기] 옵션과 [HTML에 JS 포함] 옵션은 공존할 수 없습니다

전역 및 서드 파티 스크립트 추가

애니메이션 제작자들은 전체 애니메이션에 적용되는 JavaScript 코드를 활용하는 경우가 많습니다. 이 기능을 사용하면 적용 가능한 비프레임 관련 전역 및 서드 파티 스크립트를 Animate 내의 전체 애니메이션에 추가할 수 있습니다. 

전역 스크립트를 추가 및 사용하려면:

서드파티 스크립트 추가

애니메이션 제작자들은 서드파티 JavaScript 라이브러리를 통합하지만 Animate가 생성하는 코드를 직접 수정해야 하는 경우가 많습니다. 이 기능을 사용하는 애니메이션 제작자는 보다 자유로운 방식으로 최신 JavaScript 라이브러리 또는 코드를 애니메이션에 활용할 수 있습니다.

서드 파티 스크립트를 추가하려면:

JS에 JSON 데이터 병합

고객 피드백과 JSON 파일이 기본적으로 안전하지 않다는 점에 기반하여 관련 데이터를 JS 파일과 병합했으며, 따라서 별개의 JSON 파일은 만들어지지 않습니다.

HTML5 Canvas 출력 최적화

Animate는 다음과 같은 방법으로 HTML5 Canvas 출력을 최적화합니다.

• [제작 설정]의 [스프라이트 시트] 탭에 있는 옵션을 사용하여 비트맵을 스프라이트 시트로 내보내기
• 제작된 출력에서 숨겨진 레이어 제외([숨겨진 레이어 포함] 체크 상자 선택 해제)
• 사운드, 비트맵과 같은 사용하지 않은 모든 에셋 및 사용되지 않은 프레임의 모든 에셋 제외(기본값)
• 이미지, 사운드 및 지원하는 CreateJS JavaScript 라이브러리에 대한 에셋 내보내기 옵션의 선택을 해제하고 내보낼 상대 URL을 사용하여 FLA에서 에셋을 내보내지 않도록 지정
• HiDPI 호환 HTML5 Canvas 출력: Animate에서는 내용을 보는 장치의 픽셀 비율에 따라 출력의 크기가 조절됩니다. 이 호환성을 통해 확대/축소 기능이 포함된 더 선명한 출력이 제공되고, HiDPI(High DPI) 시스템에서 HTML 캔버스 출력을 보는 경우 캔버스 문서의 픽셀화 문제도 수정됩니다. 
  

투명 캔버스 배경 설정

캔버스를 다양한 색상으로 사용자 정의하고 해당 캔버스의 표시 투명도를 수정할 수도 있습니다. 투명한 캔버스를 만드는 경우 제작 중에 기본 HTML 내용을 볼 수 있습니다.

참고: 이 설정은 OAM 제작 중에 배경을 투명하게 지정할 수도 있습니다.

1. 수정할 캔버스를 선택합니다.
2. 속성 창에서 스테이지를 선택합니다.
3. 스테이지에서 알파에 대해 백분율 값을 설정합니다.

"색상 없음" 견본 지원

또한 다음과 같이 색상 없음 견본 옵션을 사용하여 캔버스 배경을 투명하게 설정할 수도 있습니다.

1. 수정 > 문서 >스테이지 색상을 선택하거나 속성 관리자에서 고급 설정을 선택합니다.
2. 스테이지 색상 견본에서 색상 없음을 선택합니다.

비트맵을 스프라이트 시트로 내보내기

HTML5 Canvas 문서에서 사용한 많은 비트맵을 단일 스프라이트 시트로 내보내면 서버 요청 수가 감소하고, 출력 크기가 줄어들며, 성능이 향상됩니다. 스프라이트 시트를 PNG(기본값), JPEG 또는 두 가지 모두로 내보낼 수 있습니다.

1. 스프라이트시트 탭에서 이미지 및 에셋을 스프라이트시트로 결합 체크 상자를 선택하십시오.
2. 형식은 PNG, JPEG 또는 모두를 선택하십시오.
   
3. PNG 또는 모두를 선택했으면 PNG 설정에서 다음 옵션을 지정하십시오.
   • 품질: 스프라이트 시트 품질을 8비트(기본값), 24비트 또는 32비트로 설정합니다.
   • 최대 크기: 스프라이트시트의 최대 높이와 폭을 픽셀 단위로 지정합니다.
   • 배경: 클릭하여 스프라이트시트에 대한 배경색을 설정합니다.   
4. JPEG 또는 모두를 선택했으면 JPEG 설정에서 다음 옵션을 지정하십시오.
   
   • 품질: 스프라이트시트 품질을 설정합니다.
   • 최대 크기: 스프라이트시트의 최대 높이와 폭을 픽셀 단위로 지정합니다.
   • 배경: 클릭하여 스프라이트시트에 대한 배경색을 설정합니다.   

HTML5 Canvas 문서에서 텍스트로 작업하기

HTML 캔버스는 정적 및 동적 텍스트를 지원합니다.

정적 텍스트

정적 텍스트는 제작 시 모든 에셋이 외곽선으로 변환되고 뛰어난 WSYWIG 사용자 경험을 제공하는 더 풍부한 옵션입니다. 텍스트가 벡터 외곽선으로 제작되므로 런타임에 해당 벡터 외곽선을 편집할 수 없습니다.

참고: 정적 텍스트를 너무 많이 사용하면 파일 크기가 매우 커질 수 있습니다.

동적 텍스트

동적 텍스트를 사용하면 런타임에 텍스트를 수정할 수 있으며 파일 크기가 너무 많이 늘어나지 않습니다. 동적 텍스트는 정적 텍스트보다 더 적은 옵션을 지원합니다. 또한 Adobe Fonts를 통해 웹 글꼴을 지원합니다.

최종 사용자 시스템에서 사용할 수 없는 글꼴이 포함된 동적 텍스트를 사용하는 경우 출력에서 표시를 위해 기본 글꼴이 사용되며, 따라서 사용자 경험이 왜곡됩니다. 이러한 문제는 웹 글꼴을 통해 해결됩니다.

HTML5 Canvas 문서에 웹 글꼴 추가

Animate에서는 HTML5 Canvas 문서의 동적 텍스트 유형에 웹 글꼴을 제공합니다. Adobe Fonts를 통해 최상위 제작 파트너의 고품질 프리미엄 글꼴 수천 개에 직접 액세스할 수 있습니다. Creative Cloud 멤버십을 사용하여 최신 브라우저와 모바일 장치의 HTML5 출력에서 원활하게 Adobe Fonts에 액세스하고 이를 사용할 수 있습니다.

Animate에서 Adobe Fonts의 글꼴을 사용하는 방법을 자세히 알아보려면 HTML5 Canvas 문서에서 웹 글꼴 사용을 참조하십시오.

Animate 릴리스 2015.2에서는 스테이지와 제작된 모양이 동기화되도록 캔버스 문서의 동적 텍스트에 대한 시각적 경험이 향상됩니다.

참고: 정적 텍스트 유형에 대해서는 Adobe Fonts를 사용할 수 없습니다.

HTML5 Canvas 출력 이해

제작된 HTML5 출력에는 다음 파일이 포함되어 있습니다.

Canvas 요소 내의 모든 모양, 객체 및 아트워크에 대한 정의를 포함하고 있습니다. 또한 CreateJS 네임스페이스를 호출하여 Animate를 대화형 요소가 포함된 해당 JavaScript 파일과 HTML5로 변환합니다. 

애니메이션의 모든 대화형 요소에 대한 전용 정의와 코드를 포함하고 있습니다. 또한 모든 유형의 트윈 코드도 JavaScript 파일 내에 정의되어 있습니다.

JavaScript 파일은 기본적으로 FLA 파일과 동일한 위치에 복사됩니다. 위치는 [제작 설정] 대화 상자([파일] > [제작 설정])에서 출력 경로를 지정하여 변경할 수 있습니다.

기존 내용을 HTML5 Canvas에 마이그레이션

Animate 내의 기존 내용을 마이그레이션하여 HTML5 출력을 생성할 수 있습니다. 이를 위해 Animate에서 개별 레이어, 심볼, 기타 라이브러리 항목을 수동으로 복사 또는 가져오는 방식으로 내용을 마이그레이션할 수 있습니다. 또는 HTML5 Canvas 문서 명령에 대해 Convert AS3를 실행하여 기존 ActionScript 내용을 새 HTML5 Canvas 문서에 자동으로 이식할 수도 있습니다. 자세한 내용은 이 링크를 참조하십시오.

하지만, Animate에서 HTML5 문서 유형으로 작업할 때 특정 Animate 기능이 지원되지 않을 수 있습니다. Animate 내의 기능이 Canvas API 내의 기능과 호응하지 않기 때문입니다. 따라서 이러한 기능은 HTML5 Canvas 문서 유형 내에서 사용될 수 없습니다. 이 설정은 다음과 같은 작업 시 내용을 마이그레이션하는 데 영향을 줄 수 있습니다.

기존 Animate 문서 유형(예: ActionScript 3.0, AIR for Android, AIR for Desktop 등)의 내용(예: 레이어 또는 라이브러리 심볼)을 HTML5 문서로 복사하는 경우. 이 경우 지원되지 않는 내용 유형이 삭제되거나 지원되는 기본값으로 변환됩니다.

예를 들어 3D 애니메이션을 복사하면 스테이지의 객체에 적용된 모든 3D 변형이 제거됩니다.

지원되지 않는 내용을 포함한 PSD 또는 AI 파일을 가져올 경우. 이 경우 내용이 삭제되거나 지원되는 기본값으로 변환됩니다.

예를 들어 그래디언트 경사 효과가 적용된 PSD 파일을 가져옵니다. Animate가 효과를 제거합니다.

ActionScript 3.0 및 HTML5 Canvas와 같이 여러 문서 유형으로 동시에 작업하는 경우. 문서를 지원되지 않는 도구나 선택한 옵션으로 전환합니다. 이 경우 Animate에서 이 기능을 지원하지 않는다는 것을 시각적으로 보여줍니다.

예를 들어 ActionScript 3.0 문서에 점선을 만들고 선 도구를 선택한 상태로 HTML5 Canvas로 전환합니다. 이때 포인터와 속성 관리자를 살펴보면 점선이 HTML5 Canvas에서 지원되지 않음을 나타내는 아이콘이 표시되는 것을 알 수 있습니다.

ActionScript 구성 요소는 제거되고 코드는 주석 처리됩니다. 또한, JavaScript가 주석 블록 내에 작성된 경우(Animate 13.0의 Toolkit for CreateJS용) 코드의 주석 처리를 수동으로 제거해야 합니다.

예를 들어 버튼이 포함된 레이어를 복사한 경우 버튼이 제거됩니다.

마이그레이션 후 컨텐츠에 적용되는 변경 사항

다음은 기존 내용을 HTML5 Canvas 문서로 마이그레이션할 때 적용되는 변경 유형입니다.

HTML5 Canvas에서 지원되지 않는 내용 유형은 제거됩니다. 예를 들면 다음과 같습니다.

• 3D 변형은 제거됩니다.
• ActionScript 코드는 주석 처리됩니다.
• 비디오는 제거됩니다.

내용 유형 또는 기능이 지원되지만 기능의 속성이 지원되지 않습니다. 예를 들면 다음과 같습니다.

• 오버레이 블렌드 모드는 지원되지 않으므로 보통 모드로 수정됩니다.
• 점선은 지원되지 않으므로 실선으로 수정됩니다.

지원되지 않는 기능과 해당 대체 값에 대한 전체 목록은 이 문서를 참조하십시오.

다른 문서 유형을 HTML5 Canvas 문서로 변환

범용 문서 유형 변환기를 사용하면 기존 FLA 프로젝트(유형 상관없음)를 HTML5 Canvas, ActionScript/AIR, WebGL 또는 사용자 정의 문서 유형과 같은 다른 모든 문서 유형으로 변환할 수 있습니다. 특정 형식으로 변환하는 경우 Animate에서 해당 문서 유형에 대해 제공하는 제작 기능을 활용할 수 있습니다. 

자세한 내용은 다른 문서 형식으로 변환을 참조하십시오.

JSFL 스크립트를 사용하여 ActionScript 3를 HTML5 Canvas 문서로 변환

Animate는 AS3 문서를 HTML5 Canvas 문서로 변환하는 JSFL 스크립트를 제공합니다. JSFL 스크립트를 실행하면 다음이 수행됩니다.

• 새 HTML5 Canvas 문서를 만듭니다.
• 모든 레이어, 심볼 및 라이브러리 항목을 새 HTML5 Canvas 문서에 복사합니다.
• 지원되지 않는 기능, 하위 기능 또는 기능 속성에 기본값을 적용합니다.
• HTML5 Canvas 문서는 여러 장면을 지원하지 않으므로 각 장면을 별도의 FLA 파일로 만듭니다.

1. Animate에서 ActionScript 3 문서를 엽니다.
2. 명령 > AS3를 HTML5 Canvas 문서로 변환을 선택합니다.

 이미지를 [스프라이트 시트에 결합] 옵션을 선택하지 않은 경우에만 적용할 수 있습니다.