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.
2. Após escolher a sua animação, clique no botão 
abaixo da imagem para customizá-la.
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.
Artigo escrito por Marcelo
Sou formado em Sistemas de Informação pela UFMG e pós-graduado em Segurança da Informação. Trabalho com TI há mais de 5 anos e sou professor particular de inglês. Nas horas bem vagas costumo arranhar uma guitarra e sou fã do bom e eterno rock'n'roll.
Receba as atualizações automaticamente
so mais meu site 100% gratis fui eu que fiz o flash num paguei nem hospedagem
ResponderExcluirO 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.
ResponderExcluirTodavia, bom pra você!
Abraços
Entrem nesse Blog vocês vão gostar.
ResponderExcluirhttp://luiz-maisgames.blogspot.com
VALEU CARA ESTÁ DE PARABÉNS SUA DICA FOI 100%
ResponderExcluirOlá tuntum brasil,
ResponderExcluirMuito obrigado pelo comentário. Fico muito feliz que o tutorial tenha sido útil para você amigo.
Grande abraço
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?
ResponderExcluirJa resolvi :)
ResponderExcluirmarcelo, porque quando eu coloco a nimação fica bem do lado esquerdo da tela?
ResponderExcluirtem como eu por ela no meio?
LUIS, tente centralizar a animação com a div "center". Veja aqui um exemplo: http://pastebin.com/z1FgcTh0
ExcluirVeja se resolverá.
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?
ResponderExcluirDicas espetaculares...Parabéns e muito obrigado pelas informações contidas em seus tutoriais.
ResponderExcluirAbraços.
Carlos Alberto
Obrigado pelo comentário Carlos Roberto. Fico feliz que tenha gostado do conteúdo.
ResponderExcluirGrande abraço e sucesso
no meu ficou pequeno como é que faço pra aumentar o tamanho?
ResponderExcluirOBRIGADO AMIGO ME ADD NO BLOG.
ResponderExcluirPOESIASDEJURUTI@GMAIL.COM
Valeu amigo.
ExcluirAbraços
cara eu procurei essa linha e nao achei nada nem com Ctrl+f tbm nao achei nada
ResponderExcluirOi Marcelo,
ResponderExcluirAdorei 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?
Olá Frida, estranho estar ocorrendo isso no seu blog, pois no blog de testes que eu tenho salvou normal. Dê uma olhada (na sidebar):
Excluirhttp://testando-seututorial.blogspot.com.br
Você está copiando o código corretamente? Não está esquecendo algum caractere?
Lucas Pinheiro
ResponderExcluirOlá 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...
olá Marcelo, adorei sua postagem poxa me ajudou e mt, eu passei um dia todo tentando descobrir como colocar isso no meu blog, valeu...
ResponderExcluira 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.
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....
ResponderExcluirMarcelo, estou tentando colocar um Flash no meu blog, e encontrei aqui esse artigo seu, estou estudando paa conseguir.Obrigado Eunice Lemes
ResponderExcluirParabéns, pra mim deu tudo certo,acho que ficou legal,mas a gente nunca fica feliz 100%.
ResponderExcluirMas deu certo muito Obrigado
Valeu por essas informações! Foi o único blog que conseguiu me explicar claramente como colocar o flash. E deu certo!
ResponderExcluirParabéns pelo seu trabalho
Meus links www.hanoa.info ou http://www.ahistoriadehanoa.blogspot.com/
Não achei a 3° parte, me ajuda tenho um titulo muito legal!!
ResponderExcluir