講座】「ローディング」オブジェクトの作り方徹底解説します!※解説動画ありツイートシェアはてブLINEPocketスポンサーリンクこんにちは、しょみんです。Effects講座やっていきます!今回の講座では、ローディングオブジェクトを作成していきたいと思います。しょみんローディングオブジェクト......?なんぞそれそんな方のためにイメージ動画を貼っておきます。【ローディングオブジェクト_イメージ動画】https://syominnmv.com/wp-content/uploads/2018/06/bd267e836b716dc170b1a0507301fcf8-1.mp4ゲームのローディング中等によく見るような、円がぐるぐる回るオブジェクトです。見れば簡単にローディングオブジェクトを作成することが出来ますので、ぜひ参考にしてください。こちらのブログでは、より詳しい解説をしていきます!スポンサーリンクしょみん......え、じゃあブログで書くこと無くない?はい。Effectsの操作手順を解説してきました。操作手順については解説動画でまかなえてしまいます。解説動画の中で理解し辛い箇所を、より詳しく解説していきます!具体的には、解説動画内でわかりづらい箇所を私がピックアップ。ピックアップした箇所の内容(エフェクトの意味・各効果のプロパティ値の説明・操作の意図など)をより詳しく解説していきます。講座の内容をより理解したい方は、ぜひ参考にしてください。難しい所をピックアップ!では、まずは解説動画内で理解し辛そうな個所をピックアップしていきます。ピックアップ!・リピーターのプロパティの意味について・エクスプレッション「Math.round()」の意味について今回の解説動画で肝となるこの2か所。プロパティの意味・使用意図が分からなかった方はぜひ参考にしていってください。解説していきます!!リピーターのプロパティについてリピーターは対象のシェイプを複製する効果を持ちます。わかりやすい効果に思えますが、持っているプロパティが思いのほかややこしい......。ここでしっかりと理解しておきましょう。今回の講座で使用したリピーターのプロパティは以下の通りです。動画内で使用した順番で、各プロパティを解説していきます。当プロパティは、対象のシェイプをどの位置に複製するかを指定します。例を挙げて説明します。サイズ(100,100)の円を作成したとします。その円に対し、リピーターを適用し、プロパティを以下のように設定します。2すると、コピーその1の中心から「トランスフォーム:位置」で指定した値分、ずれた箇所にコピーその2が複製されます。「トランスフォーム:位置」とは、コピーその1の中心から見て、どの位置にシェイプを複製するか設定するプロパティとなります。当プロパティは、対象のシェイプをいくつ複製するかを指定します。1にて解説した内容からも分かる通り、コピー数で指定した値分、シェイプを複製することが出来ます。(100,0)」の状態で、コピー数を「3」に設定した場合はどうなるでしょう?答えは、コピーその2の中心から(100,0)ずれた箇所にコピーその3が複製されます。当プロパティは、対象のシェイプをどの角度に複製するかを指定します。以下の値を各プロパティに設定します。→(0,0)さて、このプロパティ値だとシェイプはどのように複製されるでしょうか。答えはこんな感じです。ポイントはアンカーポイントと、コピーその1の配置箇所です。アンカーポイントとコピーその1を直線で結びます。そこを起点として「トランスフォーム:回転」で指定した角度分傾けた箇所に、コピーその2を複製します。コピーその3も考え方は同様です。アンカーポイントとコピーその2を直線で結び、そこを起点として「トランスフォーム:回転」で指定した角度分傾けた箇所に、コピーその3を複製します。何となくイメージはつかめたでしょうか。ややこしいかもしれないので、ポイントであるアンカーポイントとコピーその1を直線で結んで傾けるだけはしっかりおさえておきましょう。4オフセット当プロパティは、対象のシェイプの複製個所を指定した値分ずらすことが出来ます。......たぶん文章ではうまく伝えることが出来ないと思いますので、例を見てみましょう。以下の値を各プロパティに設定します。0まずは、オフセット0の状態をご覧ください。変わったところはありませんね。次にオフセットを1に変更してみます。オフセットを1に変更すると上記のようにシェイプが移動します。・「コピーその3」が「コピーその4」の位置へ移動となります。オフセットとは、シェイプの複製箇所を、指定した値分移動させるプロパティなのです。このオフセット、他のエフェクトでもよく出てくるプロパティであり、考え方も今回解説した内容と似ているので、ぜひこの機会に理解を深めておくことをお勧めします。当プロパティは、開始点(コピーその1)の不透明度を設定します。今回のローディングオブジェクトでは、終了点の不透明度と組み合わせて以下のようなグラデーションのような効果を生み出しました。開始点の不透明度:0終了点の不透明度:100開始位置から段階的に不透明度を上げる効果を付けることが出来るので、オブジェクトのちょっとしたアクセントに使ってみてくださいね。指定したプロパティの値を四捨五入します。今回の「ローティングオブジェクト」作成時には、オフセットの値に対して「Math.round()」を使用しました。これは、オフセットの値を整数にしたかったからです。「Math.round()」なしの場合https://syominnmv.com/wp-content/uploads/2018/06/8ad5b1dae3d5ff5f1f6776916a4ecae8.mp4オフセットに「Math.round()」を設定しない場合、円自体が回転するように見えてしまいます。これは、オフセットの値が少数の値まで保有してしまっているからです。これに「Math.round()」を適用するとどうなるでしょうか。「Math.round()」ありの場合https://syominnmv.com/wp-content/uploads/2018/06/d25269eb532f8cab3802ea038efcd9b2.mp4円自体が動かなくなりました。これは、オフセットの値が整数のみになったためです。「Math.round()」はあまり使用する機会も少ないエクスプレッションかもしれませんが、要所要所で必要な場合もありますのでこの機会に覚えておいても損はないかと思います。参考にしてみてください。まとめ:ローディングオブジェクト作成講座いかがだったでしょう?今回の講座で解説したポイントは大きく2つ。・リピーターのプロパティについて・エクスプレッション「Math.round()」についてどちらもAE学んでいくにあたって重要な要素の1つです。この記事でより深く理解していただけたらと思います。解説講座の中で「ここが分からない......」などの質問がありましたら、気軽にお問い合わせフォームからご連絡ください。いった講座記事・動画を作っていきます!どうかよろしくお願いいたします。コメントをキャンセルメールアドレスが公開されることはありません。講座】光を使った、簡単でかっこ良い画面切替え方法を伝授しますRECOMMENDこちらの記事も人気です。講座】かっこいいノイズの画面切替え効果作る...動画編集2017.6.5初心者でも大丈夫!YouTubeへ動画を投稿する手順プロフィールName:しょみんオタク動画クリエイター(美容系)。転職して天職(WEBマーケッター)についた20代。動画に関する話題(動画編集、Youtube)や自身のノウハウを「価値のある」「わかりやすい」「私ならではの情報」をモットーに発信しています。