Adobe XDの [自動アニメーション機能] で作る、クリスマスツリー♡ twitter広告をAdobe XDで作る時代です。

 

先週はアニメーションweekと言えるくらい、
良い感じのアニメーションができるかを、ひたすら作っておりました。

仕事でね。

twitter 6秒広告に魂こめて頑張ってますよ。

 

Adobe XDとAfter Effectを使ってカンプ作ってたんだけど、ほぼ80%くらいAdobe XDで完結した。

Adobe XDの新しい機能【自動アニメーション】というのがあるんだけど、
これ使えば一瞬でアニメーションは作れる。

クライアントに提案するための
カンプ的アニメーションならAdobe XD使った方が絶対早いしラクだわ。。。

 

Adobe XDはじめての方、超基本的な使い方はこちらで紹介してます★

 

How to

1. 楕円ツールを使ってツリーオブジェクトを作る。

 

2. アートボードを選択
>⌘C & ⌘V  を押してアートボードをコピペ
>同じアートボードが右に出現します。

 

3. 段ごとに選択して、くるっと回す。
(左が大きな玉→右が小さな玉になるように回転させてね)

 

4. ★ここ重要★
二つのアートボード上にある玉のレイヤー名を同じにする。
>今回は↑↑のように名称変更しました。

※名称を同じにしないと、自動アニメーションが機能しません!

 

5. 上部【プロトタイプ】をクリック

6. アートボードを選択
>するとアートボード右側に青チョボが出現するので、それを隣のアートボードへつなげる。

 

7. プロトタイプ設定
【トリガー】時間 0秒
【アクション】自動アニメーション
【イージング】スナップ 0.4秒

8.プロトタイプ設定
【トリガー】時間 0秒
【アクション】ひとつ前のアニメーション

完成です!!

慣れるまでちょい時間かかるかもですが、
慣れたらAfter Effectでやるより10倍くらい早く作れます。

 


応用編でこんなのも作れるよ♪

 

↑↑プロトタイプ設定はこんな感じで。スピード感はお好みで設定変更してね
・A
【トリガー】時間 0.1秒
【アクション】自動アニメーション
【イージング】イーズイン/アウト 0.8秒

・B
【トリガー】時間 0.2秒
【アクション】自動アニメーション
【イージング】イーズイン/アウト 0.4秒

 

Adobe XDのアニメーション探求 つづく。

 

Ami