Como criar uma animação usando o Google Web Designer

Que tal aprender a fazer um banner com animação simples usando o Google Web Designer, como esse aqui:

Legal, não?

São vários passos, mas não é tão difícil. Precisa mais de paciência do que habilidade e conhecimento. Se nós que não entendemos absolutamente nada de programação conseguimos, garantimos que você também vai conseguir.

Vamos lá então.

Primeiro baixe e instale o Google Web Designer (GWD), se você ainda não o tiver.

Como vamos fazer um banner de 728x90 já tenha as imagens que for usar neste tamanho, ou em um compatível, em formato .png se possuírem partes transparentes. Se quiserem ir fazendo junto, aqui estão as imagens que iremos usar:

Depois de instalado abra o programa e vá em Arquivo -> Novo Arquivo.

Escolha o tamanho desejado - aqui vamos usar o 728x90. Dê um nome ao arquivo e escolha onde deverá ser salvo. O modo de animação deverá ser o Avançado. Clique Ok 🙂

Primeiro vamos inserir a imagem de fundo.

Abra a pasta com a imagem de fundo e arraste-a para o GWD.

Clique na aba Propriedades na barra lateral direita.

No ID dê um nome à camada, por exemplo, fundo.

Ajuste posição e tamanho. Para ficar bem centralizada: Esquerda=zero, Superior=zero.

Agora vamos acrescentar a imagem que possui o texto (as fontes do GWD são muito sem graça...), repetindo o processo de arrastar.

Vamos acrescentar o táxi que irá percorre o banner, também arrastando-o.

Mudamos a ID para taxi (para encontrar melhor nas camadas) e posicionamos a imagem na posição desejada para o início da animação. No caso, fora do banner, à esquerda, pois queremos que o táxi fique em movimento contínuo, entrando pela lateral.

Com a camada do táxi selecionada (as camadas estão na porção inferior esquerda da tela), clicamos com o botão direito do mouse na barra inferior na posição de tempo de duração da animação e depois em Inserir frame-chave - na mesma linha que está a camada do objeto que queremos mover.

Clique no táxi e arraste a imagem até o outro lado do banner. Como não queremos que ele apareça imediatamente do outro lado, vamos arrastando ela para mais longe da borda do banner, até a posição final desejada usando a barra de rolagem.

Clique no Reproduzir para ver como ficou. Depois clique no Parar para continuar a edição.

Como queremos que o movimento seja contínuo, na aba da camada, vamos colocar um loop infinito. Clique em Definir repetição da animação (a seta que parece um retorno) e escolha infinito. Ali também dá para escolher quantas vezes se quer que repita, se infinito for muito!

Se quiser ver como ficou, vai lá, Reproduzir, e depois no Parar para continuar a edição.

De nada adianta um banner se não pode ser clicado, não é mesmo?

Vamos então acrescentar uma área clicável.

Na barra lateral direita, clique em Componentes -> Área de toque e arraste para o centro do banner.

Vá em Propriedades e dê um ID à área (link, por exemplo) e ajuste a área de toque ao tamanho do banner, para que todo ele seja clicável.

Depois em Eventos e clique no "+" na parte inferior da aba.

Em Destino, selecione link (o ID que foi dado anteriormente).

Em Evento -> Mouse -> click

Em Ação -> Anúncio do Google -> Sair

Em Destinatário ->gwd-ad.

Em seguida dê um nome ao Código de métricas (nós demos um nome relacionado ao banner) adicione o URL de destino e salve. Se o Salvar não habilitar, clique no campo do Código de métricas que ele ficará habilitado.

Quase pronto.

Que tal dar uma olhada para ver como ficou?

Clique no Visualizar e escolha o seu navegador favorito.

O navegador irá abrir.

Tudo certo? Vamos Publicar.

Clique na seta ao lado do Publicar. Vamos Publicar localmente.

Depois escolha um Nome e Local para salvar. Desmarque o Criar Zip, a não ser que você deseje ter um arquivo zipado, e clique no Publicar 🙂

Pronto!

Vá até a pasta que você escolheu e lá estarão todos os arquivos para serem enviados ao servidor.

Na borda do banner pode ter ficado uma linha pontilhada... Não descobrimos como retirá-la pelo GWD, mas conseguimos de uma outra maneira.

Abra o arquivo index.html em um editor de texto. Nós abrimos o Bloco de Notas do Windows e arrastamos o arquivo index.html para dentro dele (mas pode ser qualquer editor). Dê o comando localizar (Crtl+F no Bloco de Notas, Crtl+L no Word) e procure por border. Só haverá uma ocorrência.

O programa vai localizar o border e junto dela está o seguinte border:1px dashed #a0a0a0. O que precisamos é alterar o "1px" para "0px" (zero) e apagar o dashed #a0a0a0.

Pronto. Salve e feche o arquivo. Se quiser conferir como ficou...

Agora é só enviar as imagens e o arquivo html para o servidor do blog, tudo na mesma pasta. No WordPress é pelo menu Mídia -> Adicionar nova. O html vai junto. No Blogger nos avisem como é, pois nunca usamos.

Insira no blog através e um iframe.

O código, para inserir o banner no cabeçalho da página, fica assim:

<div style="position:relative;"> <iframe src="http://www.endereçocompletodonoservidor/index.html" align="center" width="728" height="90" scrolling="no" overflow="hidden" frameborder="0"></iframe> </div> É só indicar o arquivo html que ele fará o restante, não precisa se preocupar com as imagens.

E o resultado...

Se tivéssemos ciado um 300x250 para uma sidebar, o código do iframe poderia ficar assim:

<iframe src="http://www.endereçocompletodonoservidor/index.html" align="center" width="300" height="250" scrolling="no" overflow="hidden" frameborder="0"></iframe>

Fácil, não??

Se tiverem dúvidas, nos avisem. Vamos tentar ajudar a solucioná-las, pois como falamos lá no início, não entendemos nada de programação. Aqui têm mais alguns tutoriais, de onde tiramos algumas informações de como fazer o banner.

Gostaríamos de ver o que vocês fizeram seguindo este tutorial. Coloque o link aqui nos comentários 🙂

E não deixem de dar uma olhada no A Esquilinha Nina em Nova York, um guia de NY feito especialmente para as crianças. Foi ele que gerou esta ideia do banner! Nós temos um programa de afiliados se interessar 🙂