A ARTE DE GUACIRA SAMPAIO ROCHA 2008

Produzindo um BANNER
no Animation Shop 3

 

Com o Animation Shop3, e alguns cliques de seu mouse, você poderá inventar muitos banners interessantes. Os recursos são simples, mas sua criatividade fará a diferença. Quer ver?

Siga os passos:

1
Abra o Animation Shop3 e, na barra de ferramentas, clique no ícone "Banner Wizard" (ou File/ Banner Wizard). Veja o ícone:



2
Na janela que se abrir (Banner Wizard - Background), defina os campos como segue (tendo em mente que vamos aproveitar o exercício para reproduzir os procedimentos usados para o banner do topo da página):

 

neste caso foi escolhido o item 'background image' - clique em "Browse" para encontrar sua imagem ".GIF"


3
A janela seguinte, BW - Size: o primeiro campo, "Use a standard banner size", apresenta uma lista de tamanhos predefinidos para o seu banner - basta selecionar o campo e clicar na setinha à direita para abrir a lista de opções. O segundo campo, "Same as the background image", se acionado, vai ajustar as dimensões finais do banner à imagem que foi escolhida para o background (neste caso, 160 x 128px) - se você não definiu nenhuma imagem para o background, esse campo estará inativo. O campo "As defined here" apresenta as opções de definição personalizada para a largura (width) e altura (Height) do seu banner: para o nosso exercício defini 220 x 140. Confira o gráfico:

 


4
Em BW - Timing você poderá definir quantos frames serão exibidos por segundo e qual o tempo de exposição (este item poderá ser redefinido depois de terminado o processo de configuração do banner). Defina também a condição da animação: se vai haver "loop" ou quantas vezes ela vai 'rodar'. Veja o gráfico:

 

 

5
Em BW - Text você poderá definir qual o texto (se houver um) que deverá ser 'animado', em seu banner - para tanto, clique no botão "Set Font" e, na caixa "Add Text" faça todas as definições que achar necessárias. Confira os gráficos abaixo:

 

 

 

6
Em BW - Text Color você irá definir com qual cor preencher o seu texto (em nosso exercício defini 'white' - se quiser mudar a cor, clique sobre o campo com a cor 'white' para abrir a paleta de cores), e/ou uma imagem ou textura para o seu texto. No gráfico um, a opção "Opaque text" e no gráfico seguinte, a opção de imagem como preenchimento para o texto, em "Image text" (clique em Browse para localizar a imagem que vai utilizar). Confira:

 

o banner terá um texto opaco, 'white'

 

você irá conferir o resultado da opção "Image text" na parte inferior desta página

 

7
Em BW - Transition você poderá escolher qual efeito, dentre os disponíveis, irá querer para animar o seu texto - para tanto clique na seta à direita (sob o item "Transition Name"),faça sua escolha, e confira o resultado no campo "Preview". Se não gostar do efeito, escolha outro. Se clicar no botão "Customize" (no caso do efeito que escolhi para o nosso banner: Wheel) poderá optar por qual lado o texto irá 'rodar'. Confira os gráficos:

 

 

a lista dos efeitos

 

a direção do movimento

 

8
Clique em "Concluir" para finalizar esta parte e retornar à área de trabalho do AS3 com seu novo banner, pronto para ser visualizado em ação, e para receber os últimos retoques, se for o caso. Em nosso exercício, note que inseri um texto-assinatura no centro do banner.
Se, no passo "6", você escolheu inserir uma imagem como fundo do texto (veja o segundo gráfico do ítem "6"), seu banner terá outra aparência. Veja como:

 

 

9
Outras opções podem ser testadas e preparadas por você, usando os recursos que você já aprendeu, tanto no AS3 quanto no PSP. Veja outro exemplo de banner, preparado com o efeito "Bouncing", fundo opaco, e imagem como preenchimento do texto:

 

 

10
Note que o texto "caminha" sobre a imagem que lhe serve de preenchimento, ou seja: a imagem de fundo é fixa no banner, e o texto, vazado, caminha sobre ela exibindo-a durante seus movimentos. O mesmo acontece no exemplo do ítem "9".
Pessoalmente não gosto muito de fundos transparentes na confecção de minhas GIFs - quase sempre opto por definir para elas o mesmo background da página em que serão exibidas... mas se esse não for o seu caso, e você quiser uma transparência, basta definí-la durante a confecção do banner (veja o campo "Transparent background" no gráfico do ítem "2" deste tutorial).
Confira mais dois exemplos, ambos com o efeito "Drop Shadow" (vide ítem "7" deste tutorial). Note que o segundo banner apresenta um texto na parte superior da animação, que foi deslocada para baixo com o intuito de fazer com que o sombreado 'desaparecesse' na margem inferior do quadro (o texto extra foi adicionado após a criação do banner no Banner Wizard, pelo método "Propagate Paste", explicado no tutorial "20")

 

 

 

Muito gostosa essa brincadeira, não acha?
Vamos lá! Trabalhe bastante e...

Divirta-se!

Guacira Sampaio Rocha
direitos reservados
anteriorpróximo

voltar voltar para tutoriais 2

home
galeria
arte virtual
scripts
Página 2
links
imagens digitais
guestbook

 

premios
A ARTE DE GUACIRA SAMPAIO ROCHA 2008