Blend4上で実行する

Blend4上で実行する

ここで一度、Blend4のメニューから「プロジェクト（P）／プロジェクトの実行（R）」と選択して実行してみましょう。画像の上にマウスカーソルが乗ると、Opacityの値が変化して、背景が透けて画像が透明化し、マウスカーソルが離れると元の画像に戻ります（図8）。

MouseDragElementBehaviorビヘイビアの設定

次に、MouseDragElementBehaviorビヘイビアの設定を行います。

「アセット」パネルから「ビヘイビア」を選択し、MouseDragElementBehaviorを「オブジェクトとタイムライン（B）」内に表示されているImage1要素上にドラッグ&ドロップします。プロパティには何も設定する必要はありません（図9）。

ここで一度、Blend4のメニューから「プロジェクト（P）／プロジェクトの実行（R）」と選択して実行してみましょう。画像の上にマウスカーソルが乗ると、Opacityの値が変化して、背景が透けて画像が透明化し、ドラッグすると任意の位置に移動させることができます （図10）。

次にマウスカーソルが画像の上に乗ったとき、Y軸を中心に回転するストーリーボードを作成します。

アニメーション（Storyboard）の作成

「オブジェクトとタイムライン（B）」の「＋」アイコンをクリックして、Storyboardリソースを新規作成し、名前（キー）はデフォルトの「Storyboard1」とし「OK」をクリックします （図11）。アートボードが赤い枠で囲まれ、記録モード インジケーターがオンの状態となり、「オブジェクトとタイムライン（B）」には、新しいタイムラインが表示されます（図12）。

このサンプルでは、1秒かかって、「Image1」をY軸を中心に360度回転させます。そこで、黄色の再生ヘッドを「1」のところまでドラッグします（図13）。「Image1」を選択してプロパティの[変換]を展開して表示される、Projectionの「回転」のYの値に、360と指定します（図14）。これで画像が1秒かかって360度回転します。Image1の再生ヘッドの1秒後の位置に楕円のマークが表示されます（図15）。

ここで一度、動作を確認しておきましょう。「オブジェクトとタイムライン（B）」の「先頭のフレームに移動」アイコンをクリックして0秒時点に巻き戻し、「再生」アイコンをクリックして（図16　左図）、ストーリーボードの動きを確認します（図16右図）。図12の「●Storyboard1タイムライン記録オン」の先頭の赤いマークをクリックして、記録をオフにします。

「オブジェクトとタイムライン（B）」内のStoryboard1を選択し、表示されるプロパティから、RepeatBehaviorにForeverを指定します（図17）。画像の上にマウスカーソルがある限り永遠に回転を続けます。

ストーリーボードを閉じます（図18）。

これまでの操作で作成されたXAMLコードは、「XAML」アイコンをクリックすることにより確認することができます（図19）。

Blend4を終了して、VS2010に戻ります。