Spritely is a jQuery plugin created by Artlogic for creating dynamic character and background animation in pure HTML and JavaScript. It's a simple, light-weight plugin with a few simple methods for creating animated sprites such as the birds you see on this page, and dynamic scrolling backgrounds.
License: Dual licensed under the MIT or GPL Version 2 licenses.
PS. Hills images have been taken from the original spritely site.
Usage: 1) Draw a JQuery and Spritely extension on your page; these are required by other extensions (Spritely PAN and Spritely SPRITE). 2) Draw a Spritely PAN extension for creating scrolling backgrounds 3) Draw a Spritely SPRITE extension for creating animated characters
Use only Absolute positioning when drawing PAN and SPRITE extensions :-)
Use a Spritely PAN extension In the above sample there are two PAN extensions scrolling to the left with different speeds; you need to simply choose a background picture and set the scrolling speed. You can also create the backgroung image on the fly using the Graphical Canvas button on the Picture panel.
The background image needs to be wider that the extension box you draw in the page so it will scroll into the view
Use a Spritely SPRITE extension In the above sample there are two SPRITE extensions (birds). For creating the sprite animation (the image you need to assign to the extension) you need to create image frames and dispose them horizontally; the extension box has to be the same size of one frame.
In the sample above I used a background image of size 428x27 px and created a box of 107x27 px (428/4 = 107 as the animation is composed by 4 images)
Sprite image:
The sprite image used by Spritely can contain also more rows and you can control the row displayed (this feature is only available by using javascript code)
Create a sprite animation on the fly using Dynamic HTML Editor You can create an images with sprites on the fly using our program; first of all select the Spritely Sprite Extension object drawn on your page and click on the "Background Image" property from the Properties Panel, you'll see the Picture Dialog
Click on the highlighted button to open the Graphical Canvas Editor; you'll use this editor for creating various sprites. Now into this Graphical Canvas editor draw another Graphical Canvas for the first sprite and lock the size (see below).
Now copy the first Graphical Canvas, paste a new one near and edit it (for every sprite of the animation)
Now check the size of the first animation frame and set it to the extension then adjust extensions parameters (as the number of images). The result...
