반갑습니다.
Adobe Animate를 사용한 확장형 배너 만들기 튜토리얼에 오신 것을 환영합니다.
이 시간에는 확장형 배너 제작 방법을 살펴보겠습니다.
시작하기에 앞서 완성된 결과를 확인해 보죠.
여기에 skyhigh 항공사의 확장형 배너가 있습니다.
이것은 축소 위치에 있을 때의 모습이고 완전히 확장하면 이렇습니다.
이같은 확장형 배너는 5단계를 거칩니다.
첫 단계로, 마스크를 만듭니다.
애니메이션을 열고 마스크를 만드는데 1번 프레임의 닫힌 배너 크기로 합니다.
배너가 왼쪽에서 오른쪽으로 확장되어야 하므로 왼쪽 상단에 사각형을 배치한 다음 완전히 확장된 배너의 크기를 정의하고 모양 트윈을 사용하여 닫힌 위치와 열린 위치 간 전환을 만듭니다.
이렇게 Adobe Animate에서 배너가 확장되는 방법을 설정했으므로 이제 배너 축소 방법을 설정해야 합니다.
애니메이션이 끝나면 축소 프로세스가 시작되어야 하죠.
배너가 열리고 닫히는 방식을 정의했으므로 이제 레이어를 마스크로 변환하여 아래의 모든 레이어를 표시합니다.
결과를 확인해 보죠.
잠금 아이콘을 클릭하여 마스크를 활성화합니다.
보시는 대로 마스크가 잘 적용되었네요.
다음으로, 사용자가 배너 사용 방식을 알게 해야 하는데요.
더하기를 클릭하거나 더하기 위로 마우스를 가져가 배너를 열 수 있겠죠.
마우스 오버로 배너를 활성화하는 방법을 보여드리면, 버튼에 해당하는 레이어를 추가하고 닫힌 배너와 같은 크기로 사각형을 만듭니다.
사용자가 닫힌 배너 위로 마우스를 가져가면 활성화되도록 이 모양을 버튼으로 변환합니다.
사용자가 마우스를 가져갈 때 버튼이 작동해야 하므로 보이지 않아야 합니다.
그러려면 상태를 히트로 옮깁니다.
버튼을 선택하고 인스턴스 이름을 추가합니다.
결과를 확인해 보죠.
배너가 확장된 상태에서도 버튼이 보이는데요.
원하는 것이 아닙니다.
시작 시에만 보여야 합니다.
이를 해결하려면 2프레임에 빈 키프레임을 삽입합니다.
배너가 열리는 버튼을 만들었으므로 배너가 닫히는 버튼도 만들겠습니다.
애니메이션 끝 지점에 키프레임을 삽입하고 닫기 버튼을 만듭니다.
인스턴스 이름을 입력합니다.
애니메이션이 종료될 때만 이 버튼이 보이도록 합니다.
다시 확인해 보죠.
좋습니다.
다음 단계의 이해를 돕기 위해 브라우저에서 결과를 확인해 보죠.
배너가 스스로 열리고 닫히는 액션이 무한 반복되고 있는데요.
원하는 동작이 아니죠.
사용자가 사용할 때에만 열리고 닫혀야 합니다.
이를 해결해 보죠.
액션 레이어를 만듭니다.
마법사로 첫 번째 프레임에서 애니메이션이 중지되게 만듭니다.
사용자가 마우스를 가져갈 때에만 배너가 열려야 하죠.
다시 마법사를 사용하여 애니메이션 끝 지점에 중지를 설정하여 사용자가 닫기 버튼을 클릭할 때에만 배너가 닫히도록 해보죠.
확인해 보면 배너가 원하는 대로 작동합니다.
다음 단계는 배너가 마케팅 플랫폼에서 잘 작동하게 해야 하는데, Google DoubleClick 또는 Seismic 등에서요.
Google DoubleClick과 같은 마케팅 플랫폼은 사전 승인된 템플릿을 제공하므로 Animate HTML 래퍼에 통합해야 합니다.
먼저 Google 리치 미디어 갤러리 템플릿 데이터베이스에서 원하는 템플릿을 다운로드하고 Animate HTML 래퍼를 내보냅니다.
텍스트 편집기에서 두 파일을 엽니다.
Google 템플릿은 왼쪽에 있습니다.
Google 템플릿에서 코드를 추출하여 Animate HTML 래퍼에 배치합니다.
Google 템플릿에서 작업을 마치면 닫습니다.
JavaScript 파일을 열고 불필요한 코드를 제거하는데 시간이 다소 걸릴 수 있습니다.
신중하게 제거해야 합니다.
완료되면 JavaScript 파일에서 코드를 복사해 Animate HTML 래퍼에 놓습니다.
다음 단계로 넘어가기 전에 Animate HTML 래퍼에서 코드를 수정하겠습니다.
다음으로 사용자가 광고를 열거나 닫을 때 Google DoubleClick이 추적할 수 있도록 해야 합니다.
Animate HTML 래퍼의 스크립트를 해당 프레임의 액션 패널에 복사합니다.
이제 Google DoubleClick은 사용자가 배너를 사용할 때 추적할 수 있지만 사용자가 CTA 버튼을 클릭할 때는 그렇지 못합니다.
이렇게 해보죠.
이제 게시할 준비가 되었습니다.
재사용이 가능하므로 프로파일도 손쉽게 만들 수 있습니다.
여러분도 유사한 배너를 만들어 보시기 바랍니다.
Animate HTML 래퍼를 가져와 제작하면 됩니다.
프로젝트 폴더를 보면 HTML과 JavaScript 파일이 있습니다.
배너가 Google DoubleClick에 업로드될 준비가 되어 있습니다.
좋습니다.
Google DoubleClick에 파일을 업로드하기 전에 축소된 위치에서 배너의 배경 이미지를 만들어야 합니다.
이 이미지는 배너가 예상대로 작동하지 않을 때 Google DoubleClick이 사용할 것입니다.
방금 내보낸 모든 파일과 배경 이미지를 압축합니다.
다음 화면에서 압축 파일을 DoubleClick Studio 계정에 업로드하고 사용자가 CTA를 클릭할 때 이동하게 될 URL을 입력합니다.
마지막으로 확장된 배너의 폭과 높이를 입력합니다.
잘 작동하는지 확인해 보죠.
제대로 작동합니다.
좋은데요.
다음 화면에서 게시할 수 있습니다.
지금까지 Adobe Animate를 사용한 확장형 배너 제작 방법을 살펴보았습니다.
개성 있는 확장형 배너를 만드는 데 필요한 코드가 포함된 샘플 템플릿을 다운로드할 수 있습니다.
유용하게 사용해 보시기 바랍니다.
