In this tutorial, we will be looking at how to use the AnimationExtender in the AJAX Control Toolkit from Microsoft. This tutorial is aimed toward users of Visual Studio.NET 2008, but should work with 2005 providing the AJAX Extensions are installed.
This tutorial uses the Microsoft AJAX.NET Toolkit, which can be downloaded from the following link:
www.asp.net/Ajax/ajaxcontroltoolkit/
If you need help installing the Toolkit, please see this article.
In this tutorial, we will be explore using the AnimationExtender to utilize JavaScript to animate controls in our web application. The first thing we will need to do is to add a ScriptManager to our ASPX page, which will allow us to implement AJAX:
| <asp:ScriptManager ID="SM1" runat="server" /> |
I just signed up at Server Intellect and couldn't be more pleased with my Windows Server! Check it out and see for yourself.
The next thing we will do is add an ASP.NET Panel control onto our page and drag an AnimationExtender from the Toolkit toolbox to our ASPX page:
.Animation1
{
position: absolute;
padding:3px;
border: solid 1px #000;
}
..
<form id="form1" runat="server">
<asp:ScriptManager ID="SM1" runat="server" />
<br />
<asp:Panel ID="panel_Animated" runat="server" CssClass="Animation1">
Animation imminent.
</asp:Panel>
<br />
<cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="panel_Animated">
</cc1:AnimationExtender> |
Notice that we have declared a CSS class for our Panel to use. If we do not make the Panel's position absolute, then we will not be able to manipulate its position on the page.
Now in order to actually animate the Panel, we are required to insert further parameters into the Extender, for example:
<cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="panel_Animated">
<Animations>
<OnLoad>
<Sequence>
<Move Horizontal="300" Duration="1" Fps="20" />
<FadeOut Duration="1" Fps="20" />
</Sequence>
</OnLoad>
</Animations> |
If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!
We keep everything within the Extender tags, and notice that they are not all specified as attributes. There are a number of triggers we can use for animations, which include OnLoad, OnClick, OnMouseOver, OnMouseOut, OnHoverOver, and OnHoverOut. In this example we are using the OnLoad trigger so that when the page loads, the Panel will be animated 300 pixels horizontally over a period of 1 second. We are also able to set the number of frames per second with the Fps attribute.
Now when this page is run, the Panel will be animated as soon as the page is done loading. Now, if we wanted to animate on a button click, then we would use the OnClick trigger.
To do this, let's add a button and another panel to our ASPX page:
.Animation2
{
display:none;
position:absolute;
width:1px;
height:1px;
left:400px;
top:600px;
padding:3px;
border:solid 1px #000;
}
..
<asp:Button ID="btn_Animate" runat="server" Text="Animate" OnClientClick="return false;" />
<br />
<asp:Panel ID="panel_Animated2" runat="server" CssClass="Animation2">
Animation2 imminent.
</asp:Panel>
<br />
<cc1:AnimationExtender ID="AnimationExtender2" runat="server" TargetControlID="btn_Animate">
<Animations>
<OnClick>
<Sequence AnimationTarget="panel_Animated2">
<EnableAction AnimationTarget="btn_Animate" Enabled="false" />
<StyleAction Attribute="display" Value="Block" />
<Parallel>
<FadeIn Duration="1" Fps="20" />
<Scale Duration="1" Fps="20" ScaleFactor="30.0" Center="true" />
</Parallel>
</Sequence>
</OnClick>
</Animations> |
We are using Server Intellect and have found that by far, they are the most friendly, responsive, and knowledgeable support team we've ever dealt with!
We create another CSS class for the new panel and notice we also change the OnLoad trigger as in the last example to OnClick. We are also required to set an AnimationTarget as our TargetControl is now the button, not the panel. The animation sequence is similar to the last, except we use Scale to increase the size of the Panel as well.
Our ASPX page looks something like this:
<style>
.Animation1
{
position: absolute;
padding:3px;
border: solid 1px #000;
}
.Animation2
{
display:none;
position:absolute;
width:1px;
height:1px;
left:400px;
top:600px;
padding:3px;
border:solid 1px #000;
}
</style>
..
<form id="form1" runat="server">
<asp:ScriptManager ID="SM1" runat="server" />
<br />
<asp:Panel ID="panel_Animated" runat="server" CssClass="Animation1">
Animation imminent.
</asp:Panel>
<br />
<cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="panel_Animated">
<Animations>
<OnLoad>
<Sequence>
<Move Horizontal="300" Duration="1" Fps="20" />
<FadeOut Duration="1" Fps="20" />
</Sequence>
</OnLoad>
</Animations>
</cc1:AnimationExtender>
<br />
<br />
<asp:Button ID="btn_Animate" runat="server" Text="Animate" OnClientClick="return false;" />
<br />
<asp:Panel ID="panel_Animated2" runat="server" CssClass="Animation2">
Animation2 imminent.
</asp:Panel>
<br />
<cc1:AnimationExtender ID="AnimationExtender2" runat="server" TargetControlID="btn_Animate">
<Animations>
<OnClick>
<Sequence AnimationTarget="panel_Animated2">
<EnableAction AnimationTarget="btn_Animate" Enabled="false" />
<StyleAction Attribute="display" Value="Block" />
<Parallel>
<FadeIn Duration="1" Fps="20" />
<Scale Duration="1" Fps="20" ScaleFactor="30.0" Center="true" />
</Parallel>
</Sequence>
</OnClick>
</Animations>
</cc1:AnimationExtender> |
