05/04/2008 - 5:36 > 20.636 Visualizações > 51 comentários

Criando um banner animado

Olá pessoal.
Nesta vídeo aula, iremos aprender a criar um banner animado em gif, feito pelo Fireworks CS3. Desta vez, teremos a participação da minha querida “genitora” que nos prestigiará com sua linda voz (risos). Trabalharemos com frames e velocidade da animação (FPS – Frames por segundo).
Bom, brincadeiras a parte, espero que gostem deste conteúdo.

Assista à vídeo aula

Posts relacionados

Felipe Cardozo

É sócio diretor do MX Masters, portal de desenvolvimento especializado em vídeo aulas. Trabalha com ferramentas OpenSource como Wordpress, Magento entre outros, além de ministrar palestras em universidades do Rio de Janeiro.

Outros posts deste autor

Este autor atualmente possui 281 posts

Veja todos os posts de Felipe Cardozo

Comentários / Deixe seu Comentário

51 respostas para 'Criando um banner animado'

Lucas Tomasi Diz:
5/04/08 às 12:14
Esse efeito é muito bom.. utilizei ele bastante quando aprendi a usá-lo.
Eu utilizo o FireWorks 6 ou o MX (porque no programa fala mx, mas nos creditos fala6, então eu não sei ao certo) e invez de ficar copiando o conteudo de cada frame pra colar no próximo eu utilizo o o dupliced frame, que duplica o frame selecionada quantas vezes eu quiser. Essa opção não tem no FireWorks CS3?

Abraço
Rodolfo Maggessi Diz:
16/04/08 às 14:28
Felipe Cardozo, estive assistindo suas vídeo aulas e estou inteiramente satisfeito!

tenho uma pergunta… teria como incluir um efeito de fade nessa animação?

bom.. estou pensando agora!
de repente teria como criar o efeito copiando a imagem do alterando o brilho dela em cada etapa.

seria assim ?
ou teria como aplicar um efeito direto?

obrigado!
Felipe Cardozo Diz:
16/04/08 às 18:50
Rodolfo, é isso mesmo! Está certíssimo. Neste caso, você cria 10 frames por exemplo e a cada frama, você tira 10% da transparência. Isso vai resultar no fade.

Abçs
Guidha Capelo Diz:
29/04/08 às 19:16
Adorei ! mas adorei também sua mãe! Foi 10!!!
beijo pra ela.
jhuliocezar Diz:
1/05/08 às 2:29
e aew felipe blz kra fiz todos os passos dessa video aula que por sinal ta blz parabens mais um vez, bem mais quando fui querer colocar o gif acho que e isso em um site que tava pretendendo criar na hora de vizualizar no IE a animaçao nao funciona tipow fica so a primeira imagem parada oque aconteceu tem que configurar algo onde eu errei?
jhuliocezar Diz:
1/05/08 às 2:30
ops gif nao e um banner kkkkk
Felipe Cardozo Diz:
1/05/08 às 4:49
Antes de visualizar ele no IE (apertando o f12), você precisa selecionar a opção (Animated GIF WebSnap 128) que fica em properties no centro inferior da tela de trabalho do FW.

Na hora de exportar, você também tem que selecionar esta opção.
Luisa Diz:
1/05/08 às 17:49
Oiii. eu utilizei esse efeito tb e deus certo …só que estou com
dificuldade de colocar o banner em uma home Page…. eu até coloco
mas quando vou vizualiza-lo ele não fica animado!

oque tenho que fazer?
Felipe Cardozo Diz:
1/05/08 às 18:06
Oi Luisa,

Antes de visualizar ele no IE (apertando o f12), você precisa selecionar a opção (Animated GIF WebSnap 128) que fica em properties no centro inferior da tela de trabalho do FW.

Na hora de exportar, você também tem que selecionar esta opção.
Sálvio Diz:
4/05/08 às 1:57
Muito engraçado Felipe!!!!
Suas aulas são ótimas e descontraídas e isso é ótimo.
“- Já jantou ??”
ehehehe
Um abraço pra sua mãe.
Falou!
Felipe Cardozo Diz:
4/05/08 às 2:18
hehehe!
Valeu Sálvio!

Abçs
Henrique Diz:
19/05/08 às 12:46
Felipão

Estou clicando no New/Duplicate Frame e ele está copiando um frame para o outro automatico, quando apago algum item em um frame ele pega e apaga em todos…….

Como faço para destravar essa opção?

Valeu….Abraços
Henrique Diz:
19/05/08 às 15:28
Felipão…..

To aqui aguardando a resposta, quando puder?
Só estou dependendo disto para colocar a mão na massa….
Valeu….
Felipe Cardozo Diz:
19/05/08 às 16:35
E aí Henrique, beleza?

Ué, não era pra isso ocorrer. O certo, é quando você apagar um item de um frame, o item permanecer no outro.

Fiz o teste aqui, e está tudo ok. Você usa o FW CS3?
Henrique Diz:
19/05/08 às 16:49
Uso sim……

Pois então, pensei que talvez alguma opação estivesse marcada aqui no meu FW….

Ixiii…..o jeito é arrumar outro e instalar né
Felipe Cardozo Diz:
19/05/08 às 20:12
Henrique!

Creio que não precise desinstalar, mas qual o caminho do procedimento que você está fazendo para duplicar os frames? Tem que tomar cuidado, porque existe a opção de duplicar layer e duplicar frames.
Lili Diz:
27/05/08 às 20:58
Adorei!
Danielle Teixeira Diz:
15/06/08 às 23:11
Ameiii ^^ adoreii mto massa!!! essa video-aula, mais uma perguntinha eh melhor trabalhar com flash ou gif para um site? É só uma duvidazinha mesmo pq me disseram q gif qse ninguem usa mais. Me tire essa duvida please
Felipe Cardozo Diz:
16/06/08 às 17:21
Dani, esse negócio de que gif está ultrapassado é lenda. Você usa de acordo com o tamanho e necessidade.

Se for uma animação grande, pode usar flash, mas se for coisa simples, um gif resolve, pois é bem mais leve.

[]´s
Drialli Diz:
24/06/08 às 12:02
mtooo bommmm
todo mundo fala como fazer mas esqce
de explicar como salvar
me ajudouuu mtooo msmo!!
Raphael "phzinho_zrvtm" Diz:
3/09/08 às 15:54
Nhia MaNô..vlw aiii….

Fiko Bom hehe…
Danilo dos Santos Silva Diz:
6/09/08 às 10:57
Esse é o Felipão deixa de jantar pra fazer mais uma video aula pra galera XD mais jante antes mano qualquer dia vc desmaia durante uma video aula Haha brincadeira a video aula foi muita e la vou eu tentar fazer meu banner FUI….. BRIGADUUUUUU
Ednardo Max Diz:
4/10/08 às 10:18
Felipe, minha dúvida é seguinte:

conseguir mais definição na hora de exibir o banner no site!

fiz um aqui e salvei em websnap 256, mas mesmo assim não obtive alta qualidade. Como devo proceder?

Obrigado.
Felipe Cardozo Diz:
9/10/08 às 11:23

Fala ae Ednardo, tudo bem?

Todo gif perde a qualidade. Mas existe uma opçãozinha na hora de exportar como gif que se chama “dither”. Marque em 100% e já dá uma grande melhorada…

[]´s
Márcio Flávio Diz:
5/12/08 às 17:03
Valeu cara, to a um tempão tentando aprender fazer essi, só agora achei essa aula e gostei d+, até aprendi a fazer já, obrigado.

Achei 10.
Valquiria Diz:
9/01/09 às 16:15
Olá Felipe, descobri o seu site e me apaixonei, muito bom mexer com o FW, só sabia no ps, mas percebi que o fw eh mto mais facil!! valew pelas dicas!
tenho alguns problemas qe o meu fw eh CS4, e nao consigo achar algumas coisas que vc ensina… como por exemplo pra fazer os frames do gif.. vc poderia me ajudar???
valew.
claudio Diz:
4/02/09 às 18:29
Por essas e outras fiquei fã desta comunidade .Valeu !!!!
Guidha Cappelo Diz:
6/03/09 às 11:11
Oi Felipe!!! Quanto tempo!!!
Meu querido, aconteceu um probleminha que não consigo resolver: o banner não funciona no blogspot. Estou colocando como imagem, já coloquei como postagem mas fica estático, Só o primeiro frame aparece. Será que não funciona nos Blogs?
Fico aguardando tua resposta.
Ah! Nunca mais recebi seus emails, mudou alguma coisa?
Um grande abraço
Guidha

E sua mãe como vai??? Um beijo pra ela!
Felipe Cardozo Diz:
6/03/09 às 14:13

Olá Guidha, tudo bem?

Você tem que prestar atenção na hora de exportar o arquivo. tem que ser em gif animado.

Ele funciona em qualquer lugar.. Mas primeiro, faça um teste off-line.

[]´s
Renato Diz:
31/03/09 às 21:41
e aew felipe, entaoo cara euu fiz tudo certinho salveii tbb
mas na hora deo de importa pra inicia o site
o restante do site tbb fica animado oq eu faço pra somente ele fica animadoo ??

abraçao
Felipe Cardozo Diz:
1/04/09 às 10:59
Olá Renato, tudo bem?

Mas você está salvando tudo ? O banner e o site? O banner tem que ser feito separadamente do site.

Tente novamente fazendo SOMENTE o banner animado.

Ele deve ser inserido no site através do Dreamweaver.

[]´s
Aline Diz:
9/04/09 às 21:03
Nossa aula show,mas a sua mãe foi mais show ainda ahaahha
Luís Filipe Diz:
28/04/09 às 20:31
Bem gente.Por favor me responda.Eu fiz um banner 60X120.Mas o que acontece.Eu queria destibuir esse banner.Mas so de a pessoa clicar nele ja vai para o meu site,ou precisa configurar mais?Tipo assim.Eu fiz,ai eu coloco ele,precisa hospedar,o que eu faço.HELP ME!
felipe martins Diz:
12/05/09 às 5:07
caro luiz felipe(puxa, tem felipe aki amiude!)

é só vc inserir o codigo fonte do seu banner!
Jeferson Marcelino Diz:
12/05/09 às 13:53
Como insiro exportar um banner do Fireworks para o Dreamweaver?
Celso Diz:
16/05/09 às 1:54
Blz Felipe! A participação especial da sua mãe, descontraiu a aula.
Muito bom mesmo, além da participação dela, a vídeo aula foi 10,como sempre. Valeu pelas dicas.
Alexandro Ferreira Diz:
23/05/09 às 19:57
Olá, Felipe… Vim parabenizar vc por todas estas video aulas… parabens por sua competencia e por essa atitude de compatilhar o conhecimento com outras pessoas.. Sou estudante de informática e nesse período estou pagndo uma cadeira “Programação Web” e suas aulas foram de muita importancia ajudar no meu projeto…
Destou assistindo suas aulas desde a primeira… ja tow ficando expert hehehe… saiba que muitas pessoas assistem as videoaulas as nem sempre deixam aqui o recado… só que nesssa aqui nao pude deixar de elogiar proncipalmente pela participacao de sua mae… heheh ficou muito legal heheheh!
Uma vez mais obrigado pelas videoaulas e parabens!
Sniper Sinister Diz:
27/05/09 às 11:54
Ola Felipe uma otima aula realmente depois da aula atingir otimos conhecimentos e vontade de aprender mais e mais. Poderia me responder uma duvida? Eu fiz um banner de fundo e uma animação em cima como no seu video, mas ao dar play a animação funciona perfeitamente mas o fundo do banner some e so volta a aparecer no frame um da animação. O que eu faço pra animação funcionar sem ter q o fundo suma e fique fixo junto com a animação abraços.
Pablo Diz:
2/06/09 às 0:20
Bah, valeu. Foi de grande ajuda. Vou até dividir minha experiência aqui.
Estou criando meu sistema interno para os sites e utilizo a mesma página para mostrar a famosa frase “Cadastrado com sucesso!” com o ícone verdinho. Porém ao cadastrar pela segunda vez, tudo acontece tão rápido que a impressão que dá é que não aconteceu nada, ou seja, a mensagem de sucesso continua no mesmo lugar com o ícone alí. Utilizando o gif animado, sempre que cadastra vamos ter a animação (configurando pra no looping, é claro).
Ficou muito bonito e prático.
GABYZYNHA Diz:
1/07/09 às 12:54
POR FAVOR ME EXPLICA DE NOVO???
David CHC Diz:
3/07/09 às 18:21
@GABYZYNHA, reveja de novo a video aula, tento duvida, poste no forum do mxmasters
Emilio-SoftBom Downloas Diz:
17/07/09 às 12:35
Excelente seu Site…muito bom mesmo.
Tutoriais bem didáticos, alegres, e melhor…facil assimilação.
Fico alegre em encontrar um site assim, e com certeza vou divulgar aos meus filhos e amigos, pois este é conteudo que todos precisam acompanhar.
Parabéns mesmo.
daniel Diz:
19/08/09 às 20:47
Oiie mãe do felipe, ISAHSAAIHSHIASIHSAHIASIIAHS’ SHOW o video (Y)
se puder me adc no msn pra me ajuda mais aew.
deniel_bessa@hotmail.com
abraçoos (Y)
pcezar Diz:
29/08/09 às 16:06
Show, muito bom fellipe!
alexandre Diz:
16/10/09 às 3:13
felipee me ajuda mano , quando eu vo salvar lá no image preview aparece a seguinte mensagem : Could not complete your request an error ocurred.
ajuda ae (:
Valeria Diz:
26/11/09 às 14:49
Oi,
qdo digito uma palavra no primeiro frame ok, no segundo frame aparece a palavra que coloquei aí eu apago e coloco outra palavra e automaticamente apaga a primeira palavra(substitui)assim com todas as frames, e nao consigo fazer a animação, alguem pode me ajudar?
Meu Fireworks è a versão MX
Valeria Diz:
26/11/09 às 15:18
CONSEGUIIIIIIIIIIIIII!!!!!!!!!Obrigada mas consegui arrumar os frames, agora consigo digitar uma palavra em cada frame.beijão
Bruno Diz:
4/12/09 às 11:36
muito bom
que engraçado sua mae
Michel Diz:
8/01/10 às 16:52
Aehh Fera vlew mesmo pela aula !!! Aprendi muito com isso
Vlw abraços !!!
Fica com Deus !!!
Felipe ( Japao ) Diz:
14/03/10 às 23:30
Ola Felipe.
Meu chara.
Quero agradecer por seus vídeos. Foram de muita ajuda e tenho certeza que ainda utilizarei outras aulas .
Com os vídeos construí um site, que já esta no ar.
Mas ainda resta uma duvida criei um banner com fotos de CDs em jpeg, mas gostaria de fazer o banner rodar sem aparecer o final branco logo em seguida iniciar com a primeira foto.
Esse banner eu uni Ctrl+G e criei o gif animado,
Se o mestre do fireworks puder me ajudar com essa duvido fico mais uma vez muito agradecido.

Felipe (Japao).
Kevin Diz:
28/08/10 às 11:28
Parabens Felipe Cardozo, muito boa video aula.