リッチインタラクション - レクチャー 5:特定のウィジェット、画像、メニューの書式

1. ロールオーバー時、マウスダウン時、指定状態時、無効状態時の書式

ボタンウィジェット、画像、およびメニューウィジェットを含むいくつかのウィジェットについて、ロールオーバー時、マウスダウン時、指定状態時、無効状態時の書式を編集できます。

(マウスダウン時/指定状態時/無効状態時の書式編集機能はバージョン5.5で追加されたもので、これ以前のバージョンではご利用いただけません。)

ロールオーバー時の書式:ユーザがウィジェットの上にカーソルをもってきたときに適用されます。

マウスダウン時の書式:ユーザがウィジェットの上でクリックボタンを押し下げている間適用されます。

指定状態時の書式:インタラクションプロパティで「ウィジェットを指定した状態にセットする」を選択し、指定状態にセットしたときに適用されます。

無効状態時の書式:ウィジェットが無効化されたときに適用されます。

2.ボタンウィジェット、画像、メニューの書式の編集

ボタンウィジェットについてこれらの書式を編集するには、ウィジェットを右クリックして、ウィジェットの編集を選択→ロールオーバー時/マウスダウン時/指定状態時/無効状態時の書式の編集のいずれかを選択します。これは、画像やメニューウィジェットについても同じです。

ロールオーバー時の書式設定ダイアログの中で、変更したいプロパティをチェックし、その値を設定します。例えば、テキストを太字にしたい場合は、太字をチェックし、太字ボタン(B)をクリックします。

プレビューチェックボックスをチェックすると、ワイヤフレームでウィジェットに適用した書式のプレビューがみれます。

書式を適用した後も、ワイヤフレーム内で適用した書式のプレビューをみることができます。こうするには、ウィジェットの左上にある白と黒の四角の上にマウスをもっていきます。

3.指定状態時、無効状態時の書式を利用したインタラクションの例

ボタンウィジェット、画像、またはメニュー項目を指定状態時の書式に設定するには、「ウィジェットを指定した状態にセットする」アクションを使用します。同様に、ウィジェットを無効状態時の書式に設定したい場合は、「ウィジェットを無効にする」アクションを使用します。

使用例:メニューの中のある項目をハイライトする
指定状態時の書式は、現在のページに関連付けられたメニュー項目をハイライトするときに使うのが一般的な使用方法です。

こうするには、上記で説明した方法で、まず指定状態時の書式を設定します。

その後、ページのオンページロードイベントで、ケースを追加し、アクションとして「ウィジェットを指定した状態にセットする」を選び、現在のページに関連付けられたメニュー項目を特定します。

プロトタイプでは、該当ページがロードされたときに特定したメニュー項目が選択されます。