Prática 3 Princípios da Animação

Prática 3 Princípios da Animação As animações em um site são bem discutidas quanto ao seu uso, pois, qualquer coisa que se movimenta na visão periférica ocupa lugar na consciência. Isso faz com que o usuário não consiga se concentrar em um texto se, por exemplo, estiver uma animação próxima sendo executada. Muitos designers imaginam que as animações são símbolos de status e afluência dando indicações do árduo trabalho de design no site. Mas, grande parte dos usuários se irrita com elas especialmente os textos em movimentos. Além disso, os textos em movimento geralmente não trazem nenhuma informação útil e mesmo que o traga torna-se muito difícil a sua leitura já que parte do texto fica escondida ou mexendo. É claro que não se pode generalizar a tal ponto de excluir totalmente a animação de um design, mas, já há o cuidado para não usar algo que se parece com um banner publicitário. Pois, é o maior chamariz para o usuário ignorar o site em que ele está para ir ao outro. É aconselhável que as animações parem em algum momento, ou seja, não fiquem executando indefinidamente. Outra situação é identificar se a animação teria um valor agregado à informação e útil ao usuário. Entretanto, verifica-se que a animação pode ser usada para algumas finalidades, tais como: mostrar continuidade e indicar dimensionalidade nas transições, ilustrar a mudança no tempo, enriquecer as representações gráficas, visualizar estruturas tridimensionais e chamar atenção. 1. Objetivos Se familiarizar com os Objetos do Flash e Símbolos: gráficos (graphics), clipes de filmes (movie clips) e botões (buttons). Entender o processo da animação por interpolação. 2. Recursos Necessários Computador com o programa Macromedia Flash MX ou superior. 3. Conceitos Gerais e Procedimentos 3.1. Manipulando objetos O Flash possui muitas ferramentas de manipulação de objetos gráficos. Podemos girar, dimensionar, alinhar, agrupar entre outras funções. Para juntar várias formas e gráficos em um agrupamento único, facilitando assim a organização e manipulação de um desenho complexo, selecione os objetos que estão na mesma camada e vá em Modify> Group ou simplesmente digite Ctrl+G. 3.2. Símbolos 1

Símbolos são elementos especiais utilizados para organizar conteúdo. São de três tipos: Gráficos, botões e clipes de filmes. Cada símbolo possui sua própria linha de tempo e camadas. Os símbolos são adicionados à biblioteca e inseridos no filme através das instâncias. Podemos ter um único elemento na biblioteca e este aparecer várias vezes (em várias instâncias) no filme. 3.2.1. Gráficos Os símbolos gráficos são utilizados para criar gráficos estáticos ou seqüências de animação. A linha de tempo dos gráficos são sincronizados com a linha de tempo do filme Flash. Isto quer dizer que a animação dentro de gráfico ocorre ao mesmo tempo e nos mesmos quadros do filme principal. Som e controles interativos não funcionarão. 3.2.2. Clipes de filme (Movie Clips) Este símbolo é o que possui mais recursos e pode ser utilizado em qualquer circunstância. Os clipes de filme possuem sua própria linha de tempo e camadas que são independentes das do filme principal. Todos os sons e scripts funcionam e estes objetos podem enviar comandos para fora dele e receber comandos do filme principal ou de outros clipes. 3.2.3. Botões Botões são utilizados para criar interatividade nos filmes. ActionScripts podem ser acrescentados para responder a cliques do mouse ou outros eventos. 3.2.4. Atividade 1 - Criando botões a) Crie um novo arquivo chamado p3_seunome.fla. b) No menu superior vá em: Insert> New Symbol. (Você pode criar um botão também selecionando os objetos do palco que você gostaria que fizessem parte do botão e escolhendo Insert> Convert to Symbol. Quando você fizer isto, tenha certeza que determinou o tipo de símbolo como Button na caixa de diálogo. Você também pode abrir a janela da biblioteca e usar o menu pop-up no topo e escolher New Symbol.) c) Preencha a caixa de diálogo conforme abaixo: d) Agora a linha do tempo dos botões é exibida. Ela mostra quatro frames pré-definidos: Up, Down, Over e Hit. Você pode acrescentar mais, porém somente as quatro primeiras são usadas. 2

Up (cima) a imagem do botão que é mostrada normalmente. Over (sobre) a imagem do botão que é mostrada quando o usuário move o cursor para cima dele. Down (baixo) a imagem do botão que é mostrada quando o usuário pressiona o botão mas ainda não o solta. Hit (toque) a área usada para determinar a área do botão. Usada para determinar quando o cursor está sobre o botão ou quando o botão é clicado. e) Crie um layer para a base do botão e outro para o texto. Como base, faça um retângulo com as bordas arredondadas. f) Use o painel Align (Alinhamento) para centralizar os objetos. Clique no retângulo e em seguida, no painel Align em to stage e no ícone de ao topo e centralizado. g) No frame Over clique no quadro em branco e vá em Insert> Timeline> Keyframe. Se preferir, clique no lado direito do mouse e selecione Insert Keyframe. h) Repita o processo para os outros quadros. Um à um, vá modificando as cores conforme seu gosto. i) Clique em Scene1 no topo para voltar ao palco de edição. Arraste o botão da biblioteca para área central. Teste o filme e salve o arquivo. Depois que você fez um botão, você pode dar um clique duplo nele no palco para editá-lo enquanto você ainda o vê no contexto do palco. Se preferir editá-lo separadamente, dê um clique duplo em seu nome na biblioteca. 3.3. Criando Scenes (Cenas) As cenas são utilizadas para organizar animações e apresentações por partes. Um filme Flash pode ter, por exemplo, a primeira parte de carregamento, depois uma introdução, e por fim o conteúdo. Cada uma destas partes podem ser colocadas em uma cena separada, com uma linha de tempo e camadas independentes. Ao rodar o filme as cenas são apresentadas na seqüência que foram criadas. Você poderá também utilizar ActionScripts para pular para qualquer quadro de qualquer cena, fazendo assim uma apresentação não linear. 3

a) Nesta aula usaremos as cenas para organizar as atividades diferentes. b) No arquivo anterior, abra o painel Scenes, clique no sinal de + para criar nova cena. Chame-a de Atividade2. c) Dê um clique duplo em Scene 1 e renomeie-a de Atividade1 d) Salve o arquivo. 3.4. Atividade 2 - Interpolação (Motion tween) Até aqui ficamos só na animação quadro a quadro. Vamos ver agora como funciona o curso do Flash para gerar animação à partir de alguns poucos quadros-chave a chamada interpolação (motion tween). a) No painel Scene, clique em Atividade2 para ir para segunda cena. b) Com a ferramenta oval, desenhe um círculo. Escolha uma cor de preenchimento. Depois arraste o círculo para o canto superior esquerdo da tela. c) Clique com o botão direito no frame 30 da Timeline e escolha a opção Insert Keyframe. d) Isso vai adicionar uma série de novos quadros na sua linha do tempo. Note que, ao final, no quadro 30 você terá uma réplica do primeiro quadro. No frame 30, arraste o círculo para o canto inferior direito da tela. e) Para finalizar, basta clicar em qualquer quadro entre o 1 e o 30, com o botão direito do mouse e selecionar a opção Create Motion Tween. Para testar a animação, pressione a tecla Enter e ela será exibida na própria área de trabalho. 3.5. Atividade 3 - Guia de movimento (Motion guide) No Flash você conta com um recurso bem interessante para direcionar o movimento dos objetos. Trata-se da guia de movimento (motion guide). Com esse recurso, você pode traçar uma linha qualquer, um zigue-zague, uma espiral, etc. e fazer o objeto se mover ao longo dela. a) Crie uma nova cena no arquivo chamada Atividade3. b) Primeiro devemos criar o objeto que será movimentado, algo como o carrinho abaixo ou algum outro carro visto de perfil. 4

c) Agora, vamos transformar a imagem criada em um símbolo. Selecione a imagem, clique no menu Modify > Convert to Symbol. d) A tela seguinte vai nos dar três opções: movie clip, button e graphic. Selecione movie clip. Dê um nome ao objeto. e) No Timeline, mude o nome da camada para carro. f) Agora que o objeto está pronto, vamos criar a guia de movimento. Clique na camada em que está o seu símbolo, em seguida, no menu em Insert > Timeline> Motion Guide. Se preferir, clique com o botão direito na camada em que está o seu símbolo e selecione a opção Add Motion Guide. g) A guia de movimento vai aparecer exatamente acima da guia normal. Note que as duas estão ligadas, diferente do guide layer, em que uma das camadas é independente. h) Na camada carro, crie uma interpolação simples de movimento (Motion tween) até a 30 a. frame. i) Agora na camada guia, insira quadros até o 30 a frame. j) Agora com a ferramenta Lápis, vamos desenhar uma linha sinuosa na guia de movimento. Esta linha será o percurso que o nosso carro deverá seguir. k) Para criar movimento, selecione o primeiro frame e arraste a imagem até a ponta da linha. Ela vai grudar automaticamente. Faça o mesmo com o frame final. l) Sua animação está pronta par rodar. Clique Enter para testar. Salve seu arquivo. 3.6. Atividade 4 - Rotacionando 5

Estranho o carrinho andar e o pneu não rodar, né? Vamos agora fazer a roda girar enquanto ele anda. Vamos trabalhar na mesma cena. a) Na biblioteca, clique no gráfico do carro para abri-lo. b) Selecione a roda da frente do carro e no menu, vá em Modify> Convert to Symbol. Selecione a opção de graphic e dê o nome de roda1. c) Faça o mesmo para a roda traseira do carro e nomeie-a roda2. d) Insira mais duas camadas no movie clip, uma para cada roda. Selecione a roda da frente, recorte e cole na outra camada chamada roda1. Faça o mesmo para roda traseira. e) Insira frames até o quadro 30 em todas as camadas. f) Nas camadas das rodas, clique em qualquer lugar entre 1 e 30 Insert> Timeline> Motion Tween. Vá no frame 30 e insira um keyframe neste ponto, de maneira que o frame inicial e o frame final sejam idênticos. g) Clique em qualquer quadro entre 1 e 30 e selecione no Inspetor de Propriedades a rotação no sentido do relógio. (Rotation: CW clock wise). Deixe 1 times para o numero de voltas que desejamos dar. h) Clique Enter e veja se as rodas se movem conforme você deseja. Caso algum problema surja, abra o gráfico das rodas e centralize o pneu usando o painel Align. i) Salve o arquivo e faça uma cópia para no diretório escolhido pelo professor para correção. 6