Back to Original Article
More script and css style
: www.htmldrive.net

Tutorial Carro andando
ManiacosDesigN
Cadastre-se e participe do nosso evento
ManiacosDesigN
Cadastre-se e participe do nosso evento

Parceiros**
Últimos assuntos

Você não está conectado. Conecte-se ou registre-se

Tutorial Carro andando

Ir para baixo  Mensagem [Página 1 de 1]

1Tutorial Carro andando Empty Tutorial Carro andando Sex Fev 17, 2012 8:26 am

Lukas'

Lukas'
Admin
Admin

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.zip que 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.

Ir para o topo  Mensagem [Página 1 de 1]

Permissões neste sub-fórum
Não podes responder a tópicos