ANIMANDO NO FLASH. Professor Luciano Rocha

Transcrição

1 ANIMANDO NO FLASH Professor Luciano Rocha

2 Conhecendo a Linha do Tempo Localizada na parte superior da interface; Composto pelo subpainelde Camadas e pela linha do tempo de cada camada; É utilizado não somente para construção de animações mas para estruturação de projetos.

3 Compreendendo o uso dos frames Uma animação corresponde a uma seqüência de quadros dispostos lado a lado, com leves modificações entre um e outro e que exibidos ao longo de um período de tempo, geram mudanças percebidas como movimentos pelos olhos do espectador.

4 IMPORTANTE Tenha como base que uma animação não corresponde a algo se movendo, mas sim à passagem de tempo e a modificação de algo durante essa passagem.

5 O funcionamento da timeline A linha do tempo (timeline) é composta de quadros (frames). Cada frame indica uma posição ou instante de animação. Ao criar um documento, você verá apenas uma timeline, mas é possível ter várias, uma para cada camada do filme. Cada camada trabalha independentemente com sua própria linha do tempo.

6 Os frames No Flash existem quatro tipos de frames: Keyframe(quadro-chave) Frame Comum (quadro) BlankKeyframe(quadro-chave em branco) Blank Frame (quadro em branco)

7 O quadro-chave (Keyframe) Pode ser identificado como um retângulo de cor cinza com uma bolinha preta. É utilizado para marcar aquele ponto da timelinecomo uma mudança na animação, princípio de alguma transição ou uma nova ação. Para adicionar um keyframesclique no ponto desejado, clicando com o botão direito sobre ele escolha a opção Insert Keyframe(F6). É necessário ter algum objeto no Palco.

8 O Quadro comum (frame) É utilizado para indicar que uma seqüência da animação é contínua e uniforme ou não foi alterada. É utilizado como seqüência de uma mudança de ação realizada a partir de um keyframe. Um frame contendo um objeto é exibido com uma coloração cinza. Uma seqüência de frames é uniforme e não apresenta divisões entre frames. Para adicionar frames clique no último ponto onde queremos que a sequênciatermine, clicando com o botão direito sobre ele e escolhendo a opção Insert Frames (F5). É necessário ter algum objeto no Palco.

9 O Quadro-chave em branco (Blankkeyframe) Corresponde a um keyframevazio, ou que ainda não recebeu objetos. Se criar um Keyframesem que haja algo desenhado ou colocado no palco, o keyframe aparecerá em branco. Ao criar um blankkeyframee desenhar algo no stage, no entanto, ele automaticamente se torna um keyframe. Crie facilmente quadros-chave em branco pressionando a tecla (F7), ou clique com o botão direito do mouse em um quadro vazio da timelinee escolha a opção InsertBlank Keyframe.

10 O Quadro em branco (BlankFrame) Nada mais é que um frame vazio. Ele só pode existir quando criamos um blankkeyframee dá sequênciaà linha de tempo com frames. Trata-se de um espaço pronto para a colocação de elementos. Use quadros em branco para prolongar o tempo de um filme, sabendo que nada será exibido quando os quadros forem reproduzidos. Utilize o atalho F5 a partir de um blankkeyframepara inserir quadros em branco em uma animação.

11 Controlando a execução A linha vermelha com um pequeno retângulo na região superior do painel timelinecorresponde ao registro da passagem de tempo da animação. A tecla ENTER inicia a execução do filme.

12 CONHECENDO OS SÍMBOLOS DO FLASH Professor Luciano Rocha

13 O Que são símbolos? Os elementos desenhados no Flash com as ferramentas de desenho correspondem a formas vetoriais (shapes). Esses desenhos não suportam determinados tipos de animação que o Flash possibilita realizar. Para torná-lo compatível com as aplicações, é necessário convertê-lo em símbolo.

14 Para que servem os símbolos Ao transformar um desenho ou objeto (imagem por exemplo) em um símbolo, aplicamos uma espécie de comportamento a esse objeto, indicando que agora ele deve receber ações determinadas e comportar-se de forma específica. Os símbolos criados ficam armazenados na biblioteca, e podem ser reutilizados diversas vezes.

15 Criando um símbolo Com qualquer ferramenta de desenho, crie uma forma qualquer no stage. Selecione a forma com a ferramenta Selection Tool. Pressione, então a tecla F8. A tela Convertto Symbol será aberta. Nessa tela, além de nomeá-lo, determinamos de que forma o objeto se comportará de agora em diante.

16 Tipos de símbolos Os objetos no Flash podem ser convertidos em três tipos de símbolos: Movieclip: Transforma o objeto em um clipe de filme. Clipes de filme podem receber animações e outras opções. Button: Transforma o objeto em um botão. Os botões permitem receber eventos de interação com o usuário e outras funções. Graphic: Converte o objeto em gráfico. Os gráficos são úteis para exportar o filme Flash para outras mídias (arquivos de vídeo para a TV)

17 Ponto de rotação de um símbolo Observe ao lado das opções de comportamento do símbolo que temos uma opção denominada Registration, na qual podemos definir o ponto de registro de um símbolo. Esse ponto serve para determinar o eixo de rotação do símbolo. O padrão é o canto superior esquerdo. A tela Convertto Symbol está localizada em: Modify> Convertto Symbol(F8)

18 Editando um símbolo Após convertermos um desenho em um símbolo, um retângulo com a borda azul contornará o desenho e as propriedades do símbolo aparecerão no painel inferior do Flash. Para se editar um símbolo, é necessário clicar duas vezes sobre o símbolo e então editá-lo. Observação: Note que na barra da timeline será exibido o nível hierárquico da edição do símbolo, pois como o flash permite que um símbolo contenha outros, é necessário que o usuário saiba qual desenho está editando.

19 CRIANDO ANIMAÇÕES COM O FLASH Professor Luciano Rocha

20 Animação simples (interpolação) O Flash possui uma opção especial que torna o trabalho de animar seqüências muito mais simples. A interpolação de movimento, ou TweeningMotion, possibilita que o usuário defina apenas os pontos inicial e final da animação, e o próprio Flash gera automaticamente os quadros intermediários, fazendo o objeto se mover entre esses dois pontos

21 A interpolação de movimentos é um exemplo de aplicação que só pode ser utilizada em símbolos. Caso você tente criar uma interpolação de movimento com um desenho (shape) o Flash automaticamente o converterá em um símbolo do tipo graphic. Vamos testar essa aplicação: Abra o arquivo cao_exercicio_tween.fla O cãozinho já se encontra convertido em símbolo na biblioteca (ctrl+ L)

22 Arraste o símbolo para o palco e posicione-o no canto esquerdo.

23 Queremos que o personagem deslize no skate até chegar à outra extremidade do stage. Para isso, definimos a posição inicial e final do cão e atribuímos a opção de interpolação para gerar as posições intermediárias. Selecione o frame 40 na timelinee pressione F6 para adicionar um keyframe. Perceba que o Flash automaticamente adiciona os quadros comuns (cinza) entre os dois keyframes.

24 Selecione o cão no stagee, com a tecla Shift pressionada arraste o cão até o canto direito do palco. Você definiu a posição final da animação.

25 Para criar o movimento do skate deslizando, selecione qualquer um dos frames intermediários (cinza) e no painel proprierties escolha a opção: Motionno menu drop-down Tween. Se preferir, clique com o botão direito do mouse em qualquer um dos quadros intermediários e escolha a opção Create Motion Tween

26 Observe a timelinee veja que os frames intermediários foram tingidos de roxo, e uma seta aparece em toda a extensão de quadros. Isso indica que o Flash completou a animação com os quadros intermediários

27 Dicas Para remover uma interpolação, clique com o botão direito do mouse em qualquer quadro intermediário na timelinee escolha a opção Remove Tween. Interpolações malsucedidas apresentam, em vez da seta contínua, um tracejado sobre os quadros intermediários. Qualquer tipo de símbolo pode realizar uma animação com interpolação de movimento.

28 Ferramentas de controle de interpolação O Flash disponibiliza algumas ferramentas opcionais para auxiliar a criação do movimento desejado. Essas ferramentas estão localizadas logo abaixo dos frames da timeline. Sendo elas: Center frame OnionSkin Onion Skin Outlines Edit Multiple Frames Modify Onion Markers

29 Essas opções adicionais auxiliam o usuário a posicionar melhor os símbolos no stage, bem como visualizar os quadros intermediários da interpolação de movimento para ajustar os keyframes. Outline Onion Skin Onion Skin Edit Multiple Frames