Finalizando o Blinkie com Flash Motion Tweens

• Pode 6, 2024

Quando trabalhamos pela última vez na animação blinkie do Flash, acabamos de terminar os efeitos de texto. O último efeito de texto que ocorreu na animação foi a aparência e o desaparecimento do nome do site “J3 Designs”. Ele desaparece do palco à esquerda com um efeito de transição da linha do tempo (transição 3 na linha do tempo). Havia uma razão para isso e você está prestes a descobrir qual era a razão.

Lembre-se de que, como parte dos detalhes do design, temos essas duas joaninhas. Bem, é hora de colocá-los para trabalhar. Quando construímos as camadas para o nosso projeto blinkie, adicionamos a joaninha dourada à camada Bug 1. Agora, a primeira coisa que faremos é adicionar a segunda joaninha a uma nova camada que chamaremos de Bug 2. Queremos que essa joaninha vermelha apareça embaixo da camafeu. Portanto, precisaremos colocar a nova camada sob a camada Detalhes estáticos.

Abra o blinkie2.fla no Flash CS3 e vamos trabalhar. Queremos que a joaninha comece a se mover sob o cameo quando o nome do site começar a desaparecer. Queremos que pareça que o texto está desaparecendo por causa da joaninha. Então, adicionaremos essa nova joaninha no Quadro 110, que é quando o texto começa a desaparecer.

1. Clique em Arquivo - Importar - Importar para a Biblioteca para abrir a caixa de diálogo Importar e adicionar a joaninha vermelha à nossa Biblioteca.
   
   
2. Adicione uma nova camada abaixo da camada Detalhes estáticos e nomeie-a como "Bug 2". Adicione um Quadro-chave (Inserir - Linha do tempo - Quadro-chave) ao Quadro 110. Arraste a joaninha vermelha da Biblioteca para a parte inferior da camafeu e fora de vista por enquanto.
   
   Queremos que esta joaninha se mova para a esquerda até desaparecer do palco à medida que o texto desaparece. Então, queremos que a joaninha fique à esquerda e fora do palco quando chegarmos ao Quadro 160.
   
   
3. Clique no Quadro 160 na camada Bug 2, adicione um Keyframe e arraste a joaninha vermelha para a esquerda e todo o caminho para fora do palco. Clique com o botão direito entre os Quadros 110 e 160 e escolha Criar interpolação de movimento no menu pop-up.
   
   Teste o filme e você verá o texto desaparecer enquanto a joaninha se move sobre ele. Quando a joaninha vermelha estiver fora do palco, moveremos a joaninha dourada (camada Bug 1) para cima e para a direita até que ela também desapareça do palco.
   
   
4. Clique no Quadro 160 na camada Bug 1 e adicione um Keyframe como ponto de partida para a animação da joaninha dourada. Vamos usar 20 quadros para mover a joaninha dourada do palco. Clique no quadro 180 e adicione um quadro-chave. Mova a joaninha dourada para cima e para fora do palco.
   
   
5. Clique com o botão direito entre os quadros 160 e 180 e crie uma interpolação de movimento. Clique no Quadro 180 e adicione um Quadro às camadas Detalhes estáticos e Plano de fundo para tornar o conteúdo dessas camadas visível novamente.
   
   Finalmente, queremos mover a joaninha de ouro de volta à sua posição original, na parte inferior esquerda do palco. Mas não queremos que o bug desça do topo do palco. Queremos que ele suba de baixo do palco. Então, precisamos primeiro colocar a joaninha de ouro à esquerda e embaixo do palco. Então tudo o que precisamos fazer é movê-lo para cima, de volta à sua posição original, para que a animação possa se repetir. Usaremos 10 quadros para mover a joaninha de volta ao lugar.
   
   
6. Volte ao Quadro 1 na camada Bug 1 e selecione a joaninha dourada. Clique em Editar - Copiar para salvar a posição original da joaninha dourada.
   
   
7. Ainda na camada Bug 1, adicione um quadro-chave ao quadro 190. Clique em Editar - Limpar para remover a joaninha dourada que já está lá. Em seguida, clique em Editar - Colar no local para colocar a joaninha dourada de volta à posição original.
   
   
8. Ainda na camada Bug 1, clique no Frame 181 e adicione um Keyframe. Em seguida, remova a joaninha dourada que já está lá. Coloque a joaninha dourada de volta à posição original neste quadro (Colar no lugar). Em seguida, arraste esta joaninha para debaixo do palco. Adicione uma interpolação de movimento entre os quadros 181 e 190, que moverá essa joaninha para cima e para o palco.
   
   
9. Clique no Quadro 190 e adicione um Quadro às camadas Detalhes estáticos e Plano de fundo para tornar o conteúdo dessas camadas visível novamente.
   
   

Teste e salve o blinkie como blinkie3.fla. Em seguida, publique seu blinkie como um arquivo .swf e aproveite seu novo blinkie.

J3 Designs

Direitos autorais 2018 Adobe Systems Incorporated. Todos os direitos reservados. As capturas de tela do produto Adobe foram impressas com permissão da Adobe Systems Incorporated. Adobe, Photoshop, Álbum do Photoshop, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst e Flash Paper é / é [a] marca registrada ou marca comercial da Adobe Systems Incorporated nos Estados Unidos e / ou em outros países.