こんにちは。デザイナーの笠井です。
さて、現在AdobeXDを勉強中なのですが、日々XDを使いながら考えていました。普段の仕事で使う時間に加えて、自分の作りたいものを遊びで作れば楽しくスキルが身についていくのではないかと。
ということで、遊びながらXDを学ぶ！実践していきたいと思います。
この方法のコツは、まったく有用性は考えず本当に遊びで作ること。
機能を活かして作りたいものが作れるのかどうか。ただそれだけを目的にすることです。
今回は自動アニメーションという機能で遊んでみようかと思います。
自動アニメーションとは、ホバーした際やクリックをした際のボタンの変化やWEBページ上の様々な動きを、XD上のプロトタイプで作り出すことができる機能のことです。
今回はその自動アニメーションで作れる動きの確認と、その機能を応用して何か面白いものを作ってみようと思います。
まず一つ目
モンスターが口を大きく開けて閉じる動きを作成してみます。
まずはパーツを作成しグループ化をします。
グループ化したのち「コンポーネントに登録」をクリック。するとこのモンスターがひとまとまりのオブジェクトとして登録され、「コンポーネントに登録」の部分が「初期設定のステート」という表示に変わります。
ホバーした時の状態を設定してみましょう。
通常の状態と、ホバーしている状態の２つを設定すると、その間の動きを自動アニメーションが補完してくれます。
まず「初期設定のステート」→「ホバーステート」を選択。
「ホバーステート」を選択した状態でオブジェクトをダブルクリック。するとグループ化している中のパーツをそれぞれ動かすことができます。
大きく口をあけさせたいので、歯やあごなどのパーツをつかんで下にひっぱります。これでホバーした際の動きは設定完了。
「初期のステート」をクリックしてみると、口が最初の状態にもどります。
この状態でプレビューを押してみるとこのようになります。
カーソルをたべようとするモンスターの完成です。
二つ目
次はシャッターをあけたりしめたりするモンスターを作成します。
初期のステートではシャッターをあげている状態のモンスターを作成します。一人目と同じように、ホバーステートを選択し、手と腕とシャッターを下に動かし、閉めている状態のモンスターを作成します。
カーソルでつつこうとするとシャッターしめて逃げようとするモンスターの完成です。
三つ目
大きくなったり小さくなったり
この調子で増やしてどんどんやってみます。
せっかくたくさん描いたのでまとめたい
キャラクターも増えたのでいい感じにまとめたいと思い、ただ並べるのもなんだかおもしろくないのでマンションに住まわせてみました。
にぎやかなマンションになりましたね。
完成！と思ったけど少しまだ手を加えたい
現実が寒いのでイラストの中でも雪を降らせたいと思いました。
タップやホバーなどのアクションをせずとも、時間経過で自動でリピートされる動きはどうすればできるのか。
調べてやってみました。
こちらの動きを作るには、アートボードを複数コピーして雪の動きと看板の光り方をかえたものを作成し、それらをワイヤーでつなぎます。
トリガーを「時間」に設定し、秒数や効果の種類を選びます。
ディレイ1秒、イージングはイーズアウト、デュレーションは1秒に設定します。
ディレイは動きが始まるまでの時間、イージングは切り替わる際の動きの種類、デュレーションはその動き効果が持続する長さが設定できます。
今回は雪がゆっくりと動いて残像が残る感じの表現にするために、上記のような設定にしてみました。
いかがでしょう。
雪がちらほら舞っている雰囲気が出せましたね。
今度こそ完成です！
まとめ
これらを作るにあたって、疑問に思っていたけどそのままだったことを調べたり、できないと思ってやっていなかったことが実はできるとわかったり、などいろいろな発見がありました。
つまりきっとこの先、あの時あの動きを作るためにこんなことしたな、あれができたからきっとこれもできるな、という感じでいつか役に立つときがくるはずなのです。きっと！
今後も楽しくXDを学んでいく過程を書いていけたらと思いますのでお付き合いいただけるとうれしいです。
ではまた次回！
