インタラクティビティの追加

インタラクティビティのモデリングは、ユーザーがアプリケーションを操作するさまざまな方法をまとめるのに便利です。Microsoft Expression Blend には、プロトタイプのインタラクティブ機能を設定するツールが多数備わっています。たとえば、次のような操作を行えます。

  • アニメーションを使った動作のシミュレーション。

  • プロトタイプの要素へのナビゲーション機能の追加。

  • データの表示と操作主体のユーザー インターフェイスのプロトタイプの作成。サンプル データとデータ バインドを使用します。

  • プロトタイプの要素へのビヘイビアーの適用。

SketchFlow プロジェクトにインタラクティビティを追加する詳細については、「SketchFlow Overview (SketchFlow の概要) Ee341387.xtlink_newWindow(ja-jp,Expression.40).png」を参照してください。

アニメーション

プロトタイプに、ユーザーの操作に反応するアニメーションを追加すると便利なことがあります。[オブジェクトとタイムライン] には、キーフレームを使ってアニメーションを作成するツールがあります。さらに、[状態] パネルや [SketchFlow アニメーション] パネルも使用します。

状態の詳細については、後半の「ビジュアル状態」を参照してください。

キーフレーム アニメーション

Expression Blend のキーフレーム アニメーション ツールを使って、SketchFlow プロジェクトの画面で再生するアニメーションを作成できます。コントロールの表示状態が変わると再生されるアニメーション (特定の状態になったときにトリガーされるアニメーションなど) と、ユーザーの操作に反応して再生されるアニメーション (操作によりトリガーされるアニメーションなど) があります。

Expression Blend でアニメーションを作成する方法については、「アニメーション オブジェクト」を参照してください。

Windows Presentation Foundation (WPF) アプリケーションでは、モーション パスを使用してアニメーションを作成することもできます。詳細については、「モーション パスを作成、変更、または削除するには」を参照してください。

SketchFlow アニメーション

キーフレーム アニメーションは便利ですが、細かな設定が必要で、プロトタイプ プロジェクトの本来の目的に合わない場合もあります。SketchFlow アニメーションは、ストーリーボードに基づいたアニメーションで、[SketchFlow アニメーション] パネルで簡単に作成することができます。キーフレーム アニメーションや状態の変化と同じように、SketchFlow アニメーションは、ユーザーの操作を示すのに便利です。

SketchFlow アニメーションを作成するには、[SketchFlow アニメーション] パネルを使います。まず、新しいフレームを追加してスナップショットのシーケンスを作り、そのフレームのアートボードで "シーン" を調整します。フレームが切り替わるまでの時間と、各フレームが表示されたままになる時間を簡単に調整できます。[SketchFlow アニメーション] パネルの [再生] をクリックすると、ドキュメント ウィンドウでアニメーションを直接再生できます。F5 キーをクリックしてプロジェクトをビルドおよび実行してから、SketchFlow プレーヤーでアニメーションを再生することもできます。

次に、SketchFlow アニメーションの例を示します。まず、"Halo 2" のイメージの右下にあるポインターが上に動き、クリックすると赤い星が表示されます。次に、"Halo 2" のイメージが左に動き、ポインターが右に動きます。

Ee341387.df44ecfb-df4c-40c8-aefb-16243eeea90b(ja-jp,Expression.40).pngEe341387.02c55e22-17c4-404d-90a4-2fd308993ad7(ja-jp,Expression.40).pngEe341387.9cd3432b-4dd3-4751-80d3-28bfc57f73b3(ja-jp,Expression.40).pngEe341387.914aa328-b7ca-4484-82a6-b6a5b8c24d84(ja-jp,Expression.40).pngEe341387.fba8a139-19c5-4a84-b0d2-1bce67266301(ja-jp,Expression.40).png

この SketchFlow アニメーションを作成するには

  1. アニメーションを追加する画面を開きます。[SketchFlow アニメーション] パネルで、[新しい SketchFlow アニメーション] Ee341387.d68c6600-ebf7-4b74-8416-6179ce5ad38e(ja-jp,Expression.40).png をクリックして新しい SketchFlow アニメーションを作成します。[SketchFlow アニメーション] パネルに、新しいフレームが表示されます。

    Noteメモ :

    [SketchFlow アニメーション] パネルが表示されない場合は、[ウィンドウ] メニューの [SketchFlow アニメーション] をクリックします。

    この例では、[ベース] 状態 (画面の通常の状態) は最初のフレームと同じです。

  2. 最初のフレームで [状態の追加] Ee341387.46bc69ec-93a3-4f56-a3d2-9de601ada74d(ja-jp,Expression.40).png をクリックして、新しいフレームを追加します。

  3. 移動するオブジェクトを選択し、目的の位置まで移動します。この例では、ポインターが右下から "Halo" の "o" の上に移動します。

    Ee341387.9cd3432b-4dd3-4751-80d3-28bfc57f73b3(ja-jp,Expression.40).png

  4. 必要に応じて、次のような操作を行えます。

    • ホールド時間の編集 フレームのホールド時間 (現在の状態のままの時間) を変更するには、[ホールド時間の編集] ダイアログ ボックスが表示されるまで、フレームの上にポインターを置いたままにします。フレームの中をダブルクリックして新しい値を入力するか、シングルクリックして上方向キーか下方向キーを使って、ホールド時間を増減できます。

    • 一時停止と再開   [SketchFlow アニメーション] パネルの [一時停止オン] ボタンを使用して、アニメーションに一時停止と再開機能を追加できます。一時停止と再開機能が追加されたフレームに到達すると、アニメーションが一時停止します。アニメーションを再開するには、SketchFlow プレーヤーの [ナビゲーション] パネルでアニメーションのタイトルをクリックします。

      ポインターをアニメーション フレームに合わせると、[一時停止オン] ボタンが [ホールド時間の編集] ボックスの横に表示されます。[一時停止オン] SketchFlow アニメーション [一時停止オン] アイコン ボタンをクリックすると、[ホールド時間の編集] ボックスが無効になります。

      アニメーション フレーム内の [ホールド時間の編集] ボックスと [一時停止オン] ボタン

      SketchFlowAnimation [停止] と [一時停止オン] ボタン

    • 切り替え効果時間の編集 フレーム間の切り替え効果時間 (フレームが切り替わるのにかかる時間) を変更するには、フレームとフレームの間で [切り替え効果時間の編集] ダイアログ ボックスをクリックします。フレームの中をダブルクリックして新しい値を入力するか、シングルクリックして上方向キーか下方向キーを使って、切り替え効果時間を増減できます。

    • 切り替え効果   切り替え効果時間が 0 より大きな場合には、組み込みの TransitionEffect を SketchFlow アニメーションに適用できます。[SketchFlow アニメーション] パネルで、[TransitionEffects] 切り替え効果のアイコン をクリックし、[TransitionEffect] ドロップダウン リストで目的の切り替え効果をクリックします。[TransitionEffect] の切り替え効果時間を変更することもできます。

      詳細については、「表示状態の変更に切り替え効果を適用する」を参照してください。

    • イージング機能   組み込みの EasingFunction を適用するには、[EasingFunction] Ee341387.9718b395-a71d-40b2-9d08-8e29a225151f(ja-jp,Expression.40).png をクリックし、[EasingFunction] ドロップダウン リストから目的のイージング機能を選択します。

  5. SketchFlow アニメーションを作成し終わったら、次のいずれかの方法でプレビューします。

    • SketchFlow ツール バーの [再生] をクリックします。

      Noteメモ :

      SketchFlow アニメーションで一時停止と再開機能を使用した場合は、アニメーションのプレビューを [SketchFlow アニメーション] パネルで再生するときに、一時停止は 1 秒のホールド時間に置き換えられます。

    • アートボードを右クリックし、[Play SketchFlow アニメーションの再生] をクリックして、再生するアニメーションを選択します。

    • F5 きーを押してプロジェクトをビルドおよび実行してから、SketchFlow プレーヤーでアニメーションを表示します。

SketchFlow アニメーション ツール バー

[SketchFlow アニメーション] ツール バーを使うと、[SketchFlow アニメーション] パネルで次の操作を行えます。

Ee341387.1afe5d56-20d8-400a-b643-13577ae593cd(ja-jp,Expression.40).png

最初のフレームに移動する。
Ee341387.0272e62e-0ad4-43ab-b0ac-f0767907e63b(ja-jp,Expression.40).png

アニメーションを再生する。
Ee341387.d2d47333-c15d-4aa0-9633-95f39cb96ae0(ja-jp,Expression.40).png

タイム エディターを固定する。
Ee341387.1ebe2b0a-5891-47f3-be05-fa90157b9312(ja-jp,Expression.40).png

Fluid Layout をオンまたはオフにする。

詳細については、「レイアウト変更の滑らかな切り替え」を参照してください。
Ee341387.3308f172-fdae-40f8-ba84-17b679e94134(ja-jp,Expression.40).png

矢印を使用して、SketchFlow アニメーションのドロップダウン リストから開く。

プラス記号アイコンを使用して、新しいストーリーボードを追加する。

一重の矢印を使用して、ストーリーボードを作成、削除または閉じる。
Ee341387.c83900c7-5245-4075-8cbf-99e9015f234b(ja-jp,Expression.40).png

スクロール バーを使用して、アニメーション フレームを移動する。

表示状態

1 つの画面のデザインがどのように変わるかを示すために、それぞれのデザインに対応する状態を定義して、プロトタイプをインタラクティブにします。プロトタイプを作成するときは、1 つの画面用の複数の状態を設定しておくと便利な場合がよくあります。次にその例を示します。

  • アプリケーションの画面には、ユーザーがログインしたかどうかによって異なるユーザー インターフェイス (UI) 要素が表示されます。表示状態を使用して、プロトタイプの単一画面に 2 つの表示オプションを作成し、1 つはユーザーがログインしたとき、もう 1 つはユーザーがログインしていないときの状態を定義できます。プロトタイプの特定の画面に、複数のデザインを定義できます。同じ画面で、各デザインごとの状態を作成できます。

  • 状態にはアニメーションを含めることができるので、同じ画面に複数の状態を作成して、アニメーションを追加できます。状態に含まれるアニメーションは、そのアニメーションを含む画面の状態が表示されるとトリガーされます。

SketchFlow プレーヤーで SketchFlow プロジェクトを実行する場合は、[移動] パネルに状態が別のコマンドとして表示されます。次の例は、[切り替え効果] という状態グループの [閉じる] と [開く] という状態を定義した画面を示します。

Ee341387.c91a4238-54c4-43ac-b09b-3407eaf58d4e(ja-jp,Expression.40).png

コマンドを使用して状態を切り替えられるので、アートボードで作成した状態を切り替えるトリガーを設定する必要はありません。

表示状態の詳細については、「コントロール用ビジュアル状態の定義」を参照してください。

ビヘイビアー

ビヘイビアーとは、要素にインタラクティビティをすばやく簡単に追加するのに使用する組み込みコードです。イベントによってトリガーされる動作 (ユーザーがボタンをクリックするとアニメーションを再生する場合など) のようなシンプルなものから、複数の動作によってトリガーされる複数のイベントをカプセル化した複雑なものまで、さまざまなビヘイビアーがあります。

ビヘイビアーは、プロトタイプをビルドするための強力なツールです。たとえば、コントロールを画面に追加して、そのコントロールにビヘイビアーを適用することができます。その後、F5 キーを押してプロジェクトをビルドおよび実行すると、ビヘイビアーを適用したコントロールが、完成したアプリケーションと同じように画面で動作します。

SketchFlow 用の組み込みビヘイビアーには、ナビゲーション用の [戻る] と [進む]、およびコントロールに適用できる [次の場所へ移動] があります。

詳細については、「SketchFlow ビヘイビアーの使用」を参照してください。

ナビゲーションと状態の変化

SketchFlow プレーヤーでプロトタイプを表示するときに、[移動] パネルを使って別の画面に移動したり、状態の変化を確認したりできます。そのため、プロトタイプ内を移動するのに、コードや UI 要素を追加する必要はありません。まだ画面のおおまかな図を数枚しか作成していない段階でも、各画面に移動できます。

また、アートボードに描画した UI 要素に SketchFlow のビヘイビアーを追加して、画面を切り替えたり、アニメーションを再生したりすることもできます。

コントロールに SketchFlow のアニメーションの再生ビヘイビアーを追加するには

  • ビヘイビアーを追加するコントロールを右クリックして、[SketchFlow アニメーションの再生] をクリックし、コントロールをクリックしたときに再生するアニメーションをクリックします。

サンプル データ

一般に、アプリケーションの多くが、何らかの形でデータベースにあるデータを利用します。そのため、プロトタイプを開発するときに実際のデータがないと、データに依存する動作をモデル化するのが難しいことがあります。Expression Blend では、サンプル データ ソースを作成して、そのデータをコントロールにバインドできるようになりました。このサンプル データを使用して、実際のユーザー インターフェイスでデータがどのように取り扱われるかをシミュレーションします。

詳細については、「サンプル データの作成」を参照してください。

Copyright ©2011 by Microsoft Corporation. All rights reserved.

  • Last updated on