This is a short guide to creating and using SPA animations with PowerUI. This describes the process for windows users - Note that a free web service will also be available shortly too.


The SPA creator


Step 1. Firstly, you'll need the small program which converts sets of images into an SPA file. It can be downloaded here and doesn't need installing - just unzip it somewhere you can find it.


Step 2. Next up, you will need some frames! These are just a set of images in almost any image format (PNG preferred) and can come from almost any graphics editor or animator. For example, Maya can export an image sequence and so can photoshop/ flash. The framerate is 20fps by default.


Step 3. Put your frames in a named folder, e.g. "MyAnimation". Then, simply drag and drop the folder onto spa.exe. Note that this folder can contain a config file.




Step 4. You'll then see a new file appear either alongside your folder or in it, depending on your config settings. It will be named e.g. "MyAnimation.spa".




Step 5 (Optional). If you are putting the spa in your project folder, it must end in .spa.bytes. This can be set to happen by default in the config file. Once named correctly, import the spa as an asset into your project into a Resources folder.




Step 6. Your animation can now be referenced just by its path from html! E.g. If it's at Resources/animation.spa.bytes, use "animation.spa". If it's at Resources/subfolder/animation.spa.bytes, use "subfolder/animation.spa". You can use animations with the background-image css property or the <img src=""/> tag.




Snippet from the Animation example



Advanced Uses

Found that a little too easy? Know your code? The SPA Creator is open source and can be fully integrated into your pipeline. For more information, head over to the advanced SPA pages.