Formato expansível que empurra o conteúdo do site após expansão.
Template:
Resumo
O Template possui todas as mecânicas necessárias para a expansão, retração, clique, custom interaction e outros. É possível alterar os tamanhos da parte retraída e da parte expandida de acordo com as necessidades de cada anúncio.
Inserindo a animação:
Dentro da pasta raiz em ‘index.html’ temos 3 div’s, sendo duas delas principais: ‘banner’ e ‘userExpand’.
Sem remover qualquer elemento, deve-se inserir os elementos HTML dentro das div’s mencionadas, apenas escondendo os elementos que não forem necessários ou editando-os em ‘style/styles.css’.
Disparando a animação
Dentro de scripts/script.js temos diversas funções sendo a ‘initializeCreative’ e ‘handleExpandButtonClick’ as principais.
Deve-se adicionar a função que iniciará animação dentro de ‘initializeCreative’ e a função que iniciará a animação da parte expandida em ‘handleExpandButtonClick’.
Comando de Click
Dentro de scripts/script.js temos a função handleClickthroughButtonClick responsável por disparar nosso comando de click.
2. Insert the code below as close as possible to the opening of the body tag:
<script type="text/javascript">
function checkInit() {
if (!EB.isInitialized()) {
EB.addEventListener(EBG.EventName.EB_INITIALIZED, onInit); // This code checks whether the EB object is initialized, if the object is initialized, it launches the function "onInit", otherwise it registers to the "EB_INITIALIZED" event.
} else {
onInit()
}
}
function onInit() {
// --- ATENÇÃO ---
// Insira aqui a função que inicializa a animação
}
window.onload = function(){ checkInit(); };
</script>
3. Insert the function below in the click of the element that will direct the user to the final URL.
ATTENTION – It is not necessary to enter the destination URL or window.open () function:
ATENÇÃO – As dimensões utilizadas nos templates disponibilizados são modelos. Tais propriedades podem ser alteradas nos arquivos e devem seguir as especificações determinadas pelo portal onde o banner será veiculado.
Animações em GWD, Adobe Edge, e demais ferramentas de animação não são compatíveis.
***Apenas modificar arquivos que estão sendo referenciados no tutorial, não alterar outras pastas e arquivos ou excluir elementos do template.***
Painel fechado
Se as especificações do portal tiver dimensões diferentes do template, altere conforme os itens abaixo.
3.1. No arquivo index.html da raiz do diretório principal insira o código HTML no local indicado.
3.2. No arquivo style.css do diretório “styles” altere as dimensões da div #banner. Mantenha 2pxs a menos na altura e largura para que a borda complete a dimensão total. Insira o estilo da sua animação.
3.3. No arquivo script.js do diretório “scripts” insira a função que inicia a animação no local indicado, isso é necessário para que não ocorra problemas com exibição do banner em branco.
Painel aberto
4.1. No arquivo index.html do diretório “panels/default” insira o código HTML no local indicado. Altere as informações de altura e largura do painel.
4.2. No arquivo style.css do diretório “panels/default/styles” altere as dimensões da div #container. Mantenha 2pxs a menos na altura e largura para que a borda complete a dimensão total. Insira o estilo da sua animação.
4.3. No arquivo script.js do diretório “panels/default/scripts” insira a função que inicia a animação no local indicado, isso é necessário para que não ocorra problemas com exibição do banner em branco.
Formato com Vídeo
5.1 Para montar um formato com vídeo, é necessário ter efetuado o download do template e ter feito os passos acima.
5.2 No arquivo index.html do diretório “panels/default” existe um codigo HTML pronto que efetua a chamada do vídeo.
5.3 Para que o vídeo funcione os arquivos deverão estar dentro do diretório “panels/default/videos” em dois formatos MP4 e WEBM, para alterar o vídeo que é exibido no banner basta substituir os arquivos, como no exemplo abaixo:
5.4 Depois de efetuar a inserção do vídeo vá ao diretorio “panels/default/styles/” e altere o arquivo “style.css” de acordo com o tamanho e posicionamento desejado.
ATENÇÃO – As dimensões utilizadas nos templates disponibilizados são modelos. Tais propriedades podem ser alteradas nos arquivos e devem seguir as especificações determinadas pelo portal onde o banner será veiculado.
ATENÇÃO – As dimensões utilizadas nos templates disponibilizados são modelos. Tais propriedades podem ser alteradas nos arquivos e devem seguir as especificações determinadas pelo portal onde o banner será veiculado.
Existem 2 formatos expandable:
Single Expandable – onde a animação da parte retraída e a expandida ocorrem no mesmo html Expandable Banner – onde a animação da parte retraída ocorre em um index.html e a animação da parte expandida ocorre em outro index.html
Painel fechado – Single Expandable
Dentro do index.html da pasta raiz altere a seguinte linha com o size da parte expandida que necessitar:
Dentro do arquivo ‘scripts/script.js’, vá até a função ‘function initializeCreative(event){…}’ e dentro dela coloca a sua função que será responsável por disparar a animação do banner no final do código.
function initializeCreative(event) {
try { //try/catch just in case localPreview.js is not included
if (window.localPreview) {
window.initializeLocalPreview(); //in localPreview.js
}
}
catch (e) {}
//Workaround (from QB6573) for Async EB Load where Modernizr isn't properly initialized
typeof Modernizr === "object" && (Modernizr.touch = Modernizr.touch || "ontouchstart" in window);
window.registerInteraction = function() {}; //overwrite rI function because it will never actually be called
initializeGlobalVariables();
initializeCloseButton();
addEventListeners();
//inserir a sua função da parte retraída aqui
}
Painel aberto – Single Expandable
Ainda no index.html, dentro da div ‘<div id=”panel”>’ insira o seu código html5.
<div id="panel">
<div class="brand-logo"></div>
<div class="label"><strong>HTML5 Single Expandable:</strong> 728x200</div>
<div class="buttons">
<button id="closeButton" class="close-button">Close</button>
<button id="userActionButton" class="useraction-button">UserAction</button>
<button id="clickthroughButton" class="clickthrough-button">ClickThrough</button>
</div>
<!-- inserir o HTML5 da parte expandida aqui -->
</div>
Dentro do arquivo ‘scripts/script.js’, vá até a função ‘function handleExpandButtonClick(){…}’ e dentro dela coloca a sua função que será responsável por disparar a animação do banner no final do código.
function handleExpandButtonClick() {
EB.expand();
EB.API.setStyle(bannerDiv, {
display: "none"
});
EB.API.setStyle(panelDiv, {
display: "block"
});
// inserir a sua função da parte expandida aqui
}
Painel fechado – Expandable
Dentro do index.html da pasta raiz altere a seguinte linha com o size da parte expandida que necessitar:
Dentro do arquivo ‘scripts/script.js’, vá até a função ‘function initializeCreative(event){…}’ e dentro dela coloca a sua função que será responsável por disparar a animação do banner no final do código.
function initializeCreative(event) {
try { //try/catch just in case localPreview.js is not included
if (window.localPreview) {
window.initializeLocalPreview(); //in localPreview.js
}
}
catch (e) {}
//Workaround (from QB6573) for Async EB Load where Modernizr isn't properly initialized
typeof Modernizr === "object" && (Modernizr.touch = Modernizr.touch || "ontouchstart" in window);
window.registerInteraction = function() {}; //overwrite rI function because it will never actually be called
initializeGlobalVariables();
initializeCloseButton();
addEventListeners();
// inserir funcao de disparo de animação parte fechada
}
Painel Aberto – Expandable
Dentro do diretório ‘panels/expand/’, no index.html, insira seu conteúdo HTML5 no local indicado.
E dentro do diretório ‘panels/expand/scripts’, no script.js, insira o código que dispara a animação da parte aberta dentro da função abaixo:
function initializeCreative(event) {
try { //try/catch just in case localPreview.js is not included
if (window.localPreview) {
window.initializeLocalPreview(); //in localPreview.js
}
}
catch (e) {}
//Workaround (from QB6573) for Async EB Load where Modernizr isn't properly initialized
typeof Modernizr === "object" && (Modernizr.touch = Modernizr.touch || "ontouchstart" in window);
window.registerInteraction = function() {}; //overwrite rI function because it will never actually be called
initializeGlobalVariables();
initializeCloseButton();
addEventListeners();
// inserir funcao que dispara a animacao da parte expandida aqui
}
Alteração no size e estilo
Para alteração de tamanhos, cores, estilos de botões, painéis, e demais elementos, deve ser editado o arquivo ‘styles/style.css’ de cada painel ou componente.
Para efetuar os devidos testes, deve-se abrir em seu navegador o index.html e testar o banner para validar se a animação, expansão e comandos de clique estão disparando corretamente.
Para verificar se o botão de clique não apresenta problemas basta adicionar esta linha de código dentro da função do botão de clique console.log(‘teste_botao_de_clique’);
function handleClickthroughButtonClick() {
EB.clickthrough();
console.log('teste_botao_de_clique')
}
Feito isto ao clicar no botão de clique, dentro do console do navegador deverá ser observado o disparo do teste conforme print abaixo:
Escondendo elementos
Nunca delete um elemento do index.html se não souber remover sua referência dentro do script.js, do contrário o código poderá parar de funcionar por erro de javascript.
Para evitar estes erros, encontre o elemento dentro de seu respectivo style.css e adicione o comando: display:none;
