Spritely es un plugin
creado por Artlogic en Java Script y JQuery que permite crear una
animación a partir de una imagen para posteriormente ser utilizada en
cualquier página web.
Para crear tu primera animación con Spritely en primer lugar tendrás que crear una imagen que cumpla los siguientes requisitos:
La anterior imagen serviría para crear una pequeña animación con 4 fotogramas.
Puedes crearla utilizando cualquier editor de gráficos, por ejemplo, Photoshop.
Es conveniente que el fondo sea transparente para que quede más elegante con cualquier tipo de fondo en la web.
La imagen fotograma a fotograma sería algo así:
Esta foto será representada en la web como una película de 4 fotogramas animando así la imagen de picachu.
El código para la página web será el siguiente:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ejemplo animación Spritely</title>
<style>
#sprite {
background-image:url(images/picachu.png);
background-repeat:no-repeat;
width:420px;
height:533px;
}
</style>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.spritely.js"></script>
<script>
$(document).ready(function () {
$('#sprite').sprite({
fps: 2,
no_of_frames: 4
});
});
</script>
</head>
<body>
<div id="sprite">
</div>
</body>
</html>
Ahora voy a pasar a comentar el código:
<!DOCTYPE HTML>
Con esta línea estamos indicando que se trata de una web en formato HTML5.
<style>
#sprite {
background-image:url(images/picachu.png);
background-repeat:no-repeat;
width:420px;
height:533px;
}
</style>
Con estas líneas estamos indicando que la etiqueta DIV llamada sprite que tenemos colocada en el cuerpo de la página tendrá como imagen de fondo el archivo picachu.png que tendrá que estar guardado en la carpeta images de nuestra web. Además estamos estableciendo el alto y ancho de cada fotograma que en este caso será 420x533.
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.spritely.js"></script>
Con estas dos líneas estamos incluyendo en nuestra web los archivos de JavaScript jquery-1.9.1.js y jquery.spritely.js que deben estar incluidos en nuestro sitio web en una carpeta llamada js.
jquery-1.9.1.js es la librería de jquery que tendréis que bajar de la web oficial de jquery cuya dirección es:
http://code.jquery.com/
jquery.spritely.js es la librería de Spritely basada en JQuery para HTML5 que tendréis que bajar de la siguiente web:
http://www.spritely.net/
Aquí también podéis encontrar toda la documentación necesaria para trabajar con Spritely.
<script>
$(document).ready(function () {
$('#sprite').sprite({
fps: 2,
no_of_frames: 4
});
});
</script>
Con este script estamos lanzando la animación nada más cargar la página web ($(document).ready), también podríamos haberlo hecho al hacer clic sobre un botón.
La función sprite ($('#sprite').sprite) lanza la película y en este ejemplo estamos dándole una velocidad de 2 fotogramas por segundo (fps) y estamos indicando que tenemos 4 fotogramas (no_of_frames).
Para crear tu primera animación con Spritely en primer lugar tendrás que crear una imagen que cumpla los siguientes requisitos:
- La altura de la imagen será la altura de cada fotograma de la animación.
- La anchura de la imagen será la anchura de cada fotograma multiplicado por el número de fotogramas.
- La imagen debe estar guardada en formato PNG.
La anterior imagen serviría para crear una pequeña animación con 4 fotogramas.
Puedes crearla utilizando cualquier editor de gráficos, por ejemplo, Photoshop.
Es conveniente que el fondo sea transparente para que quede más elegante con cualquier tipo de fondo en la web.
La imagen fotograma a fotograma sería algo así:
Esta foto será representada en la web como una película de 4 fotogramas animando así la imagen de picachu.
El código para la página web será el siguiente:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ejemplo animación Spritely</title>
<style>
#sprite {
background-image:url(images/picachu.png);
background-repeat:no-repeat;
width:420px;
height:533px;
}
</style>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.spritely.js"></script>
<script>
$(document).ready(function () {
$('#sprite').sprite({
fps: 2,
no_of_frames: 4
});
});
</script>
</head>
<body>
<div id="sprite">
</div>
</body>
</html>
Ahora voy a pasar a comentar el código:
<!DOCTYPE HTML>
Con esta línea estamos indicando que se trata de una web en formato HTML5.
<style>
#sprite {
background-image:url(images/picachu.png);
background-repeat:no-repeat;
width:420px;
height:533px;
}
</style>
Con estas líneas estamos indicando que la etiqueta DIV llamada sprite que tenemos colocada en el cuerpo de la página tendrá como imagen de fondo el archivo picachu.png que tendrá que estar guardado en la carpeta images de nuestra web. Además estamos estableciendo el alto y ancho de cada fotograma que en este caso será 420x533.
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.spritely.js"></script>
Con estas dos líneas estamos incluyendo en nuestra web los archivos de JavaScript jquery-1.9.1.js y jquery.spritely.js que deben estar incluidos en nuestro sitio web en una carpeta llamada js.
jquery-1.9.1.js es la librería de jquery que tendréis que bajar de la web oficial de jquery cuya dirección es:
http://code.jquery.com/
jquery.spritely.js es la librería de Spritely basada en JQuery para HTML5 que tendréis que bajar de la siguiente web:
http://www.spritely.net/
Aquí también podéis encontrar toda la documentación necesaria para trabajar con Spritely.
<script>
$(document).ready(function () {
$('#sprite').sprite({
fps: 2,
no_of_frames: 4
});
});
</script>
Con este script estamos lanzando la animación nada más cargar la página web ($(document).ready), también podríamos haberlo hecho al hacer clic sobre un botón.
La función sprite ($('#sprite').sprite) lanza la película y en este ejemplo estamos dándole una velocidad de 2 fotogramas por segundo (fps) y estamos indicando que tenemos 4 fotogramas (no_of_frames).
Comentarios
Publicar un comentario