ここではシャッターギミックがスイッチで上下移動する基本的なタイプの説明を行います。アプリのメニュー形式のような横へスライド移動するタイプも、移動方向が違うだけで基本は同じです。
作成するには以下の3点を行います
・ グローバル変数にシャッターを可動させるための要素を追加
・ シャッターとして可動するアイテム「図形」を追加
・ シャッターを可動させるためのスイッチを追加
・ シャッターとして可動するアイテム「図形」を追加
・ シャッターを可動させるためのスイッチを追加
グローバル変数に追加
Root画面にある「グローバル変数」のページにて、「+」アイコンでシャッターを動かすための要素を追加します。タイトルは自由なのでわかりやすいように「シャッター」としておき、タイプを「On / Off 切り替え」にします。
シャッター部分になる図形を追加
Root画面に「グループ化（重ねる）」アイテムを追加し、その中に「図形」を追加します。ここでは「正方形」を使い、幅と高さを調整して画面の上半分くらいを覆うような位置します。この時、予め背景色を指定しておくとわかりやすいです。今回は全体の背景を「白」、シャッター部分を「黒」にしてあります。
左の画像のようにRoot画面に追加したグループ化の中に「正方形」があればOKです。
次に、「正方形」を追加してある「グループ化（重ねる）」の「アニメ」ページへ移動。「+」アイコンでアニメを追加し、以下のように設定したらシャッター部分の完成です。
| 実行 | グローバルスイッチ |
| 共通 | シャッター |
| アクション | スクロール |
| 緩急 | 普通 |
| 時間 | 10 |
| 速度 | 100 |
| アングル | 270 |
| 遅延 | 0 |
| 制限 | 0 |
※アングルは「0,90,180,270」で垂直水平方向に移動
※制限で移動幅を調整できる
スイッチを追加
シャッターを動かすためのスイッチを作成します。
Root画面には新たに「グループ化（重ねる）」アイテムを追加し、その中に「図形」を追加します。ここでは「円」を使い、幅を調整してシャッター部分と重ならないよう画面の下部に移動させます。予め背景色を指定しておくとわかりやすいです。
左の画像のようにRoot画面に新しく追加したグループ化の中に「円」があればOK。
次に、「円」を追加してある「グループ化（重ねる）」の「タッチ」ページへ移動。「+」アイコンで「タッチ」を追加し、以下のように設定したらスイッチ部分の完成。
| 一回タッチ | グローバル切り替え |
| スイッチ | シャッター |
以上これら3点が完了したら完成なので、プレビュー画面上でスイッチをタップし、シャッターが問題なく移動することを確認。
後はスイッチを別のアイテムにするなど細かいカスタマイズをし、このギミックを上手く活用するだけです。
シャッターとスイッチを一緒に移動させる
今回の説明ではわかりやすいようにシャッター部分とスイッチ部分を別々にしたので、スイッチの位置は固定されていますが、シャッター部分のアイテムがある「グループ化（重ねる）」内に、スイッチになるアイテムを追加すれば一緒に移動するようになります。この時、シャッターが移動した際にスイッチが隠れてしまわないように、スイッチの位置を調整するか「制限」でシャッターの移動幅を調整するのがポイント。また、スイッチ自体の「アニメ」にシャッターと同じ設定を加えてもOKです。