Daniela da Silva Holtz

Como fazer um banner com imagens em efeito Fade-In no Flash CS3? e como publicá-lo no Blogger?

Programas necessários: BLOCO DE NOTAS, PHOTOSHOP e FLASH (ADOBE)
Plataformas: BLOGGER e VILABOL
Abra o BLOCO DE NOTAS.
INICIAR>ACESSÓRIOS>BLOCO DE NOTAS (WINDOWS SEVEN)
E DIGITE DENTRO DELE O SEGUINTE CÓDIGO:

<object id=”movie”type=”application/x-shockwave-flash”
data=”SUA_IMAGEM”width=”928?height=”200?><param
name=”movie”value=”SUA_IMAGEM”><param
name=”wmode”value=”transparent”></object>

OBSERVAÇÃO IMPORTANTE: É PRECISO DIGITAR O CÓDIGO ACIMA, NÃO CAIA NA BOBAGEM DE COPIAR E COLAR, PORQUE AQUI EU USO UM CERTO TIPO DE FONTE QUE NÃO VAI SER ACEITO NO FUTURO SE VOCÊ COPIAR E COLAR. OKAY?!

SALVE O DOCUMENTO.
ARQUIVO>SALVAR COMO> DÊ UM NOME E SELECIONE O LOCAL DE FÁCIL ACESSO, POR EXEMPLO, DESKTOP (AREA DE TRABALHO)! O DOCUMENTO SERÁ SALVO EM .TXT, TUDO OKAY!

FECHE O PROGRAMA BLOCO DE NOTAS.

Abra o PHOTOSHOP
Vá em FILE>NEW> e aplique as seguintes configurações:

OK!

Fica a seu critério colocar um fundo colorido, com efeitos ou não. Vamos partir para oque interessa.

VÁ EM FILE>OPEN> e abra a primeira imagem a ser usada no banner. OK!

Clique em IMAGE>IMAGE_SIZE> e aplique as configurações que achar melhor para sua imagem no banner, eu fiz assim:

Observação: Se o meu banner tem 930 X 200 as minhas imagens tem que estar dentro desses parâmetros, independente do que vou fazer. Na configuração acima, eu dividi o banner para três imagens. Ou seja, eu vou ter que aplicar as configurações acima nas três imagens igualmente.

Após o redimensionamento nas imagens, selecione qualquer imagem com a ferramenta RECTANGULAR MARQUE TOOL> vá em EDIT>COPY> fecha a janela e abra a janela do banner (fundo) e vá em EDIT>PASTE centralize no banner (plano de fundo) a imagem colada. Faça o mesmo com as outras imagens. Tudo Okay?! Vamos unir essas layers (camadas) com o CTRL pressionado + E do seu teclado, vá unindo até formar o BACKGROUND, ou seja, uma imagem apenas.

Vá em FILE>SAVE_AS>

Dê o nome de IMAGEM_1 selecione o local para encontrar facilmente, por exemplo Desktop (area de trabalho) e salve no formato JPEG.

Observação Interessante: Vou criar mais duas IMAGENS nesse esquema. Assim consigo criar um banner sofisticado com efeito Fade In no Flash CS3.

Abra o Flash

Clique em ACTION SCRIPT 2.0

Com o palco aberto iremos configurá-lo do mesmo tamanho das IMAGENS, ou seja, 930×200. Em SIZE configure o FRAME RATE para 30, o MATCH em Default, e, RULLER UNITS em Pixels, OK!

Feito isso vamos importar as IMAGENS para livraria. Clicamos em FILE>IMPORT>IMPORT TO LIBRARY>. Selecionamos as IMAGENS a serem importadas com o CTRL+clique em cima.

Caso sua livraria não esteja aparecendo vá em WINDOW> e marque a opção LIBRARY.

Importadas, vamos dar um duplo clique na primeira imagem a ser comprimida.

Vai abrir uma caixa de seleções, vamos marcar a primeira caixa e desmarcar a segunda e digitar 80 em qualidade. Para o SWF não ficar tão grande.

Na LAYER_1 vamos renomear de IMAGEM_1. Por questão de organização.

Na livraria selecionamos, clicamos e arrastamos a IMAGEM_1 para o palco.

Nas configurações em posição X colocamos “0” (zero) em posição Y colocamos “o” (zero) também. Para se alinhar corretamente ao tamanho do palco.

Com a PLAYHEAD na 1ª keyframe selecionada clique na IMAGEM e aperte F8 para converter em MOVIE CLIP.

Em NAME você coloca IMAGEM_1, marca a opção MOVIE CLIP e clica no ponto central de REGISTRATION, OK!

Então, vamos fazer a animação.

Pra trabalhar no FLASH tem que pensar no que quer. No caso com o efeito Fade In.

Eu quero que a imagem apareça, espere um pouco para a pessoa ver e depois desapareça enquanto a outra imagem vai aparecendo.

MÃOS A OBRA!!!

Selecione a IMAGEM no palco, vai na linha da timeline, no frame 40 clica nele, e, depois aperte F6.

Volta ao frame 1 clicando nele. Clica na IMAGEM no palco. E nas propriedades da imagem (Movie Clip) em COLOR coloca ALPHA em 0%.

Feito isso clique no meio das frames entre 1 e 40 com o botão direito e clica em CREATE MOTION TWEEN.

Agora temos que colocar o tempo de espera, clique no frame 240 e aperte F6, porque daí temos 200 frames de tempo para a pessoa vizualizar a imagem.

A IMAGEM apareceu, já fez o tempo de espera e agora ela vai desaparecer novamente.

Observação: O tempo que ela vai desaparecer tem que ser o mesmo usado para ela aparecer, ou seja, de 40 frames.

Então de 240 frames vamos a 280 clicando na frame 280. Agora clique na IMAGEM do palco e nas propriedades de MOVIE CLIP abrimos o COLOR  e clicamos em ALPHA em 0%.

Novamente clicamos entre as duas frames 240 e 280 com o botão direito do mouse e selecionamos a opção CREATE MOTION TWEEN.

Criamos a primeira imagem!!!

Agora vamos pra segunda, clicamos em INSERT LAYER, renomeia de IMAGEM_2.

A segunda imagem vai aparecer quando a primeira estiver desaparecendo, portanto, a partir da frame 240 ela começa a aparecer.

Então, clique na frame 240 da Layer_IMAGEM_2 e pressione F6. E na Layer_IMAGEM_1 como não vamos mais utilizar, pode trancar com o cadeado.

Agora pegue a IMAGEM_2 na livraria e arraste para o palco, configure a posição X em “0” e posição Y em “0” também.

Clique na IMAGEM do palco e aperte F8. NAME: IMAGEM_2, MOVIE CLIP, REGISTRATION: CENTRO.

Clique no frame 280 e pressione F6.

Clique no frame 240 e clica na imagem do palco. Nas propriedades MOVIE CLIP em COLOR coloque ALPHA em 0%.

Entre 240 frames e 280 clique na timeline e com o botão direito CREATE MOTION TWEEN.

 

Fazemos este processo com quantas imagens desejarmos colocar no banner. ESTRATÉGIA RÁPIDA:

 

 

 

EXEMPLO DESSE BANNER ESTÁ HOSPEDADO NESTE SITE: CLIQUE AQUI

Vamos publicar e colocar nosso banner no Blogger?!

VEJA ESTE TUTORIAL!

Anúncios

12 comentários em “Como fazer um banner com imagens em efeito Fade-In no Flash CS3? e como publicá-lo no Blogger?

  1. jane
    26/09/2011

    ola gostaria de saber como tira (Mostrando postagens mais recentes com o marcado)

    Curtir

  2. jane
    29/09/2011

    obrigada daniela consegui tira valeu mesmo, tenho mais uma pegunta para te fazer gottaria de saber se cv sabe como eu faço uma barra, de ferramentas mas eu queria ,e meio complicado te explica mas vou tentar pra ver se vc vai entender, assim meu blog çe de downloads como eu eu coloco onde esta uma postagem, the sims2 cando clicarem ai em abrer aquela barrinha com vairas postagem pra escolher tiro objeto,lotes,expanções,e assim por diante, como eu vejo em muito blog ´tem a barra encima no blog se poder me ajudar des de ja agradeço.

    Curtir

    • Daniela da Silva Holtz
      29/09/2011

      DE NADA, RSS…BOM, NÃO ENTENDI A TAL BARRA, MANDA UM LINK QUE TEM ISSO QUE DAÍ EU TE EXPLICO COMO FAZER… SE EU SOUBER, RS….ABRASS

      Curtir

  3. Guilherme
    16/10/2011

    Ola eu tenho uma pergunta nada ve kkkk mais vo faze ó

    Eu tenho um blog com a template igual a esse so que nesse em cima da postagem tem um hominho e um calendario pequenininho em cima ! alguem pode me ajudA A COMO COLOKA ISSO !

    Curtir

    • Daniela da Silva Holtz
      18/10/2011

      Oi Guilherme, nunca é nada haver algo que é ligado a nosso site, blog, email,etc a net….estamos aqui pra isso. Faça o download do templante novamente e experimente não mexer nas configurações, okay! se não funcionar me avise que passo o css do meu abrass

      Curtir

  4. GUILHERME
    16/10/2011

    a e ourtra como faiz tipo assim coloka essas caixinhas de comentarios e comentar em cima do poste ? e sabe qual e o site que tem essa caixa de comentarios que seis tem ai ? achei legal passa por favor !!!

    Curtir

    • Daniela da Silva Holtz
      21/10/2011

      Guilherme me passa seu email que envio o link pra vc do meu, obrigada pela visita!

      Curtir

  5. GUILHERME
    19/10/2011

    Ola mais Daniela a template que eu baixei que e igualzinho a do seu site não tem essas configurações em cima do poste como destaque do nome do poste , o hominho com seu nome , deixar um comentário , ir para os comentários e o calendário , pois todos eles tem icones que e bem bacana 🙂 eu queria que você me ajuda a como por isso eu li esse tutorial mais nao conigo por o http://www.templatesparavoce.com/2008/06/personalizando-data-do-seu-post.html ajuda eu ai ok Chau >

    Curtir

  6. Fernando Barbosa
    16/03/2012

    Ola Daniela

    Eu sou leigo em flash mas tenha tentado me aprofundar um pouco mais no assunto através de tutorias como o seu, eu precisava nesse momento desenvolver um banner em flash com uma imagem de fundo onde a cada objeto da imagem gostaria de inserir um botão com um hiperlink exatamente como no site da Leroy Merlin (veja: http://www.leroymerlin.com.br), caso posso ajudar ficarei muito grato obrigado.

    Curtir

    • Daniela da Silva Holtz
      16/03/2012

      Fernando, obrigada pela visita e pela dica. Tem um jeito sim e bem fácil, fique atento nas publicações, farei um tutorial sobre isso para essa semana.

      Curtir

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

Informação

Publicado às 24/09/2011 por em BLOGGER, FLASH, PHOTOSHOP e marcado , , , , , , , , , .
%d blogueiros gostam disto: