FIREWORKS - Criando Banners Animados
Autor: Edu ArcadhiA | Publicado: 2011-06-25T13:25:00-07:00

Nesta aula vamos criar um Banner Animado, utilizando quadros para gerar cada uma das fases da apresentação.VAMU LA!!! VALENDO!!!!Solicite um documento com as características abaixo:
Largura: 400 px
Altura: 400 px
Resolução: 72 px/inch
Cor do CANVAS: #000000Digite FIREART com as características abaixo:Fonte: Arial RoundedTamanho: 68X: 47Y: 15Cor: #CC6600Cor de Contorno: #FF9900Este é nosso desenho inicial para o Banner. Agora vamos dar seqüência na criação das outras fases.Vá ao MENU WINDOWS e escolha a opção FRAMES (QUADROS). Veja a janela do painel:
Note que existe apenas um quadro com o nome FRAME1. Dê um clique duplo no nome do quadro e altere para INÍCIO.Acesse o MENU do painel e clique em DUPLICATE FRAME (DUCPLICAR QUADRO). Veja:
Na janela de diálogo que aparecerá, encontraremos 04 opções. São elas:
NUMBER (NUMERO) – Indica o numero de copias que faremos do quadro selecionado. – Neste caso 30ATT THE BEGINNING (NO INICIO)– Indica que o novo quadro será criado no inicio da animação, ficando como o 1º quadro da animação.BEFORE CURRENT FRAME (ANTES DO QUADRO ATUAL) – Indica que o novo quadro será criado acima do quadro atual.AFTER CURRENT FRAME (APÓS O QUADRO ATUAL) – Indica que o novo quadro será criado após o quadro atual.AT THE END (NO FINAL) – Indica que o novo quadro será criado no final da animação.No nosso caso, utilizaremos a opção para duplicar o quadro após o atual.
Note que os novos quadros aparecerão com o mesmo nome do original. Altere o 2º para ILUSTRACOES.Agora digite ILUSTRAÇÕES com as características abaixo:Fonte: GabriolaTamanho: 50X: 24Y: 102Cor: #663366Aplique um efeito de GLOW na cor branco com leve aparência (1 x 100% x 3) como segue abaixo:
Veja como ficou:
Agora transformaremos nosso texto em animação para poder dar movimento neste. Selecione o texto ILUSTRAÇÕES e pressione uma vez a tecla F8. Dê o nome de “ilustracao_anima” e clique em ANIMATION (ANIMAÇÃO). Veja a janela da transformação:
Na janela que aparecerá aplique as seguintes características:
FRAMES (QUADROS) – Indica quantos quadros terá esta animação – Neste caso 08.MOVE (MOVIMENTO) – Indica se o objeto terá movimento em pixels. Neste caso usaremos o valor 100.DIRECTION (DIREÇÃO) – Indica em ângulo a direção do movimento – Neste caso utilizaremos “0”.SCALE TO (ESCALA PARA) – Indica se o objeto sofrerá alterações em seu tamanho, utilizando escala em porcentagem – Neste caso não alteraremos o tamanho, mantendo em 100 (100%).OPACITY (OPACIDADE) – Indica se o objeto sofrerá alterações em sua opacidade no decorrer da animação onde o primeiro campo refere-se à opacidade inicial da animação e o segundo a opacidade final do objeto na animação. Neste caso não alteraremos, mantendo 100 (100%) no inicio e fim da animação.ROTATE (ROTAÇÃO) – Indica se o objeto rotacionará durante a animação e quantas voltas ele dará, sendo o valor de 360 (360°) para cada volta. Você pode ainda definir se o giro será no sentido horário CW (CLOCK WISE) ou anti-horário CCW (COUNTER CLOCK WISE). Neste caso não alteraremos.Agora renomeie do quadro 03 ao 09 com o nome de “ilustrações”.
Agora clique no quadro nº 10 no painel Frames e digite o texto LOGOMARCAS com as características abaixo:Fonte: Maiandra GDTamanho: 50X: 24Y: 156Cor: #FFFFFFAplique um efeito Inner Bevel.Veja como ficou:
Transforme o texto em símbolo com as características abaixo:Tipo: AnimationNome: logomarcas_animaFRAMES: 10MOVE: 150DIRECTION: 270SCALE: 400OPACITY: 100 para 10ROTATE: 0Agora renomeie do quadro 10 ao 19 com o nome de “logomarcas”.
Agora clique no quadro nº 20 no painel Frames e digite o texto Imagens com as características abaixo:Fonte: Viner Hand ITCTamanho: 50X: 93Y: 206Cor: #FF0000Aplique um efeito Raised Emboss.Veja como ficou:
Transforme o texto em símbolo com as características abaixo:Tipo: AnimationNome: imagens_animaFRAMES: 10MOVE: 0DIRECTION: 0SCALE: 100OPACITY: 100 para 100ROTATE: 720 (CW)Agora renomeie do quadro 20 ao 29 com o nome de “imagens”.
Por fim, clique no quadro nº 30 e digite o texto com as caracteristicas abaixo:Tudo (enter)para (enter)o (enter)visual (enter)da sua (enter)EMPRESA!
Fonte: Arial RoundedTamanho: 50X: 65Y: 87Cor: #FFFFFFAgora renomeie o quadro 30 com o nome de “fim”.Veja como ficou:
Agora vamos acertar o tempo de nossa animação. Localize a barra de visualização de animações do FIREWORKS:
Pressione o botão PLAY para visualizar a animação e o botão STOP para parar.Note que o tempo e velocidade não estão nada corretos para as apresentações.Localize o tempo de cada quadro ao lado dos Frames no painel. Repare que inicialmente o FIREWORKS sugere 7 (centesimos de segundo).Clique duas vezes sobre o tempo (nº 7) do Frame 1 (início) para alterarmos. Veja a janela que se abre para tal alteração:
Altere para 100 no tempo.Do quadro 02 à 08 altere para 15 no tempo.Altere o quadro 09 para 100 no tempo.
Altere o quadro 10 para 100 no tempo.Do quadro 11 à 19 altere para 15 no tempo.
Altere o quadro 20 para 70 no tempo.Do quadro 21 à 28 altere para 12 no tempo.Altere o quadro 29 para 70 no tempo.
Altere o quadro 30 para 400 no tempo.Agora é só assistir usando a barra de visualização.__________________________________________________________________________________
DICAS&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;
Voce pode mudar o tempo de vários Frames ao mesmo tempo, selecionando-os com a tecla SHIFT._________________________________________________________________________________FUIOS!