| TESTEIRA
PESO: 20Kb FRAME RATE: máximo 12 FPS.
DIMENSÕES: 969 x 90 px ÁUDIO: Não é permitido qualquer som sem que haja interação do usuário.
EXTENSÃO ARQUIVO: GIF, JPG ou HTML5 MODELO EM FLASH ATÉ AS2: Clique aqui para o download
BACKUP: Para todas as peças veiculadas no formato SWF
deve existir uma segunda versão no formato GIF ou JPG.
A segunda peça será exibida caso o usuário não tenha
o Flash instalado.
MODELO EM FLASH AS3: Clique aqui para o download
MANUAL: Clique aqui
Prazo para entrega do material:Até 12 horas úteis antes da veiculação
| MANUAL
| Passo a passo

Primeiramente, três novas camadas (layers) deverão ser inseridas no momento da criação do banner, conforme imagem abaixo (Figura 1):

Figura 1

Figura 1

Após a criação das 3 camadas, nomea-las de acordo com a imagem:

1º Camada: rm_actions
2º Camada: rm_botoes
3º Camada: banner

 
| Layers
Cada camada tem uma função específica na programação do banner. Sugerimos a criação de três camadas diferentes para facilitar a compreensão do processo de programação, mas programadores mais familiarizados com programação em Flash e suas particularidades poderão ignorar estes passos e organizar as camadas de acordo com sua necessidade, contanto que o método de implementação das Clicktags seja seguido corretamente.
Abaixo, as camadas e suas respectivas funções passo-a-passo:
A camada rm_actions:
Esta camada contém a ClickTag da peça, a action devera ser inserida no primeiro frame, obrigatoriamente, e não mais diretamente nos botões.
A camada rm_botoes:
Esta camada contém o botão transparentes que sobrepõe a peça e que recebera o click do usuário, conforme imagem abaixo (Figura 2). O ActionScript não deverá ser inserido diretamente sobre estes botões:
Figura 2
Figura 2
Já a camada banner contém o banner em si, conforme imagem exemplificada abaixo (Figura 3):
Figura 3
Figura 3

ATENÇÃO! O banner propriamente dito, assim como todo seu conteúdo, deverá ser inserido em um movieclip no primeiro frame desta camada para garantir que as duas primeiras camadas estarão sobrepostas a ele durante todo o tempo de execução do banner. Somente em casos específicos (como, por exemplo, quando o botão de click só poderá aparecer no final da animação) os botões da camada rm_botoes poderão ser inseridos no movieclip da camada banner.

 
| Inserindo a Clicktag
Após criar as camadas necessárias, clique sobre o primeiro frame da camada rm_actions. Após fazê-lo, pressione a tecla F9 para exibir o editor ActionScript do Flash, e insira o código abaixo (Figura 4):

clicktag.onRelease = function() {
getURL(_root.oas, "_blank");
}

Figura 4

Figura 4

 
| Instance Name
Após criar cada botão do banner, os mesmos deverão receber um Instance Name. Temos o botão maior, que cubrirá toda a extensão do banner e que será responsável pelo click do usuário (Figura 5):
Figura 5

Figura 5

Ao clicar sobre cada um destes botões, o seguinte campo se tornará visível no canto inferior esquerdo do Flash (Caso a aba Propriedades não esteja visível talvez seja necessário expandí-la, dependendo da versão do Flash utilizada – Figura 6):

Figura 6

Figura 6

Aqui, abaixo do menu drop-down contendo o tipo do objeto (no caso, um Botão – ou Button, em inglês), temos o campo destinado ao Instance Name do mesmo. É necessário inserir exatamente os mesmos Instance Names referenciados na ClickTag (no exemplo abordado neste manual, clicktag), pois caso contrário o clique do usuário não funcionará.
Depois de seguir estes passos, salve o arquivo e exporte-o. Seu banner está pronto para contabilizar cliques através do Open AdStream.
 
| HTML5
Alternativas:

- Jpg / Gif animado.
Para criações simples, sugerimos o envio de um jpg ou um gif animado, é mais rápido que o arquivo flash e o funcionamento é bastante próximo.

- Swiffy
Um conversor em flash para HTML5. CLIQUE AQUI

Pontos positivos:

- Nada muda na rotina de produção de peças .SWF, apenas a etapa de conversão que é resolvida rapidamente.
- Não “puxa” arquivos externos (Concentra tudo em um único arquivo .SWF).

Pontos negativos:

- O peso da peça pode aumentar em relação ao SWF.
- A peça não pode ter uma interação complexa ex. Arrastar e soltar, caso contrário a conversão pode resultar em quebra da peça. As interações básicas como rollover, clique, expansão não geram problemas.

DESENVOLVIMENTO DO HTML5

O ideal é que as peças dependentes sejam hospedadas externamente. Assim, a peça ficará mais leve.

No caso de peças Cujas as imagens serão hospedadas pela ferramenta (OAS), é necessário que todos esses arquivos dependentes compartilhem o mesmo diretório raiz do HTML.

Obs: Pedimos que não utilizem sub pastas, pois o OAS não aceita esse tipo de hierarquia.

Lembrando que o único ajuste que poderá ser feito pelo adserver OAS é na função da clickTag.

SWF

Se optarem pelo o envio do SWF nada muda. Entretanto, na maioria dos navegadores as peças serão bloqueadas e só serão exibidas com a ação do usuário que desbloqueie.

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Todas as peças veiculadas por meio do template usarão um “iframe” por configuração default. Para evitar espaço entre a peça e a borda é preciso colocar a seguinte configuração de CSS entre as tags <head></head>

<style>
html, body { margin: 0; }
</style>

*Com esse “style” aplicado, sua peça em HTML5 sempre estará alinhada ao topo e à esquerda, não criando margens indevidas.

Assim como nas peças SWF, as peças HTML5 também precisam conter uma “clickTag” (variável que possibilitará a contagem de cliques pelo OAS).

A implementação em arquivo de HTML deve ser feita seguindo as instruções:

Entre as tags <head> e </head>, deve conter o seguinte script:

<script>
function getParameters() {
var result = {};
location.search
substr(1)
.split("&")
.forEach(function (item) {
var tmp = item.split("=");
result[tmp[0]] = decodeURIComponent(tmp[1]);
});
return result;
}
var flashvars = getParameters();
/**
Exemplo de uso:
flashvars.clickTag
flashvars.param2
**/
</script>

Na área de clique da peça deve-se colocar a chamada para disparar o script acima e efetuar a contabilização/direcionamento para o link de destino processado pela ferramenta.

Por exemplo:
<button onClick="javascript:window.open(flashvars.oas,'_blank')">Clique aqui para maiores
informa&ccedil;&otilde;es</button> <

 
raccombr
Contato: comercialweb@rac.com.br | Fone: (19) 3772.8110