Tutorial Flash Professional 8

Tutorial Flash Professional 8

(Parte 3 de 4)

Onion Skin Quando se cria uma animação muitas vezes temos a necessidade de ficar indo e vindo através dos quadros para termos uma idéia melhor de como está ficando a animação, o que causa uma grande perca de tempo. mas para facilitar todo este processo o FLASH possui um processo chamado Onion Skin. Com ele podemos editar o quadro atual enquanto observamos o quadro que está logo abaixo dele ou até mesmo editar diversos quadros simultaneamente. O quadro atual aparece com as cores normais, enquanto os quadros anteriores aparecem com as cores apagadas, como se estivéssemos sendo vistos através de uma folha de papel vegetal. Somente o quadro atual pode ser modificado, os quadros apagados não podem ser alterados. Para utilizar o efeito basta clicar sobre o botão Papel de Transferência. Os botões são Papel de Transparência, Estruturas Seqüenciais em Papel de Transparência, Editar Vários Quadros e Modificar Marcadores de Transparência.

Caso precise mudar a trajetória de sua animação , clique no quadro a ser alterado e arraste seu símbolo de posição. Observe que ele cria um novo quadro chave no quadro onde você modificou a trajetória do símbolo.

Propriedades da barra de ferramentas do quadro

Ao selecionar um quadro chave, podemos definir suas propriedades pela barra de ferramentas. Em “Frame Label”, podemos definir um rótulo para nosso frame. Na opção Tween podemos definir como Motion (para animação de interpolação de movimento) ou Shape (para animação de interpolação de forma). A opção Ease permite suavizar a sua animação. Ao colocar em 100 (out) ele vai suavizar o final da animação. Ao colocar em -100 (in) ele vai acelerar o final da animação. A versão 8 do FLASH permite agora trabalhar a aceleração do filme através da opção Edit. Ele vai permitir que você altere a sua animação com curvas de Bezier.

A opção Rotate permite rotacionar seu símbolo na animação no sentido horário (CW) ou anti-horário (CCW). Ao escolher uma das formas de rotação será possível também definir a quantidade de voltas . A opção “Orient to Path” é utilizada quando se utiliza animação por guias , veremos esse tipo de animação mais adiante. A terceira coluna será utilizada para aplicação de áudio em nosso filme.

Camadas Ao iniciarmos um filme do FLASH, existe apenas uma camada e um único quadro, Para melhor administrarmos um filme é necessário que se crie dentro de um filme várias camadas. Ao criarmos camadas para uso em nosso filme a camada superior sempre será a que sobreporá às demais. Para criarmos mais camadas basta apenas clicar sobre o botão em formato do sinal de mais, ou através do menu Insert. Para modificar o nome de uma camada, basta apenas dar um duplo clique sobre o nome da camada e digitar o novo nome.

Camadas Guia Um dos grandes atrativos da animação com Interpolação é possibilidade de criar caminhos para a animação do objeto este processo é chamado Linha Guia. Para especificar este caminho existem dois cuidados importantes, quando você cria um símbolo você pode observar que na parte central do símbolo aparece um sinal de mais (+) este sinal deve coincidir com a linha guia. O segundo cuidado é que a linha deverá ser criada na camada da linha guia para não ocorrer defeitos na animação. Vamos criar uma animação que fará o desenho de uma bola "quicando" no filme. Primeiro, crie um símbolo no formato de uma circunferência e crie uma interpolação até o quadro 40.

Clique no botão Adicionar Camada Guia ou clique no Menu Insert Motion Guide, depois clique no primeiro quadro da camada guia (observe que ela mostra um arco) e com a ferramenta lápis faça retas conforme abaixo.

Um cuidado é sempre certificar-se que a linha guia foi desenhada na camada guia, pois é comum desenhar a linha na camada guiada. Posicione a bola com centro em cima de sua linha, arraste-a no quadro 40 no final de suas linhas e teste o seu filme. Para dar um pouco mais de realismo ao seu movimento envergue as linhas. A linha guia não aparece em seu filme.

Podemos fazer com que dois ou mais objetos sigam as linhas guias e podemos também alterar o ponto central de nosso símbolo. Basta dar um duplo clique sobre o mesmo e mudar o símbolo de posição em relação ao ponto central. Dois Objetos na mesma Guia

Podemos fazer com dois objetos sigam a mesma guia, podemos até fazer com que dois objetos sigam a mesma guia, alterando o seu centro ou a sua posição na camada. Vamos fazer com que um objeto circulo um texto, simulando uma volta passando pela frente do objeto e depois por trás do mesmo objeto. Primeiro crie o seu texto como exemplo na apostila criamos um texto cromado. Primeiro digite o seu texto (com letra forte e grande). Duplique o seu texto e na cópia coloque cor cinza claro (será à sombra de nosso texto). No texto original desmembre o texto, selecione a ferramenta linha, escolha uma cor de linha branca e divido o seu texto ao meio no sentido horizontal. Selecione a parte superior de seu texto e pinte com um gradiente linear de cima para baixo (Somente na parte selecionada). No exemplo usei de azul escuro para azul claro. Selecione a parte de baixo e pinte de baixo para cima com outro gradiente linear, no exemplo usei de marrom para vermelho. Selecione a ferramenta apagador com a opção somente linhas e apague a linha que usamos para dividir o nosso objeto. Selecione todo o texto e agrupe-o (CTRL+G). Posicione a sombra abaixo de seu texto cromado , use as setas direcionais para posicioná-la melhor em seu texto, selecione ambos e converta-o em símbolo gráfico.

Crie um símbolo gráfico em formato de uma esfera com preenchimento gradiente radial e deixe-o armazenado na biblioteca de símbolos. Crie as seguintes camadas, Texto, Bola e uma camada guia acima da bola. a camada da guia faça uma arco oval em volta de seu texto conforme a figura.

Na camada da bola arraste o símbolo da bola para a sua camada e posicione o símbolo junta linha guia, conforme já esta na figura acima. Na camada bola crie quadros chaves nos quadros 10,20,25,35,45 e nas camadas texto e guia somente no quadro 45. Crie as interpolações de movimento entre os quadros na camada bola. No quadro 10 posicione a bola um pouco acima na linha guia e duplique o seu tamanho.

Nos quadro chaves seguintes posicione a sua circunferência conforme figura abaixo, No quadro 35 ao contrário do que foi feito no quadro 10, diminua a sua bola para a metade de seu tamanho.

O próximo passo é fazer com que a bola na volta passe por trás de seu texto, então cria uma nova camada chamada bola2 abaixo da camada texto.

Após ter criado a nova camada é necessário fazer com que a camada texto e a nova camada também fiquem guiadas, Clique sobre cada uma delas com o botão direito e chame a opção propriedades, depois marque a opção guiada, este processo deve ser feito para as duas camadas. Na camada bola selecione dos quadro 25 ao 45 (se for necessário comece pelo final da camada bola, pegando um quadro vazio). Copie estes quadros (Botão direito , copiar quadros). Clique no quadro 25 da camada bola 2 e cole os quadros (botão direito colar quadros). Na camada bola 2 se ficaram quadros a mais após o 45. selecione-os e apague-os, Na camada bola apague os quadros 26 ao 45. Teste o seu filme e observe que após o quadro 25 a bola vai passar atrás do texto.

Máscaras Criar máscaras é uma maneira simples de revelar seletivamente partes da camada acima ou abaixo da cena. Isso requer marcar uma camada como camada de máscara e as camadas abaixo como camadas mascaradas. Para criar a sua máscara desenhe ou importe algum objeto para seu palco. Crie uma nova camada e desenhe o objeto que vai mascarar o objeto da camada de baixo. Na camada de cima clique com o botão direito do mouse e escolha “MASK”.

Observe que ele deixa visível somente onde os objetos se interceptam. Veja abaixo a área de edição natural e depois com a máscara aplicada.

Ao aplicar a máscara as suas camadas são bloqueadas e a camada de baixo faz um recuo.

Essa camada recuada, é chamada de camada Mascarada (MASKED).

Interpolação de Forma A interpolação de forma é uma técnica usada nos efeitos de morfismo que podem ser feitos usando-se transformações de instâncias, como rotação, redimensionamento ou distorção. Preenchimento, contorno, gradientes e alfa são todos atributos que podem ser aplicados na Interpolação de forma. Como exemplo básico inicial, crie um retângulo no palco de seu filme, depois crie um quadro chave no quadro 12 e apague o retângulo e desenhe uma circunferência. Clique no quadro 1 de sua linha do tempo. Na caixa de propriedades abaixo da tela, no campo interpolação onde está “none” escolha “SHAPE”, observe que na linha do tempo ao invés de aparecer uma cor lilás aparece uma core verdeclaro, isso identifica uma interpolação de forma.

A interpolação de forma ao contrário da Interpolação de movimento, os objetos não devem ser convertidos em símbolos. Imagens vetoriais importadas como, por exemplo, clip-arts em wmf, devem ser desmembrados e imagens bitmaps, devem ser traçadas.

Trabalhando com imagens importadas Inicialmente vamos importar duas imagens em wmf (por exemplo, podemos utilizar clip-arts do MS Office se você o tiver instalado em seu computador).

No exemplo em questão vamos transformar um símbolo no formato de

interrogação em uma lâmpada, este exemplo poderia ser usado em um banner. Coloque a interrogação no quadro 1 e desmembre-a (CTRL+B), crie o quadro chave no quadro 40 e insira a lâmpada, redimensione-a para que fique com as mesmas dimensões da interrogação e desmembre-a também, apague a interrogação deste quadro e crie a interpolação de forma. Para podermos trabalhar como será feita a forma de nossos objetos podemos acrescentar referências entre as formas. Clique no menu Modify, Shape, Add Shape Hint, Vai aparecer em ambas às imagens uma bolinha vermelha com a letra “a”, estas são as referências, você pode arrastá-las para qualquer posição dentro de seu desenho e isto fará com que a sua forma mude a trajetória durante a modificação. Pode-se acrescentar quantas referências de forma forem necessárias. entre um objeto e outro. Uma referência de forma é somente para dois objetos, se, por exemplo, você tem um objeto que se transforma em outro e depois este segundo transforma-se em um terceiro, a referência de forma colocada no primeiro, serve somente para o primeiro e o segundo, para o terceiro é necessário acrescentar do segundo para o terceiro. Quando você pretende aplicar referência de forma em bitmaps, é aconselhável programas externos ao flash como, por exemplo, o Winmorph que permite fazer a mudança de forma entre duas fotos e exportá-la como swf. Mas o próprio flash possui uma possibilidade de se trabalhar com formas, que é a possibilidade de se traçar o bitmap. Após inserir a imagem, Menu Modify, Bitmap, Trace Bitmap.

Se a sua imagem for, por exemplo, uma caricatura, você ainda conseguirá bons resultados, mas se for uma fotografia, o resultado poderá ser desastroso.

BOTÕES Na verdade, os botões são clipes de filme interativos compostos por quatro quadros. Quando você seleciona o comportamento de botão para um símbolo, o Flash cria uma Linha de Tempo com quatro quadros. Os primeiros três exibem os três estados possíveis do botão, enquanto o quarto defina sua área ativa. Na realidade, a Linha de Tempo não é reproduzida, simplesmente reage ao movimento do ponteiro às ações, passando para o quadro apropriado. Para tornar um botão interativo em um filme, coloque uma instância do símbolo do botão no Palco e atribua ações à instância. Você pode adicionar ações aos botões diretamente no símbolo, ou na linha do tempo , sendo que nesse caso é necessário dar um nome de instância ao símbolo de botão. Cada quadro na Linha de Tempo de um símbolo de botão tem uma função específica:

• O primeiro quadro é o estado UP (Para cima), representa o botão que será visível ao abrir o filme do flash. O segundo quadro é o estado OVER (Sobre), representa a aparência do botão quando o ponteiro esta sobre ele. • O terceiro quadro é o estado DOWN (Para baixo), que representa a aparência do botão ao ser clicado.

• O quarto quadro é o estado HIT (Área), que defina a área que responderá ao clique com o mouse. Essa área é invisível no filme. Ao transformar um texto em botão essa área devera sempre ser preenchida com um objeto como por exemplo um retângulo cobrindo o texto para que todo o texto fique clicável.

CLIPES DE FILME Clipes de Filme mais conhecidos como Movie Clips ou somente MC são pequenos trechos de animação que funcionam independentes da linha do tempo do filme principal. Podem conter sons, controles interativos, instâncias de outros MCS. Podem ser controlados através de botões, por ações de quadros, ou por outros MCS, podem ainda ser utilizados na criação de botões animados. Uma das grandes vantagens dos MCS é você pode editá-los separadamente do filme principal, facilitando a organização da animação, além de que o MC é carregado por completo no filme. Clique no Menu Insert e escolha New Symbol e escolha Movie Clip, dê um nome para ele e depois clique em OK. Observe que a área do filme não possui inicio e fim e no centro do MC aparece o ponto de registro, é importante sempre se basear neste ponto, . Crie um tipo de animação ao seu critério. Salve o filme e volte à cena principal. Chame a biblioteca de símbolos CTRL+L , observe que o símbolo do MC possui na sua visualização a opção de botão “play” ou seja, você pode visualizar a animação mesmo antes de inserir o MC. Vamos criar uma simulação de pingos d’água em nosso filme, comece um novo filme e atribua a ele um fundo de cor azul. Depois clique no menu Inserir, novo Símbolo, Clipe de filme, no centro de seu clipe de filme desenhe uma circunferência em uma cor escura de contorno com tamanho pequeno, sem preenchimento, converta esta circunferência em símbolo gráfico. Crie uma quadro chave no quadro 20 e aumente o seu tamanho em +- 5 vezes e aplique um alfa de 0%. Crie mais quatro camadas. Selecione todos os quadros da camada 1 e copie-

os (Botão direito, copiar quadros) Clique no quadro 5 da camada 2 e cole os quadros. Clique no quadro 10 da camada 3 e cole os quadros e siga assim até a última camada.

SONS No Flash, é possível utilizar os sons de várias maneiras. Você pode criar sons reproduzidos continuamente, independentemente da Linha de Tempo, ou pode sincronizar a animação com uma trilha sonora. Você pode anexar sons a botões para torná-los mais interativos e fazê-los aumentar e diminuir para obter uma trilha sonora apurada. É possível usar sons em bibliotecas compartilhadas para vincular um som de uma biblioteca a vários filmes. Também é possível usar sons em objetos de som para controlar sua reprodução com o ActionScript. O Flash armazena os sons na Biblioteca juntamente com os bitmaps e símbolos. Como nos símbolos, basta uma cópia de um arquivo de som para utilizá-lo de várias maneiras no filme.

Para adicionar o som ao seu filme após importar ele para dentro do FLASH, arraste ele para o quadro onde ele deverá ser iniciado.

Ao adicionar um som a sua linha do tempo, podemos controlar a sua execução pela barra de propriedades. Clique no quadro onde foi inserido o áudio.

Observe que ele mostrará o arquivo de áudio que está sendo carregado, caso tenha mais de um arquivo de áudio em sua biblioteca você poderá alterar o arquivo por essa opção. Podemos também aplicar efeitos em nosso som • A opção None não aplica quaisquer efeitos ao arquivo de som. Escolha essa opção para remover os efeitos aplicados anteriormente. • A opção Left Channel/Right Channel reproduz o som somente no canal esquerdo ou direito. • A opção Fade Left to Right/Fade Right to Left desloca o som do canal esquerdo para o direito e do direito para o esquerdo. • A opção Fade-in aumenta gradualmente a amplitude de um som pela sua duração. • A opção Fade-out diminui gradualmente a amplitude de um som pela sua duração. • A opção Custom permite que você crie seus próprios pontos de entrada e de saída do som usando Editar Envelope.

Escolha uma opção de sincronização no menu pop-up Sinc: • A opção Event sincroniza o som com a ocorrência de um evento. Um evento de som é reproduzido totalmente quando o respectivo quadro-chave inicial é exibido pela primeira vez, independentemente da Linha de Tempo, mesmo se o filme parar. Os sons de evento são misturados quando você reproduz o filme publicado.Um exemplo de evento de som é um som reproduzido quando um usuário clica em um botão. • A opção Start é idêntica à Event, exceto pelo fato de que, se o som já estiver em reprodução, será iniciada uma nova instância desse som. • A opção Stop silencia o som especificado. A opção Stream sincroniza o som , ao se importar um vídeo e precisar incluir a trilha sonora, deixar essa opção marcada.

Embora se torne fácil conseguir sons na Internet e em CDS multimídia hoje em dia, muitas vezes você precisará editar o seu próprio som, por exemplo, uma frase, a ser dita ao clicar sobre um botão, ou uma parte de uma música para introdução de seu site, é aconselhável para isso o uso de programas externos como, por exemplo, o SoundForge, que permite trabalhar com praticamente todos os formatos de sons e recortar músicas para o seu projeto, ele também possui efeitos diferenciados para o som, deixando para o Flash o som já pronto para ser utilizado.

VÍDEOS Entre os diversos formatos populares para vídeo digital que o Flash importa estão o QuickTime, MPEG, AVI e DV. Além de importar é possível adicionar interatividade, animações e figuras do Flash e em alguns casos é possível aplicar interpolações de movimento. Para importar um vídeo, Menu File Import, Import Vídeo e vai aparecer uma cx de diálogo, onde você deve selecionar o seu filme. Caso o seu filme venha a ser “puxado” de um servidor de Streaming Flash é necessário marcar a segunda opção e direcionar o caminho do servidor.

Na segunda etapa é necessário que você defina como você quer importar seu vídeo para o flash.

• Progressive download from a web Server: ele vai converter seu vídeo para o formato FLV e vai gerar uma tela de apresentação do vídeo. Ao

ser executado no navegador ele vai carregando seu filme e exibindo-o no navegador.

• Stream from Flash Vídeo Streaming Service: Fará a exibição de seu vídeo a partir de um servidor de Flash Media service. Requer que o seu provedor de hospedagem forneça esse serviço.

• Stream from Flash Communication Server: requer que o seu provedor de hospedagem forneça esse serviço.

• Embed vídeo in SWF and play in timeline: Ele importa o vídeo sem alteração e cria para ele os quadros na linha do tempo. Essa opção é recomendada quando o objetivo não é somente exibir o vídeo e sim “trabalhar“ com ele no filme.

Deixe marcado a primeira opção e clique em NEXT. Na terceira etapa, podemos definir a codificação do vídeo e ao clicar na opção Advanced é possível definir CODEC de compressão e até mesmo fazer cortes em seu filme (Crop and Trim)

Não vamos alterar nenhuma propriedade e clique em NEXT. Defina agora o SKIN (pele) que deseja para ser o player de seu filme.

Ao final clique em fisnish e ele fará a conversão do filme, esse processo poderá ser lento de acordo com o tamanho de seu filme e recursos de seu computador.

Ao terminar de importar o filme ele apresentará o skin do vídeo , esse skin faz parte do componente do Flash, FLVPlayback, você pode alterar as propriedades de execução de seu filme através da barra de propriedades, clicando na guia “Parameters”.

Para poder ver o seu filme, é necessário testar seu filme . Menu Control Test Movie (CTRL+ENTER).

O processo de importação “EMBED” (quarta opção dos modos de importação) que deve ser usado quando o vídeo necessitar interação (aconselhável importar em um Clipe de Filme), vai gerar uma linha do tempo para o filme. O cuidado nesse tipo de importação é com o tamanho do filme.

(Parte 3 de 4)

Comentários