c) Insira uma nova camada, acima daquela que contém o texto. Nomeie-a de máscara. Clique com o botão direito nesta camada e marque a opção Mask.

Transcrição

1 Prática 5 Efeitos 1. Objetivos Desenvolver animações usando máscaras Fazer metamorfose pelo uso do Break apart 2. Recursos Necessários Computador com o programa Macromedia Flash MX ou superior. 3. Conceitos Gerais e Procedimentos 3.1. Atividade 1 Criando máscaras Agora que você já tem uma boa noção de animação, pode começar a aplicar alguns efeitos a elas. Um recurso muito interessante do Flash são as camadas de máscara. Como o próprio nome diz, elas escondem o que está por baixo delas. Como em uma máscara real, se você fizer furos nela, o conteúdo subjacente vai aparecer através dos furos. Veja agora como utilizar camadas de máscara. a) Crie um novo arquivo no Flash. Nomeie a camada já existente como Texto. No primeiro frame desta camada, use a ferramenta Texto para escrever qualquer frase na área de trabalho. b) Agora você precisa converter o texto para movie clip. No menu superior, vá em Insert> Convert to symbol. Dê o nome de frase e escolha a opção Movie Clip. c) Insira uma nova camada, acima daquela que contém o texto. Nomeie-a de máscara. Clique com o botão direito nesta camada e marque a opção Mask. d) Nessa nova camada, desenhe um círculo com qualquer tipo de preenchimento. Transforme-o em um movie clip. No menu superior, vá em Insert> Convert to symbol. Dê o nome de circulo e escolha a opção Movie Clip. Posicione-o sobre o começo do texto que está na outra camada. 1

2 e) Agora, na linha do tempo (timeline) da camada de máscara, crie um keyframe no momento 15 e outro no momento 30. Para a cada camada Texto, você pode criar um keyframe diretamente no instante 30. Para adicionar os keyframes, basta clicar o botão direito do mouse no ponto desejado da linha do tempo e selecionar a opção Insert Keyframe. f) Na camada máscara, clique sobre o keyframe 15 da linha do tempo. Nesse quadro, posicione o círculo sobre o fim do texto que está na camada Texto. Deixe o keyframe 30 como está, isto é, posicionado sobre o início do texto. Assim, o círculo vai realizar um movimento de ida e volta sobre o texto. g) Ainda na camada de máscara, crie um Motion Tween entre os quadros 1 a 14, e outro entre os quadros 16 a 30. h) Sua animação com máscara está pronta. Para testá-la dê Crtl+F12. Veja que o círculo funciona com um buraco na máscara, permitindo ver o que está na camada de baixo à medida que se move. i) Salve seu arquivo como p5_ativ1_seunome.fla. Publique o arquivo como.swf. 2

3 3.2. Atividade 2 - Bolhas Você já viu aqueles efeitos de JavaScript em que você passa o mouse por cima de uma imagem e vê um efeito de bolhas? O Flash tem a capacidade de reproduzir o mesmo efeito, suando camadas, máscara e shape tween. Shape Tween é um recurso muito parecido como motion tween. O princípio é o mesmo: você define o quadro inicial e o final, e o Flash insere os quadros intermediários. A diferença é que, no motion tween, animação é de movimento; no shape tween, é de forma. Assim, se você quiser transformar um círculo em um quadrado, ou um triângulo pequeno em um triângulo maior, por exemplo, pode aplicar um shape tween entre eles, e o programa vai fazer uma transição suave de formas. a) Abra um arquivo novo no Flash. No Propertites Inspector, determine que o filme tenha 1000 x 590 px de dimensão. b) Escolha uma das imagens de fundo: fundo1.jpg, fundo2.jpg ou fundo3.jpg, e importe para o palco. Import> Import to Stage. Renomeie a camada onde você inseriu esta imagem para bolhas. c) Clique na figura para selecioná-la e converta-a para movie clip. No menu superior, vá em Insert> Convert to symbol. Dê o nome de fundo e escolha a opção Graphic. d) Crie agora um novo símbolo: Insert> New Symbol, ou simplesmente, Ctrl+F8. Dê o nome de bolhas e escolha a opção Movie Clip. e) Dê um duplo clique no movie clip bolhas para editá-lo. Arraste o gráfico fundo para a área central, alinhe o gráfico no centro do palco. A camada onde ele foi inserido deve ser renomeada para fundo. f) Nesta tela de edição, você precisa inserir uma camada de máscara. Para isto, crie uma nova camada, dê o nome de máscara e clique nela com o botão direito e, no menu que aparece, marque a opção Mask. g) Na camada de máscara, use a ferramenta Oval para criar um pequeno círculo com preenchimento qualquer. 3

4 h) Ainda na camada de máscara, insira um keyframe no momento 25 da linha do tempo. Neste quadro, aumente o tamanho do círculo, mas sem tirá-lo do lugar. i) Agora nos vamos criar um efeito de transição de formas entre os dois círculos. Clique em qualquer quadro entre o 1 e o 25. No painel Properties, na caixa de seleção Tween, selecione a opção Shape. j) Vamos criar um efeito de suavização da cor. Pra isso, temos que mudar a propriedade Alpha do gráfico fundo, baixando seu valor. Para isso, selecione a figura e vá até o painel Properties. Em Color, escolha a opção Alpha e deslize a barra até chegar a O. 4

5 k) Ainda nesta mesma camada, adicione um keyframe no momento 5 da linha do tempo. Nesse novo frame, a figura vai aparecer também como o Alpha em 0%. Selecione-a e restaure os 100% de Alpha. Aplique Motion Tween entre os quadros 1 e 5. Depois, adicione outro keyframe no momento 20 da linha do tempo. Nesse quadro, a imagem também deve estar com o Alpha em 100%. E, por fim, adicione outro keyframe no frame 25 da linha do tempo, esse com 0% de Alpha. Aplique Motion Tween entre os quadros 20 e 25. Ao final deste processo, a linha do tempo do movie clip bolhas deve ficar assim: l) Agora é hora de fazer o efeito funcionar. Volte para a cena principal, clicando no link Scene 1, acima da tela de edição. m) Insira mais quatro camadas acima da camada bolhas. n) Na camada Layer 2, adicione um keyframe em branco no quadro 6 da linha do tempo e arraste, da biblioteca, uma instância do movie clip bolhas para este keyframe. o) Na camada Layer 3, adicione um keyframe em branco no quadro 12 da linha do tempo e arraste uma instância do movie clip bolhas para este keyframe. Faça o mesmo para as demais camadas seguindo a seqüência p) No 36 o quadro, selecione as camadas de bolhas até Layer 4 e clique no botão direito do mouse para inserir quadros até o quadro atual. q) Teste seu filme, você deverá ver bolhas que crescem e mostram a imagem que está por baixo dela. Salve seu arquivo como p5_ativ2_seunome.fla. Publique o arquivo como.swf. 5

6 3.3. Atividade 3 Break apart O comando Break Apart serve principalmente para quebrar palavras e objetos. Com ele você pode simplesmente digitar normalmente uma palavra e depois quebra-la em letras separadas, sem precisar digitar um letra em cada camada. Quando você importa um arquivo JPG para o Flash, ele importa a imagem como um retângulo, de maneira que você tem que quebrar a imagem se quiser eliminar alguma área indesejada da figura. Vamos entender mais isto na prática. a) Abra um arquivo novo no Flash com as dimensões 1000 x 590 px. b) Importe para o palco a imagem monica.jpg. Centralize a imagem. c) Selecione a imagem e no menu vá em Modify> Break Apart, ou simplesmente Ctrl+B. Você acabou de quebrar o gráfico. d) Agora com ferramenta Laço vamos selecionar algumas áreas específicas para recortar. Selecione Laço e, em seguida, no painel Options abaixo, selecione a Varinha Mágica. e) Clique com a Varinha Mágica na parede cor-de-rosa e aperte delete no seu teclado. O que acontece? Esta é uma imagem obtida por meio do escaneamento de uma revistinha em quadrinhos, sendo assim, ela possui irregularidades e a Varinha Mágica procura áreas que tenham cor iguais para selecionar. Provavelmente, você não eliminou todo o rosa... Dê um Ctrl+Z para voltar à situação anterior. f) Desta vez clique no botão de características da Varinha Mágica. No valor para Threshold experimente aumentar para 32 e, em Smoothing experimente Smooth. g) Clique mais uma vez na varinha mágica e selecione a área cor-de-rosa. Apague. O que acha? Melhorou? Se ainda tem áreas que estão com rosa, aumente o zoom e selecione para apagá-las. h) Crie uma camada abaixo desta figura e desenhe um quadrado colorido bem na posição da parede da figura. Gostou da nova cor? i) Salve o arquivo como p5_ativ3_seunome.fla. Publique o arquivo como.swf. 6

7 3.4. Atividade 4 - Metamorfose No Flash você pode fazer um texto se metamorfosear em outro de uma maneira bem fácil. Está lembrado do recurso Shape Tween? Ele, na realidade, só pode ser aplicado a gráficos, não a textos. Mas, como sempre, há uma saída. Basta transformar o texto em gráficos! Então, é só aplicar um Shape Tween normalmente. a) Abra um arquivo novo que tenha 30 fps. b) No primeiro frame da camada existente, escreva uma palavra ou frase, com qualquer fonte e cor. c) Abra o menu Modify> Break Apart, para quebrar a palavra em letras. Agora que ela foi quebrada em letras é preciso repetir o processo Modify>Break Apart novamente para transformar as letras em gráficos. d) Insira um keyframe no quadro 15 e outro no 45 da linha do tempo. Nesse novo quadro, apague todo o conteúdo e escreva outra frase com fonte, cor e tamanho diferentes. e) Utilize o Break Apart duas vezes para transformar as letras em gráficos. f) Agora, clique em qualquer quadro no meio da linha do tempo. Na barra Properties, na caixa de seleção Tween, escolha Shape. g) Insira mais 15 quadros no fim da linha do tempo, para que você tenha um tempo para ler o que está escrito. 7

8 h) Salve seu arquivo como p5_ativ4_seunome.fla. Publique o arquivo como.swf. Atenção: Faça uma cópia de todos os arquivos desta aula para no diretório escolhido pelo professor para correção. Boa semana! 8