como hacer un Gif animando

GaleOn

Cómo hacer links parpadeantes
Requerimientos de este tutorial:
Flash (cualquier versión) o un editor de imágenes con soporte de gifs animados
Un navegador que soporte backgrounds animados (Firefox, Mozilla, IE6, Safari presenta sólo la primera frame)
Un editor de texto o html (Dreamweaver, Notepad, BBEdit, lo que sea)

Antes que nada, unas palabras de precaución: no estoy muy bien versado en cuestiones de Cascading Style Sheets. Mis conocimientos son todavía muy básicos. Si cometo algún error garrafal, no duden en destrozarme en los comentarios.

Ahora, más palabras de precaución: es muy fácil abusar de este tipo de hacks. Recuerdan el tag de blink? Ante la duda, opten por lo sutil

Aquí hay un ejemplo de cómo no se debe de utilizar:

Nunca hagan algo así porfavor

Ya advertido esto, pongamos manos a la obra.

Lo primero, hacer el gif animado
Hay muchas maneras de hacer un gif animado, yo utilice Fireworks pero puedes utilizar cualquier otro programa que te plazca. Photoshop no soporta gifs animados, pero Imageready sí. Si tienes una Mac y no tienes estos programas, baja el Graphic Converter, de por si es una herramienta que no debe de faltar en una Mac, seas diseñador o no. No sé de programas gratuitos para PC, ojalá alguien pueda recomendar alguno, seguramente existen. también puedes utilizar Flash y exportar como gif animado

Para este tutorial vamos a utilizar Flash porque muchísima gente lo tiene instalado, y si no lo tienes instalado, puedes bajar el demo de 30 días sin restricciones.

Lo primero que hay que hacer es cambiar los parámetros del documento conforme lo muestra esta captura de pantalla:

El tamaño va a ser de 10 x 10 pixeles, y el Frame Rate de 30. El Frame Rate es la cantidad de cuadros por segundo que va a tener nuestro gif. Es importante que sean 30, de esta manera el efecto se ve fluído. Si utilizamos el default de 12 frames por segundo el efecto se va a ver cortado.

Posteriormente hacemos Zoom al 400% (para ver nuestro documento mejor), seleccionamos la herramienta de recuadro, quitamos el color del stroke y ponemos el color de relleno que queramos para el link. Luego hacemos un cuadro que exceda ligeramente las dimensiones de nuestro stage, como lo indica esta captura de pantalla:

En este caso yo utilicé un color naranja, pero puede ser cualquiera. Deben de tomar en cuenta el color del texto que van a elegir para los links en a:hover, si va a ser un color claro, el fondo debe de ser obscuro, si el texto va a ser obscuro, el fondo deberá de ser claro

Después deben de convertir el recuadro en un símbolo (F9) y metan las keyframes como sigue (se asumen conocimientos básicos de Flash):

Importante: Usen el modificador de Tint con el color de fondo que tengan en su página, en mi caso yo utilizo blanco, por lo tanto el color del tinte es blanco. La opción lógica de alpha no se debe de usar porque al exportarlo como gif, flash no toma en cuenta el alpha y vamos a tener un gif aparentemente estático.

La primera parte que no tiene un motion tween se debe a que en este caso quería que el gif animado tuviera una pequeña pausa. Nada de esto es obligatorio, cambien las keyframes de lugar y pruébenlo con Manzana (PC: alt) Enter.

Ya casi acabamos con el gif animado. Lo último es exportar como gif. Menú File->Export Movie->Opción de Animated Gif->Save y luego ocupen estos parámetros:

Indispensable: La repetición del gif deberá de estar en 0 para que se repita indefinidamente. Si hacemos que se repita menos veces, el efecto funcionará sólo una vez en toda la página

Veamos cómo quedó nuestro gif animado:

Perfecto, eso es todo con el gif animado, pasamos al código

El código
Si sabes un poco de CSS, vas a entender esto inmediatamente:

a {
text-decoration: underline;
white-space: nowrap;
color: #F60;
}

a:link {color: #F60;}
a:visited {color: #F90;}
a:hover {color: #FFF; background: url(nombre.gif); text-decoration: none; }
a:active {color: #F60;}

La propiedad de white-space: nowrap se utiliza para que no se corte el link en dos renglones, y es opcional. Yo prefiero ponerle nowrap proque no me gusta como se ve en dos renglones.

Como pueden ver, es un método completamente acorde con los estándares web, no es un hack ni nada por el estilo. El único problema es que no todos los navegadores despliegan gifs animados en el background. En ese caso, el navegador utiliza la primera frame del gif animado, lo cual explica porqué empezamos con el color "fuerte" y no con el claro.

[/list]
_________________
Creo que con 600Kb sera mas que suficiente
-------->Bill gates 1962<--------
El Foro de GaleOn www.galeonspain.com

GaleOn · Publicado: Dom Nov 20, 2005 12:41 pm **Título del mensaje**:

Aqui os dejo unos programillas

Microsoft Gif Animator 1.1
Uno de los programas de animación más simples y fáciles de utilizar, con unas utilidades limitadas.
Muy útil para principiantes
Descargar
http://www.gifmania.com/Util/soft/gif-microsoft.zip

Gif Movie Gear 3.0
Programa de animación especialmente util para la optimización de imagenes gif por su capacidad para eliminar colores de las paletas.
Muy util para efectuar animaciones simples y el mejor programa si es la primera vez que vas a experimentar con gifs animados.

http://www.gifmania.com/Util/soft/gmvgr26.zip
_________________
Creo que con 600Kb sera mas que suficiente
-------->Bill gates 1962<--------
El Foro de GaleOn www.galeonspain.com

kirby28 · Alférez Registrado: 06 Ene 2006 Mensajes: 141

Gracias^^ no conocia esos programas Very Happy

.
_________________

EL REFLEJO DE TU ALMA...
DAÑA MAS QUE UN ARMA...
http://usuarios.lycos.es/kirby28/dinamicas.php <<<<--- ABRE LA PAGINA DALE A ACTUALIZAR LOL.

yUnA_03 · Publicado: Mar Ene 10, 2006 1:03 pm **Título del mensaje**:

Muy currado sí señor Wink

_________________

Antic · Cabo Registrado: 08 Ene 2006 Mensajes: 91

si k ta currado si, buena informacion
_________________

Perido en mi mismo, busco un angel como tu que m saque de esta oscuridad

gogazo · Supervisor Registrado: 18 Oct 2005 Mensajes: 69

Muy trabajado, muy bien, algo de copy&paste.. y... TOPIC ERRONEO. Eso no es un GIF animado hijo, es FLASH.
A ver si dejamos de fardar.

kirby28 · Alférez Registrado: 06 Ene 2006 Mensajes: 141

Una pregunta.. sabes algo de el programa ese de Flash?? esque me quiero bajar un programa para hacer Flash pero nose que versión descargarme ni nada... e oido que tengo que descargarme el Macromedia Studio Flash MX 2004 o algo así pero no estoy segura...¿`tu tienes alguna versión de Flash(para crear flash)?.
Gracias Very Happy

.
_________________

EL REFLEJO DE TU ALMA...
DAÑA MAS QUE UN ARMA...
http://usuarios.lycos.es/kirby28/dinamicas.php <<<<--- ABRE LA PAGINA DALE A ACTUALIZAR LOL.

Anal Torturer · Publicado: Dom Ene 15, 2006 4:15 pm **Título del mensaje**:

Bájate el MX Studio, ahora van por la versión 8.

En él encontrarás el Flash junto con toda la gama de programas de Macromedia Studio de Adobe. Está incluido el Fireworks, que para mi es la herramienta más potente que existe para hacer gifs.
_________________
Mr Green for President!

Mi persona personal en myspace.com!

kirby28 · Alférez Registrado: 06 Ene 2006 Mensajes: 141

Gracias!!! bajare esa versión que dices^^.
_________________

EL REFLEJO DE TU ALMA...
DAÑA MAS QUE UN ARMA...
http://usuarios.lycos.es/kirby28/dinamicas.php <<<<--- ABRE LA PAGINA DALE A ACTUALIZAR LOL.