映像制作 eラーニングのことならビズバレー
文字サイズの変更 標準 
大きい
ホーム > スタッフブログ
スタッフブログ
k.takahashi
k.taguchi
j.hashimoto
j.katou
y.hotate
m.kawai
s_inomata
m_muraoka
ビズバレーは、東京都 千代田区で活動する、映像制作、DVD、eラーニングを扱う会社です。

以前の記事「AfterEffects エクスプレッション linear(リニア)を使ってシームレスなアニメーションチェンジ(2)」でちらっと出てきたスライダー制御を活用してアニメーションをコントロールしてみたいと思います。

まずは、毎度おなじみMath.sin Math.cosで適当に円運動を作ります。
※Math.sin Math.cosについてはこちらの記事をご覧ください
オブジェクトの位置プロパティに下記の様なエクスプレッションを記述しました。

Distance=250;
Speed=1;
x=Math.cos(Math.PI*time*Speed)*Distance;
y=Math.sin(Math.PI*time*Speed)*Distance;
[x,y]+value;


ここからスライダー制御を使って任意のタイミングで半径を変えられるようにしていきます。
Distance=250; が半径を意味していますので、この250をスライダー制御に置き換えます。

エフェクト→エクスプレッション制御→スライダー制御を選択します。
150611-1

スライダーの値を250に変更します。
150611-2

Distance=250;の"250"を削除して、位置プロパティのピックウィップを引っ張りスライダーまで伸ばします。
150611-3

自動的に effect("スライダー制御")("スライダー") と入力されます。
150611-4

これで「Distanceの値はスライダーを参照してください」と言う命令文になりました。
この状態で再生を行うと、スライダーの値は250ですので、直接250と指定していたときと全く同じアニメーションです。


ここからスライダーの値を変化させていきます。
キーフレームを打ち、スタートから3秒間250、その後2秒かけて0、さらにその後2秒かけて250へ変化させてみました。
150611-5

この様なアニメーションになりました。


これだけ見てもパッとしませんが、例えばTrapcodeParticularに応用するとこのようなアニメーションが作成できます。


今回は以上です。

こんにちは、保立です。久しぶりのブログ更新になります。

今回は不定期でやっているビズバレーの勉強会の模様をご紹介します。フリーランスで活躍している先輩を講師に招いています。今まではアフターエフェクトについてでしたが、今日のテーマは一眼レフカメラで動画を撮ることについてです。

ビズバレー勉強会
まずは座学でカメラの位置取り、構図、ピンマイクの使い方、基礎からのおさらいです。

ビズバレー勉強会 ビズバレー勉強会
光の大事さ、そして照明の難しさを再認識しました。

ビズバレー勉強会 ビズバレー勉強会
休憩をはさんで後半は実際に一眼レフカメラを使っての講義です。田口さんの自前カメラを使って二台撮影のおさらい。(インタビューを撮る前提でやっています)

ビズバレーでは最近になって一眼レフ動画を使う案件が増えてきています。ビデオでは表現できない質感やボケ感があります。手振れやピントはビデオカメラよりシビアになってくるので撮影はいつも以上に神経を使います。

最近、背景がボケれば良いという風潮がありますが、僕個人としてはそのような映像には食傷気味です。やりすぎるとあざとくなるからです。

映画少年だった僕としてはオーソンウェルズ映画のようにパンフォーカス(画面の全部にピントが合っている)で撮った映像とかもすごく好きです。状況と演出をしっかり踏まえて使いこなせていけるようになれればいいなと思いました。

映像制作スタッフの橋本です。

最近車のヘッドライトの軌跡を作りたいなと思っていました。
色々なやり方があると思いますが、Trapcode Pariqularの
Streakletを使用するとしっくりきたので、そのご紹介です。

①軌跡となる線をマスクで作成
下記写真の右下の道路部分に軌跡を作成しますが、
本数分マスクで軌跡を作成します。
Streaklet2

②新規平面にTrapcode Partiqularを適用
全部は書けませんが、主に赤枠の下記3つを設定します。
〇Emitter Type→Light(s)
これにより、Partiqularをライトレイヤーで動かします。
この際After Effectsの設定でライトレイヤーを『Emitter』という
レイヤー名にしないといけません。
そして、更にライトレイヤーをヌルで動かします。
〇Velocity→0
0にしないと、線が広がってしまい軌跡っぽくなりません。
〇Life→全尺の半分位の尺
例えば、6秒軌跡を持続したければ、3秒くらいがしっくり行くと思います。
Streaklet4-2

③Strealetの設定
軌跡のディテールにこだわるため、この部分の設定をします。
(Particle内にあります。)
No Streaksは線の数、Streak sizeが線の太さです。
Streaklet5

④軌跡の本数分Emitterとヌルの組み合わせを準備し、マスクパスをヌルの位置にペースト
今回は軌跡が5本なので、Emitterとヌルの組み合わせが5つあります。
Streaklet6-3

⑤映像完成
以上で映像が完成となります。
色や軌跡が出るタイミングなどを調整すれば、
より本物らしくなると思います。

映像制作スタッフの高橋です。

プライベートで映像編集するとき、
仕事の時と同様に、AdobeのPremiereやAfter Effectsを使用しているのですが、エンコード/データ変換する際、補助的にペガシス社の「TMPGEnc Video Mastering Works」を使用することもあります。

この「TMPGEnc Video Mastering Works」は、
エンコード/データ変換以外にも簡単にカット編集やテロップをのせることができ、動画編集になじみのない方に「おススメの映像編集ソフトない?」と聞かれた場合は、これをお勧めしています。

今回は、映像や音声を加工できるフィルターという機能の中から、「ビンテージフィルム」というフィルターとバージョンが6になってから新規追加されたフィルター「レトロサウンド」を使用してみたので、そのことを覚書したいと思います。

「ビンテージフィルム」は文字通り、古いフィルムを映写したような映像加工ができます。

「古いフィルム」、「やや古いフィルム」、「かなり古いフィルム」などのパッと見ても非常にわかりやすい効果を実感できるタイプが用意されていました。

ビンテージフィルム2

「レトロサウンド」も文字通り、音声にヒスノイズという「サー」という音ノイズや「プチ」といったクリックノイズを加えたり低または高周波帯をカットして古いレコードのようなレトロ感を出すことができました。

今回は、After Effectsのプラグ・イン「ParticleIllusion」の中に収められていたエフェクト名「Mouse」で作成した動画を素材として加工してみました。


いかがでしょうか?
「電波乱れTV」については、You Tubeのほうで自動的にノイズをぼかして軽減させてしまっているので、若干分かりにくいかもしれませんが、他はおおよそ良い感じに雰囲気はでたのではないかと・・・。

PremiereやAfter Effectsでもっとリアルに作り込むことはできるのですが、労力をかける必要がない場合(手抜きという意味ではないです)は、このようなツールを利用し、時間を削減した分、他の作業に労力や時間を費やすのも一計かと思います。

では、今回はこれにて失礼します。

今回は、スマートフォンアプリの作成で避けては通れないマルチ解像度について考えてみたいと思います。スマートフォンのアプリは、画面いっぱいにシングルウィンドウとしてコンテンツを描画するため、端末の解像度を考慮しなければなりません。

例えば、Android端末で800x480ピクセル、1920×1080ピクセルの画面サイズで、800x480ピクセルのコンテンツ(画像)をそのまま表示しようとしたらこのような感じになります。

20150501-1

片方はピッタリ合っていますが、高解像度の端末では、なんらかの対処が必要なのは見ての通りです。さて、ここでどうするかという問題です。思い付くところ3通りの手法があります。

(1)コンテンツのアスペクト比を「無視」して拡大する
(2)コンテンツのアスペクト比を「維持」して拡大する
(3)コンテンツを相対的に作成・配置する

ここでは、アスペクト比を「無視」した方法の記述を見てみましょう。
starlingを起動するまでのコードです。

package
{
  import flash.display.Sprite;
  import flash.display.StageDisplayState;
  import flash.display.StageScaleMode;
  import flash.geom.Rectangle;
  import starling.core.Starling;
  
  [SWF(frameRate="60", backgroundColor="#000")]
  
  public class Main extends Sprite
  {
    public var starling:Starling;
    public static const STAGE_HEIGHT:int = 800;
    public static const STAGE_WIDTH:int  = 480;

    public function Main()
    {      
      stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
      stage.scaleMode    = StageScaleMode.NO_SCALE;

      var viewPort:Rectangle =
       new Rectangle(0, 0, stage.fullScreenWidth, stage.fullScreenHeight);

      starling = new Starling(MainState, stage, viewPort);
      starling.stage.stageWidth  = STAGE_WIDTH;
      starling.stage.stageHeight = STAGE_HEIGHT;
      starling.start();

    }
  }
}

ポイントになる部分は、ビューポートの矩形設定で(0,0)からフルスクリーンでの座標をセットしてStarlingオブジェクト生成時の引数としています。

var viewPort:Rectangle =
       new Rectangle(0, 0, stage.fullScreenWidth, stage.fullScreenHeight);

そして、次のところでコンテンツサイズ(800x480)をセットしています。

starling.stage.stageWidth  = STAGE_WIDTH;
starling.stage.stageHeight = STAGE_HEIGHT;

結果、このように縦横800x480ピクセルの画像がディスプレイのサイズにぴったり合いました。ただし中央の正方形は11ピクセル歪んでいました。

20150510-3

注意したいのは、端末の解像度が1920x1080であっても、コンテンツの高さは1920ピクセルではありません。1776ピクセルとなります。これは画面下部にナビゲーションバー(システムキー)があるためです。端末によっては、画面の外に出ているものもあるため端末の解像度が同じでも、その有無によって表示サイズが異なります。

またステータスバーを表示すると、さらに縦幅は変わってきますので、なかなかやっかいです。個人的には、アスペクト比を無視したやり方は端末により歪みが大きいため、利用していません。

次回は、アスペクト比を「維持」したやり方を見てみようと思います。