PR

X軸を中心に画像が回転して入れ替わる

2011年5月31日(火)
PROJECT KySS

ControlStoryboardActionの設定

画像の上にはToggleButtonが配置されています。「アセット(T)」パネルの「ビヘイビアー」内のControlStoryboardActionを「オブジェクトとタイムライン(B)」内のTopToggleButton上にドラッグドロップします(図9)。

3

図9:ControlStoryboardActionをTopToggleButton上にドラッグ&ドロップする

プロパティが表示されますので、[トリガー]パネルにあるEventNameにChecked、[共通プロパティ]パネルにあるStoryboardにTopStoryboardを指定します(図10)。

3

図10:ControlStoryboardActionのプロパティを設定する。EventNameはChecked

同様に、MidToggleButtonとBottomToggleButton上にもControlStoryboardActionをドラッグ&ドロップしてプロパティを設定してください。EventNameはChecked共通ですが、Storyboardには、MidToggleButtonではMidStoryboardを、BottomToggleButtonではBottomStporyboardを選択してください。

上記の設定ができたところで、一度Blend4のメニューの「プロジェクト(P)/プロジェクトの実行(R)」と選択して実行してみましょう。

画像をクリックすると「菜の花」が回転し、背後から「サルビア」が表示されると思います。しかし、一度「サルビア」が表示されると、再度クリックしても何の変化も起こりません。クリックするたびに画像を変化させるには、先ほど作成したReturnTopStoryboard、ReturnMidStoryboard、ReturnBottomStoryboardをToggleButtonと関連付ける必要があります。

再度「アセット(T) 」パネルの「ビヘイビアー」内のControlStoryboardActionをTopToggleButton内にドラッグ&ドロップします。TopToggleButtonは2つのControlStoryboardActionを子として持つことになります(図11)。後から追加したControlStoryboardActionのプロパティを設定します。[トリガー]パネルにあるEventNameにはUncheckedを選択し、[共通プロパティ]パネルにあるStoryboardにはReturnTopStoryboardを選択します(図12)。

3

図11:TopToggleButtonの子として2つのControlStoryboardActionが追加されている

3

図12:後から追加したControlStoryboardActionのプロパティを設定する。EventNameはUnchecked

同様に、MidToggleButtonとBottomToggleButtonにもControlStoryboardActionを追加し、プロパティを設定してください。Uncheckedは共通ですが、StoryboardはMidToggleButtonに追加したControlStoryboardActionのStoryboardにはReturnMidStoryboardを、BottomToggleButtonの場合は、ReturnBottomStoryboardを選択してください。

Imageの上に配置されたToggleButtonのイベントがChecked(チェックされた)の時は、「菜の花」の画像から「サルビア」の画像に回転してすり替わります。イベントがUnchecked(チェックが外された)の時は、「サルビア」の画像から「菜の花」の画像に回転してすり替わります。CheckedとUncheckedが繰り返され、画像をクリックするたびに画像が回転してすり替わります。

Blend4のメニューから、「プロジェクト(P)/プロジェクトの実行(R)」と選択して実行してみてください。今度は何度クリックしても画像が回転して変化すると思います。

Blend4を終了し、VS2010上からも実行して動作を確認しておいてください。

これでTips集は終了です。今回は主にBlend4での操作をメインに紹介してきました。Blend4の操作をマスターすると、動きのある、表現豊かなページを作成することができます。

現在、Silverlight5のβ版がリリースされています。Silverlight5の正規版がリリースされるまでに、Blend4の操作をぜひマスターしておいていただきたいと思います。この連載がその一助となれば幸いです。

Silverlight5βの各ツールは下記URLよりダウンロードできます。
→ http://www.microsoft.com/japan/silverlight/development_SL5b.aspx

Think IT会員限定特典
  • 「X軸を中心に画像が回転して入れ替わる」サンプルプログラム

四国のSOHO。薬師寺国安(VBプログラマ)と、薬師寺聖(デザイナ、エンジニア)によるコラボレーション・ユニット。1997年6月、Dynamic HTMLとDirectAnimationの普及を目的として結成。共同開発やユニット名義での執筆活動を行う。XMLおよび.NETに関する著書や連載多数。最新刊は「Silverlight実践プログラミング」両名とも、Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。http://www.PROJECTKySS.NET/

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています