Dê um flash no seu site

Criar animações com Flash é como dirigir um filme. Independentemente dos recursos que serão necessários, o usuário precisa - antes de mais nada - saber o que quer fazer. É preciso ter o "filme" pronto na cabeça para que ele vire realidade. Neste tutorial fizemos uma animação com uma brincadeira sobre o tema da matéria de capa, que é redes domésticas. A criação e a produção ficaram por conta do webdesigner Mathias Carvalho.

Antes de começar a produção do arquivo, é necessário preparar a animação, o texto e o som que serão mostrados. No nosso caso, o filme simula a instalação de uma rede doméstica, que acaba causando curto-circuito em todos os micros. Heh heh he... O curto causa uma explosão, que faz a janela do browser tremer. Para fazer nossa animação, utilizamos o Photoshop 6.0, da Adobe, e o Flash 5, da Macromedia.

Iniciando a criação
Para começar a produzir animação, clique na opção Modify do menu principal do Flash e em seguida escolha Movie. A janela Movie Property será aberta e nela será necessário definir o tamanho da tela e a cor de fundo. Aqui escolhemos um background azul com o logo da INFO e um tamanho de tela de 500 pixels de largura por 400 pixels de altura.

Criando as layers
Para criar o "filminho", serão usadas as layers, ou seja, algumas "camadas" de imagens, de texto ou de som, que são agrupadas numa linha de tempo que define a ordem de aparecimento dos arquivos. A primeira imagem a surgir na tela será a planta de uma casa. Para inseri-la, clique na opção Insert do menu e depois em Layer. Em seguida, importe a imagem do diretório onde ela está. Para isso, vá no menu File, selecione Import e escolha o arquivo. Automaticamente a imagem será inserida.

Efeito Fade-in e Fade-out
O Flash oferece a possibilidade de mostrar e apagar uma imagem lentamente. Esse efeito, utilizado com grande freqüencia nas animações para enriquecer os filmes, é chamado de Fade-in/Fade-out. Para criá-lo, selecione a imagem que foi importada, entre no menu Insert e converta a imagem para Symbol (Convert to Symbol). Na Layer determine o frame inicial e o final de aparecimento, ou seja, o momento em que o arquivo começará a aparecer e o momento em que ele já estará totalmente aparente. No ponto final clique no menu Insert e depois em Key Frame (tecla de atalho F6). Depois selecione o frame inicial novamente e abra a janela Effects (menu Window/Panels/Effects). Em seguida escolha o efeito Alpha e mude o valor que aparece ao lado de 100% para 20%. Para finalizar o Fade-in, clique em Insert e Create Motion Tween.

A fim de criar um efeito Fade-out, ou seja, a imagem sumindo, selecione Objeto e vá em Insert/Convert to Symbol. Clique no último frame e então siga para o menu Insert/Key Frame (F6). Em seguida vá para a janela Effects novamente e selecione o efeito Alpha, diminuindo a porcentagem de 100% para 0%. Depois volte até o ponto anterior (onde a imagem está totalmente aparente) e clique em Insert/Create Motion Tween. Assim, está pronto o efeito Fade-in/Fade-out. Vale lembrar que esse efeito pode ser usado não só para imagens, mas também para textos.

Inserindo textos
Para adicionar textos numa animação Flash, adicione uma Layer a seu arquivo e clique na opção texto da barra de ferramentas, simbolizada pela letra A. Em seguida escreva o texto desejado e na janela Character selecione o tipo da fonte, o tamanho, a cor e o estilo. Para colocar outros textos, é só abrir uma nova Layer e repetir o processo.

Inserindo arquivos de som
Assim como nos arquivos de imagem e texto, os sons também são inseridos utilizando as Layers do Flash. Todos eles devem ser previamente preparados no formato MP3 ou WAV. Para inseri-los, escolha o Frame para iniciar o som e vá em Insert/Key Frame. Depois importe o arquivo com o comando File/Import. Abra a janela Library, em Window/Library, e arraste o ícone de som para a animação.

Fazendo a tela tremer
Para fazer a tela tremer, utilizamos o seguinte JavaScript:

function shake_x(n) {
if (self.moveBy) {
for (i = 10; i> 0; i-) {
for (j = n; j> 0; j-) {
self.moveBy(i,0);
self.moveBy(-i,0);
}
}
}
}

Este script deve ser inserido através de um editor HTML, dentro da área

da página em que a animação será inserida.

Mas não é só isso: para que o Flash rode esse JavaScript é preciso inserir mais um comando no arquivo. Para isso, abra mais uma Layer e insira o Key Frame no frame do momento em que a tela irá tremer. Depois selecione o Menu Window/Actions e dê um duplo clique em Get URL e no campo "URL" preencha com Javascript:shake_x(9).

Finalizando o seu arquivo Flash
O seu arquivo já está pronto, mas ainda está em formato .FLA. É preciso exportá-lo para um arquivo .SWF. Para isso, vá ao menu File e selecione Export Movie. Depois é só dar um nome e selecionar o diretório.

Confira o resultado final no endereço: www.uol.com.br/info/aberto/flash

Discuta outros assuntos relacionados a Flash no Fórum INFO: www.uol.com.br/ info/aberto/ flash