テンプレートの確認とツールボックスへの追加
インストール完了後にVSを起動し、スタートページ上の［Webサイト］の作成を選択してください。次のような［新しいWebサイト］ダイアログが表示され、Control Toolkitに対応したテンプレートが追加されていることが確認できるはずです（図5）。
テンプレートに［AJAX Control Toolkit Web Site］を、言語に［Visual Basic］を選択した後、Webサイトを作成します。デフォルトで作成されたWebサイトの状態は、次の通りです（図6）。
続いて、今回利用するControl Toolkitのコントロールをツールボックスに追加します。ASP.NET AJAXと違い、Control ToolkitはGAC（Global Assembly Cache）に登録されないのでユーザーがアイテムをツールボックスに追加することになります。ツールボックス上で右クリックし、［タブの追加］を選択してください。続いてタブの名前を［Control Toolkit］（任意の名前で構いません）と入力してクリックしてください。［Control Toolkit］タブ上で右クリックし、［アイテムの選択...］を選択すると［ツールボックス アイテムの選択］というダイアログが表示されます（図7）。
［参照...］ボタンをクリックし、任意の場所に配置したSampleWebSiteのBinフォルダ内にある［AjaxControlToolkit.dll］を選択して［開く］ボタンをクリックすると、Control Toolkitの各コントロールが追加されますので、ダイアログ上で［OK］ボタンをクリックしてください。以上の手順でツールボックスの［Control Toolkit］タブ上にControl Toolkitの各コントロールが追加されます（図8）。
AnimationExtenderコントロールの特徴と注意点
Control Toolkitの中でもAnimationExtenderコントロールは扱う上で難易度の高いコントロールです。理由は以下の点が挙げられます。
- プロパティウィンドウからの設定ができない。
- インテリセンスが利用できない。
- HTMLデザイナ上でXMLタグを自分で入力していく必要がある。
- リファレンスを読んで動作を知る必要がある。
また、AnimationExtenderコントロールはASP.NET AJAXを利用しているので、個々のページ先頭には必ずScriptManagerコントロールを張り付けてください。
AnimationExtenderコントロール概要
注意点を踏まえた上でAnimationExtenderコントロールの特徴を説明します。AnimationExtenderコントロールは対象のコントロールに対してアニメーションを付加させるコントロールです。アニメーション効果は全部で25種類ありますが、それぞれのアニメーションはJavaScriptのクラスに相当しています。アニメーション名はXMLタグに使用され、プロパティはタグの属性として定義します。それでは実際にAnimationExtenderコントロールのコードを見てみましょう。
<ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="コントロールID"> <Animations> <イベント> <動作アニメーション> ： ：（略） ： </動作アニメーション> </イベント> </Animations> </ajaxToolkit:AnimationExtender>
こちらが、基本的なAnimationExtenderコントロールのコードとなります。注目すべき点があるので1つずつ説明します。
TargetControlIDプロパティにアニメーションを適応したいコントロールを書きます。Animationsタグは固定で入力する必要があります。- イベントの部分は書かれたイベントが実行された時に内部のアニメーションを動作させます。
- 動作アニメーションの部分はイベントが実行された時にアニメーションを1つのみ実行します。
AnimationExtenderコントロールは、全部で6つのイベントに対応していますので、状況に応じて使い分けてください。
| イベント名 | 内容 |
| OnLoad | ページが読み込まれた時 |
| OnClick | コントロールがクリックされた時 |
| OnMouseOver | マウスがコントロールの上に入った時 |
| OnMouseOut | マウスがコントロールの上から出た時 |
| OnHoverOver | マウスがコントロールの上に入った時 |
| OnHoverOut | マウスがコントロールの上から出た時 |
1つのAnimationExtenderコントロールに対してアニメーションは1つしか設定できませんが、イベントは複数配置することが可能です。イベントの内部に、もし2つのアニメーションが記述されていた場合はパーサーエラーが発生してしまうので注意してください（図9）。
OnMouseOver／OutとOnHoverOver／Outが同じ内容に思えますが、動作に関して差が出てきます。それは、OnMouseOver／Outの場合は動作の途中でマウスがコントロールの外に出た場合でもアニメーションの動作を最後まで実行しますが、OnHoverOver／Outの場合はアニメーションは動作の途中で動作を停止するという差です。実際に利用する際にはその差に気をつけてください。
動作アニメーションのよく利用される共通設定
各アニメーションの中でよく利用されるプロパティにFpsプロパティとDurationプロパティが挙げられます。FpsプロパティはFrame Per Secondの略で、1秒辺りどれくらいのフレームでレンダリングするかの設定です。動画のなめらかさに影響します。Durationプロパティは、どれくらいの時間をかけて処理を行うかの設定です。秒単位での設定になります。AnimationExtenderを扱う上で上の2つのプロパティはさまざまな所で利用されるので注意してください。
Durationプロパティで設定した時間よりも長く時間がかかった処理になるか、フリーズしてしまうので、設定をする際には一度動作を確認してみる必要があります。
