>>[Hemanth Sharma] 안녕하세요.
Hermanth Sharma입니다.
이 비디오에서는 Adobe Flash Pro CC의 새로운 기능인 HTML5 Canvas 기반의 콘텐츠를 제작하고 내보내는 방법을 살펴봅니다.
이제 Flash Pro CC에서 HTML5 Canvas 콘텐츠를 기본적으로 제작하고 퍼블리싱할 수 있는데요.
다시 말해, 이미 알고 있는 툴, 기능 및 타임라인을 사용하여 HTML5 콘텐츠를 손쉽게 제작할 수 있습니다.
Flash Pro에서 JavaScript를 기본적으로 작성할 수 있고 JavaScript 작성에 필요한 모든 코드 힌트 및 구문 강조 표시 기능을 이용할 수 있습니다.
새로운 JavaScript 기반의 HTML5 웹 콘텐츠를 작성할 수 있을 뿐만 아니라 기존의 ActionScript 기반의 콘텐츠를 HTML5 Canvas 문서로 손쉽게 변환할 수 있죠.
그러면 ActionScript로 만든 간단한 게임 프로토타입인 'Hungry Hero'를 살펴보면서 설명해 드리겠습니다.
이 프로토타입은 2개의 화면과 게임의 첫 인터랙션이 포함되어 있는 간단한 콘텐츠로, SWF 파일을 퍼블리싱할 목적으로 만들어진 FLA 파일입니다.
이 문서는 두 가지 방법을 통해 HTML5 Canvas 문서로 변환할 수 있는데요.
하나는 원본 FLA 파일에 포함된 모든 레이어를 새 HTML5 Canvas 문서로 복사하는 것이고 다른 하나는 명령 메뉴에서 JSFL Script를 선택하는 것으로 자동으로 복사됩니다.
이 시간에는 명령 메뉴에 있는 JSFL Script를 사용해 보죠.
AS3 문서 형식에서 HTML5 Canvas로 변환을 클릭합니다.
그러면 이전 Flash 문서에서 사전에 만든 콘텐츠를 포함하는 새 FLA 문서가 생성됩니다.
이제 이 문서를 새 문서로 저장합니다.
이때 속성 패널을 보면 HTML5 Canvas 문서로 표시되고, 이에 따라 제작 설정도 JavaScript/HTML로 변경됩니다.
보시다시피 Flash Pro CC는 CreateJS 오픈 소스 라이브러리를 이용하여 HTML5 Canvas 콘텐츠를 지원합니다.
또한 내보낸 HTML5 콘텐츠를 여러 폴더 위치로 지정할 수 있습니다.
게임이 변환되었으므로 액션 패널을 열면 ActionScript 3 코드에 주석이 작성되어 있는 것을 바로 확인할 수 있습니다.
이제 JavaScript에 유사한 코드를 작성해 보죠.
CreateJS 라이브러리 덕분에 ActionScript 3를 작성하는 것처럼 간단하게 코드를 작성할 수 있습니다.
먼저 JavaScript를 작성해 보죠.
60번째 프레임에서 CreateJS 구문을 이용하여 각 줄을 변환해 보겠습니다. this.stop( ); Play 버튼과 About 버튼의 클릭 이벤트에 대해 이벤트 리스너를 추가합니다. this.playBtn.addEventListener ("click", playClick.bind(this)); 이 구문을 복사하여 붙여넣습니다.
인스턴스 이름을 aboutBtn으로 변경한 다음 fl_clickToGoToWebPage를 작성합니다.
모든 프레임에서 코드 변환을 완료했다면 게임을 퍼블리싱해 보죠.
컨트롤 메뉴에서 테스트를 선택하고 한 번 살펴보죠.
브라우저에서 HTML5 Canvas를 기반으로 게임이 올바로 실행됩니다.
보시다시피 코드로 작성한 모든 마우스 인터랙션이 완벽하게 작동하네요.
기존 프로젝트를 마이그레이션하는 동안 단 몇 분 만에 이러한 작업을 완료할 수 있습니다.
AS3 문서를 HTML5 Canvas 문서로 변환할 때 백그라운드에서 수행하는 작업을 정리해 보면 먼저 Flash Pro CC가 새 HTML5 Canvas 문서를 생성합니다.
이때 모든 레이어, 심볼, 라이브러리 항목을 새 HTML5 Canvas 문서로 복사합니다.
그런 다음 기본값을 지원되지 않는 기능, 하위 기능 또는 기능 속성에 적용합니다.
각 장면마다 개별 FLA 파일을 생성합니다.
HTML5 Canvas 문서를 퍼블리싱하면 Flash Pro는 Canvas API를 이용하여 스테이지의 객체를 Canvas 객체로 변환합니다.
AS3 문서를 HTML5 Canvas 문서로 변환할 때에는 출력 패널에 표시되는 경고를 반드시 읽어야 하는데요.
이러한 경고는 콘텐츠를 변환하는 동안 변경된 내용을 파악하는 데 도움이 됩니다.
파일 시스템으로 돌아가 살펴보면 Canvas가 포함된 .html 파일이 있고 Flash Pro CC에서 작성된 모든 CreateJS 코드와 직접 작성한 JavaScript 코드가 포함된 .js 파일이 있습니다.
또한 게임의 모든 시각적 에셋이 포함된 images 폴더도 있고 제작 설정에서 말씀드렸듯이 모든 사운드는 sounds 폴더에 포함될 것입니다.
새로운 프로젝트를 위해 HTML5 Canvas 기반의 콘텐츠를 처음부터 만들려면 파일 > 새로 만들기를 선택한 다음 유형 섹션에서 HTML Canvas를 선택합니다.
Flash 내에 있는 일부 기능은 HTML5 Canvas 문서에서 지원되지 않는데요.
Flash의 모든 기능이 Canvas API에서 제공되는 것은 아니기 때문입니다.
기존 콘텐츠를 변환하는 동안 영향을 받게 되는 경우는 기존 Flash AS3 문서의 레이어 또는 심볼을 HTML5 Canvas 문서로 복사하는 경우로, 지원되지 않는 콘텐츠는 제거되거나 지원되는 기본값으로 변환됩니다.
작업 영역은 작업 중인 출력만을 지원하는 툴을 제공하도록 자동으로 바뀝니다.
예를 들어 여러 개의 문서를 작업 중인 경우 Flash AS3 문서에서 HTML5 Canvas 문서로 변환할 때 지원되지 않는 툴 또는 옵션을 선택하면 해당 툴 또는 옵션이 현재 작업 중인 문서 유형을 지원하지 않음을 표시합니다.
ActionScript 구성 요소는 제거되고 모든 AS3 코드의 주석이 삭제됩니다.
AS3 문서의 모든 3D 변형은 HTML5 Canvas 문서로 마이그레이션되는 동안 제거됩니다.
오버레이 혼합 모드는 지원되지 않으므로 기본적으로 일반으로 바뀌고 점선은 실선으로 바뀌며 비디오는 제거됩니다.
그리고 HTML5 Canvas 문서는 한 개 이상의 장면을 지원하지 않습니다.
이상입니다.
이제 여러분도 직접 HTML5 콘텐츠를 만들어 보시기 바랍니다.
시청해 주셔서 감사합니다.
