Animação no flash. Prezado(a) aluno(a), 1. Técnicas de Animação. Animação quadro a quadro

Transcrição

1 UnidadeC Animação no flash Prezado(a) aluno(a), Até aqui você aprendeu a utilizar a estrutura e as ferramentas do Flash para criar e organizar gráficos imóveis. Nesta unidade, você conhecerá algumas técnicas para produzir animações no Flash. Bons estudos!!! 1. Técnicas de Animação As animações utilizando o Flash são resultado de combinações de diversas técnicas. Antes de conhecê-las, vamos conversar sobre o frame-rate, ou seja, a velocidade com que uma animação é reproduzida, que é medida pelo número de quadros por segundo (FPS). Uma taxa muito lenta faz com que a animação não apareça de forma suave e uma taxa muito rápida encurta a animação. Para alterar o FPS, clique no palco e observe as Propriedades. Localize o FPS (normalmente em 24) e substitua pelo valor 12. Durante os exercícios, você pode alterar esse valor para uma taxa que melhor se adaptar ao filme. Animação quadro a quadro Uma animação quadro a quadro altera o conteúdo do palco em cada quadro. Para criar uma animação com essa técnica, defina cada quadro como um quadro-chave e crie uma imagem diferente para cada um deles. Normalmente, usamos a tecla F6 para copiar o quadro anterior para o próximo quadro principal. Funciona de maneira similar a um desenho animado. Criando animações quadro a quadro 1. Crie um novo arquivo com o nome quadroaquadro.fla. 2. Nas propriedades do documento, altere o FPS para Desenhe um círculo no palco. Observe que no primeiro quadro, na linha do tempo, aparece uma bolinha preta, informando que há um objeto nesse quadro. 4. Crie uma nova instância desse objeto no segundo quadro, pressionando a tecla F6 e troque a cor do círculo. 5. Para completar a sequência, faça esses procedimentos até o quadro Para testar, pressione as teclas Ctrl + Enter. Isso testa o filme e gera um arquivo com a extensão SWF. Você pode experimentar alterar a posição do círculo em cada quadro, o que dará a sensação de movimento. 22

2 Interpolação de movimento A interpolação de movimento é a forma comum para criar movimento em Flash. Deve-se criar dois pontos, um inicial e outro final, separados por uma quantidade variada de frames. O Flash cria os frames intermediários, dando a sensação de movimento. Criando uma interpolação de movimento 1. Crie um novo arquivo chamado MotionTween. 2. Nas propriedades do documento, altere o FPS para Desenhe um retângulo no palco. 4. Com a ferramenta de seleção, clique com o botão direito do mouse e escolha a opção criar interpolação de movimento. 5. Clique no botão OK para converter o retângulo em um símbolo. Se a configuração de FPS na Propriedade do documento é 24, o Flash cria uma extensão de 24 quadros. 6. Clique no frame 24 e arraste o quadrado para uma outra posição do palco. 7. Teste seu filme pressionando as teclas Ctrl + Enter. 8. Experimente, utilizando a ferramenta de seleção, clicar e arrastar um dos pontos da linha. Teste o filme novamente. 23

3 Interpolação de forma A interpolação de forma é utilizada para transformar um desenho em outro. O desenho deve estar na mesma camada (layer). Criando uma interpolação de forma 1. Crie um novo arquivo com o nome shapemotion.fla. 2. Nas propriedades do documento, altere o FPS para Selecione o quadro 1 da camada 1, onde a animação vai começar. 4. Desenhe um quadrado com preenchimento vermelho. 5. Selecione o quadro 12 da camada 1 e crie um segundo quadro-chave(f6). 6. Selecione o quadrado no quadro 12 e mude a forma (ferramenta de transformação livre). 7. Clique com o botão direito do mouse no quadro 6 e selecione Criar Interpolação de forma. 8. Teste o filme. 9. Experimente outros efeitos interessantes, tais como mudar a cor ou a posição do retângulo. 2. Imagens e Símbolos Imagens Ao iniciarmos este estudo sobre imagens no Flash, é importante entender algumas propriedades de dois tipos básicos de imagens: os vetores e os bitmaps. Vetores São imagens desenhadas na tela a partir de cálculos matemáticos, e são formados por linhas ou curvas. Uma das vantagens deste tipo de imagem é que não perdem qualidade quando precisamos ampliá-las. Sua desvantagem é a sua limitação em não representar imagens fotográficas. Vetores não são digitalizados, mas sim traçados. Os desenhos que você cria no Flash são formados por vetores, que é o formato gráfico nativo do Flash. Bitmaps São imagens formadas pela junção de pequenos pontos coloridos denominados pixels em uma grade de largura fixa. Esta composição ordenada de pontos forma uma imagem fotográfica. Para diminuir a sua desvantagem de perder a qualidade ao ser ampliada, é necessário digitalizá-la em alta resolução. Para você utilizar uma imagem, deverá importá-la. Vá ao menu Arquivo e escolha uma opção de importação: importar para o palco ou importar para biblioteca. Nos dois casos, a imagem irá para a biblioteca, mas na importação para o palco a figura já é inserida nele. O Flash suporta vários formatos de imagens, entre eles: gif, jpg, bmp, png. Além disso, o Flash suporta arquivos do Corel Draw, Photoshop e Illustrator. Importando uma imagem 1. Abra um novo arquivo com o nome imagem.fla. 2. Clique no menu Arquivo e na opção Importar para o palco, conforme figura C.3. Na caixa que irá se abrir procure uma imagem que será utilizada em nosso exercício. Caso não tenha imagens em seu computador, existem inúmeros sites com imagens grátis para baixar, como por exemplo:

4 Compartilhe com seus colegas no fórum imagens grátis, sobre suas buscas de outros sites com imagens gratuitas. Transformando Bitmap em Gráfico Vetorial Se houver a necessidade de transformar um bitmap em um vetor, utilize o comando Traçar bitmap. Selecione a imagem, abra o menu Modificar, vá até Bitmap e escolha a opção Traçar bitmap. Os valores que podemos definir na janela Traçar bitmap são: Limiar de cor define as cores a serem utilizadas. Área mínima número de pixels em torno de um ponto ao atribuir uma cor a um pixel. Limiar do canto conversão dos cantos angulares. Ajuste de curva grau de suavidade dos contornos. 25

5 Quanto menor os valores inseridos, maior a qualidade da imagem vetorial e mais demorada será a conversão. Símbolos São elementos reutilizáveis em seu filme que ajudam a reduzir o tamanho do arquivo e são necessários para dar interatividade ao aplicativo Flash. Cada vez que você reutiliza um símbolo, está usando uma instância, que é independente e pode ter comportamentos distintos desse símbolo. No Flash, há três tipos principais de símbolos: Clipes de filme (movie clips): são pequenas animações que podem ser utilizadas no seu filme principal. Botões: símbolos que permitem a interação através de eventos do mouse. Elementos gráficos: são imagens estáticas. Você pode criar um símbolo de duas maneiras: Um símbolo vazio, quando não há conteúdo no palco. Utilize as teclas Ctrl + F8 Um símbolo a partir de um conteúdo colocado no palco. Selecione o conteúdo do palco e utilize a tecla F8. A janela aberta nos dois casos é semelhante. No campo Nome, especifique o nome do símbolo. No campo Tipo, especifique o tipo de símbolo. 26

6 Vamos praticar? Criando um símbolo em um palco vazio 1. Crie um novo arquivo chamado simbolografico.fla. 2. Crie um símbolo vazio, clicando no menu Inserir e na opção Criar novo símbolo. 3. Importe uma imagem qualquer. 4. Clique com o botão direito do mouse na imagem e escolha a opção criar interpolação de movimento. O item selecionado vai ser convertido em um símbolo. Para interpolar, clique no OK. Na biblioteca, teremos a imagem e dois símbolos. 5. Clique no quadro final e diminua o tamanho da imagem. 6. Clique em Cena Arraste os dois símbolos que estão na biblioteca para o palco. 8. Teste o filme. Perceba que o símbolo onde criamos a interpolação de movimento alterou de tamanho. Para modificar um símbolo, dê um duplo clique sobre seu nome na biblioteca. Criando um botão 1. Crie um novo arquivo, chamado botao.fla. 2. Desenhe no palco um retângulo azul com a borda arredondada. 3. Com a ferramenta Texto, digite a palavra Botão na cor branca sobre o retângulo. 4. Selecione tudo e pressione a tecla de atalho F8. 5. Escolha no Tipo de símbolo a opção Botão. Criando uma ação para o botão 1. Antes de criar a ação para o botão, devemos dar um nome de instância. Clique no botão e nas propriedades e dê o nome de bt1. 2. Abra o painel Ações com a tecla F9. Iremos trabalhar com mais detalhes o painel Ações e a linguagem ActionScript nas próximas unidades. 3. Digite o seguinte código. Observe o que deve ser digitado em letras maiúsculas e minúsculas. Procure digitar com cuidado para evitar erros no comando. bt1.addeventlistener(mouseevent.click, onclick); function onclick(evt:mouseevent):void { var url:urlrequest = new URLRequest( ); navigatetourl(url); } 4. Teste seu filme, pressionando Ctrl + Enter. 5. Clique no botão e o navegador irá abrir a página solicitada. 3. Cenas 27

7 Quando você cria um filme novo é criada a Cena 1, que é o primeiro local de trabalho. Podemos desenvolver todo o filme em apenas uma cena, mas podemos utilizar outras. Para entender melhor, abra o painel Cena, utilizando as teclas de atalho (Shift + F2). Nesse painel, há a listagem de todas as cenas de seu filme. Uma cena é executada após a outra na sequência determinada pelo painel Cena. Para alterar a ordem de execução arraste uma cena para cima da outra. Para trabalhar na cena desejada, dê um clique na cena dentro do painel Cena. Você pode criar novas cenas clicando no ícone adicionar cena. Além disso, pode duplicar uma cena clicando no ícone Duplicar cena. Para apagar uma cena, clique no ícone Excluir cena. Vamos praticar? 1. Crie um novo arquivo com o nome variascenas.fla. 2. Clique no frame 1 e digite a frase CENA1. 3. Crie um quadro-chave (keyframe) no frame Abra o painel Cena (Shift + F2) 5. Clique no ícone adicionar cena. 6. No frame 1, digite CENA 2 7. Crie um quadro-chave no frame Teste seu filme ( Ctrl + Enter) 28

8 ATIVIDADE C Animação Caro(a) aluno(a), 1. Utilizando os conceitos que aprendeu até agora, crie um banner com as dimensões 480 x 60 para uma empresa fictícia. 2. Coloque um link para o endereço eletrônico desta empresa. Não esqueça das animações! Bom trabalho! 29