【和訳】Synfig チュートリアルーアニメーションの基礎(その1)

Synfig チュートリアルを参考に(おおいに簡約し)説明を行ってゆきます。今回はアニメーションの作成方法です。


まずは先に今回の完成イメージをご覧になって下さい。

完成イメージ

完成イメージ[クリックするとこのウィンドウで拡大]

(クリックすると動き出します)

今回はこのような動画を作成してゆきます。

目次

紹介

Synfig を利用してアニメーションを製作するのは非常に簡単です。アニメーションの製作は線(ドロー)を変更してゆくだけです。

必要なのはオブジェクトの最初と最後において、どのように状態が変更されているか定義を行うことです。最初と最後の間の細かいステップは Synfig が自動で作成します。

まずは簡単な例で説明しましょう。まずは小さな一つの光を思い浮かべて下さい。その光は左から右へ、また最後に左へ移動してゆきます。状態を整理すると次のようになります。

  1. サークルが左に位置している
  2. サークルが右に位置している
  3. サークルが左に(戻って)位置している

さあ、つくってみましょう

ワークスペースのセットアップ

まずは Synfig Studio を開始し、新しいファイルを作ります。通常は Synfig を起動すると既に作成された状態になりますが、「File」-「新規(N)」をクリックし、新しい Synfig を作成しましょう。

起動直後の Synfig Studio

起動直後の Synfig Studio[クリックするとこのウィンドウで拡大]

新しい Synfig の作成(その 1)

新しい Synfig の作成(その 1)

[クリックするとこのウィンドウで拡大]

新しい Synfig の作成(その 2)

新しい Synfig の作成(その 2)

[クリックするとこのウィンドウで拡大]

次に「Edit」-「プロパティ」をクリックして下さい。プロパティダイアログが表示されるはずです。この画面で「Name」(タイトル)、「Description」(概要)を入力し、「適用(A)」をクリックして反映させましょう。

プロパティダイアログの表示

プロパティダイアログの表示[クリックするとこのウィンドウで拡大]

タイトル・概要の入力

タイトル・概要の入力[クリックするとこのウィンドウで拡大]

今回はこのプロパティダイアログで「End Time」(完了時間)を変更します。この値を 2秒(2 second)にしましょう。

完了時間の修正

完了時間の修正[クリックするとこのウィンドウで拡大]

そして「Rectangle Tool」(長方形ツール)を使って背景を全て黒にしましょう。この時、キャンバス全てを黒で埋め尽くす必要はありません。

背景の作成

背景の作成[クリックするとこのウィンドウで拡大]

今度はカラーセレクタで赤を選択し、「Circle Tool」(サークルツール)を使ってサークルを描いてみましょう。この時も後で調整は可能ですので完璧なものでなくても構いません。

カラーの選択

カラーの選択[クリックするとこのウィンドウで拡大]

円(光)の作成

円(光)の作成[クリックするとこのウィンドウで拡大]

「Normal Tool」(ノーマルツール)を使ってサークルをクリックしましょう。すると緑のドットであるドックスが見えてくるでしょう。

このドックスをマウスで移動することでサークルも移動します。ただ、今は特に実施する必要はありません。移動した場合、「Ctrl+z」を入力し元に戻しておきましょう。

サークルの移動(その 1)

サークルの移動(その 1)[クリックするとこのウィンドウで拡大]

サークルの移動(その 2)

サークルの移動(その 2)[クリックするとこのウィンドウで拡大]

これでオブジェクトを描き、移動する最初のステップは完了(「サークルが左に位置している」まで)です。ただ、この時点ではまだアニメーションとしては不十分です。

ムーブメントの追加

最初にプロパティダイアログで完了時間を 2秒に設定しました。その為、キャンバスウィンドウ上のキャパシティ(許容能力)が拡大しました。

許容時間の変化

許容時間の変化[クリックするとこのウィンドウで拡大]

キャンバスウィンドウの下にはグレイのタイムスライダがあります。このどこかをクリックすると小さなオレンジのインジケータ(指示俸)が現れます。

ただ、これをクリックしても何の変化もありません。なぜならまだ「アニメートエディットモード」ではない為です。

時間の指定

時間の指定[クリックするとこのウィンドウで拡大]

グレイのタイムスライダの右に位置する緑の点をクリックすることで「アニメートエディットモード」になります(この時、緑の点は赤に変わります)。同時にキャンバス全体もオレンジのアウトラインで囲われます。

「アニメートエディットモード」開始

「アニメートエディットモード」開始[クリックするとこのウィンドウで拡大]

アニメートエディットモード」の状態でオブジェクトの線を変える等の(状態の)変更を行ってもこの時点のオブジェクトにしか影響しませんので注意して下さい。

前に、3つのステップとステージについて取り上げました。これらは「キーフレーム」を使って表現することができます。キーフレームはビデオ編集ソフト等でも用意されていますね。ただ同じではありません。キーフレームはオブジェクトに変化があった時のイメージを表現しています。

キーフレームタブをクリックし、キーフレームを編集しましょう。キーフレームタブはパラムズダイアログ上の小さな鍵型のタブになります。次にプラス(+)のマークをクリックしてみましょう。「0f 0f」のエントリが表示されたはずです(これは「0フレームから 0フレームまで」を意味します)。

キーの追加

キーの追加[クリックするとこのウィンドウで拡大]

この操作がうまくいかない場合は一度ファイルを保存後、閉じて再度開始して下さい。

「0f 0f」のエントリが表示されたらタイムスライダを使って「1s 0f」(1秒の 0フレーム)をクリックしましょう。小さなオレンジのインジケータが移動したはずです。

時間の指定

時間の指定[クリックするとこのウィンドウで拡大]

インジケータが移動したら再度プラス(+)のマークをクリックしキーフレームを追加しましょう。同じようにしてタイムスライダのインジケータを「2s 0f」に移動しキーフレームを追加してみましょう。

キーの追加

キーの追加[クリックするとこのウィンドウで拡大]

ノート

ここから「2s 0f」の追加方法を図示しますが、なるべく自分で試してから確認するようにすることをオススメします。

最後のキーの追加(その 1)

最後のキーの追加(その 1)[クリックするとこのウィンドウで拡大]

最後のキーの追加(その 2)

最後のキーの追加(その 2)[クリックするとこのウィンドウで拡大]

ここまでで3つのキーフレームのエントリが表示されているはずです。

最後に

まだ、この時点ではアニメーションとはなりませんが、キーフレームについてなんとなくのイメージができていれば幸いです。このまま次に進みましょう。

参考 URL


関連記事

無料シリーズ

  1. "無料で動画をつくってみよう(Synfig 編)"
  2. "無料で動画をつくってみよう(pencil 編)"
  3. "無料で音源をつくってみよう(Audacity 編)"
  4. "無料で動画をつくってみよう(VirtualDubMod 編)"
  5. "無料でシナリオを書いてみよう(celtx 編)"
  6. "無料で動画をつくってみよう(WinFF 編)"
  7. "無料で画像をつくってみよう(LEGO Digital Designer 編)"
  8. "無料で音源をつくってみよう(mp3DirectCut 編)"
  9. "無料で音源をつくってみよう(Audio Joiner 編)"
  10. "無料で動画をつくってみよう(Pivot Stickfigure Animator 編)"
  11. "無料で動画をつくってみよう(Avidemux 編)"

Synfig のご紹介

  1. "無料で動画をつくってみよう(Synfig 編)"
  2. "インストールの方法(Synfig)"

Synfig 初級

  1. "【和訳】Synfig チュートリアルーはじめてみよう(その1)"
  2. "【和訳】Synfig チュートリアルーはじめてみよう(その2)"
  3. "【和訳】Synfig チュートリアルーはじめてみよう(その3)"
  4. "【和訳】Synfig チュートリアルーアニメーションの基礎(その1)"(本記事)
  5. "【和訳】Synfig チュートリアルーアニメーションの基礎(その2)"
  6. "【和訳】Synfig チュートリアルーアニメーションの基礎(その3)"

Synfig 中級

  1. "【和訳】Synfig チュートリアルーフラワーアニメーション(その1)"
  2. "【和訳】Synfig チュートリアルーフラワーアニメーション(その2)"
  3. "【和訳】Synfig チュートリアルーフラワーアニメーション(その3)"
  4. "【和訳】Synfig チュートリアルーフラワーアニメーション(その4)"

Synfig Tips

  1. "起動しよう(Synfig)"
  2. "2つ以上 CPU のある Windows で Synfig を使う"
  3. "オブジェクトを拡大・縮小する(Synfig)"
  4. "オブジェクトをインテリジェントに拡大・縮小する(Synfig)"
  5. "オブジェクトを移動する(Synfig)"
  6. "オブジェクトをインテリジェントに移動する(Synfig)"
  7. "オブジェクトを反転する(Synfig)"
  8. "オブジェクトをインテリジェントに反転する(Synfig)"
  9. "簡単に CPU を 1つに制限する(Synfig)"
  10. "オブジェクトを回転する(Synfig)"
  11. "Inkscape 等で使われる svg 形式の画像を読み込む(Synfig)"
  12. "プレビューを表示する(Synfig)"
  13. "Synfig サンプル集(その1)(Synfig)"
  14. "Synfig サンプル集(その2)(Synfig)"
  15. "レイヤを使う(Synfig)"
  16. "オブジェクトを見えたり見えなくしたりする(Synfig)"
  17. "グループを使う(その1)(Synfig)"
  18. "グループを使う(その2)(Synfig)"
  19. "アウトラインをつける(その1)(Synfig)"
  20. "アウトラインをつける(その2)(Synfig)"
  21. "画像を読み込む(Synfig)"

Pencil 初級

  1. "【和訳】Pencil ユーザマニュアル(その1)"
  2. "【和訳】Pencil ユーザマニュアル(その2)"
  3. "【和訳】Pencil ユーザマニュアル(その3)"
  4. "【和訳】Pencil ユーザマニュアル(その4)"
  5. "【和訳】Pencil ユーザマニュアル(その5)"
  6. "【和訳】Pencil ユーザマニュアル(その6)"
  7. "【和訳】Pencil ユーザマニュアル(その7)"
  8. "【和訳】Pencil ユーザマニュアル(その8)"

VirtualDubMod Tips

  1. "動画の不要な部分を削除(カット)する(VirtualDubMod)"
  2. "動画再生中に静止画を表示させる(VirtualDubMod)"
  3. "動画の再生速度を変える(VirutalDubMod)"
  4. "動画の不要な部分を塗りつぶす(VirtualDubMod)"
  5. "動画を回転する(VirtualDubMod)"
  6. "動画をグレイスケール化する(VirtualDubMod)"

MediaCoder Tips

  1. "多様な動画形式を mp4(携帯向け動画)に変換する(MediaCoder)"

Avidemux Tips

  1. "動画の再生速度を変える(Avidemux)"
  2. "動画を回転する(Avidemux)"
  3. "動画の不要な部分を削除(カット)する(Avidemux)"
  4. "動画にフェード効果をつける(Avidemux)"
  5. "動画にぐるぐる回す効果をつける(Avidemux)"
  6. "動画内の上下の線を削除する(Avidemux)"
  7. "動画を逆に再生する(Avidemux)"
  8. "mpeg 動画から音声を消す(Avidemux)"
  9. "動画で使われている音源を変える(Avidemux)"

Pivot Stickfigure Animator Tips

  1. "Pivot Stickfigure Animator をつかってみる"

trakAxPC Tips

  1. "スライドショーをつくる(trakAxPC)"
  2. "動画に音源をミックスする(trakAxPC)"

Free Screen Recorder Tips

  1. "スクリーンキャプチャを撮る(Free Screen Recorder)"

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です