スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

図形の使い方


今回は、図形を使った動きを紹介したいと思います。

テーマは、分割して動かすです。


サイズ300の四角形です。
これを分割します。



サイズ100の四角形を並べて、サイズ300の四角形にしました。

・XY移動
 
画面の外から移動してきて、定位置で静止、
再び画面の外へ移動します。
上下左右に、動きが重ならないように注意します。
移動はイージング等で緩急をつけるとよくなります。

・拡大率
 
左下から右上に移動するように時間差をつけました。
拡大率は0→100の直線移動です。
消えるときは100→0へ。


中心を、オブジェクトではなく、画面の真ん中に置くと
また違った感じになります。

 
オブジェクトを拡張描画にして、中心XYで位置を調整します。

・透明度
 
透明度を100→0、直線移動。

・回転
 
これはちょっと手間が要ります。
中心を四角形の角に据えて、転がします。
消えるときは、中心が変わるので別オブジェクトになります。
前後関係も注意が必要です。

 
四角形の右下の角に中心をもってきます。
中心を動かすと、オブジェクトの位置も動いてしまうので、
基本効果の座標を使って元の位置に戻しています。

以上が図形を使った基本的な動きです。

ひとつのオブジェクトを複数のオブジェクトに分割することで、
組み合わせが生まれます。



例えば、四角形もさらに分割すると、三角形で作ることができます。

分割してできたオブジェクトをどう動かすかによって、
さらに組み合わせが生まれます。


移動と透明度、拡大縮小と回転など、
基本の動きを組み合わせます。



ここからは応用です。


ごちうさMADでのチノちゃん。
移動と透明度の組み合わせです。


6分割にして、上下交互に移動。
併せて出現、消失の際に透明度も使っています。

 
こちらは拡大率
大小さまざまな円が拡大して、マスクされた四角形を埋め尽くします。


ひし形と透明度を使った演出。
敷き詰められたひし形が、波紋のように広がっていきます。


レイアウトもひし形を使って、
それぞれのシーンをちりばめています。

いかがだったでしょうか。
一見、複雑に見える動きも、基本的な動きの組み合わせだったりします。
他にもテキストなど様々なオブジェクトを分割して、
動きの組み合わせを作ってみてください。

併せてこちらもどうぞ。
いくつかのパーツに分かれたテキストの演出例
同じ色は繋がる
六角形を使ったモーション
関連記事
スポンサーサイト

Tag: テクニック

Comment - 14

2016.09.01
Thu

周防涼白  

ありがとうございます!! とても勉強になります!!

基礎編? の拡大率や回転でもいいですが、応用編になるとさらに素晴らしくなりますね。

この記事を参考にいろいろ試してみたいです(笑

いつも楽しみにしてます!!

2016/09/01 (Thu)  | REPLY |   
2016.09.02
Fri

seguimi  

To 周防涼白さん

コメントありがとうございます。

図形は応用の幅が広いので、いろんなことができると思います。
是非試してみてください。

2016/09/02 (Fri)  | EDIT | REPLY |   
2016.09.03
Sat

レム  

いつも参考にさせていただいています。
ひし形と透明度を使った演出がとてもステキで自分でも試してみたいのですが、もしよろしければ詳しい解説やプロジェクトファイルがどのような感じか載せていただけないでしょうか?
勝手なお願いで申し訳ありませんが、よろしくお願いします。

2016/09/03 (Sat)  | EDIT | REPLY |   
2016.09.03
Sat

seguimi  

To レムさん

コメントありがとうございます。

ひし形のシーンチェンジですね。
新記事か解説記事かは決めてませんが、後ほど詳しいやり方を載せたいと思います。

今しばらくお待ちください。

2016/09/03 (Sat)  | EDIT | REPLY |   
2016.09.04
Sun

レム  

ありがとうございます!
お時間のある時で構いませんのでよろしくお願いします。
お待ちしております。

2016/09/04 (Sun)  | EDIT | REPLY |   
2016.09.04
Sun

seguimi  

To レムさん

こちらに解説記事を書いたので参考にしてみてください。

http://seguimi.blog.fc2.com/blog-entry-675.html

2016/09/04 (Sun)  | EDIT | REPLY |   
2016.09.06
Tue

レム  

ありがとうございます。
参考にさせていただきます。

2016/09/06 (Tue)  | EDIT | REPLY |   
2016.10.22
Sat

㍌  

No title

いつも参考にさせていただいてます。
応用の一番最初に移動と透明度の組み合わせのあとに光?がスーと移動するのは
どうやっていますか?

2016/10/22 (Sat)  | REPLY |   
2016.10.23
Sun

seguimi  

To ㍌さん

コメントありがとうございます。

光の表現は、白背景に斜めクリッピングをかけたものを移動させています。

詳しいやり方は、光の表現(反射光)の過去記事でも扱っているので、
参考にしてみてください。

http://seguimi.blog.fc2.com/blog-entry-662.html

2016/10/23 (Sun)  | EDIT | REPLY |   
2016.10.23
Sun

㍌  

To seguimiさん

ありがとうございます!!!参考にさせていただきます!!

2016/10/23 (Sun)  | REPLY |   
2016.10.25
Tue

豆板醤  

いつもお世話になっております。

画像のオブジェクトが一定の長さより大きくなると加減速運動設定にしてもできずにババババ!と大きくなったり小さくなったりします。

説明がわかり辛いかもしれませんが
中間点を1秒のとこにうって拡大率に加減速運動で
0~27.20《中間点》27.20~27.20《中間点》27.20~0
としています。(画像が大きいので27.20が丁度いい大きさなんです。)
300秒までは何もおかしな事はないのですが、300秒を超えると1秒の間に画面からはみ出るくらい大きくなったり逆さになったりしてスッと大きくなりません。

中間点で区切るのを諦めて1秒の大きくなるだけのオブジェクトと大きくなった状態のオブジェクトを分けておいた方がいいのでしょうか?

2016/10/25 (Tue)  | EDIT | REPLY |   
2016.10.25
Tue

seguimi  

To 豆板醤さん

コメントありがとうございます。

ちょっと調べてみたところ、オブジェクトを分割せずに対処できそうです。
http://blog-imgs-96.fc2.com/s/e/g/seguimi/kagensokuchukanten001.png

こちらで試してみて、ダメでしたらやはり分割になると思います。

2016/10/25 (Tue)  | EDIT | REPLY |   
2016.10.28
Fri

豆板醤  

To seguimiさん

ありがとうございます。
やってみたら出来ました。

2016/10/28 (Fri)  | EDIT | REPLY |   
2016.10.29
Sat

seguimi  

To 豆板醤さん

無事できたようで、よかったです。

2016/10/29 (Sat)  | EDIT | REPLY |   

Leave a comment

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。