Dicas, truques, tutoriais, reviews, promoções e informação

sexta-feira, 19 de novembro de 2010

Como colocar animações em flash no meu blog


Todo blogueiro não consegue parar de personalizar o seu blog, e nem deve. Dar uma cara nova para o blog é sempre importante. Isso é comum para os que gostam de manter seu site mais amigável para seus visitantes, leitores e seguidores.

Mas uma coisa que muitos blogueiros procuram e não conseguem encontrar, é sobre como inserir fotos ou banners em flash no cabeçalho de seus blogs. Afinal, ter um layout chamativo e atrativo é o desejo de muitos webmasters.

Lógico, se você manja bastante de Framework, Adobe Flash, Photoshop e etc, certamente saberá criar uma animação em flash pessoal. Mas e os que não entendem tanto assim do assunto? Ficam na mão? Não.

Apresento aos colegas blogueiros o site FlashVortex.com. Trata-se de um aplicativo online que possui diversas animações em flash diferentes disponíveis gratuitamente. Com este site você pode criar a sua própria animação personalizada e inserí-la no cabeçalho do seu blog para deixá-lo mais apresentável ao público.

Além de oferecer imagens, o FlashVortex oferece também a criação de banners, botões e menus personalizáveis para você colocar em seu blog/site.

Como remover a propaganda do FlashVortex das animações

Como Colocar Imagens em Flash no meu Blog

1. Acesse esta página para visualizar as animações disponíveis. São inúmeras e você pode selecionar a que tiver a ver mais com a cara do seu blog.

como-colocar-imagem-em-flash-blogger

2. Após escolher a sua animação, clique no botão animacao-flash-no-blog abaixo da imagem para customizá-la.

3. Na outra página, você fará a personalização a seu gosto.

  • Na área Words to show insira o título que você quer que apareça na animação. Neste caso, pode ser o título do seu blog e a descrição. Porém,insira um texto em cada linha.


  • Nos outros dois campos abaixo, somente usuários premium pode utilizar. Mas eles não são importantes mesmo.
  • Descendo um pouco mais abaixo, configure os pixels, a cor do texto e a fonte do texto de sua animação.


Clicando no botão View Fonts você encontra várias opções de fontes. Em text Color, basta você clicar sobre o quadradinho da cor e selecionar a sua cor preferida. Lembrando que você pode adicionar uma cor manualmente com código HTML. Confira a tebela dos códigos de cores em HTML.

Para adicionar um código de cor, basta copiá-lo da página da tabela, e colá-lo no espaço do código do painelzinho de cores.


  • Mais abaixo, em Text Layout, você deverá configurar a posição da imagem em flash no layout do seu blog. Em Text Position você escolhe entre imagem centralizada ou dinâmica. E nas demais opções, você estipula as margens do texto na animação.


  • Em Animation Properties você deverá configurar a propriedade da animação. Ou seja, de quanto em quanto tempo a animação será exibida. Por padrão, ela fica em constante movimentação. Mas você pode definir os segundos da animação do texto e da imagem.


  • Em Misc Options você poderá estipular o background (cor de fundo) da imagem de animação.

- Clicando em Movie Background Color você define a cor de fundo da animação.

- Infelizmente, as áreas Movie Width e Movie Height são apenas para membros premium (que pagam pelo serviço).

Ressalto que você deve configurar uma cor de fundo de acordo com a do seu blog, para que a imagem não fique aquele negócio bizarro.


  • Após realizar todas as configurações desejadas, clique no botão Generate Animation para criar a imagem e pegar o código javascript da animação.

4. Na página seguinte, copie (Ctrl + C) todo o código que está dentro da caixa "Copy/paste this code into your site".


NÃO feche esta página do FlashVortex, porque caso precise refazer alguma alteração, é só clicar em Voltar no navegador.

Colocando o Código no Blog

1. A tarefa é bem simples. Porém, se você criou a animação com a intenção de substituir o título do cabeçalho pela imagem de animação (que já incluirá o título), você terá de apagar o texto do título para dar lugar à animação. Pois senão ficará desconfigurado.

2. Para inserir o código do FlashVortex, você deve ir até Design > Editar HTML.


Antes de qualquer coisa, faça o backup do seu template clicando em Baixar modelo completo.

3. Marque a opção Expandir modelos de widgets, pressione as teclas Ctrl + F do teclado (para abrir o localizador do browser) e procure pelo trecho abaixo:

<b:includable id='title'>

Este trecho fica junto ao cabeçalho do seu blog. Você pode procurar por Cabeçalho também, se preferir.

Veja na imagem abaixo onde o trecho fica:


4. Você deverá postar o código do FlashVortex abaixo deste trecho acima. Ficando assim:


5. Antes de salvar o template, clique no botão Visualizar para ter uma pré-visualização e conferir se tudo está ok.

Se algo estiver errado com a animação em flash, você pode ir até a página do FlashVortex e clicar no botão Voltar de seu navegador, para aceder novamente ao painel de configuração da animação.

Realize as alterações necessárias, e clique em Generate Animation de novo.

6. Depois que tudo estiver 100%, clique em Salvar Modelo para salvar a modificação no template.

Demonstração

Acesse o link abaixo para ver mais ou menos como fica a animação depois de pronta.

http://i53.tinypic.com/2jfkhs.gif

A imagem do link foi utilizada apenas como exemplo para vocês terem uma maior visão. Obviamente, que vocês poderão personalizar muito mais a animação de vocês.

Informação Adicional

Embora possa ser um pouco trabalhoso criar uma animação que se adapte perfeitamente com nosso template, é uma ótima dica para quem gosta de deixar o blog bem customizado e com a sua cara.

É claro que você deve escolher uma imagem de animação que se enquadre melhor com a cor e o formato do seu blog. Isso facilitará para você trabalhar com a animação. No site você encontra, ou pode fazer, imagens em diversas cores, de diversas maneiras, com diversos fundos. No começo pode ser um pouco chato e cansativo. Mas logo você pega o jeito!

Como dito no começo do post, o FlashVortex oferece também a criação de banners, menus, contadores e botões personalizáveis. Se você quiser adicionar estes gadgets em seu blog, já sabe onde encontrar.

Particularmente, acho que vale a pena instalar estes flash's no blog. Deixa mais a nossa cara.

25 comentários:

  1. so mais meu site 100% gratis fui eu que fiz o flash num paguei nem hospedagem

    ResponderExcluir
  2. O problema é que nem todo mundo sabe trabalhar manualmente com flash amigo. Essa dica é uma mão na roda para quem não sabe mexer 100% com flash.

    Todavia, bom pra você!

    Abraços

    ResponderExcluir
  3. Entrem nesse Blog vocês vão gostar.
    http://luiz-maisgames.blogspot.com

    ResponderExcluir
  4. VALEU CARA ESTÁ DE PARABÉNS SUA DICA FOI 100%

    ResponderExcluir
  5. Olá tuntum brasil,

    Muito obrigado pelo comentário. Fico muito feliz que o tutorial tenha sido útil para você amigo.

    Grande abraço

    ResponderExcluir
  6. Marcelo, por descuido fiz uma besteira. Eu criei animação e coloquei e quando eu ia visualizar acabei salvando e nem abaixei... Com isso eu fui e tirei o codigo... So que agora eu não consigo mas escrever no quadrado azul em meu blog que estava meu cabeçalho, mas quando vou Design o cabeçalho esta escrito, só não aparece mais =/... Tem solução?

    ResponderExcluir
  7. marcelo, porque quando eu coloco a nimação fica bem do lado esquerdo da tela?

    tem como eu por ela no meio?

    ResponderExcluir
    Respostas
    1. LUIS, tente centralizar a animação com a div "center". Veja aqui um exemplo: http://pastebin.com/z1FgcTh0

      Veja se resolverá.

      Excluir
  8. Marcelo, sou nova nesse assunto de blogs, mas gostaria de saber se é possível e como eu coloco algum desenho ou uma animação ao lado da tela para acompanhar o leitor?

    ResponderExcluir
  9. Dicas espetaculares...Parabéns e muito obrigado pelas informações contidas em seus tutoriais.

    Abraços.

    Carlos Alberto

    ResponderExcluir
  10. Obrigado pelo comentário Carlos Roberto. Fico feliz que tenha gostado do conteúdo.

    Grande abraço e sucesso

    ResponderExcluir
  11. no meu ficou pequeno como é que faço pra aumentar o tamanho?

    ResponderExcluir
  12. OBRIGADO AMIGO ME ADD NO BLOG.
    POESIASDEJURUTI@GMAIL.COM

    ResponderExcluir
  13. cara eu procurei essa linha e nao achei nada nem com Ctrl+f tbm nao achei nada

    ResponderExcluir
  14. Oi Marcelo,

    Adorei a dia flash. Encontrei um relógio (http://chabudai.org/blog/?p=59) muito legal em flash, mas não consigo adicionar ao meu blog, adiciono o código no gadget HTML/JAVA, clico em salvar e aí trava, já deixei um dia todo salvando, mas não consegui completar o processo.

    Você tem ideia do porque isso acontece?

    ResponderExcluir
    Respostas
    1. Olá Frida, estranho estar ocorrendo isso no seu blog, pois no blog de testes que eu tenho salvou normal. Dê uma olhada (na sidebar):

      http://testando-seututorial.blogspot.com.br

      Você está copiando o código corretamente? Não está esquecendo algum caractere?

      Excluir
  15. Lucas Pinheiro

    Olá Marcelo, Gostaria de adicionar uns videos no meu blog mais não estou conseguindo vc poderia mim dar umas dicas.
    desde já agradeço pelas suas postagêns ja mim ajudou muinto...

    ResponderExcluir
  16. olá Marcelo, adorei sua postagem poxa me ajudou e mt, eu passei um dia todo tentando descobrir como colocar isso no meu blog, valeu...
    a se der da uma olhada no meu blog fz um comentario, eu vou adorar ter vc como visitante, é so pesquizar por Dani's_ informe São Bento.

    ResponderExcluir
  17. O MARCELO BOA NOITE.. COLOQUE ESSE TUTORIAL NOVAMENTE ENSINANDO O MESMO COM A NOVA INTERFACE DO BLOGGER. POIS NÃO EXISTE ESSES CÓDIGOS LA.. PRECISO DE SUA AJUDA....

    ResponderExcluir
  18. Marcelo, estou tentando colocar um Flash no meu blog, e encontrei aqui esse artigo seu, estou estudando paa conseguir.Obrigado Eunice Lemes

    ResponderExcluir
  19. Parabéns, pra mim deu tudo certo,acho que ficou legal,mas a gente nunca fica feliz 100%.
    Mas deu certo muito Obrigado

    ResponderExcluir
  20. Valeu por essas informações! Foi o único blog que conseguiu me explicar claramente como colocar o flash. E deu certo!
    Parabéns pelo seu trabalho

    Meus links www.hanoa.info ou http://www.ahistoriadehanoa.blogspot.com/

    ResponderExcluir
  21. Não achei a 3° parte, me ajuda tenho um titulo muito legal!!

    ResponderExcluir