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 <Enter>.

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 <Enter>

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).

Continua na parte 3.

Ver Parte 3