Using Fireworks and Loom to Create 8 Way Character Animation

Posted on March 8, 2013 | 3 comments

Adobe Creative Cloud Products Used:

Adobe Fireworks CS6

Other Technology:

Loom engine – http://theengine.co/ – Free license ($500 value) for the next 20 days

Source Files:

Source Fireworks and Loom files

Creative Workflow:

In this video I am demonstrating one way of creating an 8 way character animation. Moving a character up, down, left, right, and along all the diagonals is a common task in creating games. In this workflow an 80x80px character is animated over 8 x 8 frames. This resulted in a 640x640px png file that I created in Fireworks. Using Fireworks I created a basic green blob guy, see below:
greenblob
Then using the freeform tool in Fireworks (image below) I manipulated each frame.
freeformtool
One of the cool features of Loom is it allows for live update development, this is for both code and assets. Towards the end of the video you can see this in action.

Watch the video for the full explanation.


8 Way Character Animation using Fireworks and Loom from Renaun Erickson on Vimeo.