Tutorial Flash Professional 8

Tutorial Flash Professional 8

(Parte 2 de 4)

A ferramenta ao lado temos a ferramenta pincel que permite traços com de preenchimentos, na caixa de opções abre-se às possibilidades de preenchimento, tipos de pinceis e diâmetros de pinceis. As opções dessa ferramenta são:

• Paint Normal: Pinta o objeto por onde o pincel for passado;

• Paint Selection: Pinta somente o que está selecionado;

• Paint Inside: Permite pintar somente dentro.

Abaixo temos a ferramenta Tinteiro que permite pintar a cor de contorno dos objetos. Basta selecioná-la e aplicar a cor desejada diretamente na linha de contorno de seus objetos.

Ao lado dela temos a ferramenta Balde de Tinta que permite modificar a cor de preenchimento dos objetos O Flash possui para preenchimento as cores da paleta WEBSAFE e também alguns gradientes existentes. Na caixa de opções também podemos definir como deve ser aplicado o preenchimento, em todo o objeto , ou com lacunas. Quando se trabalha com preenchimentos é necessário que se chame à paleta Misturador de Cores, Nesta paleta podemos definir se o preenchimento será sólido, linear, radial ou bitmap. Podemos também atribuir a cor através de seu código RGB, ou hexadecimal, além de aplicar um canal Alpha.

Na paleta “Color” a opção padrão inicial é Solid onde podemos definir as cores de contorno e preenchimento pela escolha da cor, códigos RGB e Hexadecimal. A opção Alpha define o grau de transparência da cor. Na opção TYPE temos como padrão SOLID, ao clicar nessa opção podemos mudar para linear que aplicará ao objeto selecionado Ao escolher opção SOLID , será mostrado na opção COLOR a barra de cores gradiente.

Você pode observar que temos na opção gradiente duas alças de cores, para alterar a cor de qualquer uma das alças de gradiente, basta clicar sobre ela e escolher a cor desejada. Podemos acrescentar uma alça de gradiente a nossa paleta de cores basta clicar entre uma delas, ele vai criar as outras alças de cores.

Para retirar uma das alças basta apenas clicar sobre a alça, manter o mouse pressionado e arrastar para fora da linha.

Ao clicar na ferramenta “Gradient Transform Tool” , permite alterar a posição do gradiente dentro de nosso objeto. Ao selecionar o objeto com o gradiente e clicar na ferramenta ele vai mostrar uma alça quadrada e uma redonda em volta do gradiente.

A alça quadrada permite aproximar / afastar as cores gradientes, a alça em círculo permite rotacionar o gradiente. Podemos também escolher a opção RADIAL, ao escolher opção RADIAL

podemos aplicar as mesmas opções do gradiente LINEAR. Podemos também definir a opção de gradiente e preencher nosso objeto com o balde de tinta.

A ultima opção chama-se Bitmap, que permite com o conta-gotas capturar o bitmap. Caso não exista uma imagem dentro do Flash, ao escolher a opção Bitmap ele vai solicitar que se escolha a imagem para servir como preenchimento.

A ferramenta conta-gotas permite capturar a cor de um objeto e aplicar dentro de outro, por exemplo, se você importar um bitmap para dentro do flash e depois desejar aplicar este bitmap como preenchimento de um objeto clique sobre o bitmap com o conta gotas, a ferramenta modifica-se imediatamente para o balde de tinta e você pode preencher onde desejar.

A ferramenta ao lado o apagador funciona como uma borracha, o cuidado é como apagar é necessário utilizar as opções desta ferramenta , onde você poderá apagar somente contornos, somente preenchimentos. A torneira paga todo um preenchimento ou todo um traço. Para apagar todos os objetos existentes em sua área de Trabalho, basta dar um duplo clique sobre a ferramenta borracha.

Manipulando Objetos Ao desenhar no Flash, podemos manipular nossos objetos, tanto na forma, como contorno e preenchimentos. Ao desenharmos linhas, polígonos, retângulos e elipses, podemos alterar a sua forma facilmente com a ferramenta seta. Por exemplo, se clicarmos diretamente na linha a mesma será selecionada,

mas se aproximarmos o cursor da linha o mesmo se transformará em uma curva, ao pressionarmos o botão do mouse e arrastarmos transformaremos nossa linha em uma curva, o mesmo vale para todos os objetos. Em retângulos ao aproximarmos de suas extremidades ele também apresentará um vértice permitindo que se crie pontas. Ao manipular textos é necessário um processo um pouco mais detalhado, os textos não são criados como vetores, e para que se possam alterar as formas dos textos é necessário primeiro transformá-los em vetores. Após criar o seu texto, basta selecioná-lo com a ferramenta seta e desmembrá-lo (Menu Modificar, Desmembrar ou CTRL+B). A primeira vez que se desmembrar um texto ele vai quebrar em letras, retira o processo de desmembrar para ele se transformar em Vetor. O seu texto passou a ser um vetor então podemos acrescentar gradientes, e alterar a sua forma. Importante: Depois de convertido em vetor não é mais possível alterá-lo como texto.

No logotipo acima além de aplicarmos cores de preenchimento gradiente em um texto desmembrado, também utilizamos a opção de agrupar (Menu Modificar) e de Ordem, (Menu Modificar). Outra opção de manipulação muito importante é a manipulação de alinhamento de objetos (Menu Window, Align ou Menu Modify Align), pois quando iniciarmos o nosso trabalho com animações , existe um cuidado muito grande com posição de nossos objetos. A opção “To Stage” da paleta Align permite alinhar e / ou distribuir os elementos de acordo com o palco.

Trabalhando com objetos externos No Flash além de criar seus próprios objetos podemos também inserir novos objetos dentro de nossos filmes. O Flash importa quase todos os formatos gráficos, tendo como destaque o PNG (Melhor formato para arte no Flash, isso permite uma integração muito forte como Macromedia Fireworks), O PSD (Photoshop), Formatos de bitmaps (BMP, GIF, JPG, etc...) arquivos de áudio como WAV, MP3, AU, formato de vídeo AVI, MOV, MPEG, imagens vetoriais como criadas pelo Adobe Illustrator, Macromedia Freehand, AutoCAD, além de programas que permitem criar em SWF como Discreet Plasma, ToomBoom e Swift 3D. Ao importar um objeto o mesmo será colocado na biblioteca de símbolos do programa. Ao importa vetores e metaarquivos (WMF), você pode desmembrá-lo e tratá-lo como um objeto do Flash. Já arquivos Bitmaps será necessário tratá-los como bitmap, se for necessário convertê-los em vetores é necessário “Traçar o Bitmap”, ou seja, transformá-lo em vetor. A perca de qualidade na imagem infelizmente ocorrerá. Na próxima imagem temos um imagem Bitmap e depois de ser traçada. e ao lado temos um carro em WMF que é importado como objetos agrupados e depois de desmembrada.

SÍMBOLOS Para podermos trabalhar com animações no FLASH é necessário que quase todos os elementos sejam convertidos para símbolos, pois é através de símbolos que podemos definir qual o comportamento do símbolo:

Os três símbolos do FLASH são Gráficos , Botões e Clipes de Filme . Você pode criar o objeto e depois convertê-lo em Símbolo ou através do menu Insert Convert to Symbol criá-lo e depois adicionar ao filme. Ao criar um símbolo ele vai automaticamente para a Biblioteca de Símbolos. Para converter um objeto existente em símbolo basta apenas apertar a tecla de função F8.

Os tipos de Símbolos: Gráfico: Este é o tipo mais básico de símbolo, pois ele é praticamente estático,

embora possa receber ações para ele, é muito utilizado também dentro dos outros símbolos. Botão: Este símbolo pode receber valores diferentes para estado do botão, normal, ao rola sobre, pressionado e oculto, é muito utilizado para chamar ações. Clipe de Filme: Este tipo de símbolo permite que se crie um filme dentro do símbolo com a vantagem de que ele carrega todo o clipe de filme primeiro e mostra o mesmo no filme todo de uma vez.

Ao desenhar seu objeto e pressionar F8, (Menu , Modify Convert to Symbol) ele abre a tela acima, onde é necessário dar um nome ao símbolo (ele sempre trará um nome genérico , como symbol??), o nome é aconselhável manter uma nomenclatura que facilite a sua identificação. Por exemplo Gráficos colocar GRnome, botão BTnome, Clipe de Filme MCnome. No caso do clipe de filme usa-se MC (Movie Clip), é dessa forma que a comunidade de designers e programadores em Flash chama o Clipe de Filme. Abaixo do nome temos a escolha do tipo de símbolo. Ao lado do tipo de símbolo temos a posição de seu centro de Registro, ao padrão é no canto superior esquerdo, esse centro de registro é necessário, pois é a partir dele que seu objeto é carregado. Ao clicar na opção Advanced, abre-se as opções de exportação de nosso objeto para código. Usaremos esse recurso mais a frente. Mesmo depois de pronto podemos alterar as propriedades de nossos símbolos através da biblioteca (atalho CTRL+L ou Menu Window Library), ou mesmo ele estando dentro do filme principal, em ambos os casos basta apenas clicar sobre o símbolo com o botão direito do mouse e depois escolher editar para ambos os casos, e estando o símbolo no filme podemos editá-lo também no local e em uma nova janela.

Embora a função inicial do Clipe de Filme era conter animações para se evitar timelines extensas quando fosse necessário uma animação de repetição e gráficos para objetos estáticos, atualmente convencionou-se utilizar somente Clipes de Filme mesmo para objetos estáticos. A razão para essa mudança é pelo fato de que posso controlar meu Clipe de Filme através de programação (linguagem actionscript) e aplicação de filtros e mistura de camadas. Ao criar um símbolo, podemos manipulá-lo pela barra de propriedades.

Na barra de propriedades podemos definir a posição X e Y de nosso objeto, a sua largura (W) e altura (H), o comportamento do objeto. Onde está “Instance Name”, é um campo utilizado para dar nome de instância ao objeto, esse campo será utilizado em actionscript. A opção SWAP permite substituir o símbolo na área de edição por outro existente na biblioteca.

A opção Color permite modificar as propriedades de cor e transparência do símbolo. As opção são:

• Brightness Æ Brilho, o brilho natural do objeto é 0%, ao colocar em - 100% ele retira todo o brilho (preto) e 100% ele adiciona todo o brilho (100%).

• TintÆ Preenchimento, permite preencher o seu objeto com qualquer cor com grau de transparência.

• AlphaÆ Permite acrescentar transparência aos símbolos.

• Advanced Æ Permite trabalhar as cores RGBA do símbolo.

A opção Blend permite aplicar mistura de objetos. É necessário que cada objeto esteja em sua camada. Use Runtime Bitmap Caching, permite criar um bitmap de seu objeto em tempo de execução.

Filtros A versão 8 do Flash trouxe uma inovação esperada há muito tempo que são filtros para serem aplicados aos símbolos. Uma única observação, os filtros só podem ser aplicados a Clipes de Filme e Textos.

Para aplicar um filtro, selecione seu símbolo e clique no botão Add Filter . As opções são:

• Drop ShadowÆ Aplica uma sombra ao seu objeto.

A opção Blur permite trabalhar o sombreamento do símbolo, o cadeado fechado faz com que ao alterar-se uma das opções mudam-se as duas. Ao clicar no cadeado, o mesmo ficará aberto e assim será possível alterar o Blur de forma independente. A opção Strenght trabalha a dispersão da sombra. Podemos alterar a qualidade da sombra em “Quality”, podemos alterar a cor, o ângulo e a distância da sombra. A opção Knockout trabalha a máscara do símbolo. Inner Shadow aplica a sombra Interna e a opção Hide Object, oculta o símbolo deixando somente o filtro sendo mostrado.

• BlurÆ Permite desfocar seu símbolo, podemos alterar as propriedades de desfoque e qualidade do mesmo.

• GlowÆ Permite aplicar brilho ao seu símbolo.

• BevelÆ Através dessa opção podemos aplica chanfros e entalhes em nosso símbolo. Na opção Type, podemos definir ele como Inner, Outer e Full.

• Gradiente GlowÆ Permite aplicar um brilho gradiente aos símbolos.

• Gradiente Bevel Æ Permite aplicar Chanfros Gradiente aos símbolos.

• Adjust Color Æ Permite trabalhar os ajustes de cores do símbolos como

Brilho, Contraste,Saturação e Matiz (Hue). A terceira guia “Parameters”, será utilizada com componentes.

Animação Quadro a Quadro A animação quadro a quadro funciona de maneira semelhante a um desenho animado, ou seja, para cada movimento do objeto deverá ser colocado o mesmo dentro de quadro. Para entendermos melhor este processo crie uma circunferência na sua área de desenho. Observe que ao desenhar o objeto no filme do Flash , no primeiro quadro aparece uma bolinha preta , mostrando que no quadro existe um objeto. Para inserir uma instância deste mesmo objeto no próximo quadro, clique com o botão direito do mouse no próximo quadro e escolha Inserir Quadro Chave (tecla de atalho F6). Ele repete o mesmo símbolo. Modifique a cor de seu símbolo. Repita este processo até o quadro 12, alterando a cor de seu objeto a cada quadro. Isto fará com que sua animação possua 1 segundo. Para testar aperte as teclas CTRL+ENTER, isso testa o seu filme e gera um arquivo com a extensão SWF.

O arquivo de projeto do Flash possui a extensão FLA, ou seja, ao salvar seu arquivo ele será salvo com essa extensão. Para poder incluir seu arquivo em uma página HTML será necessário transformá-lo para o formato SWF, isso pode ser feito através do teste de seu filme (CTRL+ENTER). Caso você utilize o Dreamweaver ele possui um recurso de inserção do SWF na página que vai gerar todo o código necessário para a exibição do SWF. Podemos também gerar todo o HTML pelo próprio Flash através do recurso de publicação que veremos mais adiante.

Quando se trabalhar com animação quadro a quadro não se converte os objetos em símbolos.

Animação com Interpolação de Movimento A animação quadro a quadro é perfeita, pois você tem um total controle sobre o filme, mas ao mesmo tempo ela é demorada, pois muitas vezes sua animação terá 200 quadros ou mais então isso se tornaria demorado e com mais possibilidades de erro, embora em muitos filmes é necessário que as

animações sejam feitas quadro a quadro. Uma forma de se automatizar este processo é através da animação com Interpolação, ou seja, podemos definir a posição inicial e afinal de nosso objeto e depois podemos fazer a animação. Comece um novo filme e cria uma circunferência com preenchimento ao seu gosto e transforme-a em um símbolo. Crie um novo quadro no quadro 12. Para podermos criar a interpolação de movimento podemos clicar com o botão direito no quadro 1 e escolher “Create Motion Tween”, ou podemos utilizar a barra de propriedades, clique no inicio de sua animação na Timeline (no caso no quadro 1) e na barra de propriedades na opção Tween coloque “Motion”.

Observe na timeline que ele vai gerar uma seta indicando nossa animação e preenche os quadros com uma cor lilás. Ele também apresenta como quadros preenchidos somente o primeiro e o último quadro de sua animação. Clique no último quadro e mude seu símbolo de posição na área de desenho. Se você arrastar o cursor vermelho pela animação você poderá ver como está sua animação. Estando no primeiro quadro e pressionando ENTER ele também apresenta sua animação. Para ver a animação em looping pressione CTRL+ENTER. Para poder andar quadro a quadro de sua animação , você

pode pressionar as teclas com sinal de maior (>) e menor (<) no teclado.

(Parte 2 de 4)

Comentários