CADASTRE-SE

Aprenda a fazer um banner animado no Flash

4 8 12 3 João Henrique Fontenele | Assunto: Flash

Neste tutorial aprenderemos a fazer um banner profissional utilizando o Flash, esse banner é muito utilizado nos grandes sites de compra como americanas, submarino entre outros.

Olá amigos neste tutorial vamos aprender um efeito bem legal no Flash, muito utilizado nos sites de venda de produtos como americas, submarino e outros. Veja o resultado final do nosso tutorial.



1 - Vamos abrir o flash e pedir um novo documento com as seguintes dimensões 770px de largura por 150px de altura conforme mostra a figura abaixo;

http://www.oficinadanet.com.br//imagens/coluna/2870//01.jpg


2 - Feito isso vamos criar um retângulo com as mesmas medidas do palco e em seguida vamos zerar seu eixo y e x deverá ficar igual a imagem abaixo;
http://www.oficinadanet.com.br//imagens/coluna/2870//02.jpg


3 - Agora vamos trabalhar com o gradiente do nosso retângulo, com ele selecionado vamos no menu Janela>Cor ou se preferir tecla de atalho (Shift + F9) escolha a opção de preenchimento radial com as seguintes cores #0099CC e #003366 veja a figura abaixo;
http://www.oficinadanet.com.br//imagens/coluna/2870//03.gif


4 - Em seguida vamos renomear a camada em que o retângulo foi criado, daremos o nome de "fundo" feito isso criaremos mais uma camada com o nome de "notebook" veja a figura abaixo;
http://www.oficinadanet.com.br//imagens/coluna/2870//04.jpg


5 - Na camada notebook vamos inserir a imagem do notebook que eu já vetorizei utilizando o fireworks para assim ganharmos tempo, para baixar a imagem clique aqui. Para importar a imagem que você acabou de baixar vá em Arquivo>Importar ou pelo atalaho Ctrl+R feito isso ajuste a imagem conforme mostra a figura abaixo;
http://www.oficinadanet.com.br//imagens/coluna/2870//05.jpg


6 - Feito isso vamos começar a trabalhar com nossa animação, não utilizaremos movie clips, para facilitar o aprendizado, na linha do tempo clique no quadro (1) da camada notebook e arraste até a posição (15) veja a figura abaixo;
http://www.oficinadanet.com.br//imagens/coluna/2870//06.jpg


7 - Para que a imagem do fundo aparace em toda a nossa animação vamos copiar-la até o quadro 100 para isso clique no quadro 100 da linha do tempo na camada fundo e utilizando o atalho (F6) ou clique com o botão oposto e vá na opção (Converter em quadros-chave), caso haja necessidade vamos aumentar ou diminuir a quantidade de quadros da camada fundo ( Ex: Se nossa animação tiver apenas 90 quadros nosso fundo também terá 90 quadros).
http://www.oficinadanet.com.br//imagens/coluna/2870//07.jpg


8 - Criaremos mais uma camada na qual receberá o nome de mascara, feito isso no quadro 15 vamos criar um quadro chave tecla de atalho (F6), em seguida vamos fazer um retângulo, utilizando a ferramenta de transformação livre vamos incliná-lo conforme mostra a figura abaixo;
http://www.oficinadanet.com.br//imagens/coluna/2870//08.jpg


9 - A cor do nosso retângulo não vai importar tendo em vista que ele será apenas a máscara, com o botão oposto clique no quadro 15 da camada mascara e vá até a opção "criar interpoção clássica" feito isso vamos até o quadro 30 e em seguida pressione (F6) para criar um quadro chave;
http://www.oficinadanet.com.br//imagens/coluna/2870//09.jpg


10 - Agora na camada notebook vamos até o quadro 30 e pressionamos (F6) a imagem do nosso notebook aparecerá, feito isso na camada mascara clique no quadro 30 e arraste nosso retângulo de maneira que ele possa ao passar cobrir todo a imagem do notebook;
http://www.oficinadanet.com.br//imagens/coluna/2870//10.jpg


11 - Já temos nossa máscara criada falta apenas ativar o efeito, vamos na camada aonde está nosso retângulo e com o botão oposto vamos na opção "mascara", veja como ficará nosso resultado, perceba que o ícone das camadas é alterado indicando que alí contém uma máscara;
http://www.oficinadanet.com.br//imagens/coluna/2870//11.jpg


12 - Vamos criar mais uma camada que ficará acima de todas, daremos o nome de "imagem", nesta camada colocaremos a imagem original do nosso notebook, clique aqui para baixá-la, terminado o download vamos no quadro 25 da camada imagem e daremos o comando de importar imagem para o palco atráves da tecla de atalho (Ctrl+R);
http://www.oficinadanet.com.br//imagens/coluna/2870//12.jpg


13 - Feito isso vamos até o quadro 30 da camada imagem damos um (F6), para que fique mais fácil de entender do quadro 25 até o quadro 30 nossa imagem aparecerá utilizaremos um efeito de trasição;
http://www.oficinadanet.com.br//imagens/coluna/2870//13.jpg


14 - Ainda na camada imagem vamos clicar entre o quadro 25 e 30 e com o botão oposto vamos na opção criar interpolação clássica;
http://www.oficinadanet.com.br//imagens/coluna/2870//14.jpg


15 - Feito isso vamos aplicar um efeito bem bacana de tonalidade, vamos ao quadro 25 da camada imagem, clique no notebook e em seguinda vamos ao painel "efeito de cor" que fica a direita do nosso palco, em seguida selecionaremos a opção tonalidade e altere a cor para branca, seja a imagem abaixo;
http://www.oficinadanet.com.br//imagens/coluna/2870//15.jpg


16 - Criaremos mais uma camada na qual daremos o nome de texto, com a camada criada vamos até o quadro 40 e pressionamos (F6), com a ferramenta de texto (T) vamos digitar o seguint texto "Promoção de Notebooks" alinhe o texto ao palco e modifique sua cor para branco;
http://www.oficinadanet.com.br//imagens/coluna/2870//16.jpg


17 - Agora vamos aplicar o efeito de transição, clicaremos no quadro 50 e em seguida vamos pressionar (F6), entre os quadros 40 e 50 clique com o oposto e em seguida na opção criar interpolação clássica, feito isso clique no quadro 40 e altere o posicionamento do texto deixe-o mais próximo do notebook, com o texto ainda selecionado vamos na opção efeito de cor em seguida clicaremos em alfa deixando em 0% o texto ficará invisível, veja a figura abaixo;
http://www.oficinadanet.com.br//imagens/coluna/2870//17.jpg


18 - Nossa animação está quase pronta, para que fique um efeito de loop, pressione F6 no quadro 85 e 90 da camada texto, feito isso vamos clicar entre os quadros mensionados e depois ir na opção criar interpolação clássica e no quadro 90 mova o texto um pouco para a direita em seguida aplique o efeito alfa 0%, dando movimentação ao nosso texto repita esse mesmo processo a camada imagem, assim nossa animação será contínua.
http://www.oficinadanet.com.br//imagens/coluna/2870//18.jpg


Consideração finais


Com um pouco de imaginação é possível fazer vários tipos de banner utilizando esse como base, espero que tenham gostado até a próxima. Dúvidas ou sugestões deixem seus comentários.

Leia a seguir: Flash: Efeito de texto datilografado com AS3



Você precisa ler isto:

Comentários

TOPO