Using the AnimationExtender Component in Ajax Control Toolkit (ACT) - OnClick event of a control

(Page 5 of 5 )

Make the changes to the Animations tag as shown. You need to change only the XML children of the Animations tag. Now build the solution and test. In this case you need to click on Panel1, which has the default black color for the text, which changes from red to blue in two seconds. The code in the <form/> should appear as shown.

<form id="form1" runat="server">
  <asp:ScriptManager ID="ScriptManager1" runat="server">
  </asp:ScriptManager>
  <ajaxToolkit:AnimationExtender ID="AnimationExtender1"
runat="server" TargetControlID="Panel1" >
  <Animations>
    <OnClick>
      <Color Duration="2" StartValue="#FF3300"
        EndValue="#0033FF" Property="style"
        PropertyKey="color" />
    </OnClick>
  </Animations>
  </ajaxToolkit:AnimationExtender>
  <asp:Panel ID="Panel1" runat="server"
    Height="50px" Width="125px"
    BackColor="AliceBlue" BorderStyle="Groove">
    "My first animation with ACT"
  </asp:Panel>
</form>

OnLoad with OnClick event

The OnLoad event kicks in when the page loads, and you can see the fore color of the text changes its color. There is an additional Animation I also added which uses the click event. After the first animation, if you click on the Panel, you should see the panel content "FadeIn." The source code in the <form/> for this is as shown.

<form id="form1" runat="server">
  <asp:ScriptManager ID="ScriptManager1" runat="server">
  </asp:ScriptManager>
  <ajaxToolkit:AnimationExtender ID="AnimationExtender1"
  runat="server" TargetControlID="Panel1" >
  <Animations>
    <OnLoad>
      <Color Duration="10" StartValue="#FF3300"
        EndValue="#0033FF" Property="style"
        PropertyKey="color" />
    </OnLoad>
  </Animations>
  <Animations>
    <OnClick>
      <FadeIn Duration="10" Fps="20" />
    </OnClick> 
  </Animations>
  </ajaxToolkit:AnimationExtender>
  <asp:Panel ID="Panel1" runat="server"
    Height="50px" Width="125px"
    BackColor="AliceBlue" BorderStyle="Groove">
    "My first animation with ACT"
  </asp:Panel>
</form>

Sequenced Events

You can sequence the events by using the <Sequence/> tag as shown.

<form id="form1" runat="server">
  <asp:ScriptManager ID="ScriptManager1" runat="server">
  </asp:ScriptManager>
  <ajaxToolkit:AnimationExtender ID="AnimationExtender1" 
  runat="server" TargetControlID="Panel1" > 

  <Animations>
    <OnClick>
      <Sequence>
        <FadeIn Animation Target="Animated Control"
          Duration="1"/>
        <Move Horizontal="-150" Vertical="50" />
        <Color StartValue="#AA0000"
          EndValue="#FFAAAA"
          Property="style"
          PropertyKey="backgroundColor" />
        <Resize Width="200" Height="150" />
      </Sequence>
    </OnClick> 
  </Animations>

  </ajaxToolkit:AnimationExtender>
  <asp:Panel ID="Panel1" runat="server"
    Height="50px" Width="125px"
    BackColor="AliceBlue" BorderStyle="Groove">
    "My first animation with ACT"
  </asp:Panel>
</form>

When the page is displayed you will see the following on the browser.

When you click on the panel you will see a sequence of events taking place. It fades for a while and moves out and resizes itself before its color change. The final display is as shown.

Summary

This basic tutorial on Ajax Control Toolkit's animation component dealt with the declarative tags used in the animation. This is only scratching the surface of this control; it is possible to get a variety of effects by combining them using the effects by themselves, or combining them in various ways. Readers may encounter some troubling features; for example, while the design may throw some exceptions, the build succeeds and controls would work. Please make trips to Microsoft Ajax site to resolve some of the problems.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

Comments On: Using the AnimationExtender Component in Ajax Control Toolkit (ACT)

· Declarative mark up will have a larger following as it appeals to developers who are...   >>> Post your comment now!