This sample shows how to design and use "frames" in a sprite  image. The GameWindow below contains a dragon sprite. You can click in the game window and the sprite will move to where you clicked.

Note that the dragon sprite has 8 different direction animations: East, Southeast, South, Southwest, West, Northwest, North and Northeast. It also happens to have 10 frames of animation for each direction. So, we have a total of 80 frames for the dragon animation, which are all contained in a single image shown below. Each frame is 75 pixels wide and 70 pixels high. So, to define this sprite, we can use the following SpriteExtender tag: 

<cc1:SpriteExtender ID="sprDragon" GameWindowControlId="GameWindowExtender1" ImageUrl="images/dragon.gif" x="50" y="75" FrameCount="80" FramesPerRow="10" FrameWidth="75" FrameHeight="70" runat="server" TargetControlID="imgSpriteDragon" />

In order to make the dragon appear to fly in a certain direction, we need to use set_FrameRange to set the start and ending frames of the sprite. One way to do this is by dividing the dragon's angle of movement by 45 degrees, to give us 8 possible direction of movement for E, SE, S, SW, W, NW, N, or NE). Then, we can calculate the set of 10 frames from the sprite image like so: 

// set the dragons frame range to depict his direction.

// note there are 10 frames for each of 8 directions in the sprite image.

var iDirection = (Math.round(newAngle / 45) % 8);

_sprDragon.set_FrameRange(iDirection * 10, iDirection * 10 + 9);