Spritely – Animación de imágenes con jQuery sin usar Flash

Flash está dando mucho que hablar por sus problemas con la seguridad, por la entrada de HTML5, y creo que cada vez más irá desapareciendo.

Ya han salido estadísticas en cuanto a las diferencias entre uno y otro como la que hizo Appleweblog.

Debido a la falta de seguridad en flash y a la popularidad y uso de lenguajes como Ajax, salen a la luz proyectos muy logrados y sobre todo beneficiosos tanto para los desarrolladores como para los usuarios.

Spritely es un simple plugin jQuery que contiene únicamente 2 métodos: sprite() y pan().

Estos métodos se encargan simplemente de animar la propiedad css background-image de un elemento. En ambos casos puedes usar archivos de imagenes PNG o usar Gifs transparentes para IE6 que seguro te dará menos problemas.

Antes de explicar como usarlo, sería bueno que le echarais un vistazo a estos estupendos ejemplos:

Empieza a utilizar Spritely

Para usar este plugin lo primero que tenemos que hacer es Descargar Spritely.

Creamos las imagenes que serán los frames. En el ejemplo que podemos ver en la misma web, lo hacen con 3 imágenes de un pajaro que corresponderán a 3 frames

Creamos un div llamado «bird» que le daremos el tamaño exacto al de la imagen (180×180 en este caso), y definimos los frames por segundo (‘fps’) y ‘no_of_frames’ que en nuestro ejemplo será 3:

[javascript]
$(‘#bird’).sprite({fps: 12, no_of_frames: 3});
[/javascript]

Ahora vamos a definir la atracción de las imágenes cuando haces clic con el ratón en la pantalla:

[javascript]
$(‘#bird’).sprite({fps: 12, no_of_frames: 3}).activeOnClick().active();
$(‘body’).flyToTap();
[/javascript]

Método Active(): Con este método el sprite comenzará cuando hagamos clic en él.

Método $('body').flyToTap(): Este método sirve para que cuando alejes el ratón de la imagen, ésta vuelva sóla a su ubicación. Después de unos segundos (en caso de que el método de movimiento aleatorio haya sido aplicado, se moverá de nuevo.

Para aplicar el sprite aleatorio, dentro de las limitaciones de pixels, usar el siguiente código:

[javascript]
$(‘#bird’)
.sprite({fps: 8, no_of_frames: 3}
.spRandom({
top: 70,
left: 100,
right: 200,
bottom: 340,
speed: 4000,
pause: 3000
});
[/javascript]

Animar el fondo

Si queires darle animación al fondo para que se vaya desplazando continuamente hacia la izquierda, debemos tener priemro una imagen a la que aplicarselo, en el ejemplo de la demo se ha usado la siguiente:

Una vez tenemos la imagen, debemos crear una capa div con un tamaño más chico que la imagen y usar css para aplicarle el fondo, asegurándonos de poner la imagen con repeat-x.

Lo conseguimos con el siguiente código:

[javascript]
$(‘#trees’).pan({fps: 30, speed: 2, dir: ‘left’});
[/javascript]

Puedes especificar la velocidad (speed, píxeles por frames). Y para poner una capa por encima de otra (el fondo por debajo de los pájaros) puedes ajustarlo con la propiedad ‘z-index’ de css.

A ver si poco a poco podemos desprendernos de Flash. Por ejemplo donde trabajo esta desactivado al igual que en el iphone tampoco se puede visualizar lo que este con Flash. ASi que ..

Viva HTML5 y los nuevos proyectos que no dependan de Flash!!!.