アートボードを複数枚使ってもスライダーはできますが、
今回はステート機能を使ってスライダーを作ってみようと思います。
ステート機能とは?
詳しくはAdobeのサイトをご覧ください。
「コンポーネントへの複数ステートの追加」
ステートには「新規ステート」「ホバーステート」「トグルステート」の3つがありますが、
今回は「新規ステート」を使用します。
では、さっそく作成してみましょう。
スライダー画像を用意する
まず、スライダー用の画像を用意します。
スライダーの下のオブジェクトはマスク用の長方形です。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/03/02-1-1024x511.png)
後々作業がしやすいように、インジケーターとスライダーは別のグループにして
スライダー部分のみのグループにしておきます。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/03/03-1-1024x511.png)
スライダー画像にマスクをする
マスク用の長方形でスライダー画像にマスクをかけます。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/03/04-1-1024x511.png)
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/03/05-1-1024x511.png)
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/03/06-1-1024x511.png)
コンポーネントにする
マスクした画像をコンポーネントにします。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/03/07-1-1024x511.png)
オブジェクトの左隅が緑色に変化してコンポーネントになりました。
次はステートを追加していきます。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/03/08-1-1024x511.png)
新規ステートを追加する
新規ステートを追加します。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/03/09-1-1024x511.png)
ステート2が追加されました。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/03/10-1-1024x511.png)
続けて、もう一つ新規ステートを追加して、ステート3を追加します。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/03/11-1024x511.png)
各ステートの画像をずらす
ステート2を選択します。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/03/12-1-1024x511.png)
ステート2を選択した状態で画像をずらして、スライダー2の画像を表示させます。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/03/13-1-1024x511.png)
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/03/14-1024x511.png)
インジケーターを調節して真ん中の丸が白くなるようにします。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/03/15-1-1024x511.png)
先ほどと同じ作業を繰り返します。
ステート3を選択します。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/03/16-1-1024x511.png)
ステート3を選択した状態で画像をずらして、スライダー3の画像を表示させます。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/03/17-1-1024x511.png)
スライダー2と同様に、インジケーターも一番右の丸が白くなるように調節します。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/03/18-2-1024x511.png)
ここまでの作業の流れを動画にしてみました。
インタラクションを設定する
プロトタイプに移動して、インタラクションを設定します。
初期設定のステートを選択した状態にします。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/03/19-1-1024x511.png)
スライダー1の右の矢印を選択します。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/03/20-1-1024x511.png)
矢印にインタラクションを追加します。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/03/21-1-1024x511.png)
トリガー「タップ」、アクション「自動アニメーション」を選択します。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/03/22-1024x511.png)
移動先は「ステート2」を選択します。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/03/23-1024x511.png)
次に、ステート2を選択して先ほどと同じ作業を繰り返します。
ステート3にも同様の作業をします。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/03/24-1024x511.png)
ここまでの作業の流れを動画にしてみました。
完成!
お疲れさまでした!