プロトタイプのイベント設定

フルプロトタイプイベントは、トリガー、オペレーション、ターゲット、アニメーションを組み合わせたものです。ここでは、各要素の意味を説明します。

• トリガー：どのような状況でその事象が発生するのか。

• オペレーション: イベントの後に起こること。

• ターゲット: アクションの対象は誰か。

• アニメーション:プロセス全体を充実させること。

(1) . トリガー

トリガーは、ホットゾーンがいつ起動するかを決定し、その結果、プロトタイプのデモを行うことができます。

• シングルクリックとダブルクリック：その名の通り、レイヤーをクリックまたはダブルクリックします。

• ホバーリング：ホットゾーンにマウスを乗せると動作を開始します。

• 押す： ユーザーがホットゾーンをクリックしたり、押したりしたときに動作を開始します。

• マウスオーバー：マウスがホットゾーンに入ると動作を開始します。
• ヒント: このホットゾーンがインタラクティブであることをユーザーに通知するために常に使用されます。また、クリックせずに情報を切り替えるために使用することもできます。例えば、日付を確認する場合、マウスを動かすと各日付の詳細がリアルタイムに表示されます。

• マウスアウト：マウスがホットゾーンから出たときに操作をトリガーする。
• ヒント：マウスオーバーと同じような使い方ができます。一般的に、これらは一緒に使用されます。

• リリース：マウスを離したときに操作をトリガーする。
• ヒント：例えば、ユーザーは、ある目的のためにスクロールバーをドラッグする必要がある場合があります。その後、マウスを離すと、選択モードが解除されます。

(2) . オペレーション

オペレーションは、イベントがトリガーされたときにどのような動作を行うかを決定します。

• リダイレクト：イベントトリガー時に特定のフレームにリダイレクトする。

• ウィンドウを開く：あるフレームが現在のページでポップアップウィンドウとして開かれます。

• ウィンドウに切り替える：ポップアップ1からポップアップ2に切り替わります。 一般的には、「ウィンドウを開く」とともに使用します。

• ウィンドウを閉じる：現在のウィンドウを閉じる。

• 戻る: 前のフレームに戻ります。

(3) . ターゲット

ターゲットはイベントの最終目的地を決定するものです。

(4) . アニメーション

デフォルトでは、アニメーションはインスタントとして設定されています。しかし、Pixsoは様々なアニメーション効果をサポートしており、異なるアニメーション効果を組み合わせることで、より良いインタラクティブ性能を実現することができます。

ヒント：各アニメーション効果のダイナミックプレビューがあり、実際の効果をよりよく知ることができます。　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

遷移先フレームの状態をリセットする

対応するアクションとレイヤーの種類では、遷移時に対象の状態をリセットできます。

• スクロール位置：遷移先のフレームを初期のスクロール位置に戻します。
• コンポーネントの状態：遷移先のフレーム内のコンポーネントを初期状態に戻します。
• 動画の状態：遷移先の動画を初期の再生状態と位置に戻します。

見せたい操作に合わせて設定します。ページの先頭に戻る場合と、前回見ていた位置に戻る場合では必要な動作が異なります。使用できるリセット項目は、選んだアクションと対象によって変わります。

一つのトリガーに複数のアクションを追加する

1. インタラクションを作成し、最初のトリガー、アクション、対象を設定します。
2. そのインタラクションの設定を開きます。
3. 既存のアクションの上にある＋から、アクションを追加します。
4. 通常のアクションと同様に設定します。
5. プロトタイプを再生し、トリガーを実行して組み合わせた動作を確認します。

一つのトリガーから複数の反応を実行できます。すべての対象とリセット設定を合わせて確認し、意図した流れになるように調整してください。

プロトタイプの対象には現在のページ内のフレームを使います。接続する対象は同じページに配置してください。