AEP Project

「テキストレイヤーで作るドミノ倒し」&「CS6での応用」

Mojon — Mon, 14 May 2012 16:49:31 +0000

はじめに

テキストレイヤーといえば、テロップやタイポグラフィに使用するのが当たり前と思われがちですが、

■●▼★♪といったシンプルな文字記号を用いる事で、

シェイプレイヤーやエクスプレッションでは面倒な表現を、

簡単に制作・制御する方法を考えましたのでご紹介します。

テキストレイヤーの利点

テキストレイヤーを使うのには次の利点があります。

マスクとの組み合わせで自由に配置できる
強力なアニメーターが使用できる
文字単位での３Ｄ化が可能(シェイプレイヤーでは不可能）

作例:テキストレイヤーで作るドミノ倒し

1.テキストレイヤーで■■■■…（四角）と沢山入力します。

2.マスクでドミノを並ばせたいラインを描きます。

3.テキストのパスのオプションで2で描いたマスクを選択します。

4 .アニメーターから「文字単位の３Ｄ化を使用」をONにします

5.アニメーターから「回転」を追加し、X=0° Y=90°Z=90°に設定します。

6.さらにもう一つアニメーター「回転」を追加し、Y=-90°に設定します。

7.6で制作したアニメーター2の範囲セレクターを次の様に設定します。

8.オフセットの値をアニメーションさせればドミノ倒しの完成です。

9.床やライトを加えたり、他のアニメーターを追加したり、調整したサンプルムービーです。

応用編

応用として、AfterEffects CS6ではテキストレイヤーにも3Dの厚みを持たせる事が可能になりました。

その為、作例で制作したドミノ倒しも、より本物らしく表現できます。

かなり力技ですが、極めて小さな文字サイズ(0.5px程度)の●（丸）に対して

押し出しとベベル（凸型）を組み合わせる事で３Ｄの球体の表現も可能です。

下記の２つのサンプルムービーはどちらもCS6のテキストレイヤーで制作しました。

以上、テキストレイヤーの有用性を感じて頂けたなら幸いです。

応用編サンプルファイル

サンプルファイルはAfterEffects CS6用です。

フォントに小塚ゴシックを使用しています。

BGMデータは含まれておりません。

ダウンロード

追記：ダウンロードアドレスが間違っていたので修正いたしました。(2012.5.15)

この投稿にタグはありません。タグはどなたでも追加出来ます！[タグを追加する]

AfterEffectsを使ったiPhone用アニメーションjpegの作り方

tatsuaki — Wed, 09 May 2012 17:22:38 +0000

このサイトを見るような人は、1000回以上聞いたことがあると思いますが、iPhone、iPadではFlashが動きません。
そのため今回は、AfterEffectsなどを使い、動画ファイルでもアニメーションgifでもないアニメーションのやり方を紹介いたします。

以前、googleがバナーに使ったりしたやり方を今回実写を用いて作成してみました。
Martha Graham’s 117th Birthday
googleの例では、画像見ると下記のようになっており１フレームごとに表示する場所を動かしています。
Martha Graham’s 使用画像

完成サンプル

完成品は下記のようなものになります。（iPhone、iPod touchなどのiOSでご覧ください）
ただ動くだけでなく、iPhone用に指の動きに合わせて動きます。
iPhone用アニメーションjpeg サンプル

※画像が大きいので、若干ロードに時間がかかります。

撮影した映像を加工する

では、解説のスタートです。
今回は下記の動画を使います。

今回手持ちカメラで撮影したため、ワープスタビライザーなどを使用し手振れを少なくします。
※もちろん手ブレなどの修正の必要が無い場合は、そのままの動画を使用して問題ありません。

jpeg書き出し

フレームレートを調節し、jpegシーケンスから書き出しを行います。
今回は8秒の素材を使っているので、5fpsにし総画像数40枚程度を書き出しました。

psにてスクリプトを回す

下記のjsをダウンロードします。
指定連番画像を読み込んで縦長に並べるphotoshop 用 js
こちらのjsは書き出した画像を自動でレイヤーごとに配置し、枚数と画像の縦の長さを計算し、縦に画像を並べてくれるスクリプトです。

photoshopを立ち上げ、ファイル→スクリプト　から解凍したファイルを選択します。
並べる画像を一括で選択し、OKを押すと、下記のような処理を自動で行ってくれます。

コーディング

今回はjsdo it さんにあがっているソースを使わせていただきます。
guriguri for iPad/iPhone touchmove

ファイル一式をダウンロードし、jsのソースを見て、使用する画像に合わせ比率を変えます。
下記のソースの　height = width * 2 / 3;　の箇所になります。
（今回は960px-640px で作成しているため、2:3になります）

    imgtag.bind('load', function() {
      var width = parseInt(json.width, 10);
      var height = parseInt(json.height, 10);
      var count = parseInt(json.count, 10);
      if (!width) {
        width = imgtag.width();
      }
      if (!height) {
        height = width * 2 / 3;
      }
      var w_count = imgtag.width() / width;
      var h_count = imgtag.height() / height;
      if (!count) {
        count = w_count * h_count;
      }
};

最後に、画像のパスなどを修正すれば、完成となります。

参考

AEを使わなくても実はこのようなツールもあります。
・アニメーション用連番jpg書き出しツール作ってみたよ。
また、以前同じような仕組みで、野球ゲームを作ってみました。
・停電の夜のベースボール（PC用になります）

【追記】
AEのみで縦長画像を自動生成してくれるスクリプトを、@swifee さんが書いてくださいました。
・AEでiPhone用アニメーションイメージ生成 — Gist
単一画像化したいコンポを選択した状態でスクリプトを実行すると”CombineImage”というコンポが生成されるので、それを「フレームを保存」で書き出します。（AEの仕様上、サイズが30000pxを超えた場合はエラーとなります）

Special Thanks

・guriguri for iPad/iPhone touchmove　@Akiyah さん
・指定連番画像を読み込んで縦長に並べるphotoshop 用 js　@itoz さん
・アニメーション用連番jpg書き出しツール @rettuce さん

バージョン： CS5.5 で動作確認済み

タグ : css3, HTML5, iPhone, JavaScript[タグを追加する]

【スクリプト配布】複数のレイヤーのマーカーに簡単にコメント・Flashキューポイントを追加する(Marker Property Setter)

あかつきみさき — Mon, 30 Apr 2012 14:20:52 +0000

この記事では選択したレイヤーのマーカーへコメント・Flashキューポイントを、ダイアログから順に入力するスクリプトMarker Property Setterの紹介と配布をします。

マーカーへのコメント

マーカーはコンポジション、レイヤーにそれぞれ打つことができます。打ち方は簡単、テンキーの*を押すだけです。

このマーカー、実はコメントを追加できます。マーカーを右クリックすると以下のようなダイアログが出てきます。

コメントのほかにも役に立つプロパティを設定できます。

しかしマーカーは小さく、レイヤーに複数ありそのそれぞれにコメントを入力する場合はかなりの手間になります。

今回紹介するMarker Property Setterでは、一度実行することで複数のレイヤーのマーカーに頭から順にコメント・Flashのキューポイントを入力することができます。

動作環境

Adobe After Effects CS3 , CS4 , CS5 , CS5.5

使用方法

マーカーを付けてあるコメントを入力したいレイヤーを一つまたは複数選択し、スクリプトを実行するだけです。選択したレイヤーの頭から順番にコメント入力ダイアログが表示されます。

ダイアログにはレイヤーネーム、コメントに既存の入力値がある場合はその値が表示され、どこのマーカーなのかすぐにわかります。

リセットしたい場合はなにも入力せずにEnterを、既存のコメントをそのまま残したい場合は、ダイアログのCancelボタンを押すことでそのまま内容が保持されます。

Marker Property Setterを使用して入力される値はコメント、Flashキューポイントの名前、イベント(ナビゲーション)のチェックの3つの赤丸の箇所です。

リセットした場合は全ての値がリセットさせるようになっています。

Flashキューポイントのイベント・ナビゲーションの操作は、スクリプト内部の「USER VARIABLES」の値を変えてください。

ダウンロード

Marker Property Setter

タグ : Script, スクリプト[タグを追加する]

色のデータとAfter Effects その3

あかつきみさき — Wed, 28 Mar 2012 13:00:42 +0000

1回、2回はトーンカーブ、レベルエフェクトを中心にご紹介しました。

さて、前回のレベルエフェクトにはヒストグラムというものがついていました。

この機能、トーンカーブにあると便利そうですよね。

今回は、サードパーティ製のプラグインFresh Curvesと標準エフェクトのHDRコンパンダーをご紹介します。

ヒストグラムとトーンカーブ

Fresh Curvesは、Frischluft社のベジェ3Dスプラインを用いるカラー補正プラグインです。

Fresh Curvesの特徴は、トーンカーブ機能にヒストグラムを搭載していることです。

また、Fresh CurvesはRGBやアルファの値だけでなく、輝度・彩度・色相も補正することができます。

もちろん、各グラフにはヒストグラムが付いています。

Fresh Curvesは2つのスライダーでグラフの拡大縮小が出来るのも利点です。

Fresh Curvesにはもう一つ、Relative Curves（相対的な曲線）という平行線からの調整ができるトーンカーブがあります。

Relative Curvesでは他の曲線を元に調整できます。

Relative Curvesに搭載しているpost blurという項目は面白いものです。

base onで選択しているものを基準にブラーをかけられるというものです。例えば、青の明るい部分にのみブラーをかけると言ったピンポイントの操作が可能です。

RGB3つの光源を用意(Trapcode Luxを使用)

青にブラーをかけた状態

緑にブラーをかけた状態

特定の色の光をぼかすなど、このプラグインならではの使い方ができそうです。

HDRコンパンダー

エフェクトに警告マークがつき、このような警告を見たことはありませんか？

これはHDRコンパンダーを使用することで防ぐことができます。

HDRコンパンダーはユーティリティの中にあるエフェクトです。8bpc・16bpc用のエフェクトを32bpcに対応させることができます。

このエフェクトは単体では使用しません。2つのエフェクトで非対応のエフェクトを挟み込み使用します。

挟み込んだ上のHDRコンパンダーのモードはレンジの圧縮、下のHDRコンパンダーのモードはレンジの伸張に設定します。

それぞれのゲイン・ガンマは同じ値に設定します。エクスプレッションで繋いでやると楽です。

タグ : color, 色, 色調補正[タグを追加する]

AEの環境設定ファイルに独自設定を書きこむ

あかつきみさき — Wed, 28 Mar 2012 05:00:35 +0000

JavaScriptでスクリプトを書く時、設定をAfter Effectsに書きこむと後の作業が楽になる場合があります。

この記事では、JavaScriptでAEの環境設定ファイルに独自のパラメーターを追加する方法、またそのパラメーターの利用方法をご紹介します。

ExtendScript Toolkitを利用する

今回複数回スクリプトを実行しますが、AEでいちいちJavaScriptファイルを実行するのは面倒ですので、今回はExtendScript Toolkitと連携し、簡単に実行・確認できるようにします。

まずは、After Effects、ExtendScript Toolkitを起動します。

ExtendScript ToolkitとAfter Effectsを起動した状態で、ExtendScript Toolkitの画像のように選択します。

鎖のマークが赤く崩れている場合はうまくリンクしていないので、鎖マークをクリックして対象アプリケーションを起動しましょう。

さて、早速繋がっているか確認してみましょう。

alert (“test”,”alert”);と入力します。アラートの構文は以下の構成になっています。

alert (“ダイアログに表示する内容”,”ダイアログのタイトル”);

入力したらF5を押します。うまくいくとAfter Effects上でタイトルがalert、内容がtestのアラートが表示されるはずです。

これで接続が確認できました。

JavaScriptはスラッシュ2つでコメントアウトできます。/*から*/までの複数行もコメントアウトできます。

コメントアウトされた行は緑で表示される。

ExtendScript Toolkitではタブで簡単にインデントできます。

環境設定ファイルに書き込む

環境設定ファイルに書き込むには以下の構文を使います。

app.settings.saveSetting(“セクション名”,”セクションキー”, “値(文字列)”);

セクション名の下にセクションキーが並んでいると考えてください。

セクション名

・セクションキー1

・セクションキー2

・セクションキー3

・セクションキー…

値は文字列として書き込まれます。true,falseで書きこんでも読み込み時にはテキストとして読まなければなりません。

それでは今回は以下の値を書き込んでみます。

app.settings.saveSetting(“test_my_section”,”section1″, true);

app.settings.saveSetting(“test_my_section”,”section2″, “false”);

app.settings.saveSetting(“test_my_section”,”section3″, 100);

これは「test_my_section」という名前のセクション名にsection1～3までのセクションキーを入力しています。

上の3つの文を入力した状態でF5を押して実行してみましょう。

一度After Effectsの画面になり、特に反応もなくExtendScript Toolkitに帰って来たかのように見えます。

しかし実際にはちゃんと値は入力されています。確認してみましょう。

確認の構文には以下のものを用います。

app.settings.haveSetting(“セクション名”,”セクションキー”);

先ほどはsaveでしたが今回はhaveです。引数に値はありません。この構文では値そのものではなく、セクションの有無を確認しているからです。

それでは実際に以下の文を入力して実行してみましょう。先ほどの文章はコメントアウトしておきます。

app.settings.haveSetting(“test_section”,”section1″);

また一見何も無いようですが、よく見てみましょう、ExtendScript Toolkitの下のところにはちゃんと結果が表示されています。

false、つまり「test_section」の「1」は存在しないということです。ここではmyを付け忘れているからですね。

app.settings.haveSetting(“test_my_section”,”section1″);

この文でtrueが帰ってきます。

have文では初めて使うスクリプトなどでセクションがあるかどうか(初回起動か否か)などを判別するのに利用します。

if文で以下のように確認し、セクションがない場合は追加するようにします。

if(app.settings.haveSetting(“test_section”,”1″) == false){

app.settings.saveSetting(“test_section”,”1″, false);

}

この文では、test_sectionというセクションの中に1というセクションキーがあるかどうかを確認し、ない場合はセクション名「test_section」のセクションキー「1」に「false」の値を追加するものです。

この文を実行した後でもう一度app.settings.haveSetting(“test_section”,”1″)を実行するとtrueが帰ってきます。

環境設定ファイルに入れた値を利用する

それでは実際に利用してみましょう。以下の構文を利用して取り出します。

app.settings.getSetting(“セクション名”,”セクションキー”);

ここでも値は入力しません。そもそもこのセクションキーの中身は変数のようなものですので取り出すごとに値が違う可能性があります。

変数を定義して以下の用に取り込みます。

var test1 = app.settings.getSetting(“test_section”,”1″);

実際に値がとれたかどうかをアラートで確認します。

alert (test1,”alert”);

先ほどfalseを入れたはずですのでfalseが帰ってくれば正しいはずです。

念のため、同じセクション名・セクションキーに違う値を入れてアラートしてみましょう。

app.settings.saveSetting(“test_section”,”1″, “test call alert!”);

var test1 = app.settings.getSetting(“test_section”,”1″);

alert (test1,”alert”);

以下のように帰ってくれば成功です。

true,falseの罠

以下を実行します。コピペしてどうぞ。セクション名はTrue,Falseの頭文字からです。

app.settings.saveSetting(“TF”,”1″, “true”);

app.settings.saveSetting(“TF”,”2″, “false”);

app.settings.saveSetting(“TF”,”3″, true);

app.settings.saveSetting(“TF”,”4″, false);

var test1 = app.settings.getSetting(“TF”,”1″);

var test2 = app.settings.getSetting(“TF”,”2″);

var test3 = app.settings.getSetting(“TF”,”3″);

var test4 = app.settings.getSetting(“TF”,”4″);

if(test1 == true){

alert (“test1,OK”,”alert”);

}else{

alert (“test1,NG”,”alert”);

}

if(test2 == true){

alert (“test2,NG”,”alert”);

}else{

alert (“test2,OK”,”alert”);

}

if(test3 == true){

alert (“test3,OK”,”alert”);

}else{

alert (“test3,NG”,”alert”);

}

if(test4 == true){

alert (“test4,NG”,”alert”);

}else{

alert (“test4,OK”,”alert”);

}

TFのセクション名の1～4のキーに、上から順番にテキストのtrue,false、bool型のtrue,falseを入力しています。

上の文を実行すると、1つ目がNG、2つ目がOK、3つ目がNG、4つ目がOKとアラートされるはずです。

ここで注目してもらいたいのが、入力時の型と取り出すときの型です。

入力時、1と2はテキストとして入力しているので、1つ目の分岐でbool型で判別しているのでNGと出てもおかしくないように思えます。

しかし、boolとして書きこんだ(つもりの)3つ目でも弾かれています。

これはJavaScriptで入力時にboolとしてハイライトされているので勘違いしやすいですが、内部としてはテキストですべて保存されています。

つまり、実際にif文などで判別する時はすべてテキスト判別しましょう。

if(test1 == “true”){

alert (“test1,OK”,”alert”);

}else{

alert (“test1,NG”,”alert”);

}

if(test2 == “true”){

alert (“test2,NG”,”alert”);

}else{

alert (“test2,OK”,”alert”);

}

if(test3 == “true”){

alert (“test3,OK”,”alert”);

}else{

alert (“test3,NG”,”alert”);

}

if(test4 == “true”){

alert (“test4,NG”,”alert”);

}else{

alert (“test4,OK”,”alert”);

}

これですべてOKのアラートが出るはずです。ちなみに、先ほどのTF判別ではすべて結果がfalseになってしまいます。

数値の場合は、大小判別が可能です。

例えば、とあるソフトで書き出したスクリプトのバージョン判別に利用するなど、使用方法はあります。

タグ : JavaScript, スクリプト, 環境設定[タグを追加する]

VOCALOID3とAfter Effects ～Marker Maker for After Effects解説～(2012/3/31/v3.1.0.0)

あかつきみさき — Mon, 26 Mar 2012 13:30:27 +0000

この記事ではMarker Maker for After Effectsの細かい仕様などをご紹介します。

Marker Maker for After Effectsは前回の記事からダウンロードできます。

リリースノートは前回の記事をご覧ください。

バージョン3.0.0.0からAEでスクリプトを実行する前に一度、認証スクリプトの実行が必須になります。認証スクリプトを実行後にご利用ください。

処理可能な歌詞情報

清音、濁音、半濁音、小文字、長音符、踊り字、ローマ字、発音記号、英語発音記号

発音記号の処理はすべてVOCALOID3 Editorの発音記号一覧で処理しています。

ぎを入力

マーカーに入力される歌詞 = ぎ

マーカーに入力される母音 = i

きゃを入力

マーカーに入力される歌詞 = ゃ(促音から判定)

マーカーに入力される母音 = a(促音の母音で判定)

-(長音符)を入力

マーカーに入力される歌詞 = ひとつ前の歌詞

マーカーに入力される母音 = ひとつ前の母音情報

sho(“しょ”のローマ字)を入力

マーカーに入力される歌詞 = sho

マーカーに入力される母音 = o

U@(英語発音記号)を入力

マーカーに入力される歌詞 = o(日本語の発音より判定)

マーカーに入力される母音 = o

p\\(発音記号)を入力

マーカーに入力される歌詞 = h(日本語の発音より判定)

マーカーに入力される母音 = h(子音なので処理不可能)

スライダー制御エフェクト

母音情報は以下の通りに処理され、スライダー制御エフェクトに値として格納されます。(バージョン3.0.0.0以降)

a = 1, i = 2, u = 3, e = 4, o = 5, n = 6, それ以外 = 0.

認証スクリプト

バージョン3.0.0.0からAEでスクリプトを実行する前に一度、認証スクリプトの実行が必要になります。

AE上でMarker Maker for AfterEffects EULA.jsxbinを実行してください。

認証スクリプトはバイナリファイルの為、ダイアログで「すべてのファイル形式」を選択してご使用ください。

認証スクリプトを実行しないと以下のようなエラーが出ます。

認証スクリプトは前回の記事からダウンロードできるファイルに同梱しています。

認証スクリプトを実行するとVOCALOID3 UG Job Pluginエンドユーザー使用許諾契約書とMarker Maker for After Effects EULAがダイアログで表示されるので、お読みの上許諾してください。

ボックスにチェックを入れ、OKで認証完了です。

以下のダイアログが表示されると認証が完了したことを表します。

下の画像のようなダイアログが出た場合、EULAが更新されているので最新の認証スクリプトの実行をお願いします。

配布先

前回の記事からダウンロード

タグ : VOCALOID3[タグを追加する]

音のデータとAfter Effects ～VOCALOID3と連携編～(2012/3/31/v3.1.0.0)

あかつきみさき — Wed, 14 Mar 2012 13:30:45 +0000

リリースノート

(2012/3/31)最新版3.1.0.0リリース。

・AE上でプロジェクトパネルの一番上以外でのコンポジションで実行したときに母音情報を読めない問題の修正.

(2012/3/26)3.0.0.0リリース。

・出力したJavaScriptファイルの処理速度の改善. 母音情報処理の変更. EULA処理の実装.

(2012/3/26)2.2.1.1リリース。

・バグの修正

(2012/3/14)2.2.1.0リリース。

・リリース

より詳しい解説は次の記事をご覧ください。

VOCALOID3と連携する

VOCALOID楽曲の動画を作成する場合、歌詞を入力する作業は意外と手間だったりします。そこで、歌詞入れ作業を簡略化するプラグインを作りました。

この記事ではVOCALOID3 Job Pulgin、Marker Maker for After Effectsをご紹介します。

ファイルは記事の最後のダウンロードからどうぞ。

このプラグイン自体はVOCALOID3がないと動作しません。After Effectsで使用するにはMarker Maker for After Effectsで書き出したJavaScriptを使用します。

作成されたJavaScriptファイルをAfter Effects上で実行すると、VOCALOID3上で入力されたノートに基づく位置にマーカーがついたヌルレイヤーを作成します。

マーカーのメモには、ひとつは対応するノートの歌詞情報、もうひとつには母音情報を含んでいます。

VOCALOID3で書き出した歌唱データの位置にマーカーが配置されるので、簡単に歌詞を付けることができます。

動作環境

VOCALOID3 , VOCALOID3 Job Pluginが動作する環境

出力したJavaScriptファイルの動作環境

Adobe After Effects CS3 , CS4 , CS5 , CS5.5

使用方法

まず、Job PluginをVOCALOID3上で実行します。

一つのトラック内の一つ以上のノートを含むパートを選択し、「ジョブ→Jobプラグインを実行」から実行してください。

ファイル名を入力してOKを押すと、vsqxファイルと同じディレクトリ(フォルダー)内に「vsqxファイル名.vsqx_入力ファイル名.jsx」という名前のJavaScriptファイルが生成されます。

コンポジションを選択し、JavaScriptを実行するとVOCALOID3上で入力されたノートに基づく位置にマーカーがついたヌルレイヤーを作成されます。

母音情報について

母音情報からスライダー制御エフェクトに値が入力されます。口パクなどにご利用ください。ただし、発音記号をそのまま入力されている場合など、正しい値が取得されない場合もあります。

「パート名 VOCALOID3 Vowel Data (BPM ※)」についたマーカーの母音情報は、以下の法則に基づいて付いています。

清音、濁音、半濁音、小文字の”ぁ、ぃ、ぅ、ぇ、ぉ、ゃ、ゅ、ょ、ゎ”、”ヶ”は、

それぞれ対応した母音により「a」「i」「u」「e」「o」

小文字の”っ”、長音符、踊り字は一つ前のノートの母音、”ん”は、「n」

複数で構成される文字(きゃ)などは促音から判定

それ以外のものは、ノートに入力された文字がそのままマーカーのメモになります。

ファイルのダウンロード

プラグイン・認証スクリプトのダウンロードはこちらからどうぞ。このプラグイン自体はAfter Effectsでは動作しないのでご注意ください。

Marker Maker for After Effects 3100

タグ : JavaScript, sound, VOCALOID, VOCALOID3, 音[タグを追加する]

色のデータとAfter Effects その2

あかつきみさき — Mon, 12 Mar 2012 13:00:30 +0000

前回はトーンカーブについてご紹介しました。

今回はレベルエフェクトについてご紹介します。

(Windows版CS5、色深度は32bpcでご紹介します)

レベル編

レベルは「色調補正」の中にあり、画像の輝度、コントラスト、ガンマを補正することができます。

レベルエフェクトの特徴は、ヒストグラムでしょう。

ヒストグラムはレベルエフェクトに限らず、カラーコレクション関係のエフェクトに搭載されていることがあります。

ヒストグラムでは、画像の各輝度のピクセルがどの程度あるかを見ることができます。左ほど暗いピクセル、右ほど明るいピクセルを表しています。グラフの縦の長さでピクセルの量を表しています。

レベルエフェクトには5つのスライダーがついています。

上のグラフの左から、黒の入力レベル、ガンマ、白の入力レベル、

下のグラデーションの左から黒の出力レベル、白の出力レベルを表しています。

前回紹介したトーンカーブでいうと、横軸が上のスライダー、縦軸が下のスライダーといった感じです。

調整を始める前に、デフォルトだと「RGB」「赤」「緑」「青」「アルファ」すべてのチャンネルが混ざっていて見づらいので、ヒストグラムをクリックすることでチャンネルをソロにし、見やすくしましょう。

右の2つの丸でソロかどうかわかります。上の丸が白いとすべて、下が白いとチャンネルをソロで見れます。

これでRGBの値のみ見ることができます。

今回は写真を用意しました。

さっそくヒストグラムで見てみましょう。

まず、RGBの値のみを見ると、全体的に滑らかで、大きな山が一つあります。

また、わずかですが暗い部分と明るい部分がが欠けていることがわかります。

左上のスライダーで、黒の入力レベルを調節します。

次に右上のスライダーで、白の入力レベルを調節します。見比べると、全体的に色が引き締まったように感じます。

前回ご紹介したトーンカーブで調節するとこのようになります。

下限と上限の、ある範囲の明るさを、同じ暗さ・同じ明るさとして出力しているわけですね。

次にガンマを調節してみます。ガンマは中心のスライダーで調節します。

ここで少し考えてみましょう。

中心のスライダーを左に動かします。画像は明るくなるでしょうか？暗くなるでしょうか？

ここでは、ヒストグラムの見方が重要になります。

ヒストグラムは、画像の各輝度のピクセルがどの程度あるかを表しています。ガンマはその中心を表していると考えてください。

ここでは、中心のスライダー(ガンマ)を左に調整しています。

画像を見てみましょう。

画像は明るくなっています。中心を暗い方に移動したからです。暗かった部分が、明るさの中心になることで全体的に明るくなったわけです。

トーンカーブで表すと、このような感じです。

レベルを用いたデプスマップ(アルファ)の調整

3DCGソフトでデプスマップを書き出す際に、カメラ設定を誤ってしまったりと再調整したい場合があります。

しかし再レンダリングする時間はない・・・そんな場合はレベルエフェクトで調整しましょう。場合によっては再レンダリングせずに調節できます。

デプスマップにレベルエフェクトを適用します。

ガンマを調節し、再調整した状態

ただし、これは力技ですので、8bpcでは不自然になる可能性が高いです。

8bpcの場合

全体的にガタついていることがわかります。

ちなみに、デプスマップの調整次第ではトラックマットで使用できることがあります。

色調補正の意味は？

色補正を紹介していますが、当然、データの欠落などの観点的には色の補正を必要としない方がいい場合が多いでしょう。

撮影時の環境やカメラマンの腕前など毎回違うことですので、統一するには補正作業が必要になると思います。もちろん、効果として色を変化させる場合もあります。

ただ、色を補正する場合、調整次第でデータが欠落するということは頭の片隅に覚えておきましょう。

タグ : color, レベル, 色, 色調補正[タグを追加する]

Magic Bullet Instant HD プラグインレビュー

あかつきみさき — Sat, 10 Mar 2012 13:00:54 +0000

Magic Bullet Instant HD

この記事ではRed Giant社のMagic Bulletシリーズの中のHDアップコンバートプラグイン、「Magic Bullet Instant HD」をご紹介します。

Instant HDは、プログレッシブのDVなどのSDソース映像をHDビデオにアップコンバートするプラグインです。

AEのスケールサイズの変更のような単純なサイズ変更ではなく、コンバート時に不足ピクセルを自動的に作成してくれます。

インターレースの動画はプログレッシブに変換する必要があります。

プリセットも豊富です。

では実際に使ってみてどの程度なのか見ていきます。

「やっぱり元々HDサイズの方が―――」といったことは、このプラグインの趣旨とは違うので、考えないことにします。

元のサイズはSDサイズ(640*272)です。

After EffectsのスケールでHDサイズに300%スケール(1920*816)したものを、細部を見るためにウィンドウで200%表示にしたものです。

次にInstant HDでコンバート(1920*816)したものを200%表示です。

比べると細部の違いがよくわかります。

このプラグインは静止画にも使いやすいですね。過去の古くてサイズの小さい写真をアップコンバートできるようなプラグインは貴重です。

最近はHDサイズの映像を作ることが多いかと思いますが、素材がSDの場合、素材単体に使うのもいいかもしれません。

何度か使ってみた印象としては、HDサイズで用意できないものがある場合はぜひ使いたいプラグインです。

過去の映像をどこかに出す機会がある場合にいかがでしょうか。

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

色のデータとAfter Effects その1

あかつきみさき — Sat, 10 Mar 2012 02:00:33 +0000

色のデータとAfter Effects

After Effectsに色が関係するエフェクトがいくつあるかご存知ですか？

あまりにも多くて、実際に触ったことのないエフェクトも多いかと思います。私自身も、使い方がよくわからなかったり、使ったことのないエフェクトがあります。

このシリーズでは、AEに入っている基本的な色のエフェクトから、色のデータをAEで扱う時に知っておくと、ちょっと便利な小ネタやスクリプト、そして実力派のプラグインをシリーズでご紹介します。また、アルファについても触れるつもりです。

(ここではWindows版 CS5でご紹介します)

色々な色のエフェクトたち

さて、早速色、アルファが関係するエフェクトの数を数えていきましょう。まず「色調補正」に29個。

「Color Correction」に2つ。「Channel」に1つ、「チャンネル」に12個。「ユーティリティ」に6つ。

アルファ関連で「Keying」に2つ、「キーイング」に9個。「Matte」に1つと「マット」に3つ。

そして、サードパーティ製の「SA Color Finesse 3」。

29 + 2 + 1 + 12 + 6 + 2 + 9 + 1 + 3 + 1 = 66。

標準でこれだけのものがあるわけですから、どれだけ色というものが映像において重要なのかがわかります。

全部をご紹介するわけにはいかないので、特に使用頻度が高いと思われるものや便利なものを、順番にご紹介します。ちょっとしたクイズもあるので、実際に考えながらご覧ください。

トーンカーブ編

トーンカーブは「色調補正」の中にあり、色を曲線のグラフで調整するエフェクトです。定番のエフェクトといっても過言ではないので、AE以外でもよく使う人はいるのではないでしょうか。

トーンカーブはまず適用すると45度の直線のグラフが現れます。横軸が元のデータの入力レベルを表し、縦軸で出力レベルを表しています。横軸の右側ほど明るく、縦軸の上の方ほど明るいという風になっています。

今回はこの画像を例に説明していきます。実際に同じものを使用したい方はダウンロードからどうぞ。

ダウンロード

一番明るい部分がどのように入力され、出力されているか確認したい場合は、まず横軸が元のデータの入力レベルを表しているので、横軸の一番右端部分を見ます。一番右端は一番高い部分でポイントが打たれています。

縦軸で出力レベルを表していて、高いほど明るいので、この場合は横軸と縦軸と同じ距離を進んだところにポイントが打たれているので、一番明るい部分は同じく一番明るく出力されている、ということがわかります。

では実際に画像を見ながらトーンカーブを触ってみましょう。

例えば、右端のポイントを下げると、元々明るく入れたものを暗く出力する、ということでこのようになります。

反対に、左端のポイントを持ちあげると、元々暗く入れたものを明るく出力する、ということでこのようになります。

では、グラフの中心にポイントを打って持ちあげてみましょう。

左端を持ちあげたときと同じように、画像は明るくなっていますが、この調整では主に中間ぐらいの明るさの色が上がっています。

トーンカーブ、こんな場合は？

では少し考えてみましょう。このグラフを下の画像のように縦軸の中心で横一直線にした場合、画像はどのようになっているでしょうか？

わからない方は先ほどの横軸と縦軸の関係を思い出してみてください。

横軸が元のデータの入力レベルを表し、縦軸で出力レベルを表しています。

適応した直後は、45度でした。これは、元の入力レベルと同じレベルで出力しているということです。なので、トーンカーブ適応直後は何も変化がないわけです。

では、先ほどの横一直線のグラフの場合だとどうなるでしょうか？

縦軸を見てみましょう。すべての入力レベルは、すべて同じレベルで出力されている、ということです。

つまり、同じ色で出力されているということです。

縦軸は上ほど明るいというのは先ほど説明しました。つまり、下ほど暗いというのはわかるかと思います。その中心ですので・・・

実際に適応した場合、このようになります。

このように、灰色一色になります。答えはあっていましたか？

個別に色を操る

では一度リセットした後、今度はチャンネル部分を選択してみましょう。

今まではRGBつまり赤緑青と、全ての色を一括で操っていたわけです。

ここでは、赤を選択します。

このグラフでも、横軸が元のデータの入力レベルを表し、縦軸で出力レベルを表していることは変わりません。

ただしこのグラフは、赤色のみを操作します。

では試しに、右端、明るい部分をすべて下げてしまいましょう。

すると、こんな風になります。

光の三原色については学校で習ったと思います。覚えていない人もここで覚えれば役に立つはずです。

元々、白い部分は赤、緑、青と3つの色がすべて明るい場合に白くなります。

足し算風に表すと、

赤 + 緑 + 青 = 白

です。

ここで、赤を右に移行します。すると式はこのようになりますね。

緑 + 青 = 白 – 赤

つまり、今この画像は赤い部分をすべて切っているので、緑と青の色のみで構成されていることがわかります。

では、赤を下げた状態で緑と青も同じように右端をすべて下げましょう。

赤に続いて緑を下げた状態

すると、画像が真っ暗になることがわかります。

= 白 – 赤 – 緑 – 青

すべて暗くしたわけですから、当然黒色になります。さて、ここでチャンネルをRGBに戻してみましょう。

個別の操作は全体のRGBとは別処理になっているので、全体のRGBのグラフに変化はありませんが、画像は真っ暗なままです。

ここでまた考えてみましょう。先ほどと同じように、RGBチャンネルのグラフを縦軸の中心で横一直線にした場合、画像はどのようになっているでしょうか？

ここで注意してもらいたいのが、先ほど調整したRGBそれぞれの値は、すでに適応されているということです。

チャンネルをRGBに戻しても、グラフがデフォルトのままだったのに画像は調整済み(黒いまま)だったことからもわかります。

さて、わかりましたか？横軸と縦軸の関係をちゃんと理解していればわかるはずです。

赤、緑、青をすべて下げた後で、RGBのチャンネルで実際に一直線にした場合、以下のようになります。

そう、先ほどとまったく同じ灰色一色です。明るさの出力レベルが同じならば、同じレベル(色)にしかならないからです。

では最後の問題です。今まさにRGBそれぞれを単独で下げ、縦軸の中心で横一直線に調節したものを引き続き使用します。

4つあるので、それぞれの場合の、画像を考えてください。

ヒントはRGBのチャンネルを調整する前の画像は黒一色だったということです。

ではまず1の答えから。

元の画像が黒一色だったということは、左端のポイントが重要、ということがわかります。

左端のポイントは、画像の一番暗い部分(黒)です。縦の位置によってどの明るさ(色)で出力されるかが決まります。

暗い部分を暗く出力するわけですから、当然画像は暗い(黒い)ままです。

次に2の答え。

暗い部分を明るく出力するわけですから、画像は明るく(白く)なります。

右端のポイントを上下しても色は変わりません。なぜなら、元の画像に明るい部分は含まれていないからです。含まれていないものをどうやっても調節することはできません。

では3と4の答えを、続けて見ましょう。

先ほども書いたように、元の画像に明るい部分は含まれていないので、色は灰色のままです。

トーンカーブについて、どういうものかわかりましたか？

トーンカーブを理論的に操ることで、理想の色に近づけることができます。トーンカーブに限らず、色々試行錯誤してみてください。

acvファイルで簡略化

同じような素材をいくつも扱う場合、何度も同じように調節するのは面倒です。そんな時は、acvファイルにトーンカーブの設定を保存しましょう。

acvファイルとは、Photoshop.CurvesFileというもので、トーンカーブの設定を保存する専用のフォーマットです。名前の通り、Photoshopでも使用することができます。

トーンカーブエフェクトのフロッピーディスクのアイコンをクリックすると、保存ダイアログが立ち上がります。

保存したacvファイルを適用したい場合は、フォルダのアイコンをクリックすると読み込みダイアログが立ち上がります。

Photoshopは画像のように書き出し・読み込みができます。

白よりも明るい色

さて、最後になりましたが、ひとつ重要なことを書きます。

色深度というものがあります。

プロジェクトウィンドウの～bpcというものがそれです。After Effectsでは3種類扱えます。8,16,32bpcです。

この違いは、それぞれで扱える色の範囲が違うことです。値が大きいほど細かい色(正確な色)を扱えるということです。その分計算時間は長くなりますが・・・。

この中で唯一、32bpcは白よりも明るい値を扱うことができます。

詳しくは、Adobeのページに丁寧で詳しい解説があるので、興味のある方はそちらをご覧ください。

After Effectsにおける「色」と「ハイダイナミックレンジ」

その2へ

本当は数種類紹介する予定だったのですが・・・トーンカーブだけでこの長さになってしまいました。その2に続きます。

タグ : color, トーンカーブ, 色, 色調補正[タグを追加する]

AEP Project

「テキストレイヤーで作るドミノ倒し」&「CS6での応用」

はじめに

テキストレイヤーの利点

作例:テキストレイヤーで作るドミノ倒し

応用編

応用編サンプルファイル

関連する投稿

AfterEffectsを使ったiPhone用アニメーションjpegの作り方

完成サンプル

撮影した映像を加工する

jpeg書き出し

psにてスクリプトを回す

コーディング

参考

Special Thanks

関連する投稿

【スクリプト配布】複数のレイヤーのマーカーに簡単にコメント・Flashキューポイントを追加する(Marker Property Setter)

マーカーへのコメント

動作環境

使用方法

ダウンロード

関連する投稿

色のデータとAfter Effects その3

ヒストグラムとトーンカーブ

HDRコンパンダー

関連する投稿

AEの環境設定ファイルに独自設定を書きこむ

ExtendScript Toolkitを利用する

環境設定ファイルに書き込む

環境設定ファイルに入れた値を利用する

true,falseの罠

関連する投稿

VOCALOID3とAfter Effects ～Marker Maker for After Effects解説～(2012/3/31/v3.1.0.0)

処理可能な歌詞情報

スライダー制御エフェクト

認証スクリプト

配布先

関連する投稿

音のデータとAfter Effects ～VOCALOID3と連携編～(2012/3/31/v3.1.0.0)

リリースノート

VOCALOID3と連携する

動作環境

使用方法

母音情報について

ファイルのダウンロード

関連する投稿

色のデータとAfter Effects その2

レベル編

レベルを用いたデプスマップ(アルファ)の調整

8bpcの場合

色調補正の意味は？

関連する投稿

Magic Bullet Instant HD プラグインレビュー

Magic Bullet Instant HD

関連する投稿

色のデータとAfter Effects その1

色のデータとAfter Effects

色々な色のエフェクトたち

トーンカーブ編

トーンカーブ、こんな場合は？

個別に色を操る

acvファイルで簡略化

白よりも明るい色

その2へ

関連する投稿