-->

quinta-feira, 29 de janeiro de 2009

Como editar GIF animado

Este post é do interesse de quem tem aparelhos celulares com suporte a GIF animado, como os chineses baseados em Mediatek, o Nokia N76, o Samsung D900, etc.

Nota: A velocidade das animações que você verá abaixo pode depender do browser que você está usando. Se alguma animação estiver esquisita no seu browser, arraste-a para outro.

Você pode encontrar muito GIF animado de boa qualidade para uso em celulares no MyMobilePark.

Em geral, não é possível editar GIFs animados com programas normais de edição de imagens. Normalmente, você só edita o primeiro frame e a animação é toda perdida ao salvar, mas existem programas e serviços apropriados para isso, como estes:
  • O JASC Animation Shop 3 (AS3) que vem com o Paint Shop Pro 7. É possível obter de graça (e legalmente) a versão 3.11.
  • Se você tem o Photoshop, use o ImageReady.
  • Em teoria o pacote Open Source ImageMagick também é capaz de fazer isso, mas como você verá adiante, o AS3 é uma opção bem melhor.
  • Você também pode tentar os serviços online e gratuitos de GIFWorks, mas eu não testei e prefiro trabalhar com software local.

Largura ou altura acima do limite

Encontrou uma animação legal mas ela é maior que 320x240? O AS3 deixa a animação do tamanho que você quiser numa fração de segundo.

Por exemplo, este original tem 346x360 e 69KB:



Depois de reduzido para 240x320 pelo AS3 (87KB):



Note que o tamanho do arquivo aumentou quando seria de se esperar que diminuísse. Esse problema se deve às otimizações da animação, que não são refeitas lá muito bem quando o tamanho dos frames é alterado arbitrariamente.

Em teoria o ImageMagick também é capaz de fazer isso, com um comando como:

convert praia.gif -coalesce -resize 240x320 praia_240x320.gif

Entretanto no meu teste o programa criou um resultado de 240x250 com 303KB, que é obviamente inaceitável. Eu usei o pacote ImageMagick-6.4.8-Q16-windows

Tamanho em bytes é grande demais?

Em alguns casos, é possível reduzir o tamanho em bytes de uma animação. Por exemplo, esta imagem tem quase 260KB:

http://www.mymobilepark.com/cell-phone-wallpapers/219640/animated-rain/

Mas usando o Optimization Wizard do AS3 (Shift+Z) eu reduzi a imagem para 113KB sem mudança perceptível na qualidade:



Outro exemplo (253KB):

http://www.mymobilepark.com/cell-phone-wallpapers/128681/xp-morning/

Depois de otimizado pelo AS3 ficou com meros 26KB:




Porém não conte muito com o sucesso da otimização. Muitas imagens já estão otimizadas e o resultado do Wizard vai ter o mesmo tamanho do original. Nesse caso você ainda pode tentar a retirada de frames, como neste exemplo de 203KB:

http://www.mymobilepark.com/cell-phone-wallpapers/340578/perpetual-motion/

No AS3 eu deletei um de cada dois frames e o resultado ficou com 137KB e ainda usável:



Eu não sei por que, mas esta animação fica muito rápida no Firefox e "normal" no IE.

Obviamente, dado o resultado anterior, eu nem tentei fazer o mesmo com o ImageMagick.

10 comentários:

  1. Como faz para colocar wallpaper animado no N76?

    ResponderExcluir
  2. Jefferson, desculpe p off-topic, mas tentei acessar agora há pouco o seu fórum e somente deu essa mensagem:
    Table './jeffryan_smf2/smf_sessions' is marked as crashed and should be repaired

    ResponderExcluir
  3. lenha,

    Não faço a menor idéia. Eu disse que o N76 tem esse suporte porque dezenas de animações são atribuídas a ele no MyMobilePark.

    ResponderExcluir
  4. Daniel,

    Eu lembro vagamente do GIF Animator e de tê-lo usado quando o Netscape ainda era o melhor dos browsers :)

    Mas diante do AS3 gratuito, eu prefiro passar longe do software da MS. Eu sequer consegui reduzir o tamanho de uma animação com ele.

    ResponderExcluir
  5. VR5,

    Está consertado. Obrigado pelo aviso.

    ResponderExcluir
  6. Gostaria de sugerir o programa Gif Movie Gear.

    Um grande abraço,

    Elder

    ResponderExcluir
  7. Jefferson, de fato verifiquei aqui o problema da animação no meu Firefox 3.0.5. No IE de fato a velocidade é normal. Testei também no Chrome 1.0 (atualizado) e funcionou OK, com a velocidade normal, como no IE.

    ResponderExcluir
  8. Anônimo3/2/09 18:22

    Abrindo a animação no GIMP, ví que o delay entre cada quadro é de 20ms (com exceção de 1 quadro com 40ms), portanto acho que a velocidade no Firefox é a correta, uma vez que 17q x 20ms + 40ms = 380ms, ou seja, 0,38s para executar um ciclo completo.
    No gThumb (vizualizador de imagens do Gnome) a animação é exibida na mesma velocidade do FF.
    Aumentei o tempo para 100ms e funcionou no FF, mas no IE a exibição permaneceu na mesma velocidade.
    Tá com cara de ser (mais) um bug do IE. Espero ter ajudado.

    ResponderExcluir
  9. Anônimo3/2/09 18:29

    Complementando meu comentário anterior, achei um link (abaixo) explicando que, o IE reduz a velocidade de um GIF animado caso ele (IE) julgar o intervalo entre quadros muito curto ou inexistente.
    Já o FF, reproduz utilizando os intervalos especificados ou, na falta dos mesmos, na maior velocidade possível.

    fonte: http://forums.mozillazine.org/viewtopic.php?f=7&t=188248

    ResponderExcluir
  10. Pereirão,

    O que você diz faz muito sentido. Ao remover os quadros eu não alterei a duração dos quadros que ficaram. Como funcionou como esperado no IE, não "caiu a ficha" para o fato de que é óbvio que a animação sem metade dos frames tem que ficar acelerada.

    Obrigado pela contribuição. Serei mais cuidadoso nas próximas edições e mais tarde vou editar meu post para incluir esse detalhe.

    ResponderExcluir

Siga as regras do blog ou seu comentário será ignorado.