웹 배너와 같은 특정 애니메이션은 제작된 HTML에서 특정 코드 조각이나 코드 라이브러리 전체를 삽입해야 하는 경우가 있는데요.
다양한 제작 플랫폼을 지원하기 위해서죠.
여기에 간단한 웹 배너가 있는데요.
그 다음으로 해야 할 일은 HTML 제작 시에 몇 개의 JavaScript 코드를 추가하는 것입니다.
이를 위해 HTML5 Canvas 템플릿을 사용해보죠.
코드 템플릿은 제작 설정 버튼을 눌러 찾을 수 있습니다.
JavaScript/HTML 항목에서 HTML/JS 탭으로 이동하면 HTML 제작용 템플릿이 기본 템플릿으로 설정되어 있습니다.
하지만 새로운 템플릿을 가져올 수도 있습니다.
이 템플릿은 사용자 정의 템플릿으로, 현재 사용 중인 특정 광고 네트워크와의 호환을 위해 나머지 HTML 안에 몇 개의 코드를 삽입하게 되어 있습니다.
물론, 시작하기 가장 간편한 것은 여기 있는 내보내기 버튼입니다.
내보내기를 클릭하면 여기에서 내보내기 대상을 찾아 특정 파일 이름을 입력합니다.
이 파일은 HTML로 내보내게 됩니다.
원하는 대상을 지정한 다음 저장을 클릭합니다.
이제 대상 위치에서 원하는 HTML을 찾아 코드 편집기에서 열면 해당 템플릿의 내용을 보고 편집할 수 있게 되죠.
주석에 표시된 내용을 보면, 여기에는 달러 기호로 표시된 각기 다른 많은 토큰이 있습니다.
사용자 정의 코드는 작성이 언급된 곳에서만 작성할 수 있습니다.
예를 들어 이 16번 줄처럼 write your code here로 된 곳이죠.
기존 토큰의 모든 발생은 해당 값으로 대체됩니다.
예를 들어 여기 18번 줄은 Create JS Library Scripts가 출력되는 곳입니다.
빈 줄은 자동으로 제거됩니다.
그리고 템플릿을 생성하기 전 불필요한 주석은 모두 제거해야 합니다.
아래로 스크롤하면 여기가 바로 머리글이 끝나는 곳이고, 본문이 시작되는 곳입니다.
보통 머리글이 끝나기 전에 코드를 배치해야 하는데, 사용자 정의 JavaScript 라이브러리라면 더욱 그렇습니다.
광고 네트워크에서 제공한 지침에 따라 HTML5 템플릿을 준비한 다음에는 이 템플릿을 저장하고, 다시 Animate로 돌아가 새 사용자 정의 템플릿 가져오기를 누릅니다.
여기에 custom.html이 있습니다.
이 파일을 엽니다.
이제 HTML 제작용 템플릿이 사용자 정의 템플릿으로 바뀌었습니다.
됐습니다.
이제 HTML 제작 시에 광고 네트워크에서 제공한 특정 코드가 적용된 사용자 정의 템플릿을 사용할 텐데요.
이로써 다른 플랫폼과 호환되는 HTML5 광고를 만들 수 있습니다.
