jueves, 10 de diciembre de 2015

Gif animado navideño

Para la siguiente práctica debemos buscar una imagen de línea con los contornos bien cerrados, realizada en blanco y negro y por supuesto con un motivo navideño. Son ideales las imágenes para colorear que podéis encontrar a cientos en internet. También es imprescindible que comprobéis que el dibujo está en modo RGB, ya que si el modo es Indexado, no os permitirá aplicarle color (si no está en modo RGB, deberemos seleccionarlo).
Vamos a realizar un Gif animado que es como su propio nombre indica un dibujo compuesto por varios que pasan cada cierto tiempo de uno a otro en bucle permanente.
Esto que al principio puede resultar gracioso, se convierte en poco menos que una pesadilla cuando descubres que ¡¡¡no puedes pararlo!!!, y lo peor es que no puedes dejar de mirarlo. Para evitar esto podéis utilizar un truco, consiste en situar sobre el gif otra imagen, en este caso la misma pero fija, de forma que el gif se ponga en movimiento tan solo cuando el cursor se coloque sobre él. Este efecto se conoce con el nombre de Hover.
Si situáis vuestro ratón sobre la imagen podréis comprobar el efecto.





Aquí tenéis el vídeo con los pasos a seguir.Es importante que exportéis correctamente el Gif animado. Para ello debemos "guardar como animación", activar el bucle permanente y poner como retardo entre fotogramas un valor de 400. En la opción de desecho de fotogramas elegiremos "un cuadro por capa (reemplazar)" y aceptamos.




Para subirlo al blog de la forma que os he descrito arriba, deberéis obtener una url para la imagen fija y otra para el gif animado. Yo lo que hago es subirlas a una entrada que mantengo en borradores y no publico. Tomando ambas url, sustituyo en este código lo que corresponda:

<img src="URL Imagen que se visualiza" onmouseover="this.src='URL Imagen que cambia con Mouse';" onmouseout="this.src='URL Imagen que se visualiza';" />

No hay comentarios:

Publicar un comentario