Getting Started

This tutorial will walk through creating a basic sprite enabled page.
  1. First, be sure you set up your environment for the ASP.NET AJAX Extensions and AJAX Control Toolkit as outlined here under the "Get Started" tab.

  2. Next, create a new AJAX enabled website by selecting File/New Website, then select ASP.NET Ajax-Enabled Website

  3. Add the Ajax Sprite Toolkit controls to your Toolbox. To do this, first right-click the toolbox and select "Add Tab" and enter "Ajax Sprite Toolkit" for the tab name. Then right-click below the tab and select "Choose Items..." and then Browse to the assembly <install dir>\AjaxSprite\bin\debug\AjaxSprite.dll in the toolkit distribution.

  4. Drag a Panel control from the toolbox onto the form and resize it so it is about 640x480 pixels or so. Set its position style to relative by selecting Layout/Position/Relative (or by manually adding the style="position: relative" tag in the HTML view)

  5. Drag a GameWindowExtender onto the page and set the TargetControlId to Panel1.

  6. Drag an Image control from the toolbox into Panel1. This image control will become our sprite.

  7. We will use the "asteroid" image to create a sprite. This image contains 8 frames which are 35 pixels high and 35 pixels wide.




  8. Drag a SpriteExtender control onto the page and set its TargetControlId property to Image1.
  9. Select the Image1 control again and in the Properties Window, set the SpriteExtender1 properties as follows:
    ... so that your SpriteExtender tag in HTML View looks like so:

    <cc1:SpriteExtender ID="SpriteExtender1" runat="server" GameWindowControlId="GameWindowExtender1" TargetControlID="Image1" FrameCount="8" FramesPerRow="8" FrameWidth="35" FrameHeight="35" ImageUrl="images/asteroid.gif"></cc1:SpriteExtender>


  10. Run your application. You should see the asteroid animated like below:

CONTINUE TO PART TWO OF THIS TUTORIAL >>