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

Synfig チュートリアルを参考に(おおいに簡約し)説明を行ってゆきます。さあ、今回もフラワーアニメーション("【和訳】Synfig チュートリアルーフラワーアニメーション(その1)"の続き)です。


目次

アニメートする幹

単純なイメージを「アニメートする幹」に変えてゆきましょう。キャンバスメニューの「Edit」-「プロパティ」を選択し、「Time」タブをクリックして下さい。次に「End time」を「6s」(6秒)に設定します。

タイムライン拡張(その 1)

タイムライン拡張(その 1)[クリックするとこのウィンドウで拡大]

タイムライン拡張(その 2)

タイムライン拡張(その 2)[クリックするとこのウィンドウで拡大]

タイムライン拡張(その 3)

タイムライン拡張(その 3)[クリックするとこのウィンドウで拡大]

これでワークスペース下部のタイムラインが拡張されたはずです。 次にキーフレームパネルに移り、タイムライン上で「最初」を意味する「0f」をクリックしましょう(多少分かり辛いですが)。

キーの追加(その 1)

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

そしてキーフレームパネル左下部に位置する「+」(プラス)ボタンを押してキーを追加します。 キーフレームはシーンごとの全ての要素のプロパティ(サークルのサイズ、カラー等)を記憶しています。

キーの追加(その 2)

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

もう一度タイムライン上の「4.5s」を示す部分をクリックしましょう。そしてワークスペース右下部に位置する緑色の点をクリックし、赤色に変更します。これで「アニメートエディットモード」になりました。

タイムラインの指定(その 1)

タイムラインの指定(その 1)[クリックするとこのウィンドウで拡大]

タイムラインの指定(その 2)

タイムラインの指定(その 2)[クリックするとこのウィンドウで拡大]

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

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

今度はノーマルツールを用いて緑の芽の部分を選択し、幹の頂点を上に移動します。その他好みに応じて頂点を曲げるなどして遊んで見ましょう。

幹の作成(その 1)

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

幹の作成(その 2)

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

幹の作成(その 3)

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

タイムラインは「4.5s」のままで幹の線上(3つの頂点のうち、上と右の間)を右クリックし、「Insert Item(smart)」をクリックしましょう。次にもう一つの側(上と左の間の線上)にも「Insert Item(smart)」で頂点を作成しましょう。

頂点の追加(その 1)

頂点の追加(その 1)[クリックするとこのウィンドウで拡大]

頂点の追加(その 2)

頂点の追加(その 2)[クリックするとこのウィンドウで拡大]

頂点の追加(その 3)

頂点の追加(その 3)[クリックするとこのウィンドウで拡大]

そして今作成した2つの頂点にも「Split Tangent」を適用します。これで「花のつぼみ」の形に見えてきたでしょうか?(形は悪くても構いません)

「Split Tangents」の適用(その 1)

「Split Tangents」の適用(その 1)[クリックするとこのウィンドウで拡大]

「Split Tangents」の適用(その 2)

「Split Tangents」の適用(その 2)[クリックするとこのウィンドウで拡大]

頂点の調整(その 1)

頂点の調整(その 1)[クリックするとこのウィンドウで拡大]

頂点の調整(その 2)

頂点の調整(その 2)[クリックするとこのウィンドウで拡大]

頂点の調整(その 3)

頂点の調整(その 3)[クリックするとこのウィンドウで拡大]

この状態で「2s」をクリックすると「きゃしゃな」つぼみの形となっているのがわかるはずです。幹が小さく、つぼみのドックスは見えないかもしれません。

「2s」の状態

「2s」の状態[クリックするとこのウィンドウで拡大]

これではやはり奇妙になってしまうので「3.5s」からつぼみが現れ、「4.5s」で最大サイズになるように調整してゆきましょう。

それではタイムライン上の「3.5s」をクリックし、パラムズダイアログに移りましょう。パラムズダイアログ中のパラムズパネルに表示された各パラメータはタイムライン上の列と一致しています。

タイムラインの同期

タイムラインの同期[クリックするとこのウィンドウで拡大]

パラムズパネルの一番最後に位置(Vertices)するのが頂点のリストになります。

「Vertices」の意味(その 1)

「Vertices」の意味(その 1)[クリックするとこのウィンドウで拡大]

小さな矢印をクリックして中身を覗いてみましょう。頂点の全てが表示されているはずです。同じように「4s」で頂点を修正した場合そのイメージがタイムライン上に緑の点で記録されます。

タイムライン上には大きなミドリの点(「Waypoint」(ウェイポイント))が現れます。これは頂点ごとの「0f」における状態の記録(イメージ)を意味します。

「Vertex」の表示

「Vertex」の表示[クリックするとこのウィンドウで拡大]

つぼみを作る為に後から追加した(最初から存在しない)2つの頂点には「DYN」(ダイナミック)とマークされています。

「DYN」マーク

「DYN」マーク[クリックするとこのウィンドウで拡大]

この2つの頂点を右クリックし、「Mark Activepoint as Off」を選択してみましょう。パラムズパネルの緑の点がグレイに変わったことに気づくはずです。これはつぼみが影響しない幹を表します。

「Mark Activepoint as Off」

「Mark Activepoint as Off」[クリックするとこのウィンドウで拡大]

例えば、「2s」又は「3s」をクリックして見てください、つぼみの形は見えないはずです。

実施前の「2s」

実施前の「2s」[クリックするとこのウィンドウで拡大]

実施後の「2s」

実施後の「2s」[クリックするとこのウィンドウで拡大]

実施前の「3s」

実施前の「3s」[クリックするとこのウィンドウで拡大]

実施後の「3s」

実施後の「3s」[クリックするとこのウィンドウで拡大]

このつぼみは「3.5s」を経過した後に見えるようになります。

実施跡の「3s 12f」

実施跡の「3s 12f」[クリックするとこのウィンドウで拡大]

幹の形が 「0s」から「4s」の間で成長しているようにはとても思えない場合、「アニメートエディットモード」になっていることを確認しタイムラインのそれぞれで幹の形を引っ張ってみて下さい。

つぼみの調整

つぼみの調整[クリックするとこのウィンドウで拡大]

「アニメートする幹」としてはこれで終了です。ただ花弁としてはまだ不足しています。一度「File」-「Preview」からプレビューを確認してみるとよいでしょう。

プレビュー(その 1)

プレビュー(その 1)[クリックするとこのウィンドウで拡大]

プレビュー(その 2)

プレビュー(その 2)[クリックするとこのウィンドウで拡大]

プレビュー(その 3)

プレビュー(その 3)[クリックするとこのウィンドウで拡大]

ちなみにプレビューとしてはきれいにみえなくてもレンダリングを施すと高画質になります。高画質のプレビューを見たい場合は「Zoom」や「Frames per second」の値を高くしてみて下さい。

高画質プレビュー(その 1)

高画質プレビュー(その 1)[クリックするとこのウィンドウで拡大]

高画質プレビュー(その 2)

高画質プレビュー(その 2)[クリックするとこのウィンドウで拡大]

最後に

いかがでしょうか?細かい説明が多くなってきましたが画像を見ずに実践してみるのもよい練習になります。本シリーズはあと2回続きますので不明点を残さないようにすることをお勧めします。

リソース

まだフラワーアニメーション自体は完成していませんが現時点の Synfig プロジェクトファイルを掲載します。

参考 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)"

コメントを残す

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