概要

マウスダウンとは、マウスを押した瞬間に動作することを指します。 反対にマウスアップは、押していたマウスを離した瞬間に動作することを指します。 これらは通常セットで使用します。 ドロップダウンやポップアップの展開などに使います。

1. インタラクションの追加
2. インタラクションの削除
3. インタラクションの種類
4. 操作後の動作

1. インタラクションの追加

再現したい操作と、操作後の動きを追加

2. インタラクションの削除

再現したい操作と、操作後の動きを削除

3. インタラクションの種類

操作時のインタラクションの種類を設定します。 クリックするとインタラクション詳細パネルが開きます。ドロップダウンで操作の種類を設定することができます。

4. 操作後の動作

操作後の動作を設定します。ドロップダウンで操作後の動作を設定することができます。

【マウスダウン / アップ操作の詳細設定】 マウスダウン中の動作は主に、「オーバーレイを開く」を使用します。 反対にマウスアップは主に、「オーバーレイを閉じる」を使用します。

① オーバーレイを開く

アラートの表示や、モーダルウィンドウを開く時に使います。 マウスダウンで動作するオブジェクトを選び、操作＝マウスダウン　操作後の動作＝オーバーレイを開く　を選択します。

移動先を指定します。 指定の方法は2通りあります。

方法① ドラッグで矢印で繋ぐ 方法② プルダウンの選択肢から選ぶ

方法① ドラッグで矢印で繋ぐ

マウスダウンするオブジェクトから、移動先のフレームに矢印を引っ張ります。 または移動先を選択する欄が追加表示されるので、その中から選択します。

起点＝Hot Spot 遷移先＝Destination 両者をつなぐ線＝Connection

と言います。

方法② プルダウンの選択肢から選ぶ

移動先を選択する欄が追加表示されるので、その中から選択します。

上記のように繋いだら、遷移前のデザインをプレビューします。 プレビュー画面で対象のオブジェクトをクリックし、オブジェクトを離すことで動作を確認することができます。

② オーバーレイを閉じる

マウスダウンで表示したフレームを閉じる時に使います。 マウスアップで動作するオブジェクトを選び、操作＝マウスアップ　操作後の動作＝オーバーレイを閉じる　を選択します。

先ほどと同様に、プレビュー画面で対象のオブジェクトをクリックすることで動作を確認することができます。