XAMLで作ったアニメーションを動画にする
WPFやSilverlightで見かけるXAMLは、アニメーションを使ってUIを作りこむことができます。
Windows Formsと比べると、細かいことは自動でやってくれる素晴らしい仕組みです。
そんなXAMLですが、Expression Blendを使って作れるのはいいんですが、それを動画にする方法がBlendには搭載されていません。
画面をキャプチャするのも1つの手ですが、残念です。非常に。
ですが、Expression Encoderを使うことによって動画を作ることができます。
用意するもの
- ペイント
- Windows Essentials 2012 (のうちのムービー メーカー)
- Expression Design 4 のページのJapaneseからダウンロード
- Expression Blend 4 SP1
- Expression Encoder 4 SP2 (SP未適用の製品が必要な場合はExpression Encoder 4からどうぞ)
では早速作っていきましょう。
#1 – 空の動画を作る。
- ペイントで1920×1080のpng画像を作ります。
- ムービー メーカーに取り込みます。
- 作ろうとしているビデオの長さに応じて「ビデオツール」で再生時間を30秒などにしたり、先ほど作った画像をいくつか追加します。
- 1080pで書き出します。
#2 – ベースになる素材をExpression Designで作る
- 頑張る。
- ファイル→エクスポートで、「XAML Silverlight 4 / WPF キャンバス」を選択してエクスポートします。
#3 – アニメーションを作る
BlendでF6キーを押すと、アニメーションを編集するのに特化した表示構成になります。元に戻したいときはもう一度押します。
- Expression BlendでWPFアプリケーションのプロジェクトを作成します。
-
プロジェクトを右クリックして、「既存のアイテムにリンク」をクリックして、エクスポートしたXAMLファイルを選択します。
- 追加されたファイルをダブルクリックします。
- アニメーションを追加する[+]ボタンをクリックします。
- アニメーションを作ります。ボタンなどのコントロールは使わず、パスや画像のみで構成します。
#4 – 動画を作る
- Expression Encoderに#1で作ったMP4ファイルをインポートします。
- 「拡張」の「オーバーレイを追加する」に☑を入れて、#3で編集していたXAMLファイルを選択します。
- 表示位置をドラッグしたりして調整します。
- エンコードをクリックします。
で、完成です!!!
というわけにもいきませんが、Expression Studioあるけど動画作るのって難しそうってお方には、かなりハードルを下げてくれるツールだと思うので、ぜひ一度はお試しください。