Sexo
Mensagens
Reputação
Inscrição
Idade
Localização
por 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 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.
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 TEXTO
Selecione 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: cyberdesigner.forumeiros.com. Na caixa URL link digite cyberdesigner.forumeiros.com.
Certifique-se de posicionar esse texto em X = 389 e Y = 305. Salve o documento.
Seu arquivo deve estar parecido com a imagem abaixo:
Obrigado pela atenção.
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 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.
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 TEXTO
Selecione 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: cyberdesigner.forumeiros.com. Na caixa URL link digite cyberdesigner.forumeiros.com.
Certifique-se de posicionar esse texto em X = 389 e Y = 305. Salve o documento.
Seu arquivo deve estar parecido com a imagem abaixo:
Obrigado pela atenção.
Alterar
