Banner Expansivel

Escrito porJackson F. de A. Mafra

março 13, 2007

1 Parte

O expandable banner é, a principio, um full banner (468×60) comum, porém, quando o usuário passa o mouse em cima do mesmo, ele se expande, criando uma boa interação e mostrando informações adicionais.

Chega de conversa e mãos à obra!

O expandable banner, apesar de ter um impacto bem grande na página, é fácil de ser elaborado. Iremos usar o Flash para desenvolvê-lo e o Dreamweaver para inserí-lo na página (utilizando layer).

No Flash, crie um documento com 468 de width, que é a largura padrão de um full banner e com a altura de sua preferência, porém só não exagere muito, o ideal é que o banner tenha 468×280 pixels.

Recomendo dividir a animação em cenas. Uma para o primeiro estado e o segundo para quando o usuário passar o mouse em cima do banner, pois assim faciltia o nosso trabalho e possíveis alterações.

No meu caso, eu dividi a animação em duas cenas, chamadas “cena1” e “rollover”, respectivamente.
Para trabalhar com cenas, você utilizará a paleta Scene (Cena). Abra-a pressionando “Shift + F2”. e adicione uma cena clicando no sinal de “+”.

Renomeie suas cenas de acordo com sua preferência. E vale lembrar que o Flash exibe as cenas de acordo com a posição na paleta, de cima para baixo.

Vamos agora editar a primeira cena (“cena1”).

Faça um retângulo que será o fundo do seu banner, pois vale ressaltar que a animação terá fundo transparente no html, mas nos preocuparemos com isso só no Dreamweaver. Por enquanto, você precisa imaginar que a cor de fundo do Flash não existe. Portanto, na cena 1, faça um retângulo de 468×60, sem bordas.

Agora selecione-o e agrupe pressionando "Ctrl + G". Com o retângulo ainda selecionado, defina na barra Properties (Propriedades) sua posição Y e X igual a zero.

Dentro desse retângulo você colocar todo o conteúdo que fará parte do primeiro estado do banner. Crie movimentos, utilize fotos, textos, tudo de acordo com sua necessidade. O que importa é usar a criatividade para chamar a atenção (de uma forma educada) do usuário, dispertando seu interesse em interagir com o banner, mas atentando sempre para o tamanho final do mesmo, tendo em vista que os portais normalmente não aceitam banners maiores que 12 kbytes, pois prejudica o carregamento do restante da página.

Depois de criada sua primeira cena, você deverá criar uma layer e ela deverá estar acima de todas as outras. Vamos criar um botão que chamará a próxima cena.

Faça um outro retângulo de 468×60 pixels e defina o seu X e Y igual a zero.

Com o retângulo ainda selecionado, pressione “F8” para convertemos ele para botão. Na janela que se abrir, escolha a opção button (botão) e dê um nome para ele. Clique em “OK”.

Em seguida, clique duas vezes no botão para editá-lo.

Na timeline (linha do tempo), clique em cima do primeiro frame e, sem soltar o mouse, arraste-o para o último frame.

Pronto, agora pressione “Crtl + e” para voltar à raiz do filme

Com o botão selecionado, pressione “F9” para abrir a paleta “Actions”.

Dentro da paleta digite:

on (rollOut) {
gotoAndStop("cena1", 1)
}

on (rollOver) {
gotoAndPlay("rollover", 1)
}

Essa ação faz com que a próxima cena seja chamada quando o usuário passar o mouse em cima do botão ou que volte ao começo do filme caso o usuário tire o mouse do banner durante a animação de transição entre as cenas.

Pronto, agora feche a paleta e, na timeline, crie mais uma layer com o nome “actions” ou “ações”, como preferir. Selecione o primeiro frame dessa layer e pressione “F9” para abrir a paleta “Actions” novamente. Na paleta digite:

stop();

Isso fará com que o filme pare e não vá automaticamente para a próxima cena assim que for exibido.

Pronto, nossa cena está criada. Vamos à segunda e última cena.

Crie novamente um retângulo, só que dessa vez ele deverá ter 468×280, que é a área total do filme. Depois de criado, agrupe-o e defina X e Y igual a 0.

Crie sua animação final, respeitando as dimensões do retângulo que acabou de criar.

Depois de criar a animação, crie uma camada acima de todas que, como na cena passada, conterá o botão, só que dessa vez o botão levará para uma determinada página quando clicado.

Com a layer criada, abra a “Library” (Blibioteca), pressionando “Ctrl + L” ou “F11”.

Procure pelo botão que você criou na cena anterior e arraste-o para o stage. Defina seu X e Y igual a zero. Feito isso, com o botão selecionado, pressione “Q” para redimensioná-lo. Aumente sua altura para que fique igual a do filme, ou seja, 280 pixels. Ou você poderá fazer isso diretamente na barra “Properties” (Propriedades), bastando selecionar o botão e digitar 280 no campo “H”, de “height”(altura).

Agora iremos inserir e ação que levará o usuário para o endereço desejado e outra que fará com que o banner volte à primeira cena, se por acaso o usuário tirar o mouse em cima do banner.

Para isso, com o botão selecionado, pressione “F9” e dentro da paleta “Actions” digite:

on (rollOut) {
gotoAndStop("cena1", 1)
}

on (release) {
getURL(‘www.imasters.com.br’, ‘_blank’)
}

Essa ação fará com que, quando o usuário tirar o mouse de cima da área do banner, ele volte para a primeira cena, onde está com o tamanho padrão de um banner.

E ao ser clicado, o botão chama a função “getURL”, que levará o usuário à página especificada dentro da mesma.

A especificação “_blank”, como vocês já devem saber bem, serve para que a página seja aberta em uma nova janela.

Bom, agora só mais um passo para finalizarmos nosso banner. Crie uma camada chamada “Actions”, semelhante à da cena anterior.

No último frame de sua animação, crie um frame vazio, pressionando “F7”. Com esse frame selecionado, abra a paleta “Actions” pressionando “F9”.

Então digite:

stop();

Pronto, agora é só salvar e exportar seu banner para swf.

Iremos, nesse momento, inserir o banner no site. Para isso, abra a página na qual ficará o banner e crie uma layer, posicione-a no local desejado.

Clique dentro da layer e então pressione “Ctrl + Alt + F” para inserir um swf.

Depois de inserido o banner dentro da layer, vamos remover a cor de fundo do nosso banner, para que ele não fique por cima de parte do conteúdo do site. Para isso, selecione o banner e, na barra “Properties” (Propriedades), clique em “Parameters” (Parâmetros).

No campo “Parameter”, digite “wmode” – sem aspas. E no campo “value”, digite “transparent” – sem aspas também.

Pronto, agora nosso banner está inserido na página.

2 Parte

Dê um nome ao seu div. No exemplo abaixo eu o chamei de "banner" (Isso será util mais tarde).

Apague os valores dos campos E e A. Esses valores são referentes à posição do DIV com relação ao topo e o lado esquerdo da sua janela. Sem eles, nosso DIV tomará a posição do local onde foi colocado no código, ou seja, o espaço que criamos para o banner.

Não se assuste se dentro do Dreamweaver o layer aparecer em outro ponto da tela.

Pronto, dessa forma o banner funcionará em qualquer configuração de tela. Contudo, nos navegadores como Mozilla e Firefox podem apresentar problemas, pois esses navegadores tendem a montar o site no canto da página e trazê-los ao local final assim que carregada, deixando o DIV fora do espaço programado.

Uma boa dica é reconhecer quando o navegador é diferente do Internet Explorer e fazer um pequeno resize de 1 pixel utilizando javascript.

Função:

// Da um resize na pagina, para que o mozilla possa reconhecer banners expansiveis
function Resize(){
if(navigator.appName!="Microsoft Internet Explorer"){
window.moveTo(0,0);
window.resizeTo(screen.width-1,screen.height-1);
window.resizeTo(screen.width,screen.height);
}
}

</Script>

Na tag <BODY> do seu html, insira a propriedade: onLoad="Resize()"

Ex.: <BODY ONLOAD="Resize()">

02. Por que meu banner não fica com fundo transparente no Netscape, Mozilla e Firefox?

No artigo publicado pelo Felipe Gomes (link acima), ele mostra claramente para se criar o parâmetro de transparência para o Flash:

Mas não esqueça de colocar a mesma propriedade dentro da tag <EMBED>, pois é nela que os navegadores como Netscape e Firefox se baseiam.

Ex.: <embed src="banner.swf" wmode="transparent" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="468" height="250"></embed>

03. Por que os links abaixo da transparência do banner não funcionam no Netscape, Mozilla e Firefox?

Esse é um problema frequente de quem trabalha com esse tipo de banner. Uma dica interessante é alterar a área de visualização do DIV, Deixando inicialmente do tamanho de nosso banner (nesse caso, 468×60). Quando colocarmos o mouse sobre o mesmo, tirar esse limite, e quanto tirarmos o mouse, redefini-lo.

Vamos lá!

Selecione o seu DIV e preencha as áreas de corte D e X, conforme exemplo abaixo:

Com o DIV selecionado, abra a guia de Comportamentos do Dreamweaver (Shift + F3).

Em primeiro lugar defina a versão dos eventos. Siga os passos abaixo:

Agora vamos à ação propriamente dita. Clique novamente no ícone + e depois em Alterar a propriedade. Na janela que se abrirá, siga os passos a seguir: