#52|クリックによる要素の表示・非表示

ある要素を用いてマウスクリックやタップのトリガーを作成し、クリック時に別の要素を表示・非表示にすることができます。

目次

このレッスンでは

  1. 要素を表示するアニメーションを作成する
  2. 要素を消すアニメーションを作成する
  3. 2つ目のトリガー要素を追加し、クリックすると表示/非表示になるように設定する

について説明しています。

1. 要素を出現させる

  1. トリガーとなる要素を選択します(例:「表示」ボタン)。
  2. Interactionsパネルで、On Selected ElementメニューからMouse Click (Tap) を選択します。
  3. 「On 1st Click」から「Start an Animation」を選択します。
  4. Timed Actionsの隣にあるプラス記号をクリックします。
  5. アニメーションの名前を "表示" にします
  6. 表示させたい要素を選択します(これは、トリガーとは異なるはずです)
  7. Timed Actions "の隣にあるプラス記号をクリックし、"Hide/Show "を選択します。
  8. 目のアイコンをクリックし、「表示」を「なし」に設定します。
  9. 初期状態として[設定]の横のボックスをクリックします
  10. インタラクションパネルに表示されたまま、プラス記号をクリックして、2つ目のHide/ShowアクションをTimed Actionsの下に追加します。
  11. [Hide/Show]で、ディスプレイの設定を元の値(ここではブロック)に戻します。

2. ある要素を消す

  1. 前のステップと同じトリガー要素を選択します。
  2. 2回目のクリックで「アニメーションを開始」を選択します。
  3. タイムド・アクション(Timed Actions)の隣にあるプラス記号をクリックします。
  4. アニメーションの名前を "Hide "とします。
  5. 前のステップと同じ要素を選択し、消します。
  6. タイムド・アクションの隣にあるプラス記号をクリックし、「隠す/表示」を選択します。
  7. 目のアイコンをクリックし、表示を「なし」にします。

3. クリックすると表示/非表示になるように設定

  1. 元のトリガー要素(「歌詞表示」テキスト)をクリックし、複製します。
  2. 名前を変更する(例:"Hide Lyrics")
  3. アクションを作成し、その初期状態の表示を「なし」に設定します。
  4. 2つ目のアクションを追加し、表示設定を元の値 (例: Block) にします。
  5. "歌詞を表示" をクリックし、クリックすると非表示になるように、表示設定を "なし" に設定します。
  6. 歌詞を隠す" をクリックし、表示設定を「なし」にするアニメーションを追加します。
  7. "歌詞の表示" に戻り、2回目のクリックで再び表示されるようにアニメーションを追加します。
  8. クリック&ドラッグで、タイムド・アクションのすべてが同時に起こるようにします(0秒)。