InícioGaleriaBuscarRegistrar-seConectar-se

Compartilhe
 

 08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho!

Ir em baixo 
AutorMensagem
Weydson
Rank de Postagens
Rank de Postagens
Weydson

Número de Mensagens : 990
Idade : 29
Profissão : Internet(designer, blogueiro(a), etc).
Data de inscrição : 30/12/2007

08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Empty
MensagemAssunto: 08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho!   08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Icon_minitimeTer 08 Set 2009, 13:30

Muitos sites, portais, adotaram o banner flutuante, aquele no qual ao você passar o mouse por cima ele “cresce” pela página e mostra os detalhes da propaganda, promoções, etc.
A idéia então consiste em posicionar o filme por cima dos outros elementos e ele tem que ter o fundo transparente para não “tampar” o conteúdo.
Então chegamos a conclusão que é só deixar o filme com o fundo transparente e colocá-lo numa div com position absolute? Certo.
Primeiramente vamos ao SWF, no Flash crie um novo documento. Nesse exemplo eu criei um de tamanho 468×280.
No primeiro frame coloque a action stop() para o filme não começar sozinho.
Desenhei um retângulo que cobre todo o palco na horizontal e com altura de 60 pixels. Dupliquei ele (copia e cola) e apertei o F8 para transformá-lo em um MovieClip. Ele vai ser o nosso botão para quando passar o mouse dar o play() no filme.
Instanciei de btn e apliquei o alpha para 0%, para deixar ele transparente. E adicionei no primeiro frame a seguinte action:

btn.onRollOver = function() {
_root.gotoAndPlay(2);
}
Com essa action definimos que ao passar o mouse sobre o botão (btn) o filme irá para seguir a partir do segundo frame.
E no frame 2 em diante fiz uma animação simple para dar impressão do fundo estar crescendo para baixo. No último frame da animação também adicionei a action stop(); para o filme não voltar para o primeiro frame.
Também temos que colocar uma action para ao tirar o mouse (rolar fora) do botão a animação ir e parar no primeiro frame. E também uma para quando clicar. Essa action pode ser colocada no primeiro frame também.

btn.onRollOut = function() {
_root.gotoAndStop(1);
}
btn.onRelease = function() {
getURL(”http://rogeriolino.wordpress.com/”, “_blank”);
}
Na primeira faz com que ao tirar o mouse de cima do botão volte para o primeiro frame mas não continua o filme (stop). Na segunda tem a função getURL() que funciona como a tag no html, seus parâmetros são: página/endereço e alvo/target (_blank = nova página / _self = mesma página / _parent = pai do frame).
Com a nossa animação pronta vamos ao HTML:
Vamos colocar o SWF dentro de uma div chamada banner:





wmode” value=”transparent” />


E o nosso CSS:

#banner {
margin-left: 250px;
_margin-left: 10px;
padding: 20px;
position: absolute;
}
O hack na margin é por causa do IE.
E pronto, já podemos ver nossa propaganda flutuante funcionando.
Download do banner pronto:
Clique aqui e baixe

Fonte: http://rogeriolino.wordpress.com/

_________________
Responda ao tópico clicando no botão 08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! I_reply no topo da pagina, e os links ficarão visíveis.



Última edição por Weydson em Sex 17 Dez 2010, 16:06, editado 1 vez(es)
Voltar ao Topo Ir em baixo
http://wavenet.forumeiros.com
pjardimrs
Rank de Postagens
Rank de Postagens
pjardimrs

Número de Mensagens : 1
Idade : 44
Profissão : Internet(designer, blogueiro(a), etc).
Data de inscrição : 07/10/2009

08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Empty
MensagemAssunto: Re: 08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho!   08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Icon_minitimeQua 07 Out 2009, 20:07

Muito bom !! Era isso que eu precisava !!!
Vlew !!!!!
Voltar ao Topo Ir em baixo
alfa
Rank de Postagens
Rank de Postagens
alfa

Número de Mensagens : 13
Idade : 30
Profissão : DJ.
Data de inscrição : 06/09/2009

08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Empty
MensagemAssunto: Re: 08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho!   08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Icon_minitimeQui 19 Nov 2009, 13:13

lol
Voltar ao Topo Ir em baixo
http://www.radio-loler.net
estebandiliberti
Rank de Postagens
Rank de Postagens
estebandiliberti

Número de Mensagens : 1
Idade : 32
Profissão : Internet(designer, blogueiro(a), etc).
Data de inscrição : 30/11/2009

08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Empty
MensagemAssunto: Re: 08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho!   08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Icon_minitimeSeg 30 Nov 2009, 01:25

Procurei essas informações no google por horas !!
finalmente achei, muito bom.

Obrigado
Voltar ao Topo Ir em baixo
williamvianadeavila
Rank de Postagens
Rank de Postagens
williamvianadeavila

Número de Mensagens : 1
Idade : 28
Profissão : Internet(designer, blogueiro(a), etc).
Data de inscrição : 09/12/2009

08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Empty
MensagemAssunto: Banner Flutuante   08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Icon_minitimeQua 09 Dez 2009, 23:25

Otimo post. Estava procurando algo assim a algum tempo. Muito bom mesmo. Obrigado pela ajuda.
Voltar ao Topo Ir em baixo
wavenet
Rank de Postagens
Rank de Postagens
wavenet

Número de Mensagens : 1
Idade : 40
Profissão : Internet(designer, blogueiro(a), etc).
Data de inscrição : 16/12/2009

08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Empty
MensagemAssunto: Legal   08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Icon_minitimeQua 16 Dez 2009, 08:36

Tava procurando isso mesmo..

vou colocar pra funcionar
Voltar ao Topo Ir em baixo
Massupilami
Rank de Postagens
Rank de Postagens
Massupilami

Número de Mensagens : 46
Idade : 34
Profissão : Locutor(a) FM.
Data de inscrição : 29/12/2009

08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Empty
MensagemAssunto: Re: 08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho!   08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Icon_minitimeTer 29 Dez 2009, 01:01

Your search term
Voltar ao Topo Ir em baixo
ro_sts
Rank de Postagens
Rank de Postagens
ro_sts

Número de Mensagens : 1
Idade : 31
Profissão : Internet(designer, blogueiro(a), etc).
Data de inscrição : 29/12/2009

08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Empty
MensagemAssunto: Re: 08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho!   08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Icon_minitimeTer 29 Dez 2009, 08:19

Mto bom...
Voltar ao Topo Ir em baixo
pixie
Rank de Postagens
Rank de Postagens
pixie

Número de Mensagens : 8
Idade : 43
Profissão : DJ.
Data de inscrição : 29/12/2009

08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Empty
MensagemAssunto: Re: 08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho!   08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Icon_minitimeTer 29 Dez 2009, 20:39

ora está aqui uma ideia muito boa, parabéns. 08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Icon_smile
Voltar ao Topo Ir em baixo
Massupilami
Rank de Postagens
Rank de Postagens
Massupilami

Número de Mensagens : 46
Idade : 34
Profissão : Locutor(a) FM.
Data de inscrição : 29/12/2009

08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Empty
MensagemAssunto: Re: 08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho!   08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Icon_minitimeQui 21 Jan 2010, 01:24

ok
Voltar ao Topo Ir em baixo
markinhos
Rank de Postagens
Rank de Postagens
markinhos

Número de Mensagens : 45
Idade : 44
Data de inscrição : 02/01/2009

08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Empty
MensagemAssunto: Re: 08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho!   08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Icon_minitimeQua 27 Jan 2010, 21:38

muito bom amigo
Voltar ao Topo Ir em baixo
Comunic
Rank de Postagens
Rank de Postagens
Comunic

Número de Mensagens : 10
Idade : 38
Profissão : Produtor(a)
Data de inscrição : 29/01/2010

08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Empty
MensagemAssunto: Re: 08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho!   08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Icon_minitimeSex 29 Jan 2010, 23:30

interessante demais, vou baixar o banner.
Voltar ao Topo Ir em baixo
raiguare
Rank de Postagens
Rank de Postagens
raiguare

Número de Mensagens : 24
Idade : 39
Profissão : Produtor(a)
Data de inscrição : 07/02/2010

08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Empty
MensagemAssunto: Re: 08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho!   08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Icon_minitimeDom 07 Fev 2010, 14:27

legal
Voltar ao Topo Ir em baixo
gilvanrangel
Rank de Postagens
Rank de Postagens
gilvanrangel

Número de Mensagens : 4
Idade : 33
Profissão : Temporariamente sem serviço(desempregado(a)).
Data de inscrição : 09/02/2010

08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Empty
MensagemAssunto: Re: 08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho!   08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Icon_minitimeTer 09 Fev 2010, 19:55

show de bola! vou testar no meu site!
Voltar ao Topo Ir em baixo
Will
Rank de Postagens
Rank de Postagens
Will

Número de Mensagens : 1
Idade : 37
Profissão : Internet(designer, blogueiro(a), etc).
Data de inscrição : 05/03/2010

08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Empty
MensagemAssunto: Re: 08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho!   08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Icon_minitimeSex 05 Mar 2010, 16:24

Valew ja vou colocar em pratica
Voltar ao Topo Ir em baixo
denisef
Rank de Postagens
Rank de Postagens
denisef

Número de Mensagens : 1
Idade : 36
Profissão : Internet(designer, blogueiro(a), etc).
Data de inscrição : 22/04/2010

08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Empty
MensagemAssunto: Re: 08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho!   08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Icon_minitimeQui 22 Abr 2010, 10:17

Muito interessante! Vou fazer o download!
Voltar ao Topo Ir em baixo
djthoty
Rank de Postagens
Rank de Postagens
djthoty

Número de Mensagens : 6
Idade : 42
Profissão : DJ.
Data de inscrição : 22/04/2010

08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Empty
MensagemAssunto: Re: 08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho!   08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Icon_minitimeQui 22 Abr 2010, 12:42

ok
Voltar ao Topo Ir em baixo
limivam
Rank de Postagens
Rank de Postagens
limivam

Número de Mensagens : 1
Idade : 44
Profissão : Internet(designer, blogueiro(a), etc).
Data de inscrição : 29/04/2010

08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Empty
MensagemAssunto: Re: 08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho!   08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Icon_minitimeQui 29 Abr 2010, 15:37

Parabéns.... muito bom ....
Voltar ao Topo Ir em baixo
hotbuttred
Rank de Postagens
Rank de Postagens
hotbuttred

Número de Mensagens : 23
Idade : 25
Profissão : Internet(designer, blogueiro(a), etc).
Data de inscrição : 06/05/2010

08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Empty
MensagemAssunto: Re: 08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho!   08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Icon_minitimeQui 06 Maio 2010, 04:05

Uhuuuuu Meu Sonho e eu mesmo fazer um desses como nao consigo vou baixar...
Voltar ao Topo Ir em baixo
Erika
Rank de Postagens
Rank de Postagens
Erika

Número de Mensagens : 27
Idade : 54
Profissão : Locutor(a) Comercial.
Data de inscrição : 30/08/2009

08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Empty
MensagemAssunto: Re: 08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho!   08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Icon_minitimeSab 08 Maio 2010, 13:09

legal obrigaduuuuuuuuuuu
Voltar ao Topo Ir em baixo
Julio Ribeiro
Rank de Postagens
Rank de Postagens
Julio Ribeiro

Número de Mensagens : 12
Idade : 31
Profissão : Locutor(a) FM.
Data de inscrição : 20/05/2010

08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Empty
MensagemAssunto: Re: 08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho!   08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Icon_minitimeSex 21 Maio 2010, 09:10

^^
Voltar ao Topo Ir em baixo
chupa
Rank de Postagens
Rank de Postagens
chupa

Número de Mensagens : 1
Idade : 29
Profissão : DJ.
Data de inscrição : 22/05/2010

08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Empty
MensagemAssunto: Re: 08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho!   08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Icon_minitimeSab 22 Maio 2010, 22:48

aeeeee
Voltar ao Topo Ir em baixo
joaopereira
Rank de Postagens
Rank de Postagens
joaopereira

Número de Mensagens : 5
Idade : 29
Profissão : Só entrei pela parte pornografica.
Data de inscrição : 08/08/2010

08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Empty
MensagemAssunto: Re: 08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho!   08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Icon_minitimeDom 08 Ago 2010, 08:39

vamos ver.
Voltar ao Topo Ir em baixo
edugja
Rank de Postagens
Rank de Postagens
edugja

Número de Mensagens : 13
Idade : 30
Profissão : DJ.
Data de inscrição : 11/08/2010

08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Empty
MensagemAssunto: Re: 08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho!   08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Icon_minitimeQua 11 Ago 2010, 10:07

DAhora
Voltar ao Topo Ir em baixo
portalbatatais
Rank de Postagens
Rank de Postagens
portalbatatais

Número de Mensagens : 1
Idade : 43
Profissão : Internet(designer, blogueiro(a), etc).
Data de inscrição : 17/12/2010

08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Empty
MensagemAssunto: Re: 08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho!   08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Icon_minitimeSex 17 Dez 2010, 16:23

muito massa mesmo
Voltar ao Topo Ir em baixo
souza01
Rank de Postagens
Rank de Postagens
souza01

Número de Mensagens : 67
Idade : 27
Profissão : Locutor(a) Comercial.
Data de inscrição : 01/08/2011

08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Empty
MensagemAssunto: Re: 08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho!   08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Icon_minitimeSeg 01 Ago 2011, 16:16

blz
blzllll
Voltar ao Topo Ir em baixo
damacio
Rank de Postagens
Rank de Postagens
damacio

Número de Mensagens : 6
Idade : 28
Profissão : Produtor(a)
Data de inscrição : 06/02/2012

08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Empty
MensagemAssunto: Re: 08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho!   08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Icon_minitimeQua 20 Jun 2012, 19:09

123
Voltar ao Topo Ir em baixo
Conteúdo patrocinado




08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Empty
MensagemAssunto: Re: 08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho!   08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho! Icon_minitime

Voltar ao Topo Ir em baixo
 
08/09/2009 - Banner Flutuante FLASH **passa o mouse e aumenta de tamanho!
Voltar ao Topo 
Página 1 de 1

Permissão deste fórum:Você não pode responder aos tópicos neste fórum
WaveNet :: Conteúdo para Rádios :: Para seu site-
Ir para: