terça-feira, 22 de dezembro de 2009

SACANDO QUAL É A DO FLASH!


Sei que vcs querem logo ver essa coisa funcionando, não é mesmo? Mas, pros totalmente leigos, pelo menos algumas informações super básicas são necessárias. Senão não dá!

Mas fique tranquilo, não pretendo, agora, ficar detalhando todas as ferramentas do FLASH, uma por uma, pois sei que no início a gente fica super ansioso é pra ver a máquina queimando lenha! E sem muita conversa, não é?  Então vamos lá!

ABRINDO O PROGRAMA:

Quando você aciona o programa, o que aparece de cara é essa imagem aí:







E se aparece é porque tem alguma função, certo? É que o programa já inicia nos perguntando que tipo de trabalho queremos fazer.

O que no momento nos interessa (por ser mais usado pela net) é CREATE NEW "Flash File (Action Script 2.0)" opção que está na lista do meio. Significa Criar um Novo "Arquivo do Flash (Roteiro de Ação 2.0)".  Clique ali que já poderemos começar a trabalhar:
         



Depois do clique, sua área de trabalho aparece e fica assim, correto?





É que o programa determina de cara um padrão (default), que pode ser mudado de acordo com as suas preferências. Vamos usar essa configuração mesma e depois, num outro trabalho, a gente vê como tudo aí pode ser mudado facilmente.

ENTENDENDO O BÁSICO:

O "feijão com arroz" do FLASH já aparece de cara nessa área de trabalho e com ele já podemos fazer muitas coisas. Se pensarmos de um modo bem simples, o FLASH "é" isso aí:






Lá em cima, como em 99,99% dos programas, está a barra de menus, e em cada menu, seus detalhes.

Logo abaixo, onde marquei o número "1", temos a "Linha de Tempo" (ou Timeline). No número "2" vemos a barra de ferramentas (Toolbar), no "3" o "Cenário" (Scene - que é a nossa área de trabalho) e no "4" alguns painéis, super úteis em diversas situações.

Veja ainda que lá na Linha do Tempo, o primeiro quadro (ou FRAME em inglês) tem uma cor acinzentada e está marcado com um pequeno círculo, também cinza.


É que o programa já se inicia te inserindo na CAMADA 01 (em inglês: LAYER 01), QUADRO-CHAVE 01 (em inglês KEYFRAME 01) e que este quadro-chave está vazio (lógico, ainda não desenhamos ou fizemos nada).

Ao lado do QUADRO-CHAVE, infinitos QUADROS que podemos, ou não, transformá-los em outros quadros-chaves.




Agora, experimente clicar no quadro 19 e teclar (a tecla!) "F5" (que significa "inserir um novo QUADRO"). O quadro 19 vai ficar cinza e nele aparecerá um retângulo também acinzentado.

Observe que aquele quadrado vermelho com uma linha vertical (o CURSOR) que estava sobre o quadro-chave 01 agora também se mudou para o quadro 19.

E se vc olhar para o quadro-chave 01 verá que ele agora ficou branco com um círculo também branco. Veja a figura abaixo:




Significa o quê?

Cinza =  "quadro ativo" (onde estou trabalhando!).
Branco = "quadro inativo" (onde não estou trabalhando!).

Vamos agora dar um clique no quadro-chave 01 (para "ativá-lo") e inserirmos ali alguma coisa (pode ser o que vc quiser: uma imagem, uma linha, um texto, etc, etc.). O mais simples seria uma linha ou uma figura básica.

Vou trabalhar com um RETÂNGULO! Se quiser me acompanhar, vá à barra de ferramentas e escolha a ferramenta "RETÂNGULO" (fácil, não?). Se vc é daqueles que preferem os atalhos, bastas então digitar a tecla "R" e automaticamente vc selecionará a ferramenta RETÂNGULO:




Certifique-se de que a ferramenta PREENCHIMENTO DE COR tem uma cor diferente de branco (se não, tecle sobre o quadradinho embaixo do Balde para ver as opções). Eu escolhi o vermelho!

Certifique-se também que a ferramenta CONTORNO está desmarcada (se não, tecle sobre o quadradinho embaixo do Lápis para ver as opções):






Depois arraste o mouse pelo "Cenário", desenhando um retângulo da forma que desejar. Veja o exemplo:





Feito isso, observe sua Linha do Tempo. Veja que aquele círculo branco do QUADRO-CHAVE 01 agora ficou preto, indicando que "há alguma coisa agora ali"!  No nosso caso, um retângulo vermelho.

Observe ainda que toda a extensão, do quadro 01 ao 19, ficou cinza (o quadro 19 mantém ainda o retângulo branco em seu interior, indicando-o como último quadro da sequência).

Agora, tecle ENTER e observe a Linha do Tempo. Veja que o cursor percorreu toda a extensão, entre o quadro 01 e o 19. Isso quer dizer que  "durante o tempo" que o cursor leva para percorrer do quadro 01 ao 19, nosso retângulo vermelho estará sempre visível na cena.

Se inserirmos uma nova figura no quadro 20, nosso retângulo desaparecerá e a nova figura tomará conta do cenário. Vamos entender isso melhor!

Clique uma vez no quadro 20 e tecle (a tecla!) "F7" (INSERT A BLANK KEYFRAME - Inserir um Quadro-chave VAZIO).

Veja que nosso retângulo vermelho sumiu do cenário. Clique em qualquer lugar entre o quadro 01 e o 20. Nosso retângulo voltou a aparecer.

Perceba que no quadro 20 aparece um círculo branco (VAZIO). Nosso quadro 20 é um QUADRO-CHAVE no qual ainda não inserimos nada:




Tecle ENTER e observe a Linha do Tempo e o Cenário. Tecle novamente para observar mais vezes.
Percebeu que enquanto o Cursor se move do quadro 01 ao 19,  lá no CENÁRIO o nosso retângulo permanece visível, mas quando o cursor chega no quadro 20, nosso retângulo desaparece? 

Acho que já deu prá entender também que o "CENÁRIO" e os quadros da LINHA DO TEMPO têm tudo a ver, não? Podemos dizer que são tudo uma coisa só, mas vistos de pontos de vista diferentes...

Mas algumas coisas bem mais interessantes podem acontecer, é claro...  Vamos lá! Pegue a ferramenta "SELEÇÃO" (Selection Tool - atalho: tecla "V") e depois, na Linha do Tempo, clique no quadro 01 para ativá-lo.





Depois, no Cenário, dê um clique sobre o retângulo vermelho, para selecioná-lo. Aperte CTRL+C (copiar). Ainda com a ferramenta Seleção, clique agora no quadro 20 e aperte SHIFT+CTRL+V (colar no lugar).

Observe que no CENÁRIO (e consequentemente no QUADRO-CHAVE 20) apareceu um retângulo idêntico e no mesmo lugar do QUADRO-CHAVE 01.

Agora, ainda com a ferramenta Seleção (ou com as teclas "SETAS" de seu teclado):



Mova este retângulo (o do quadro-chave 20) para algum outro lugar do Cenário (DICA: para mover os objetos do Cenário com velocidade, use SHIFT+SETAS).

Tecle ENTER e observe. Repita se necessário...

Veja agora que cada vez que o cursor anda, do quadro 01 ao 19, o quadrado permanece no lugar, mas quando chega no quadro 20, ele de repente, muda de lugar. Já é um princípio de movimento...

Mas vamos melhorá-lo!

Dê um clique, agora no quadro 40. Tecle "F7" (inserir um novo quadro-chave vazio). Mais ou menos o que observamos antes com a Linha do Tempo e com o cenário, volta a acontecer:




Para pouparmos tempo, aproveite e tecle novamente SHIFT+CTRL+V (colar no lugar) para inserirmos no quadro 40 um novo retângulo idêntico e no mesmo lugar do quadro 01.

Tecle ENTER e veja o que acontece...

Vamos melhorar mais nossa animação. Com a ferramenta Seleção, clique no quadro 01 e depois no retângulo vermelho do cenário. Tecle "F8" (CONVERTER EM UM SÍMBOLO). Vai aparecer uma caixa de diálogo como visto abaixo:





Dê "OK" e deixa que eu explico:

ISSO É MUITO IMPORTANTE! Prá darmos movimento a um objeto no FLASH, temos que "convertê-lo num símbolo" e do tipo "MOVIE CLIP" ("parte de um filme"). Como eu quero melhorar o movimento dos retângulos, esse é o jeito certo.

Faça o mesmo com os Quadros-chaves 20 e 40, ou seja, convêrta-os em MOVIE CLIPS também! LEMBRE-SE SEMPRE DE ATIVAR OS QUADRO E AS FIGURAS!

AGORA, ATENÇÃO! Volte à Linha do Tempo e clique com o lado DIREITO do mouse entre os quadros 01 e 20. No menu que aparece, clique em "CREATE A MOTION TWEEN" (para quem usa o FLASH CS3) e "CREATE CLASSIC TWEEN" (para quem usa o FLASH CS4).

Traduzindo: CREATE A MOTION TWEEN = CRIAR UM MOVIMENTO ENTRE (no caso, criar um movimento entre "os dois quadros-chaves"). Veja abaixo:





A Linha do Tempo agora ficou assim, correto?







Repita o mesmo processo entre os quadros 20 e 40.
Agora, experimente teclar ENTER... 

Por fim, para melhorar mais ainda, experimente teclar CTRL+ENTER e veja seu primeiro filme em FLASH prontinho...

Para salvar o FILME, vá em FILE (Arquivos) >> EXPORT (Exportar) >> EXPORT MOVIE (Exportar Filme) ou tecle CTRL+ALT+SHIFT+S juntas. Dê um nome e salve-o num local onde vc possa acessá-lo sem dificuldades.

Se quiser salvar o PROJETO, de modo que você possa continuar trabalhando nele de onde parou (afinal, há trabalhos que levamos dias para terminar). vá em FILE (Arquivos) >> SAVE (Salvar) e salve-o com um nome e num local onde vc possa acessá-lo também sem dificuldades.

Espero que tenham gostado! Dúvidas? Façam seus comentários, pois eles me servirão como guia para melhorar este e outros posts e ainda facilitar a vida de outros aprendizes...

OBRIGADO E ATÉ A PRÓXIMA!


Quem sou eu

Minha foto
Filósofo, amante das artes, em especial, do Desenho e da Pintura em todas as suas nuances e variações. Webdesigner e entusiasta das possibilidades de expressão que os programas de computação cada vez mais nos oferecem!

Seguidores