PR

写真を突っついて一覧から削除、並び替えするLeap Motionプログラムを作る

2013年12月2日(月)
薬師寺 国安

Blendを起動してストーリーボードを作成

次に、アニメーションのためのストーリーボードを作成します。

まずはBlendを起動します。実際にBlend起動する前に、必ずVS 2012でプロジェクトをビルドしておいてください。

VS 2012からBlendを直接起動する方法もありますが、今回は.exeファイルを実行して起動します。64bitのWindows 8環境であれば、「C:\Program Files (x86)\Microsoft Visual Studio 11.0\Blend\Blend.exe」を実行します。なお、VS 2012をインストールすると、Blendも自動的にインストールされています。Windows 8(またはWindows 8.1) のスタート画面にも表示されているはずですので、それをタップして起動しも構いません。

Blendが起動したら、[プロジェクトを開く]から、現在作成している「FluidMoveBehaviorLeapMotion.sln」ファイルを指定して開きます。

キーがWrapPanelTemplate内にレイアウトした要素にFluidMoveBehaviroビヘイビアーを設定します。WrapPanelTemplate内にレイアウトした要素は、通常の状態では、「オブジェクトとタイムライン(B)」に表示されておりません。表示させるには下記の手順に従います。

まず、ListBoxを選択し、マウスの右クリックで表示されるメニューから、[追加テンプレートの編集(D)]−[アイテムのレイアウトの編集(ItemsPanel)]−[現在の編集(U)]と選択します(図3参照)。

図3:ListBoxから[追加テンプレートの編集(D)]−[アイテムのレイアウトの編集(ItemsPanel)]-[現在の編集(U)]と選択する(クリックで拡大)

「アセット」パネルから「ビヘイビアー」を選択し、FluidMoveBehaviorビヘイビアーを「オブジェクトとタイムライン(B)」内の[WrapPanel]上にドラッグ&ドロップします。すると、[WrapPanel]要素の子としてFluidMoveBehaviorが追加されます(図4)。

図4:[WrapPanel]上にFluidMoveBehaviorビヘイビアーをドラッグ&ドロップすると[WrapPanel]要素の子としてFluidMoveBehaviorが追加される(クリックで拡大)

今追加したFluidMoveBehaviorのプロパティを設定します。[共通プロパティ]の[AppliesTo]プロパティには「Children」を指定します。AppliesToプロパティにはビヘイビアーを適用するオブジェクトを選択します。Childrenは、指定したオブジェクトのすべての子に、ビヘイビアーが適用されます。
次にEaseXとEaseYをドロップダウンリストから選択します。[EaseX]プロパティには水平方向のイージング機能を指定します。ここでは、要素(画像)が削除された時、逆の動きを伴って残りの要素(画像)が並び替わるよう、「BackInOut」を指定しています。[EaseY]プロパティには垂直方向のイージング機能を指定します。ここでも「BackInOut」を指定しています。[Amplitude]プロパティは、アニメーションに関連付けられた収縮の振幅を設定します。デフォルトの「1」のままにしておきます。

[タグプロパティ]内の[InitialTag]と[Tag]プロパティはデフォルトの「Element」のままにしています。

[InitialTag]プロパティには、要素の派生元のように見せるタグを指定します。スタンドアロンでは「Element」を選択し、データバインドされている時は「DataConText」を選択します。

[Tag]プロパティには、データストアの読み取りと書き込みの対象となるデータの種類を指定します。スタンドアロンでは「Element」、データバインドされている時は「DataContext」を指定します。

WrapPanelにはデータバインドを使用していませんので、[InitialTag]と[Tag]にはデフォルトの「Element」のままにしています(図5)。

図5:「WrapPanel」要素のFluidMoveBehaviorの各プロパティを設定した(クリックで拡大)

ListBoxに表示されている画像の一覧から、任意の画像を削除するには、[アセット]パネルから[ビヘイビアー]を選択し、「RemoveElementAction」アクションを使用します。ツリーから要素を容易に削除できます。

まず、キーがListBoxTemplate内にレイアウトした要素を「オブジェクトとタイムライン(B)」に表示させます。ListBoxを選択し、マウスの右クリックで表示されるメニューから、[追加テンプレートの編集(D)]−[生成されたアイテムの編集(ItemTemplate)]-[現在の編集(U)]と選択します(図6)。

図6:ListBoxから[追加テンプレートの編集(D)]-[生成されたアイテムの編集(ItemTemplate)]-[現在の編集(U)]と選択する(クリックで拡大)

「オブジェクトとタイムライン(B)」内にImageが表示されますので、[アセット]パネルから[ビヘイビアー]を選択し、「RemoveElementAction」をImage上にドラッグ&ドロップします。表示されるプロパティの設定は、デフォルトのままで構いません。[トリガー]の「EventName」にMouseLeftButtonDownが自動的に選択されています(図7)。

図7:RemoveElementActioのプロパティはデフォルトのままでよい(クリックで拡大)

以上でBlend4の設定は全部完了です。保存と適用を行ってください。

Blend4の操作を終わり、VS2012に戻ります。書き出されるXAMLコードは省略します。サンプルのソースコードを参照してください。

Think IT会員限定特典
  • 写真を突っついて一覧から削除、並び替えするLeap Motionプログラム

    『新世代モーションコントローラー Leap Motion -Visual Basicによる実践プログラミング-』 第8回のサンプルプログラムです。
薬師寺国安事務所

薬師寺国安事務所代表。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会員サービスの概要とメリットをチェック

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