ANEL ROTATIVO. Introdução

Transcrição

1

2 ANEL ROTATIVO Introdução Vamos com este tutorial criar em Flash um anel rotativo. Se pensarmos num anel como um cilindro, depressa chegamos á conclusão que os seus topos são iguais. Isto quer dizer que na rotação do anel os topos têm o mesmo comportamento. Então a ideia é desenhar uma área que seja o topo do anel e simular uma rotação de 90º até conseguirmos ter a vista de frente. A vista de frente consegue-se ao reduzir a imagem que representa o topo só em x. Depois disto insere-se keyframes em todas as frames da animação e duplica-se a layer. Para a animação começar a ter dimensão basta criar um desfasamento entre a primeira e a segunda layer. A partir daqui é só ligar as duas faces por uma linha nos limites superiores e inferiores das faces, termos noção das linhas que estão a mais e limpá-las, e por fim fazer a mesma animação ao contrário na continuação da que já está.

3 Características Básicas Frame Rate: 12 fps Stage Dimensions: 350px X 400px Background Color: Cinzento (#CCCCCC) Tutorial Abrir o Flash 5 e criar novo documento File > New. Nas propriedades do Movie colocar as dimensões em 400px X 400px e a cor do background em branco. Criar o Anel Nomear a layer da timeline principal como "lado1" e seleccionar a primeira frame. Nesta frame desenhar o perfil do anel, para isso desenhar duas circunferências com stroke "1" a vermelho (#FF0000) e sem preenchimento interior, uma com 100px de diâmetro, a outra com 80px e centrar estes dois objectos na página Window > Panels > Align. Pintar com a cor Branca( #FFFFFF). Converter o desenho num symbol graphic e dar o nome "lado1" Insert > Convert to Symbol. Criar uma keyframe (F6) na frame 20 da layer "lado1". Carregar na ferramenta Scale situada na toolbar, aparece uma caixa com 6 quadrados (alças) agarrar na alça central direita e arrastar até ela conseguir atingir o centro do objecto. Agora que na frame 20 o objecto está encolhido, na frame 1 carregar no botão direito do rato e escolher Create motion tween.

4 Duplicar Layer e inserir Keyframes Seleccionar as 20 frames onde está o objecto e inserir keyframes em todas elas. Inserir uma nova Layer com o nome de "lado2". Clicar no nome da layer "lado1" para seleccionar todas as frames, a seguir escolher Edit > Copy frames (ou Ctrl + Alt +C), clicar na primeira frame da layer "lado2" e escolher Edit > Paste frames (ou Ctrl + Alt + V). O resultado deverá ser este: Criar o outro lado do anel Vamos agora mover para a direita todas as keyframes da layer "lado2", seleccionar keyframe a keyframe e avançar um passo para a direita pressionando a tecla shift e na

5 seta direita. As frames 1 e 20 terão este aspecto: Fechar as duas faces Seleccionar a 20.ª frame da layer "lado 1". Fazer zoom da área de trabalho (cerca de 300%) usar a ferramenta Line Tool para desenhar as linhas que unem as duas faces do anel. Repetir este processo nas restantes frames desta layer. A frame 20 deverá ter este aspecto: Agrupar o anel numa Layer Agora vamos passar o anel para uma única layer. Seleccionar a 1.ª frame da layer "lado1", copiar o seu conteúdo (Ctrl + c) e na 1.ª frame da layer "lado2" e fazer Edit > Paste in Place (ou Ctrl+Shift+V). Repetir o processo nas 20 frames. Apagar layer "lado1", a partir de agora o trabalho será feito numa única layer. Limpeza Limpar todas as linhas (arestas) que não são vistas num objecto 3D opaco. Como limpar Seleccionar a frame 20, fazer Break apart (Ctrl+b) e depois seleccionar na toolbar Eraser tool, nas opções desta ferramenta escolher Faucet e começar a limpar. Reparar

6 na imagem abaixo a diferença entre uma frame antes e depois de limpa. Repetir este processo para todas as frames. Preencher com cor Para as áreas cilíndricas utilizar gradientes a partir da cor do vermelho (# FF0000) para o preto, para simular brilhos e sombras. Se o cilindro exterior tiver a zona do gradiente só vermelho na parte de cima do anel, no cilindro interior a mesma zona deverá estar na zona debaixo, isto para haver coerência na fonte de luz. Com a variação da localização, mais a cima ou mais a baixo, da zona do gradiente só vermelho conseguimos produzir reflexos. Completar 90º de rotação Até agora estamos fazer a rotação de 90º, mas para que a nossa animação tenha essa rotação completa é necessário mais uma frame para visualizar a vista de lado do anel. Criar uma keyframe na frame 21., seleccionar o anel, clicar no botão direito em cima do anel e escolher Panels > Info, apontar as medidas "X" e "Y" e "W" (largura) "H" altura. Apagar o Anel. Criar um rectângulo na mesma posição do anel (ver os valores apontados de "X" e "Y".) com a mesma altura e metade da largura (Ver os valores apontados para "W" e "H") Preencher o rectângulo com o mesmo gradiente aplicado anteriormente.

7 Segunda parte da animação - os outros 90º Quando vemos a rotação de um anel ou de uma moeda começamos por ver uma face e a progressão da rotação até só vemos a espessura do anel, ou seja a rotação de 90º, isto é o que neste momento temos em 21 frames. Agora basta fazer a mesma rotação no sentido contrário ou seja, a frame 22 com flip horizontal é igual á 20 e a 41 também com flip horizontal é igual á 1. Assim temos a rotação completa de 180º. Para obter este resultado seleccionar a primeira frame e copiar (botão direito do rato sobre a 1ª Keyframe» Copy frames), fazer paste frames (botão direito do rato sobre a frame 41» Paste Frames ) escolher Modify > Transform > Flip Horizontal. O aspecto entre a frame 1 e a 41 deverá ser este: Repetir este processo com as frames 2-40, 3-39, 4-38 até á Temos assim a rotação completa do nosso anel! Continuação de bom trabalho! Diverte-te! Até á próxima!