XAMLで作ったアニメーションを動画にする

WPFSilverlightで見かけるXAMLは、アニメーションを使ってUIを作りこむことができます。

Windows Formsと比べると、細かいことは自動でやってくれる素晴らしい仕組みです。

 

そんなXAMLですが、Expression Blendを使って作れるのはいいんですが、それを動画にする方法がBlendには搭載されていません。

画面をキャプチャするのも1つの手ですが、残念です。非常に。

ですが、Expression Encoderを使うことによって動画を作ることができます。

 

用意するもの

 では早速作っていきましょう。

 

#1 – 空の動画を作る。

  1. ペイントで1920×1080のpng画像を作ります。
    f:id:morokoshidog:20151018175506p:plain
  2. ムービー メーカーに取り込みます。
    f:id:morokoshidog:20151018175539p:plain
  3. 作ろうとしているビデオの長さに応じて「ビデオツール」で再生時間を30秒などにしたり、先ほど作った画像をいくつか追加します。

    f:id:morokoshidog:20151018175559p:plain

  4. 1080pで書き出します。

    f:id:morokoshidog:20151018175651p:plain

 

#2 – ベースになる素材をExpression Designで作る

  1. 頑張る。
  2. ファイル→エクスポートで、「XAML Silverlight 4 / WPF キャンバス」を選択してエクスポートします。
    f:id:morokoshidog:20151018175719p:plain

 

#3 – アニメーションを作る

BlendでF6キーを押すと、アニメーションを編集するのに特化した表示構成になります。元に戻したいときはもう一度押します。

  1. Expression BlendWPFアプリケーションのプロジェクトを作成します。
  2. プロジェクトを右クリックして、「既存のアイテムにリンク」をクリックして、エクスポートしたXAMLファイルを選択します。

    f:id:morokoshidog:20151018175917p:plain

  3. 追加されたファイルをダブルクリックします。

    f:id:morokoshidog:20151018175930p:plain

  4. アニメーションを追加する[+]ボタンをクリックします。

    f:id:morokoshidog:20151018175951p:plain

  5. アニメーションを作ります。ボタンなどのコントロールは使わず、パスや画像のみで構成します。

    f:id:morokoshidog:20151018180210p:plain

 

#4 – 動画を作る

  1. Expression Encoderに#1で作ったMP4ファイルをインポートします。
  2. 「拡張」の「オーバーレイを追加する」に☑を入れて、#3で編集していたXAMLファイルを選択します。

    f:id:morokoshidog:20151018180256p:plain

  3. 表示位置をドラッグしたりして調整します。
  4. エンコードをクリックします。 

 

で、完成です!!!

というわけにもいきませんが、Expression Studioあるけど動画作るのって難しそうってお方には、かなりハードルを下げてくれるツールだと思うので、ぜひ一度はお試しください。