Home » » Criar um banner de Carro animado usando o Flash CS5

Criar um banner de Carro animado usando o Flash CS5

Neste tutorial, você aprenderá como criar um banner animado usando o Flash CS5. Você vai aprender como criar um carro em movimento em uma estrada com os pneus girando.







Vamos criar um banner de tamanho 728x300. Para começar com o tutorial baixe o arquivo tutorial.zipque irá fornecê-lo com os arquivos necessários para ser usado no tutorial.


1 - Abra um novo arquivo flash. Escolha Window (Janela)> Properties (Propriedades) no menu principal, o painel Properties (propriedades) é exibida, como mostrado na figura abaixo:




Escolha o botão "Editar" na área de propriedades no painel, o Documento janela Configurações será exibida. Defina as dimensões de 728px (largura) e 300px (altura) e escolha o botão OK para fazer as mudanças.


2 - Renomeie a camada existente como edifícios e escolha Arquivo (File)> Importar (Import)> Importar para biblioteca (Import to Library) a partir do menu principal e importe os arquivos baixados no início do tutorial.


3 - Escolha Janela (Window)> Biblioteca (Library) do menu principal; o painel Biblioteca é exibida. Puxe a criação de imagens para a área de palco e alinhá-lo como mostrado na figura abaixo.




4. Selecione a imagem e escolha Modify (Modificar)> Convert to Symbol (Converter para símbolo) no menu principal e converta em Movie Clip e de o nome como building_animation.


5. Dê um duplo clique no movieclip e selecione a imagem edifício (building) e crie um moviclip novamente e dê o nome como edifício. Renomeie a camada como anim_building.


6 - Selecione o quadro 460 e adicione um quadro-chave (keyframe). Selecione o movieclip edifício e abra o painel PROPERTIES e de o valor de X para -1450. Publique o arquivo para ver a animação. Se em algum ponto do tempo der algum problema, por favor, ajuste a posição e frames do movieclip de construção (building) em conformidade.


7 - Vá para a área do palco principal e crie uma nova camada chamada estrada. Escolha a ferramenta Rectangle no painel Ferramentas e crie uma caixa na parte inferior da área de construção e alinhá-lo como mostrado na figura abaixo. Certifique-se que a cor da estrada é definida como # 171717.




8 - Em seguida, crie uma nova camada chamada faixa de estrada e criar um padrão cinza e branco retangular usando a ferramenta Retângulo do painel Ferramentas, como mostrado na figura abaixo. Assegure-se que o comprimento do padrão de faixa de estrada é quase igual à dos edifícios.




9 - Selecione a faixa de estrada e escolha a ferramenta "Free Transform" do painel Ferramentas e entorte a estrada como mostrado na figura abaixo. Assegure-se que a cor da parte cinza no padrão é semelhante ao utilizado na estrada.




10 - Escolha Modify (Modificar)> Convert to Symbol (Converter para Símbolo) e converta em Movie Clip e de o nomê como "road strip". Selecione o movieclip e escolha Modify> Convert to Symbol novamente e de o nome como "road strip animation". Coloque esta animação no centro da estrada como mostrado na Figura abaixo.




11 - Anime a tira de estrada (road strip) como você fez para o movieclip edifício (building). Mas se certifique de que a velocidade da tira de estrada (road strip) é dupla, em comparação com a velocidade de movimento dos edifícios. Publique o arquivo flash para ver a transição na animação.


12 - Em seguida, volte à área do palco principal e crie uma nova camada e nomeie como logotipo (logo). Arraste o arquivo logo.jpeg do painel Biblioteca e coloque - o no canto superior esquerdo como mostrado na figura abaixo.




13 - Crie uma nova camada na área do palco principal e renomeá-lo como trilha (footpath). Crie a trilha usando a ferramenta Retângulo, como mostrado na figura abaixo. Assegure-se para coincidir com o comprimento da tira (footpath) com a tira de estrada (road strip).




14 - Alinhe a trilha(footpath) como mostrado na Figura abaixo:




15 - Anime a trilha (footpath) semelhante à tira de estrada (road strip) e com a mesma velocidade. Publique o arquivo flash para ver o efeito.


16 - Em seguida, na área do palco principal crie uma nova camada e renomeá-lo como carro (car). Escolha Modificar (Modify)> Converter em símbolo (Convert to Symbol) e converta em Movie Clip e renomeie como carro (car). Dê um duplo clique no movieclip car (carro) e crie uma nova camada e de o nome de tyre_front (pneu_dianteiro). Dê um Zoom na área do pneu da frente e crie um padrão utilizando a Ferramenta Retângulo como mostrado na Figura abaixo.




17 - Transforme esse padrão em um movieclip e renomeie como "tyre_mask". Dê um duplo clique sobre esse movieclip e renomeie a camada existente como bg e seleção do padrão cruzado novamente e escolha Modify (Modificar)> Convert to Symbol (Converter para Simbolo) no menu principal e renomeá-lo como raios (spokes). Escolha Janela (Window)> Propriedades no menu principal e adicione filtro de desfoque (add blur filter) a ele.


18 - Em seguida, crie uma nova camada sobre ele e de o nome de máscara (mask). Crie uma forma oval exatamente a forma do aro do carro como mostrado na Figura abaixo.




19 - Ative a camada bg e criar quadros-chave nos quadros 3 e 6. Gire o movieclip raios no quadro 3 por cerca de 180 graus e adicione interpolação de movimento entre os quadros-chave.


20 - Em seguida, ative a camada de máscara e escolheu frame 6 e aperte F5 para estender os frames. Agora, clique direto sobre a camada de máscara e escolha Máscara da lista drop-down, os raios serão visíveis somente na área de borda como mostrado na figura abaixo.




21 - Da mesma forma, adicione o mesmo efeito para a roda traseira. Volte para a área do palco principal e clique duas vezes no movieclip car_animation e criar um quadro-chave (keyframe) no número do quadro 40. Mova o movieclip carro um pouco na posição superior direito. Em seguida, adicione outro quadro-chave no número do quadro 75 e coloque o carro na posição inferior direito. Adicione mais um Keyframe no frame 115 e coloque o movieclip na posição superior esquerdo. Adicione o último quadro-chave (keyframe) no frame 190 e coloque o moviclip na mesma posição que estava no frame1. Adicione interpolação de movimento entre os todos os keyframes.


22 - A posição do carro sobre a área fase principal, como mostrado na Figura abaixo.




23 - Publique o arquivo flash para ver a animação do banner.


24 - Você também poderá colocar um texto na animação... Para fazer isso, crie mais uma camada na área do palco e de o nome de texto e adicione na cena e faz ele voar na área do palco e depois parar, como mostrado na figura abaixo.




Publique o arquivo flash para obter a animação como mostrado abaixo.




Isto conclui o nosso tutorial, sinta-se livre para postar suas perguntas no Facebook e assine nossos Feeds...
curta no facebook
Follow us on Twitter
Recommend us on Google Plus
Subscribe me on RSS