Vitrine animada
Crie uma galeria de
fotos atraente com a
tecnologia Flash
POR ANDRé CARDOZO E HENRIQUE LOURENçO
Quer dar um Upgrade no mostruário do seu site? Uma boa idéia é adicionar uma galeria com imagens de vários ângulos de cada produto e efeitos especiais. Este tutorial demonstrará como fazer isso com o Flash MX 2004 Pro em inglês — a versão mais usada no país. O exemplo pode ser baixado em www.info.abril.com.br/download/3630.shl.
1. Movie e camadas
Por meio do menu File > New > Flash Document, criamos um movie com fundo branco e tamanho de 550 por 400 pixels. Nele, acessamos Insert > Timeline > Layer, e criamos sete camadas: uma para o logotipo, uma para o menu, uma para a borda e quatro para os ângulos de visão do produto.
2. Logotipo
Importamos o logotipo para a sua camada, clicando em File > Import > Import to stage, e o alinhamos no alto e na horizontal usando o atalho Ctrl+K .
3. Menu
Nosso menu tem cor de fundo preta, diferente da cor de fundo do movie. Por essa razão, ele precisa ser criado como um símbolo. Para isso, acessamos o menu Insert > New Symbol, e escolhemos a opção “Graphic”. O passo seguinte é desenhar. Com a ferramenta de desenho retangular, clicamos na caixa Fill Color e escolhemos a cor preta. Depois, clicamos na caixa Round Rectangle Radius, e digitamos o número 15 para obter cantos arredondados. Voltamos para a tela principal e desenhamos o menu.
4. Botão
Vamos agora criar os botões do menu. Clicamos em Insert > New Symbol, e escolhemos a opção “Butto n”. Selecionamos a ferramenta de desenho retangular e a opção Round Rectangle Radius para obter cantos arredondados. Escolhemos as cores de fundo e borda por meio das caixas Stroke Color e Fill Color, desenhamos o botão e alinhamos. Para escrever o texto do botão, clicamos na ferramenta de texto, digitamos e, no painel Propriedades, escolhemos tipo, tamanho e cor da fonte. Novamente, usamos Ctrl+K para alinhar o texto.
5. Estados do botão
O próximo passo é definir como o botão vai reagir às ações do mouse. Quando selecionamos o botão, seus estados são mostrados na Linha do Tempo. Eles são quatro: Up, Over, Down e Hit. Para ativá-los, é necessário adicionar um keyframe a cada um. Para isso, clica-se no estado e acessa-se o menu Modify > Timeline > ConverT TO KEYFRAMES. O estado Up define a aparência-padrão do botão, montada no passo anterior. Clicamos então no estado Over e fazemos as alterações que serão exibidas quando o mouse estiver sobre o botão. Deixamos o estado Down inalterado. O estado Hit define a área de sensibilidade do botão. Selecionamos esse estado e apagamos o texto. Dessa forma, fazemos com que o botão inteiro reaja às ações do mouse, e não somente as letras do texto. O passo final é transformar o botão num grupo, selecionando todas as suas partes e usando o menu Modify > Group. Terminamos um botão. O procedimento para os outros é igual. Para evitar trabalho, podemos duplicar o botão criado e alterar apenas os textos.
Para isso, selecionamos o botão dentro do painel Library, clicamos com o botão direito e escolhemos a opção Duplicate.
6. Botões no menu
Agora que temos todos os botões prontos, precisamos jogá-los na área do menu. Retornamos ao gráfico do menu, clicando no ícone Edit Symbols. Selecionamos os botões no painel Library e os arrastamos até a área do menu. Depois, voltamos à cena principal do documento, clicando no botão Edit Scene. Selecionamos a camada do menu, depois escolhemos o gráfico do menu no painel Library e o arrastamos até a cena principal.
7. Borda
Já temos logotipo e menu com botões. O próximo passo é criar a borda das imagens. Inserimos um novo símbolo, e escolhemos a opção Graphic. Clicamos na ferramenta de desenho retangular e novamente usamos a opção Round Rectangle Radius para obter cantos arredondados. Traçamos então um retângulo de fundo branco e borda preta com 20 pixels a mais do que as dimensões da imagem. Voltamos à cena principal e selecionamos a camada da borda. No painel Library, escolhemos a borda e a arrastamos.
8. Imagens
Para importar as imagens, acessamos o menu File > Import > Import to Library. Depois de importadas, elas são exibidas no painel Library. Na Linha do Tempo, selecionamos a camada da imagem frontal e arrastamos a respectiva foto até a tela principal. Ainda na camada da imagem, devemos determinar a duração do efeito de transição entre as fotos. Clicamos no frame 20 e inserimos um keyframe usando o botão direito do mouse.
9. Máscara
Agora que já temos a imagem frontal posicionada, devemos adicionar o efeito de transição. Escolhemos a animação de um círculo que, partindo do centro da tela, se expande para revelar a foto. Para isso, precisamos criar uma camada de máscara acima da camada da imagem, por meio do menu Insert > Timeline > Layer. Na nova camada, clicamos no frame 1 e desenhamos um pequeno círculo branco no centro da foto. Esse é o ponto de partida do efeito. Clicamos então no frame 20 da mesma camada e inserimos um keyframe. Ainda nesse frame, usando a ferramenta Free Transform Tool, selecionamos o círculo e o expandimos para além dos limites da borda. Clicamos no frame 19 da camada da máscara e, na área de propriedades, marcamos a opção Shape na caixa Tween. Depois disso, clicamos com o botão direito sobre a camada da máscara e escolhemos a opção Mask.
Basta repetir os passos 8 e 9 para criar as animações dos outros ângulos. O único cuidado é começar a animação sempre no frame seguinte ao final do efeito anterior. Em nosso exemplo, a animação da visão frontal termina no frame 20. Portanto, devemos iniciar a animação da visão de trás no frame 21.
10. Efeitos
Por enquanto, os efeitos funcionam apenas como seqüência e não estão associados aos botões. Para ativá-los, o primeiro passo é “quebrar” a animação em quatro partes, uma para cada botão. Para isso, selecionamos o último frame das camadas que fazem parte da animação, acessamos a paleta Actions e clicamos em Global Options > Timeline Control > Stop.
11. Ações
Com a animação “quebrada” em quatro partes, falta apenas associar cada parte a um botão. Para isso, voltamos à camada do menu, selecionamos o botão frontal e, na paleta Actions, escrevemos o seguinte comando: on (press, release) { gotoAndPlay(1); }
No código acima, o número 1 representa o frame inicial da animação da visão frontal, a primeira a ser criada. Para ativar os outros botões, troque esse número pelo frame inicial das animações seguintes. Nesse caso, como cada animação tem 20 frames, os botões terão os números 21, 41 e 61. O passo final é, nas camadas do menu e do logotipo, adicionar frames até o fim da animação, teclando F5.
Matriz da TIM é acusada de truste (03/04/2009, 07h46)
Exclusivo para assinantes da INFO
Exclusivo para assinantes da INFO e compradores da última edição