In this tutorial we will go over Microsoft’s ASP.NET AJAX Control Toolkit’s most rich, declarative animation frameworks. This framework can be used to create animation special effects in your pages. For instance, you are able to move, resize, and fade elements in a .NET page. Most importantly, these animations are written strictly in JavaScript, free from Flash or Silverlight.

This tutorial will demonstrate the Animation Control Extender which is a part of the AJAX Toolkit. C#

There are a number of controls that support animation in the Toolkit one being the AutoComplete extender control.

Need help with Windows Dedicated Hosting? Try Server Intellect I'm a happy customer!

Ok, let’s dig into the Animation extender control! This control will enable you to target one or more elements in a page and play an animation. In this case we will have a panel control float across our web page as animation.

To start, open Visual Studio 2008. File > New > Web site > ASP.NET Web site and name it AniEx or whatever you would like.

Since we will be using AJAX, navigate to the AJAX Extensions tab of the toolbox and drag over a ScriptManager. Then, beneath the ScriptManager, drag over a Panel control and type in some text within that same Panel Control, such as “This is Animation”.

Some common uses for an animation controls can be to indicate activity during a long process. The reason that this is possible is because the operation thread continues executing even while the AVI clip is displayed.

For instance, the “Find” dialog box of Windows Explorer displays a moving magnifying glass as the system searches for a specific file, or you might see blocks loading up while a file is being uploaded, or even when you simply copy one item from folder to folder.

Switch to Source View and drag over the AnimationExtender from the AJAX Toolkit to just after the Panel control. The code should look similar to this:

Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.

Next, we need to add some properties to this extensive control. We need to add an Animations element, an OnLoad element, a Sequence element, and a Move element (Keep that one open to add more properties to it) The Animation Extender control markup should look similar to this:

Notice under the Animations element, there are several tags to be defined. Take a close look at how the size properties are defined and the Fps (frames per second).

Also, be aware that an Animation Extender can display an AVI clip as long as it is from either an uncompressed AVI file or from an AVI file that was compressed using run-length (BI_RLE8) encoding. You can add the AVI clip to your application as an AVI resource, or the clip can accompany your application as a separate AVI file.

For more information about tags in the Animation Extender please visit Animation Reference

Finally, we need a Style Class for our Panel control:

Note** When creating an animation control within a dialog boxes or from a dialog box resource, the control is automatically destroyed when the user closes the dialog box. If you create an animation control within a window, you must explicitly destroy the control.

Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.