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

まず初めに、このプログラムで実装する機能の動作を、下記に解説しておきます。

画面に表示された、3分割された画像の1枚をクリックすると、クリックされた画像がX軸を中心に回転し、全てクリックすると、最初の画像とは異なった1枚の画像になります（図1）。

図1：クリックした画像がX軸を中心に回転し、全てクリックすると1枚の画像になる（クリックで拡大）

今回のサンプルは以下よりダウンロードできます。
→　今回のサンプルファイル（5.94MB）

新規プロジェクトの作成

早速サンプルを作っていきましょう。本稿では開発言語にVisual Basicを用います。

VS 2010のメニューから[ファイル(F)／新規作成(N)／プロジェクト(P)]を選択します。次に、「Silverlight アプリケーション」を選択して、「名前(N)」に任意のプロジェクト名を指定します。ここでは「SL4_ ImageFronBackChange」という名前を付けています。

ソリューションエクスプローラー内にImageというフォルダーを作成し、2種類の分割された6枚の画像を追加しておきます。

ダウンロードされたサンプル・ファイルには画像は追加済みです。

コントロールの配置

<UserControl>要素のWidthに800、Heightに600と指定します。ツールボックスからGridコントロールを配置します。Widthに640、Heightに160と指定します。「名前」にはTopGridと指定します。ImageコントロールをGridと同じ幅と高さで配置します。「名前」にはSarubiaImage1としています。プロパティの[共通]パネルにあるSourceに、Imageフォルダー内の「サルビア_1.png」を指定します（図2）。

図2：Gridの中にImageを配置し画像を読み込んだ（クリックで拡大）

次に、SarubiaImage1の上に同じサイズのImageコントロールを配置します。「名前」はNanohanaImage1とします。SourceプロパティにImageフォルダー内の「菜の花_1.png」を指定します。NanohanaImage1の上に同じサイズのToggleButtonコントロールを配置します。ToggleButtonがツールボックスに登録されていない場合は、「コモンSilverlightコントロール」または「すべてのSilverlightコントロール」のペイン上で、マウスの右クリックで表示されるメニューの、「アイテムの選択(I)」から、ToggleButtonにチェックを付けてください。ToggleButtonのプロパティの[可視性]パネルにあるOpacityに0を指定して透明化しておきます。ToggleButtonの「名前」はTopToggleButtonとしておきます。

TopGridコントロール上には、Imageが2個とToggleButtonの計3個のコントロールが配置されることになります（図3）。

図3：Grid上に2個のImageと1個のToggleButtonを配置した（クリックで拡大）

表1を参考にGrid（TopGrid）と同じサイズのGridコントロールをあと2個配置し、その中にImageを2個とToggleButtonを1個配置します。ImageにはSourceプロパティで画像を指定しておいてください。全て設定すると図4のようになります。「菜の花」の背後には「サルビア」の画像が配置されています。「菜の花」の画像上には透明化されたToggleButtonが配置されています。Grid内に配置されるコントロールの一覧は表1を参照してください。

表1　Grid内に配置されたコントロール

Grid名	Grid内に配置されたコントロール
Grid(TopGrid)	Image(SarubiaImage1) Sourceにサルビア_1.png
	Image(NanohanaImage1) Sourceに菜の花_1.png
	ToggleButton(TopToggleButton)
Grid(MidGrid)	Image(SarubiaImage2) Sourceにサルビア_2.png
	Image(NanohanaImage2) Sourceに菜の花_2.png
	ToggleButton(MidToggleButton)
Grid(BottomGrid)	Image(SarubiaImage3) Sourceにサルビア_3.png
	Image(NanohanaImage3) Sourceに菜の花_3.png
	ToggleButton(BottomToggleButton)

図4：3個のGrid上に、それぞれ2個のImageと1個のToggleButtonを配置し、Imageに画像を読み込んでいる（クリックで拡大）

書き出されるXAMLはリスト1のようになります。

リスト1　書き出されたXAMLコード(MainPage.xaml)

01	（１）3個の<Grid>要素内に、<Image>要素が2個と、<ToggleButton>要素が1個配置されています。

02

～コード略～

03	<Grid x:Name="LayoutRoot" Background="White">

04	<Grid Height="160" HorizontalAlignment="Left" Margin="68,54,0,0" Name="TopGrid" VerticalAlignment="Top" Width="640">　■（１）

05	<Image Height="160" HorizontalAlignment="Left" Name="SarubiaImage1" Stretch="Fill" VerticalAlignment="Top" Width="640" Source="/SL4_ImageFrontBackChange;component/Image/サルビア_1.png" />

06	<Image Height="160" HorizontalAlignment="Left" Name="Image1" Stretch="Fill" VerticalAlignment="Top" Width="640" Source="/SL4_ImageFrontBackChange;component/Image/菜の花_1.png" />

07	<ToggleButton Height="160" HorizontalAlignment="Left" Name="TopToggleButton" VerticalAlignment="Top" Width="640" Opacity="0" />

08

</Grid>

09	<Grid Height="160" HorizontalAlignment="Left" Margin="68,214,0,0" Name="MidGrid" VerticalAlignment="Top" Width="640">　■（１）

10	<Image Height="160" HorizontalAlignment="Left" Name="SarubiaImage2" Source="/SL4_ImageFrontBackChange;component/Image/サルビア_2.png" Stretch="Fill" VerticalAlignment="Top" Width="640" />

11	<Image Height="160" HorizontalAlignment="Left" Name="NanohanaImage2" Source="/SL4_ImageFrontBackChange;component/Image/菜の花_2.png" Stretch="Fill" VerticalAlignment="Top" Width="640" />

12	<ToggleButton Height="160" HorizontalAlignment="Left" Name="MidToggleButton" Opacity="0" VerticalAlignment="Top" Width="640" />

13

</Grid>

14	<Grid Height="160" HorizontalAlignment="Left" Margin="68,374,0,0" Name="BottomGrid" VerticalAlignment="Top" Width="640">　■（１）

15	<Image Height="160" HorizontalAlignment="Left" Name="SarubiaImage3" Source="/SL4_ImageFrontBackChange;component/Image/サルビア_3.png" Stretch="Fill" VerticalAlignment="Top" Width="640" />

16	<Image Height="160" HorizontalAlignment="Left" Name="NanohanaImage3" Source="/SL4_ImageFrontBackChange;component/Image/菜の花_3.png" Stretch="Fill" VerticalAlignment="Top" Width="640" />

17	<ToggleButton Height="160" HorizontalAlignment="Left" Name="BottomToggleButton" Opacity="0" VerticalAlignment="Top" Width="640" />

18

</Grid>

19

</Grid>

20

～コード略～

ソリューションエクスプローラー内の、MainPage.xamlを選択し、マウスの右クリックで表示されるメニューの、「Expression Blendを開く(X)」を選択し、Blend4を起動します。

Blend4でのStoryboardの作成

ストーリーボードの「新規作成」アイコンをクリックしてTopStoryboardという名前のストーリーボードを作成します（図5）。

図5：TopStoryboardという名前のストーリーボードを作成する（クリックで拡大）

アートボード上の画面全体が赤の枠線で囲まれ、「●TopStoryboardタイムライン記録オン」に変わります。この状態でタイムラインの記録が可能になります。「オブジェクトとタイムライン(B)」内のTopGridを展開し、NanohanaImage1を選択します。黄色の再生ヘッドが0の位置で、楕円に+マークの付いた「キーフレームの記録」アイコンをクリックすると、タイムライン上に楕円のマークが追加されます。

次に再生ヘッドを0.5の位置に移動し、プロパティの[変換]パネルにあるProjectionの「回転」のXに-90と入力します。タイムライン上に楕円のマークが追加され、「菜の花」の代わりに「サルビア」が表示されます（図6）。

図6：再生ヘッドが0.5の位置で、Projectionの「回転」のXに-90と指定する（クリックで拡大）

次にNanohanaImage1の0.5秒の位置にある楕円のマークをクリックします。「イージング」プロパティが表示されますので、EasingFunctionにBackInを指定します。指定されたパスのアニメーションを開始する直前に、逆の動きを与えることができます。逆行動作の振幅を指定するAmplitudeには、デフォルトの1のままにしておきます（図7）。

図7：EasingFunctionにBackInを指定する

次に「オブジェクトとタイムライン(B)」内のSarubiaImage1を選択します。黄色の再生ヘッドが0秒の位置で、プロパティの[変換]パネルにあるProjectionの「回転」のXに-90と指定します。

次に再生ヘッドを0.5秒の位置に移動し、Projectionの「回転」のXに同じく-90と指定します。

次に再生ヘッドを1秒の位置に移動し、Projectionの「回転」のXに0を指定します。SarubiaImage1の再生ヘッドが1秒の位置に追加された楕円のマークをクリックします。図7のようにEasingFunctionが表示されるので、Elastic Outを選択します。ElasticEaseは、スプリングが伸び縮みしながら最終的に停止するまでのアニメーションを作成することができます。アニメーションが最終的に停止するまでの間に、ターゲットが前後運動する回数を設定するOscillations には1を指定します。スプリングの硬さを設定するSpringinessには2を指定します。 Springiness の値が小さいほど、スプリングが硬くなります（図8）。

図8：EasingFunctionにElastic Outを指定する

次にストーリーボードの「新規作成」からMidStoryboardとBottomStoryboardを作成してください。「オブジェクトとタイムライン(B)」内のMidGridとBottomGridを展開してImageを表示させ、表2を参考に、再生ヘッドとプロパティの[変換]パネルにあるProjectionの「回転」のXの値を設定してください。

表2　TopStoryboard、MidStoryboard、BottomStoryboard共通

オブジェクト名	プロパティ	再生ヘッド0秒	再生ヘッド0.5秒	再生ヘッド1秒
SarubiaImage1 SarubiaImage2 SarubiaImage3	Projectionの 「回転」の Xの値	-90	-90	0 (EasingFunctionにElasticOutを設定)
NanohanaImage1 NanohanaImage2 NanohanaImage3	Projectionの 「回転」の Xの値	0	-90 (EasingFunctionにBackInを設定)	―

次に、画像が回転して変化した後、再度画像をクリックした場合のストーリーボードを作成します。「新規作成」からReturnTopStoryboard、ReturnMidStoryboard、ReturnBottomStoryboardを作成し、表3を参考に各Imageにキーフレームを設定してください。EasingFunctionの設定も忘れないようにしてください。

表3　ReturnTopStoryboard、ReturnMidStoryboard、ReturnBottomStoryboard共通

オブジェクト名	プロパティ	再生ヘッド0秒	再生ヘッド0.5秒	再生ヘッド1秒
SarubiaImage1 SarubiaImage2 SarubiaImage3	Projectionの 「回転」の Xの値	0	-90 (EasingFunctionにBackInを設定)	―
NanohanaImage1 NanohanaImage2 NanohanaImage3	Projectionの 「回転」の Xの値	-90	-90	0 (EasingFunctionにElasticOutを設定)

画像がクリックされた時のストーリーボードへの関連付けを行います。

ControlStoryboardActionの設定

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

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

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

図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）。

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

図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