PR

手を動かして画面上の写真を左右にスライドさせるKinectサンプル

2012年8月20日(月)
薬師寺 国安

ここでいったんVS2010を終了し、Expression Blend 4を起動してストーリーボードの作成を行います。

ストーリーボードの作成

右手を右から左に向かって動作させ画像をワイプするストーリーボード 

「オブジェクトとタイムライン(B)」にある[新規作成]アイコンから新しいStoryboardを作成します(図3)。

図3:[新規作成]ボタンをクリックする

「Storyboardリソースの作成」のダイアログボックスが開きますので「名前(キー)」にLeftAnimateStoryboardと指定し[OK]ボタンをクリックします。

図4:「名前(キー)」にLeftAnimateStoryboardと指定する

するとアートボード全体が赤い枠線で囲まれ、タイムラインが表示されます。この状態からアニメーションを作成していきます。

まず、「オブジェクトとタイムライン(B)」からnextImage選択し、黄色の再生ヘッドが0の位置で、プロパティのOpacityに0と入力します。最初から0と入力されていても、上書きで0と再度入力してください。「オブジェクトとタイムライン(B)」のnextImageにOpacity属性が追加され、楕円のマークが表示されます(図5)。

図5:nextImageにOpacity属性が追加され楕円が表示されている

同様にpreviousImageを選択し、Opacityに100と指定します。次に、currentImageを選択し、プロパティのMarginの←に2000、→に-2000と指定します(図6)。

図6:currentImageのMarginを指定する

次に黄色の再生ヘッドを0:00.400の位置に移動します。previousImageを選択し、プロパティのOpacityに100と指定します。既に100と入力されていても上書きで100と入力してください。

入力したら、黄色の再生ヘッドを0:00.500の位置に移動します。previousImageを選択しOpacityに0と入力します。次にcurrentImageを選択し、プロパティのMarginの←に0、→に0と入力します。全て設定すると図7のようなタイムラインが完成します。

図7:完成したタイムライン

ここまでの、LeftAnimateStoryboardの再生ヘッドの位置と各値をまとめると表1のようになります。

表1:LeftAnimateStoryboardの再生ヘッドの位置と各プロパティの値

コントロール名 プロパティ名 再生ヘッドの位置
    0:00.000 0:00.400 0:00.500
nextImage Opacity 0
previousImage Opacity 100 100 0
currentImage Marign ←2000 →-2000 ←0 →0

アートボードの左隅上に表示されているLeftAnimateStoryboardタイムライン記録オンの赤い●をクリックして、タイムラインの記録をオフにします。これで、LeftAnimateStoryboardタイムラインは出来上がりました。

左手を左から右に向かって動作させ画像をワイプするストーリーボード

次に、図4からStoryboardの新規作成の手順でRightAnimateStoryboardを作成します。

「オブジェクトとタイムライン(B)」からnextImageを選択し、黄色の再生ヘッドが0:00.000の位置で、Opacityに100と指定します。previousImageを選択しOpacityに0と入力します。currentImageを選択しMarginの←に-2000、→に2000と入力します。次に再生ヘッドを0:00.400の位置に移動し、nextImageのOpacityに100と入力します。再生ヘッドを0:00.500の位置に移動し、nextImageのOpacityに0と入力します。次にcurrentImageを選択しMarginの←に0、→に0と入力します。

ここまでの、RightAnimateStoryboardの再生ヘッドの位置と各値をまとめると表2のようになります。

表2:RightAnimateStoryboardの再生ヘッドの位置と各プロパティの値

コントロール名 プロパティ名 再生ヘッドの位置
    0:00.000 0:00.400 0:00.500
nextImage Opacity 100 100 0
previousImage Opacity 0
currentImage Marign ←-2000 →2000 ←0 →0

アートボードの左隅上に表示されているRightAnimateStoryboardタイムライン記録オンの赤い●をクリックして、タイムラインの記録をオフにします。これで、RightAnimateStoryboardタイムラインは出来上がりました。

保存して Expression Blend 4を終了します。再度VS2010を起動します。

書き出されるXAMLコードは省略しますが、下記のリスト、3のA のコードが追加されていますので、Bのように変更してください。

リスト3 MainPage.xaml

A(追加されたコード)

  <Window.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
      <BeginStoryboard Storyboard="{StaticResource LeftAimateStoryboard}"/>
      <BeginStoryboard Storyboard="{StaticResource RightAnimateStoryboard}"/>
    </EventTrigger>
  </Window.Triggers>

B(下記のように変更する)

  <Window.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded"></EventTrigger>
  </Window.Triggers>
Think IT会員限定特典
  • 「スライドによるページナビゲーション」サンプルプログラム

薬師寺国安事務所

薬師寺国安事務所代表。Visual Basic プログラミングと、マイクロソフト系の技術をテーマとした、書籍や記事の執筆を行う。
1950年生まれ。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。1997年に薬師寺聖とコラボレーション・ユニット PROJECT KySS を結成。2003年よりフリーになり、PROJECT KySS の活動に本格的に参加、.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。Windows Phoneアプリ開発を経て、現在はWindows ストア アプリを多数公開中

Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。Microsoft MVP for Development Platforms - Windows Phone Development(Oct 2012-Sep 2013)。Microsoft MVP for Development Platforms - Client Development(Oct 2013-Sep 2014)。Microsoft MVP for Development Platforms-Windows Platform Development (Oct 2014-Sep 2015)。

連載バックナンバー

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

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

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

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