Tipos de banners
Assim como os anúncios impressos, os banners aparecem de várias formas e tamanhos. O IAB, Internet Advertising Bureau (Departamento de Propaganda da Internet) no endereço: http://www.iab.net/iab_products_and_industry_services/508676/508767/Rich_Media especifica que para os banners do tipo Expandable/Retractable Units (Unidades Expansível/Retrátil), com expansão se dando sempre através de iniciativa do usuário, deve ter como largura máxima 600 pixels. Como frame rate (taxa de quadros) deve ter 18 fps. O nosso exemplo terá 590 pixels de largura por 335 pixels de altura, com expansão se dando por iniciativa do usuário.
Conhecimentos adquiridos: Criação e modificação de arquivos no Flash CS3; Criação de Camadas (Layers); Uso de cores e gradientes, Animação através de código; Manipulação de Classes Transition e Tween, Técnicas de publicação de arquivos swf.
Softwares e arquivos necessários:Flash CS4 Trial 1. Configurações iniciais 1.1 Alterando propriedades do documento FlashPor 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.
No painel properties, clique no botão onde aparece a medida atual do palco para acessar a caixa Document Properties, nela digite 600 para a largura (width) e 400 para a altura (height), na caixa Frame Rate digite 18 fps. Clique em OK e salve o arquivo com o nome bannerPainel. 
1.2 Usando o painel Color
Clique na ferramenta Retângulo, em seguida abra o painel Color (Window > Color), na aba Color em Type selecione Linear. Dê dois cliques no marcador da esquerda e selecione a cor vermelha (FF0000), em seguida dê dois cliques no segundo marcador - o da direita e selecione a cor branca (FFFFFF). Clique na ferramenta Retangulo novamente e desenhe um retangulo no palco, acesse o painel de propriedades (Window > Properties) e com o retangulo selecionado atribua 590 para largura e 335 para altura. Adicione ainda x = 0 e y = 64. Com a ferramenta Selection selecionada clique sobre a forma do retângulo e selecione Modify > Convert to Symbol. Na caixa de diálogo Convert to Symbol atribua name = painel, Type = Movie clip, Registration esquerda superior e clique em OK. No painel Timeline dê dois cliques sobre a Layer 1 e renomeie o nome dessa camada para painel.
1.3 Aninhando objetos em um movie clip
Dê dois cliques no painel
Na timeline do painel, altere o nome de Layer 1 para backpanel
Com a camada backpanel selecionada, clique no botão adicionar nova camada e adicione outra camada acima da camada backpanel e dê-lhe o nome de texto.
Adicione outra camada acima de texto e dê-lhe o nome de botoes
Protegendo camadas
Selecione a camada backpanel e clique no cadeado para protegê-la e evitar movimentações não desejadas no objeto. 1.4 Adicionando textoSelecione a camada texto e clique na ferramenta Text, selecione no painel de propriedades fonte Verdana, tamanho 16, negrito e itálico e escreva: "Áreas do site". Clique sobre o texto com a ferramenta Selection e atribua os valores X = 9 e Y = 14. Clique novamente na ferramenta Text, modifique o tamanho da fonte para 14, normal e itálico e escreva: Veja também. Clique sobre o texto com a ferramenta Selection e atribua os valores X = 14 e Y = 236.
1.5 Criando Linhas divisórias
Clique novamente na camada backpanel - após desprotegê-la, insira uma camada acima dela e dê o nome a essa nova camada de linhas. Selecione a ferramenta Line e no painel Properties marque tamanho = 2 cor = 333333 e estilo pontilhado. Crie uma linha vertical com 152 pixels de altura (height). Selecione a linha criada e no painel de propriedades marque X = 118 e Y = 62. Selecione novamente essa linha, clique no boão Alt e arraste para a direita a linha para duplicá-la. Nessa segunda linha atribua X = 271 e Y = 62.
Repita a operação para criar uma terceira linha e atribua os valores, X = 432 e Y = 62
Crie outra linha; agora no formato horizontal com largura de 557 pixels, com X = 16 e Y = 226 de forma que toque as três linhas verticais. Usando a tecla Alt selecione essa linha horizontal e arraste para baixo de forma a criar uma outra linha paralela com a mesma medida e posicionada em Y = 299. Proteja a camada linhas.
1.6 Criando um texto em forma de link (URL)
Desproteja a camada texto, selecione a ferramenta Text, desmarque o itálico e o negrito, mantenha tamanho 14, cor FFFFFF e digite: www.aprendofacil.com.br. Na caixa URL link digite http://www.aprendofacil.com.br. Certifique-se de posicionar esse texto em X = 389 e Y = 305. Salve o documento.
Seu arquivo deve estar parecido com a imagem abaixo:
Clique em Control > Test Movie, repare que ao passar o mouse sobre o nome do site já é sinalizado a ocorrência de interação e se clicarmos nele iremos para o site.
|
Tutoriais 
