브라우저를 열면 Flash 광고가 자동으로 재생되지 않는데요.
이번 시간에는 Flash Professional CC의 기존 기능인 컨텐츠를 HTML5 Canvas 출력에 맞게 변환하고 최적화하는 방법을 살펴보겠습니다.
이 간단한 애니메이션을 사용해 보죠.
ActionScript 3 기반의 FLA 파일로 실제로 실행하여 테스트해 보면 Flash Player에서 재생되는 SWF가 출력됩니다.
이제 이 파일을 HTML5 Canvas로 변환해 보죠.
명령 > 다른 문서 형식으로 변환을 클릭하고 HTML5 Canvas를 선택하고 확인을 클릭합니다.
그러면 작업에 사용할 Canvas 기반의 문서가 생성됩니다.
출력 창을 보면 마지막 프레임에 액션 스크립트를 추가했었는데 프레임 스크립트에 주석이 추가된 것을 확인할 수 있습니다.
타임라인에 있는 모든 요소는 ActionScript 3 문서에 있는 것과 동일합니다.
액션을 살펴보기 위해 마지막 프레임을 선택하고 액션을 열어 실제로 액션 스크립트에 주석이 추가되어 있는지 확인해 보겠습니다.
코드 조각 패널로 빠르게 이동해 보죠.
액션 > 클릭하여 웹 페이지로 이동을 클릭한 다음 액션 스크립트를 삭제합니다. "stop"이 아니라 "this.stop"이라고 입력한 다음 코드 조각에서 복사한 내용을 붙여넣습니다.
URL을 수정할 수 있는데요. blogs.adobe.com/flashpro라고 지정하고 이것은 "this.stage"라고 변경합니다.
Canvas에서 작업하는 경우 비트맵 데이터가 벡터보다 더 나을 때가 있는데요.
문서를 준비하는 데 있어 고려해야 하는 사항은 일부 벡터 기반의 컨텐츠를 비트맵으로 렌더링하는 것입니다.
모양 그룹을 선택하고 마우스 오른쪽 버튼을 클릭하여 비트맵으로 변환을 선택합니다.
이제 이 컨텐츠는 비트맵으로 라이브러리에 저장됩니다.
원하는 만큼 요소를 비트맵으로 변환할 수 있습니다.
"제작 설정"으로 이동하면 알아두어야 할 몇 가지 사항이 있는데요.
비트맵을 많이 만들 경우 IAB는 15개의 서버 호출만 허용합니다.
모든 비트맵을 하나의 스프라이트시트로 내보내면 많은 비트맵은 두 개의 서버 호출만이 허용됩니다.
스프라이트시트 자체를 위한 서버 호출과 이와 관련된 데이터를 위한 서버 호출이죠.
또한 문서에 있는 모든 텍스트를 윤곽선으로 변환할 수 있으므로 사용자 시스템에서 제공되지 않는 많은 글꼴을 사용할 수 있습니다.
확인을 클릭하고 게시합니다.
Flash Player 버전과 Canvas 버전에서 애니메이션이 동일하게 재생되고 모든 것이 똑같이 표시됩니다.
이처럼 익숙한 워크플로우와 동일한 방식으로 Flash Professional CC에서 만든 광고 컨텐츠를 데스크탑 및 모바일 디바이스의 기본 웹 브라우저에서 볼 수 있습니다.
