Criando um Banner do tipo "Arranha-céu" no Flash CS3

Apresentação:  Neste tutorial vamos aprender a construir um banner simples em Flash CS3 do tipo arranha-céu largo (160x600).

Conhecimentos adquiridos:  Criação e modificação de arquivos no Flash CS3; Importação de gráficos para o palco e para a biblioteca; Criação de Layers; Animação; Manipulação de Classes Transition e Tween.

Softwares e arquivos necessários:

• Flash CS3 Professional  Baixar versão Trial
• Arquivo de exemplo banner_fonte.zip
  

1. CRIANDO UM NOVO DOCUMENTO FLASH.

A INTERFACE DO FLASH

  A interface do Flash CS3 é formada por vários painéis que se situam ao redor de um palco (stage).

 

  

1.1 Alterando propriedades do documento Flash

Por padrão ao criarmos um novo arquivo o tamanho do palco é de 550 pixels de largura por 400 pixels de altura, através do painel de propriedades podemos alterar essas dimensões, podemos alterar também outras propriedades do documento: cor do fundo, taxa de frames (Frame rate), opções de configurações, etc.
Para nosso exercício vamos alterar a largura e a altura de nosso documento Flash. Clique no botão onde aparece a medida atual do palco para acessar a caixa Document Properties, nela digite 160 para a largura (width) e 600 para a altura (height) e clique em OK. Com esses valores digitados estamos criando um banner do tipo "wide skyscraper" ou "arranha-céu largo".  Salve o arquivo com o nome banner.

Figura 1: Definindo tamanho do banner no Document Properties

As medidas para banners são padronizadas e você pode aprender mais sobre o assunto visitando o site Interactive Advertising Bureau.

Dica: Também é possível criar banners no Flash CS3 a partir de modelos prontos. Selecione File -> New , clique na Aba Template e selecione o tipo de banner desejado na seção Advertising.

  

2. IMPORTANDO ARQUIVOS GRÁFICOS

Podemos importar sons, vídeo e formatos gráficos tais como: BMP, JPEG, PNG, AI (Adobe Ilustrator) e PSD (Photoshop). Quando importamos um gráfico qualquer dos formatos acima, o mesmo é armazenado na biblioteca (Library). A biblioteca armazena arquivos importados, bem como os símbolos que você cria dentro do Flash. No Flash® CS3 podemos criar três tipos de símbolos: Movie clip, Button e Graphic. Esses símbolos ficam armazenados no painel Library (biblioteca). Quando você arrasta um símbolo da biblioteca para o palco, você está criando uma instância (cópia) desse símbolo. Podemos ter no palco, várias instâncias derivadas de um único símbolo. As instâncias são referências ao símbolo na biblioteca.
Agora vamos importar uma imagem, antes é necessário baixar o arquivo de exemplo "banner_fonte.zip" e descompactá-lo na mesma pasta do arquivo banner que acabamos de salvar.

2.1 Importando arquivo gráfico para o painel Library (Biblioteca)

Primeiro selecionamos o frame para o qual a imagem deve ser importada, no caso o frame 1, repare na figura abaixo

Figura 2: Frame 1 da camada Layer 1 selecionado.

1. 
   
   
   
   
   Selecionamos o frame 1 na timeline e clicamos em  File -> Import -> Import To Library. Com isso estamos importando uma imagem para a biblioteca de nosso documento flash no frame 1;
2. 
   
   
   
   
   Em seguida navegamos até a pasta onde está a imagem a ser importada, selecionamos a imagem BG1.png e clicamos em Open;
3. 
   
   
   
   
   Repare que na biblioteca foi criado dois arquivos: um Bitmap e um Gráfico. Clique com o botão direito do mouse no arquivo do tipo Graphic e no menu contextual clique em Type e marque Movie Clip.
4. 
   
   
   
   
   Arraste BG1.png para o palco e repare que no painel de propriedades é possível alterar valores como largura, altura e posicionamento/coordenadas (X e Y) da imagem no palco. Coloque width = 160, height = 600 e certifique-se de colocar X = 0 e Y = 0, de modo que os parâmetros no painel de propriedades fiquem igual a tela abaixo. Com esses valores o símbolo movie clip BG1.png importado preenche todo o palco. Ainda no painel de propriedades na caixa Instance name atribua o nome bg1 ao símbolo.
   
   
   

Figura 3: Painel de propriedades, ajuste fino em símbolos no palco.

3. LINHA DO TEMPO E CAMADAS

O painel Timeline (Linha do Tempo), localizado acima do palco é composto por vários quadros (frames) que representam visualmente as fases de um documento. Nesse painel temos um indicador de progresso que se move pela linha do tempo, criando um efeito de animação.

Figura 4: Painel Timeline

No painel Layers (Camadas), podemos adicionar inúmeras camadas para organizar espacialmente o conteúdo do documento, para criar máscaras ou transições animadas.

Agora vamos ver como proteger (travar) e como renomear uma camada no Flash CS3.

• Protegemos uma camada para evitar movimentações acidentais dos objetos dispostos no palco.
• Renomeamos uma camada para facilitar a identificação de seu conteúdo, pois quando trabalharmos com muitas camadas a identificação Layer 1 ou Layer 20 não nos ajuda a determinar o conteúdo de cada uma delas.

3.1 Renomeando uma camada 

Para renomear uma camada selecione a ferramenta Selection no painel de ferramentas e dê um duplo clique sobre o nome Layer 1;

Digite bg1 no lugar de Layer 1 e pressione a tecla .

3.2 Criando uma nova camada

É uma boa prática criarmos o hábito de separar em camadas conteúdo relacionados, por exemplo, texto separado de gráficos, gráficos separados de sons e por ai em diante...fazemos isso criando uma camada para cada tipo de conteúdo usado em nosso documento Flash.

Selecione a camada bg1 e clique no botão Insert Layer, a nova Layer é adicionada com o nome Layer 2;

Dê um duplo clique em Layer 2 e digite texto fixo em seguida pressione a tecla

Protegendo uma camada

Selecione a camada bg1 e clique no ponto abaixo do icone de cadeado, aparecerá um cadeado e um ícone de um lápis com um traço em diagonal simbolizando que não é possível alterar elementos dispostos nessa camada;

Figura 5: Clique no ponto branco para proteger uma camada

4. ADICIONANDO TEXTO

O objetivo principal de um banner é atrair a atenção do visitante do site, e para isso, ele além de imagens necessita apresentar alguma informação, usualmente uma pequena frase. Agora vamos aprender a criar texto no Flash CS3.

1. Selecione a camada texto fixo e clique na ferramenta Text (T), no painel de ferramentas. Clique próximo ao topo do banner e digite “Cão” Em seguida selecione a ferramenta Selection - repare que o texto é delimitado por uma caixa. No painel de propriedades certifique-se de que está selecionado Static Text, mude o tamanho da fonte para Arial, 50, negrito, centralizado e cor #FFFFFF.
2.  Selecione novamente a ferramenta Text e crie um novo texto. Digite “Vigilantes*”. No painel de propriedades modifique o tamanho para 28, mantendo as opções de negrito, cor e centralizados como vistos em 1;
3.  Selecione novamente a ferramenta Text e crie um novo texto. Digite “*empresa fictícia”.  Mude o seu tamanho para 18 e desative o negrito. Colocamos em seguida cada palavra uma abaixo da outra na parte superior de nosso banner
4. Com a tecla Shift pressionada, selecione todos os textos digitados até aqui. Vamos transformar esse grupo de texto em um símbolo do tipo movie clip. 
5. Após ter selecionado todos os textos com o uso da tecla shift, clique em Modify -> Covert to Symbol e na caixa name digite texto1, na caixa type, selecione Movie Clip e clique em OK  

Acabamos de criar nosso primeiro símbolo do tipo movie clip no Flash.

Dica: Com a tecla de atalho F8 também podemos criar símbolos rapidamente.

4.1 Posicionando os textos

Para centralizar objetos no palco podemos usar a ferramentas do painel Align, acessível através do menu Window - > Align

  

Figura 6: Painel Align

Vamos arrastar o texto1 para o palco e posicioná-lo com os seguintes valores no painel de propriedades: W=147, H=111, X=83 e Y=61;

4.2 Criando uma nova camada e importando outro arquivo gráfico

Vamos proteger as duas camadas existentes até agora clicando no ícone do cadeado, em seguida clicamos na camada texto fixo e em seguida clicamos em Insert -> Timeline -> Layer;

Nessa nova camada vamos renomeá-la atribuindo o nome: bg2;

Com a camada bg2 selecionada vamos importar outro arquivo gráfico. Clique em File -> Import -> To Library e selecione BG2.png na pasta de arquivos de exemplos que você descompactou no inicio do tutorial.

Repare que na biblioteca foi criado dois arquivos: um Bitmap e um Gráfico. Clique com o botão direito do mouse no arquivo do tipo Graphic e no menu contextual clique em Type e marque Movie Clip.

Arraste BG2.png para o palco e repare que no painel de propriedades é possível alterar valores como largura, altura e posicionamento/coordenadas (X e Y) da imagem no palco. Coloque width = 160, height = 600 e certifique-se de colocar X = 0 e Y = 120,

No painel de propriedades na caixa Instance Name digite bg2.

Bloqueie essa camada também e vamos inserir uma nova camada, mas antes teste o arquivo clicando em Control -> Test Movie (ou Ctrl + Enter).

Criando uma nova camada e importando outro arquivo gráfico

Vamos proteger as três camadas existentes até agora clicando no ícone do cadeado, em seguida clicamos na camada bg2 e em seguida clicamos em Insert -> Timeline -> Layer;

Nessa nova camada vamos renomeá-la atribuindo o nome botão.

Aprenderemos agora a criar um símbolo do tipo Botão no Flash CS3.

Clique na camada botão, em seguida com a ferramenta Retângulo desenhe uma forma retangular e usando o painel de propriedades atribua os valores: W=160, H=600, X=0 e Y=0, Para cor digitamos: #00FF00, não se preocupe pois essa cor não aparecerá quando o banner estiver funcionando. Com isso estamos colocando nosso botão sobre os demais elementos.

Criando o botão invisível

1. Clique sobre o retângulo e pressione F8, na caixa Convert to Symbol, marque type = Button e dê OK.
2. Dê dois cliques sobre o símbolo de botão e na linha do tempo do botão arraste o quadro-chave da posição Up para a posição Hit, conforme figura abaixo.
3. Em seguida clique em Scene 1 para voltar à Timeline principal.
   
   

Figura 1: Criando um botão invisível

Clique sobre o botão e no painel de propriedades atribua ao símbolo de botão o nome de instância botao1.

Teste o arquivo, clicando em Control -> Test Movie (ou Ctrl + Enter). Repare que agora ao passar o mouse sobre o banner já há uma sinalização de que se clicarmos algo ocorre. Porém ainda falta implementar o código para a interatividade.

Criando uma nova camada para o código ActionScript

Vamos proteger as quatro camadas existentes até agora clicando no ícone do cadeado, em seguida clicamos na camada botão e em seguida clicamos em Insert -> Timeline -> Layer;

Vamos dar dois cliques sobre a nova camada e vamos atribuir o nome: action.

Clicamos no frame 1 da camada action e em seguida clicamos em Window -> Actions (F9 produz o mesmo efeito).

É no painel actions que escrevemos o código ActionScript responsável por gerar interações e dar dinamismo aos banners e outras aplicações. Agora vamos aprender um pouco sobre como criar essas interações. Antes de prosseguir é importante observar a ordem das camadas na figura abaixo.

Figura 2: posição das camadas

 

Figura 3: Aparência do banner

Os tipos de animação no Flash CS3

Para se criar animações no Flash CS3, utilizamos uma das três opções abaixo:

1. 
   
   
   
   
   Interpolação de movimento (motion tween transition): Usadas para alterar a posição de um objeto ao longo de um tempo determinado, através da definição dos pontos iniciais (aqueles onde ocorrerão alterações) e do ponto final nos quadros-chave. Ao ser aplicado o Flash® CS3 desenha as etapas intermediárias, produzindo um efeito de movimento. 
2. 
   
   
   
   
    Interpolação de forma (shape tween transition): Usadas para alterar a forma de um objeto ao longo de um tempo determinado, através da definição dos pontos iniciais (aqueles onde ocorrerão alterações) e do ponto final nos quadros-chave. Ao ser aplicado o Flash® CS3 desenha as etapas intermediárias, produzindo um efeito de alteração de forma do objeto. 
3. 
   
   
   
   
    Animação quadro a quadro (frame to frame transition): Usadas para alterar a posição e/ou a forma de um objeto ao longo de determinado período de tempo, através da criação manual de cada um dos quadros, tendo como efeito final a produção de movimento e/ou alteração de forma, só que de maneira mais controlada e com efeitos mais sofisticados.

Para este exercício criaremos uma interpolação de movimento usando ActionScript 3.0.

Adicionado interatividade com ActionScript 3.0

Para produzir interpolações através de código ActionScript vamos importar para nosso script o pacote fl.transitions, esse pacote contém classes que usamos para criar efeitos de animação e o pacote fl.transition.easing o qual coontém classes usadas para criar efeitos de atenuação. A atenuação permite criar efeitos de aceleração e desaceleração gradual durante uma animação, tornando a animação mais realista.

Para importar pacotes para nosso script usamos a palavra chave import, veja abaixo:

import fl.transitions.*;
import fl.transitions.easing.*;

Agora vamos criar uma função que será chamada sempre que o mouse estiver sobre o banner.

function mostraInfoAdicional(event:MouseEvent):void
{
// usamos o método start() da classe TransitionManager para criar um efeito de quadros aparecendo e desaparecendo no bg1
TransitionManager.start(bg1, {type:PixelDissolve, direction:Transition.IN, duration:3, easing:Regular.easeIn, xSections:10, ySections:10}); var valorInicial:Number = bg2.x; //recebe o valor da altura do movie bg2, o que tem a figura do cachorro.
var valorFinal:Number = 380; //até onde o movie pode descer.
var duracao:Number = 5;
var minhaInterpolacao:Tween = new Tween(bg2, "y", Elastic.easeOut, valorInicial, valorFinal, duracao, true);
}

Agora vamos criar uma função que será chamada sempre que o mouse for deslocado do banner.

function ocultaInfoAdicional(event:MouseEvent):void
{
var valorInicial:Number = bg2.x;
var valorFinal:Number = 120; //até onde o movie pode subir
var duracao:Number = 5;
var minhaInterpolacao:Tween = new Tween(bg2, "y", Elastic.easeOut, valorInicial, valorFinal, duracao, true);
}

Agora vamos criar uma função que será chamada sempre que clicarmos o mouse sobre o banner e que nos levará ao site do patrocinador.

function irParaSite(event:MouseEvent):void {
 var siteURL:URLRequest = new URLRequest("http://www.aprendofacil.com.br"); //basta substituir a URL por outra desejada.
    navigateToURL(siteURL);
}

Para finalizar criamos os ouvintes de eventos e atribuímos ao botão1, quando o evento ocorre uma das três funções acima é chamada. Nesse exercício são três as situações possíveis: mouse sobre o banner, mouse fora do banner e clique no banner.

botao1.addEventListener(MouseEvent.MOUSE_OVER, mostraInfoAdicional);
botao1.addEventListener(MouseEvent.ROLL_OUT, ocultaInfoAdicional);
botao1.addEventListener(MouseEvent.CLICK, irParaSite);

Teste o arquivo, clicando em Control -> Test Movie (ou Ctrl + Enter).

Publicando o arquivo

Ao publicarmos o arquivo fonte (entensão FLA), estamos criando um novo arquivo com extensão SWF. Para proceder à publicação do arquivo clicamos em File -> Publish Settings na aba Format desmarque HTML e clique em Publish. O arquivo SWF com o mesmo nome do arquivo fonte (extensão FLA) será gerado na pasta onde você salvou o arquivo FLA.

É esse arquivo SWF que você publicará no site.

Retirado do site: www.aprendofacil.com.br