大学院生になってみた

埼玉県民と北海道民で書いてます。横浜ベイスターズのファンと広島カープのファンです。

Adobe MUSE スクロール効果に関して モーション編

こんにちは 大学院生です。前回の続きになります。

master-hitori.hatenablog.com

 

 さて、前回 MUSEではこのように並んでいた正方形が、

f:id:masterzzz:20180302170834p:plain

Webだと、

f:id:masterzzz:20180302171449p:plain

このように離れて配置されたのを確認したと思います。今回はどこにどの値を入れると希望通りにweb上で配置できるかを説明します。

 

①計算式

実は簡単な計算式に当てはめれば、すぐにweb上での配置がわかります。まずは紹介します。

 

上方向 

MUSEで設定したyの値 + (キーの値 × モーション値) − キーの値 = web上のy

下方向

MUSEで設定したyの値 - (キーの値 × モーション値) - キーの値 = web上のy

左方向

MUSEで設定したxの値 + (キーの値 × モーション値) = web上のx

右方向

MUSEで設定したxの値  - (キーの値 × モーション値) = web上のx

 

②例

それぞれ、例を見てみましょう。

f:id:masterzzz:20180302173947p:plain

縦横200pxのオレンジ色正方形はMUSE上でx600,y600の位置に配置してあります。

スクロール効果ですが、上方向は0、左方向は2、キーの位置は300で設定してあります。

これをwebで見るとこうなります。

f:id:masterzzz:20180302175108p:plain

と移動しています。

先ほどの計算式に入れてみましょう。

上方向 

600(MUSEで設定したyの値) + (300(キーの値) × 0(モーション値)) − 300(キーの値)300(web上のy)

 

左方向

600(MUSEで設定したxの値) + (300(キーの値) × 1.5(モーション値)) = 1050(web上のx)

となります。

 

今度は

f:id:masterzzz:20180302175348p:plain

縦横200pxのオレンジ色正方形はMUSE上でx600,y600の位置に配置してあります。

スクロール効果ですが、下方向は0.5、右方向は1、キーの位置は300で設定してあります。

これをwebで見るとこうなります。

f:id:masterzzz:20180302175524p:plain

と移動しています。

先ほどの計算式に入れてみましょう。

下方向 

600(MUSEで設定したyの値) - (300(キーの値) × 0.5(モーション値)) - 300(キーの値)150(web上のy)

 右方向

600(MUSEで設定したxの値) - (300(キーの値) × 1(モーション値)) = 300(web上のx)

となります。

 

どちらも、キーの値までスクロールすると、MUSE上の配置と同じになります。

 

次回は最終モーションと透明度に関して説明します。

 

余談ですが、これを理解するのに3時間くらいかかりましたw