Aprende Web
Crea y diseña tus sitios en la Web.
Complementos
Manuales necesarios para el desarrollo web distintos de la programación.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
RSS. Suscribir canal. Buscar en Aprende Web
Traducir página
Visita nuestro blog:
y entérate de las novedades o deja un comentario.
Dudas y sugerencias:
Sobre ésta página
última modificación: 13-07-2018.
Visitas este mes: 36
Visitas el mes pasado: 48
GRACIAS
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
Imágenes en la web (III)
Imágenes animadas
Definición
Una imagen animada es una imagen en movimiento, Está compuesta de varios fotogramas que van apareciendo correlativamente, de manera que den la sensación de animación.
El único formato de imagen compatible con la web que admite imagenes animadas es el .gif Es por eso que a este tipo de imagenes se les llama también "gifs animados".
Las imagenes animadas constan de una imagen compuesta de varias capas que se van mostrando sucesivamente en el tiempo. Cada capa se corresponde con un fotograma, de manera que cuando se han visualizado todas el ciclo vuelve a empezar.
Su uso está muy extendido en la web, ya que son relativamente fáciles de hacer y ocupan poco espacio en memoria. Se utilizan principalmente con dibujos, logos, etc.
Creación de un gif animado
Veremos ahora un ejemplo de cómo crear un gif animado. Para ello necesitamos tener una secuencia de fotogramas (imágenes) que vayan a aparecer en la animación, y un programa que nos convierta esos fotogramas en un gif animado. Veamos todo esto con un ejemplo.
Queremos crear un gif animado, para ello lo primero que debemos de hacer es obtener las imágenes de los fotogramas. Bien sea dibujándolas o fotografiandolas. aquí haremos un gif animado a partir de las siguientes imágenes:
Para insertar estas imágenes en una secuencia utilizaremos un programa llamado PhotoScape. Este programa es esencialmente un visor de fotos que lleva incorporadas algunas funciones de los diseñadores gráficos. Una de estas funciones es la de poder transformar varias imágenes en un gif animado. El programa es gratuito y puedes descargarlo en español desde la página de softronic / PhotoScape. En la sección Programas y aplicaciones / Diseño gráfico mostramos más sobre este programa.
Una vez tenemos el programa PhotoScape instalado en nuestro ordenador lo abrimos y vemos que en la parte superior tiene una serie de pestañas. Abrimos la pestaña donde pone Gif animado.
El programa tiene tres áreas diferenciadas. En la parte izquierda hay un explorador de carpetas y archivos, que nos permite seleccionar el archivo con el que queremos trabajar. La parte central es el área de trabajo, donde aparecerán los archivos seleccionados. Y en la parte derecha hay una serie de botones y comandos para modificar los archivos seleccionados.
Tras haber abierto la pestaña de Gif animado seleccionamos en el explorador los archivos de las imágenes que formarán los fotogramas del gif animado, y las arrastramos a la parte central.
Nosotros seleccionamos las imágenes anteriores, en el mismo orden en el que las hemos mostrado más arriba. y las arrastramos a la parte central del programa. Estas se muestran en la parte superior. Cuando ya tenemos las tres imágenes, volvemos a arrastrar otra vez la segunda y tercera imagen, de forma que se repiten, teniendo así cinco fotogramas.
Debajo de la serie de fotogramas que hemos elegido vemos cómo nos quedará el Gif animado.
Pulsando sobre cada uno de los fotogramas con el botón derecho del ratón podemos ver un menú con una serie de opciones. Elegimos la primera opción: Cambiar tiempo de visualización.. Nos sale un cuadro donde podemos cambiar el tiempo que vamos a ver esa imagen antes de que pase a la siguiente; el tiempo se expresa en centésimas de segundo. Cambiamos los tiempos de las imágenes de manera que la primera dura 60 centésimas, y las demás las dejamos su duración en 10 centesimas.
En este ejemplo dejaremos los fotogramas tal como los tenemos ahora. Sin embargo si has observado la lista de opciones del menú contextual o de la parte derecha vemos que podemos realizar muchas más acciones con los fotogramas.
Pulsamos para acabar en el botón Guardar de la parte derecha (arriba), y guardamos el archivo como un nuevo gif animado.
A la derecha podemos ver el resultado del ejemplo que hemos puesto aquí.
Hemos utilizado aquí el programa PhotoScape para crer un gif animado, ya que es uno de los más sencillos de usar. Otros programas de diseño gráfico, como GIMP o Photoshop también permiten realizar gifs animados.
Sin embargo el mecanismo en estos programas es distinto. Primero guardamos los fotogramas como sucesivas capas de una misma imagen. Después, al guardar el archivo como .gif tenemos la opción de guardarlo como gif animado. Es ahi donde incluimos el tiempo entre fotogramas y otras opciones específicas de los gifs animados.
imprimir esta página
Página creada por ANYELGUTI.
Sugerencias:
aprendeweb@aprende-web.net. Envia un 
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com