O aluno deverá ter alguns conhecimentos básicos de como formatar e criar imagens com programas como Photoshop ou CorelDRAW (ambos estudados no curso de Webdesign), ou outro programa de edição e criação de imagens.
O primeiro passo para a criação de um banner é definir seu tamanho, se vai ter alguma imagem bitmap, etc. No exemplo a seguir, o banner terá 600 x 120 pixels, terá uma imagem bitmap do lado esquerdo e fundo preto, como mostra a figura abaixo:
A imagem acima foi criada no Photoshop.
Definida a estrutura básica do banner, é hora de começar a trabalhar a animação no Flash.
Abra o Flash.
Utilizando o Painel Properties, altere o tamanho do Palco para as medidas do banner, ou seja, 600 x 120 pixels e altere a cor para preto.
Através do Menu File, opção Import... > Import to stage, importe a imagem BannerEspaco para a área de trabalho do Flash e posicione-a exatamente sobre o Palco. Obs: você pode fazer isso de maneira rápida e precisa através do painel Align: menu Window > Align.
Nosso próximo passo consiste em demarcar a área que colocaremos as mensagens de texto para fazer a animação.
Clique sobre o menu View, opção Rules. Aparecerão duas réguas na área de trabalho do Flash, uma vertical à esquerda e outra horizontal na parte superior.
Clique agora sobre a régua vertical à esquerda e mantendo o botão do mouse pressionado, arraste para a direita, até que a linha verde fique na frente da galáxia, como mostra a imagem abaixo:
 |
Vamos agora começar a dar nomes aos bois.
Na linha do tempo, posicione o cursor do mouse sobre a palavra “Layer 1”, e dê um duplo-clique sobre a mesma.
A palavra “Layer 1” entrará no modo de edição. Altere o nome para “Banner”.
Em seguida clique na imagem para selecioná-la e clique no menu Modify, opção Convert to Symbol....
Na caixa de diálogo Convert to Symbol, no campo Name, apague o nome que estiver na mesma e digite Banner.
Em Type, deixe marcada a opção Movie Clip e clique no botão OK.
Em seguida criaremos mais uma camada.
Clique no menu Insert > Timeline, opção Layer.
Altere o nome o nome da camada para Texto1.
Clique no Quadro 1 da linha do tempo da camada Texto1 para selecionar o mesmo.
Na caixa de Ferramentas, no campo Color, clique na opção Fill color e selecione a cor #FFFFCC (amarelo claro).
Em seguida também na caixa de Ferramentas, clique na ferramenta Text e digite a frase 1° Encontro de Astrônomos Amadores de Friburgo.
Posicione e redimensione o texto como na figura abaixo:
OBs: você pode ajustar rapidamente o texto no centro do palco no alinhamento vertical através do painel Align.
Com o texto selecionado, clique no menu Modify, opção Convert to Symbol....
Dê o nome de Texto1, deixe a opção Movie Clip marcada e clique no botão OK.
Vamos animar o nosso texto.
Clique no quadro n° 30 da linha do tempo da camada Texto1 para selecioná-lo.
Clique com o botão direito do mouse em cima do quadro e depois na opção Insert Keyframe no menu que aparecerá.
Clique agora no quadro n° 1 da linha do tempo da camada Texto1 para selecioná-lo.
Clique com o botão direito do mouse em cima do quadro e depois na opção Create Motion Tween no menu que aparecerá.
Com o primeiro quadro selecionado, clique agora sobre o símbolo Texto1 no palco.
Aparecerá a opção Color, no painel Properties.
Selecione a opção Brightness e na caixa Brightness Amount, selecione -100%.
Teste o resultado pressionando Crtl + Enter.
O símbolo Texto1 aparece gradualmente.
Clique no quadro n° 45 da linha do tempo da camada Texto1 e insira um Quadro-chave.
Clique com o botão direito do mouse no quadro n° 30 da linha do tempo da camada Texto1 e depois na opção Create Motion Tween.
Clique novamente no quadro n° 45 da linha do tempo da camada Texto1.
Clique no símbolo Texto1 no palco.
Selecione a opção Brightness, do campo Color no painel de Propriedades e selecione -100% no campo Brightness Amount.
Teste o resultado pressionando Crtl + Enter.
Agora o símbolo Texto1 aparece gradualmente e depois desaparece também gradualmente, só que um pouco mais rápido, pois a quantidade de quadros é menor.
Vamos continuar com a animação do nosso Banner.
Clique no menu Insert > Timeline, opção Layer para inserir uma nova camada.
Nomeie a nova camada como Texto 2.
Clique no Quadro 45 da linha do tempo da camada Texto 2 para selecionar o mesmo.
Insira um Keyframe.
Em seguida, clique na ferramenta Texto 2 e digite a frase Dias 25, 26 e 27 de maio de 2007.
Posicione e redimensione o texto como na figura abaixo:
Clique no quadro n° 45 da linha do tempo da camada Texto 2.
Clique no menu Modify, opção Convert to Symbol....
Deixe a opção Movie Clip marcada, nomeie o símbolo como Texto 2 e clique no botão OK.
Clique no quadro n° 75 da linha do tempo da camada Texto 2 e insira um Keyframe.
Clique no quadro n° 45 da linha do tempo novamente com o botão direito do mouse e clique na opção Create Motion Tween.
Clique no símbolo Texto 2 no palco, e no painel Properties, selecione a opção Brightness.
Selecione -100% no campo Brightness Amount.
Teste o resultado pressionando Crtl + Enter.
Obs: Se o texto da camada Texto 2 ficar aparecendo durante todo o tempo, remova o quadro chave no quadro n° 1 da camada Texto 2.
Clique no quadro n° 90 da linha do tempo da camada Texto 2 e insira um Keyframe.
Clique no quadro n° 75 da linha do tempo novamente com o botão direito do mouse e clique na opção Create Motion Tween.
Com o quadro n° 90 da linha do tempo da camada Texto 2 selecionado, clique no símbolo Texto 2 no palco.
No painel Properties, selecione a opção Brightness.
Selecione -100% no campo Brightness Amount.
Selecione a camada Texto 1 na linha do tempo.
Clique no menu Insert > Timeline, opção Layer.
Renomei-e a nova camada para Texto1.2
Selecione a seqüência de quadros começando do 1 até o 45 da camada Texto1.
Clique no menu Edit > Timeline, opção Copy Frames.
Clique no quadro nº 90 da camada Texto1.2.
Clique no menu Edit > Timeline, opção Past Frames.
Teste o resultado pressionando Crtl + Enter.
Terminando a animação do Banner.
Você deve ter notado que a imagem da galáxia só aparece um breve instante e depois desaparece. Vamos corrigir isso agora.
Insira um Keyfrme no quadro de n° 134 da camada Banner.
Com o quadro n° 134 ainda selecionado, clique no painel Actions.
Clique na opção Timeline Control para expandi-la.
Dê um duplo-clique na opção gotoAndPlay. Essa opção habilita a repetição do filme a partir de um determinado quadro.
Digite 45 entre os parênteses do comando. 45 é o quadro no qual queremos que a animação comece a se repetir.
Teste o resultado pressionando Crtl + Enter.
Repare que o filme já inicia com a galáxia aparecendo. Podemos melhorar um pouco mais.
Clique no quadro n° 30 da linha do tempo da camada Banner e insira um Keyframe.
Clique no quadro n° 1 da linha do tempo da camada Banner com o botão direito do mouse e clique na opção Create Motion Tween.
Com o quadro n° 1 da linha do tempo da camada Banner selecionado, clique no símbolo Banner no palco.
No painel Properties, selecione a opção Brightness.
Selecione -100% no campo Brightness Amount.
Teste o resultado pressionando Crtl + Enter.
Ficou melhor não concorda?
Agora que terminamos nosso Banner, temos que cria o arquivo executável (.swf) para poder utilizar na página de Internet.
Clique no menu File, opção Export > Export Movie.
Abrirá a caixa de diálogo Export Movie. Digite um Nome (BannerEspaco) para o Banner e indique o local onde você deseja salvar o arquivo executável e clique em seguida no botão Salvar.
Aparecerá em seguida a caixa de diálogo Exportar Flash Player onde podemos definir opções como Ordem de Carregamento, qualidade do JPEG, opções para proteção, compactação, depuração, versão do player, etc.
No campo Ordem de carregamento, selecione Top Down.
Em JPEG Quality, digite 100.
E em Versão, selecione uma versão para o Flash.
Clique em OK.
É isso aí, terminamos a animação do nosso Banner. Você pode utilizar os conceitos apresentados neste tutorial animando os objetos de outras maneiras apresentadas também na apostila, tal como a interpolação de Forma, etc.
Nenhum comentário:
Postar um comentário