|
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:
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!
|