[Resolvido] Banner expansível em Flash (completo!)

[klonder 14]

Tenho visto muitos tutoriais para banners expansíveis, mas a maioria utilizando o Flash da Macromedia. Por isso, resolvi criar esse tutorial com SwishMax, por ser um programa simples, que permite a rápida criação de banners publicitários.

 

Na verdade, os banners podem ser feitos também no Flash, bastando para isso adaptar algumas configurações antes de exportar o arquivo final no formato swf.

 

O que é um banner expansível?

Um banner expansível nada mais é do que um arquivo no formato swf, que possui elementos que ocuparão uma área além da que é exibida inicialmente na página. Por padrão, os banners possuem um tamanho de 468x60 pixels. Entretanto, quando o usuário clica sobre um banner expansível ou passa o mouse sobre ele, o mesmo "aumenta" de tamanho e seu conteúdo fica sobre os elementos da página (tabelas, imagens, links etc), adquirindo um tamanho de, por exemplo 468x468 pixels.

 

Da mesma forma, quando o usuário tira o mouse de cima do banner, ou clica em algum botão, o banner volta ao tamanho inicial de 468x60 pixels.

 

Quando utilizar um banner expansível?

Os banners expansíveis podem ser utilizados para exibir produtos, anúncios publicitários ou outras animações em seu site, como vídeos, tutoriais, demonstrações, dentre outros.

 

Como funciona?

Para que um banner expansível aumente e diminua o tamanho, sem interferir na clicagem/seleção/manipulação dos elementos de fundo (texto, links, imagens etc), é necessário que a área que ele ocupe aumente ou diminua de tamanho conforme a situação. Para isso, utilizaremos uma função muito simples em "java script"!

Todas as funções em Java Script serão chamadas a partir do swf, tornando o funcionamento mais simples e com menor risco de ocorrem erros de script.

 

Quando você irá começar a explicar como implementamos um banner expansível em nosso site?

Tá bom... chega de introdução... Vamos logo ao que interessa a partir de agora! :-)

 

Arquivos necessários

Copie o código abaixo e salve em um arquivo chamado tiracontrole.js. Esse arquivo fará com que o seu banner não mostre aquela caixa amarela com os dizeres: "Clique aqui para ativar e usar esse controle!". Foi testado no Internet Explorer e Firefox Mozzila e corrige também um problema que muitos usuários reclamaram com outros códigos semelhantes, referente à exibição de preloaders no Internet Explorer.

 

Arquivo: tiracontrole.js

function flash_w3c(arqflash,ident,largura,altura) {
//Verificando se o navegor é o Internet Explorer
	if (window.navigator.appName == "Microsoft Internet Explorer") {
		document.write('<object id="'+ident+'" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="'+largura+'" height="'+altura+'">');
//Se qualquer navegador diferente do IE, executar o bloco abaixo		
	}else{
		document.write('<object id="'+ident+'" type="application/x-shockwave-flash" data="'+arqflash+'" width="'+largura+'" height="'+altura+'">');
	}
//Implementando o swf na página, com os parâmetros mais importantes.
		document.write('<param name="allowScriptAccess" value="sameDomain">');
		document.write('<param name="movie" value="'+arqflash+'">');
		document.write('<param name="quality" value="high">');
		document.write('<param name="salign" value="t">');
		document.write('<param name="wmode" value="transparent">');
		document.write('</object>');
}

function bannerExpansivel(t){
//Essa função é chamada a partir de eventos disparados no swf.
	//Regular o tamanho objeto flash:
	document.getElementById("banner_001").style.height = t;
}

No arquivo HTML, cole o código a seguir entre as tags HEAD:

<script type="text/javascript" src="tiracontrole.js"></script>
<style type="text/css">
#banner_001 {position:absolute; z-index:2; left:50%; margin-left:-234px;
}
</style>

O código acima irá chamar as funções que estão no arquivo tiracontrole.js, além de fazer com que o banner seja exibido no topo da página, alinhado no centro.

 

 

E quanto ao vídeo em Flash? Como configurá-lo?

Como eu comentei anteriormente, iremos utilizar o programa SwishMax para o desenvolvimento de nosso banner.

Para isso, você poderá criar o banner da seguinte forma:

 

Crie um filme com o tamanho de 468x468 pixels. Deixe com esse tamanho por enquanto apenas para visualizar os limites do banner expansível. Na verdade, você poderá fazer o banner expansível com outro tamanho, por exemplo: 468x200 ou mesmo 468x600. Entretanto, lembre-se de alterar os parâmetros no código ActionScript que irá chamar a função de redimensionamento em Java Script. Nesse exemplo, o tamanho proposto é de 468x468 pixels.

Deixe o frame rate da maneira que preferir. Nós optamos pelo valor 14.

 

Em seguida, crie duas Scenes:

 

» Scene_1: Contém o banner no tamanho 468x60, alinhado ao topo do palco. Faça da maneira que preferir, lembrando-se apenas de colocar um stop para que o filme não passe para a Scene_2 quando a Scene_1 terminar.

 

» Scene_2: Contém a animação no tamanho 468x468 pixels, tomando conta de todo o palco. Se preferir, crie um shape de cor preta para ocultar os elementos do HTML que ficarão atrás do banner expandido.

Sugestão: crie um texto com os dizeres: "Fechar Janela", ou "Parar apresentação", ou algo semelhante para o usuário optar por parar a apresentação no momento em que quiser.

 

 

Mas klonder, e o ActionScript?

Então, agora é a parte mais interessante e a chave de todo o processo! Vamos chamar a função "bannerExpansivel" que está no arquivo "tiracontrole.js" e passar o parâmetro que informa qual o tamanho queremos que o objeto Flash adquira!

 

Na Scene_1, cole o seguinte script:

on (release) {
	getURL("java script:bannerExpansivel(468)");
	nextSceneAndPlay();
}

O script acima chama a função bannerExpansivel, fazendo com que o objeto Flash adquira uma altura de 468 pixels. Sinta-se à vontade para alterar a função "bannerExpansivel" para alterar a largura também. Agora que você já está compreendendo a lógica do processo, ficará fácil você adaptar o script às suas necessidades!

 

Na Scene_2, se você criou um botão do tipo: "Fechar janela", ou "Parar apresentação", cole o seguinte código na área de script desse botão ou texto:

on (release) {
	gotoSceneAndPlay("Scene_1",1);
	getURL("java script:bannerExpansivel(60)");
}

O código acima chama a função "bannerExpansivel" do "Java Script", dizendo:

- Objeto, por gentileza, seja um bom menino e retorne aos 60 pixels de altura.

 

Klonder, e para exportar o filme para SWF, preciso configurar algo no SwishMax?

Sim! Na aba "Movie" altere o valor de Height para 60, reduzindo o tamanho do palco para 468x60 pixels (tamanho do banner padrão), ou seja, você irá construir a animação em 468x468, mas assim que terminar, exporte a animação com o tamanho 468x60 pixels.

 

Em seguida, precisaremos informar ao Flash que os elementos que estão além dos limites do palco precisam ser exibidos. Para isso, vá até a aba "Export". Em "Export options for:" selecione a opção: "SWF (Flash)".

Nas opções que surgirem, DESMARQUE a opção: "Remove off-stage objects".

Com isso, tudo o que estiver além dos limites do palco (468x60) será exibido na tela.

 

Apenas por simples "formalidade", vamos configurar as tags do flash em HTML. Para isso, ainda na aba "Export", em "Export options for:", selecione a opção HTML (Tags). Configure da seguinte maneira:

...

Align movie: Top;

...

Mode: Transparent.

 

Pronto, agora sim pode mandar exportar o seu banner em SWF!

 

Para chamar o SWF que você criou, cole o seguinte código no BODY do seu site:

<script type="text/javascript">flash_w3c("seu_arquivo.swf","banner_001","468","60");</script>

Substitua o "seu_arquivo.swf" pelo nome do seu arquivo Flash (formato swf).

 

Para fazer no Flash da Macromedia, basta adaptar a exportação do SWF às condições acima descritas para o SwishMax.

 

Um abraço a todos os leitores do melhor fórum do Brasil!

 

Atenciosamente,

Klonder.