Criando um Banner Animado

Neste tutorial vamos aprender a criar um banner animado para nosso site.

Inicie o Fireworks e pressione CTRL + N para abrir um novo documento. Para este exemplo podemos seguir as seguintes configurações: 468 pixel de largura e 60 de altura, que é o tamanho padrão de um full banner. O fundo pode ser transparente mesmo.

"

Agora, vá ao painel "Opmize" e escolha a opção "Animated Gif" no menu drop down como mostra a imagem:

"

Bom, nosso trabalho já está configurado, agora vamos começar a desenhar o layout do nosso banner. Primeiramente, usando a ferramenta "Retangle", desenhe um retângulo de 468px de largura por 60px de altura no palco. Este retângulo servirá de fundo para o banner. Coloque uma borda de 2 px e o preenchimento nas cores que vc desejar. Eu usei #f2f2f2 para o fundo e #999966 para as bordas. Centralize-o bem no meio do palco.

"

Depois vamos desenhar algo sobre o retângulo para incrementar o layout. clique sobre a feramenta "Pen".

"

Vamos desnhar um retângulo com uma curva em diagonal em uma das extremidades. Clique com a caneta no canto inferior do retângulo e será inserido um ponto ali. Vá com o mouse na diagonal para cima e pressione novamente, mas desta vez segure pressionado e arraste levemente na diagonal inversa para baixo por alguns pixels. Isso fará o desenho da curva. Veja:

"

A seta vermelha indica o sentido que vc deve arrastar o mouse sobre o retângulo para criar uma leve curvatura.

Eu estou mostrando a ferramenta "Pen" pra que você também possa aproveitar este tutorial e utilizar alguns recursos de desenho do Fireworks, mas se você desejar poderá usar outras ferramentas pra desenhar o layout do banner. Você pode também pular esta parte do layout e seguir para os passos seguintes, que dizem respeito à animação propriamente dita.

Bem, seguindo com o layout, vamos terminar o retângulo. Primeiro clique no ponto da curva que você acabou de desenhar, depois clique na outra extremidade do palco, fazendo uma reta. Clique agora na parte inferior do retângulo maior e em seguida clique no primeiro ponto, fechando assim o nosso desenho:

"

Escolha agora uma cor para o preenchimento e se for necessário diminua a largura do objeto.

Pressione CTRL + Alt + D no seu teclado para duplicar este objeto. Em seguida vá ao menu "Modify » Tranform » Flip Vertical" para girar o objeto e posicione-o na parte superior do retângulo maior.

O próximo passo aqui, é colocar o logo do site. Pressione CTRL + R no seu teclado para importar o logotipo, selecione a imagem no seu computador e depis clique no palco, no lugar onde você deseja que o logotipo seja incluído. Aqui eu oloquei o logo na lateral esquerda do layout. Se seu site não tem ainda um logotipo, você pode importar uma imagem ou qualquer figura que possa relacionar o seu site ou até mesmo pular esta etapa.

O exemplo ficou mais ou menos assim:

"

Bom. Agora o modelo já está criado, então vamos para a animação do banner!

Vá ao painel "Frames" e clique no botão que fica no lado superior direito do painel, ao lado do nome do painel. No menu que surgir clique em "Duplicate Frame".

"

Então vai se abrir a caixa de diálogo com as opções de quantos frames você quer adicionar, e se você deseja adicioná-los antes ou após o frame atual. Eu escohi 3 a princípio, mas pode-se duplicar novamente outros frames conforme a necessidade:

"

Agora um passo muito importante que é definir o tempo que cada frame será exibido. Quando você insere frames, o padrão de tempo é 7, mas o mínimo necessário para uma boa exibição de textos é 300 porque a cada valor de 100 equivalem a 1 segundo de tempo, então, cada frame será exibido durante 3 segundos aproximadamente mudando o valor para 300.

Para mudar o tempo de duração de cada frame é simples. Note no painel Frames, que há um número 7 em cada frame.

"

Pois é só dar um duplo clique sobre este número que abre-se a caixa de diálogo onde podemos alterar este valor. Faça isso e altere pra 300 em cada um dos frames.

"

Prontinho. Agora usando a ferramenta texto vamos inserir os texto do nosso banner em cada um dos frames. Vá selecionando o frame no painel frames e vá inserindo os textos em cada um deles.

Depois de inserir os textos, pressione F12 no seu teclado para visualizar no seu navegador, ou use os controles "Play" e "Stop" que ficam logo abaixo do palco para testar o seu banner.

Salve o arquivo e exporte. O meu banner novo ficou assim:

"

Fique atento aos nosso próximos tutoriais! Qualquer dúvida, consulte nosso fórum.

Ivan W. Primo
webmaster@portaldigidesign.com.br
MSN: iwprimo@gmail.com