[Tutorial] Primeiros passos - Camadas e outras coisas

Não seja pão-duro com a criação de camadas. Elas não pesam no arquivo final e podem ajudar a separar elementos, o que vai ser útil para preservar sua sanidade mental. Além disso, se você quer animar símbolos separadamente, pode criar uma camada para cada símbolo.

Para fazer uma nova camada, selecione Insert e depois Layer. Dê um duplo clique na camada e dê a ela o nome de Círculo. Insira um Keyframe (F6) no frame número 3. Selecione a ferramenta Oval e então vá para o painel Stroke. Defina a largura para 4 pontos. Escolha uma uma cor diferente da que você usou para o triângulo - viva a diferença!- e escolha "none" no painel Fill, para nenhum preenchimento:

Agora desenhe um círculo de cerca de cinco centímetros de diâmetro no centro do Palco. Volte o filme para o primeiro frame e dê Enter. Você verá o círculo aparecer repentinamente no frame 3. O próximo passo será fazer com o que o círculo apareça suave e gradualmente.

Já que você vai trabalhar mais de um círculo, converta-o num símbolo (escolha Convert to Symbol no menu Insert ou pressione F8). Dê a esse símbolo o nome de Círculo. Insira um Keyframe (F6) no frame 10 da camada do Círculo. Lembre-se de que o conteúdo de qualquer novo Keyframe é herdado do anterior, até que você o altere manualmente, portanto só insira um Keyframe quando você quiser fazer uma modificação num símbolo ou objeto. Não apenas isso mantém a linha do tempo bem organizada, mas conserva o tamanho do arquivo no filme final.

Clique no símbolo Círculo no frame 3 da camada Círculo. Vá para o painel Effect e selecione Alpha no menu. No campo percentagem, escolha 0%. Depois que você der OK, o círculo só aprarecerá no keyframe 10. Ele ainda está lá no keyframe 3, mas um valor Alpha = 0 faz os símbolos ficarem invisíveis. Com o frame 3 ainda ativo, vá para o painel Frame e selecione Motion Tweening. Motion tweening? Mas não há nada em movimento! Parabéns, você acaba de descobrir uma esquisitice da interface do Flash. Como regra geral, você usa Motion tween para tudo que não seja shape morphing.

Repare o retângulo cinza mostrando o símbolo selecionado, mas invisível.

Para ver os resultados, volte o filme para o primeiro frame e dê Enter.

Aquele triângulo se movendo pelo palco é de fato uma coisa besta, mas você pode modificar um símbolo do jeito que quiser no palco e o símbolo original se manterá inalterado. Clique na camada Triângulo para torná-la ativa. Depois, clique no símbolo Triângulo no frame 6 (segundo Keyframe). No painel Transform, diminua a altura e a largura para 50%. Marque a caixa "Constrain" e você só precisará definir a altura. Edite o tweening para a transição a partir do frame 1. No painel Frame, selecione CW (clockwise, sentido horário) no menu Rotate e coloque 1 no campo Times. Agora passe seu filme de novo.

As animações em Flash não precisam se mover em linha reta. Podem ir em qualquer direção. Com a camada Triângulo ativa, escolha Insert e depois Motion Guide. Você vai ver que isso criou uma nova camada guia [guide layer] (com um ícone de loop). Clique no nome da camada guia para torná-la ativa, caso ainda não esteja. Escolha o frame 5, de forma a que você possa ver o triângulo do lado direito do palco. Selecione o lápis e o Smooth Modifier. Desenhe um loop começando no centro do triângulo, indo para baixo e para esquerda e novamente para cima, dentro do palco. Não está muito regular? Clique no caminho que você traçou (usando a ferramenta seta) e então clique no Smooth Modifier várias vezes, até conseguir o resultado desejado.

Então, aqui temos a camada do Triângulo e a camada de seu Motion Path. O ícone Pencil indica uma camada ativa para edição no Palco. Dê um clique com o botão direito do mouse (control-click, no Mac) para ver as opções de camada.

A seguir, arraste o triângulo até que ele se encaixe no início do caminho que você acaba de desenhar. Se houver dificuldades em fazer isso, verifique se a opção "Snap to Objects", no menu View, está assinalada. Adicione outro Keyframe ao Frame 20 na camada Triângulo e, com esse frame ativo, arraste o triângulo para o outro extremo da trajetória que você criou. Com o símbolo triângulo selecionado, escolha "tint", no painel Effect. Mude os outros parâmetros no painel até que o triângulo fique de uma nova cor que o agrade.

Defina a rotação para Clockwise duas vezes no tweeneng do triângulo. Passe o filme para ver o que criou. Se o triângulo não se mover ao longo do caminho, verifique se o centro do símbolo triângulo está fixado à trajetória nos Keyframes 1 e 20. Quando tudo estiver funcionando bem, clique no primeiro ponto à direita do nome da camada guia [Guide layer] (sob o olho) para ocultá-la. As camadas guia não aparecem no filme final, mas você pode querer ocultá-las enquanto edita outras camadas.

Mais sobre símbolos

Outra vantagem dos símbolos é que eles simplificam a edição. Se você tem um filme cheio de instâncias de um único símbolo, pode modificá-las todas de uma vez editando o símbolo. Eu costumo fazer um filme com símbolos rascunhados e depois voltar atrás para refiná-los quando o filme está pronto. Para editar um símbolo, clique duas vezes numa estância no Palco ou no painel Library.

Você pode parar por aqui ou criar mais e mais camadas e animar os mesmos símbolos Triângulo e Círculo até cansar, do jeito que quiser, sem muita alteração no tamanho do arquivo. Se você salvar o filme nesse ponto como um filme Shockwave, ele vai ter menos de 2 KB.

Experimente colocar mais camadas no seu filme e combinar ações tweening. Há muitas maneiras de duplicar os efeitos. Quando tiver dominado essa etapa, tente fazer um Shape tween. Dica: essa é a única exceção no uso dos símbolos. O shape tweening (ou shape morphing) funciona apenas com objetos não agrupados e que não sejam símbolos, ou seja, que existam diretamente no Palco e na Linha do Tempo.

Tente também usar texto como um objeto ou símbolo. É parecido com criar e editar qualquer outro objeto, mas você usa a ferramenta texto.

Aqui, colocamos outro triângulo na animação.

Se quiser testar seu trabalho, abra-o no Flash 5. Até aqui, falamos sobre a criação e animação de imagens no Flash. Isso é legal, mas na verdade é só o começo do que você pode fazer com o Flash. Depois vamos trabalhar com princípios básicos de interatividade no nosso filme e integrá-lo a uma página da Web.