インタラクティブ機能の追加

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

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

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

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

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

SketchFlow プロジェクトにインタラクティブ機能を追加する詳細については、「SketchFlow Overview (SketchFlow の概要)」を参照してください。

アニメーション

プロトタイプに、ユーザーの操作に反応するアニメーションを追加すると便利なことがあります。[オブジェクトとタイムライン] には、キーフレームを使ってアニメーションを作成するツールがあります。さらに、[状態] パネルや [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.30).pngEe341387.02c55e22-17c4-404d-90a4-2fd308993ad7(JA-JP,Expression.30).pngEe341387.9cd3432b-4dd3-4751-80d3-28bfc57f73b3(JA-JP,Expression.30).pngEe341387.914aa328-b7ca-4484-82a6-b6a5b8c24d84(JA-JP,Expression.30).pngEe341387.fba8a139-19c5-4a84-b0d2-1bce67266301(JA-JP,Expression.30).png

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

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

    Ee341387.alert_note(JA-JP,Expression.30).gifメモ :

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

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

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

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

    Ee341387.9cd3432b-4dd3-4751-80d3-28bfc57f73b3(JA-JP,Expression.30).png

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

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

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

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

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

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

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

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

Ee341387.1afe5d56-20d8-400a-b643-13577ae593cd(JA-JP,Expression.30).png

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

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

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

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

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

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

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

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

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

表示状態

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

  • アプリケーションにユーザーがログインしたかどうかによって異なるユーザー インターフェイス (UI) 要素を表示します。この場合は、ユーザーがログインしたときの状態と ユーザーがログインしたときの状態を定義して、同じ画面のそれぞれ異なるデザインを割り当てます。

  • 同じ画面の異なる状態を作成して、特定の状態になるとアニメーションが再生されるようにします。

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

Ee341387.c91a4238-54c4-43ac-b09b-3407eaf58d4e(JA-JP,Expression.30).png

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

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

ビヘイビアー

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

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

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

詳細については、「ビヘイビアーをオブジェクトに追加」を参照してください。

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

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

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

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

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

サンプル データ

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

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

  • Last updated on