AULA 15: GIFs animados

NESTA AULA
Vamos aprender o que são gifs animados e como criá-los.

Gifs Animados

Se nos acompanha desde o início deste curso, lembra-se certamente de alguns sites que recomendámos e que dispunham de imagens sem direitos de autor para usar à vontade na sua página pessoal. Nós somos da opinião que uma página tem mais valor quanto maior fôr a sua originalidade. Mesmo que não tenha muito jeito para desenho, tenha a certeza que é preferível visitar uma página pessoal com conteúdo pessoal do que uma que é igual às outras todas e que tem precisamente o mesmo fundo, gráficos e bonecos que as páginas de todos os outros, por muito diferentes e afastados que estejam.
Isto aplica-se muito aos gifs animados, já aborrece ver sempre o mesmo cãozinho a correr de um lado para o outro ou a carta a entrar no envelope. Porque não criar uma coisa original e nossa?
É preciso ter cuidado com esta técnica de animação, é fácil um gif destes ficar demasiado grande para ter numa página. Estar mais de 2 minutos à espera que uma página carregue completamente é impossível, mas vamos lá perceber um pouco mais acerca dos gifs animados.
O programa que aconselhamos é o Gif Animator da Microsoft. É dos mais fáceis e versáteis que já testámos, mas se procurar pela net por programas do género, decerto que encontrará outros com outras possibilidades.

Vamos começar.

Um gif animado é, na realidade, uma série de gifs compilados e ordenados num só ficheiro. Esses gifs aparecem por uma ordem e com uma velocidade pré definida pelo criador. O funcionamento é semelhante ás técnicas vulgares de animação, várias imagens ligeiramente diferentes umas das outras e dispostas ordenadamente criam a ilusão de movimento.

Começamos, claro está, por idealizar o nosso gif. Pensemos num motivo, o mais simples possível para aprender e para não vir a ser um ficheiro demasiado grande. Crie uma pequena imagem no seu Paint shop Pro e grave-a com extenção GIF. Nós por cá encontrámos uma maçã mesmo boa para dar umas dentadas. A imagem maca.gif está gravada, vamos então criar as dentadas para a maçã. O mais simples seria desenhar as dentadas directamente na imagem e ir gravando, mas assim estavamos a criar sempre a mesma maçã, com mais dentadas. Como gostamos muito de rapidez na web, vamos fazer um truque: vamos desenhar a dentada branca num fundo transparente (ver Aula 14) assim no MS Gif Animator apenas temos que ir acrescentando as dentadas à maçã inicial.
Criámos a dentada1.gif. Vamos então abrir o Gif animator e montar a nossa animação. Para começar abrimos a imagem inicial, neste caso a maca.gif. Tem o botão de abrir lá em cima, uma pasta amarela aberta. Já está inserida? então vamos 'dar' a primeira dentada, carregue no botão que insere uma imagem nova, neste caso é uma folha branca com um sinal '+' e seleccione a dentada.gif. A dentada está lá, selecione-a e carregue no botão que tem uma seta apontando para baixo, a dentada passou para segundo lugar, ou seja, vai aparecer depois da maçã.

Com a dentada ainda selecionada, escolha, nas pequenas 'orelhas' à direita, a orelha 'Image' e mude o valor left e top, assim acertamos melhor o local onde a dentada deve aparecer. Neste caso escolhemos 75 para o left e 30 para o top. Se fizer play (botão ao lado do ponto de interrogação) verá o resultado obtido até aqui.
A dentada aparece muito depressa. Podemos definir o tempo que cada imagem dura, no campo 'Duration'. Quanto maior fôr o número que inserir lá, maior será o tempo que demora a aparecer a próxima imagem depois da actual. Escolhemos 20 tanto para a maçã como para a primeira dentada.
Agora o processo repete-se, acrescentamos outra dentada mudando-lhe apenas as coordenadas. O ficheiro da dentada é o mesmo, apenas vai aparecer mais abaixo. Nesta escolhemos o left=65, o top=20 e o duration continua a ser 20. Já percebeu que a partir daqui é sempre a mesma coisa.
No fim, um toque importante: o loop. O loop faz com que a animação nunca pare, voltando sempre ao início. Clique na orelha 'Animation', escolha a opção 'Looping' aqui pode escolher o número de vezes que a imagem fará o loop ou dizer que a animação se repetirá infinitamente, voltando sempre ao início, sem limite.

Este tema depende muito da imaginação e do cuidado que temos. Cuidado em relação ao tamanho final da animação. Se se mantiver fiel a este pequeno grande truque de desenhar a dentada à parte e depois ir inserindo, a sua possibilidade de sucesso no que toca ao tamanho da imagem em Bytes será quase garantido.
Lembre-se também que uma página sobrecarregada de animações não é agradável à vista. A Web não é televisão, mas há quem não resista a encher a página com o máximo de animação possível. Evite isto e boas dentadas!