Download the files for these animation tutorials: animation.zip
Learn how to create a sprite sheet of an animated cycle.
Next we'll walk through the code that animates our cycle.
A couple of alternative ways to create sprite sheets:
Create a sprite sheet using Animate CC.
Select "JSON" under the Data Format drop-down menu on your Generate Sprite Sheet panel. Open the JSON file in Dreamweaver and copy the values associated with each "frame" property—those values specify the position and dimension of each sprite-sheet frame. Add that frame data to the array that defines your sprite sheet inside the JavaScript setup file. You'll need to remove the quotes on each property name—change "x":, "y":, "w":, and "h": to x:, y:, w:, and h:. Try using a Find and Replace in Dreamweaver to do that.
Check out a tutorial on walk cycles.
See a tutorial on Photoshop Animation Techniques.