イトウ先生のTips note【AfterEffects CC 2018】パスからヌルを作成
こんにちは、イマジカデジタルスケープの伊藤和博です。
つい先日、10月18日にAdobe CCの大幅なアップデートがあり、CC 2018が登場しました。プレビュー版だったXDはついにXD CCとして独立し、またAdobe Dimensions(ディメンジョンズ)という3DCGアプリが追加されています。
「ディメンジョンズ」という言葉の響きは妙に懐かしさを覚えますが、Adobe Dimensionsというアプリはその昔、Illustrator5.5Jに同梱されていた3Dアプリで、2004年には販売終了となったアプリでした。パスで3Dオブジェクトを作成し、Illustratorに持って行く、というアプリだったと記憶していますが、現在のIllustratorでは、ディメンジョンズにとって代わる機能として、効果メニュー > 3D、があります。もし今回のDimensionsが、当時のAdobe Dimensions後続アプリということになれば、2004年の販売終了から13年の時を経て復活、ということになります。
Dimensionsを起動すると、左側にアセットパネルなどがあり、3Dグリッドにドラッグ&ドロップで作成できるようですので、Dimensionsで作成したデータを他のアプリなどに持っていく、などの連携で使用できることになるはずです。この辺りはまた機会がありましたらご紹介したいと思います。
そのうちストリームラインなどもVRコンテンツから3Dトレースしてパスを作る、などパワーアップして復活すると面白いですね。
ところで、今週からCC2018をご紹介していきたいと思いますが、まずは最新AfterEffects CC 2018から新機能で、「パスからヌルを作成(Create Nulls From Paths.jsx)とPath Properties」をご紹介します。
ベジェシェイプレイヤーかマスクパスで作成した個々のアンカーポイントにヌルオブジェクトを作成し、そのヌルオブジェクトにキーフレームをいれることで、パスのアンカーポイントをアニメートさせる、また、その反対で、ヌルオブジェクトをパスのアンカーポイントに紐づけて、パスのアンカーポイントにキーフレームを入れるとヌルも同時に動く、などの機能が可能になります。
この機能はエクスプレッションによるものですが、エクスプレッションを意識しなくても同等のことができる機能になります。
●さっそくやってみよう!
ところで、今回AfterEffects CC 2018のスタートアップは以下の画像です。
起動すると、コンポジションパネル内にナビゲーションが追加されており、右側の「新規コンポジション・フッテージから」をクリックすると、何らかのファイルを取り込むと同時にそのフッテージサイズでコンポジションを作成し、その素材をレイヤーで配置する、ということまでを自動で行います。
まずはコンポジションの作成後、ベジェシェイプレイヤー・マスクパスのいずれかを作成し、ウインドウメニュー >「Create Nulls From Paths.jsx」を選択します。
そもそもこのjsxと名前がついている機能はAfterEffectsのスクリプトによって表示しているUIのため、一度使用すると、ファイルメニュー > スクリプト >最近使用したスクリプトファイル、から同様のパネルにアクセスすることも可能になります。ファイルメニュー > スクリプト、の中はメニュー表記が英文のため、ウインドウメニューから選択するこのパネルの名称も英語のままで、将来的に日本語になるのかは不明です。
なお、スクリプトそのもの機能は以前のブログ「イトウ先生のTips note【AfterEffects CC 2015】スクリプト」を参照してみてください。
タイムラインでマスクパスを選択した状態で、「Create Nulls From Paths.jsx」パネルの「ポイントはヌルに従う」をクリックすると、マスクパスに含まれるアンカーポイント1つに対し1つのヌルオブジェクトを作成します。
あとは、このヌルオブジェクトの位置トランスフォーム等にキーフレームを設定すれば、アンカーポイント1つ1つをキーフレーム操作で動かせる、ということになります。
●「ポイントはヌルに従う」と「ヌルはポイントに従う」
「ポイントはヌルに従う」をクリックすると、個々のアンカーポイントは、ヌルオブジェクトを操作するとそれに紐づいたアンカーポイントがアニメートする、という意味ですが、この仕組みは、マスクパスに対して自動でエクスプレッションを設定し、各ヌルオブジェクトとの紐づけを行なうことで、ヌルの操作でアンカーポイントが動く、という仕組みになります。
一方、「ヌルはポイントに従う」をクリックすると、位置トランスフォームにエクスプレッションが適用されたヌルオブジェクトを作成し、逆にマスクパスにはエクスプレッションは設定しません。「ヌルはポイントに従う」は、アンカーポイントやパスの動きに従ってヌルを動かすため、マスクパスに対して別途エクスプレッション等を設定することで、ヌルを動かす必要があります。
●Path Properties(新機能)と最初の頂点を設定
そこで、AfterEffects CC 2018では、「Path Properties」というパスに対するエクスプレッションが新規で追加されました。上記の「ヌルはポイントに従う」と併用して使うことで、マスクパスにエクスプレッションを追加してパスを動かすと、パスに紐づいたヌルオブジェクトも一緒に動く、という仕組みを作ることが可能になります。
ヌルオブジェクトに対して別のレイヤーを親子づけしておけば、パスの動きに合わせてヌルに親子づけしたレイヤーが動く、ということができるようになります。
なお、「ヌルはポイントに従う」で作成されたヌルオブジェクトには、以下のエクスプレッションが記載されています。
var srcLayer = thisComp.layer(“GrandCanyon.mp4”);
//GrandCanyon.mp4というのは単にレイヤー名です。
var srcPath = srcLayer(“ADBE Mask Parade”)(1)(“ADBE Mask Shape”).points()[0];
srcLayer.toComp(srcPath);
2行目にあるpoints()[[0]のゼロが配列の1個目となり、この配列の1個目とは、マスクパスの「最初の頂点」ことをいいます。この頂点から時計回りで配列の番号になっています。最初の頂点を設定する場合は、ヌルオブジェクトを作成する前に、選択ツールで頂点にしたいアンカーポイントを選択した状態で、レイヤーメニュー > マスクとシェイプのパス > 最初の頂点を設定、で設定しておきます。
なお、この機能は、タイムラインパネル上で「パス」を選択できるシェイプでないと機能しません。マスクパス、また、ペンツールで作成したベジェシェイプレイヤーの場合は、最初からパスが選択可能ですのでこの機能が使えますが、四角形や楕円、星など通常のシェイプレイヤーはただ描画するとパスが選択できないため、シェイプレイヤーを作成する場合は、ツールバーにある「ベジェパス」にチェックを入れて描画すると、パスが選択できるシェイプレイヤーとして描画されるようになります。
エクスプレッションをまったく意識せずに個々のアンカーポイントを動かしたい、という場合は、「ポイントはヌルに従う」で作成してヌルにキーフレームを設定していく、という方法がいいかと思います。いずれにしてもエクスプレッションを自動で書いてくれる、という機能になります。
CC2018へのアップデートは10/19日以降可能になっていますので、ぜひアップデートして使ってみてください。
この記事を読んだ方にオススメの講座はこちら!
▼AfterEffects CC 2014の使い方・実践トレーニング
イトウ先生のTips noteアーカイブ【2016年~】
○AfterEffects CC 2015:タイムチューナー
○AfterEffects CC 2015:AIデータはレイヤーに分配で取り込む
○AfterEffects CC 2015:プレビューのコントロール
○AfterEffects CC 2015:スクリプト
○AfterEffects CC 2015:新しくなったMAXON CINEMA 4D Exporter
○AfterEffects CC 2015:マスクリファレンス
○AfterEffects CC 2015:スムーザー
○AfterEffects CC 2015:立体の旗を作る・1
○AfterEffects CC 2015:立体の旗を作る・2(CINEMA 4Dレンダラー)
○AfterEffects CC 2017:強化されたライブテキストテンプレート
○AfterEffects CC 2017:日付のトークン
○AfterEffects CC 2017:マーカーデュレーション
○AfterEffects CC 2017:他のレイヤーのエフェクトをプリコンポーズ無しで参照する
○AfterEffects CC 2017:拡張された平面フォルダ
○AfterEffects CC 2017:レイヤーのあるコンポジションに変換
○AfterEffects CC 2017:現在のフレームから静止画を作る
○AfterEffects CC 2017:最後のフレームでフリーズ
○AfterEffects CC 2017:サウンドの振幅を他のレイヤーで活用する、オーディオ振幅
○AfterEffects CC 2017:カンマ区切りの文字列をランダムに表示する
○AfterEffects CC 2017:CC Light Raysとトラッカー
○AfterEffects CC 2018:パスからヌルを作成
○Premiere Pro CC 2015:デュレーションの補間方法
○Premiere Pro CC 2015:Liveテキストテンプレート
○Premiere Pro CC 2015:インジェスト設定とプロキシ
○Premiere Pro CC 2015:オープンキャプション(字幕)
○Premiere Pro CC 2017:VRワークフロー・その1
○Premiere Pro CC 2017:VRワークフロー・その2
○Premiere Pro CC 2017:グラフィッククリップとエッセンシャルグラフィックスパネル
○Premiere Pro CC 2017:キーボードショートカット
イトウ先生のTips note アーカイブ【2010年~】(別サイトに飛びます)
○データを軽く作る方法について
○シンボルの親子関係について・その1
○編集モード
○シンボルの親子関係について・その2
○カラーパネルの「使えるショートカット」
○カラー一括変換のグローバルスウォッチとは
○配置した画像のすばやい編集方法
○CS5新機能01:すべてのアートボードにペースト
○CS5新機能02:内側描画と背面描画
○CS5新機能03:Web・インタラクション用のデザイン
○CS5新機能04:遠近描画
○CS5新機能05:線パネルと線幅ツール
○AIのテキストのアピアランス
○SVGインタラクティビティ
○CS6の新機能:線へのグラデーションと不透明マスク・矩形以外のパターン図柄登録
○Illustrator CS6のCreative Cloudメンバー限定機能
○Illustrator CCの新機能
○Illustrator CCの新機能:CSSプロパティ
○IllustratorCC_R1での便利な新機能
○AI、PS、IDなどで使える音声入力
○SVGのレスポンシブ機能
○Illustrator CC 2014:連結ツール
○Illustrator CC 2014:曲線ツール
○Illustrator CC 2014:モザイクスケッチと画像トレースの違い
○Illustrator CC 2015:シェイパーツール
○ななめの画像をまっすぐにする方法
○自然な合成テクニック・角版
○自然な合成テクニック・切り抜き画像
○画像合成後の便利なショートカット
○調整レイヤー
○レイヤーパネルの不透明度と塗りについて
○不透明度のショートカット
○CS5新機能01:「コンテンツに応じる」機能
○CS5新機能02:絵筆ブラシと混合ブラシ
○CS5新機能03:人の記憶に近い画像・HDRについて
○CS5新機能04:パペットワープ
○CS5新機能05:3Dオブジェクトとアニメーション
○美しいモノクロ画像の作り方
○境界部分をきれいにカラー変更する方法
○Photoshop CS6 特集・その1(全3回)
○Photoshop CS6 特集・その2(全3回)
○Photoshop CS6 特集・その3(全3回)
○2つの画像の違いを調べる、差の絶対値
○Photoshop CS6だけで作るビデオ・その1
○Photoshop CS6だけで作るビデオ・その2
○Photoshop CS6だけで作るビデオ・その3
○CSSの読み込み(スウォッチカラー)と、 CSS書き出し(CSSをコピー)について
○条件付きアクション
○Photoshop CCの新機能
○Photoshop CCの新機能:Generator(ジェネレーター)
○PhotoshopをJavaScriptで操作するAdobe Extendscript Toolkit CC
○新しいスクリプトパターンと、リンクを配置について
○変数
○Photoshop CC 2014:「配置」と「パッケージ化」
○Photoshop CC 2014:焦点選択と測定ガイド
○Photoshop CC 2014:3Dプリント
○Photoshop CC 2014:CameraRaw 8.7
○Photoshop CC 2014:シェイプから新規ガイドを作成と、新規ガイドレイアウトを作成
○Photoshop CC 2014:PhotoshopとAfterEffectsで使える、カラールックアップテーブルの書き出し
○Photoshop CC 2015:アートボード
○Photoshop CC 2015:かすみを除去する
○CS5新機能01:IKボーンスプリングでバネアニメ
○CS5新機能02:コードスニペットパネルで簡単ActionScript3.0
○CS5新機能03:パターン描画ツール
○CS5.5新機能01
○CS6の新機能01:Toolkit for Create JS・その1
○CS6の新機能01:Toolkit for Create JS・その2
○Flash CC:Toolkit for CreateJSに代わる、新しいHTML5書き出し
○Flash CC:HTML5 Canvasでサポートされない機能
○Flash CC 2014:線幅ツールとSVG書き出し
○Flash CC 2014:アニメーションガイド
○Flash CC 2014:オーディオを分割
○Flash CC 2015:復活したボーンツール
○CS5新機能02:アニメーションパネルとタイミングパネルを使った、IDのモーションプリセット
○CS5新機能03:キャプションの自動作成機能
○CS5新機能04:オブジェクトの間隔と配置
○CS5新機能05:画像一括貼り替え
○CS5.5新機能01:EPUB書き出し
○CS5.5新機能02:アンカー付きオブジェクト
○データ結合(メールマージ)
○CS6の新機能1:レイアウト・リキッドレイアウトと、ePub書き出し
○CS6の新機能2:コンテンツ収集ツール・コンテンツ配置ツール・リンクとして配置
○CS6の新機能3:「HTMLを挿入…」の機能からGoogleMapの読み込みについて
○InDesign CCの新機能:QRコードを生成
○InDesign CC :タグを割り当て
○InDesign CC :効率化されたハイパーリンク
○InDesign CC :スクリプト
○InDesign CC 2014 :カラーハーモニーを抽出する、カラーテーマツール
○InDesign CC 2014 :元のレイヤーに戻してグループ解除
○InDesign CC 2015 :段落の背景色
○InDesign CC 2015 :字形を簡単に選択
○CS5新機能02:HTML5 Pack
○CS5新機能03:スマートフォン検証・CSS3のメディアクエリー
○CS5新機能04:ブラウザ検証便利ツール・Adobe BrowserLabについて
○CS6の新機能1:可変グリッドレイアウト
○CS6の新機能2:jQuery Mobile 1.0 と jQuery Mobile スウォッチ
○CS6の新機能3:CSSトランジション
○CS6の新機能4:HTML5ビデオ
○CS6の新機能5:Webfontsの使い方
○Dreamweaver CCの新機能:jQuery UI
○Dreamweaver CCとCS6での、CSSの作り方の違い
○Dreamweaver CC:新しいビヘイビア
○Dreamweaver CC 2014:新しいライブビューとエレメントクイックビュー
○Dreamweaver CC 2015:Emmet
○Dreamweaver CC 2015:ビジュアルメディアクエリー
○Dreamweaver CC 2015:DOMパネル
○Dreamweaver CC 2015:新しくなったスニペット
○Dreamweaver CC 2015:JavaScriptを外部化
○CS5新機能02:新しい便利なショートカット
○CS5 パペットアニメーションと、時間反転キーフレーム
○CS5 ビデオや画像の型抜きについて「トラックマットとステンシルアルファ」
○CS5 動画の動きを捕らえて、他のレイヤーに適用する「モーショントラック」
○CS5.5 ワープスタビライザー
○CS5.5 ブラー・互換・タイムコード
○CS5.5 「シャドウを落とす・受ける」機能
○CS5.5 エクスプレッション・その1
○CS5.5 エクスプレッション・その2
○CS5.5 エクスプレッション・その3
○CS6の新機能1:ベクトルレイヤーからシェイプを生成
○CS6の新機能2:3Dカメラトラック
○AfterEffects CCの新機能:ワープスタビライザーVFX
○AfterEffects CC・レンダリングの変更点
○AfterEffects CCの新機能:マスクをトラック
○AfterEffects CCの新機能:ピクセルモーションブラー
○AfterEffects CCエッジを調整ツール
○AfterEffects CC モーションスケッチ
○AfterEffects CC 2014:HTML5パネルSDK(その1)
○AfterEffects CC 2014:HTML5パネルSDK(その2)
○AfterEffects CC 2014:4KビデオのYouTubeへのアップロード
○AfterEffects CC 2014:相対的なプロパティリンクと一緒にコピー
○AfterEffects CC 2014:モーフィング
○AfterEffects CC 2014:画像やビデオ等からカラーを抽出し、他のレイヤーに適用するsampleImageメソッド
○AfterEffects CC 2014:監視フォルダーの使い方
○AfterEffects CC 2014:カラープロファイルの使い方
○AfterEffects CC 2015:顔のトラッキング
○AfterEffects CC 2015:タイムチューナー