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

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


目次


花弁を隠す

ノート

このパートはもっと簡単にできないものかと検討している。その為、この章を突然更新するかもしれない

では最初から最大サイズで登場している花弁を「4s」経過後に現れ、「5s」の時点で最大サイズになるように変更しましょう。

まずワークスペース右下部の緑の点をクリックし「アニメートエディットモード」に切り替えます。

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

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

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

次にタイムライン上で「5s」をクリックし、オレンジのインジケータが移動したのを確認します。

「5s」への移動

「5s」への移動[クリックするとこのウィンドウで拡大]

そしてキーフレームパネル上で、「+」をクリックし、新しいキーを追加します。フラワーは「5s」~「6s」の間が動かないことを確認する為(ジャンプ用)にリンクを作成しておきます。

キーの追加

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

次に「4s」をクリックし、レイヤパネル上で花弁レイヤを選択して下さい。「Ctrl」クリックを使ってください)。

花弁レイヤの選択

花弁レイヤの選択

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

それから「Ctrl+A」を使って花弁の頂点全てを選択します。

頂点の選択

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

次に「Scale Tool」を用いて花弁を小さくした後移動し、つぼみが現れた時にその後ろに隠れるようにして下さい。

花弁の調整(その 1)

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

花弁の調整(その 2)

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

今度は「4s」~「5s」の間で、花弁が突然現れ、咲くようにします。現状では最初から「4s」までずっと表示された状態です。「0s」から「4s」までの間、この部分を次に示すように変更する必要があります。

(1) 花弁を小さくし、隠れているようにサイズを変更する
(2) 花弁を見えなくする

今回は、(2)の解決策を使います。作業を簡単にするにはまず花弁レイヤを「Encapsulate」してインラインキャンバスにする必要があります。(「Encapsulate」は Windows で言うフォルダと似ています)

それにはまずレイヤパネル上で花弁レイヤ全てを右クリックし、「Encapsulate」を選択します。ちなみにレイヤは分かりやすいようにリネームすることが可能です。

「Encapsulate」

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

次にレイヤパネル内「inline canvas」の花弁を選択し、パラムズタブから最初のキーフレームにジャンプします。そこで「Amount」の値を「0」(非表示)に設定します。

「0s」への移動

「0s」への移動[クリックするとこのウィンドウで拡大]

これで花弁はこのキーフレームの時点で見ることができなくなります。また
、2つの「Waypoint」が「Amount」パラメータと同じ行に追加されたことも確認して下さい。一つは「0s」に、もうひとつは「5s」に追加されたはずです。

花弁の非表示化

花弁の非表示化[クリックするとこのウィンドウで拡大]

次に「5s」の「Waypoint」を「4s」にドラッグして移動してみましょう。花弁が「4s 1f」では不透明になったことが分かるでしょう。

「Waypoint」の移動(その 1)

「Waypoint」の移動(その 1)

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

「Waypoint」の移動(その 2)

「Waypoint」の移動(その 2)

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

まだ問題が一つ残っています。「0s」から「4s」の間、花弁はゆっくりと透明になってしまいます。この問題は「Amount」の「interpolation method」を変更することで解決できます。

まず「Amount」の「0s」の「Waypoint」上で右クリックし、「Waypoint」の
編集に入ります。

「Waypoint」の編集(その 1)

「Waypoint」の編集(その 1)

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

編集ダイアログが現れ、「In」(入り口)と「Out」(出口)の「interpolation」を修正することができるようになります。

まず「Out」の方は「Constant」を選択して下さい。これは「Amount」の値が
他の「Waypoint」が現れるまで永続的に残ることを意味します。

「0f」から「4s」までの「Amount」は「0」(非表示)ですが「4s」で突然「1」(表示)に変更し、花弁が出現したよう見えます。

「Waypoint」の編集(その 2)

「Waypoint」の編集(その 2)

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

なお「TCB Smooth」の状態の時「Waypoint」は緑ですが、編集後は赤に変わります。

「Waypoint」の編集(その 3)

「Waypoint」の編集(その 3)

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

さあ、全て完了しました。つぼみは「4s 5f」までの間に成長し、残り「1s 5f」の間、成長が止まります。花弁の方はと言うと「4s」までの間は隠れていて、「4s」~「5s」の間で急成長を遂げます。そして「1s 5f」は成長が止まります。

フラワーアニメーション

フラワーアニメーション(gif)(873KB)

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

最後に「File」-「Render」をクリックしアニメーションをレンダリングして下さい。この時、どんなフォーマットでも構いません。なお、この時「Use current frame」にチェックが入っていないことも確認して下さい(キーフレーム一つ分の画像しか出力されません)

レンダリング(その 1)

レンダリング(その 1)[クリックするとこのウィンドウで拡大]

レンダリング(その 2)

レンダリング(その 2)[クリックするとこのウィンドウで拡大]

最後に

ちょっと幹が太くなってしまった為、多少不恰好になってしまいました。今回は本シリーズで掲載していった画像をそのまま使ってレンダリングした為、調整ができませんでしたが、実際は幹を細くする等して調整します("【和訳】Synfig チュートリアルーフラワーアニメーション(その1)" の最初のイメージの方は修正してしまいました)。

とにかくこれで中級レベルまで行きました。とにかくアニメーションをどんどん作成し、慣れていって下さい。

リソース

まだフラワーアニメーション自体は完成していませんが現時点の 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)"

コメントを残す

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