Synfig で他のオブジェクトにも影響を与えながらズームアップ（拡大）・ズームダウン（縮小）する方法を説明します。
結果イメージ 実施前のオブジェクト
拡大後のオブジェクト
縮小後のオブジェクト
オブジェクトをインテリジェントに拡大・縮小する 次の条件が整っていない場合はそれぞれのページを参考に準備して下さい。
Synfig がインストールされていない → インストールの方法synfig へ まずは Synfig を起動します。起動方法は起動しようsynfigを参考にして下さい。 続いて画像単位に一気に説明してゆきます。 元画像の作成[クリックするとこのウィンドウで拡大]
オブジェクトの選択[クリックするとこのウィンドウで拡大]
次に「拡大・縮小時に影響を与える頂点」を選択します。この時に選択していない頂点が影響することはありません。
頂点の選択[クリックするとこのウィンドウで拡大]
頂点の移動[クリックするとこのウィンドウで拡大]
結果の確認[クリックするとこのウィンドウで拡大]
オブジェクトの選択[クリックするとこのウィンドウで拡大]
頂点の選択[クリックするとこのウィンドウで拡大]
頂点の移動[クリックするとこのウィンドウで拡大]
結果の確認[クリックするとこのウィンドウで拡大]
関連記事
Read more →
Synfig で他のオブジェクトにも影響を与えながら移動する方法を説明します。
結果イメージ 実施前のオブジェクト
移動後のオブジェクト
オブジェクトをインテリジェントに移動する 次の条件が整っていない場合はそれぞれのページを参考に準備して下さい。
Synfig がインストールされていない → インストールの方法synfig へ まずは Synfig を起動します。起動方法は起動しようsynfigを参考にして下さい。 続いて画像単位に一気に説明してゆきます。 元画像の作成[クリックするとこのウィンドウで拡大]
オブジェクトの選択[クリックするとこのウィンドウで拡大]
次に「移動時に影響を与える頂点」を選択します。この時に選択していない頂点が移動することはありません。
頂点の選択[クリックするとこのウィンドウで拡大]
頂点の移動[クリックするとこのウィンドウで拡大]
結果の確認[クリックするとこのウィンドウで拡大]
関連記事
Read more →
Synfig でオブジェクトを移動する方法を説明します。
結果イメージ 実施前のオブジェクト
拡大後のオブジェクト
オブジェクトを移動する 次の条件が整っていない場合はそれぞれのページを参考に準備して下さい。
Synfig がインストールされていない → インストールの方法synfig へ まずは Synfig を起動します。起動方法は起動しようsynfigを参考にして下さい。 続いて画像単位に一気に説明してゆきます。 元画像の作成[クリックするとこのウィンドウで拡大]
オブジェクトの選択[クリックするとこのウィンドウで拡大]
オブジェクトの移動[クリックするとこのウィンドウで拡大]
結果の確認[クリックするとこのウィンドウで拡大]
今回は一般的なオブジェクトの移動方法でした。この移動をさらにインテリジェントに移動する方法もオブジェクトをインテリジェントに移動するsynfigで説明していますのでぜひ参考にして下さい 。
オブジェクトをインテリジェントに移動するsynfig 関連記事
Read more →
Synfig でオブジェクトをズームアップ（拡大）・ズームダウン（縮小）する方法を説明します。
結果イメージ 実施前のオブジェクト
拡大後のオブジェクト
縮小後のオブジェクト
オブジェクトを拡大・縮小する 次の条件が整っていない場合はそれぞれのページを参考に準備して下さい。
Synfig がインストールされていない → インストールの方法synfig へ まずは Synfig を起動します。起動方法は起動しようsynfigを参考にして下さい。 続いて画像単位に一気に説明してゆきます。 元画像の作成[クリックするとこのウィンドウで拡大]
オブジェクトの選択[クリックするとこのウィンドウで拡大]
次は同じような作業に見えますが、実際には「オブジェクトの中の頂点」を選択しています。
頂点の選択[クリックするとこのウィンドウで拡大]
選択後のイメージ[クリックするとこのウィンドウで拡大]
オブジェクトの拡大（その 1）
[クリックするとこのウィンドウで拡大]
オブジェクトの拡大（その 2）
[クリックするとこのウィンドウで拡大]
オブジェクトの縮小（その 1）
[クリックするとこのウィンドウで拡大]
オブジェクトの縮小（その 2）
[クリックするとこのウィンドウで拡大]
今回は一般的なオブジェクトの拡大・縮小でした。さらにインテリジェントに拡大・縮小する方法もオブジェクトをインテリジェントに拡大縮小するsynfigで説明していますのでぜひ参考にして下さい。
オブジェクトをインテリジェントに拡大縮小するsynfig 関連記事
Read more →
Synfig を起動します。同時に簡単な画面の説明も行います。画像ベースで一気に行きます。
Synfig の起動[クリックするとこのウィンドウで拡大]
起動直後の Synfig[クリックするとこのウィンドウで拡大]
Synfig の画面（その 1）[クリックするとこのウィンドウで拡大]
Synfig の画面（その 2）[クリックするとこのウィンドウで拡大]
現状、Windows Core2Duo 等のマルチ CPU 環境では Synfig は正常に動作しません。その場合2つ以上-cpu-のある-windows-で-synfig-を使うを参照し、この時点で CPU を 1つしか利用しないように制限しましょう。
関連記事
Read more →
Synfig チュートリアルを参考に（おおいに簡約し）説明を行ってゆきます。さあ、今回もフラワーアニメーション（和訳synfig-チュートリアルーフラワーアニメーションその３の続き）です。
google_ad_client = “pub-9752043470362559”; /* 336x280, 作成済み 08/07/21( */ google_ad_slot = “5621791976”; google_ad_width = 336; google_ad_height = 280; //–> 花弁を隠す ノート
このパートはもっと簡単にできないものかと検討している。その為、この章を突然更新するかもしれない
では最初から最大サイズで登場している花弁を「4s」経過後に現れ、「5s」の時点で最大サイズになるように変更しましょう。
まずワークスペース右下部の緑の点をクリックし「アニメートエディットモード」に切り替えます。
「アニメートエディットモード」
[クリックするとこのウィンドウで拡大]
次にタイムライン上で「5s」をクリックし、オレンジのインジケータが移動したのを確認します。
「5s」への移動[クリックするとこのウィンドウで拡大]
そしてキーフレームパネル上で、「＋」をクリックし、新しいキーを追加します。フラワーは「5s」～「6s」の間が動かないことを確認する為（ジャンプ用）に リンクを作成しておきます。
キーの追加[クリックするとこのウィンドウで拡大]
次に「4s」をクリックし、レイヤパネル上で花弁レイヤを選択して下さい。「Ctrl」クリックを使ってください）。
花弁レイヤの選択
[クリックするとこのウィンドウで拡大]
それから「Ctrl＋A」を使って花弁の頂点全てを選択します。
頂点の選択[クリックするとこのウィンドウで拡大]
次に「Scale Tool」を用いて花弁を小さくした後移動し、つぼみが現れた時にその後ろに隠れるようにして下さい。
花弁の調整（その 1）[クリックするとこのウィンドウで拡大]
花弁の調整（その 2）[クリックするとこのウィンドウで拡大]
今度は「4s」～「5s」の間で、花弁が突然現れ、咲くようにします。現状では最初から「4s」までずっと表示された状態です。「0s」から「4s」までの間、この部 分を次に示すように変更する必要があります。 (1) 花弁を小さくし、隠れているようにサイズを変更する (2) 花弁を見えなくする 今回は、(2)の解決策を使 います。作業を簡単にするにはまず花弁レイヤを「Encapsulate」してインラインキャンバスにする必要があります。（「*Encapsulate *」は Windows で言うフォルダと似ています） それにはまずレイヤパネル上で花弁レイヤ全てを右クリックし、「Encapsulate」を選択しま す。ちなみにレイヤは分かりやすいようにリネームすることが可能です。
「Encapsulate」[クリックするとこのウィンドウで拡大]
次にレイヤパネル内「inline canvas」の花弁を選択し、パラムズタブから最初のキーフレームにジャンプします。そこで「Amount」の値を「0」（非表示）に設定します。
「0s」への移動[クリックするとこのウィンドウで拡大]
これで花弁はこのキーフレームの時点で見ることができなくなります。また 、２つの「Waypoint」が「Amount」パラメータと同じ行に追加されたことも確認 して下さい。一つは「0s」に、もうひとつは「5s」に追加されたはずです。
花弁の非表示化[クリックするとこのウィンドウで拡大]
次に「5s」の「Waypoint」を「4s」にドラッグして移動してみましょう。花弁が「4s 1f」では不透明になったことが分かるでしょう。
「Waypoint」の移動（その 1）
[クリックするとこのウィンドウで拡大]
「Waypoint」の移動（その 2）
Read more →
Synfig チュートリアルを参考に（おおいに簡約し）説明を行ってゆきます。さあ、今回もフラワーアニメーション（和訳synfig-チュートリアルーフラワーアニメーションその２の続き）です。
目次 花弁の追加 さあ、ワークスペース右下部に位置する赤い点をクリックし、「アニメートエディットモード」を一度閉じましょう。
「アニメートエディットモード」終了
[クリックするとこのウィンドウで拡大]
そしてワークスペース下部のタイムライン上で「5s」をクリックした後、カラーセレクタからピンクを選択し、「BLine Tool」を使って花弁をつくってみましょう。
花弁の作成（その 1）[クリックするとこのウィンドウで拡大]
花弁の作成（その 2）[クリックするとこのウィンドウで拡大]
花弁の作成（その 3）[クリックするとこのウィンドウで拡大]
花弁の作成（その 4）[クリックするとこのウィンドウで拡大]
花弁の作成（その 5）[クリックするとこのウィンドウで拡大]
花弁の作成（その 6）[クリックするとこのウィンドウで拡大]
花弁の作成（その 7）[クリックするとこのウィンドウで拡大]
花弁の作成（その 8）[クリックするとこのウィンドウで拡大]
また簡単にオブジェクトを移動するのに役立つ緑のドックがキャンバス中央にしていることがわかるでしょう。
緑の点[クリックするとこのウィンドウで拡大]
次に「Normal Tool」になって花弁の頂点全てを「Ctrl＋A」で選択し、緑のドックに近づけてみましょう。
花弁の調整（その 1）[クリックするとこのウィンドウで拡大]
花弁の調整（その 2）[クリックするとこのウィンドウで拡大]
緑のドックをドラックしつぼみの一番上の頂点に近づけてゆきます。必要ならわずかに花弁を引っ張る等して見て下さい。また、レイヤパネルで花弁レイヤを選択し、幹レイ ヤの下に移動して下さい。
花弁の調整（その 3）[クリックするとこのウィンドウで拡大]
花弁の調整（その 4）[クリックするとこのウィンドウで拡大]
花弁の調整（その 5）[クリックするとこのウィンドウで拡大]
花弁の調整（その 6）[クリックするとこのウィンドウで拡大]
次に花弁をクリックし、「Ctrl」を押しながら幹をクリックして下さい。これで２つのオブジェクトが選択されました。
２つのオブジェクトの選択[クリックするとこのウィンドウで拡大]
幹の一番上の頂点をクリックし花弁の緑のドックを「Ctrl」クリックして下さい。選択された時、２つのオブジェクトは明るい色に変わります。それから幹の一番上の頂 点で右クリックから「link」を選択して下さい。花弁は緑のドックが幹の頂点にくっついたようにわずかに移動します。
リンキング（その 1）[クリックするとこのウィンドウで拡大]
リンキング（その 2）[クリックするとこのウィンドウで拡大]
これで花弁と幹の一番上はリンクしています。例えば、幹の頂点が移動した時、花弁もまた移動します。もし花弁の緑のドックが移動したのであれば、幹の一番上も移動しま す。ただ、今はそうしないでおいて下さい。 レイヤパネルで最新の花弁レイヤを選択し、パネル下部に位置するボタン群の内、左から３つ目のボタンを押してこの花弁レイヤを複製します。
花弁の複製（その 1）[クリックするとこのウィンドウで拡大]
キャンバス上で、「Ctrl＋A」を押して複製された花弁の全頂点を選択した後、花弁が重ならなくなるまで移動して下さい。またこの時緑のドックを移動せずオレンジの みを移動して下さい。このことを数回繰り返しつぼみの周りを花弁が覆うようなイメージにしてみて下さい。
花弁を広げる[クリックするとこのウィンドウで拡大]
花弁の複製（その 2）[クリックするとこのウィンドウで拡大]
花弁の複製（その 3）[クリックするとこのウィンドウで拡大]
花弁の複製（その 4）[クリックするとこのウィンドウで拡大]
なお、複製した花弁は幹とリンクしていることにも注意して下さい。最初のキーフレームにもどれば花弁が見える状態か否か分かるでしょう。ただ、それは最終目標ではあり ません。期待しているのは花弁が現れ、花がほぼ最後の地点で成長しているように見えることです。
最初のキーにおける花弁[クリックするとこのウィンドウで拡大]
最後に 今回も和訳synfig-チュートリアルーフラワーアニメーションその２同様あえて多くの画像を掲載しています。もちろん全てを確認する必要はありませんので必要な部分のみさらって下さい。次回で最後となり ます。
Read more →
Synfig チュートリアルを参考に（おおいに簡約し）説明を行ってゆきます。さあ、今回もフラワーアニメーション（和訳synfig-チュートリアルーフラワーアニメーションその１の続き）です。
目次 アニメートする幹 単純なイメージを「アニメートする幹」に変えてゆきましょう。キャンバスメニューの「Edit」－「プロパティ」を選択し、「Time」タブをクリックして下 さい。次に「End time」を「6s」（6秒）に設定します。
タイムライン拡張（その 1）[クリックするとこのウィンドウで拡大]
タイムライン拡張（その 2）[クリックするとこのウィンドウで拡大]
タイムライン拡張（その 3）[クリックするとこのウィンドウで拡大]
これでワークスペース下部のタイムラインが拡張されたはずです。 次にキーフレームパネルに移り、タイムライン上で「最初」を意味する「0f」をクリックしましょう（多少分かり辛いですが）。
キーの追加（その 1）[クリックするとこのウィンドウで拡大]
そしてキーフレームパネル左下部に位置する「＋」（プラス）ボタンを押してキーを追加します。 キーフレームはシーンごとの全ての要素のプロパティ（サークルのサイズ、カラー等）を記憶しています。
キーの追加（その 2）[クリックするとこのウィンドウで拡大]
もう一度タイムライン上の「4.5s」を示す部分をクリックしましょう。そしてワークスペース右下部に位置する緑色の点をクリックし、赤色に変更します。これで「アニ メートエディットモード」になりました。
タイムラインの指定（その 1）[クリックするとこのウィンドウで拡大]
タイムラインの指定（その 2）[クリックするとこのウィンドウで拡大]
アニメートエディットモード開始[クリックするとこのウィンドウで拡大]
今度はノーマルツールを用いて緑の芽の部分を選択し、幹の頂点を上に移動します。その他好みに応じて頂点を曲げるなどして遊んで見ましょう。
幹の作成（その 1）[クリックするとこのウィンドウで拡大]
幹の作成（その 2）[クリックするとこのウィンドウで拡大]
幹の作成（その 3）[クリックするとこのウィンドウで拡大]
タイムラインは「4.5s」のままで幹の線上（３つの頂点のうち、上と右の間）を右クリックし、「Insert Item(smart)」をクリックしましょう。次にもう一つの側（上と左の間の線上）にも「Insert Item(smart)」で頂点を作成しましょう。
頂点の追加（その 1）[クリックするとこのウィンドウで拡大]
頂点の追加（その 2）[クリックするとこのウィンドウで拡大]
頂点の追加（その 3）[クリックするとこのウィンドウで拡大]
そして今作成した２つの頂点にも「Split Tangent」を適用します。これで「花のつぼみ」の形に見えてきたでしょうか？（形は悪くても構いません）
「Split Tangents」の適用（その 1）[クリックするとこのウィンドウで拡大]
「Split Tangents」の適用（その 2）[クリックするとこのウィンドウで拡大]
頂点の調整（その 1）[クリックするとこのウィンドウで拡大]
頂点の調整（その 2）[クリックするとこのウィンドウで拡大]
頂点の調整（その 3）[クリックするとこのウィンドウで拡大]
この状態で「2s」をクリックすると「きゃしゃな」つぼみの形となっているのがわかるはずです。幹が小さく、つぼみのドックスは見えないかもしれません。
「2s」の状態[クリックするとこのウィンドウで拡大]
これではやはり奇妙になってしまうので「3.5s」からつぼみが現れ、「4.5s」で最大サイズになるように調整してゆきましょう。 それではタイムライン上の「3. 5s」をクリックし、パラムズダイアログに移りましょう。パラムズダイアログ中のパラムズパネルに表示された各パラメータはタイムライン上の列と一致しています。
タイムラインの同期[クリックするとこのウィンドウで拡大]
パラムズパネルの一番最後に位置（Vertices）するのが頂点のリストになります。
「Vertices」の意味（その 1）[クリックするとこのウィンドウで拡大]
小さな矢印をクリックして中身を覗いてみましょう。頂点の全てが表示されているはずです。同じように「4s」で頂点を修正した場合そのイメージがタイムライン上に緑の 点で記録されます。 タイムライン上には大きなミドリの点（「Waypoint」（ウェイポイント））が現れます。これは頂点ごとの「0f」における状態の記録（イメージ）を意味します。
Read more →
Synfig チュートリアルを参考に（おおいに簡約し）説明を行ってゆきます。今回はフラワーアニメーションの作成方法です。 まずは先に今回の完成イメージをご覧になって下さい。
flower_animation.gif（871KB）
完成イメージ[クリックするとこのウィンドウで拡大（再生）]
今回はこのような動画を作成してゆきます。
目次 基本設定 さあ、まずは「File」－「新規（N）」で新しい Synfig を始めましょう。
新しい Synfig の作成（その 1）
[クリックするとこのウィンドウで拡大]
新しい Synfig の作成（その 2）
[クリックするとこのウィンドウで拡大]
新しい Synfig が作成できたらツールボックスでフォアグラウンドカラー（前景色）ととバックグラウンドカラー（背景色）を選択しましょう。これはグラデーションに利用します。
フォアグラウンドカラーの選択
[クリックするとこのウィンドウで拡大]
バックグラウンドカラーの選択
[クリックするとこのウィンドウで拡大]
次にグラディエントツールを選択し、ワークスペースでマウスカーソルを使って横に線を引いてみましょう。グラデーションが行われたはずです。
グラデーション（その 1）[クリックするとこのウィンドウで拡大]
グラデーション（その 2）[クリックするとこのウィンドウで拡大]
そしてツールボックスで「BLine Tool」を選択し、ツールオプションダイアログをクリックして下さい。その中で「Fill」がチェックされていることを確認し ましょう。またフォアグラウンドカラーを緑に変更します。
BLine Tool の選択（その 1）[クリックするとこのウィンドウで拡大]
BLine Tool の選択（その 2）[クリックするとこのウィンドウで拡大]
さあ、それでは「BLine Tool」で三角形を描いてみましょう。３つの頂点を描いた後でシェイプを閉じる為に最初の頂点の上で右クリックし、「Loop Bline」を選択します。 なお、この時、カラーセレクタ下部の「Default Blend Method」も確認して下さい。これが「Straight」だと期待した三角形とはなりません。その場合、「Composite」を選択して下さい。
三角形の作成（その 1）[クリックするとこのウィンドウで拡大]
三角形の作成（その 2）[クリックするとこのウィンドウで拡大]
三角形の作成（その 3）[クリックするとこのウィンドウで拡大]
三角形の作成（その 4）[クリックするとこのウィンドウで拡大]
ノート
「Split Tangents」オプションが有効になっていた場合、最初の頂点となる赤い小さな点をドラッグし、頂点（オレンジの点）で再度右クリックして下さい。「Loop Bline」オプションが現れるはずです。
シェイプが閉じられ、他のツールを選択するか、ツールオプションの下部でギアのようなアイコンのボタンをクリックして下さい。「Bline」のシェイプが作成されます 。 これは幹を意味します。
三角形の作成（その 5）[クリックするとこのウィンドウで拡大]
幹の周辺となる赤い点である接点のハンドルを引っ張っることも可能です。次にノーマルツールを使って各頂点を右クリックし、「Split Tangent」を選択して下さい。各頂点は分割して移動することができるようになります。
Read more →
Synfig チュートリアルを参考に（おおいに簡約し）説明を行ってゆきます。
google_ad_client = “pub-9752043470362559”; /* 336x280, 作成済み 08/07/21( */ google_ad_slot = “5621791976”; google_ad_width = 336; google_ad_height = 280; //–> 和訳synfig-チュートリアルーアニメーションの基礎その２ に引き続き、Synfig でアニメーション動画を作成する方法を確認してゆきましょう。
アニメーションのレンダリング Synfig では２種類のレンダリングの方法を用意しています。
Synfig Studio を使う コマンドラインの Synfig プログラムを使う まず Synfig Studio を使う方法です。一度ワークスペース上のタイムラインの右にある赤い点をクリックし「アニメートエディットモード」を閉じましょう。 アニメートエディットモードの終了
[クリックするとこのウィンドウで拡大]
次にファイルを保存します。ファイル名は本来何でも構いませんが今回は「BasicKnightRider.sifz」としましょう。
ファイルの保存（その 1）[クリックするとこのウィンドウで拡大]
ファイルの保存（その 2）
[クリックするとこのウィンドウで拡大]
ファイルの保存にはワークスペース上の左上にある三角（△）のボタンからメニューを表示し、「File」－「Render」をクリックします。
Synfig Studio レンダリング（その 1）
[クリックするとこのウィンドウで拡大]
するとレンダーセッティングダイアログが表示されます。この「Filename」を「BasicKnightRider.gif」に変更して下さい。ファイル を保存する場所は「BasicKnightRider.sifz」と同じにしておいて下さい。
Synfig Studio レンダリング（その 2）
[クリックするとこのウィンドウで拡大]
次に「Target」を「Auto」から「gif」に変更し、「Render」をクリックします。スペックに依存しますがそう時間はかからないはずです。最後にワーク スペース下に位置するステータスバーに「File rendered successsfully」と表示されれば成功です。
レンダリング中[クリックするとこのウィンドウで拡大]
レンダリング完了[クリックするとこのウィンドウで拡大]
ちなみに、もし「The magick++」が利用可能ならば「Target」は「gif」ではなく「gifs」としておいた方が最適化が行われる為無難です。 さあ、「BasicKnightRider.gif」を Firefox や他のアプリケーション（IE 等）で開いてみましょう。ちなみに Firefox では gif イメージは延々と繰り返されます。
Read more →