Pessoal, com certeza vocês já ouviram falar de GIF animado, aquela imagem que fica animando continuamente. é uma alternativa para pessoas que não querem fazer filmes interativos em Adobe Flash. Mas usar o GIF animado tem certas desvantagens: Se você pegar uma foto em 24 bits de cores e usar um software e salvar em GIF para esperar que sua fotografia fique menor, vai se decepcionar!: A qualidade da imagem ficará horrível (por que o GIF tem uma limitação de 8 bits de cores - 2*2*2*2*2*2*2*2 = 256 cores no máximo!. além do mais, o GIF faz uma compactação LZW, que faz que uma cor cinza cor sólida por exemplo não fique no mesmo estado antes de salvar a imagem). Nesse tópico, vamos aprender como fazer uma fotografia ficar animada no navegador e com qualidade de 24 bits (com inspiração de origem nos velhos GIFS animados). é claro que não existe AINDA JPG, BMP, e PNG animados própriamente ditos!. para isso temos que utilizar um script em JAVASCRIPT especial para isso. A seguir todos os navegadores passaram no teste:
Internet Explorer 7
Mozilla firefox 2
Opera 9
Netscape Navigator 9
Avant Browser 11
Safari 3 beta
O CÓDIGO!:
<body style="margin: 0; padding: 0" scroll=no>
<img id="anim" src="Ice_0.png" width=512 height=384>
<script>
function animGold(){
//CONFIGURE A ANIMAÇÃO
prefix = "Ice" // nome de toda a seqüência de imagens
extension = "PNG" // extensão (BMP, JPG, PNG, GIF)
delayTime = 10 // tempo (em milissegundos) de espera entre um quadro e outro
framesLength = 128 //Quantos quadros terá a animação
// FIM!
including = unescape(anim.src)
including = including.substring(including.lastIndexOf('_')+1, including.lastIndexOf('.'))
nv = new Array()
for (x=0;x<(framesLength+1);x++){
if (x != framesLength){
nv[x] = x+1
}
else {
nv[x] = 0
}}
anim.src = prefix + "_" + nv[including] + "." + extension
setTimeout("animGold()", delayTime)
}
animGold()
</script>
Lembrando: se você tiver 100 imagens, renomeie-as para (EXEMPLO)
Pergunta
Eu o Mister HTML !!!
Pessoal, com certeza vocês já ouviram falar de GIF animado, aquela imagem que fica animando continuamente. é uma alternativa para pessoas que não querem fazer filmes interativos em Adobe Flash. Mas usar o GIF animado tem certas desvantagens: Se você pegar uma foto em 24 bits de cores e usar um software e salvar em GIF para esperar que sua fotografia fique menor, vai se decepcionar!: A qualidade da imagem ficará horrível (por que o GIF tem uma limitação de 8 bits de cores - 2*2*2*2*2*2*2*2 = 256 cores no máximo!. além do mais, o GIF faz uma compactação LZW, que faz que uma cor cinza cor sólida por exemplo não fique no mesmo estado antes de salvar a imagem). Nesse tópico, vamos aprender como fazer uma fotografia ficar animada no navegador e com qualidade de 24 bits (com inspiração de origem nos velhos GIFS animados). é claro que não existe AINDA JPG, BMP, e PNG animados própriamente ditos!. para isso temos que utilizar um script em JAVASCRIPT especial para isso. A seguir todos os navegadores passaram no teste:
Internet Explorer 7
Mozilla firefox 2
Opera 9
Netscape Navigator 9
Avant Browser 11
Safari 3 beta
O CÓDIGO!:
<body style="margin: 0; padding: 0" scroll=no> <img id="anim" src="Ice_0.png" width=512 height=384> <script> function animGold(){ //CONFIGURE A ANIMAÇÃO prefix = "Ice" // nome de toda a seqüência de imagens extension = "PNG" // extensão (BMP, JPG, PNG, GIF) delayTime = 10 // tempo (em milissegundos) de espera entre um quadro e outro framesLength = 128 //Quantos quadros terá a animação // FIM! including = unescape(anim.src) including = including.substring(including.lastIndexOf('_')+1, including.lastIndexOf('.')) nv = new Array() for (x=0;x<(framesLength+1);x++){ if (x != framesLength){ nv[x] = x+1 } else { nv[x] = 0 }} anim.src = prefix + "_" + nv[including] + "." + extension setTimeout("animGold()", delayTime) } animGold() </script>Lembrando: se você tiver 100 imagens, renomeie-as para (EXEMPLO)
teste_0.jpg, teste_1.jpg, teste_2.jpg ... teste_100.jpg.
Notas:
AS IMAGENS E O ARQUIVO HTM DEVEM SE ENCONTRAR NUMA ÚNICA PASTA, CASO CONTRÁRIO O SCRIPT NÃO FUNCIONARÁ.
Link para o comentário
Compartilhar em outros sites
6 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.