Saiba como criar um banner expansível para garantir maior visibilidade aos anúncios e incomodar menos os internautas
O banner expansível ou ampliado é um formato de anúncio que vem ganhando espaço na web por oferecer mais visibilidade que o banner convencional sem incomodar o internauta, pois a peça é exibida inteiramente somente se o visitante do site desejar. À primeira vista, o banner expansível é igualzinho ao comum. O seu impacto é notado somente quando o mouse passa sobre ele. Automaticamente, o anúncio amplia a sua área de visualização e permanece assim enquanto o cursor estiver sobre a sua superfície. Assim que o cursor é movido para outro local da página, o banner volta para o formato original, como uma cortina sendo recolhida. Como o banner expansível é feito em flash, teoricamente, ele pode exibir imagens, animações, vídeo e som das mais variadas formas. Mas, na prática, convém não exagerar. O banner tem que ser leve, para ser carregado rapidamente. Veja a seguir como criar um banner expansível com o Flash 8 e dicas para publicá-lo.
1. PRELIMINARES
Dentro do Flash 8, entre no menu File, clique em New, escolha Flash Document e confirme em OK. Em seguida, altere as propriedades do arquivo para que ele fique com as dimensões máximas do banner expandido (468 por 300 pixels). Para isso, vá até o menu Modify e clique em Document. Na janela Document Properties, insira os valores nos campos da largura e da altura e clique em OK.
2. CENAS
O banner expansível é um arquivo em flash com pelo menos duas cenas, uma para representar o banner em estado retraído e outra para o anúncio expandido. Use a combinação de teclas Shift e F2 para chamar o painel Scene. Clique no botão + para criar uma cena. Renomeie esta primeira cena para cena_retraido, e a segunda, para cena_expandido. Em seguida, selecione cena_retraido, vá até a linha de tempo e crie uma animação com as dimensões do estado retraído do banner (468 por 60 pixels) utilizando a parte superior do cenário. Ao criar as animações, fique muito atento ao fluxo de ação de cada uma delas, pois as animações só deverão partir para a cena seguinte de acordo com a presença ou não do cursor do mouse sobre a superfície do anúncio.
3. BOTÃO INVISÍVEL
Entre em Insert, Timeline e Layer para criar uma nova camada, que deverá se sobrepor às demais. Dê o nome de botão para essa layer. Pressione Ctrl e F7 para abrir a janela Components e arraste um botão (Button) para esta camada recém-criada. Na janela de propriedades do botão, dentro da aba Parameters, apague o conteúdo do campo Label. Na aba Properties, altere as dimensões de largura e altura para as do banner retraído (468 por 60 pixels) e mude as coordenadas X e Y para zero. Com o botão selecionado, pressione F8 para convertê-lo em um símbolo e certifique-se de que a opção Movie Clip está marcada. Clique em OK para confirmar. De volta à janela Properties, mude o nome de instância para botao_retraido e, na caixa de seleção Color, indique Alpha e regule a porcentagem para 0. Desta forma, o botão ficará invisível sobre o banner. Na linha de tempo, vá até o último frame da sua cena, selecione a camada botão e insira um novo frame. Com isso, você estará estendendo a ação do botão durante todo o tempo dessa animação inicial.
4. DETECTOR DE MOUSE
O botão invisível sobre o banner servirá para detectar a presença do mouse. Crie uma nova layer. Se durante o desenvolvimento da sua animação para o estado retraído do banner já tiver sido criada uma camada para conter scripts, você poderá usar essa mesma layer em vez de criar uma nova. No primeiro frame dessa camada, insira o código que determina o comportamento do banner em seu estado inicial. Para isso, selecione o frame, entre no menu Windows e clique em Actions. Ou simplesmente pressione F9. Na janela que se abre, digite:
this.botao_retraido.onRollOver =
function() {
gotoAndPlay (“cena_expandido”,1);
}
5. CENA EXPANDIDA
Hora de criar a segunda cena do banner. Chame o menu suspenso Scenes e selecione cena_expandido. Crie a animação que será exibida com o banner expandido. Repita o procedimento para a criação de um botão invisível, só que agora sobre o filme em seu estado expandido, ou seja, com 468 por 300 pixels. Dentro da janela Properties, desta vez, troque o nome de instância para botao_expandido. Lembre-se que o botão deve estar em uma camada acima de todas as outras e, na linha de tempo, sua ação deve ser estendida para toda a duração da animação.
6. CÓDIGO
Feito isso, crie uma nova layer para digitar o código ActionScript. Com o primeiro frame selecionado, chame a janela Actions e digite:
this.botao_ expandido.onRollOut =
function() {
gotoAndPlay (“cena_retraido”, 1);
}
this.botao_ expandido.onRelease =
function() {
getURL(“http://info.abril.com.br/”, “_blank”);
}
Com este código, por meio do evento onRollOut, é detectada a ausência do mouse sobre o banner. Neste caso, o banner voltará ao seu estado retraído. O evento onRelease indica o endereço para onde o visitante será direcionado caso ele clique sobre o anúncio. Por fim, salve o arquivo com o nome expbanner.fla.
7. TRANSPARÊNCIA
Antes de publicar o banner, é fundamental alterar a configuração da propriedade de transparência do arquivo. Caso contrário, um quadro branco no tamanho do documento aparecerá na página mesmo quando o mouse estiver fora da área do banner. Para isto, entre em File e clique em Publish Settings. Na janela que se abre, dentro da aba HTML, vá até o item Window Mode e selecione Transparent Windowless. Depois, na aba Formats, marque Flash e HTML. Por fim, clique em Publish e OK para gerar a animação completa do banner expansível.
8. COMPATIBILIDADE
Alguns detalhes devem ser observados ao inserir o banner em uma página usando o DreamWeaver ou qualquer outro editor HTML. Para o bom funcionamento do anúncio, é preciso que ele seja publicado dentro de uma layer. Além disso, o parâmetro wmode= “transparent” deve ser digitado junto aos outros parâmetros que ficam dentro da tag
