[Tutorial] Primeiros passos - desenhando e animando

[helldanger1]

Vamos começar desenhando algo simples com o Flash. Primeiro assegure-se de que o item Work Area (sob o menu View) está assinalado. Assim você vai poder desenhar além da borda da área do filme.

Agora selecione a ferramenta Pencil. (Nota: todas as ferramentas são identificadas por ícones. Se você não compreende um determinado ícone, coloque seu cursor sobre ele por um segundo e uma identificação por escrito vai aparecer.) Na parte de baixo da palheta Toolbar, há quatro botões gráficos: os modificadores de ferramentas. São contextuais, portanto mudam de acordo com a ferramenta que você escolheu. O primeiro botão afeta as formas que você desenha com o lápis. Os outros alteram as cores, calibre da linha e tipo da linha.

Com a ferramenta pencil ainda em uso, selecione a opção Straighten. Se você é capaz de desenhar uma linha reta perfeita, pode dispensar essa ferramenta - e deve considerar a possibilidade de se candidatar ao Guinness. Os resto da humanidade vai precisar desse modificador para ajudar no desenho de três linhas que se conectam para formar um triângulo. Legal, hein?

Quem está acostumado a usar programas como o Illustrator ou o Freehand, já conhece a ferramenta pen, nova no Flash 5. Essa é outra maneira de desenhar formas no Flash

 

[helldanger1]

Existem duas ferramentas setas. São usadas para selecionar objetos e modificá-los. A seta vazada (ferramenta Subselection) seleciona ou modifica pontos num objeto. Uma forma selecionada com uma ferramenta seta pode ser diminuída ou aumentada [straighten or smooth] clicando-se num dos ícones abaixo de Options no panel de ferramentas. Você pode ainda escolher Optimize... sob o menu Modify. As ferramentas setas podem ser acessadas mesmo que outra ferramenta esteja selecionada, clicando o mouse junto com a tecla command (no Macintosh) ou control (no Windows).

Agora selecione o ícone Paint Bucket. Pegue sua cor favorita no modificador de ferramentas abaixo e clique em qualquer lugar dentro do triângulo. Está vendo o lindo triângulo colorido? Se o seu triângulo não ficar preenchido, é possível que haja uma falha num dos cantos. Tudo bem: selecione "Close Large Gaps" na seção Options no panel de ferramentas.

Dê um duplo clique num dos segmentos. Você acaba de selecionar o contorno completo do triângulo. Pressione a tecla Delete e o contorno vai desaparecer, deixando uma pura forma triangular.

Tente clicar seu mouse em qualquer ângulo do triângulo e arraste. Isso permite que você redimensione o objeto. Selecione a ferramenta Paintbrush e, usando a mesma cor do triângulo, pinte em torno dele. Agora, ao tentar selecionar o triângulo com a ferramenta seta, você vai ver que tudo se mesclou numa imagem única. Selecione a borracha e tente a mesma coisa. Para não fundir a pincelada ao triângulo, é preciso antes criar uma nova camada. Já vamos chegar lá.

Selecione Edit e Undo algumas vezes para voltar ao triângulo original. Lembre-se, o número de undos disponível é definido em Preferências.

Espere! Tem certeza de que essa é mesmo sua cor favorita? Mudar as cores não é problema. Com o triângulo selecionado, vá até o panel Mixer ou Swatches e escolha uma cor ou gradiente de preenchimento diferente. Você também pode usar a ferramenta de preenchimento de cor sob a área "Colors" no tool panel, ou simplesmente "derramar" outra cor na figura com a ferramenta Paintbucket. Agora salve seu filme. O próximo passo é fazer o triângulo se mover.

 

[helldanger1]

Olhe para a linha do tempo de seu filme. Dê um duplo clique no campo denominado Layer 1 e o renomeie "Triângulo". Para dar ao triângulo espaço para se mover, clique nele e arraste a forma inteira para o lado esquerdo do palco.

Clique no frame 20 para selecioná-lo e depois escolha Frame no menu Insert (F5). Você vai ver que suaves linhas de separação marcam os frames que você criou. O fundo deles é cinza, o que indica que há algo no palco para aquela série de frames, o triângulo que você criou. Delete o triângulo e veja como a linha do tempo muda. Agora tecle command-Z (control-Z no Windows) para desfazer a ação de deletar e trazer o triângulo de volta.

O Frame Indicator pode agora se mover entre esses 20 frames, mas nada muda na área do palco porque todos os frames, com exceção do primeiro, estão em branco. No Flash, um frame em branco "herda" tudo o que foi definido no Keyframe anterior a ele e você pode criar quantos frames em branco quiser sem afetar o tamanho do arquivo .fla.

Selecione o sexto frame. Escolha Insert e, em seguida, Keyframe (F6). A área do palco deve permanecer igual, mas outra divisão aparece na linha do tempo com outro nó sólido.

 

[helldanger1]

Dê Enter para ver o filme. Como os dois Keyframes são na verdade o mesmo, não acontece nada, a não ser o slider se movendo sobre a linha do tempo. Para fazer alguma coisa acontecer, clique no segundo Keyframe e então arraste o triângulo para outro lugar. Dê Enter novamente. O que você vê é animação: o triângulo pula de um lugar para o outro. Não é nenhuma maravilha que possa concorrer a algum prêmio, mas não se pode negar que é animação.

Para melhorar isso, é preciso criar um símbolo.

Símbolos são um conceito importante no Flash. Não somente fazem funcionar qualquer animação (com exceção de dar forma a um objeto [shape morphing]) como são responsáveis pelo pequeno tamanho dos arquivos .fla.

Vamos imaginar que precisamos de vários triângulos ao longo de todo o filme. Podemos multiplicar o triângulo original ou podemos transformá-lo num único e simples símbolo. Você poderá então modificar seu tamanho, distorcê-lo, mudar sua cor ou transparência e colocar instâncias desse símbolo onde quiser e quantas vezes quiser. O símbolo original vai ocupar apenas um lugar na Biblioteca, o que economizará memória.

Todo símbolo é armazenado na Biblioteca. Escolha Window e, em seguida, Library para acessar a biblioteca desse filme. Nesse momento, ela está vazia. Clique no primeiro frame da linha do tempo e selecione o triângulo que você desenhou. Escolha Insert, depois Convert to Symbol. Como explicamos, isso vai transformar o triângulo num símbolo. Quando a caixa de diálogo aparecer, dê um nome ao novo símbolo Triângulo e selecione Graphic como seu Behavior (Comportamento). Você pode vê-lo agora na palheta Biblioteca, o que significa que está disponível para ser colocado em qualquer ponto do seu filme, quantas vezes você quiser.

 

[helldanger1]

Clique no sexto frame ou segundo Keyframe. O triângulo que você fez antes de criar o símbolo deve estar lá até agora. Delete-o e selecione o triângulo na palheta da Biblioteca. Arraste o preview do símbolo para a área do palco, para um lugar próximo ao do objeto que você acaba de deletar. Agora selecione qualquer frame entre os dois Keyframes. Olhe para o panel Frame. Se não pode vê-lo, selecione Window / Panels / Frame uma ou duas vezes, até que ele venha para a frente. Em tweening, selecione Motion. Deixe todo o resto como estava e clique OK. Agora você vai ver uma seta na linha do tempo, indicando o tweening.

 

[helldanger1]

Há algum tempo conheci uma moça que trabalhava num estúdio de animação, na função de artista "in be-Tween". Seu supervisor lhe dava dois desenhos, ou keyframes, e ela devia desenhar um determinado número de frames "be-Tween" (entre), para completar a transição. Com o Flash, você tem seu próprio artista in-beTween.

Dê Enter e deleite-se com o ganho de qualidade de sua animação. E vai ficar ainda melhor. Como designers de elite, todos nós sabemos que existem mais coisas além do Flash. Felizmente, você pode importar imagens de outros programas vetoriais, como o Illustrator e o Freehand. Para isso, selecione Import sob o menu File. É claro que a importação funciona melhor com o Freehand, também produto da Macromedia. Na verdade, o Freehand 9 permite a criação de animações em Flash. O Fireworks pode criar arquivos .swf editáveis, passíveis de importação pelo Flash, ou ser utilizado para criar imagens bitmap estáticas. O Flash 5 aceita muitos formatos comuns de bitmap, além dos velhos GIFs e JPEGs. Infelizmente, o Flash não importa imagens feitas no Photoshop ou no ImageReady.

Se você precisa importar um bitmap para o Flash, use o comando File/Import do menu ou copie a imagem do arquivo de origem (por exemplo, um documento aberto no Photoshop) e cole-a na área do palco. No Flash 5, você pode mudar as propriedades da imagem (Options/Properties na palheta da Biblioteca), de bitmap (single bitmap image) para um arquivo comprimido como GIF, PNG ou JPEG.