Create animation atlas/sprite file for use in mobile apps

I am developing a small mobile app that is a children\'s game. The app uses layers and a png file known as an atlas to do simple avatar animation. The atlas png is basically the same as a sprite file, although I am able to access different parts of it concurrently. I need an atlas/sprite file created for the default avatar for the game. Different animated parts of the character are located in different positions in the file, so I can animate them independently. The character can be whatever you want, use your imagination, but remember that this is a children\'s game. The game itself uses simple interaction between the user and the avatar. As an example, I have attached a very simple atlas file. It contains the elements to create a smiley face over any background. Each position is 320 X 284, and it is numbered right to left, top to bottom.. The different animation parts of this atlas are the left eye (position 1-2), the right eye (position 3-4), and the mouth (position 5-12). I would also like you to describe some animation sequences if possible. I can make them myself based on the atlas, but I also like to know what the designer had going through their head when creating the avatar. This can be done by using a simple frame grid with layers and positions. For example, to make my smiley face smile broader while blinking, I would use the following: Layer 1: 0-0-0-0-0-0-1-1-0-0-0-0-0-0-1-1-0-0-0-1-1-0-0-0-0-0-0-0-0-0 Layer 2: 2-2-2-2-2-2-3-3-2-2-2-2-2-2-3-3-2-2-2-3-3-2-2-2-2-2-2-2-2-2 Layer 3: 6-6-6-6-6-5-5-5-5-5-5-9-9-9-9-9-9-9-9-9-9-9-9-9-9-9-9-9-9-9 You can also specify duration of the animation. The above animation I would run in 2 seconds. Default frame rate is around 60 fps, but you don\'t need to specify frames. My code will handle all of that. The character doesn\'t have to be overly complex, but it should be better than the sample I provided! :)