1

Aprenda a fazer um banner animado no 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;

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;
 2

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;

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;

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;
 3

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;

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).

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;
 4

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;
 5

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;

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;
 6

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);

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;
 7

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;

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;

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;
 8

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;

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.
 9

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.

Post completo em:

https://www.oficinadanet.com.br/artigo/flash/aprenda-a-fazer-um-banner-animado-no-
flash

O conteúdo do Oficina da Net é protegido sob a licença Creative Commons (CC BY-
NC-ND). Você pode reproduzi-lo, desde que insira créditos COM O LINK para o
CONTEÚDO ORIGINAL e não faça uso comercial de nossa produção.