ソフト関連Trial−No.108
        WPFアニメーションからAVIファイルを作成する方法の紹介

トップページへ

 はじめに

現在、WPF(Windows Presentation Foundation)を使ったアニメーションソフト制作技術の習得に挑戦しています。
その過程で作成した練習作品を、動画ファイルとして保存し、公開してみようと思い立ちました。
WPFで制作されたアニメーションから動画ファイルを作成する方法を調べたところ、AVIファイルを作成する下記の公開情報が見つかりました。
     「Saving an animation as an AVI video file」 (以下、[原典]と略)
[原典]にはソースコードへのリンクが張られていますが、2014年秋の時点で、このリンクからソースコードを参照することはできませんでした。
そこで[原典]内に公開されているコードをもとにして何回かの試行を積み重ねた結果、なんとかAVIファイルを作成できるようになりました。

このページでは、[原典]の方法を使ったAVIファイル作成の具体的な例(「DemoAviCreator」)を紹介します。
「DemoAviCreator」は、下の[ダウンロード]の項から、Visual Studio のプロジェクトファイルの形でダウンロードすることが可能です。

また、このサイトでは具体例と同様の手法で作成した動画のサンプルを「ソフト関連Trial−No.109」で公開しています。

 「DemoAviCreator」の構成

開発環境
Visual Studio 2010(C#−WPF、.NET Framework 4 Client Profile)

[MainWindow]の画面構成

緑色のCanvas上に配置されたオレンジ色のRectangleを左右に移動させるアニメーションです。
[Play Animation]ボタン:アニメーションを開始するボタンです。(AVIファイル作成に直接関係するものではありません)
[Stop Animation]ボタン:アニメーションを停止するボタンです。(AVIファイル作成に直接関係するものではありません)
[Create Avi]ボタン:このアニメーションのAVIファイルを作成するボタンです。

[MainWindow]のXAMLコード


  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="*"/>
      <RowDefinition Height="60"/>
    </Grid.RowDefinitions>
    <Grid Grid.Row="0">
      <Canvas x:Name="canvas1" Background="Lime"/>
    </Grid>
    <StackPanel Grid.Row="1" Orientation="Horizontal" Background="#7ED3D3D3">
      <Button Name="btnPlay" Content="Play Animation" Width="140" Height="35" Margin="10,0,0,0"
          Background="White" FontFamily="MS PGothic" FontSize="12pt" FontWeight="Bold"
          Click="btnPlay_Click" />
      <Button Name="btnStop" Content="Stop Animation" Width="140" Height="35" Margin="10,0,0,0"
          Background="White" FontFamily="MS PGothic" FontSize="12pt" FontWeight="Bold"
          Click="btnStop_Click" />
      <Button Name="btnCreate" Content="Create Avi" Width="140" Height="35" Margin="10,0,0,0"
          Background="White" FontFamily="MS PGothic" FontSize="12pt" FontWeight="Bold"
          Click="btnCreate_Click" />
    </StackPanel>
  </Grid>

Rectangle部分の設定は、上記XAMLではなく、C# コードの[InitializeWindow]メソッドの中で行います。

[MainWindow]主要部分のC#コード

 using System;
 using System.Linq;
 using System.Text;
 using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Input;
 using System.Windows.Media;
 using System.Windows.Media.Animation;
 using System.Windows.Media.Imaging;
 using System.Windows.Shapes;
 using AviFile;

 namespace DemoAviCreator
 {
   public partial class MainWindow : Window
   {
     public MainWindow()
     {
       InitializeComponent();
       InitializeWindow();
     }

     AnimationClock _clock;
     Rectangle rect1;

     private void btnCreate_Click(object sender, RoutedEventArgs e)
     {
       // AVIファイルの保存用フルパス名を[GetAviFilePath]メソッド(省略)で取得する
       var filepath = GetAviFilePath();

       if (0 < filepath.Length)
       {
         CreateAndSaveAvi(filepath);
       }
     }

     private void btnPlay_Click(object sender, RoutedEventArgs e)
     {
       _clock.Controller.Begin();
     }

     private void btnStop_Click(object sender, RoutedEventArgs e)
     {
       _clock.Controller.Stop();
     }

     private void CreateAndSaveAvi(string filepath)
     {
       // ここで[原典]の公開コードを使用する
     }

     private void InitializeWindow()
     {
       // rect1の定義と、canvas1への配置
       rect1 = new Rectangle ();
       rect1.Width = 100;
       rect1.Height = 100;
       rect1.Margin = new Thickness (0, 50, 0, 0);
       Canvas.SetLeft(rect1, 20);
       rect1.Fill = Brushes.Orange;
       canvas1.Children.Add(rect1);

       // AnimationClockの設定
       var anim = new DoubleAnimation (20, 370, new Duration (TimeSpan.FromSeconds(2)));
       anim.AutoReverse = true;
       anim.RepeatBehavior = RepeatBehavior.Forever;
       _clock = anim.CreateClock();
       rect1.ApplyAnimationClock(Canvas.LeftProperty, _clock);
       _clock.Controller.Stop();
     }
   }
 }


この方法では、AnimationClockを使用してアニメーション化を行います。

 作成された動画

開始ボタン(右向き三角のボタン)のクリックで、動画が始まります。

       

 ダウンロード

「DemoAviCreator」プロジェクトファイルのダウンロード
なお、「DemoAviCreator」プロジェクトファイルでは、AVIファイル化用クラスライブラリとして Code Projectの「A Simple C# Wrapper for the AviFile Library」 からダウンロードして入手した[AviFile.dll]を使用しています。

 ダウンロードファイルの利用に際してのご注意

ダウンロードしたファイルの利用は、全て利用される方の責任で行っていただきます。
作者は十分な注意を払って本ファイルを作成していますが、もし万一、本ファイルの内容に誤りがあっても、 また、それによってご使用になるパソコンに問題が発生しても、作者は一切責任を負いません。

 ご質問・ご意見・ご感想

ご質問、ご意見、ご感想、バグ等のご連絡は、 こちらへ

トップページへ