15/04/2009 - 19:02 > 26.241 Visualizações > 81 comentários

Trabalhando com Expandable Banner

Fala rapaziada do MX Masters, Michel Araújo com mais uma video-aula. Hoje vamos criar um Expandable Banner, um tipo de midia bem utilizado na web, onde criamos um banner com a possibilidade de mostrar muito mais informações, fazendo-o expandir ao passar do mouse do usuário.

Vamos criar o banner no Flash, e inseri-lo na página usando um pouco de CSS e JavaScript. Espero que aproveitem!

Boa aula!

Posts relacionados

Admin

A equipe MX é composta por administradores completamente qualificados responsáveis pela atualização diária do portal MX masters e seus sites afiliados.

Outros posts deste autor

Este autor atualmente possui 207 posts

Veja todos os posts de Admin

Comentários / Deixe seu Comentário

81 respostas para 'Trabalhando com Expandable Banner'

Hugo Luiz Diz:
15/04/09 às 19:14
Parabéns! muito bom essa vídeo aula… se tiver + uns banner daora feito esse coloca vídeo aula ai grande Michel Araújo. vlw. agradeço muitooOO!
Francisco Diz:
15/04/09 às 20:43
Felipe sei que aqui não é o lugar certo, mas quando será lançada a última parte da aula de tableless ?
Abraço..
kleber Diz:
15/04/09 às 20:44
Show

vc é o kra
Carlos Henrique Diz:
15/04/09 às 21:02
Caramba muito bom mesmo esse video! estou aprendendo muita coisa aqui no MX parabens a todos que fazem o MX masters!
Alex Diz:
15/04/09 às 21:06
Valew!
Bom demais.
continue assim.
grato.
Felipe Cardozo Diz:
15/04/09 às 22:09
Oi Francisco, tudo bem?

Terminarei antes do fim de semana.

[]´s
Matheus k9 Diz:
15/04/09 às 22:46
Opa eai michel pow ensina a fazer outros banners tbm véi, cara ta de parabéns pow cara serio mesmo sem comentarios quando agnte pensa que acabou, ai que só começa rsrsrrss
vlw aew pessoal…..
Abraço Michel …
Abraço Felipão..

A propózito se o Felipe Cardozo ler este post da um up aqui p mim pow sou seu fã véiii Flww…
Daniel Breitschaft Diz:
16/04/09 às 0:20
Olá,

Excelente vídeo-aula, bem explicada e organizada. Espero ver mais vídeo aulas sobre Flash, com esta qualidade.
Abraço…
Sergio Araujo Diz:
16/04/09 às 0:33
Fala aew Michel,

Olha parabens pela iniciativa dessa video, estava fantastica… So que eu utilizo o Flash CS4 e compreendo que muitos ainda não utilizam, acredito que não mude muita coisa para fazer esse banner. De qquer forma vou tentar.

abraços e continue assim dividindo conhecimentos.
Felipe Cardozo Diz:
16/04/09 às 0:48
Fala ae Matheus, beleza?

Que isso? Meu fã? Nem sou artista…hehehe

Mas valeu pelo carinho…

[]´s
adriano pereira Diz:
16/04/09 às 10:27
voces estao de parabens
Andre Ortiz dos Santos Diz:
16/04/09 às 10:31
Muito bom.. bom mesmo… nossa eu acho q poderia ter aulas destas sempre…..

Parabens…
Dionei Cardozo Diz:
16/04/09 às 10:59
Video-aula perfeita, fou muito boa mesmo, parabens Michel Araujo, vc esta de parabens, e só uma pergunta Felipe, quando volta o MX web tv?

To com saudades ja.
kkkkkkkkkkk
Gabriel Bruno Meira / 15 Anos / Colniza - MT / Forum ochii Diz:
16/04/09 às 11:00
Yahoooooooooo!
e ai povo Michel outra incrivel aula de Flash e ainda mais com CSS e JS (((xoke))) de bolete.
Vou tentar fazer aki vou ver se consigo neh.
————-
Ai Felipe Tu arumou o rodape dos comen
achei que ficou melhor mais isso é so um cometario ele vai se auto destruir junto com o teu pc em (5 segundos) se afastece e ousa a esploção!!!
O.o – se isso fosse verdade ninguem lia comentarios mais rs
Matheusk9 Diz:
16/04/09 às 12:22
Eita rapá num vo durmi hj não… Vlw aew Felipe….
Direto de Corumbá MS para o MX masters…. Valeww!!!
Filipe Goes Diz:
16/04/09 às 17:18
Muito boa mesmo, a video aula foi 100% aproveitada, alias, Michel A. apresenta um modo muito bom de ensino
Parabéns a você e todos do MX Masters, ae Felipe Xará!
Abraço pra você, admiro muito você tbm! um grande profissional
[]’s flw
Adir Renato Diz:
16/04/09 às 20:39
Parabéns !!!
Vamos lá pessoal, se não quisermos ficar para atrás…
Temos que estudar!!!
E convenhamos…”É muito show este universo web ! ”
Aprendendo CSS e Javascript faremos coisas simples e muito eficiêntes !!!! Sei que aqui não o lugar… mas porem “fica aí uma sugestão de vídeo aula “.
Grande Abraço e mais uma vez parabéns pela video aula, acabei aprendendo mais uma dica show … crop -> clip
Felipe Cardozo Diz:
16/04/09 às 21:24
Gabriel, não entendi!!!

[]´s
Felipe Cardozo Diz:
16/04/09 às 21:26
Além de explicar, o Michel é um colunista super aplicado e em dia com seus prazos com a entrega do material…Preciso dizer mais algo?

[]´s
Adir Renato Diz:
16/04/09 às 23:54
Parabéns pela equipe !!!!
Parabéns Michel.
Antonio Cezar Diz:
18/04/09 às 17:03
Gostei ! Muito bem explicado, com detalhes importantes…
ivan Diz:
19/04/09 às 20:28
Por favor tem como alguem vrificar porque não esta funcionando está aula obrigado
Juanele Silva Diz:
22/04/09 às 19:59
Michel, muito legal suas aulas! parabéns! gostaria que vc ensinase a fazer uma radio, com umas 10 musicas de minha escolha.vi um video aqui porém toca musicas de uma radi oque ja existe. por favor faça o video!!
Juanele Silva Diz:
22/04/09 às 20:00
tenho um site porem só sei fazer tocar 1 musica. queria uma radio nao um player.
JSM Diz:
23/04/09 às 15:10
Tah muito bom a video aula…Otima
mais no meu caso eu nao trabalho com div…por um simples problema de nao conseguir alinhar a Div no centro como vc fez…=/
Matheusk9 Diz:
23/04/09 às 15:16
Olá Felipão não achei outro lugar aonde postar aqui vai a pergunta…
Gostaria de saber como faço para achar aquelas musicas para sites em flash, musicas suaves ou algo como essas que vcs usam em suas aberturas pode me responder?
Raphael Azevedo Diz:
2/05/09 às 14:57
Felipe.. mais uma vez parabens pelo trabalho e pela paciencia..

mas o vídeo aqui em casa está com um probleminha… ele não aparece fica piscando.. se você puder dar uma ajuda, obrigado

Raphael Azevedo
Maciel Diz:
8/05/09 às 23:09
Boa Noite Michel Araújo, Suas aulas sao otimas queria ver com vcs se e possivel ensinar a fazer uma banner igual a esse modelo que eu achei bem interessante. esse banner se encontra no site http://www.rededor.com.br/

Por favor me responde
Atenciosamente Maciel
Gabriel Bruno Meira / 15 Anos / Colniza - MT / Forum - ochii Diz:
9/05/09 às 11:06
Ai Felipe so foi ver agora que vx tinha
postado uma pergunta ai eu disse que gostei do novo modelo de comentario la eu tinha escrito “comen” errei foi mal ah e fiz uma brincadeira dizendo que ia esplodir a mensagem

Obs: estou postando no dia 09/05/2009 ai ja esta com a nova estrutura e outro modele de comentario que vou avalialo em outro post relevante a isto ok
vlw

desculpe ademora

(@_+) – ochii
Maciel Diz:
9/05/09 às 18:31
Boa noite, Michel Araujo so retificando o link do site onde o banner esta, este link que eu coloquei esta redirecionando para uns do seus site o verdadeiro link é http://www.rededor.com.br/meddor.php

Atenciosamente Maciel
william Diz:
11/05/09 às 10:45
Meu maravilha vcs são muito boms

Brigadão
Leandro Hashimoto Diz:
12/05/09 às 0:44
Que parabenizar todos integrantes do MX Master, e dizer que estou cada dia mais empolgado com as videos aulas desse site,estou aprendendo sempre + e + com voces muito obrigado!!
Valew…
Dennis Diz:
12/05/09 às 15:28
To começando nessa are de web design
queria um topo para colocar no meu site
um banner alguma coisa legal q cham-se atenção dos clientes…desde ja agradeço
Sou de Belém Pará
Charlie Diz:
13/05/09 às 0:22
Parabéns Michel, bastante explicativa e ordenada a vídeo-aula. Ajuda bastante gente!
Aproveito para elogiar o trabalho de toda a equipe mxmaasters…

Um abraço e vlw!
wallax matos Diz:
18/05/09 às 22:00
ola michel cara parabens mesmo e isso nego
eu sou um fã seu pois alem de tudo tu e baiano
suas aulas são otimas cara eu queria sugeri uma aula
“to ate precisando dela rsrsrrs” e um efeito que coloca no menu…
para melho explicação tipo desse site

http://www.buffetfleury.com.br

eu achei muito interresante

abraço e é isso ai sucesso
Diego Diz:
27/05/09 às 2:48
Video Aula fico Bom mais tipo veio acho que o valor do carro ta mUITOOOO caro veio 800.000.000 OLOKO fala serio mano
JARDEL CORREA Diz:
27/05/09 às 12:42
Nossa Animal essa aula , parabens mesmo.. ainda mais quando tem CSS e js rss. mais tenho uma duvida eu uso o CS3 e não consegui fazer o esquema da transparencia o firefox , eu coloque o codigo

só funcionou o IE7 . poderia me ajudar? obrigado
Deus abençoe!
Joacir Diz:
30/05/09 às 13:41
Tadin, preciza de um curso…
Zuera cara c é muito gênio !!!!!!!
Cara
c é muito bommmmm mmmmmmmmmmmm !
Tomara que quando eu tiver maior seja quinem você xD.

Vlwwww c é bom memo !
Ali no começo so foi para tira um sarro xD
Carlos André Diz:
10/06/09 às 10:49
Olá caro Michel Araújo, parabems mais uma vez gostaria de saber se tem como faser um flash sem o fundo como se fose PNG? obrigado
Fernando Diz:
11/06/09 às 13:08
Parabéns pela vídeo aula. Eu utilizo bastante as aulas de flash, tableless, css em meus trabalhos etc.
Queria perguntar só se esse recurso é usado no site da Adidas … http://www.adidas.com/br/homepage.asp
(E o redimensionamento seria feito como?)
Vlw
Continue assim!
Tiago Diz:
17/06/09 às 19:30
meus parabens essa video aula ira me ajudar muito.
humberto de souza Diz:
17/06/09 às 20:05
Por isso e muito que so cliente e compro os dvd do mx masters .
Que nao compro nao perca tempo sao otimos.

ARARANGUA-sc
Felipe Diz:
23/06/09 às 11:07
Não sei se vai dar certo, mas já devo agradecer pela aula.
Muito boa, parabéns mesmo.
Continue com as video-aulas, porque muita gente vai precisar.
Alexandre Diz:
11/07/09 às 19:56
muito show mas tenho uma duvida se vc usou o retrair no body entao so da pra por um banner expandivel na pagina? teria como por mais de 1 se tiver como seria feito ? poderia em vez de usar o retaris no bod usar na div onde vai o swf?
vlw vou postar essa duvida no forum
Jairo Augusto de Paula Diz:
12/07/09 às 14:28
Estou Iniciando nesta area de web, e parabenizo a vcs pela aula extremamente simples parabens.
LIDER Network Diz:
6/08/09 às 22:55
Parabéns Michel.

Na minha opinião, um dos melhores sites de vídeo-aulas do país, profissionalismo e competencia é a marca registrada de vocês. Sucesso!

Carlos
Analista de Sistemas
Genivaldo Diz:
14/08/09 às 8:06
Cara essa video valeu!!! me ajudou bastante!!!!
Obrigado galera da MxMasters….
junior Diz:
18/08/09 às 9:43
AS2??
Poxa, ao contrário de muitos eu nao manjo muito de AS2, achei legals o video!!!

Porém achei mais simples no AS3!

vlws
raylton Diz:
18/08/09 às 11:03
cara adorei a sua video aula muito comunicativa da pra entende numa boa mesmo Parabens
Anthonyo Diz:
31/08/09 às 1:05
MT BOM!!! PARABENS AMIGO !
Renato Diz:
8/09/09 às 17:20
Rápido, rápido, rápido…

Sou iniciante e achei rápido,
parece que é para quem já tem
noção, quem está no zero, como eu,
pode ter esse impressão.
Cristiano Diz:
16/09/09 às 2:12
Bem legal mesmo…
diego henrique Diz:
19/09/09 às 15:37
muito boa essa video aula!!!
parabens
Filipe Diz:
22/09/09 às 20:30
ola Filipe eu gostária de saber como eu hospedo o meu banner na Internet.
Ivo Sodré - Bahia Diz:
1/10/09 às 2:38
aeee parabens pela video aula mto boa, galera mto seria to aprendendo bastante com você… flw aee
Hudson Diz:
1/10/09 às 18:00
parabens!!!… Boa video aula, ajudou bastante,
Raenner Sales Diz:
3/10/09 às 1:20
Cara. Eu ODEIO PROGRAMAÇÃO, mas com essa aula eu até animei, muito boa gostei, e o interessante é que não sei muito de programação e entendi . Meu Forte e Layouts e Comunicação, mas neste caso eu amei a aula.
carlos Diz:
3/10/09 às 10:07
Muito bom esse tutorial.
Muito bom mesmo.
agora, to precisando fazer uma animação em flash
para uma apresentação de um software que eu construi.
tem algum tutorial só de animações em flash?
vlw
David CHC Diz:
3/10/09 às 10:10
@Filipe, primeiro contrate um serviço de hospedagem, vc pode conseguir gratuito, caso for pra teste. Depois Baixe um programa de FTP, se usar o dreamweaver pode configurá-lo , tem video aulas falado sobre isso. Depois coloquei o banner em sua página html, apos de testando localmente, abra o programa de ftp, conecte ao seu site, envie para pasta public_html, se sua hospedagem for linux, se for windows a página será web. Se for uma hospedagem gratuita, ele enviaram a pasta correta para enviar tanto a pasta quanto a imagem do seu banner
Guilherme Diz:
6/10/09 às 12:53
parabéns cara muito obrigado estou iniciando e era justamente o que eu precisava aprender obridado, flw….
Alexandre Diz:
7/10/09 às 13:14
Showww de aula….parabéns!!
Juares Diz:
17/10/09 às 22:10
Com esta explicação não tem como errar, estava projetando meu site e já mudei de idéia. PARABÉNS!!
Leandro Diz:
19/10/09 às 23:28
eu nao consigo assistir o video, fika tudo doido aki, o nome video log piscando… pq? (tenho o o plugin flash intalado)
David CHC Diz:
20/10/09 às 7:40
@Leandro, tente limpar o cache do seu navegador. Se vc estiver usando Internet Explorer basta vc apertar CTRL + F5, caso esteja usando o Firefox, vá em Ferramentas > Opções > Avançado. Escolha a Aba Rede, clique em Limpar agora. Veja se isso resolve.
Paulo Diz:
3/11/09 às 23:20
Oi, fiz de quase tudo certo, exceto pelo fato de que o menu que fica logo abaixo do banner fica visível, mas não dá pra clicar. Como se uma camada invisível, no caso da layer, impedisse acessar os links.
Como resolvo isto?

Abraços

Padunic
Paulo Diz:
4/11/09 às 1:42
Corrijindo…prestei melhor atenção a sua video aula e deu certo.
Parabéns! É o único tutorial decente e completo em toda web.
Pedro Lúcio Diz:
16/11/09 às 4:13
Olá,
Gostaria de saber se o efeito que havia na página inicial, com os boxes que passamos o mouse em cima ele se mexe, redimencionando. Se é em flash ou em quê….
Obrigado desde já.
David CHC Diz:
16/11/09 às 7:36
@Pedro Lúcio, tem uma vídeo aula minha ensinando esse efeito. É como jquery : http://www.videoaulasbrasil.com.br/ajax/menu-fisheye-com-jquery/
Pedro Lúcio Diz:
17/11/09 às 1:38
Valew David. Tu sempre me responde prontamente,cara. Vale mesmo !
Vou lá ver.
Luana Diz:
28/11/09 às 14:34
Olá. Gostei da video aula mas não consegui fazer igual. Segui todos os passos apesar que em certos momentos a explicação é rápida demais. No final meu baner ficou assim: cor de cima cinza,abaixo verde; o efeito de piscar não funcionou, e quando passa o mouse ele mostra a escrita na parte de baixo tão rápido que é impossível ler. Também não funcionou o clicar e ele linkar. Fiz tudo certinho. O que pode ter dado errado?
Obrigada
Bruno Soares Diz:
11/12/09 às 23:57
Olá Michel
Como vai .Parabéns pela video aula.Acabei de fazer ela aqui e com certeza farei um banner desse em minha loja virtual .Está sendo muito proveitoso fazer as aulas por aqui já que sou empresário de outro setor e gosto muito da area web.E como não tenho tempo de frequentar um curso normal aproveito otempo que eu tenho a noite após o meu expediente para aprender com vocês a arte de ser um webdesigenr.
Parabéns pela video aula me ajudou muito memso .Sucesso sempre.
Um abraço
Bruno Soares
Pedro Lúcio Diz:
14/01/10 às 0:16
Bom dia meu amigo.
Gostaria de fazer uma pergunta muito interessante, antes porém, gostaria de dizer que estou postando nesta vídeo aula, não por ter a ver com o assunto, mas para critério de depois saber onde postei. Porque realmente não há nada parecido aqui no site, nem na internet.
Pois bem, é um efeito que eu vi no site da NEXTEL (aparelhos de rádio/celular.). Perguntei inclusive ao DAVID CHC e ele me sugeriu que viesse aqui no tópico das vídeo aulas de FLASH. Na verdade eu não faço nem a mínima idéia de como chamar esse efeito, só sei que nós clicamos, seguramos e arrastamos o mouse em cima da imagem e ela gira. No caso é da linha dos aparelhos deles. É simplesmente incrível. Quando clicamos na imagem e arrastamos pros lados, ele não só gira, como também abre o flip, nos aparelhos que contém flip. Vou mandar o link da pág deles.
É espetacular esse efeito.
Aproveita e repara a modernidade do site, ele não segue um padrão de 2 ou 3 colunas, topo, rodapé, apesar de se ser em 3 colunas mas não deixam transparecer, só para nós que vimos com outros olhos mas para os demais usuários, passa batido, enfim..
Vai aqui essa excelente dica pra uma vídeo aula.
http://www.nextel.com.br/NextelWebSite/aparelhos/vitrine-aparelhos/i9ferrari.aspx?WT.ac=vitrine_i9 Ferrari&WT.slv=i9 Ferrari_sig
Ricardo Diz:
28/01/10 às 23:59
Caraca!!! Cara! muita informação importante. Pode ser feita uma porção de coisas. Sou iniciante em flash mas acho que é possivel fazer um menu drop down com isso. Vou tentar e comentar aqui caso eu consiga. Grande abraço ao Michel Araujo. Parabéns e obrigado por compartilhar o seu conhecimento.
Jardel Diz:
8/02/10 às 22:50
Felipe

suas videos aulas são mto boas.
Parabéns.

gostaria q vc me ajudace
fazendo uma videos aula
ensinando como fazer um menu com sub-menus no flash.

desde já mto Obrigado!
Tiago Diz:
15/04/10 às 1:18
Muito bom mesmo, 100% de aproveitamento continue, ajundado a gente, um abraço é o melho site que ta tendo, é mxmasters!!! vlw at++++
Ellen Diz:
6/05/10 às 10:16
Oi Michel, Parabéns, mto boa sua aula!!!
gostei mto desse banner da MXMasters que aparece inicialmente na vídeo aula, queria saber como faze-lo, por acaso vocês vão ensinar?
grata!!
David CHC Diz:
6/05/10 às 10:29
@Ellen, tem uma vídeo aula minha que mostra a utilização do plugin que realiza esse efeito, o slide show.

http://www.mxmasters.com.br/ajax/slide-show-com-jquery/
rodrigo cabral Diz:
14/05/10 às 15:50
Muito boa aula!!!
parabnss!!!!
foi muito ultil…
rafael bueno Diz:
29/07/10 às 2:09
Meu Nome é rafael bueno, eu não não sei muito de script na verdade sei os basicos, gostaria de saber se for possivel fazer um tutorial de um banner, tipo slide automatico, com um menuzinho em baixo com opções 1,2,3, Exemplo: o Banner tem um menu com 3 opções, ele está rodando as imagens automatico, lembrando que cada opção *1,2,3* é uma imagem, quando eu clicar ou passar com o mouse em cima de uma das opções ele possa ativar a animação e parar, para que a pessoa possa ler a imagem, quando eu tirar o mouse da opção a animação automatica volta ao normal passando todas as imagens, agradeço desde já, e Parabéns pelos videos.

Exemplo de Banner

http://www.milkiestore.com.br/

http://www.ccs.com/

http://www.sohtanaka.com/web-design/examples/image-slider/
Paulo Henrique Diz:
29/07/10 às 17:14
Nossa a muito tempo eu procuro um banner tipo esse…
Parabénssss…. Muito massa o site!!!!
Elza Diz:
25/08/10 às 23:54
Parabéns Michel, mais uma vídeo aula com conteúdo indispensável.

Eu já tinha ralado muito procurando tutoriais sobre o assunto, só agora aprendi.

Fiz o banner expansível com AS3 e motion tween, a anima fica legal, mas pode melhorar.
Minha vontade é ir além e fazer com a TweenMax. Penso que haja mais possibilidades de controle sobre o mouse over/out.

Fica a sugestão para outras vídeo aulas, espero que muitas outras outras venham por aí.

Grande abraço e obrigada por tudo, você é demais.