aerenderでレンダリング

バックグラウンドでレンダリング.jsx

(function(me){
  var listPro_items = ["Lo(推奨)","Normal" ];
 
  //-------------------------------------------------------------------------
  var winObj = ( me instanceof Panel) ? me : new Window("palette", "バックグラウンドでレンダリング", [ 866,  465,  866+ 179,  465+  89]  ,{maximizeButton:true, minimizeButton:true});
  //-------------------------------------------------------------------------
  var btnExec = winObj.add("button", [   7,   12,    7+ 164,   12+  23], "バックグランドでレンダー開始" );
  btnExec.graphics.font = ScriptUI.newFont("Tahoma",ScriptUI.FontStyle.REGULAR, 11);
  var stPro = winObj.add("statictext", [   4,   46,    4+  82,   46+  14], "プロセス優先度");
  stPro.graphics.font = ScriptUI.newFont("Tahoma",ScriptUI.FontStyle.REGULAR, 11);
  var listPro = winObj.add("dropdownlist", [  92,   42,   92+  79,   42+  21], listPro_items);
  listPro.items[0].selected = true;
  listPro.graphics.font = ScriptUI.newFont("Tahoma",ScriptUI.FontStyle.REGULAR, 11);
  var cbExecGo = winObj.add("checkbox", [   7,   68,    7+  79,   68+  18], "強制実行");
  cbExecGo.graphics.font = ScriptUI.newFont("Tahoma",ScriptUI.FontStyle.REGULAR, 11);
 
  //-------------------------------------------------------------------------
  function exec()
  {
    function wq(s){ return "\""+ s + "\"";}
 
    if (system.osName.toLowerCase().indexOf("windows") <0){
      alert("すみません。Windows専用です。");
      return;
    }
 
    if ( app.project.file == null){
      alert("プロジェクトを保存してください。");
      return;
    }
    //レンダーキューの確認
    var rq = app.project.renderQueue;
    var rqOK = false;
    if ( rq.numItems>0){
      for (var i=1; i<=rq.numItems; i++){
        if ( rq.item(i).status == RQItemStatus.QUEUED) {
          if ( rq.item(i).numOutputModules>0){
            for (var j=1; j<=rq.item(i).numOutputModules; j++){
              if (rq.item(i).outputModule(j).file != null)
                if (rq.item(i).outputModule(j).file.parent.exists == true){
                  rqOK = true;
                  break;
                }
            }
          }
        }
        if (rqOK == true) break;
      }
    }
    if (rqOK==false){
      alert("有効なレンダーキューがありません。");
      return;
    }
    var proOp = "";
    switch (listPro.selection.index)
    {
      case 1: proOp = "/normal";break;
      case 0: 
      default:
        proOp = "/low";
        break;
    }
    var execGo = cbExecGo.value;
 
    //一時的に別ファイルにaepを保存して、Batchファイルを作成。
    var af = app.project.file;
    var tmpAep = new File(Folder.temp.fullName + "/" + "aerender_temp_.aep");
    if (tmpAep.exists) 
    {
      if ( execGo == true) {
        cbExecGo.value = false;
        tmpAep.remove();
      }else{
        alert("現在バックグラウンドでレンダリング中です。\nしていない時は強制実行をONにしてください。");
        return;
      }
    };
    app.project.save(tmpAep);
    app.project.save(af);
 
    var aer = new File(Folder.appPackage.fullName + "/aerender.exe");
 
    var cmd = "@echo off\r\n";
    cmd += "start \"\" /b " + proOp +" /wait ";
    cmd += wq(aer.fsName)+ " -project " + wq(tmpAep.fsName) +  " -sound ON\r\n";
    cmd += "del " + wq(tmpAep.fsName) + "\r\n";
    var bF = new File( Folder.temp.fullName + "/aerender.bat");
    if ( bF.exists==true) bF.remove();
    if (bF.open("w")){
      try{
        bF.write(cmd);
      }catch(e){
        alert(e.toString());
      }finally{
        bF.close();
      }
    }
    //実行
    if ( bF.exists==true) bF.execute();
 
  }
  btnExec.onClick = exec;
  //-------------------------------------------------------------------------
  if ( ( me instanceof Panel) == false){
    winObj.center(); 
    winObj.show();
  }
  //-------------------------------------------------------------------------
})(this);

@echo off
start "" /b /low /wait "C:\(略)\aerender.exe" -project "C:\(略)\aerender_temp_.aep" -sound ON
del "C:\DOCUME~1\(略)\aerender_temp_.aep"

aerenderを使うときの注意

1. -project プロジェクトファイルの指定（必ずフルパス)
   
2. -sound 終了音を鳴らすかどうか
   
3. –mem_usage メモリ関係の指定。使用には注意
   
4. -mp < 0 or 1> 1の場合マルチプロセッシングを有効にして複数のフレームを同時にレンダリングする。
   

1. パス指定に2バイトコード（半角以外の文字)はなるべく使わない。
   
2. aerenderの起動オプションとAfter Effectsの環境設定の矛盾に注意。
   　たとえば、マルチプロセッシングで複数のフレームの同時レンダリングが環境設定で指定されていても、aerenderの -mpオプションが付けられていないと有効にはなりません。
   
   
3. レンダリングエンジンモードでのプラグインの動作を確認。
   aerender.exeでのレンダリングは基本的にレンダリングエンジンモードになるので、若干通常のAfter Effectsと環境設定のデフォルトが違うので要注意です。
   特にプラグインの動作環境が変わるのでシリアライズ等が外れて正常にレンダリングできない・動作が止まる等のトラブルが起きる可能性があり、aerederでのレンダリング中には全く気がつかない（エラーが表示されない・気がつかない）のではまります。
   
   aerender.exeでレンダリングを行う場合は、レンダリングエンジンモードでの動作確認を事前に行っておくと安心できます。-reオプションか-wfオプションで「フォルダを監視」状態で起動すればレンダリングエンジンモードになるのでそこで動作確認ができます。
   
4. メモリの使用状態の確認。After Effectsとaerenderが同時に動く環境にする。
   バックグランドでのレンダリングを行う場合、環境設定：メモリ＆マルチプロセッサでaerenderで使うメモリとCPUを確保しておかないとエラーばかりで困ることがよくあります。
   普段の作業のためAfter Effectsに多くのリソースを割り当てていた場合、aerenderでバックグランドレンダリングしたくてもリソースがなくて単純にメモリ不足で落ちたり、CPUパワーが不足してPCの操作ができなくなったりして最悪PCもろともハングする危険があるので注意です。
   

バックグラウンドで効率的にレンダリングする

aerender_MamiSan.exe

aerenderのその他の用途

1. psdレイヤで書き出しを自前で行う。
   フレームの保存でphotoshopレイヤを書き出す場合、一枚一枚のレイヤの書き出しは軽いのでaerenderに回してバックグラウンドで行い書き出し場所もついでに指定とか
   
2. セルの処理をあらかじめ終わらせておく
   最近のTVアニメのセルの処理はかなり重たくなってきてるので、スクリプトで選択して素材段階で先にレンダリングしてしまう。ただそのレンダリングはネットワークレンダリングに回さずローカルPCのバックグランドレンダリングで行う。
   
3. エクセル等のスプレッドシートからのレンダリング管理
   エクセルでレンダリングの管理が出来ます（ちょっと自信ない^^;） エクセルからaepファイルを獲得してaerenderへ回してレンダリングさせることも可能です。
   

最後に

関連する投稿

• 音のデータとAfter Effects その2 (21)
• 音のデータとAfter Effects その1 (46)
• 複数コンポを一気に編集　～ EditComps_forCS4 ～ (4)
• 色鉛筆風エフェクトスクリプト＆スケッチ風プリセット (9)
• 日本語版で動かないスクリプトを動くようにする（Skydome, Quick effects palette） (12)

より、音に合わせた映像を

楽譜のデータから作る

外部ソフトと連携する

VOCALOID3からデータを持ってくる

関連する投稿

• 音のデータとAfter Effects その1 (46)
• 複数コンポを一気に編集　～ EditComps_forCS4 ～ (4)
• 色鉛筆風エフェクトスクリプト＆スケッチ風プリセット (9)
• 日本語版で動かないスクリプトを動くようにする（Skydome, Quick effects palette） (12)
• 他言語で設定されたエクスプレッション制御の記述を起動中の言語に変換するスクリプト (9)

音のデータとAfter Effects

オーディオに合わせてマーカーをつけたい

つけたマーカーを活用したい

その2へ

関連する投稿

• 音のデータとAfter Effects その2 (21)
• 複数コンポを一気に編集　～ EditComps_forCS4 ～ (4)
• 色鉛筆風エフェクトスクリプト＆スケッチ風プリセット (9)
• 日本語版で動かないスクリプトを動くようにする（Skydome, Quick effects palette） (12)
• 他言語で設定されたエクスプレッション制御の記述を起動中の言語に変換するスクリプト (9)

シェイプレイヤとエクスプレッション　後編

シェイプ属性の補足説明

◎グループ

グループの役割は以下のものがあります。

1. シェイプ属性をまとめて管理しやすくする
2. 独自のトランスフォームを追加する。Photoshopでいうとレイヤのリンクみたいなことが出来る
3. シェイプの描画の順番を変える。

1に関してはまぁ説明の必要はないのですが、２の独自のトランスフォームは理解できればかなり有効に使えます。

例えば一部のシェイプを左右反転させたい時は、それをグループ化してグループのスケールに[-100,100]とか入れるだけで出来てしまいます。
更に通常のトランスフォームのプロパティに加えて、「歪曲」「歪曲軸」が追加されます。
「歪曲」は斜めに変形させるパラメータで、「長方形パス」から簡単に平行四辺形に変形可能です。


３に関してはマニュアルで細かく説明されているのでそれを参照してください。ちょっと言葉ではわかりづらいですが、分かればかなり便利です。
シェイプおよびシェイプ属性のグループとレンダリングの順序

グループを使う時の注意点は、予め計画を立ててグループの構造を決めてからその他の属性を配置することです。
後からでも十分に修正は可能ですが、エクスプレッションを使っているとグループを追加したり削除したりするとそのたびにリンクが外れるので面倒です。

◎線の破線属性の注意

線属性の破線はたまにエクスプレッションがエラーを起こしUnenabledの状態になりやすいので注意です。
この現象はかなりの確率で起きるのですが解決策が無いので注意が必要です。

◎パンク・膨張

この属性は何をやってるの始めてみるとさっぱりですが、アルゴリズムを考えると単純なものです。
「量」の値でパスの頂点をシェイプの中心の内側の方向へ頂点と頂点の中間の天を中心の外側へ移動させています


ただ、どんな用途に使えるのか未だに僕はわかりません。面白い動きするのでいつか使ってみたい属性です。

◎パスのウィグル

パスをランダムに動かせますが、意外と使えません。多分これもアイディア次第でしょう。

◎トランスフォームのウィグル

この属性はパスの位置等にランダムな動きをつけるものです。デフォルト状態ではトランスフォームの値が0なのでいくら位相を動かしても変化しないので最初はスルーしてましたが、トランスフォームの値を適当に設定すれば色々アニメーションささせることができます。


決まったサイクルでの動き（振り子上に動かすとか）が簡単に出来ますが、エクスプレッションでやっても同じことができます。

◎ジグザグ

パスを決まったパターンでジグザク上に変化させられます。ただ単調な動きしかできないのであまり使えません。

◎ウィグル・ジグザクの用途

ウィグル・ジグザクともに単調なアニメーションしか作れない（組み合わせればある程度できるが、Expressioｎで三角関数使った方が楽）ので、使い道があまりなさそうですが、位相を停止させパスを単純に変形させるフィルタみたいな使い方だとかなり面白い物ができます。
Illustratorで色々なパターンを作る時と同じ要領です。

◎ピクセルアスペクトでの問題

ピクセルアスペクトが１の場合はあまり問題にならないのですが、0.9とか1.2の場合描画が変になる時があります。
どうやらシェイプレイヤはどんな状態でもピクセルアスペクトが1になってしまうようです。そのためAfter Effectsはサイズの変換を勝手にやってしまって、シェイプレイヤの縦横比がおかしくなるようです。

何かおかしいと思ったらピクセルアスペクトを確認しましょう。

エクスプレッションのTIPS

その１　テキストレイヤのソーステキストにname

その２　レイヤ名をパラメータにする split

//ヌルレイヤの位置座標
px = thisComp.layer("ヌル 1").transform.position[0];
py = thisComp.layer("ヌル 1").transform.position[1];
//間隔を求める
offsetX = thisComp.layer("ヌル 1").effect("横の間隔")("スライダ");
offsetY = thisComp.layer("ヌル 1").effect("縦の間隔")("スライダ");
//レイヤ名を_で分割する。
sa = name.split("_");
cx = sa[1]*1;//Xの位置
cy = sa[2]*1;//Yの位置
//実際のピクセル値に変換
px += cx * offsetX;
py += cy * offsetY;
 [px,py]

その３　シェイプレイヤのグループを使うときの注意

• グループを複製した時、新たに作られたグループ内のエクスプレッションのリンクは元のもので新しいグループ内へはリンクは補正されない。
• ctrl+G等で新しいグループを作成しその中へ属性を移動するとエクスプレッションのリンクが全て外れるので手動で補正する必要がある。

その４　レイヤの位置を固定

その５　matchName/indexの勧め

//適当なテキストレイヤのソーステキストにこのエクスプレッションを定義
//target = thisComp.layer("シェイプレイヤー 1").content("長方形パス 1");
target = thisComp.layer("シェイプレイヤー 1").effect("スライダ制御")("スライダ");
str += target.name +"\r\n";
str += "propertyIndex: " + target.propertyIndex +"\r\n";
str;

//適当なテキストレイヤのソーステキストにこのエクスプレッションを定義
//target = thisComp.layer("シェイプレイヤー 1").content("長方形パス 1");
target = thisComp.layer("シェイプレイヤー 1").effect("スライダ制御")("スライダ");
str = "";
for ( var s in target){ str += s +"\r\n";}
str;

target = thisComp.layer("シェイプレイヤー 1").effect("スライダ制御")("スライダ");//通常
target = thisComp.layer("シェイプレイヤー 1").effect("スライダ制御")("ADBE Slider Control-0001");//matchName
target = thisComp.layer("シェイプレイヤー 1").effect("スライダ制御")(1);//index

その６　エクスプレッション制御は便利

◎カラー制御

色の値を設定したり保存したり出来る。アルファーの値は操作できない。

◎スライダ制御

マイナス3万からプラス3万までの数値を扱う(16Bitの固定小数）
CS5から「スライダ」が「スライダー」に変更されて困った事態に。

◎チェックボックス制御

Booleanを扱う。on/offが指定できる。
シンプルなのでかなり使いやすい。

◎ポイント制御

位置を扱う。
アニメーションさせる時、カーブ等の操作が出来ないのであまり使えない。nullレイヤで代用させることが多い。

◎レイヤ制御

登録された同じコンポジションのレイヤを選択できる。「なし」の状態も設定できるが、「なし」に設定すると勝手にエクスプレッションをOFFにしてしまう素晴らしいおせっかい機能のため僕は殆ど使ったことがない。複数のテキストを切り替えて表示する時に表示用のレイヤとデータ用の複数のレイヤに分けて「レイヤ制御」で切り替えて表示させる事をした位です。

◎角度制御

スライダ同様に数値を扱うが、角度入力に適したUIになっている。やはり数の範囲はマイナス3万からプラス3万まで。

その７　ミリとピクセルを変換する

mm = effect("mm")("スライダ");
dpi = effect("dpi")("スライダ");
px = dpi *mm / 25.4;
px;

px = effect("pixel")("スライダ");
dpi = effect("dpi")("スライダ");
mm = px *25.4/dpi;
mm;

その８　ピタゴラスの定理・三角関数で座標計算

x = effect("Xの長さ")(1);
y = effect("Yの長さ")(1);
x =  Math.abs(x); //マイナス対策
y =  Math.abs(y);
xy = Math.sqrt(Math.pow(x,2) + Math.pow(y,2));
xy;

l = effect("線の長さ")("スライダ");
r = effect("線の角度")("角度");
r %= 360;
if ( r<0) r+= 360;
x = 0;y = 0;
if ( r==0){　y = l;　
}else if ( r<90) {
x = Math.sin(r * Math.PI/180) * l;
y = -Math.cos(r * Math.PI/180) * l;
}else if (r==90){　x = l;
}else if ( r<180){
r -= 90;
x = Math.cos(r * Math.PI/180) * l;
y = Math.sin(r * Math.PI/180) * l;
}else if (r==180){y = -l;
}else if ( r<270){
r -= 180;
x = -Math.sin(r * Math.PI/180) * l;
y = Math.cos(r * Math.PI/180) * l;
}else if ( r==270){x = -l;
}else{
r -= 270;
x = -Math.cos(r * Math.PI/180) * l;
y = -Math.sin(r * Math.PI/180) * l;
}
[x,y];

x = effect("Xの長さ")("スライダ");
y = effect("Yの長さ")("スライダ");
x = Math.abs(x);
y = Math.abs(y);
r = 90 - Math.atan(y/x)*180/Math.PI;

for (  x=0; x<720; x++){
y = Math.sin(x);
}

その９　ランダムな定数

//effect("スライダ制御")("スライダ")
random(100)

p = effect("スライダ制御")("スライダ").valueAtTime(0);

その１０　高度計

最後に

関連する投稿

• After Effectsユーザーのための、プログラミング入門　その12 シェイプレイヤとエクスプレッション前編 (20)
• After Effectsユーザーのための、プログラミング入門　その12 シェイプレイヤとエクスプレッション中編１ (14)
• After Effectsユーザーのための、プログラミング入門　その12 シェイプレイヤとエクスプレッション中編3 (12)
• After Effectsユーザーのための、プログラミング入門　その12 シェイプレイヤとエクスプレッション中編2 (9)
• 静止画1枚で奥行表現 (10)

シェイプレイヤとエクスプレッション　中篇3

07-円形バー

par = effect("barValue(%)")("ADBE Slider Control-0001");

parMin = 0; // parの最小値

parMax = 100; // parの最大値

if ( par < parMin) par = parMin; //数値の範囲を限定

else if ( par > parMax ) par = parMax;



start = 0; // parがparMinの時の数値

end = 100; // parがpatMaxの時の数値



start +( end - start) * (par - parMin) /(parMax - patMin);

12-デジタルストップウォッチ

v = effect("スライダ制御")("ADBE Slider Control-0001");

if (v<0) v=0;

else if ( v>100) v=100;

str = Math.floor(v); // 単純に切り捨てして小数点を削除

str;

v = effect("スライダ制御")("ADBE Slider Control-0001");

if (v<0) v=0;

else if ( v>100) v=100;

v = Math.floor(v); // 単純に切り捨てして小数点を削除

str = "";

if ( v <= 0 ) str = "000";

else if ( v < 10 ) str = "00" + v;

else if ( v < 100 ) str = "0" + v;

else str = "" + v;

str;

v = effect("スライダ制御")("ADBE Slider Control-0001");

if (v<0) v=0;

else if ( v>100) v=100;

v2 = Math.floor(v*1000) % 1000; //小数点3桁までを獲得

//頭に０をつけて桁合わせ

str = "";

if ( v2 <= 0) str = "000";

else if ( v2 < 10) str = "00" + v2;

else if ( v2 < 100) str = "0" + v2;

else  str = "" + v2;

str = Math.floor(v) + "." +str; // 整数部と合成

str;

h = thisComp.layer("params").effect("Time(時)")("ADBE Slider Control-0001");

m = thisComp.layer("params").effect("Time(分)")("ADBE Slider Control-0001");

s = thisComp.layer("params").effect("Time(秒)")("ADBE Slider Control-0001");

t = (h *60*60) + (m *60) + s;

h = thisComp.layer("params").effect("Time(時)")("ADBE Slider Control-0001");

m = thisComp.layer("params").effect("Time(分)")("ADBE Slider Control-0001");

s = thisComp.layer("params").effect("Time(秒)")("ADBE Slider Control-0001");

if ( h < 0) h=0;

if ( m < 0) m=0;

else if ( m > 60 ) m = 60;

t = (h *60*60) + (m *60) + s;

if ( t < 0 ) t =0;

09-矢印

10-シェイプでライン描画

x0 = content("LineDraw").content("start").position[0];

y0 = content("LineDraw").content("start").position[1];

x1 = content("LineDraw").content("end").position[0];

y1 = content("LineDraw").content("end").position[1];

if ( x0>x1) {

tmp = x0; x0 = x1; x1 = tmp;

tmp = y0; y0 = y1; y1 = tmp;

}

xx =x0+(x1-x0)/2;

yy = y0+(y1-y0)/2;

[ xx,yy];

x0 = content("LineDraw").content("start").position[0];

y0 = content("LineDraw").content("start").position[1];

x1 = content("LineDraw").content("end").position[0];

y1 = content("LineDraw").content("end").position[1];

x =  Math.abs(x0-x1);

y =  Math.abs(y0-y1);

xy = Math.sqrt(Math.pow(x,2) + Math.pow(y,2));

w = content("LineDraw").content("start").size[0];

[xy,w];

x0 = content("LineDraw").content("start").position[0];

y0 = content("LineDraw").content("start").position[1];

x1 = content("LineDraw").content("end").position[0];

y1 = content("LineDraw").content("end").position[1];

if ( x0==x1){

90;

}else if ( y0 ==y1) {

0;

}else{

if ( x0>x1) {

tmp = x0; x0 = x1; x1 = tmp;

tmp = y0; y0 = y1; y1 = tmp;

}

xx = x1-x0;

yy = y1-y0;

r = Math.atan(yy/xx)*180/Math.PI;

}

x =effect("ポイント制御start")("ポイント")[0] - position[0] + anchorPoint[0];

y =effect("ポイント制御start")("ポイント")[1] - position[1] + anchorPoint[1];

[x,y];

11-集中線

13-時計

テキストレイヤのフォントを変える

14-方位

続く

関連する投稿

• After Effectsユーザーのための、プログラミング入門　その12 シェイプレイヤとエクスプレッション後編 (8)
• After Effectsユーザーのための、プログラミング入門　その12 シェイプレイヤとエクスプレッション前編 (20)
• After Effectsユーザーのための、プログラミング入門　その12 シェイプレイヤとエクスプレッション中編１ (14)
• After Effectsユーザーのための、プログラミング入門　その12 シェイプレイヤとエクスプレッション中編2 (9)
• 静止画1枚で奥行表現 (10)

シェイプレイヤとエクスプレッション　中編２　等高線地図

Step1　地図の元になる画像を作る

Step2 階調を切り出す

Step3 オートトレースでマスクパスへ

Step4 色をつける

シェイプで地図を作るメリット

続く

関連する投稿

• After Effectsユーザーのための、プログラミング入門　その12 シェイプレイヤとエクスプレッション後編 (8)
• After Effectsユーザーのための、プログラミング入門　その12 シェイプレイヤとエクスプレッション前編 (20)
• After Effectsユーザーのための、プログラミング入門　その12 シェイプレイヤとエクスプレッション中編１ (14)
• After Effectsユーザーのための、プログラミング入門　その12 シェイプレイヤとエクスプレッション中編3 (12)
• 静止画1枚で奥行表現 (10)

シェイプレイヤとエクスプレッション　中編１

• コラップスをONをデフォルト状態と考えておく（ネストするコンポジション全てで）
• エフェクトプラグインは使わない。
• エクスプレッション制御エフェクトは必ずunenabledにする
• コンポジションのネストをする時は3Dレイヤの扱いに注意
• 画像サイズの範囲外に注意
• レイヤの合成モードに注意

• 多用しない
• エクスプレッション制御エフェクトは必ずunenabledにする
• なるべく名前依存しないコードにする
• プロパティ名は出来るだけmatchNameを使う。indexはよりGOOD
• プロパティベースは絶対にユニークな名前に変更しておく
• エラーチェックを忘れずに行う
• 簡単なコメントを入れる。しかし、長くしない。
• コードはなるべく短く。

00-三角アイコン

01-Grid

02-スケール・03-スケールB

03-円形スケールA

//間隔の数値をグリッドの数に

v = content("円形スケール").content("線 1").dash.gap;

r = Math.PI *content("円形スケール").content("楕円形パス 1").size[0];

r /= v;

r -= content("円形スケール").content("線 1").dash.dash;

04-円形スケールB

06-水平パー

さらにつづく

関連する投稿

• After Effectsユーザーのための、プログラミング入門　その12 シェイプレイヤとエクスプレッション後編 (8)
• After Effectsユーザーのための、プログラミング入門　その12 シェイプレイヤとエクスプレッション前編 (20)
• After Effectsユーザーのための、プログラミング入門　その12 シェイプレイヤとエクスプレッション中編3 (12)
• After Effectsユーザーのための、プログラミング入門　その12 シェイプレイヤとエクスプレッション中編2 (9)
• 静止画1枚で奥行表現 (10)

シェイプレイヤとエクスプレッション　前編

シェイプのメリット・デメリット

• After Effectsだけで作成できる。
• aep以外に保存ファイルがない
• コラップスと組み合わせてるといくら拡大しても画像が荒れない。
• プロパティとしてパラメータを管理できるので、アニメーションが簡単にできる。

• ベジェパスのアニメーションができない（パスのトリミングでのみ可能)
• 複雑な形が作成できない（複雑な形はIllustratorの方が楽)
• パラメータが複雑になりがちで扱いづらい。

シェイプレイヤの基本　パラメトリックとベジェ

ベジェシェイプパス

ベジェシェイプパスは通常のレイヤのマスクパスと同じものです。スクリプト的に言えば一つのプロパティに一つのShape objectを収納したものになります。

パラメトリックシェイプパス

パラメトリックシェイプパスは、Shape objectでは無く複数のパラメータで構成された描画のパーツ（シェイプ）で、「長方形」「楕円形」「多角形」の３種類有ります。

シェイプレイヤの基本　パスを結合

結合	すべての入力パスが 1 つの合成パスに結合されます。
追加	入力パスの領域をすべて含むパスが作成されます。
型抜き	一番上のパスの領域から、それより下のパスの領域を除いた領域のみを持つパスが作成されます。
交差	すべての入力パスが交差する部分の領域のみを持つパスが作成されます。
中マド	すべての入力パスによって定義される領域の集合体から、すべての入力パスの交差として定義される領域を除いた領域のパスが作成されます。

シェイプレイヤの基本　グループ

シェイプレイヤの基本　ベジェシェイプパスとマスクパスとShape object

var myShape = new Shape() ;
myShape.vertices = [[0,0], [0,100], [100,100], [100,0]];
myShape.closed = true;

var sp = sLyr.property("ADBE Root Vectors Group").property("パス 1").property("ADBE Vector Shape");
 
//---------
var p = sp.value;
p.vertics = [ [0,0],[100,0],[100,100],[0,100] ]; //反映されない。
 
//---------
var p = sp.value;
p.vertics = [ [0,0],[100,0],[100,100],[0,100] ];
sp.setValue(p); // これだと反映されたり、されなかったりする。
 
//---------
var myShape = new Shape() ;
myShape.vertices = [[0,0], [0,100], [100,100], [100,0]];
myShape.closed = sp.closed;
myShape.inTangents = sp.inTangents;
myShape.outTangents = sp.outTangents;
 
sp.setValue( myShape); // これは確実に反映される。

シェイプレイヤの基本　パスのトリミング

シェイプレイヤの基本　リピータ

エクスプレッションの概要

エクスプレッションのサンプル

◎エクスプレッション制御エフェクトを付加

nullレイヤ”Fireworkの基点”とシェイプレイヤ”Firework_0″を作成。それぞれに以下の図のようなエクスプレッション制御エフェクトを追加。

nullレイヤのパラメータは各レイヤのパラメータとリンクさせて同期させるために使います。

◎大きい花火グループと小さい花火グループを作成

「花火」というグループの中に適当に「大きな花火」と「小さな花火」をグループ分けして作成します。
「小さな花火」グループは後で複製するので末尾に1をつけた名前にしておきます。

◎大きい花火のひろがりの処理

“Firework_0″レイヤのトランスフォームに以下のエクスプレッションを追加します。


位置はnullレイヤと同じ位置に、アンカーポイントのXの値に「大きい花火の広がり」の値をリンクさせています。
こうすれば、指定した角度・距離で移動させることができます。
だた、同時に星も傾いてしまうので、「花火」グループのトランスフォーム：回転に逆の値を入れて補正しています。グループ独自にトランスフォームを持つので、プリコンポーズしなくても簡単にできてしまいます。

◎大きい花火と小さい花火の表示切り替え

大きい花火と小さい花火の塗り属性のエクスプレッションに表示切り替えのコードを追加します。


パラメータの大きさを判断して塗りの不透明度で表示を切り替えています。

◎小さい花火の広がりの処理

小さい花火のアンカーポイントにも同様の処理を加えます。


同じようにアンカーポイントに処理を行います。
回転の補正は、トランスフォームではなく、多角形パスの回転で補正を行なっています。この時回転が止まらないように “ + time * 360 ” として1秒に1回転させています。


ここまでできたら、「小さい花火1」グループを複製して増やします。グループの複製の場合、エクスプレッションの名前補正は行われないので、注意が必要です。今回は手作業で修正してます。
複製したグループの回転を適当に修正して完成です。

◎nullレイヤのパラメータとリンク後、レイヤを複製

レイヤのエクスプレッション制御エフェクトをnullレイヤのものと同期させたら、レイヤを複製して増やします。


「大きい花火の方向」に上のようなエクスプレッションを仕込んでおくと、複製するだけで自動的に角度が決定されます。
やってることは、レイヤ名をアンダーバーで分割し後ろの文字を数字として30倍した後、nullレイヤの開度を足しています。

このテクニックはかなり操作が楽になるので多用してます。

◎適当にアニメーションさせる

ここまで出来れば、nullレイヤのパラメータでアニメーションが出来ます。
このアニメーションをエクスプレッションを使わないで実現するのは、多くのパラメータの変更が必要ですが、いったんエクスプレッションを組み終えれば、たった２つのパラメータでアニメーションが制御できるようになります。

上記のエクスプレッションは一つ一つ見るとそんなに大したことはしていません。三角関数のような算術計算も行なっていません。ここではエクスプレッションだけで実装しましたが、親子レイヤ等も併用すると更に簡単に出来ます。

一番重要なことは、目的とするアニメーションに対するパラメータが最低レベルまで減らせたことです。エクスプレッションはこのように「新しいインターフェース」をユーザーの手で拡張できる機能なのです。

パス作成補佐スクリプト

ベジェシェイプパスの作成は、Illustratorとほぼ同じです。ただ、After EffectsにはIllustratorのように作成時に便利な機能がほとんど無いので、それを補佐するスクリプトを作ってみました。

基本的にシェイプレイヤ用に作りましたが、普通のマスクパスでも使えるように作ってあります。

ダウンロードはここから出来ます。
aep_shapeScripts.zip

アーカイブ内にある”等高線地図の作成_CS4.aep”は、等高線地図をシェイプで作る手順を説明するために作ったプロジェクトで、詳細は後編で説明します。

パス作成補佐スクリプトその１ シェイプパスの編集.jsx

パスプロパティ（ベジェパス)を選択した状態で、GETボタンでパスの頂点の位置を獲得するスクリプトです。SETでパスを変更することも出来きます。

シェイプツールでシェイプを作成した後に、頂点の位置を微調整するために作ったものです。
頂点の位置が整数化されていないといろいろ困ったことがあったので、これで整数化します。

パス作成補佐スクリプトその２ 直線パスの作成.jsx

簡単に直線パスを作成するために作ったものです。
上のシェイプパスの編集.jsxでも作れますが、角度をあわせて作る時に重宝します。

まぁ、実際には真っ直ぐな直線パスを作った後にトランスフォームの回転で位置指定したほうが楽ですが。

パス作成補佐スクリプトその３ パス制御.jsx

できたパスを、移動したり反転・回転・拡大・縮小するために作ったものです。
意外とシェイプレイヤではなく、マスクパスを使う時に重宝してます。

パス作成補佐スクリプトその３ マスクをシェイプパスへ.jsx

マスクパスをシェイプのパスへ変換するスクリプトです。
選択したレイヤにある全てのマスクをシェイプレイヤに変換します。
詳細の使い方は後編で説明します。

パス作成補佐スクリプトその４ エクスプレッション制御.jsx

エクスプレッションを全てON_OFFするスクリプトです。
間違ってエクスプレッション制御のエフェクトを削除してしまった時に使うスクリプトです。
ただ、エクスプレッション自体にエラーが残っていたり、前後関係によって失敗する時があります。
その時は面倒でもEキーをダブルクリックしてエクスプレッションが適応されたプロパティのみ表示して、手作業で修正する必要があります。

後編へ続く

前編は基本的なシェイプ・エクスプレッションの知識のみの説明でした。後編では具体的な説明をしたいと思っています。

もうサンプルは出来ているので、ここからダウンロードしておいて下さい。
aep_shapeSample.zip



上のコラムの中にある”等高線地図の作成_CS4.aep”の解説も後編で行います。

流石に師走で忙しいので後編はクリスマス後と予定してますが、すごい量になりそうなので後編その１その２とか増えそうな予感がしてます。

タグ : Expression, program, Shape[タグを追加する]

関連する投稿

• After Effectsユーザーのための、プログラミング入門　その12 シェイプレイヤとエクスプレッション後編 (8)
• After Effectsユーザーのための、プログラミング入門　その12 シェイプレイヤとエクスプレッション中編１ (14)
• After Effectsユーザーのための、プログラミング入門　その12 シェイプレイヤとエクスプレッション中編3 (12)
• After Effectsユーザーのための、プログラミング入門　その12 シェイプレイヤとエクスプレッション中編2 (9)
• 静止画1枚で奥行表現 (10)

]]> http://ae-users.com/jp/tutorials/2011/12/after-effects%e3%83%a6%e3%83%bc%e3%82%b6%e3%83%bc%e3%81%ae%e3%81%9f%e3%82%81%e3%81%ae%e3%80%81%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%9f%e3%83%b3%e3%82%b0%e5%85%a5%e9%96%80%e3%80%80%e3%81%9d-13/feed/ 20 http://ae-users.com/jp/tips/2011/12/crossphere-zaenchu-cylinderplus-overview/ http://ae-users.com/jp/tips/2011/12/crossphere-zaenchu-cylinderplus-overview/#comments Fri, 16 Dec 2011 15:26:33 +0000 cuku http://ae-users.com/jp/?p=6962 [There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

今回の記事は現在CROSSPHEREで開発中のAfterEffectsのプラグインZaEnchu(CylinderPlus)について書かせて貰います。

標準のシリンダープラグインを元にして機能を大幅に拡張しました。

他のプラグインには無い、色々な機能を詰め込んでいますので、先ずは上の動画を見て貰うのがここに書いて説明していくより早いと思います。

少し話がずれてしまいますが、私達はZaEnchuを切っ掛けに日本でのみ展開していくのではなく、海外も視野に入れて活動して行きます。

もし、同じような考えの人が居れば共に進んで行きたいと思い、このコミュニティに記事を書かせていただきました。

さて、殆どプラグインのことを書いてないわけですが、動画を見てもらえたならきっとどういう物なのかは伝わってると思うので、今回はこの辺で〆させていただきたいと思います。

追記

2011/12/27

ついにae scripts様にてWindows版がリリースされました！

http://aescripts.com/za-enchu-cylinder-plus/

タグ : ZaEnchu, プラグイン[タグを追加する]

関連する投稿

• アニメ制作者のためのAfterEffectsプラグイン作成入門(第６回)　Effectプラグインの構造・ユーザーインターフェース (4)
• アニメ制作者のためのAfterEffectsプラグイン作成入門(第５回)　スパッタリングプラグインを作成 (15)
• アニメ制作者のためのAfterEffectsプラグイン作成入門(第４回)　オリジナルノイズフィルタを作ってみよう！ (5)
• アニメ制作者のためのAfterEffectsプラグイン作成入門(第２回)　とりあえず作ってみよう！ (7)
• アニメ制作者のためのAfterEffectsプラグイン作成入門(第１回)　SDKをコンパイルしてみよう! (14)

]]> http://ae-users.com/jp/tips/2011/12/crossphere-zaenchu-cylinderplus-overview/feed/ 3 http://ae-users.com/jp/tutorials/2011/12/%e7%b6%9a%e3%80%85%e3%83%bb%e6%89%8b%e4%bb%98%e3%81%91%e3%81%a7%e3%81%af%e7%b5%b6%e5%af%be%e3%81%ab%e4%bd%9c%e3%82%8a%e3%81%9f%e3%81%8f%e3%81%aa%e3%81%84%e5%8b%95%e7%94%bb/ http://ae-users.com/jp/tutorials/2011/12/%e7%b6%9a%e3%80%85%e3%83%bb%e6%89%8b%e4%bb%98%e3%81%91%e3%81%a7%e3%81%af%e7%b5%b6%e5%af%be%e3%81%ab%e4%bd%9c%e3%82%8a%e3%81%9f%e3%81%8f%e3%81%aa%e3%81%84%e5%8b%95%e7%94%bb/#comments Thu, 15 Dec 2011 10:31:30 +0000 BaKaAfter http://ae-users.com/jp/?p=6944
手付けでは制作困難な複雑な動きを、
基本的なエクスプレッションで作るシリーズです。
今回は、コンポジションのタイムリマップをlengthで制御する方法を使います。

■ＳＴＥＰ1

長さ10秒、150*150のコンポジションを作ります。
名前を”shape”とします。

丸いシェイプレイヤーを作り、３Ｄレイヤーにします。


不透明度を50にし、
以下の様にキーフレームを打ちます。

スケール：
開始時に0
終了時に100

位置：
開始時に[75,75,0]
終了時に[75,75,-500]

エフェクト：
色相/彩度で色を開始時と終了時で一周変化させます。

■ＳＴＥＰ2

長さ10秒、640*360のコンポジションを作ります。

ヌルを出し、名前を”Null”とし、３Ｄレイヤーにします。

ＳＴＥＰ1で作ったコンポジション”shape”を中央に配置、コラップストランスフォームをオンにし、３Ｄレイヤーにします。
コンポジション”shape”にエクスプレッションで、

方向に
lookAt(thisLayer.position,thisComp.layer(“Null”).position)
と入力します。
“Null”の方向を向くようになります。

タイムリマップに
10-length(thisLayer.position,thisComp.layer(“Null”).position)/100
と入力します。

“Null”との距離に応じて円の形や位置、色が変化するようになります。



■ＳＴＥＰ3

コンポジション”shape”の位置にエクスプレッションで
wiggle(0,500)
と入力し、複製します。


■ＳＴＥＰ4

“Null”に任意の動きを付けます。
(作例では位置に「wiggle(1,500)」)

全体の色の調整をして完成です。



シェイプの形や色、エクスプレッション中の数値を変えることで、様々な表現が可能です。

aepはこちら。
バージョンはＣＳ5.5です。

タグ : Expressions, レイヤーがたくさん[タグを追加する]

関連する投稿

• 手付けでは絶対に作りたくない動画 (14)
• トンネルの中でうねうね (7)
• うねうねとすすむパイプ (5)
• 画面に雨粒が当たる表現 (4)
• 他言語で設定されたエクスプレッション制御の記述を起動中の言語に変換するスクリプト (9)

]]> http://ae-users.com/jp/tutorials/2011/12/%e7%b6%9a%e3%80%85%e3%83%bb%e6%89%8b%e4%bb%98%e3%81%91%e3%81%a7%e3%81%af%e7%b5%b6%e5%af%be%e3%81%ab%e4%bd%9c%e3%82%8a%e3%81%9f%e3%81%8f%e3%81%aa%e3%81%84%e5%8b%95%e7%94%bb/feed/ 11