Introdução O que irá mudar? Por onde começar? Para que serve cada camada (layer)? Inserindo a ClickTag...

Transcrição

1 Open AdStream Guia para implementação de Banners Multilink Novembro 2009

2 Índice Introdução... 3 O que irá mudar?... 3 Por onde começar?... 3 Para que serve cada camada (layer)?... 4 Inserindo a ClickTag... 5 Instance names... 6 Programação para peças expansivas

3 Introdução Este material demonstra passo a passo a forma correta de programar banners em Flash compatíveis com a versão 6 do plugin (ActionScript 1.0) afetados após a atualização de segurança Adobe, datada de 09/04/2008, que afetou todos os usuários que instalaram o plugin do Flash Player versão 9,0,124,0. Todos os detalhes da atualização podem ser conferidos no seguinte endereço, em ingles: A atualização acima mencionada afeta potencialmente todos os banners em Flash exportados para a versão 6 do plugin, especialmente os banners do formato DHTML (especificamente, faz o botão Fechar parar de funcionar), razão pela qual alteramos a forma de programar a Clicktag/Botão Fechar das peças. O que irá mudar? Basicamente, o ActionScript não poderá mais ser inserido diretamente nos botões, e sim no primeiro frame da animação. Três camadas (layers) extras deverão ser criadas no filme, uma contendo os botões (cada um com um instance name diferente), outra contendo somente os scripts e a terceira contendo o banner em si. A sintaxe da ClickTag também deverá mudar, conforme exemplos abaixo: ClickTag para banners de formato tradicional (Fullbanner, Sky, Selo, Expansivel, etc): ClickTag para banners DHTML (Clicktag + Botão Fechar): Por onde começar: Primeiramente, três novas camadas (layers) deverão ser inseridas no momento da criação do banner, conforme imagem abaixo (Figura 1): Figura 1 3

4 Para que serve cada camada (layer)? 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, e no caso dos banners em formato DHTML, deverá conter também a action do botão Fechar. Ambas as actions deverão ser inseridas no primeiro frame, obrigatoriamente, e não mais diretamente nos botões. A camada rm_botoes Esta camada contém os botões transparentes que sobrepõem a peça e que receberão o click do usuário, conforme imagem abaixo (Figura 2). O ActionScript não deverá ser inserido diretamente sobre esses botões: Figura 2 4

5 Já a camada banner contém o banner em si, conforme imagem exemplificada abaixo (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 faze-lo, pressione a tecla F9 para exibir o editor ActionScript do Flash, e insira o código abaixo (Figura 4): Figura 4 O código das linhas 1, 2 e 3 no exemplo acima só deve ser inserido caso o banner seja do tipo DHTML. 5

6 Instance Names Após criar cada botão do banner, os mesmos deverão receber um Instance Name. Na imagem abaixo usamos como exemplo um banner do tipo DHTML, onde temos o botão maior (que cubrirá toda a extensão do banner e que será responsável pelo click do usuário), e também um botão menor que fechará o banner quando clicado (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 visivel, talvez seja necessário expandi-la, dependendo da versão do Flash utilizada Figura 6): Figura 6 6

7 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 e script do botão Fechar (no exemplo abordado neste manual, clickag e oas_fechar respectivamente), pois caso contrário o clique do usuário não funcionará, tampouco o botão Fechar. Após inserir o Instance Name do botão de clique, será necessário repetir o mesmo procedimento no botão Fechar, caso o banner programado seja do tipo DHTML. Programação para peças expansivas Um banner expansível, trata-se simplesmente de uma peça que, ao primeiro contato do usuário com a mesma, esta se expande e amplia a sua dimensão, na maioria das vezes duplicando o seu tamanho ou expandindo para outras dimensões determinadas pelo cliente. É importante lembrar que, dependendo da maneira com que a peça expansiva é programada, poderá não funcionar a ação de clique, mesmo que o botão esteja corretamente instanciado e programado conforme as orientações abaixo (Figura 7), onde consta um exemplo de como programar uma peça expansiva. Importante: O programador responsável poderá ignorar estes passos abaixo e organizar as programações de acordo com a sintaxe da programação de seu banner em específico, pois o importante é que não haja conflitos com a programação expansiva e a de clicktag. Em primeiro lugar, há algumas séries de programações ActionScript que na maioria das vezes estão presentes nas peças expansivas. Segum abaixo algumas das principais e suas descrições: Release: Evento do clique do mouse; RollOver: Evento do mouse quando o ponteiro está sobre a superfície do botão; RollOut: Evento do mouse quando o ponteiro é retirado da superfície do botão; gotoandplay: Conduz o leitor da linha de tempo a prosseguir em um quadro específico por meio de número ou do identificador do frame; gotoandstop: Conduz o leitor da linha de tempo a pausar a partir de um quadro específico por meio do número ou do identificador do frame; stop: Pausa a reprodução da linha de tempo; Em uma peça expansiva, a programação de expansão e clicktag poderá ser realizada da maneira exemplificada abaixo (Figura 7). Repare os detalhes das programações inseridas no primeiro frame, antes do ponteiro atingir a superfície do botão: Figura 7 7

8 As ordens de implementação da programação da clicktag poderão ser alteradas de acordo com as necessidades da ação do clique da peça, conforme já citado. Repare acima (Figura 7) que nas programações gotoandstop e gotoandplay, em frente de ambas possui uma numeração entre parênteses. Essa numeração determina o frame em que o mesmo será executado, podendo ser preenchido com o número ou identificador do Frame. Neste caso, determinamos que, quando o usuário inserir o ponteiro do mouse sobre o banner, a programação irá correr até o frame 11 e parar, e quando o usuário retirar o ponteiro do mouse do banner, a programação se iniciará, voltando para o frame 1. Outro detalhe importante está na dimensão do próprio botão (Figura 8), que deve acompanhar a programação de expansão da animação do banner. No momento em que a peça iniciar a sua expansão, o botão também deve ser alterado e expandido nos frames respectivos acompanhando a animação da peça, e de preferência com a mesma dimensão de expansão. Figura 8 Repare na figura acima (Figura 8) que, durante a expansão do banner, o botão de clique ja está programado para ocupar toda a àrea expansiva: Atenção: A programação de clicktag poderá não funcionar se a mesma for inserida antes de uma programação ActionScript de stop, e principalmente se o botão de clique vier após o mesmo. A inserção da clicktag, dependendo do caso, poderá ser inserida em determinados frames que não seja necessariamente o primeiro, acompanhando a sintaxe do conjunto do banner. Depois de seguir estes passos, salve o arquivo e exporte-o. Seu banner está pronto para contabilizar cliques através do Open Adstream. 8

9 Dica: Não se esqueça de exportar o Banner até a versão 8 do Flash (ActionScript 1.0 ou 2.0), com no máximo 18 fps e aproximadamente 20 kb, determinado assim um peso leve e seguro para a inserção das peças nos sites e não prejudicando o carregamento das páginas. Caso tenha qualquer dúvida, contate a Equipe Realmedia. Rua Gomes de Carvalho, 1666/19º andar São Paulo Brasil Tel. (+55 11) Suporte Técnico: suportebr@realmedia.com.br Tráfego Publishers: trafegopb@realmedia.com.br 9