Synfig Studio :: Documentation - User contributions [en]

Doc:Adding Layers

2019-02-06T22:12:54Z

BobSynfig: /* Combining layers */

{{Title|Adding Layers}}
{{Navigation|Category:Manual|Doc:Creating_Shapes}}
{{TOCright}}
[[Category:Manual]]
[[Category:Tutorials]]
[[Category:Tutorials Basic]]
[[Category:Updated]]
{{NewTerminology}}

== Introduction ==

In the {{l|Doc:Animation_Basics|previous tutorial}}, you made your first simple animation by changing the attributes of {{l|Primitive Layer|primitive}} objects, such as: position, color, and size. These simple types, however, are seldom sufficient to create advanced characters and objects. To do so, Synfig uses {{l|Layer|layers}}. They are similar to layers used in other drawing applications in that they are used to separate different elements of an image.

However, Synfig's layers have following important specific:
# Every object or {{l|Primitive Layer|element}} gets its own layer.
# You can organize layers into hierarchical groups.
# You can use upper layers to change the behavior (or look) of underlying layers. Those are called {{l|Filter Layer|filter layers}} or effect layers.

As you will see, layers are an extremely important aspect of Synfig, much more so than most graphics programs. Understanding the concept of layers is an important part in understanding how Synfig works.

== Combining layers ==

So let's look at a simple example of how we can combine two layers to create a gradient effect on a rectangle.

Create a new file with any duration. There's no need to bother with a timeline at this point. Next, create a simple rectangle with the {{l|Rectangle Tool}}.

[[Image:Adding-layers-tutorial-1 0.63.06.png|frame|center]]

Pick the {{l|Gradient Tool|Gradient Tool}} from the {{l|Category:Toolbox|Toolbox}} ({{l|Blend Method Parameter#Composite|Composite}} Blend Method), press the left mouse button on the canvas, drag to change the gradient direction and release the button when you are done. You should note that another layer was added in the {{l|Layers Panel}} called '''Gradient'''. This is nothing special.

[[Image:Adding Layer-tutorial-2 0.63.06.png|frame|center]]

{{Note|Note|If you see no gradient but just a plain color, that means that you probably just clicked on the canvas without dragging your mouse. To fix that pick the {{l|Transform Tool|Transform Tool}}, click into the canvas to activate the gradient's handles. You need to grab the one you see and move it a bit until a gradient appears.}}

{{Note|Note|If you see a spiral gradient, go to the [[Tool_Options_Panel]] and change Layer Type to linear by clicking on the far left icon.}}

You now have a gradient, but it is not what you wanted: it spreads across the whole canvas. The goal was to have a gradient in the rectangle. So, let's fix this now.

In the {{l|Layers Panel}}, select both the gradient and the rectangle layer. Then, right-click and select {{Literal|Group Layer}} from the menu. The view of your Layers Panel should change now, showing a small box called {{l|Group Layer|Group}} with a ▶ in front. By clicking on the ▶ you can expand the group layer to see its contents, your previous two layers: the gradient and the rectangle.

[[Image:Adding Layer-tutorial-3 0.63.06.png|frame|center]]

You can treat this layer like any other layer — move it around, duplicate it, copy and paste it. If you want to change the name of it to something more descriptive, just select the layer in the layer tab and click on its label. Then you just edit it in place. You can do this for ANY layer, and are strongly encouraged to do so.

== Using locality ==
However, there is still a problem: the gradient still covers the whole canvas although we wanted it to be restricted on the rectangle. To do so, activate the gradient layer in the Layers Panel. Now go to the {{l|Parameters Panel}} (by default it resides in the bottom window), and search for the attribute called {{l|Blend_Method_Parameter|Blend Method}}. Double-click the entry and select {{l|Blend_Method_Parameter#Onto|Onto}} from the drop-down menu.

[[Image:Adding Layer-tutorial-4 0.63.06.png|frame|center]]

The gradient should now be restricted to the rectangle. Congratulations! You just made your first effect by interacting layers with Synfig.

[[Image:Adding Layer-tutorial-5 0.63.06.png|frame|center|The gradient is restricted to the rectangle. You will found more informations about the various {{literal|Blend Method}} in the {{l|Blend_Method_Parameter}} documentation.]]

If only for the additional organization, grouping layers dramatically improves the ease of use of Synfig Studio. But lots of programs can do this. The concept of ''scope'' as just demonstrated sets Synfig apart from other programs with layer hierarchies. The key point is that a layer, inside it's own group, will '''only''' modify the data contained by all the layers and groups '''below''' it. In other words, if you were to throw a {{l|Blur Layer}} on top of the layers inside the {{l|Group Layer|group layer}} we created, it would just blur them — anything under the group layer would not be blurred! Let's try it.

== Using layers to modify other layers==
Make sure you have the group layer selected and create two red {{l|Circle Tool|circles}}. They will appear on top of the group layer. Select the group layer and use the {{Literal|Raise Layer}} button in the Layers Panel to place it on top of the circles.

[[Image:Adding-Layer-tutorial-6-raise-layer-0.63.06.png|center|frame]]

Now our group layer (with rectangle and gradient) is in front of those two circles.

[[Image:Adding-Layer-tutorial-7-0.63.06.png|center|frame]]

Expand the group layer to show its contents, and select the top layer inside of it (should be the gradient layer). This is where we want to insert the new layer. Create another circle filled with a black color. The black circle layer will be created over the gradient layer inside the group layer.

[[Image:Adding-Layer-tutorial-8-0.63.06.png|center|frame]]

Now, right click on the black circle layer in the layers panel and a popup menu will appear. The first item in that popup is {{Literal|New Layer}}. Inside of the {{Literal|New Layer}} menu, you'll see several categories of layers you could create, but what we want is a blur, so go to the blurs category and select the {{Literal|Blur}} layer (so that would be {{c|New Layer|Blurs|Blur}}).

[[Image:Adding-Layer-tutorial-11-0.63.06.png|frame|center]]

It blurred! Has the blend method for newly created blur is {{Literal|Straight}} (if the default blend method in the Toolbox is set to {{Literal|By Layer Default}}) it blurred all around the outside edge of the contents of the group layer. You can change the {{l|New Layer Defaults#Default Blend Method|default blend method}} for new layers from the {{l|New Layer Defaults}} section of the Toolbox.

{{Note|Note|In the Synfig version before {{Literal|0.62.02}} , the blend method for newly created blur layers was defaulted to {{Literal|Composite}}, that cause the outside edge of the contents of the group layer is still sharp. What we want is a blend method of {{Literal|Straight}}. Just select the blur layer, and change the Blend Method to {{Literal|Straight}} in the Parameters Panel.
[[Image:Adding-Layer-tutorial-10-composite-blur-0.63.06.png|center|frame]]}}

Ok, now we have all of the contents of the group layer blurred, but everything under it is sharp! This is because the effect of the Blur Layer over the underlying layers is limited to the scope of the group layer because the blur layer is inside it.
You can download the [[File:Doc Adding Layers.sif|sif]] used for this example

== Digging further... ==

If you care to look into Synfig's main menu under {{c|Layer|New Layer}} you will note quite a lot of different possibilities for making layers. Several of them sound rather unusual, like {{c|Transform|Rotate}} for example. You can use this to add new attributes to your objects. And just like other, basic attributes in the {{L|Doc:Animation Basics|previous animation tutorial}}, you can change them to be different on certain {{L|Keyframe|keyframes}}. Synfig will take care of interpolating the steps in between.

For example, you could create a {{L|Doc:Creating Shapes|shape}} and add a {{L|Rotate Layer}} over it. Combine this with the lesson learned in the {{L|Doc:Animation Basics|last tutorial}} and you will obtain a rotating effect. This technique is used for the creation of {{L|Doc:Cut-out Animation}}.

Let's continue digging further on {{l|Doc:Creating Shapes|shapes creation}}.

{{Navigation|Category:Manual|Doc:Creating_Shapes}}

Dev:Adding a Render progress bar

2019-01-07T23:10:51Z

BobSynfig: /* synfig-studio/src/gui/docks/dock_info.cpp */

Now let's implement a Render Progress Bar! 
It has been requested several time: 
[https://github.com/synfig/synfig/issues/383 Indication needed that rendering is in progress. #383] 
[https://github.com/synfig/synfig/issues/626 Feature request: Give feedback when rendering is happening and complete #626] 
also in [https://github.com/synfig/synfig/issues/464 Default render parameter are bad #464]

== Things to take into account ==
* Where to place the Progress Bar? 
* How does really a render work? 
* Where to do calls and implementation? 

=== Where to place the Progress Bar? ===
I chose to implement it in the Dock_Info panel. 
After all, this is a kind of information!

=== How does really a render work? ===
'''App''' ([https://github.com/synfig/synfig/blob/master/synfig-studio/src/gui/app.h .h][https://github.com/synfig/synfig/blob/master/synfig-studio/src/gui/app.cpp .cpp]) is the root of everything and used to store globals. 
But we start in fact from '''CanvasView''' ([https://github.com/synfig/synfig/blob/master/synfig-studio/src/gui/canvasview.h .h][https://github.com/synfig/synfig/blob/master/synfig-studio/src/gui/canvasview.cpp .cpp]) which contains the call to display the '''RenderSettings''' Dialog ([https://github.com/synfig/synfig/blob/master/synfig-studio/src/gui/render.h .h][https://github.com/synfig/synfig/blob/master/synfig-studio/src/gui/render.cpp .cpp]). 
Then we press on render button which leads to execute an '''AsyncRenderer''' ([https://github.com/synfig/synfig/blob/master/synfig-studio/src/gui/asyncrenderer.h .h][https://github.com/synfig/synfig/blob/master/synfig-studio/src/gui/asyncrenderer.cpp .cpp]) (or 2, sequentially, if we have a second pass for Alpha extraction). 
'''AsyncRenderer''' can have 4 types of targets, ''AsyncTarget_Cairo'', AsyncTarget_Cairo_Tile, ''AsyncTarget_Scanline'', AsyncTarget_Tile. 
Only ''AsyncTarget_Cairo'' and ''AsyncTarget_Scanline'' have a ''frame_ready()'' function that we will use to implement our call to update to the Render ProgressBar. 

Note that we can have 2 passes, this has to be considered when displaying the percents of accomplished render. 

The render itself is done writing the data to the target, then the selected codec is fed through a pipe (for example ffmpeg).

=== Where to do calls and implementation? ===
In different files, as it is a "multi-level" task. 
The details are described in each file touched in the next section.

== Implementation ==
=== synfig-studio/src/gui/docks/dock_info.h ===
* Declare the components and members 
In #include section:
#include <gtkmm/progressbar.h>

In private section:
Gtk::ProgressBar render_progress;

//! Number of passes request - 1 or 2 (if alpha)
int n_passes_requested;
//! Number of passes pending - 2,1,0
int n_passes_pending;

In public section:
//! Current render progress - 0.0 to 1.0
// depends on n_passes_requested and current_pass
void set_render_progress (float value);
void set_n_passes_requested(int value);
void set_n_passes_pending (int value);

=== synfig-studio/src/gui/docks/dock_info.cpp ===
* Here we will implement the UI and members
In #include section:
#include "app.h"
#include <gtkmm/progressbar.h>
''It will permit to access our App::dock_info_ as a static from anywhere in the application''

In Dock_Info(), at the end:
''just before table->show_all();''
//Render Progress Bar
table->attach(*manage(new Gtk::Label(_("Render Progress: "))),0,1,5,6,Gtk::EXPAND|Gtk::FILL,Gtk::SHRINK|Gtk::FILL);
table->attach(render_progress, 0,5,6,7,Gtk::EXPAND|Gtk::FILL,Gtk::SHRINK|Gtk::FILL);

render_progress.set_show_text(true);
render_progress.set_text(strprintf("%.1f%%", 0.0));
render_progress.set_fraction(0.0);
//Another spacer
table->attach(*manage(new Gtk::Label),0,5,7,8);

''and after add(*table);''

//Render progress
set_n_passes_requested(1); //Default
set_n_passes_pending (0); //Default
set_render_progress (0.0); //Default, 0.0%

Then at the end of the file, we add these 3 functions:

void studio::Dock_Info::set_n_passes_requested(int value)
{
n_passes_requested = value;
}

void studio::Dock_Info::set_n_passes_pending(int value)
{
n_passes_pending = value;
}

void studio::Dock_Info::set_render_progress(float value)
{
float coeff = (1.000 / (float)n_passes_requested); //% of fraction for 1 pass if more than 1 pass
float already_done = coeff * (float)(n_passes_requested - n_passes_pending -1);
float r = ( coeff * value ) + already_done;

render_progress.set_text( strprintf( "%.1f%%", r*100 ));
render_progress.set_fraction(r);
}

The 2 first ones are obvious, the last one does the calculation for the display of the current percents of the WHOLE TASK. 
If we have only 1 pass, value will be reflected directly. 
In case of 2 (or more, who knows what will be implemented later!), each pass will still continue to send its progress as if it was the only one in the world; we will do the adjustments here. 
100% of pass 1 while be displayed as 50%. 
100% of pass 2 while be displayed as 100%. 
If we had 3 passes, it would be 33.3%, 66.6% and 100.0% 

=== synfig-studio/src/gui/docks/app.h ===
* Lets add our ''static dock_info_''. A ''studio::dock_info'' is already defined in the .cpp but we need to access it as ''App::dock_info_''!
Inside the static declarations:

static Dock_Info* dock_info_; //For Render ProgressBar
=== synfig-studio/src/gui/docks/app.cpp ===
* Let's declare the static
Inside the declare of statics
Dock_Info* App::dock_info_ = 0;

At the end of the constructor App()
App::dock_info_ = dock_info;
''It looks like some kind of alias!''

=== synfig-studio/src/gui/docks/render.cpp ===
* Here the things start to become serious
In the #include section:
#include "docks/dockmanager.h"
#include "docks/dock_info.h"

In RenderSettings::on_render_pressed 
''Just before submit_next_render_pass();''
App::dock_info_->set_n_passes_requested(render_passes.size());
App::dock_info_->set_n_passes_pending(render_passes.size());
App::dock_info_->set_render_progress(0.0);
App::dock_manager->find_dockable("info").present(); //Bring Dock_Info to front
''We initialized our ProgressBar with its default parameters to display 0.0%'' 
''Note that the Dock_Info will be brought to front to show the progression... It's its goal!''

In RenderSettings::submit_next_render_pass()
''Just after render_passes.pop_back();''
App::dock_info_->set_n_passes_pending(render_passes.size()); //! Decrease until 0
App::dock_info_->set_render_progress(0.0); //For this pass
''We reinitialized the parameters for this specific pass!''

'''Doing tests I noticed that with extract alpha option on, we have 2 passes and therefore the render done sound was played 2 times! 
Let's correct this bad behaviour'''
In RenderSettings::on_finished(), around submit_next_render_pass();
bool really_finished = (render_passes.size() == 0); //Must be checked BEFORE submit_next_render_pass();

submit_next_render_pass();

//Sound effect - RenderDone (-1 : play on first free channel, 0 : no repeat)
if (App::use_render_done_sound) Mix_PlayChannel( -1, App::gRenderDone, 0 );
if (really_finished) { //Because of multi-pass render
if (App::use_render_done_sound) Mix_PlayChannel( -1, App::gRenderDone, 0 );
App::dock_info_->set_render_progress(1.0);
}

''This way, it will play only once the full render has occured!''

=== synfig-studio/src/gui/docks/asyncrender.cpp ===
* Now the deepest part
In #include section:
#include <docks/dock_info.h>

In the beginning of AsyncRenderer::start()
App::dock_info_->set_render_progress(0.0);

In ''void frame_ready()'' '''of both''' ''AsyncTarget_Cairo'' and ''AsyncTarget_Scanline'' 
''After ready_next=true;''
int n_total_frames_to_render = warm_target->desc.get_frame_end() //120
- warm_target->desc.get_frame_start() //0
+ 1; //->121
int current_rendered_frames_count = warm_target->curr_frame_
- warm_target->desc.get_frame_start();
float r = (float) current_rendered_frames_count
/ (float) n_total_frames_to_render;
App::dock_info_->set_render_progress(r);

Here the current progress is calculated according the starting, ending and current frame, in a range of 0.0 to 1.0 
The pass (or target) thinks it is the only one in the world but it is compensated in the display :)

Hoping this will help you to come and join the effort in development of Synfig :)

Dev:Adding a Render progress bar

2019-01-03T21:53:11Z

BobSynfig: Done

Now let's implement a Render Progress Bar! 
It has been requested several time: 
[https://github.com/synfig/synfig/issues/383 Indication needed that rendering is in progress. #383] 
[https://github.com/synfig/synfig/issues/626 Feature request: Give feedback when rendering is happening and complete #626] 
also in [https://github.com/synfig/synfig/issues/464 Default render parameter are bad #464]

== Things to take into account ==
* Where to place the Progress Bar? 
* How does really a render work? 
* Where to do calls and implementation? 

=== Where to place the Progress Bar? ===
I chose to implement it in the Dock_Info panel. 
After all, this is a kind of information!

=== How does really a render work? ===
'''App''' ([https://github.com/synfig/synfig/blob/master/synfig-studio/src/gui/app.h .h][https://github.com/synfig/synfig/blob/master/synfig-studio/src/gui/app.cpp .cpp]) is the root of everything and used to store globals. 
But we start in fact from '''CanvasView''' ([https://github.com/synfig/synfig/blob/master/synfig-studio/src/gui/canvasview.h .h][https://github.com/synfig/synfig/blob/master/synfig-studio/src/gui/canvasview.cpp .cpp]) which contains the call to display the '''RenderSettings''' Dialog ([https://github.com/synfig/synfig/blob/master/synfig-studio/src/gui/render.h .h][https://github.com/synfig/synfig/blob/master/synfig-studio/src/gui/render.cpp .cpp]). 
Then we press on render button which leads to execute an '''AsyncRenderer''' ([https://github.com/synfig/synfig/blob/master/synfig-studio/src/gui/asyncrenderer.h .h][https://github.com/synfig/synfig/blob/master/synfig-studio/src/gui/asyncrenderer.cpp .cpp]) (or 2, sequentially, if we have a second pass for Alpha extraction). 
'''AsyncRenderer''' can have 4 types of targets, ''AsyncTarget_Cairo'', AsyncTarget_Cairo_Tile, ''AsyncTarget_Scanline'', AsyncTarget_Tile. 
Only ''AsyncTarget_Cairo'' and ''AsyncTarget_Scanline'' have a ''frame_ready()'' function that we will use to implement our call to update to the Render ProgressBar. 

Note that we can have 2 passes, this has to be considered when displaying the percents of accomplished render. 

The render itself is done writing the data to the target, then the selected codec is fed through a pipe (for example ffmpeg).

=== Where to do calls and implementation? ===
In different files, as it is a "multi-level" task. 
The details are described in each file touched in the next section.

== Implementation ==
=== synfig-studio/src/gui/docks/dock_info.h ===
* Declare the components and members 
In #include section:
#include <gtkmm/progressbar.h>

In private section:
Gtk::ProgressBar render_progress;

//! Number of passes request - 1 or 2 (if alpha)
int n_passes_requested;
//! Number of passes pending - 2,1,0
int n_passes_pending;

In public section:
//! Current render progress - 0.0 to 1.0
// depends on n_passes_requested and current_pass
void set_render_progress (float value);
void set_n_passes_requested(int value);
void set_n_passes_pending (int value);

=== synfig-studio/src/gui/docks/dock_info.cpp ===
* Here we will implement the UI and members
In #include section:
#include "app.h"
#include <gtkmm/progressbar.h>
''It will permit to access our App::dock_info_ as a static from anywhere in the application''

In Dock_Info(), at the end:
''just before table->show_all();''
//Render Progress Bar
table->attach(*manage(new Gtk::Label(_("Render Progress: "))),0,1,5,6,Gtk::EXPAND|Gtk::FILL,Gtk::SHRINK|Gtk::FILL);
table->attach(render_progress, 0,5,6,7,Gtk::EXPAND|Gtk::FILL,Gtk::SHRINK|Gtk::FILL);

render_progress.set_show_text(true);
render_progress.set_text(strprintf("%.1f%%", 0.0));
render_progress.set_fraction(0.0);
//Another spacer
table->attach(*manage(new Gtk::Label),0,5,7,8);

''and after add(*table);''

//Render progress
set_n_passes_requested(1); //Default
set_n_passes_pending (1); //Default
set_render_progress (0.0); //Default, 0.0%

Then at the end of the file, we add these 3 functions:

void studio::Dock_Info::set_n_passes_requested(int value)
{
n_passes_requested = value;
}

void studio::Dock_Info::set_n_passes_pending(int value)
{
n_passes_pending = value;
}

void studio::Dock_Info::set_render_progress(float value)
{
float coeff = (1.000 / (float)n_passes_requested); //% of fraction for 1 pass if more than 1 pass
float already_done = coeff * (float)(n_passes_requested - n_passes_pending -1);
float r = ( coeff * value ) + already_done;

render_progress.set_text( strprintf( "%.1f%%", r*100 ));
render_progress.set_fraction(r);
}

The 2 first ones are obvious, the last one does the calculation for the display of the current percents of the WHOLE TASK. 
If we have only 1 pass, value will be reflected directly. 
In case of 2 (or more, who knows what will be implemented later!), each pass will still continue to send its progress as if it was the only one in the world; we will do the adjustments here. 
100% of pass 1 while be displayed as 50%. 
100% of pass 2 while be displayed as 100%. 
If we had 3 passes, it would be 33.3%, 66.6% and 100.0% 

=== synfig-studio/src/gui/docks/app.h ===
* Lets add our ''static dock_info_''. A ''studio::dock_info'' is already defined in the .cpp but we need to access it as ''App::dock_info_''!
Inside the static declarations:

static Dock_Info* dock_info_; //For Render ProgressBar
=== synfig-studio/src/gui/docks/app.cpp ===
* Let's declare the static
Inside the declare of statics
Dock_Info* App::dock_info_ = 0;

At the end of the constructor App()
App::dock_info_ = dock_info;
''It looks like some kind of alias!''

=== synfig-studio/src/gui/docks/render.cpp ===
* Here the things start to become serious
In the #include section:
#include "docks/dockmanager.h"
#include "docks/dock_info.h"

In RenderSettings::on_render_pressed 
''Just before submit_next_render_pass();''
App::dock_info_->set_n_passes_requested(render_passes.size());
App::dock_info_->set_n_passes_pending(render_passes.size());
App::dock_info_->set_render_progress(0.0);
App::dock_manager->find_dockable("info").present(); //Bring Dock_Info to front
''We initialized our ProgressBar with its default parameters to display 0.0%'' 
''Note that the Dock_Info will be brought to front to show the progression... It's its goal!''

In RenderSettings::submit_next_render_pass()
''Just after render_passes.pop_back();''
App::dock_info_->set_n_passes_pending(render_passes.size()); //! Decrease until 0
App::dock_info_->set_render_progress(0.0); //For this pass
''We reinitialized the parameters for this specific pass!''

'''Doing tests I noticed that with extract alpha option on, we have 2 passes and therefore the render done sound was played 2 times! 
Let's correct this bad behaviour'''
In RenderSettings::on_finished(), around submit_next_render_pass();
bool really_finished = (render_passes.size() == 0); //Must be checked BEFORE submit_next_render_pass();

submit_next_render_pass();

//Sound effect - RenderDone (-1 : play on first free channel, 0 : no repeat)
if (App::use_render_done_sound) Mix_PlayChannel( -1, App::gRenderDone, 0 );
if (really_finished) { //Because of multi-pass render
if (App::use_render_done_sound) Mix_PlayChannel( -1, App::gRenderDone, 0 );
App::dock_info_->set_render_progress(1.0);
}

''This way, it will play only once the full render has occured!''

=== synfig-studio/src/gui/docks/asyncrender.cpp ===
* Now the deepest part
In #include section:
#include <docks/dock_info.h>

In the beginning of AsyncRenderer::start()
App::dock_info_->set_render_progress(0.0);

In ''void frame_ready()'' '''of both''' ''AsyncTarget_Cairo'' and ''AsyncTarget_Scanline'' 
''After ready_next=true;''
int n_total_frames_to_render = warm_target->desc.get_frame_end() //120
- warm_target->desc.get_frame_start() //0
+ 1; //->121
int current_rendered_frames_count = warm_target->curr_frame_
- warm_target->desc.get_frame_start();
float r = (float) current_rendered_frames_count
/ (float) n_total_frames_to_render;
App::dock_info_->set_render_progress(r);

Here the current progress is calculated according the starting, ending and current frame, in a range of 0.0 to 1.0 
The pass (or target) thinks it is the only one in the world but it is compensated in the display :)

Hoping this will help you to come and join the effort in development of Synfig :)

Dev:Adding a Render progress bar

2019-01-03T20:52:13Z

BobSynfig: 2nd part

Now let's implement a Render Progress Bar! 
It has been requested several time: 
[https://github.com/synfig/synfig/issues/383| Indication needed that rendering is in progress. #383] 
[https://github.com/synfig/synfig/issues/626| Feature request: Give feedback when rendering is happening and complete #626] 
also in [https://github.com/synfig/synfig/issues/464| Default render parameter are bad #464]

== Things to take into account ==
* Where to place the Progress Bar? 
* How does really a render work? 
* Where to do calls and implementation? 

=== Where to place the Progress Bar? ===
I chose to implement it in the Dock_Info panel. 
After all, this is a kind of information!

=== How does really a render work? ===
'''App''' ([https://github.com/synfig/synfig/blob/master/synfig-studio/src/gui/app.h .h][https://github.com/synfig/synfig/blob/master/synfig-studio/src/gui/app.cpp .cpp]) is the root of everything and used to store globals. 
But we start in fact from '''CanvasView''' ([https://github.com/synfig/synfig/blob/master/synfig-studio/src/gui/canvasview.h .h][https://github.com/synfig/synfig/blob/master/synfig-studio/src/gui/canvasview.cpp .cpp]) which contains the call to display the '''RenderSettings''' Dialog ([https://github.com/synfig/synfig/blob/master/synfig-studio/src/gui/render.h .h][https://github.com/synfig/synfig/blob/master/synfig-studio/src/gui/render.cpp .cpp]). 
Then we press on render button which leads to execute an '''AsyncRender''' ([https://github.com/synfig/synfig/blob/master/synfig-studio/src/gui/asyncrenderer.h .h][https://github.com/synfig/synfig/blob/master/synfig-studio/src/gui/asyncrenderer.cpp .cpp]) (or 2, sequentially, if we have a second pass for Alpha extraction). 
'''AsyncRenderer''' can have 4 types of targets, ''AsyncTarget_Cairo'', AsyncTarget_Cairo_Tile, ''AsyncTarget_Scanline'', AsyncTarget_Tile. 
Only ''AsyncTarget_Cairo'' and ''AsyncTarget_Scanline'' have a ''frame_ready()'' function that we will use to implement our call to update to the Render ProgressBar. 

Note that we can have 2 passes, this has to be considered when displaying the percents of accomplished render. 

== Implementation ==
=== synfig-studio/src/gui/docks/dock_info.h ===
* Declare the components and members 
In #include section:
#include <gtkmm/progressbar.h>

In private section:
Gtk::ProgressBar render_progress;

//! Number of passes request - 1 or 2 (if alpha)
int n_passes_requested;
//! Number of passes pending - 2,1,0
int n_passes_pending;

In public section:
//! Current render progress - 0.0 to 1.0
// depends on n_passes_requested and current_pass
void set_render_progress (float value);
void set_n_passes_requested(int value);
void set_n_passes_pending (int value);

=== synfig-studio/src/gui/docks/dock_info.cpp ===
* Here we will implement the UI and members
In #include section:
#include "app.h"
#include <gtkmm/progressbar.h>
''It will permit to access our App::dock_info_ as a static from anywhere in the application''

In Dock_Info(), at the end:
//Render Progress Bar
table->attach(*manage(new Gtk::Label(_("Render Progress: "))),0,1,5,6,Gtk::EXPAND|Gtk::FILL,Gtk::SHRINK|Gtk::FILL);
table->attach(render_progress, 0,5,6,7,Gtk::EXPAND|Gtk::FILL,Gtk::SHRINK|Gtk::FILL);

render_progress.set_show_text(true);
render_progress.set_text(strprintf("%.1f%%", 0.0));
render_progress.set_fraction(0.0);
//Another spacer
table->attach(*manage(new Gtk::Label),0,5,7,8);

''just before table->show_all();''

''and after add(*table);''

//Render progress
set_n_passes_requested(1); //Default
set_n_passes_pending (1); //Default
set_render_progress (0.0); //Default, 0.0%

Then at the end of the file, we add these 3 functions:

void studio::Dock_Info::set_n_passes_requested(int value)
{
n_passes_requested = value;
}

void studio::Dock_Info::set_n_passes_pending(int value)
{
n_passes_pending = value;
}

void studio::Dock_Info::set_render_progress(float value)
{
float coeff = (1.000 / (float)n_passes_requested); //% of fraction for 1 pass if more than 1 pass
float already_done = coeff * (float)(n_passes_requested - n_passes_pending -1);
float r = ( coeff * value ) + already_done;

render_progress.set_text( strprintf( "%.1f%%", r*100 ));
render_progress.set_fraction(r);
}

The 2 first ones are obvious, the last one does the calculation for the display of the current percents of the WHOLE TASK. 
If we have only 1 pass, value will be reflected directly. 
In case of 2 (or more, who knows what will be implemented later!), each pass will still continue to send its progress as if it was the only one in the world; we will do the adjustments here. 
100% of pass 1 while be displayed as 50%. 
100% of pass 2 while be displayed as 100%. 
If we had 3 passes, it would be 33.3%, 66.6% and 100.0%

Dev:Adding a Render progress bar

2019-01-03T18:40:43Z

BobSynfig: Create + 1st part

Developer Documentation

2019-01-03T18:14:04Z

BobSynfig: /* Complete coding tutorials */

{{Title|Developer Documentation}}
{{TOCright}}

The Developer Documentation part of this wiki is primarily for the following groups of people:

*Current developers of the code
*Future and potential developers
*Those interested in bug filing and generating ideas

= Main pages =

* {{l|Dev:Build Instructions}}
* {{l|Dev:Building Documentation}}
* {{l|Dev:Source code}} description and workflow
* {{l|Dev:Action System}} : structure of the action system, good entry-point into Synfig.
* IDE Setup {{l|Dev:IDE_Linux|under Linux}} | {{l|Dev:IDE_Windows| under Windows}}
* {{l|Dev:Roadmap}}
* {{l|Dev:Contribute to Code}}
* {{l|Dev:Translation}}
* {{l|Dev:Wish list}}
* {{l|Dev:Coding_Conventions}}
* {{l|Dev:UI/UX Redesign}}
* {{l|Dev:ETL_replacement}}

=Synfig components=
Synfig is divided into three main components: etl, synfig-core and synfig-studio.
* '''[http://download.tuxfamily.org/synfig/api/ETL/annotated.html ETL]''' is the extended template library. One of its most important components is the shared object class, which is the base class for most other parts of the application. Using "handles" to shared objects instead of c++ pointers provides garbage collection via reference counting.
* '''[http://download.tuxfamily.org/synfig/api/synfig-core/annotated.html Synfig-core]''' is the core/command-line (cli) renderer ("synfig") contains the document data structure for the application: valuenodes, layers, and canvases.
* '''[http://download.tuxfamily.org/synfig/api/synfig-studio/annotated.html Synfig Studio]''' ("synfig-studio") provides the gui for the application.
* See also: {{l|Dev:How Synfig Works}}

= External libs =
== Synfig use several external libs==
* [https://developer.gnome.org/gtkmm-tutorial/2.24/ Gtkmm 2], some work on branchs has been started to reach [https://developer.gnome.org/gtk3/ Gtkmm 3] ([https://developer.gnome.org/gtk3/3.4/gtk-migrating-2-to-3.html Migrating 2to3])
* [https://developer.gnome.org/gtkmm/2.24/namespaceGdk_1_1Cairo.html Cairo] (Cairo render mode)
* [http://freetype.org/ Freetype2] library (Text layer rendering in software render mode)
* [http://libxmlplusplus.sourceforge.net/ libxmlplusplus] (to parse the project files)
* [http://www.boost.org/doc/libs/1_54_0/doc/html/program_options.html Boost Program Options] (synfig cli)
* [http://www.mltframework.org/ MLT Framework - Media Loving Toolkit] (Sound Layer)
* [http://www.libpng.org/pub/png/libpng.html libpng] (load and write .png files)

==Optionally you will also need==
* [http://www.imagemagick.org/Magick++/ Magick++] the ImageMagick API (to build mod_magickpp, the magick++ module from synfig-core)
* libavcodec (to build mod_libavcodec, from synfig-core)
* libmng (to build mod_mng, from synfig-core)
... check the {{l|Dev:Build Instructions}} page for more detailed informations.

=Complete coding tutorials=
* {{l|Dev:Adding a Layer}}
* Adding a Panel, {{l|Dev:Adding a Panel - Part I|Part I}} and {{l|Dev:Adding a Panel - Part II|Part II}}. '''Note: these are highly out of date''' please note that the directory "gtkmm" has been renamed to "gui", Panel is now know has Dock. Also, some files were moved into subfolders (take a look inside the "gui/docks" folder for example).
* {{l|Dev:Adding a Sound notification}}
* {{l|Dev:Adding a Render progress bar}}

=Other links=
* [http://download.tuxfamily.org/synfig/api/index.html ETL, Synfig, SynfigStudio Api documentation]
* [http://synfig.org/wiki/index.php?title=Special:PrefixIndex&from=&namespace=102 All Dev namespace pages]
* {{l|Dev:Translation|Translate the application}}
* {{l|Dev:Release|Release procedure}}
* {{l|Dev:GoogleSoC|Google Summer of Code}}
* [http://sourceforge.net/p/synfig/mailman/synfig-devl/ Synfig Developer Mailing List]
* [https://github.com/synfig/synfig/issues Synfig Issue Tracker]
* [http://www.synfig.org/forums/viewtopic.php?f=2&t=6097 Genete free stuff...]
* {{l|Dev:C%2B%2B11_Migration|C++11 Migration}}

Dev:Adding a Sound notification

2018-12-18T23:54:19Z

BobSynfig: /* synfig-studio/src/gui/app.cpp */

After the implementation of [https://github.com/synfig/synfig/issues/648| #648 - GUI: Play a sound when rendering is done], it could be useful to keep a track of the way to implement a new sound notification in SynfigStudio

This tutorial will be divided in 2 parts:
* Adding the sound notification
* Adding an option to Preferences dialog

== Adding the sound notification ==

=== synfig-studio/sounds/ ===
* Add your sample in this directory in your source tree 
* Add a notice about the license of your sample in ''readme.txt'' (the asset should have a permissive license) 
* Add your sound sample to the list in ''Makefile.am''

=== synfig-studio/src/gui/app.h ===
* Declare the sound (Mix_Chunk*) as a static member.
//The sound effects that will be used
static Mix_Chunk* gRenderDone;

''You could add a bool declared as a static member for an option to play the sound (to be defined in Preferences dialog).''
static bool use_render_done_sound;

=== synfig-studio/src/gui/app.cpp ===
* Initialize the sound (Mix_Chunk*) to NULL. 
You could find the gRenderDone and add it after.
Mix_Chunk* App::gRenderDone = NULL;

''As well you may initialize the bool for allow to play the sound; this will be connected later in the Preferences dialog''
bool App::use_render_done_sound = true;
* Locate this part (at the end of the constructor App::App )
path_to_sounds += ETL_DIRECTORY_SEPARATOR;
and load your sound as follow (the volume is set at 50% if success)
//Load sound effects
App::gRenderDone = Mix_LoadWAV( (path_to_sounds + "renderdone.wav").c_str() );
if ( App::gRenderDone == NULL ) {
synfig::error( _("SDL_mixer could not load gRenderDone : %s\n"), Mix_GetError() );
} else {
Mix_VolumeChunk(App::gRenderDone, MIX_MAX_VOLUME/2);
}
* Finally, free the sound in the destructor App::~App(and NULL the pointer)
//<!- ----- SDL2 - Sound effects -----
//Free the sound effects
Mix_FreeChunk( App::gRenderDone );
App::gRenderDone = NULL;

=== synfig-studio/src/gui/<yourSource>.cpp ===
* You should add
#include <SDL2/SDL.h>
#include <SDL2/SDL_mixer.h>
* Add your sound effect play where it should be (end of an event for example) 
You have 2 possibilities after this 
1) Play directly without control in the preferences
//Sound effect - RenderDone (-1 : play on first free channel, 0 : no repeat)
Mix_PlayChannel( -1, App::gRenderDone, 0 );
'''or''' 
2) ''Play according the preferences''
//Sound effect - RenderDone (-1 : play on first free channel, 0 : no repeat)
if (App::use_render_done_sound) Mix_PlayChannel( -1, App::gRenderDone, 0 );
== Adding an option to Preferences dialog ==
In the first part we added ''use_render_done_sound'' to prepare a preference option. 
It will be a toggle ''toggle_play_sound_on_render_done'' in Preferences/Render tab
=== synfig-studio/src/gui/dialogs/dialog_setup.h ===
* In class Dialog_Setup 
add the declaration of the "changed" handler
void on_play_sound_on_render_done_changed();
and the corresponding Switch control
Gtk::Switch toggle_play_sound_on_render_done;
=== synfig-studio/src/gui/dialogs/dialog_setup.cpp ===
* Find in which page and which position you will add your option (named ''toggle_play_sound_on_render_done'', here in ''Dialog_Setup::create_render_page(PageInfo pi)'')
// Render - Render Done sound
attach_label(pi.grid, _("Chime on render done"), ++row);
pi.grid->attach(toggle_play_sound_on_render_done, 1, row, 1, 1);
toggle_play_sound_on_render_done.set_halign(Gtk::ALIGN_START);
toggle_play_sound_on_render_done.set_hexpand(false);
toggle_play_sound_on_render_done.set_tooltip_text(_("A chime is played when render has finished."));
toggle_play_sound_on_render_done.property_active()
.signal_changed()
.connect(sigc::mem_fun(*this, &Dialog_Setup::on_play_sound_on_render_done_changed));
* In ''Dialog_Setup::on_apply_pressed()''
// Set the use of a render done sound
App::use_render_done_sound = toggle_play_sound_on_render_done.get_active();
* Create the handler
void
Dialog_Setup::on_play_sound_on_render_done_changed()
{
App::use_render_done_sound = toggle_play_sound_on_render_done.get_active();
}
* In ''Dialog_Setup::refresh()''
// Refresh the status of the render done sound flag
toggle_play_sound_on_render_done.set_active(App::use_render_done_sound);
=== synfig-studio/src/gui/app.cpp ===
* In ''class Preferences'',
among the saving parts
if(key=="use_render_done_sound")
{
value=strprintf("%i",(int)App::use_render_done_sound);
return true;
}
and among the loading parts
if(key=="use_render_done_sound")
{
int i(atoi(value.c_str()));
App::use_render_done_sound=i;
return true;
}
* In the ret.push_back part, add
ret.push_back("use_render_done_sound");
* In ''restore_default_settings()'', add a default value
synfigapp::Main::settings().set_value("use_render_done_sound", "1");

Dont forget some parts have been done in the first section 
Hoping it will be sufficient to understand the whole system :)

Dev:Adding a Sound notification

2018-12-16T20:25:25Z

BobSynfig:

After the implementation of [https://github.com/synfig/synfig/issues/648| #648 - GUI: Play a sound when rendering is done], it could be useful to keep a track of the way to implement a new sound notification in SynfigStudio

This tutorial will be divided in 2 parts:
* Adding the sound notification
* Adding an option to Preferences dialog

== Adding the sound notification ==

=== synfig-studio/sounds/ ===
* Add your sample in this directory in your source tree 
* Add a notice about the license of your sample in ''readme.txt'' (the asset should have a permissive license) 
* Add your sound sample to the list in ''Makefile.am''

=== synfig-studio/src/gui/app.h ===
* Declare the sound (Mix_Chunk*) as a static member.
//The sound effects that will be used
static Mix_Chunk* gRenderDone;

''You could add a bool declared as a static member for an option to play the sound (to be defined in Preferences dialog).''
static bool use_render_done_sound;

=== synfig-studio/src/gui/app.cpp ===
* Initialize the sound (Mix_Chunk*) to NULL. 
You could find the gRenderDone and add it after.
Mix_Chunk* App::gRenderDone = NULL;

''As well you may initialize the bool for allow to play the sound; this will be connected later in the Preferences dialog''
bool App::use_render_done_sound = true;
* Locate this part (at the end of the constructor App::App )
path_to_sounds += ETL_DIRECTORY_SEPARATOR;
and load your sound as follow (the volume is set at 50% if success)
//Load sound effects
App::gRenderDone = Mix_LoadWAV( (path_to_sounds + "renderdone.wav").c_str() );
if ( App::gRenderDone == NULL ) {
synfig::error( _("SDL_mixer could not load gRenderDone : %s\n"), Mix_GetError() );
} else {
Mix_VolumeChunk(App::gRenderDone, MIX_MAX_VOLUME/2);
}
* Finally, free the sound in the destructor App::~App(and NULL the pointer)
//<!- ----- SDL2 - Sound effects -----
//Free the sound effects
Mix_FreeChunk( App::gRenderDone );
App::gRenderDone = NULL;

=== synfig-studio/src/gui/<yourSource>.cpp ===
* You should add
#include <SDL2/SDL.h>
#include <SDL2/SDL_mixer.h>
* Add your sound effect play where it should be (end of an event for example) 
You have 2 possibilities after this 
1) Play directly without control in the preferences
//Sound effect - RenderDone (-1 : play on first free channel, 0 : no repeat)
Mix_PlayChannel( -1, App::gRenderDone, 0 );
'''or''' 
2) ''Play according the preferences''
//Sound effect - RenderDone (-1 : play on first free channel, 0 : no repeat)
if (App::use_render_done_sound) Mix_PlayChannel( -1, App::gRenderDone, 0 );
== Adding an option to Preferences dialog ==
In the first part we added ''use_render_done_sound'' to prepare a preference option. 
It will be a toggle ''toggle_play_sound_on_render_done'' in Preferences/Render tab
=== synfig-studio/src/gui/dialogs/dialog_setup.h ===
* In class Dialog_Setup 
add the declaration of the "changed" handler
void on_play_sound_on_render_done_changed();
and the corresponding Switch control
Gtk::Switch toggle_play_sound_on_render_done;
=== synfig-studio/src/gui/dialogs/dialog_setup.cpp ===
* Find in which page and which position you will add your option (named ''toggle_play_sound_on_render_done'', here in ''Dialog_Setup::create_render_page(PageInfo pi)'')
// Render - Render Done sound
attach_label(pi.grid, _("Chime on render done"), ++row);
pi.grid->attach(toggle_play_sound_on_render_done, 1, row, 1, 1);
toggle_play_sound_on_render_done.set_halign(Gtk::ALIGN_START);
toggle_play_sound_on_render_done.set_hexpand(false);
toggle_play_sound_on_render_done.set_tooltip_text(_("A chime is played when render has finished."));
toggle_play_sound_on_render_done.property_active()
.signal_changed()
.connect(sigc::mem_fun(*this, &Dialog_Setup::on_play_sound_on_render_done_changed));
* In ''Dialog_Setup::on_apply_pressed()''
// Set the use of a render done sound
App::use_render_done_sound = toggle_play_sound_on_render_done.get_active();
* Create the handler
void
Dialog_Setup::on_play_sound_on_render_done_changed()
{
App::use_render_done_sound = toggle_play_sound_on_render_done.get_active();
}
* In ''Dialog_Setup::refresh()''
// Refresh the status of the render done sound flag
toggle_play_sound_on_render_done.set_active(App::use_render_done_sound);
=== synfig-studio/src/gui/app.cpp ===
* In ''class Preferences : public synfigapp::Settings'',
among the saving parts
if(key=="use_render_done_sound")
{
value=strprintf("%i",(int)App::use_render_done_sound);
return true;
}
and among the loading parts
if(key=="use_render_done_sound")
{
int i(atoi(value.c_str()));
App::use_render_done_sound=i;
return true;
}
* In the ret.push_back part, add
ret.push_back("use_render_done_sound");

Dont forget some parts have been done in the first section
Hoping it will be sufficient to understand the whole system :)

Dev:Adding a Sound notification

2018-12-16T20:23:23Z

BobSynfig: 2nd part

After the implementation of [https://github.com/synfig/synfig/issues/648| #648 - GUI: Play a sound when rendering is done], it could be useful to keep a track of the way to implement a new sound notification in SynfigStudio

This tutorial will be divided in 2 parts:
* Adding the sound notification
* Adding an option to Preferences dialog

== Adding the sound notification ==

=== synfig-studio/sounds/ ===
* Add your sample in this directory in your source tree 
* Add a notice about the license of your sample in ''readme.txt'' (the asset should have a permissive license) 
* Add your sound sample to the list in ''Makefile.am''

=== synfig-studio/src/gui/app.h ===
* Declare the sound (Mix_Chunk*) as a static member.
//The sound effects that will be used
static Mix_Chunk* gRenderDone;

[[You could add a bool declared as a static member for an option to play the sound (to be defined in Preferences dialog).]]
static bool use_render_done_sound;

=== synfig-studio/src/gui/app.cpp ===
* Initialize the sound (Mix_Chunk*) to NULL. 
You could find the gRenderDone and add it after.
Mix_Chunk* App::gRenderDone = NULL;

[[As well you may initialize the bool for allow to play the sound; this will be connected later in the Preferences dialog]]
bool App::use_render_done_sound = true;
* Locate this part (at the end of the constructor App::App )
path_to_sounds += ETL_DIRECTORY_SEPARATOR;
and load your sound as follow (the volume is set at 50% if success)
//Load sound effects
App::gRenderDone = Mix_LoadWAV( (path_to_sounds + "renderdone.wav").c_str() );
if ( App::gRenderDone == NULL ) {
synfig::error( _("SDL_mixer could not load gRenderDone : %s\n"), Mix_GetError() );
} else {
Mix_VolumeChunk(App::gRenderDone, MIX_MAX_VOLUME/2);
}
* Finally, free the sound in the destructor App::~App(and NULL the pointer)
//<!- ----- SDL2 - Sound effects -----
//Free the sound effects
Mix_FreeChunk( App::gRenderDone );
App::gRenderDone = NULL;

=== synfig-studio/src/gui/<yourSource>.cpp ===
* You should add
#include <SDL2/SDL.h>
#include <SDL2/SDL_mixer.h>
* Add your sound effect play where it should be (end of an event for example) 
You have 2 possibilities after this 
1) Play directly without control in the preferences
//Sound effect - RenderDone (-1 : play on first free channel, 0 : no repeat)
Mix_PlayChannel( -1, App::gRenderDone, 0 );
'''or''' 
2) [[Play according the preferences]]
//Sound effect - RenderDone (-1 : play on first free channel, 0 : no repeat)
if (App::use_render_done_sound) Mix_PlayChannel( -1, App::gRenderDone, 0 );
== Adding an option to Preferences dialog ==
In the first part we added ''use_render_done_sound'' to prepare a preference option. 
It will be a toggle ''toggle_play_sound_on_render_done'' in Preferences/Render tab
=== synfig-studio/src/gui/dialogs/dialog_setup.h ===
* In class Dialog_Setup 
add the declaration of the "changed" handler
void on_play_sound_on_render_done_changed();
and the corresponding Switch control
Gtk::Switch toggle_play_sound_on_render_done;
=== synfig-studio/src/gui/dialogs/dialog_setup.cpp ===
* Find in which page and which position you will add your option (named ''toggle_play_sound_on_render_done'', here in ''Dialog_Setup::create_render_page(PageInfo pi)'')
// Render - Render Done sound
attach_label(pi.grid, _("Chime on render done"), ++row);
pi.grid->attach(toggle_play_sound_on_render_done, 1, row, 1, 1);
toggle_play_sound_on_render_done.set_halign(Gtk::ALIGN_START);
toggle_play_sound_on_render_done.set_hexpand(false);
toggle_play_sound_on_render_done.set_tooltip_text(_("A chime is played when render has finished."));
toggle_play_sound_on_render_done.property_active()
.signal_changed()
.connect(sigc::mem_fun(*this, &Dialog_Setup::on_play_sound_on_render_done_changed));
* In ''Dialog_Setup::on_apply_pressed()''
// Set the use of a render done sound
App::use_render_done_sound = toggle_play_sound_on_render_done.get_active();
* Create the handler
void
Dialog_Setup::on_play_sound_on_render_done_changed()
{
App::use_render_done_sound = toggle_play_sound_on_render_done.get_active();
}
* In ''Dialog_Setup::refresh()''
// Refresh the status of the render done sound flag
toggle_play_sound_on_render_done.set_active(App::use_render_done_sound);
=== synfig-studio/src/gui/app.cpp ===
* In ''class Preferences : public synfigapp::Settings'',
among the saving parts
if(key=="use_render_done_sound")
{
value=strprintf("%i",(int)App::use_render_done_sound);
return true;
}
and among the loading parts
if(key=="use_render_done_sound")
{
int i(atoi(value.c_str()));
App::use_render_done_sound=i;
return true;
}
* In the ret.push_back part, add
ret.push_back("use_render_done_sound");

Dont forget some parts have been done in the first section
Hoping it will be sufficient to understand the whole system :)

Dev:Adding a Sound notification

2018-12-16T19:40:55Z

BobSynfig: 1st Part

Dev:Adding a Sound notification

2018-12-16T13:59:55Z

BobSynfig: Page creation

=== WIP ===

=== synfig-studio/src/gui/app.h ===
Declare the sound (Mix_Chunk*) as a static member.

//The sound effects that will be used
static Mix_Chunk* gRenderDone;

You could add a bool declare as a static member for an option to play.
bool App::use_render_done_sound = true;

=== synfig-studio/src/gui/app.cpp ===
Initialize the sound (Mix_Chunk*) to NULL.
You could find the gRenderDone and add it after.

Mix_Chunk* App::gRenderDone = NULL;

As well you may add a bool for
bool App::use_render_done_sound = true;

=== synfig-studio/src/gui/<yourSource>.cpp ===
You should add
#include <SDL2/SDL.h>
#include <SDL2/SDL_mixer.h>

Add your sound effect play where it should be (end of an event for example)
//Sound effect - RenderDone (-1 : play on first free channel, 0 : no repeat)
Mix_PlayChannel( -1, App::gRenderDone, 0 );

Developer Documentation

2018-12-16T13:42:41Z

BobSynfig: /* Complete coding tutorials */

{{Title|Developer Documentation}}
{{TOCright}}

The Developer Documentation part of this wiki is primarily for the following groups of people:

*Current developers of the code
*Future and potential developers
*Those interested in bug filing and generating ideas

= Main pages =

* {{l|Dev:Build Instructions}}
* {{l|Dev:Building Documentation}}
* {{l|Dev:Source code}} description and workflow
* {{l|Dev:Action System}} : structure of the action system, good entry-point into Synfig.
* IDE Setup {{l|Dev:IDE_Linux|under Linux}} | {{l|Dev:IDE_Windows| under Windows}}
* {{l|Dev:Roadmap}}
* {{l|Dev:Contribute to Code}}
* {{l|Dev:Translation}}
* {{l|Dev:Wish list}}
* {{l|Dev:Coding_Conventions}}
* {{l|Dev:UI/UX Redesign}}
* {{l|Dev:ETL_replacement}}

=Synfig components=
Synfig is divided into three main components: etl, synfig-core and synfig-studio.
* '''[http://download.tuxfamily.org/synfig/api/ETL/annotated.html ETL]''' is the extended template library. One of its most important components is the shared object class, which is the base class for most other parts of the application. Using "handles" to shared objects instead of c++ pointers provides garbage collection via reference counting.
* '''[http://download.tuxfamily.org/synfig/api/synfig-core/annotated.html Synfig-core]''' is the core/command-line (cli) renderer ("synfig") contains the document data structure for the application: valuenodes, layers, and canvases.
* '''[http://download.tuxfamily.org/synfig/api/synfig-studio/annotated.html Synfig Studio]''' ("synfig-studio") provides the gui for the application.
* See also: {{l|Dev:How Synfig Works}}

= External libs =
== Synfig use several external libs==
* [https://developer.gnome.org/gtkmm-tutorial/2.24/ Gtkmm 2], some work on branchs has been started to reach [https://developer.gnome.org/gtk3/ Gtkmm 3] ([https://developer.gnome.org/gtk3/3.4/gtk-migrating-2-to-3.html Migrating 2to3])
* [https://developer.gnome.org/gtkmm/2.24/namespaceGdk_1_1Cairo.html Cairo] (Cairo render mode)
* [http://freetype.org/ Freetype2] library (Text layer rendering in software render mode)
* [http://libxmlplusplus.sourceforge.net/ libxmlplusplus] (to parse the project files)
* [http://www.boost.org/doc/libs/1_54_0/doc/html/program_options.html Boost Program Options] (synfig cli)
* [http://www.mltframework.org/ MLT Framework - Media Loving Toolkit] (Sound Layer)
* [http://www.libpng.org/pub/png/libpng.html libpng] (load and write .png files)

==Optionally you will also need==
* [http://www.imagemagick.org/Magick++/ Magick++] the ImageMagick API (to build mod_magickpp, the magick++ module from synfig-core)
* libavcodec (to build mod_libavcodec, from synfig-core)
* libmng (to build mod_mng, from synfig-core)
... check the {{l|Dev:Build Instructions}} page for more detailed informations.

=Complete coding tutorials=
* {{l|Dev:Adding a Layer}}
* Adding a Panel, {{l|Dev:Adding a Panel - Part I|Part I}} and {{l|Dev:Adding a Panel - Part II|Part II}}. '''Note: these are highly out of date''' please note that the directory "gtkmm" has been renamed to "gui", Panel is now know has Dock. Also, some files were moved into subfolders (take a look inside the "gui/docks" folder for example).
* {{l|Dev:Adding a Sound notification}}

=Other links=
* [http://download.tuxfamily.org/synfig/api/index.html ETL, Synfig, SynfigStudio Api documentation]
* [http://synfig.org/wiki/index.php?title=Special:PrefixIndex&from=&namespace=102 All Dev namespace pages]
* {{l|Dev:Translation|Translate the application}}
* {{l|Dev:Release|Release procedure}}
* {{l|Dev:GoogleSoC|Google Summer of Code}}
* [http://sourceforge.net/p/synfig/mailman/synfig-devl/ Synfig Developer Mailing List]
* [https://github.com/synfig/synfig/issues Synfig Issue Tracker]
* [http://www.synfig.org/forums/viewtopic.php?f=2&t=6097 Genete free stuff...]
* {{l|Dev:C%2B%2B11_Migration|C++11 Migration}}

Doc:Reuse Animations/fr

2018-10-31T13:17:51Z

BobSynfig: /* A sample */

{{Title|Réutiliser les Animations}}
{{TOCright}}
{{Category|Manual}}
{{Category|Tutorials}}
{{Category|Tutorials Advanced}}
{{NewTerminology}}

== Introduction ==

L'un des buts de tout animateur (spécialement pour les plus paresseux comme moi) est d'avoir l'opportunité de réutiliser des parties d'animation. Cela permet de sauver beacoup de temps si vous pouvez insérer certaines portions d'animations déjà enregistrées à une autre position dans la temps.

C'est tout spécialement utile pour faire parler les personnage car vous avez à animer la bouche du personnage selon des positions répétées dépendant des phonèmes qu'ils représentent durant le discours.

Cela peut être fait très simplement en utilisant une combinaison de {l|Keyframe|keyframes}} et de canevas exportés.

== Keyframes ==

Notre but est d'enregistrer des animations et de les réustiliser plus tard. Cela peut être fait en utilisant des keyframes. Si vous créez quelques keyframes au début de votre animation, vous pouvez réutiliser ces "poses" plus loin dans le temps en dupliquant simplement les keyframes à une autre position dans le temps. Pour cela, faites simplement ce qui suit:

# Créez une Keyframe à une trame donnée (toutes vos keyframes devraient être créées proches les unes des autres pour utiliser une petite portion du temps. Nous voulons seulement enregistrer une "pose" et non une transition)
# Modifiez vos objets comme vous le désirez (par exemple faites fermer un oeil en déplaçant uniquement les points de la paupière).
# Donnez un nom à la keyframe en cliquant sur la cellule Description correspondante.
# Répétez les étapes précédentes le nombre de fois nécessaire pour faire une nouvelle "pose". Disons que vous avez créé une keyframe à la trame n°2 (oeil ouvert) et n°4 (oeil fermé)
# Une fois terminé allez à une autre trame avec le {{l|Time Cursor|curseur de temps}}, sélectionnez la keyframe que vous voulez ajouter et pressez le bouton "Duplicate keyframe". Vous obtiendrez une copie de la keyframe sélectionnée à la position courante du {{l|Time Cursor|curseur de temps}}.

[[File:Reuse Animations 1 0.63.06.png|frame|none]]

Il y a un problème avec cette technique. Vous faites des copies de toutes les poses de l'animation que vous avez stockées dans les premières keyframes du temps (trame 2 et 4 dans ce cas) et donc vous avez fait des copies de tous les autres objets existant dans la scène (dans cet exemple, le globe occulaire).

Si vous avez déjà une animation enregistrée du globe occulaire et que vous superposez un ensemble de keyframes "clignement" (ouvert et fermé)au milieu, alors l'animation du globe occulaire sera cassée par l'insertion des copies des keyframes de mouvements de la paupière.

== Export du paramètre Canvas ==

A chaque fois que vous groupez les calques, vous obtenez un {{l|Group Layer}} qui empêche la composition des calques contenus au dessus des calques en dehors de lui.

Un des paramètres du Group Layer est le {{l|Canvas|Canvas}}. Le canevas est comme un espace de travail qui représente tous les calques groupés.

[[File:Reuse Animations 2 0.63.06.png|frame|none]]

Pour éviter le problème décrit dans la section précédente (les keyframes affectent tous les objets dans la scène) vous pouvez faire ce qui suit:

#Avant de créer les poses de la keyframe de la paupière, groupez tous les calques qui forment les paupières.
#Sélectionnez le calque Groupe et sélectionnez le paramètre Canvas dans le dialogue Paramètres.
#Cliquez-droit sur le paramètre Canvas, exportez-le, et donnez-lui un nom (dans cet exemple ce sera "eyelids").

[[File:Reuse Animations 3 0.63.06.png|frame|none]]

Allez au {{l|Canvas Browser Panel}} et sélectionnez le canevas tout juste exporté.

Double-cliquez dessus et une nouvelle fenêtre de zone de travail va s'ouvrir avec uniquement les calques qui ont été groupés à l'étape 1 - le canvas "eyelids" dans cet exemple.

[[File:Reuse Animations 4 0.63.06.png|frame|none]]

Créez toutes les keyframes que vous devez stocker pour vos "poses". Une fois fait, allez à la bonne trame et insérez une copie de la pose. Cela va produire une keyframe dans le canevas "eyelids", mais ne va produire aucune keyframe sur les autres calques (par exemple le globe occulaire). Cela permet d'animer indépendamment une portion du modèle séparée du reste. Assurez_vous que le canevas exporté est aussi long que l'animation.

Maintenant une fois que vous avez stocké les clignements de l'oeil (ouvert et fermé) à la position désirée vous pouvez aller à la fenêtre principale (fermez simplement la zone de travail du canevas "eyelids"). Vous verrez alors que toutes les modifications ont été transmises à l'animation principale mais mais elles n'ont créée aucune keyframe dans la zone de travail principale. Même les calques qui se trouvent à l'intérieur du calque groupe "eyelids" n'ont aucune keyframes (vous pouvez voir une indication de la présence de keyframes dans le canevas exporté - lignes verticales dashée - mais aucune keyframe n'est affichées dans le dialogue keyframes). Dans tous les cas, vous pouvez voir les waypoints créés par les keyframes et les ajuster, mais pas les keyframes elles-mêmes. Pour modifier les keyframes vous devriez éditer le canevas exporté à nouveau dans sa propre zone de travail. Si vous modifiez les calques groupés depuis la zone de travail principale, les waypoints seront créés en fonction des keyframes de la zone de travail principale, pas de la zone de travail exportée, ainsi vous obtiendrez différents effets selon que zone de travail que vous utilisez pour modifierls les calques groupés.

Maintenant, une fois que vous avez créé votre animation des paupières vous pouvez aller au globe occulaire et le modifier selon votre goût, en insérant keyframes ou waypoints sans avoir à vous inquiéter d'interférer avec l'animation des paupière. Vous pouvez aussi animer le globe occulaire avant et faire l'animation des paupières plus tard. Ils n'interféreront pas entre eux.

Ce serait une grande amélioration si vous pouvier connecter les curseurs de temps de la zone de travail principale et la zone de travail du canevas exporté pour afficher les deux fenêtres au même temps courant. Ceci permettrait de donner un retour sur où insérer les keyframes des "poses" de votre animation locale.

== Un exemple ==

Vous trouverez ici un exemple d'animation d'un oeil qui cligne (les positions fermées et ouvertes sont des copies des keyframes "Open" et "Closed", tout en ayant le globe occulaire qui bouge indépendamment dans sa propre animation.

Les poses "Open" et "Closed" sont stockées aux trames 0 et 2. L'animation est définie pour commencer à la trame 6.

[[File:Eyeblink.gif]]

[[Media:Eyeblink.sifz|Sample file]]

Tous les commentaires sont les bienvenus.

Doc:Reuse Animations/fr

2018-10-31T13:12:29Z

BobSynfig: /* Exporting the Canvas Parameter */

{{Title|Réutiliser les Animations}}
{{TOCright}}
{{Category|Manual}}
{{Category|Tutorials}}
{{Category|Tutorials Advanced}}
{{NewTerminology}}

== Introduction ==

L'un des buts de tout animateur (spécialement pour les plus paresseux comme moi) est d'avoir l'opportunité de réutiliser des parties d'animation. Cela permet de sauver beacoup de temps si vous pouvez insérer certaines portions d'animations déjà enregistrées à une autre position dans la temps.

C'est tout spécialement utile pour faire parler les personnage car vous avez à animer la bouche du personnage selon des positions répétées dépendant des phonèmes qu'ils représentent durant le discours.

Cela peut être fait très simplement en utilisant une combinaison de {l|Keyframe|keyframes}} et de canevas exportés.

== Keyframes ==

Notre but est d'enregistrer des animations et de les réustiliser plus tard. Cela peut être fait en utilisant des keyframes. Si vous créez quelques keyframes au début de votre animation, vous pouvez réutiliser ces "poses" plus loin dans le temps en dupliquant simplement les keyframes à une autre position dans le temps. Pour cela, faites simplement ce qui suit:

# Créez une Keyframe à une trame donnée (toutes vos keyframes devraient être créées proches les unes des autres pour utiliser une petite portion du temps. Nous voulons seulement enregistrer une "pose" et non une transition)
# Modifiez vos objets comme vous le désirez (par exemple faites fermer un oeil en déplaçant uniquement les points de la paupière).
# Donnez un nom à la keyframe en cliquant sur la cellule Description correspondante.
# Répétez les étapes précédentes le nombre de fois nécessaire pour faire une nouvelle "pose". Disons que vous avez créé une keyframe à la trame n°2 (oeil ouvert) et n°4 (oeil fermé)
# Une fois terminé allez à une autre trame avec le {{l|Time Cursor|curseur de temps}}, sélectionnez la keyframe que vous voulez ajouter et pressez le bouton "Duplicate keyframe". Vous obtiendrez une copie de la keyframe sélectionnée à la position courante du {{l|Time Cursor|curseur de temps}}.

[[File:Reuse Animations 1 0.63.06.png|frame|none]]

Il y a un problème avec cette technique. Vous faites des copies de toutes les poses de l'animation que vous avez stockées dans les premières keyframes du temps (trame 2 et 4 dans ce cas) et donc vous avez fait des copies de tous les autres objets existant dans la scène (dans cet exemple, le globe occulaire).

Si vous avez déjà une animation enregistrée du globe occulaire et que vous superposez un ensemble de keyframes "clignement" (ouvert et fermé)au milieu, alors l'animation du globe occulaire sera cassée par l'insertion des copies des keyframes de mouvements de la paupière.

== Export du paramètre Canvas ==

A chaque fois que vous groupez les calques, vous obtenez un {{l|Group Layer}} qui empêche la composition des calques contenus au dessus des calques en dehors de lui.

Un des paramètres du Group Layer est le {{l|Canvas|Canvas}}. Le canevas est comme un espace de travail qui représente tous les calques groupés.

[[File:Reuse Animations 2 0.63.06.png|frame|none]]

Pour éviter le problème décrit dans la section précédente (les keyframes affectent tous les objets dans la scène) vous pouvez faire ce qui suit:

#Avant de créer les poses de la keyframe de la paupière, groupez tous les calques qui forment les paupières.
#Sélectionnez le calque Groupe et sélectionnez le paramètre Canvas dans le dialogue Paramètres.
#Cliquez-droit sur le paramètre Canvas, exportez-le, et donnez-lui un nom (dans cet exemple ce sera "eyelids").

[[File:Reuse Animations 3 0.63.06.png|frame|none]]

Allez au {{l|Canvas Browser Panel}} et sélectionnez le canevas tout juste exporté.

Double-cliquez dessus et une nouvelle fenêtre de zone de travail va s'ouvrir avec uniquement les calques qui ont été groupés à l'étape 1 - le canvas "eyelids" dans cet exemple.

[[File:Reuse Animations 4 0.63.06.png|frame|none]]

Créez toutes les keyframes que vous devez stocker pour vos "poses". Une fois fait, allez à la bonne trame et insérez une copie de la pose. Cela va produire une keyframe dans le canevas "eyelids", mais ne va produire aucune keyframe sur les autres calques (par exemple le globe occulaire). Cela permet d'animer indépendamment une portion du modèle séparée du reste. Assurez_vous que le canevas exporté est aussi long que l'animation.

Maintenant une fois que vous avez stocké les clignements de l'oeil (ouvert et fermé) à la position désirée vous pouvez aller à la fenêtre principale (fermez simplement la zone de travail du canevas "eyelids"). Vous verrez alors que toutes les modifications ont été transmises à l'animation principale mais mais elles n'ont créée aucune keyframe dans la zone de travail principale. Même les calques qui se trouvent à l'intérieur du calque groupe "eyelids" n'ont aucune keyframes (vous pouvez voir une indication de la présence de keyframes dans le canevas exporté - lignes verticales dashée - mais aucune keyframe n'est affichées dans le dialogue keyframes). Dans tous les cas, vous pouvez voir les waypoints créés par les keyframes et les ajuster, mais pas les keyframes elles-mêmes. Pour modifier les keyframes vous devriez éditer le canevas exporté à nouveau dans sa propre zone de travail. Si vous modifiez les calques groupés depuis la zone de travail principale, les waypoints seront créés en fonction des keyframes de la zone de travail principale, pas de la zone de travail exportée, ainsi vous obtiendrez différents effets selon que zone de travail que vous utilisez pour modifierls les calques groupés.

Maintenant, une fois que vous avez créé votre animation des paupières vous pouvez aller au globe occulaire et le modifier selon votre goût, en insérant keyframes ou waypoints sans avoir à vous inquiéter d'interférer avec l'animation des paupière. Vous pouvez aussi animer le globe occulaire avant et faire l'animation des paupières plus tard. Ils n'interféreront pas entre eux.

Ce serait une grande amélioration si vous pouvier connecter les curseurs de temps de la zone de travail principale et la zone de travail du canevas exporté pour afficher les deux fenêtres au même temps courant. Ceci permettrait de donner un retour sur où insérer les keyframes des "poses" de votre animation locale.

== A sample ==

Here you can find a sample animation of a blinking eye (the closed and open positions are copies of the keyframes "Open" and "Closed", while the eyeball moves independently in its own animation.

I have stored the poses "Open" and "Closed" at frames 0 and 2. The animation is defined to start at frame 6.

[[File:Eyeblink.gif]]

[[Media:Eyeblink.sifz|Sample file]]

All comments are welcome.

Doc:Reuse Animations/fr

2018-10-31T11:43:37Z

BobSynfig: Create + 1st part

{{Title|Réutiliser les Animations}}
{{TOCright}}
{{Category|Manual}}
{{Category|Tutorials}}
{{Category|Tutorials Advanced}}
{{NewTerminology}}

== Introduction ==

L'un des buts de tout animateur (spécialement pour les plus paresseux comme moi) est d'avoir l'opportunité de réutiliser des parties d'animation. Cela permet de sauver beacoup de temps si vous pouvez insérer certaines portions d'animations déjà enregistrées à une autre position dans la temps.

C'est tout spécialement utile pour faire parler les personnage car vous avez à animer la bouche du personnage selon des positions répétées dépendant des phonèmes qu'ils représentent durant le discours.

Cela peut être fait très simplement en utilisant une combinaison de {l|Keyframe|keyframes}} et de canevas exportés.

== Keyframes ==

Notre but est d'enregistrer des animations et de les réustiliser plus tard. Cela peut être fait en utilisant des keyframes. Si vous créez quelques keyframes au début de votre animation, vous pouvez réutiliser ces "poses" plus loin dans le temps en dupliquant simplement les keyframes à une autre position dans le temps. Pour cela, faites simplement ce qui suit:

# Créez une Keyframe à une trame donnée (toutes vos keyframes devraient être créées proches les unes des autres pour utiliser une petite portion du temps. Nous voulons seulement enregistrer une "pose" et non une transition)
# Modifiez vos objets comme vous le désirez (par exemple faites fermer un oeil en déplaçant uniquement les points de la paupière).
# Donnez un nom à la keyframe en cliquant sur la cellule Description correspondante.
# Répétez les étapes précédentes le nombre de fois nécessaire pour faire une nouvelle "pose". Disons que vous avez créé une keyframe à la trame n°2 (oeil ouvert) et n°4 (oeil fermé)
# Une fois terminé allez à une autre trame avec le {{l|Time Cursor|curseur de temps}}, sélectionnez la keyframe que vous voulez ajouter et pressez le bouton "Duplicate keyframe". Vous obtiendrez une copie de la keyframe sélectionnée à la position courante du {{l|Time Cursor|curseur de temps}}.

[[File:Reuse Animations 1 0.63.06.png|frame|none]]

Il y a un problème avec cette technique. Vous faites des copies de toutes les poses de l'animation que vous avez stockées dans les premières keyframes du temps (trame 2 et 4 dans ce cas) et donc vous avez fait des copies de tous les autres objets existant dans la scène (dans cet exemple, le globe occulaire).

Si vous avez déjà une animation enregistrée du globe occulaire et que vous superposez un ensemble de keyframes "clignement" (ouvert et fermé)au milieu, alors l'animation du globe occulaire sera cassée par l'insertion des copies des keyframes de mouvements de la paupière.

== Exporting the Canvas Parameter ==

Every time you group the layers, you obtain a {{l|Group Layer}} that prevents the composition of the contained layers over layers outside of it.

One of the parameters of the Group Layer is the {{l|Canvas|Canvas}}. The canvas is like a workspace that represents all the grouped layers.

[[File:Reuse Animations 2 0.63.06.png|frame|none]]

To avoid the problem described in the previous section (the keyframes affecting all the objects in the scene) you can do following:

#Before creating the keyframe poses of the eyelids, group all the layers that form the eyelids.
#Select the Group layer and select the Canvas parameter in the Parameter Dialog.
#Right click the Canvas parameter, export it, and give it a name (in the sample this will be "eyelids").

[[File:Reuse Animations 3 0.63.06.png|frame|none]]

Go to the {{l|Canvas Browser Panel}} and select the just exported canvas.

Double click it and a new workarea window will open with just the layers that were grouped at the step 1 - the "eyelids" canvas in the sample.

[[File:Reuse Animations 4 0.63.06.png|frame|none]]

Create all the keyframes you need to store your "poses". Once done go to the proper frame and insert a copy of the pose keyframe. It will produce a keyframe in the "eyelids" canvas, but will not produce any keyframe on the other layers (for example the eyeball). This allows to independently animate of a portion of the model separated from the rest. Be sure that the exported canvas is as long as the animation.

Now once you have stored the eye blinks (open and closed) at the desired position you can go to the main window (just close the "eyelids" canvas work area). You'll see that all the modifications have been transmitted to the main animation but they haven't created any keyframes in the main work area. Even the layers that are inside the "eyelids" Group layer don't have any keyframes (you can see an indication that there are keyframes in the exported canvas - dashed vertical lines - but no keyframe is displayed in the keyframe dialog). Anyway, you can see the waypoints created by the keyframes and tweak them, but not the keyframes themselves. To modify the keyframes you should edit the exported canvas again in its own work area. If you modify the grouped layers from the main work area, waypoints will be created according to the main work area keyframes, not the exported canvas work area, so you will get different effects depending upon which work area you use to modify the grouped layers.

Now, once you have created your animation of the eyelids you can go to the eyeball and modify it to your taste, inserting keyframes or waypoints with no worries about interfering with the eyelid animation. Also you can animate the eyeball before and make the animation of the eyelids later. They won't interfere with each other.

It would be a great improvement if you could connect the time cursors of the main work area and the exported canvas work area to show both windows at the same current time. This would give feedback on where to insert the 'pose' keyframes in your local animation.

== A sample ==

Here you can find a sample animation of a blinking eye (the closed and open positions are copies of the keyframes "Open" and "Closed", while the eyeball moves independently in its own animation.

I have stored the poses "Open" and "Closed" at frames 0 and 2. The animation is defined to start at frame 6.

[[File:Eyeblink.gif]]

[[Media:Eyeblink.sifz|Sample file]]

All comments are welcome.

Doc:Flower Animation/fr

2018-02-18T01:46:31Z

BobSynfig: /* Animation de la tige */

{{Title|Animer des formes}}
{{Navigation|Category:Manual|Doc:Basic_Bone_Tutorial}}
{{Category|Tutorials}}
{{Category|Tutorials Intermediate}}
{{Category|Updated}}
{{NewTerminology}}


Cette page à besoin d'être traduite, soyez patient et/ou participez!

=== Éléments de base ===

Dans le {{l|Doc:Creating_Shapes|tutorial précédent}}, vous avez appris à créer des formes avec l'{{l|Spline Tool}}, dans ce tutoriel, nous allons apprendre comment créer une animation simple consistant à faire grandir une fleur en utilisant les {{l|Doc:Creating Shapes|Splines}}.

[[File:FlowerTutorial 0.png|right|frame]] Ouvrez ''Synfig Studio''— une nouvelle animation se crée. Si ''Synfig Studio'' est déjà ouvert, faites {{c|Fichier|Nouveau}} dans la boite à outil.

Premièrement, nous avons besoin de créer un dégradé comme arrière-plan. Cliquez sur les couleurs de contour et de remplissage dans la {{l|Toolbox}} pour sélectionner les couleurs que votre dégradé prendra. Vous pouvez également éditer directement le dégradé en cliquant sur la ligne Dégradé par défaut dans la boite à outils.

Sélectionnez l'{{l|Gradient Tool}} et déplacer votre curseur verticalement le long du canevas pour le remplir avec un dégradé.

Ensuite, sélectionnez l'{{l|Spline Tool}} et dans le panneau d'option des outils, vérifiez que uniquement {{Literal|Créer une Région}} est sélectionné. Dans la boite à outils, mettez la couleur de remplissage sur vert. Dessinez une sorte de triangle avec l'Outil Spline. Pour fermer la forme après avoir dessiné les trois vertex, cliquez droit sur le premier vertex et choisissez {{Literal|Boucler}}.

Maintenant que le chemin de la forme est fermé, vous pouvez générer réellement la forme en sélectionnant un autre outil ou en cliquant sur le bouton avec l'icône engrenages dans le bas du {{l|Tool Options Panel}}.

[[File:FlowerTutorial 1 Canvas 0.63.06.png|center|frame]]

Cela seras la base de la tige. Vous pouvez modifier les poignées de tangentes (les points rouges) un petit peu pour rendre le triangle plus rond. Avec l'{{l|Transform tool}}, cliquez-droit sur chacun des vertex et sélectionner {{Literal|Séparer les tangentes}}, ainsi les poignées de tangentes de chaque vertex peuvent être déplacé indépendamment.

[[File:FlowerTutorial 2 Canvas 0.63.06.png|center|frame]]

== Animation de la tige ==

Depuis le Menu Canvas, sélectionnez l'icone du {{l|Caret|menu chevron}} dans le coin supérieur gauche, à l'endroit ou les règles se croise, et sélectionnez {{c|Canevas|Propriétés}}. Allez sur l'onglet {{Literal|Temps}}, réglez {{Literal|Heure de fin}} à {{Literal|6s}} et cliquez sur le bouton {{Literal|Validez}}.

Cliquez au début de l'Axe de temps ({{Literal|0f}}), puis, dans le {{l|Keyframes Panel}} (celui qui a une clé pour icône), si la liste est vide, cliquez sur le bouton dont l'icône est un "+" (ajouter un nouvelle image clé).
Les {{l|Keyframe|Images clés}} nous permettent ''fixer'' la scène; c'est à dire, sur une Image Clé, toutes les propriétés de tous les éléments de la scène sont enregistrés.
De nouveau cliquez sur l'Axe de temps à {{Literal|4s 12f}} (ie 4.5s à 24 images par seconde - fps).
Cliquez sur le bonhomme vert en bas à droite de la fenêtre Canevas (l'icône peut être différente suivant le thème de votre système) pour basculez dans le {{l|Animate Editing Mode}} (le bonhomme devient rouge).

Avec l'{{l|Outil Transformation}}, sélectionnez le germe vert et déplacez le vertex supérieur vers le hautpour faire une tige.
Vous pouvez jouer avec les poignées du vertex pour tordre la forme légèrement si vous le voulez.

[[Image:FlowerTutorial 3 Canvas 0.63.06.png|center|frame]]

Pendant que vous en êtes à {{Literal|4s 12f}}, faites unclic-droit sur la bordure de la tige, refermez le haut et choisissez {{Literal|Insert Item (smart)}}. Faites de même de l'autre côté de la tige. Faites un clic-droit sur ces nouveaux points et choisissez {{Literal|Split Tangents}}. Puis essayez de faire une forme qui ressemble à celle de cette image pour créer le bouton de la fleur.

[[Image:FlowerTutorialCanvas4.png|center|frame]]

Maintenant si vous cliquez sur {{Literal|2s}} (par exemple), vous verrez que la forme du bouton est presque visible, meêm si le bourgeon est relativement petit et même si les poignées du bouton sont invisibles.

[[Image:FlowerTutorialCanvas5.png|center|frame]]

Disons que nous voulions que le bouton n'apparaisse qu'à 3s 12f, et soit à sa taille finale à 4s 12f.

Cliquez sur {{Literal|3s 12f}} sur la Ligne de Temps. Maintenant jetez un oeil aux panneaux {{Literal|Paramètres}} et {{Literal|Ligne de Temps}} en bas. Vous verrez que chacun des paramètres dans le panneau Paramètres correspond à une ligne dans le panneau Ligne de Temps. Le dernier paramètre est la liste des vertices. Cliquez sur la petite flèche à gauche pour déplier la liste. Vous devriez voir quelque chose comme ceci:

[[Image:FlowerTutorial 6 TimeTrackParameterPanel 0.63.06.png|center|frame]]

Chaque gros point vert (ou {{l|waypoints|waypoint}}) correspond à une valeur enregistrée (ici les positions des vertices qui ont été enregistrées à 0f avec la keyframe, et à 4s quand nous avons bougé quelques vertices ou poignées de vertices). Les deux vertices que nous avons ajoutés pour former le bouton sont marqués à {{Literal|DYN}} (dynamic). Faites un clic-droit dessus dans la liste des paramètres et sélectionnez "Mark Activepoint as Off".

Le panneau devrait ressembler désormais à ceci, la partie grise étant la partie où les vertices du bouton n'ont pas d'effet sur la tige.

[[Image:FlowerTutorial 7 WaypointsActivepointsOff.png|center|frame]]

Par exemple si vous cliquez sur {{Literal|2s}} ou même {{Literal|3s}} maintenant, la forme du bouton n'est pas visible. Il commence à apparaître seulement un peu après 3s 12f.

Cependant, la forme de la tige peut ne pas paraître bonne durant sa croissance entre 0 et 4s. Assurez vous que vous êtes toujours en Mode Animation et ajustez la forme à différents moements dans le temps afin d'obtenir quelque chose que vous aimez.

L'animation de la tige est maintenant terminée mais il manque toujours les pétales.
Vous pouvez voir une prévisualisation de votre animation: allez à {{c|File|Preview}}, validez, attendez que la prévisualisation ait été générée et regardez.

{{Note|Note|Les prévisualisations sont souvent très pixelisées et floues mais le rendu final sera impeccable. On peut obtenir des qualités de prévisualisation de meilleure qualité en utilisant des valeurs supérieures pour 'Zoom' et 'Frames per second' dans la boîte de dialogue.}}

== Ajouter des pétales ==

Maintenant quitter le {{Literal|Mode Animation}} en cliquant sur le cercle rouge en bas à droite du Canevas.

Changez la couleur de remplissage en rose, et créez un pétale avec l'outil Spline. Vous remarquerez que la {{l|duck|poignée}} verte qui permet un mouvement facile de la forme est au centre du canevas. Sélectionnez tous les vertices du pétale avec {{Shortcut|Ctrl|a}} et déplacez-les pès de la poignée verte (avec l'outil Transformation), comme indiqué.

[[Image:FlowerTutorial-8.png|center|frame]]

Puis tirez la poignée vers très près du sommet du bouton de fleur. Pressez {{Shortcut|Ctrl|a}} à nouveau pour sélectionner tous les vertices du pétale et ajustez-le un peu avec l'outil Rotation. Aussi, dans le {{l|Panneau Calques}} sélectionnez le calque du pétale et placez-le '''en-dessous''' du calque de la tige.
Cliquez sur le pétale pour le sélectionner, puis ctrl-clic sur la tige. Les deux objets devraient être sélectionnés.
Maintenant cliquez sur le vertex au sommet de la tige et ctrl-clic sur la poignée verte du pétale (les deux devraient apparaître en couleur plus claire, du fait qu'elles sont sélectionnées). Puis clic-droit sur le vertex du haut de la tige, et sélectionnez {{Literal|Lier}}. Le pétale bougera un peu car la poignée verte est raccordée au vertex de la tige.

[[Image:FlowerTutorial-9.png|center|frame]]

Maintenant qu'il y a un lien entre le pétale et le haut de la tige, quand le haut de la tige bouge, le pétale suivra le mouvement. (Et si la poignée verte du pétal bouge, le sommet de la tige bougera mais nous ne voulons pas faire ça ici.)

Dans le Panneau Calques, sélectionnez le calque Pétale nouvellement créé et dupliquez-le (avec le troisième bouton, sur le bas du Panneau Calques). Sur le Canevas, pressez {{Shortcut|Ctrl|A}} pour sélectionner tous les vertices et du pétale dupliqué, et déplacez-les un peu afin que les pétales ne soient plus recouverts. (Ne déplacez pas la poignée verte, juste les oranges). Répétez le processus plusieurs fois pour obtenir quelque chose qui ressemble à ceci.

[[Image:FlowerTutorial-10.png|center|frame]]

Notez que les pétales dupliqués soient également liés à la tige.
Si vous retournez à la première keyframe, vous verrez que les pétales sont visibles.
Nous ne voulons pas ça. Nous voulons que les pétales apparaissent et fleurissent presque à la fin de leur croissance.

== Cacher les pétales ==



Disons que nous voulions que les pétales apparaissent un peu après 4 secondes dans l'animation et qu'elle soit à sa taille finale à 5 secondes, au lieu d'être visible et à sa taille finale tout le temps.

Basculez en {{Literal|Mode Animation}} à nouveau en cliquant sur le cercle vert en bas à droite du Canevas. Mais si nous allons à {{Literal|4s}} et les modifions, alors ils changent également à {{Literal|5s}}. Puisque la forme/position des pétales n'est pas fixée à ce moment du temps par un quelconque waypoints ou keyframes. Cela signifie que nous avons besoin d'une keyframe à {{Literal|5s}}. Sur la Ligne de Temps, cliquez pour placer le curseur à 5 secondes. Dans le {{l|Panneau des Keyframes}}, cliquez sur "+" pour ajouter une nouvelle keyframe.

Maintenant cliquez sur {{literal|4s}}, et dans le Panneau Calques sélectionnez tous les calques des pétales (avech ctrl+clic), puis pressez {{Shortcut|Ctrl|A}} pour sélectionner tous les vertices des pétales. Réduisez leur échelle avec l'{{l|Outil Echelle}}, et déplacez-les de telle sorte qu'ils soient cachés par la tige comme montré.

[[Image:FlowerTutorial-11.png|center|frame]]

DE 4s à 5s, les pétales vont maintenant apparaître et fleurir. Mais remarquez que nous avons une keyframe à 0s qui nous rappelle aussi la forme des pétales. Cela pose problème — les pétales sont toujours visibles depuis la première keyframe jusqu'à la keyframe des 4s.
Nous pourrions soit réduire les pétales etajuster leur taille durant chaque trame entre 0s et 4s, ou nous pourrions les rendre invisibles durant cet intervalle.

Choisissons cette seconde solution. Pour rendre les choses plus faciles, nous allons {{l|encapsulate|grouper}} les calques pétales dans un {{l|Paste Canvas|Inline Canvas}}. Avec tous les calques pétales sélectionnés, cliquez-droitsur les calquesdans le Panneau des Calques et sélectionnez {{Literal|Grouper}}. Vous pouvez renommer les calques pour rendre le schoses plus compréhensibles.

[[Image:FlowerTutorial 12 0.63.06.png|center|frame]]

Sélectionnez le Canevas "Pétales" et sautes à la première keyframe. Dans l'onglet Param, définissez la valeur {{Literal|Quantité}} à {{Literal|0}}. Les pétales sont désormais invisibles pour cette keyframe.
Notez que deux waypoints sont ajoutés devant le paramètre {{Literal|Quantité}}, un à 0s et l'autre à 5s. Tirez le waypoint de 5s à 4s afin que l'opacité des pétales soit à 1 à 4s.

[[Image:FlowerTutorial 13 0.63.06.png|center|frame]]

Il reste cependant un problème: de 0s à 4s, l'opacité des pétales augmente lentement, rendant visible les pétales quand ils ne le devraient pas. Afin de résoudre ceci, nous allons changer la méthode d'interpolation de la Quantité. Clquez-droit sur le waypoint Quantité à 0f, et sélectionnez {{Literal|Editer}}. Un nouveau dialogue va apparaître dans lequel vous pouver choisr l'interpolation In et Out. Définissez l'Interpolation Out à {{Literal|Constante}}.

[[Image:FlowerTutorial 14 0.63.06.png|center|frame]]

{{Note|Tip|Vous pouvez aussi changerl'interpolation Out du waypoint Out en cliquant-droit dessus et en sélectionnant {{c|Out|Constante}}.}}
Cela signifie que ''après'' ce waypoint, la valeur Quantité restera constante jusqu'à ce qu'un autre waypoint soit rencontré. Donc depuis 0f à 4s la valeur Quantité sera égale à 0, et à 4s elle sera soudainement changée à 1, et rendra les pétales visibles, comme attendu. Alternativement nous pourrions avoir obtenu le même effet en définissant l'Interpolation In du waypoint à 4s à {{Literal|Constante}}.

Notez comment (la moitié du) waypoint change d'un cercle vert (signifiant une animation douce du paramètre de Qantité) à une étape rouge (signifiant que le paramètre Quantité est soudainement changé).

On y est.
La tige grandit durant 4.5 secondes et restera fixe durant les dernières 1.5 secondes.
Les pétales sont cachés jusqu'à 4 secondes, puis grandissent rapidement entre 4 et 5 secondes, et restent fixes durant la dernière seconde également.

Clqiez sur {{c|File|Rendu}} pour effectuer le rendu de l'Animation. Sélectionnez le format désiré, et assurez-vous que l'option {{Literal|Utiliser la trame en cours}} soit décochée (sinon une seule trame sera rendue).

Vous pouvez télécharger le projet [[File:FlowerTutorial.sifz|FlowerTutorial]] utilisé pour les captures d'écran.

== La suite ==

Synfig Studio inclus un {{l|Skeleton_Layer|système d'animation par Ossature}}. Dans le {{l|Doc:Basic_Bone_Tutorial|tutoriel suivant}} vous allez apprendre à réaliser une ossature basique.

{{Navigation|Category:Manual|Doc:Basic_Bone_Tutorial}}

Doc:Flower Animation/fr

2018-02-18T01:44:20Z

BobSynfig: /* Hiding the petals */ Traduction du paragraphe

{{Title|Animer des formes}}
{{Navigation|Category:Manual|Doc:Basic_Bone_Tutorial}}
{{Category|Tutorials}}
{{Category|Tutorials Intermediate}}
{{Category|Updated}}
{{NewTerminology}}


Cette page à besoin d'être traduite, soyez patient et/ou participez!

=== Éléments de base ===

Dans le {{l|Doc:Creating_Shapes|tutorial précédent}}, vous avez appris à créer des formes avec l'{{l|Spline Tool}}, dans ce tutoriel, nous allons apprendre comment créer une animation simple consistant à faire grandir une fleur en utilisant les {{l|Doc:Creating Shapes|Splines}}.

[[File:FlowerTutorial 0.png|right|frame]] Ouvrez ''Synfig Studio''— une nouvelle animation se crée. Si ''Synfig Studio'' est déjà ouvert, faites {{c|Fichier|Nouveau}} dans la boite à outil.

Premièrement, nous avons besoin de créer un dégradé comme arrière-plan. Cliquez sur les couleurs de contour et de remplissage dans la {{l|Toolbox}} pour sélectionner les couleurs que votre dégradé prendra. Vous pouvez également éditer directement le dégradé en cliquant sur la ligne Dégradé par défaut dans la boite à outils.

Sélectionnez l'{{l|Gradient Tool}} et déplacer votre curseur verticalement le long du canevas pour le remplir avec un dégradé.

Ensuite, sélectionnez l'{{l|Spline Tool}} et dans le panneau d'option des outils, vérifiez que uniquement {{Literal|Créer une Région}} est sélectionné. Dans la boite à outils, mettez la couleur de remplissage sur vert. Dessinez une sorte de triangle avec l'Outil Spline. Pour fermer la forme après avoir dessiné les trois vertex, cliquez droit sur le premier vertex et choisissez {{Literal|Boucler}}.

Maintenant que le chemin de la forme est fermé, vous pouvez générer réellement la forme en sélectionnant un autre outil ou en cliquant sur le bouton avec l'icône engrenages dans le bas du {{l|Tool Options Panel}}.

[[File:FlowerTutorial 1 Canvas 0.63.06.png|center|frame]]

Cela seras la base de la tige. Vous pouvez modifier les poignées de tangentes (les points rouges) un petit peu pour rendre le triangle plus rond. Avec l'{{l|Transform tool}}, cliquez-droit sur chacun des vertex et sélectionner {{Literal|Séparer les tangentes}}, ainsi les poignées de tangentes de chaque vertex peuvent être déplacé indépendamment.

[[File:FlowerTutorial 2 Canvas 0.63.06.png|center|frame]]

== Animation de la tige ==

Depuis le Menu Canvas, sélectionnez l'icone du {{l|Caret|menu chevron}} dans le coin supérieur gauche, à l'endroit ou les règles se croise, et sélectionnez {{c|Canevas|Propriétés}}. Allez sur l'onglet {{Literal|Temps}}, réglez {{Literal|Heure de fin}} à {{Literal|6s}} et cliquez sur le bouton {{Literal|Validez}}.

Cliquez au début de l'Axe de temps ({{Literal|0f}}), puis, dans le {{l|Keyframes Panel}} (celui qui a une clé pour icône), si la liste est vide, cliquez sur le bouton dont l'icône est un "+" (ajouter un nouvelle image clé).
Les {{l|Keyframe|Images clés}} nous permettent ''fixer'' la scène; c'est à dire, sur une Image Clé, toutes les propriétés de tous les éléments de la scène sont enregistrés.
De nouveau cliquez sur l'Axe de temps à {{Literal|4s 12f}} (ie 4.5s à 24 images par seconde - fps).
Cliquez sur le bonhomme vert en bas à droite de la fenêtre Canevas (l'icône peut être différente suivant le thème de votre système) pour basculez dans le {{l|Animate Editing Mode}} (le bonhomme devient rouge).

Avec l'{{l|Outil Transformation}}, sélectionnez le germe vert et déplacez le vertex supérieur vers le hautpour faire une tige.
Vous pouvez jouer avec les poignées du vertex pour tordre la forme légèrement si vous le voulez.

[[Image:FlowerTutorial 3 Canvas 0.63.06.png|center|frame]]

Pendant que vous en êtes à {{Literal|4s 12f}}, faites unclic-droit sur la bordure de la tige, refermez le haut et choisissez {{Literal|Insert Item (smart)}}. Faites de même de l'autre côté de la tige. Faites un clic-droit sur ces nouveaux points et choisissez {{Literal|Split Tangents}}. Puis essayez de faire une forme qui ressemble à celle de cette image pour créer le bouton de la fleur.

[[Image:FlowerTutorialCanvas4.png|center|frame]]

Maintenant si vous cliquez sur {{Literal|2s}} (for example), you'll see that the shape of the bud is slightly visible, even if the sprout is rather small, and even if the bud ducks are invisible.

[[Image:FlowerTutorialCanvas5.png|center|frame]]

Disons que nous voulions que le bouton n'apparaisse qu'à 3s 12f, et soit à sa taille finale à 4s 12f.

Cliquez sur {{Literal|3s 12f}} sur la Ligne de Temps. Maintenant jetez un oeil aux panneaux {{Literal|Paramètres}} et {{Literal|Ligne de Temps}} en bas. Vous verrez que chacun des paramètres dans le panneau Paramètres correspond à une ligne dans le panneau Ligne de Temps. Le dernier paramètre est la liste des vertices. Cliquez sur la petite flèche à gauche pour déplier la liste. Vous devriez voir quelque chose comme ceci:

[[Image:FlowerTutorial 6 TimeTrackParameterPanel 0.63.06.png|center|frame]]

Chaque gros point vert (ou {{l|waypoints|waypoint}}) correspond à une valeur enregistrée (ici les positions des vertices qui ont été enregistrées à 0f avec la keyframe, et à 4s quand nous avons bougé quelques vertices ou poignées de vertices). Les deux vertices que nous avons ajoutés pour former le bouton sont marqués à {{Literal|DYN}} (dynamic). Faites un clic-droit dessus dans la liste des paramètres et sélectionnez "Mark Activepoint as Off".

Le panneau devrait ressembler désormais à ceci, la partie grise étant la partie où les vertices du bouton n'ont pas d'effet sur la tige.

[[Image:FlowerTutorial 7 WaypointsActivepointsOff.png|center|frame]]

Par exemple si vous cliquez sur {{Literal|2s}} ou même {{Literal|3s}} maintenant, la forme du bouton n'est pas visible. Il commence à apparaître seulement un peu après 3s 12f.

Cependant, la forme de la tige peut ne pas paraître bonne durant sa croissance entre 0 et 4s. Assurez vous que vous êtes toujours en Mode Animation et ajustez la forme à différents moements dans le temps afin d'obtenir quelque chose que vous aimez.

L'animation de la tige est maintenant terminée mais il manque toujours les pétales.
Vous pouvez voir une prévisualisation de votre animation: allez à {{c|File|Preview}}, validez, attendez que la prévisualisation ait été générée et regardez.

{{Note|Note|Les prévisualisations sont souvent très pixelisées et floues mais le rendu final sera impeccable. On peut obtenir des qualités de prévisualisation de meilleure qualité en utilisant des valeurs supérieures pour 'Zoom' et 'Frames per second' dans la boîte de dialogue.}}

== Ajouter des pétales ==

Maintenant quitter le {{Literal|Mode Animation}} en cliquant sur le cercle rouge en bas à droite du Canevas.

Changez la couleur de remplissage en rose, et créez un pétale avec l'outil Spline. Vous remarquerez que la {{l|duck|poignée}} verte qui permet un mouvement facile de la forme est au centre du canevas. Sélectionnez tous les vertices du pétale avec {{Shortcut|Ctrl|a}} et déplacez-les pès de la poignée verte (avec l'outil Transformation), comme indiqué.

[[Image:FlowerTutorial-8.png|center|frame]]

Puis tirez la poignée vers très près du sommet du bouton de fleur. Pressez {{Shortcut|Ctrl|a}} à nouveau pour sélectionner tous les vertices du pétale et ajustez-le un peu avec l'outil Rotation. Aussi, dans le {{l|Panneau Calques}} sélectionnez le calque du pétale et placez-le '''en-dessous''' du calque de la tige.
Cliquez sur le pétale pour le sélectionner, puis ctrl-clic sur la tige. Les deux objets devraient être sélectionnés.
Maintenant cliquez sur le vertex au sommet de la tige et ctrl-clic sur la poignée verte du pétale (les deux devraient apparaître en couleur plus claire, du fait qu'elles sont sélectionnées). Puis clic-droit sur le vertex du haut de la tige, et sélectionnez {{Literal|Lier}}. Le pétale bougera un peu car la poignée verte est raccordée au vertex de la tige.

[[Image:FlowerTutorial-9.png|center|frame]]

Maintenant qu'il y a un lien entre le pétale et le haut de la tige, quand le haut de la tige bouge, le pétale suivra le mouvement. (Et si la poignée verte du pétal bouge, le sommet de la tige bougera mais nous ne voulons pas faire ça ici.)

Dans le Panneau Calques, sélectionnez le calque Pétale nouvellement créé et dupliquez-le (avec le troisième bouton, sur le bas du Panneau Calques). Sur le Canevas, pressez {{Shortcut|Ctrl|A}} pour sélectionner tous les vertices et du pétale dupliqué, et déplacez-les un peu afin que les pétales ne soient plus recouverts. (Ne déplacez pas la poignée verte, juste les oranges). Répétez le processus plusieurs fois pour obtenir quelque chose qui ressemble à ceci.

[[Image:FlowerTutorial-10.png|center|frame]]

Notez que les pétales dupliqués soient également liés à la tige.
Si vous retournez à la première keyframe, vous verrez que les pétales sont visibles.
Nous ne voulons pas ça. Nous voulons que les pétales apparaissent et fleurissent presque à la fin de leur croissance.

== Cacher les pétales ==



Disons que nous voulions que les pétales apparaissent un peu après 4 secondes dans l'animation et qu'elle soit à sa taille finale à 5 secondes, au lieu d'être visible et à sa taille finale tout le temps.

Basculez en {{Literal|Mode Animation}} à nouveau en cliquant sur le cercle vert en bas à droite du Canevas. Mais si nous allons à {{Literal|4s}} et les modifions, alors ils changent également à {{Literal|5s}}. Puisque la forme/position des pétales n'est pas fixée à ce moment du temps par un quelconque waypoints ou keyframes. Cela signifie que nous avons besoin d'une keyframe à {{Literal|5s}}. Sur la Ligne de Temps, cliquez pour placer le curseur à 5 secondes. Dans le {{l|Panneau des Keyframes}}, cliquez sur "+" pour ajouter une nouvelle keyframe.

Maintenant cliquez sur {{literal|4s}}, et dans le Panneau Calques sélectionnez tous les calques des pétales (avech ctrl+clic), puis pressez {{Shortcut|Ctrl|A}} pour sélectionner tous les vertices des pétales. Réduisez leur échelle avec l'{{l|Outil Echelle}}, et déplacez-les de telle sorte qu'ils soient cachés par la tige comme montré.

[[Image:FlowerTutorial-11.png|center|frame]]

DE 4s à 5s, les pétales vont maintenant apparaître et fleurir. Mais remarquez que nous avons une keyframe à 0s qui nous rappelle aussi la forme des pétales. Cela pose problème — les pétales sont toujours visibles depuis la première keyframe jusqu'à la keyframe des 4s.
Nous pourrions soit réduire les pétales etajuster leur taille durant chaque trame entre 0s et 4s, ou nous pourrions les rendre invisibles durant cet intervalle.

Choisissons cette seconde solution. Pour rendre les choses plus faciles, nous allons {{l|encapsulate|grouper}} les calques pétales dans un {{l|Paste Canvas|Inline Canvas}}. Avec tous les calques pétales sélectionnés, cliquez-droitsur les calquesdans le Panneau des Calques et sélectionnez {{Literal|Grouper}}. Vous pouvez renommer les calques pour rendre le schoses plus compréhensibles.

[[Image:FlowerTutorial 12 0.63.06.png|center|frame]]

Sélectionnez le Canevas "Pétales" et sautes à la première keyframe. Dans l'onglet Param, définissez la valeur {{Literal|Quantité}} à {{Literal|0}}. Les pétales sont désormais invisibles pour cette keyframe.
Notez que deux waypoints sont ajoutés devant le paramètre {{Literal|Quantité}}, un à 0s et l'autre à 5s. Tirez le waypoint de 5s à 4s afin que l'opacité des pétales soit à 1 à 4s.

[[Image:FlowerTutorial 13 0.63.06.png|center|frame]]

Il reste cependant un problème: de 0s à 4s, l'opacité des pétales augmente lentement, rendant visible les pétales quand ils ne le devraient pas. Afin de résoudre ceci, nous allons changer la méthode d'interpolation de la Quantité. Clquez-droit sur le waypoint Quantité à 0f, et sélectionnez {{Literal|Editer}}. Un nouveau dialogue va apparaître dans lequel vous pouver choisr l'interpolation In et Out. Définissez l'Interpolation Out à {{Literal|Constante}}.

[[Image:FlowerTutorial 14 0.63.06.png|center|frame]]

{{Note|Tip|Vous pouvez aussi changerl'interpolation Out du waypoint Out en cliquant-droit dessus et en sélectionnant {{c|Out|Constante}}.}}
Cela signifie que ''après'' ce waypoint, la valeur Quantité restera constante jusqu'à ce qu'un autre waypoint soit rencontré. Donc depuis 0f à 4s la valeur Quantité sera égale à 0, et à 4s elle sera soudainement changée à 1, et rendra les pétales visibles, comme attendu. Alternativement nous pourrions avoir obtenu le même effet en définissant l'Interpolation In du waypoint à 4s à {{Literal|Constante}}.

Notez comment (la moitié du) waypoint change d'un cercle vert (signifiant une animation douce du paramètre de Qantité) à une étape rouge (signifiant que le paramètre Quantité est soudainement changé).

On y est.
La tige grandit durant 4.5 secondes et restera fixe durant les dernières 1.5 secondes.
Les pétales sont cachés jusqu'à 4 secondes, puis grandissent rapidement entre 4 et 5 secondes, et restent fixes durant la dernière seconde également.

Clqiez sur {{c|File|Rendu}} pour effectuer le rendu de l'Animation. Sélectionnez le format désiré, et assurez-vous que l'option {{Literal|Utiliser la trame en cours}} soit décochée (sinon une seule trame sera rendue).

Vous pouvez télécharger le projet [[File:FlowerTutorial.sifz|FlowerTutorial]] utilisé pour les captures d'écran.

== La suite ==

Synfig Studio inclus un {{l|Skeleton_Layer|système d'animation par Ossature}}. Dans le {{l|Doc:Basic_Bone_Tutorial|tutoriel suivant}} vous allez apprendre à réaliser une ossature basique.

{{Navigation|Category:Manual|Doc:Basic_Bone_Tutorial}}

Doc:Flower Animation/fr

2018-02-18T01:10:20Z

BobSynfig: /* Adding the petals */ Traduction du paragraphe

{{Title|Animer des formes}}
{{Navigation|Category:Manual|Doc:Basic_Bone_Tutorial}}
{{Category|Tutorials}}
{{Category|Tutorials Intermediate}}
{{Category|Updated}}
{{NewTerminology}}


Cette page à besoin d'être traduite, soyez patient et/ou participez!

=== Éléments de base ===

Dans le {{l|Doc:Creating_Shapes|tutorial précédent}}, vous avez appris à créer des formes avec l'{{l|Spline Tool}}, dans ce tutoriel, nous allons apprendre comment créer une animation simple consistant à faire grandir une fleur en utilisant les {{l|Doc:Creating Shapes|Splines}}.

[[File:FlowerTutorial 0.png|right|frame]] Ouvrez ''Synfig Studio''— une nouvelle animation se crée. Si ''Synfig Studio'' est déjà ouvert, faites {{c|Fichier|Nouveau}} dans la boite à outil.

Premièrement, nous avons besoin de créer un dégradé comme arrière-plan. Cliquez sur les couleurs de contour et de remplissage dans la {{l|Toolbox}} pour sélectionner les couleurs que votre dégradé prendra. Vous pouvez également éditer directement le dégradé en cliquant sur la ligne Dégradé par défaut dans la boite à outils.

Sélectionnez l'{{l|Gradient Tool}} et déplacer votre curseur verticalement le long du canevas pour le remplir avec un dégradé.

Ensuite, sélectionnez l'{{l|Spline Tool}} et dans le panneau d'option des outils, vérifiez que uniquement {{Literal|Créer une Région}} est sélectionné. Dans la boite à outils, mettez la couleur de remplissage sur vert. Dessinez une sorte de triangle avec l'Outil Spline. Pour fermer la forme après avoir dessiné les trois vertex, cliquez droit sur le premier vertex et choisissez {{Literal|Boucler}}.

Maintenant que le chemin de la forme est fermé, vous pouvez générer réellement la forme en sélectionnant un autre outil ou en cliquant sur le bouton avec l'icône engrenages dans le bas du {{l|Tool Options Panel}}.

[[File:FlowerTutorial 1 Canvas 0.63.06.png|center|frame]]

Cela seras la base de la tige. Vous pouvez modifier les poignées de tangentes (les points rouges) un petit peu pour rendre le triangle plus rond. Avec l'{{l|Transform tool}}, cliquez-droit sur chacun des vertex et sélectionner {{Literal|Séparer les tangentes}}, ainsi les poignées de tangentes de chaque vertex peuvent être déplacé indépendamment.

[[File:FlowerTutorial 2 Canvas 0.63.06.png|center|frame]]

== Animation de la tige ==

Depuis le Menu Canvas, sélectionnez l'icone du {{l|Caret|menu chevron}} dans le coin supérieur gauche, à l'endroit ou les règles se croise, et sélectionnez {{c|Canevas|Propriétés}}. Allez sur l'onglet {{Literal|Temps}}, réglez {{Literal|Heure de fin}} à {{Literal|6s}} et cliquez sur le bouton {{Literal|Validez}}.

Cliquez au début de l'Axe de temps ({{Literal|0f}}), puis, dans le {{l|Keyframes Panel}} (celui qui a une clé pour icône), si la liste est vide, cliquez sur le bouton dont l'icône est un "+" (ajouter un nouvelle image clé).
Les {{l|Keyframe|Images clés}} nous permettent ''fixer'' la scène; c'est à dire, sur une Image Clé, toutes les propriétés de tous les éléments de la scène sont enregistrés.
De nouveau cliquez sur l'Axe de temps à {{Literal|4s 12f}} (ie 4.5s à 24 images par seconde - fps).
Cliquez sur le bonhomme vert en bas à droite de la fenêtre Canevas (l'icône peut être différente suivant le thème de votre système) pour basculez dans le {{l|Animate Editing Mode}} (le bonhomme devient rouge).

Avec l'{{l|Outil Transformation}}, sélectionnez le germe vert et déplacez le vertex supérieur vers le hautpour faire une tige.
Vous pouvez jouer avec les poignées du vertex pour tordre la forme légèrement si vous le voulez.

[[Image:FlowerTutorial 3 Canvas 0.63.06.png|center|frame]]

Pendant que vous en êtes à {{Literal|4s 12f}}, faites unclic-droit sur la bordure de la tige, refermez le haut et choisissez {{Literal|Insert Item (smart)}}. Faites de même de l'autre côté de la tige. Faites un clic-droit sur ces nouveaux points et choisissez {{Literal|Split Tangents}}. Puis essayez de faire une forme qui ressemble à celle de cette image pour créer le bouton de la fleur.

[[Image:FlowerTutorialCanvas4.png|center|frame]]

Maintenant si vous cliquez sur {{Literal|2s}} (for example), you'll see that the shape of the bud is slightly visible, even if the sprout is rather small, and even if the bud ducks are invisible.

[[Image:FlowerTutorialCanvas5.png|center|frame]]

Disons que nous voulions que le bouton n'apparaisse qu'à 3s 12f, et soit à sa taille finale à 4s 12f.

Cliquez sur {{Literal|3s 12f}} sur la Ligne de Temps. Maintenant jetez un oeil aux panneaux {{Literal|Paramètres}} et {{Literal|Ligne de Temps}} en bas. Vous verrez que chacun des paramètres dans le panneau Paramètres correspond à une ligne dans le panneau Ligne de Temps. Le dernier paramètre est la liste des vertices. Cliquez sur la petite flèche à gauche pour déplier la liste. Vous devriez voir quelque chose comme ceci:

[[Image:FlowerTutorial 6 TimeTrackParameterPanel 0.63.06.png|center|frame]]

Chaque gros point vert (ou {{l|waypoints|waypoint}}) correspond à une valeur enregistrée (ici les positions des vertices qui ont été enregistrées à 0f avec la keyframe, et à 4s quand nous avons bougé quelques vertices ou poignées de vertices). Les deux vertices que nous avons ajoutés pour former le bouton sont marqués à {{Literal|DYN}} (dynamic). Faites un clic-droit dessus dans la liste des paramètres et sélectionnez "Mark Activepoint as Off".

Le panneau devrait ressembler désormais à ceci, la partie grise étant la partie où les vertices du bouton n'ont pas d'effet sur la tige.

[[Image:FlowerTutorial 7 WaypointsActivepointsOff.png|center|frame]]

Par exemple si vous cliquez sur {{Literal|2s}} ou même {{Literal|3s}} maintenant, la forme du bouton n'est pas visible. Il commence à apparaître seulement un peu après 3s 12f.

Cependant, la forme de la tige peut ne pas paraître bonne durant sa croissance entre 0 et 4s. Assurez vous que vous êtes toujours en Mode Animation et ajustez la forme à différents moements dans le temps afin d'obtenir quelque chose que vous aimez.

L'animation de la tige est maintenant terminée mais il manque toujours les pétales.
Vous pouvez voir une prévisualisation de votre animation: allez à {{c|File|Preview}}, validez, attendez que la prévisualisation ait été générée et regardez.

{{Note|Note|Les prévisualisations sont souvent très pixelisées et floues mais le rendu final sera impeccable. On peut obtenir des qualités de prévisualisation de meilleure qualité en utilisant des valeurs supérieures pour 'Zoom' et 'Frames per second' dans la boîte de dialogue.}}

== Ajouter des pétales ==

Maintenant quitter le {{Literal|Mode Animation}} en cliquant sur le cercle rouge en bas à droite du Canevas.

Changez la couleur de remplissage en rose, et créez un pétale avec l'outil Spline. Vous remarquerez que la {{l|duck|poignée}} verte qui permet un mouvement facile de la forme est au centre du canevas. Sélectionnez tous les vertices du pétale avec {{Shortcut|Ctrl|a}} et déplacez-les pès de la poignée verte (avec l'outil Transformation), comme indiqué.

[[Image:FlowerTutorial-8.png|center|frame]]

Puis tirez la poignée vers très près du sommet du bouton de fleur. Pressez {{Shortcut|Ctrl|a}} à nouveau pour sélectionner tous les vertices du pétale et ajustez-le un peu avec l'outil Rotation. Aussi, dans le {{l|Panneau Calques}} sélectionnez le calque du pétale et placez-le '''en-dessous''' du calque de la tige.
Cliquez sur le pétale pour le sélectionner, puis ctrl-clic sur la tige. Les deux objets devraient être sélectionnés.
Maintenant cliquez sur le vertex au sommet de la tige et ctrl-clic sur la poignée verte du pétale (les deux devraient apparaître en couleur plus claire, du fait qu'elles sont sélectionnées). Puis clic-droit sur le vertex du haut de la tige, et sélectionnez {{Literal|Lier}}. Le pétale bougera un peu car la poignée verte est raccordée au vertex de la tige.

[[Image:FlowerTutorial-9.png|center|frame]]

Maintenant qu'il y a un lien entre le pétale et le haut de la tige, quand le haut de la tige bouge, le pétale suivra le mouvement. (Et si la poignée verte du pétal bouge, le sommet de la tige bougera mais nous ne voulons pas faire ça ici.)

Dans le Panneau Calques, sélectionnez le calque Pétale nouvellement créé et dupliquez-le (avec le troisième bouton, sur le bas du Panneau Calques). Sur le Canevas, pressez {{Shortcut|Ctrl|A}} pour sélectionner tous les vertices et du pétale dupliqué, et déplacez-les un peu afin que les pétales ne soient plus recouverts. (Ne déplacez pas la poignée verte, juste les oranges). Répétez le processus plusieurs fois pour obtenir quelque chose qui ressemble à ceci.

[[Image:FlowerTutorial-10.png|center|frame]]

Notez que les pétales dupliqués soient également liés à la tige.
Si vous retournez à la première keyframe, vous verrez que les pétales sont visibles.
Nous ne voulons pas ça. Nous voulons que les pétales apparaissent et fleurissent presque à la fin de leur croissance.

== Hiding the petals ==



Let's say we want the petals to appear a little after 4 seconds in the animation, and be full size at 5 seconds, instead of being visible and full size all the time.

Switch to {{Literal|Animate Editing Mode}} again by clicking on the green circle at the bottom right of the canvas. But if we will go to {{Literal|4s}} and modify them, then they also change at {{Literal|5s}}. Because the shape/position of the petals is not fixated at this moment of time by any waypoints or keyframes. That means that we need a keyframe at {{Literal|5s}}. On the timetrack, click to place the cursor at 5 seconds. On the {{l|Keyframes Panel}}, click on "+" to add a new keyframe.

Now click on {{literal|4s}}, and on the Layers Panel, select all the petals layers (with ctrl+click), then press {{Shortcut|Ctrl|A}} to select all the petals vertices. Scale them down with the {{l|Scale Tool}}, and move them, so they are hidden by the stem, as shown.

[[Image:FlowerTutorial-11.png|center|frame]]

From 4s to 5s, the petals will now appear and bloom. But notice that we have a keyframe at 0s which also remembers petals shape. That makes the problem — the petals are still visible from the first keyframe to the 4s keyframe.
We could either make the petals tiny and hidden tweaking their size on every frame from 0s to 4s, or we could make them invisible on this interval.

Let's choose the second solution. To make things easier, we are going to {{l|encapsulate|encapsulate}} the petal layers into an {{l|Paste Canvas|Inline Canvas}}. With all the petal layers selected, right-click on them on the Layers Panel and select {{Literal|Encapsulate}}. You can rename the layers to
make things more understandable.

[[Image:FlowerTutorial 12 0.63.06.png|center|frame]]

Select the "Petals" inline canvas and jump to the first keyframe. In the Param tabs, set the {{Literal|Amount}} value to {{Literal|0}}. The petals are now invisible on that keyframe.
Note that two waypoints were added in front of the {{Literal|Amount}} parameter, one at 0s and the other at 5s. Drag the 5s waypoint to 4s, so that the opacity of the petals will be 1 at 4s.

[[Image:FlowerTutorial 13 0.63.06.png|center|frame]]

There is still one problem left: from 0s to 4s, the opacity of the petals slowly increases, making the petals visible when they shouldn't. To solve this, we will change the Amount interpolation method. Right click on the Amount waypoint at 0f, and select {{Literal|Edit}}. A new dialog will appear, in which you can choose the In and Out interpolation. Set the Out Interpolation to {{Literal|Constant}}.

[[Image:FlowerTutorial 14 0.63.06.png|center|frame]]

{{Note|Tip|You can also change waypoint Out interpolation by right-clicking on it and selecting {{c|Out|Constant}}.}}
This means that ''after'' that waypoint, the Amount value will remain constant, until another waypoint is encountered. So from 0f to 4s the Amount value will be equal to 0, and at 4s it will suddenly changed to 1, and make the petals visible, as expected. Alternatively, we could have achieved the same effect by setting the In Interpolation of the waypoint at 4s to {{Literal|Constant}}.

Notice how (half of) the waypoint changes from a green circle (meaning smooth animation of the amount parameter) to a red step (meaning that the amount parameter is suddenly stepped).

Now you're done.
The stem grows for 4.5 seconds and then stays still the last 1.5 seconds.
The petals are hidden until 4 seconds, and then grow quickly between 4 and 5 seconds, and stay still the last 1 second too.

Click on {{c|File|Render}} to render your animation. Select any format you want, and ensure that {{Literal|Use current frame}} option is unchecked (otherwise, one frame only will be rendered).

You can download the project [[File:FlowerTutorial.sifz|FlowerTutorial]] used for the screenshots.

== La suite ==

Synfig Studio inclus un {{l|Skeleton_Layer|système d'animation par Ossature}}. Dans le {{l|Doc:Basic_Bone_Tutorial|tutoriel suivant}} vous allez apprendre à réaliser une ossature basique.

{{Navigation|Category:Manual|Doc:Basic_Bone_Tutorial}}

Doc:Flower Animation/fr

2018-02-18T00:27:24Z

BobSynfig: /* Animation de la tige */ Traduction de la fin du paragraphe

{{Title|Animer des formes}}
{{Navigation|Category:Manual|Doc:Basic_Bone_Tutorial}}
{{Category|Tutorials}}
{{Category|Tutorials Intermediate}}
{{Category|Updated}}
{{NewTerminology}}


Cette page à besoin d'être traduite, soyez patient et/ou participez!

=== Éléments de base ===

Dans le {{l|Doc:Creating_Shapes|tutorial précédent}}, vous avez appris à créer des formes avec l'{{l|Spline Tool}}, dans ce tutoriel, nous allons apprendre comment créer une animation simple consistant à faire grandir une fleur en utilisant les {{l|Doc:Creating Shapes|Splines}}.

[[File:FlowerTutorial 0.png|right|frame]] Ouvrez ''Synfig Studio''— une nouvelle animation se crée. Si ''Synfig Studio'' est déjà ouvert, faites {{c|Fichier|Nouveau}} dans la boite à outil.

Premièrement, nous avons besoin de créer un dégradé comme arrière-plan. Cliquez sur les couleurs de contour et de remplissage dans la {{l|Toolbox}} pour sélectionner les couleurs que votre dégradé prendra. Vous pouvez également éditer directement le dégradé en cliquant sur la ligne Dégradé par défaut dans la boite à outils.

Sélectionnez l'{{l|Gradient Tool}} et déplacer votre curseur verticalement le long du canevas pour le remplir avec un dégradé.

Ensuite, sélectionnez l'{{l|Spline Tool}} et dans le panneau d'option des outils, vérifiez que uniquement {{Literal|Créer une Région}} est sélectionné. Dans la boite à outils, mettez la couleur de remplissage sur vert. Dessinez une sorte de triangle avec l'Outil Spline. Pour fermer la forme après avoir dessiné les trois vertex, cliquez droit sur le premier vertex et choisissez {{Literal|Boucler}}.

Maintenant que le chemin de la forme est fermé, vous pouvez générer réellement la forme en sélectionnant un autre outil ou en cliquant sur le bouton avec l'icône engrenages dans le bas du {{l|Tool Options Panel}}.

[[File:FlowerTutorial 1 Canvas 0.63.06.png|center|frame]]

Cela seras la base de la tige. Vous pouvez modifier les poignées de tangentes (les points rouges) un petit peu pour rendre le triangle plus rond. Avec l'{{l|Transform tool}}, cliquez-droit sur chacun des vertex et sélectionner {{Literal|Séparer les tangentes}}, ainsi les poignées de tangentes de chaque vertex peuvent être déplacé indépendamment.

[[File:FlowerTutorial 2 Canvas 0.63.06.png|center|frame]]

== Animation de la tige ==

Depuis le Menu Canvas, sélectionnez l'icone du {{l|Caret|menu chevron}} dans le coin supérieur gauche, à l'endroit ou les règles se croise, et sélectionnez {{c|Canevas|Propriétés}}. Allez sur l'onglet {{Literal|Temps}}, réglez {{Literal|Heure de fin}} à {{Literal|6s}} et cliquez sur le bouton {{Literal|Validez}}.

Cliquez au début de l'Axe de temps ({{Literal|0f}}), puis, dans le {{l|Keyframes Panel}} (celui qui a une clé pour icône), si la liste est vide, cliquez sur le bouton dont l'icône est un "+" (ajouter un nouvelle image clé).
Les {{l|Keyframe|Images clés}} nous permettent ''fixer'' la scène; c'est à dire, sur une Image Clé, toutes les propriétés de tous les éléments de la scène sont enregistrés.
De nouveau cliquez sur l'Axe de temps à {{Literal|4s 12f}} (ie 4.5s à 24 images par seconde - fps).
Cliquez sur le bonhomme vert en bas à droite de la fenêtre Canevas (l'icône peut être différente suivant le thème de votre système) pour basculez dans le {{l|Animate Editing Mode}} (le bonhomme devient rouge).

Avec l'{{l|Outil Transformation}}, sélectionnez le germe vert et déplacez le vertex supérieur vers le hautpour faire une tige.
Vous pouvez jouer avec les poignées du vertex pour tordre la forme légèrement si vous le voulez.

[[Image:FlowerTutorial 3 Canvas 0.63.06.png|center|frame]]

Pendant que vous en êtes à {{Literal|4s 12f}}, faites unclic-droit sur la bordure de la tige, refermez le haut et choisissez {{Literal|Insert Item (smart)}}. Faites de même de l'autre côté de la tige. Faites un clic-droit sur ces nouveaux points et choisissez {{Literal|Split Tangents}}. Puis essayez de faire une forme qui ressemble à celle de cette image pour créer le bouton de la fleur.

[[Image:FlowerTutorialCanvas4.png|center|frame]]

Maintenant si vous cliquez sur {{Literal|2s}} (for example), you'll see that the shape of the bud is slightly visible, even if the sprout is rather small, and even if the bud ducks are invisible.

[[Image:FlowerTutorialCanvas5.png|center|frame]]

Disons que nous voulions que le bouton n'apparaisse qu'à 3s 12f, et soit à sa taille finale à 4s 12f.

Cliquez sur {{Literal|3s 12f}} sur la Ligne de Temps. Maintenant jetez un oeil aux panneaux {{Literal|Paramètres}} et {{Literal|Ligne de Temps}} en bas. Vous verrez que chacun des paramètres dans le panneau Paramètres correspond à une ligne dans le panneau Ligne de Temps. Le dernier paramètre est la liste des vertices. Cliquez sur la petite flèche à gauche pour déplier la liste. Vous devriez voir quelque chose comme ceci:

[[Image:FlowerTutorial 6 TimeTrackParameterPanel 0.63.06.png|center|frame]]

Chaque gros point vert (ou {{l|waypoints|waypoint}}) correspond à une valeur enregistrée (ici les positions des vertices qui ont été enregistrées à 0f avec la keyframe, et à 4s quand nous avons bougé quelques vertices ou poignées de vertices). Les deux vertices que nous avons ajoutés pour former le bouton sont marqués à {{Literal|DYN}} (dynamic). Faites un clic-droit dessus dans la liste des paramètres et sélectionnez "Mark Activepoint as Off".

Le panneau devrait ressembler désormais à ceci, la partie grise étant la partie où les vertices du bouton n'ont pas d'effet sur la tige.

[[Image:FlowerTutorial 7 WaypointsActivepointsOff.png|center|frame]]

Par exemple si vous cliquez sur {{Literal|2s}} ou même {{Literal|3s}} maintenant, la forme du bouton n'est pas visible. Il commence à apparaître seulement un peu après 3s 12f.

Cependant, la forme de la tige peut ne pas paraître bonne durant sa croissance entre 0 et 4s. Assurez vous que vous êtes toujours en Mode Animation et ajustez la forme à différents moements dans le temps afin d'obtenir quelque chose que vous aimez.

L'animation de la tige est maintenant terminée mais il manque toujours les pétales.
Vous pouvez voir une prévisualisation de votre animation: allez à {{c|File|Preview}}, validez, attendez que la prévisualisation ait été générée et regardez.

{{Note|Note|Les prévisualisations sont souvent très pixelisées et floues mais le rendu final sera impeccable. On peut obtenir des qualités de prévisualisation de meilleure qualité en utilisant des valeurs supérieures pour 'Zoom' et 'Frames per second' dans la boîte de dialogue.}}

== Adding the petals ==

Now leave the {{Literal|Animate Editing Mode}} by clicking on the red circle at the right bottom of the canvas.

Change the fill color to pink, and create a petal with the BLine Tool. You'll notice that the green {{l|duck|duck}} that allows easy movement of a shape is at the center of the canvas. Select all the vertices of the petal with {{Shortcut|Ctrl|a}} and move them close to the green duck (with the Transform Tool), as shown.

[[Image:FlowerTutorial-8.png|center|frame]]

Then drag the green duck very close to the top of the bud. Hit {{Shortcut|Ctrl|a}} again to select all vertices of the petal and tweak it a bit with Rotate Tool. Also, in the {{l|Layers Panel}} select the petal layer and put it '''under''' the stem layer.
Click on the petal to select it, then ctrl-click on the stem. Both objects should be selected.

Now click on the vertex at the top of the stem and ctrl-click on the green duck of the petal (both should appear in a lighter color, as they are selected). Then right-click on the stem top vertex, and select {{Literal|Link}}. The petal will move a bit as the green duck is snapped on the stem vertex.

[[Image:FlowerTutorial-9.png|center|frame]]

Now that there's a link between the petal and the top of the stem, when the top of the stem moves, the petal will follow the move. (And if the green duck of the petal moves, the top of the stem will move, but we don't want to do that here.)

On the Layers Panel, select the newly created Petal layer and duplicate it (with the third button, on the bottom of the Layers Panel). On the canvas, press {{Shortcut|Ctrl|A}} to select all the vertices of the duplicated petal, and move them a little, so the petals are no longer overlaid. (Don't move the green duck, just the orange ones). Repeat the process several time, to get something looking like this image.

[[Image:FlowerTutorial-10.png|center|frame]]

Note that the duplicated petals are also linked to the stem.
If you go back to the first keyframe, you'll see that the petals are visible.
We don't want that. We want the petals to appear and bloom almost at the end of the growth.

== Hiding the petals ==



Let's say we want the petals to appear a little after 4 seconds in the animation, and be full size at 5 seconds, instead of being visible and full size all the time.

Switch to {{Literal|Animate Editing Mode}} again by clicking on the green circle at the bottom right of the canvas. But if we will go to {{Literal|4s}} and modify them, then they also change at {{Literal|5s}}. Because the shape/position of the petals is not fixated at this moment of time by any waypoints or keyframes. That means that we need a keyframe at {{Literal|5s}}. On the timetrack, click to place the cursor at 5 seconds. On the {{l|Keyframes Panel}}, click on "+" to add a new keyframe.

Now click on {{literal|4s}}, and on the Layers Panel, select all the petals layers (with ctrl+click), then press {{Shortcut|Ctrl|A}} to select all the petals vertices. Scale them down with the {{l|Scale Tool}}, and move them, so they are hidden by the stem, as shown.

[[Image:FlowerTutorial-11.png|center|frame]]

From 4s to 5s, the petals will now appear and bloom. But notice that we have a keyframe at 0s which also remembers petals shape. That makes the problem — the petals are still visible from the first keyframe to the 4s keyframe.
We could either make the petals tiny and hidden tweaking their size on every frame from 0s to 4s, or we could make them invisible on this interval.

Let's choose the second solution. To make things easier, we are going to {{l|encapsulate|encapsulate}} the petal layers into an {{l|Paste Canvas|Inline Canvas}}. With all the petal layers selected, right-click on them on the Layers Panel and select {{Literal|Encapsulate}}. You can rename the layers to
make things more understandable.

[[Image:FlowerTutorial 12 0.63.06.png|center|frame]]

Select the "Petals" inline canvas and jump to the first keyframe. In the Param tabs, set the {{Literal|Amount}} value to {{Literal|0}}. The petals are now invisible on that keyframe.
Note that two waypoints were added in front of the {{Literal|Amount}} parameter, one at 0s and the other at 5s. Drag the 5s waypoint to 4s, so that the opacity of the petals will be 1 at 4s.

[[Image:FlowerTutorial 13 0.63.06.png|center|frame]]

There is still one problem left: from 0s to 4s, the opacity of the petals slowly increases, making the petals visible when they shouldn't. To solve this, we will change the Amount interpolation method. Right click on the Amount waypoint at 0f, and select {{Literal|Edit}}. A new dialog will appear, in which you can choose the In and Out interpolation. Set the Out Interpolation to {{Literal|Constant}}.

[[Image:FlowerTutorial 14 0.63.06.png|center|frame]]

{{Note|Tip|You can also change waypoint Out interpolation by right-clicking on it and selecting {{c|Out|Constant}}.}}
This means that ''after'' that waypoint, the Amount value will remain constant, until another waypoint is encountered. So from 0f to 4s the Amount value will be equal to 0, and at 4s it will suddenly changed to 1, and make the petals visible, as expected. Alternatively, we could have achieved the same effect by setting the In Interpolation of the waypoint at 4s to {{Literal|Constant}}.

Notice how (half of) the waypoint changes from a green circle (meaning smooth animation of the amount parameter) to a red step (meaning that the amount parameter is suddenly stepped).

Now you're done.
The stem grows for 4.5 seconds and then stays still the last 1.5 seconds.
The petals are hidden until 4 seconds, and then grow quickly between 4 and 5 seconds, and stay still the last 1 second too.

Click on {{c|File|Render}} to render your animation. Select any format you want, and ensure that {{Literal|Use current frame}} option is unchecked (otherwise, one frame only will be rendered).

You can download the project [[File:FlowerTutorial.sifz|FlowerTutorial]] used for the screenshots.

== La suite ==

Synfig Studio inclus un {{l|Skeleton_Layer|système d'animation par Ossature}}. Dans le {{l|Doc:Basic_Bone_Tutorial|tutoriel suivant}} vous allez apprendre à réaliser une ossature basique.

{{Navigation|Category:Manual|Doc:Basic_Bone_Tutorial}}

Dev:IDE Linux

2016-08-10T18:38:51Z

BobSynfig: Typo

= Want to setup an IDE to debug / develop synfig ?=

''Here, we will not discuss of witch IDE is better or if real hacker do all with vi/emacs''

{{Note|Clone the code my dear|This assume you already {{l|Dev:Source_code|cloned the code}} from git}}
{{Note|OpenGL support currently broken|'''OpenGL support is currently broken''' and the compilation of ''synfig-core will crash'' unless you compile it with '''--without-opengl'''. See [[http://www.synfig.org/forums/viewtopic.php?p=32060#p32053 this forums post]] for more details. (you can also modify synfig-core's configure.ac in the section --with-opengl which is active by default)}}

== Anjuta from gnu/linux ==
(Tested with Anjuta 3.14.0)

[http://anjuta.org/ What Anjuta is?]
=== First build !===

This will generate all needed makefile

* Open {{Literal|autobuild/synfigstudio-linux-build.sh}} and change {{Literal|<nowiki>DEBUG=</nowiki>0}} to {{Literal|<nowiki>DEBUG=1</nowiki>}} (line 76)
* Build from {{Literal|autobuild/synfigstudio-linux-build.sh}}
* During this time install {{Literal|anjuta}} from synaptic or whatever ... (from xubuntu 14.10 you must install Anjuta 3.14 from this [https://launchpad.net/~inizan-yannick/+archive/ubuntu/development ppa] for example : see [https://bugzilla.gnome.org/show_bug.cgi?id=728295#c17 here] why)

when anjuta installed and synfig builded....

=== Import synfig (etl / core / studio) projects in Anjuta ===

* Open Anjuta, in {{Literal|Action}} choose {{Literal|Import a project}} and choose your code location (synfig/ETL , synfig/synfig-core or synfig/synfig-studio)
* Select a project name and Import
* At the project backend choice, select {{Literal|Autotools}} and go for it (if you kept the default project name, replace the existing project with the new one)
* Wait a minute ... project loaded !

Repeat for each synfig project

''Your now able to build from Anjuta.''

=== Want to debug maybe ?===

* From Anjuta {{c|<Menu>|<Execute>|<Program Paramter>|Program}} : select synfig-studio binary {{Literal|/home/user/synfig/bin}} (i also setup the working directory)
* Now you need to clean the project and build it again (but this time from anjuta)
* Anjuta {{c|<Menu>|<Build>|Clean}}
* Anjuta {{c|<Menu>|<Build>|Build}}

''you (shouldbe) are ready to debug / improve / patch and share !''

=== Extra note ===

As Anjuta projects are saved in git examined folders, you could have sort of behavior when you ''git your code'' ... personally i have made a little script to backup/restore my own project to keep the folder safe of undesired change (.gitignore is also git surveyed !)

== Eclipse from gnu/linux ==
(Tested with Eclipse 3.8.1)

[http://eclipse.org/ What Eclipse is?]

=== First build !===

This will generate all needed makefile

* Open {{Literal|autobuild/synfigstudio-linux-build.sh}} and change {{Literal|<nowiki>DEBUG=</nowiki>0}} to {{Literal|<nowiki>DEBUG=1</nowiki>}} (line 76)
* Build from {{Literal|autobuild/synfigstudio-linux-build.sh}}
* During this time install {{Literal|eclipse}} & {{Literal|eclispe-cdt}} packages from synaptic or whatever ...

when eclipse installed and synfig builded....

=== Import synfig (etl / core / studio) projects in Eclipse ===

Open Eclipse, choose your desired place for the workspace (i recommend not in ./synfig folder if you want to commit, better just above)

For each synfig component (etl / core / studio ...)

# Eclipse / Menu / Makefile project with existing code
# Choose your project name (etl / core / studio ...)
# Select code location (synfig/ETL , synfig/synfig-core or synfig/synfig-studio)
# Select your toolchain ... and click Finish ... and Wait a little ...

''Your now able to build from Eclipse.''

=== Want to debug maybe ?===

* From {{Literal|Project Explorer}} panel, select your project properties (alt+enter / menu-project or right clicking)
* In {{Literal|C/C++ Build}} Uncheck {{Literal|Use default build command}} and put a {{Literal|make -j2 install}} (-jXX at your connivance ...)
* In {{Literal|Run/Debug Setting}} click "New" or "Edit..." , in C/C++ Application , browse and select the synfig-studio binary from {{Literal|/home/user/synfig/bin}}

Stop on Startup, what the heck ?
* ''Make sure you are in the c++ perspective, then go to menu Run -> Debug Configurations. Make sure your application is chosen in the left pane, press the Debugger tab, and uncheck Stop on startup at: checkbox.'' [http://stackoverflow.com/questions/4278532/how-to-stop-gdb-from-executing-break-main-by-default-in-eclipse How to stop GDB from executing “break main” by default in Eclipse?]

''you (shouldbe) are ready to debug / improve / patch and share !''

=== Have a functional environment ===

Add Includes paths to Code Analysis
* From {{Literal|Project Explorer}} panel, select your project properties (alt+enter / menu-project or right clicking)
* In C/C++ General / Paths and Symbols / Includes , add all the paths you need (ETL / Synfig-core / Cairo / Gtkmm ....)

== Netbeans from gnu/linux ==
(Tested with Netbeans 8.0.2) 
[https://netbeans.org/ What Netbeans is?] 
Done following the [https://www.youtube.com/watch?v=kR7MKXAYCww video tutorial made by Konstantin Dmitriev (in russian ;))] 
Assuming the source will be installed in /home/''yourUsername''/sources/synfig.single in the screenshots 
Don't forget to replace it with your own userName!

=== Install Netbeans ===

Be aware you need to have a JDK devel package installed on your machine to be able to install Netbeans 
On Fedora, I had to install it with the following command
{{Literal|yum install -y java-1.8.0-openjdk-devel}} (or {{Literal|dnf install -y java-1.8.0-openjdk-devel}} on latest version)

Install {{Literal|Netbeans}} from synaptic or from the [https://netbeans.org/downloads/ original download page], if not done already ... 

=== First build !===

This will generate all needed makefile

* Open {{Literal|autobuild/synfigstudio-linux-build.sh}} and change {{Literal|<nowiki>DEBUG=</nowiki>0}} to {{Literal|<nowiki>DEBUG=1</nowiki>}} (line 76)
OR
*Another possibility (like on the video) is to set DEBUG=1 (and a space) before the script name in the console 
in the console enter:{{Literal| /home/yourUsername/sources/synfig.single/autobuild/synfigstudio-linux-build.sh}} 

when Netbeans installed and synfig builded....

=== Import synfig (etl / core / studio) projects in Netbeans ===
* Open Netbeans
* Open File/New Project....

<table>
<tr><td>
1. Choose Project 
* Choose {{Literal|C/C++ Project}} under {{Literal|Categories}}, 
* Choose {{Literal|C/C++ Project with Existing Sources}} 
</td><td>[[File:Install_In_Netbeans_1.png]]</td>
</tr>

<tr><td>
* 2. Select Mode 
{| class="wikitable"
|-
|Source folder||/home/yourUsername/sources/synfig.single
|-
|Build Host||localhost
|-
|Tools Collection||Default(GNU (GNU))
|-
|Configuration Mode||Custom
|}</td>
<td>[[File:Install_In_Netbeans_2.png]]</td>
</tr>

<tr><td>
3. Build Tool 
* Using an existing makefile 
{{Literal|/home/yourUsername/sources/synfig.single/synfig-studio/Makefile}}
* Uncheck {{Literal|Clean and Build after Finish}}
</td>
<td>[[File:Install_In_Netbeans_3.png]]</td>
</tr>

<tr>
<td>
4. Build Action 
{| class="wikitable"
|-
|Working Directory||{{Literal|/home/yourUsername/sources/synfig.single/synfig-studio}}
|-
|Build Command||{{Literal|${MAKE} -f Makefile -j 4 install}}
|-
|Clean Command||{{Literal|${MAKE} -f Makefile clean}}
|-
|Build Result||{{Literal|/home/yourUsername/synfig/bin/synfigstudio}}
|}
</td>
<td>[[File:Install_In_Netbeans_4.png]]</td>
</tr>

<tr>
<td>5. Source Files 
* Add {{Literal|/home/yourUsername/sources/synfig.single}}
</td>
<td>[[File:Install_In_Netbeans_5.png]]</td>
</tr>

<tr>
<td>6. Code Assistance Configuration 
* Choose {{Literal|Automatic Configuration}}
</td>
<td>[[File:Install_In_Netbeans_6.png]]</td>
</tr>

<tr>
<td>7. Project Name and Location 
{| class="wikitable"
|-
|Project Name||{{Literal|synfig.single}}
|-
|Project Location||{{Literal|/home/yourUsername/sources}}
|-
|Project Folder||{{Literal|/home/yourUsername/sources/synfig.single}}
|-
|Build Host||{{Literal|localhost}}
|-
|Tool Collection||{{Literal|Default(GNU (GNU))}}
|}
</td>
<td>[[File:Install_In_Netbeans_7.png]]</td>
</tr>
</table>
* Press {{Literal|Finish}}
* Wait a minute ... project loaded !
''You are now able to build from Netbeans.''

Dev:IDE Windows

2016-07-20T17:39:10Z

BobSynfig: Add a note about OpenGL support currently broken

= Want to setup an IDE to debug / develop synfig ? (under Windows)=

''Here, we will not discuss of witch IDE is better or if real hacker do all with vi/emacs''

== Install GIT, other tools and clone the code ==
{{Note|Clone the code my dear|This assume you read the section {{l|Dev:Source_code|"Clone the code from git"}} }}
{{Note|OpenGL support currently broken|'''OpenGL support is currently broken''' and the compilation of ''synfig-core will crash'' unless you compile it with '''--without-opengl'''. See [[http://www.synfig.org/forums/viewtopic.php?p=32060#p32053 this forums post]] for more details. (you can also modify synfig-core's configure.ac in the section --with-open which is active by default)}}

Before to setup any IDE, you will have to prepare the synfig-build environment under Windows.
It requires administrator rights.

Here is the original "Usage notes" from ''synfigstudio-cygwin-mingw-build.sh'' (by Konstantin Dmitriev).
We will follow it step-by-step!
<pre>
# * Download and install Git (http://msysgit.github.io/).
# * Open Git Bash and execute following commands:
# ** mkdir C:\synfig-build
# ** cd C:\synfig-build
# ** git clone https://github.com/synfig/synfig.git
# ** mkdir cygwin-dist
# ** cd synfig
# ** git config --global core.autocrlf input
# ** exit
# * Download Cygwin setup binary (http://www.cygwin.com/) and save it into C:\synfig-build\cygwin-dist\ directory.
# * Run Cygwin setup and install with the default parameters.
# * Download and install NSIS >=3.0 (http://nsis.sourceforge.net/). Install into C:\synfig-build\NSIS\ directory.
# * (64-bit build only!) Download and install 7zip (http://downloads.sourceforge.net/sevenzip/7z920-x64.msi). Install into C:\synfig-build\7zip\ directory.
# * Open Cygwin console (with administrator previlegies) and run the build script:
# ** bash C:/synfig-build/synfig/autobuild/synfigstudio-cygwin-mingw-build.sh
# * Installation bundle will be written to C:\synfig-build\
#
#
# = Other notes =
# * Builds from current repository, current revision. So you should manually checkout the desired revision to build
# * Executing script without arguments makes a full clean build and produces installer package
# * You can pass arguments to the script to invoke particular stage.
# Available stages: mkprep, mketl, mksynfig, mksynfigstudio, mkpackage
# Example:
# synfigstudio-cygwin-mingw-build.sh mkpackage
# * You can pass a custom command to be invoked in the build environment.
# Example (executes make with respect to the build environment):
# synfigstudio-cygwin-mingw-build.sh make -j2
</pre>

{{Note|Warning! Your attention please!|'''Be aware that the lines with ** have to be executed in Git Bash.''' If you don't, you will meet some nasty side-effects during the first build and you may lose your sanity!}}

=== Download and install Git ===
If you already installed Git, you can skip this section.

Visit the original website https://git-for-windows.github.io/ and click on the big download button. If you don't see it, go and see an ophthalmologist :P 
You will be redirected on the GitHub page with the last version, offered as 32 and 64bit.

You will install it with (most of) the default values, like on the screenshots below (featuring my mouse cursor as a Guest Star). 

<table border="1">
<tr>
<td>1. Welcome Screen. Press Next.</td>
<td>[[File:GitWinSetup_01.png]]</td>
</tr>
<tr>
<td>2. GNU GPL License Notice. Press Next.</td>
<td>[[File:GitWinSetup_02.png]]</td>
</tr>
<tr>
<td>3. In this page, you should check everything. Press Next.</td>
<td>[[File:GitWinSetup_03.png]]</td>
</tr>
<tr>
<td>4. Choose "Use Git from Git Bash only". It would permit you to avoid some mess with other tools. Press Next.</td>
<td>[[File:GitWinSetup_04.png]]</td>
</tr>
<tr>
<td>5. Choose "Checkout Windows-style, commit Unix-style line endings". Press Next.</td>
<td>[[File:GitWinSetup_05.png]]</td>
</tr>
<tr>
<td>6. Choose "Use MiniTTY". It has more possibilities. Press Next</td>
<td>[[File:GitWinSetup_06.png]]</td>
</tr>
<tr>
<td>7. Let this one unchecked. It doesn't take so much time anyway. Press Next. </td>
<td>[[File:GitWinSetup_07.png]]</td>
</tr>
<tr>
<td>8. Uncheck this one, no need to read. Press Finish.</td>
<td>[[File:GitWinSetup_08.png]]</td>
</tr>
</table>

=== Clone the Code ===

Start Git Bash as Administrator and type exactly all the following commands at the prompt. 
You can also paste in the Git Bash window with ''alt-space, modify, paste'' 
If you don't, you will notice it soon! 
''With Git 2.5.0 I had an error with "mkdir C:\synfig-build" so I changed it to "mkdir /c/synfig-build"''

<pre>
mkdir /c/synfig-build
cd C:\synfig-build
git clone https://github.com/synfig/synfig.git
mkdir cygwin-dist
cd synfig
git config --global core.autocrlf input
exit
</pre>

=== Download and install Cygwin ===

Download Cygwin setup binary (http://www.cygwin.com/). 
Save it into ''C:\synfig-build\cygwin-dist\'' directory.

Run Cygwin setup (with administrator rights) and install with the default parameters. 
It should be intalled in ''C:\cygwin''.

=== Download and install NSIS ===

Download and install NSIS '''''>=3.0''''' (http://nsis.sourceforge.net/). 
Don't use ''2.46'', it will fail! 
Install it full into ''C:\synfig-build\NSIS\'' directory.

=== You plan to build 64-bit version? You need 7zip ===
For the 64-bit build only!
Download and install 7zip (''http://downloads.sourceforge.net/sevenzip/7z920-x64.msi''). 
Install into ''C:\synfig-build\7zip\'' directory.

=== First build ! ===
Be aware that it was downloading components and compiling during more than 2 hours for me. 
It depends on you bandwith, the speed of your computer and hard disk type! 
But it should be only for this first build if you follow it carefully :) 
Sometimes it will looks stalled but you can check in your Task Manager if there are some sh/bash executable running. 
So let it run !

Open Cygwin console (with administrator privileges) and run the build script: 
<pre>bash C:/synfig-build/synfig/autobuild/synfigstudio-cygwin-mingw-build.sh</pre>

You can go and take a coffee (or a cocoa, depending on your age ;) ) 
Installation bundle will be written to ''C:\synfig-build\''

== Netbeans from Windows ==

(Tested with Netbeans 8.0.2) 
[https://netbeans.org/ What Netbeans is?] 
Done following the [https://www.youtube.com/watch?v=kR7MKXAYCww video tutorial made by Konstantin Dmitriev (in russian ;))] and adapted for Windows/Cygwin. 
Assuming the source will be installed in C:\synfig-build\synfig\ as expected. 

=== Prepare your Build Tools ===

You have to use a specific Build Tool Collection in your project. 
Go in the menu ''Tools'' / ''Options'' / ''C/C++'' / ''Build Tools'' 
Press ''Add'' (down-left). 
Enter ''C:\cygwin\bin'' as '''Base Directory''', ''GNU 4.x Cygwin'' as '''Tool Collection Family''', and ''Cygwin_4.x'' as '''Tool Collection Name'''. 

[[File:NB-Win-AddNewTool.png]] 

As a result, you should have the resulting information in the form: 

[[File:NB-Win-Build-Tools-Options.png]]

Press Ok. 
Now we are ready to setup the projects!

=== Import synfig (etl / core / studio) projects in Netbeans ===
* Open Netbeans (if not done yet)
* Open File/New Project....

<table border="1">
<tr><td>
1. Choose Project 
* Choose {{Literal|C/C++ Project}} under {{Literal|Categories}}, 
* Choose {{Literal|C/C++ Project with Existing Sources}} 
</td><td>[[File:NB-Win-01.png]]</td>
</tr>

<tr><td>
* 2. Select Mode 
{| class="wikitable"
|-
|Source folder||c:\synfig-build\synfig
|-
|Build Host||localhost
|-
|Tools Collection||Cygwin 4.x (GNU 4.x Cygwin)
|-
|Configuration Mode||Custom
|}</td>
<td>[[File:NB-Win-02.png]]</td>
</tr>

<tr><td>
3. Build Tool 
* Using an existing makefile 
{{Literal|c:/synfig-build/synfig/synfig-studio/Makefile}}
* Uncheck {{Literal|Clean and Build after Finish}}
</td>
<td>[[File:NB-Win-03.png]]</td>
</tr>

<tr>
<td>
4. Build Action 
{| class="wikitable"
|-
|Working Directory||{{Literal|c:/synfig-build/synfig/synfig-studio}}
|-
|Build Command||{{Literal|${MAKE} -f Makefile -j 4 install}}
|-
|Clean Command||{{Literal|${MAKE} -f Makefile clean}}
|-
|Build Result||{{Literal|c:/synfig-build/dist/bin/synfigstudio.exe}}
|}
</td>
<td>[[File:NB-Win-04.png]]</td>
</tr>

<tr>
<td>5. Source Files 
* Add {{Literal|c:\synfig-build\synfig}}
</td>
<td>[[File:NB-Win-05.png]]</td>
</tr>

<tr>
<td>6. Code Assistance Configuration 
* Choose {{Literal|Automatic Configuration}}
</td>
<td>[[File:NB-Win-06.png]]</td>
</tr>

<tr>
<td>7. Project Name and Location 
{| class="wikitable"
|-
|Project Name||{{Literal|synfig}}
|-
|Project Location||{{Literal|c:\synfig-build}}
|-
|Project Folder||{{Literal|c:\synfig-build\synfig}}
|-
|Build Host||{{Literal|localhost}}
|-
|Tool Collection||{{Literal|Cygwin_4.x (GNU 4.x Cygwin)}}
|}
</td>
<td>[[File:NB-Win-07.png]]</td>
</tr>
</table>
* Press {{Literal|Finish}}
* Wait a minute ... project loaded !
''You are now able to build from Netbeans.''

Dev:IDE Linux

2016-07-20T17:37:56Z

BobSynfig: Add note about OpenGL support broken

= Want to setup an IDE to debug / develop synfig ?=

''Here, we will not discuss of witch IDE is better or if real hacker do all with vi/emacs''

{{Note|Clone the code my dear|This assume you already {{l|Dev:Source_code|cloned the code}} from git}}
{{Note|OpenGL support currently broken|'''OpenGL support is currently broken''' and the compilation of ''synfig-core will crash'' unless you compile it with '''--without-opengl'''. See [[http://www.synfig.org/forums/viewtopic.php?p=32060#p32053 this forums post]] for more details. (you can also modify synfig-core's configure.ac in the section --with-open which is active by default)}}

== Anjuta from gnu/linux ==
(Tested with Anjuta 3.14.0)

[http://anjuta.org/ What Anjuta is?]
=== First build !===

This will generate all needed makefile

* Open {{Literal|autobuild/synfigstudio-linux-build.sh}} and change {{Literal|<nowiki>DEBUG=</nowiki>0}} to {{Literal|<nowiki>DEBUG=1</nowiki>}} (line 76)
* Build from {{Literal|autobuild/synfigstudio-linux-build.sh}}
* During this time install {{Literal|anjuta}} from synaptic or whatever ... (from xubuntu 14.10 you must install Anjuta 3.14 from this [https://launchpad.net/~inizan-yannick/+archive/ubuntu/development ppa] for example : see [https://bugzilla.gnome.org/show_bug.cgi?id=728295#c17 here] why)

when anjuta installed and synfig builded....

=== Import synfig (etl / core / studio) projects in Anjuta ===

* Open Anjuta, in {{Literal|Action}} choose {{Literal|Import a project}} and choose your code location (synfig/ETL , synfig/synfig-core or synfig/synfig-studio)
* Select a project name and Import
* At the project backend choice, select {{Literal|Autotools}} and go for it (if you kept the default project name, replace the existing project with the new one)
* Wait a minute ... project loaded !

Repeat for each synfig project

''Your now able to build from Anjuta.''

=== Want to debug maybe ?===

* From Anjuta {{c|<Menu>|<Execute>|<Program Paramter>|Program}} : select synfig-studio binary {{Literal|/home/user/synfig/bin}} (i also setup the working directory)
* Now you need to clean the project and build it again (but this time from anjuta)
* Anjuta {{c|<Menu>|<Build>|Clean}}
* Anjuta {{c|<Menu>|<Build>|Build}}

''you (shouldbe) are ready to debug / improve / patch and share !''

=== Extra note ===

As Anjuta projects are saved in git examined folders, you could have sort of behavior when you ''git your code'' ... personally i have made a little script to backup/restore my own project to keep the folder safe of undesired change (.gitignore is also git surveyed !)

== Eclipse from gnu/linux ==
(Tested with Eclipse 3.8.1)

[http://eclipse.org/ What Eclipse is?]

=== First build !===

This will generate all needed makefile

* Open {{Literal|autobuild/synfigstudio-linux-build.sh}} and change {{Literal|<nowiki>DEBUG=</nowiki>0}} to {{Literal|<nowiki>DEBUG=1</nowiki>}} (line 76)
* Build from {{Literal|autobuild/synfigstudio-linux-build.sh}}
* During this time install {{Literal|eclipse}} & {{Literal|eclispe-cdt}} packages from synaptic or whatever ...

when eclipse installed and synfig builded....

=== Import synfig (etl / core / studio) projects in Eclipse ===

Open Eclipse, choose your desired place for the workspace (i recommend not in ./synfig folder if you want to commit, better just above)

For each synfig component (etl / core / studio ...)

# Eclipse / Menu / Makefile project with existing code
# Choose your project name (etl / core / studio ...)
# Select code location (synfig/ETL , synfig/synfig-core or synfig/synfig-studio)
# Select your toolchain ... and click Finish ... and Wait a little ...

''Your now able to build from Eclipse.''

=== Want to debug maybe ?===

* From {{Literal|Project Explorer}} panel, select your project properties (alt+enter / menu-project or right clicking)
* In {{Literal|C/C++ Build}} Uncheck {{Literal|Use default build command}} and put a {{Literal|make -j2 install}} (-jXX at your connivance ...)
* In {{Literal|Run/Debug Setting}} click "New" or "Edit..." , in C/C++ Application , browse and select the synfig-studio binary from {{Literal|/home/user/synfig/bin}}

Stop on Startup, what the heck ?
* ''Make sure you are in the c++ perspective, then go to menu Run -> Debug Configurations. Make sure your application is chosen in the left pane, press the Debugger tab, and uncheck Stop on startup at: checkbox.'' [http://stackoverflow.com/questions/4278532/how-to-stop-gdb-from-executing-break-main-by-default-in-eclipse How to stop GDB from executing “break main” by default in Eclipse?]

''you (shouldbe) are ready to debug / improve / patch and share !''

=== Have a functional environment ===

Add Includes paths to Code Analysis
* From {{Literal|Project Explorer}} panel, select your project properties (alt+enter / menu-project or right clicking)
* In C/C++ General / Paths and Symbols / Includes , add all the paths you need (ETL / Synfig-core / Cairo / Gtkmm ....)

== Netbeans from gnu/linux ==
(Tested with Netbeans 8.0.2) 
[https://netbeans.org/ What Netbeans is?] 
Done following the [https://www.youtube.com/watch?v=kR7MKXAYCww video tutorial made by Konstantin Dmitriev (in russian ;))] 
Assuming the source will be installed in /home/''yourUsername''/sources/synfig.single in the screenshots 
Don't forget to replace it with your own userName!

=== Install Netbeans ===

Be aware you need to have a JDK devel package installed on your machine to be able to install Netbeans 
On Fedora, I had to install it with the following command
{{Literal|yum install -y java-1.8.0-openjdk-devel}} (or {{Literal|dnf install -y java-1.8.0-openjdk-devel}} on latest version)

Install {{Literal|Netbeans}} from synaptic or from the [https://netbeans.org/downloads/ original download page], if not done already ... 

=== First build !===

This will generate all needed makefile

* Open {{Literal|autobuild/synfigstudio-linux-build.sh}} and change {{Literal|<nowiki>DEBUG=</nowiki>0}} to {{Literal|<nowiki>DEBUG=1</nowiki>}} (line 76)
OR
*Another possibility (like on the video) is to set DEBUG=1 (and a space) before the script name in the console 
in the console enter:{{Literal| /home/yourUsername/sources/synfig.single/autobuild/synfigstudio-linux-build.sh}} 

when Netbeans installed and synfig builded....

=== Import synfig (etl / core / studio) projects in Netbeans ===
* Open Netbeans
* Open File/New Project....

<table>
<tr><td>
1. Choose Project 
* Choose {{Literal|C/C++ Project}} under {{Literal|Categories}}, 
* Choose {{Literal|C/C++ Project with Existing Sources}} 
</td><td>[[File:Install_In_Netbeans_1.png]]</td>
</tr>

<tr><td>
* 2. Select Mode 
{| class="wikitable"
|-
|Source folder||/home/yourUsername/sources/synfig.single
|-
|Build Host||localhost
|-
|Tools Collection||Default(GNU (GNU))
|-
|Configuration Mode||Custom
|}</td>
<td>[[File:Install_In_Netbeans_2.png]]</td>
</tr>

<tr><td>
3. Build Tool 
* Using an existing makefile 
{{Literal|/home/yourUsername/sources/synfig.single/synfig-studio/Makefile}}
* Uncheck {{Literal|Clean and Build after Finish}}
</td>
<td>[[File:Install_In_Netbeans_3.png]]</td>
</tr>

<tr>
<td>
4. Build Action 
{| class="wikitable"
|-
|Working Directory||{{Literal|/home/yourUsername/sources/synfig.single/synfig-studio}}
|-
|Build Command||{{Literal|${MAKE} -f Makefile -j 4 install}}
|-
|Clean Command||{{Literal|${MAKE} -f Makefile clean}}
|-
|Build Result||{{Literal|/home/yourUsername/synfig/bin/synfigstudio}}
|}
</td>
<td>[[File:Install_In_Netbeans_4.png]]</td>
</tr>

<tr>
<td>5. Source Files 
* Add {{Literal|/home/yourUsername/sources/synfig.single}}
</td>
<td>[[File:Install_In_Netbeans_5.png]]</td>
</tr>

<tr>
<td>6. Code Assistance Configuration 
* Choose {{Literal|Automatic Configuration}}
</td>
<td>[[File:Install_In_Netbeans_6.png]]</td>
</tr>

<tr>
<td>7. Project Name and Location 
{| class="wikitable"
|-
|Project Name||{{Literal|synfig.single}}
|-
|Project Location||{{Literal|/home/yourUsername/sources}}
|-
|Project Folder||{{Literal|/home/yourUsername/sources/synfig.single}}
|-
|Build Host||{{Literal|localhost}}
|-
|Tool Collection||{{Literal|Default(GNU (GNU))}}
|}
</td>
<td>[[File:Install_In_Netbeans_7.png]]</td>
</tr>
</table>
* Press {{Literal|Finish}}
* Wait a minute ... project loaded !
''You are now able to build from Netbeans.''

Dev:Build Instructions

2016-07-07T10:18:07Z

BobSynfig: Add notice for Fedora 24 (root password required)

{{Title|Build Instructions}}
{{Category|Manual}}


Some information may be outdated, please have a look in the forums at the [http://www.synfig.org/forums/viewforum.php?f=13 build thread] to get fresh data...

== Scripts provided with the source code ==

Within the source code we provide two automatic package scripts. They are used to generate the library independent packages for Linux or Mac OSX. Since the scripts ship all the needed libraries in a single package the size of the packages are higher compared to the typical deb or rpm package. That's not the case for dmg package for OSX because in general they bundle all needed libraries in the dmg image.

You can find those scripts under the ''autobuild'' folder from the source code. There are usage instruction inside each script allowing resuming builds (reusing the current downloaded libraries) and specific options to just compile and build the binaries without package them.

Note that for Fedora 24 (at least), you must define a password for root user in order to run ''synfigstudio-linux-build.sh'', otherwise su authentication failure will occur.
If needed add it with ''sudo su -'' then ''passwd''

===Staged boost library===
To use the autobuild scripts with a staged boost library, you will need to define environment variables:
$ export BOOST_ROOT=/my/boost/path
$ export CPLUS_INCLUDE_PATH="$CPLUS_INCLUDE_PATH:$BOOST_ROOT/include"
$ export LD_LIBRARY_PATH="$LD_LIBRARY_PATH:$BOOST_ROOT/lib"

===Debug build===
Consider, that you can run in the following way to enable debug:
$ DEBUG=1 ./synfigstudio-linux-build.sh

In this case you can combine debug with other modes:
$ DEBUG=1 ./synfigstudio-linux-build.sh quick # just invokes "make install" for every component
$ DEBUG=1 ./synfigstudio-linux-build.sh synfig # builds synfig-core only
$ DEBUG=1 ./synfigstudio-linux-build.sh synfigstudio # builds synfig-studio only

== Notes ==

* If you are using the released versions instead of GIT, none of the libtoolize or autoreconf steps are necessary. For released versions, "./configure && make && sudo make install" should be enough.

* If you are using packages for synfig's dependencies, you want the '''development packages''' not the main packages. Check below for your distribution's packages.

* Please read the {{l|Dev:Source code|source code}} page to check out the latest code. Please also check the {{l|Download|download page}} and the {{l|FAQ}} to find out about any issues that you may run into along the way.

* Some Linux/BSD distros (Like Gentoo Linux) have a pkg-config that doesn't look in /usr/local/lib/pkgconfig by default. So if you are installing in anywhere other than the system pkg-config path, please run "export PKG_CONFIG_PATH=/usr/local/lib/pkgconfig" or similar before building or installing anything.

* Don't use automake 1.4, there are problems with it.

* Using automake 1.9, 'make install' seems to re-link and re-install all the synfig core modules every time whether they have changed or not. If you intend to build code repetitively you can export export CXX="/usr/bin/ccache /usr/bin/g++". This allows to not rebuild the already build modules so they taken from the cache.

* After you obtain the source code using the git repository, you obtain a single 'synfig' folder where the three main modules (etl, synfig-core and synfig-studio) are up to date. '''The trunk folder has been removed in the git tree'''. Please modify the build instructions for other platforms.

* If you want to test a particular branch of the repository do the following:
<pre>
~/synfig$ git branch -r
</pre>
You'll obtain a list of the remote branches that exists in the repo. For example:
<pre>
origin/HEAD
origin/genete_bones
origin/genete_canvasview
origin/genete_master
origin/genete_onionskin
origin/genete_scale_reverse
origin/genete_setup_dialog
origin/genete_svg
origin/gerco_opengl
origin/master
origin/uiomae_opengl
origin/zelgadis_cia
origin/zelgadis_master
</pre>

Then to properly checkout a remote branch you have to create a local branch to track a particular remote branch and checkout it. For example:
<pre>
~/synfig$ git branch --track test_canvas origin/genete_canvasview
~/synfig$ git checkout test_canvas
</pre>

Your code is ready to be built on that branch.

* The CVS requirement is only because the autopoint program run by autoreconf needs CVS. You can avoid the need for CVS by disabling the translation/gettext stuff in configure.ac.

* If you don't want to install to a system-wide directory using sudo, run something like these commands before starting:

<pre>
prefix=$(pwd)/install
export PKG_CONFIG_PATH="$prefix/lib/pkgconfig"
export PATH=$(pwd)/synfig-core/src/tool/.libs:$PATH
export CXX="/usr/bin/ccache /usr/bin/g++"
</pre>

** export PKG_CONFIG_PATH="$prefix/lib/pkgconfig" allows to find the linking libraries.
** export PATH=$(pwd)/synfig-core/src/tool/.libs:$PATH allows synfigstudio find the correct * libraries to render the icons for the toolbox etc.
** export CXX="/usr/bin/ccache /usr/bin/g++" allows to use the cache to avoid rebuilding.

And when you run ./configure, run it with <pre>--prefix $prefix</pre> and don't use sudo when you do make install.

* See the automatic building script attached.

== System-specific instructions ==
Please update them including the new GIT repo.

* Gentoo: {{l|Dev:Gentoo Ebuilds|ebuilds}} are available for both release versions and GIT
* MacOS X: {{l|Dev:Building_On_Mac_OS_X|instructions for building}} with the GTK+ Aqua port are available.
* PCLinuxOS: {{l|Dev:PCLinuxOS build instructions|build instructions}}
* Windows: {{l|Dev:Building on Windows|instructions for building}} with {{l|Dev:Mingw_installation|mingw}} in {{l|Dev:MSYS2_Build|MSYS2}} are available.

==System wide build Instructions==

=== ETL ===

ETL is a template library, there is nothing to build really, it just needs to be installed.

'''Requires''': autoconf automake 
* Debian: build-essential autoconf automake libtool
* OS X: already included with Mac OS X

''Type the following commands at the directory where you cloned the git repo''
<pre>
$ cd synfig/ETL
$ autoreconf --install --force
$ ./configure
$ sudo make install
</pre>

=== synfig-core ===

'''Requires''': ETL (etl-dev, already installed if you successfully built etl), libxml++, libsigc++, libltdl, libtool, gettext, autopoint (part of gettext-dev), cvs, boost-program-options 
* Debian: etl-dev libxml++2.6-dev libsigc++-2.0-dev libltdl3-dev libtool gettext cvs autopoint
* Fedora: ETL-devel libxml++-devel libsigc++20-devel libtool-ltdl-devel libtool gettext-devel cvs
* Gentoo: dev-cpp/ETL dev-cpp/libxmlpp dev-libs/libsigc++ dev-util/cvs
** If you are using ./configure --prefix="$PREFIX" to configure synfig, do not install dev-cpp/ETL.
*OS X use glibtoolize instead of libtoolize, as Apple renamed it.

'''Note''': libpng isn't required to build synfig, but if you build synfig without PNG support and go on to build synfigstudio, that step will fail (because the build process for synfigstudio uses synfig to create .png icon files). The package is libpng12-dev on Debian or media-libs/libpng on Gentoo.

'''Note''': the 'configure.ac' file in the synfig-core directory doesn't work with libtool version 2, as shipped with ubuntu 8.10. To work around the problem until a proper fix is found, comment out line 622 or thereabouts (it says "AC_CONFIG_SUBDIRS(libltdl)") by putting a "#" at the front of the line. The line is required for older versions of libtool, as shipped with other distributions. DO it straight with this command:
<pre> sed -i 's/^AC_CONFIG_SUBDIRS/# AC_CONFIG_SUBDIRS/' synfig-core/configure.ac </pre>

'''Optional''': libpng, libmng, libjpeg, libfreetype, libfontconfig, libopenexr, libavcodec, libmagick++, vimage (MacOS only, proprietary) 
* Debian: libpng12-dev libmng-dev libjpeg62-dev libfreetype6-dev libfontconfig1-dev libopenexr-dev libavcodec-dev libavformat-dev libswscale-dev libmagick++9-dev
* Gentoo: sys-devel/libtool media-libs/libpng media-libs/libmng media-libs/jpeg media-libs/freetype media-libs/fontconfig media-libs/openexr media-libs/tiff
*Ubuntu (since Jaunty): Same libraries as Debian but do not use libmagick++9-dev, use graphicsmagick-libmagick-dev-compat instead.

'''Runtime''': encodedv (from libdv), ffmpeg, convert (from imagemagick)
* Debian: libdv-bin ffmpeg imagemagick
* Gentoo: media-libs/libdv media-video/ffmpeg media-gfx/imagemagick

''Type the following commands at the directory where you cloned the git repo''
<pre>
$ cd synfig/synfig-core
$ libtoolize --copy --force
$ autoreconf --install --force
$ ./configure
$ make
$ sudo make install
</pre>

''Note'':

* Don't use --enable-half, it is slow.
* If ETL was installed in a non-standard directory using --prefix=<location>, it suffices to run the configure script with an updated PKG_CONFIG_PATH environment variable. E.g.: PKG_CONFIG_PATH=${PKG_CONFIG_PATH}:/my/install/prefix/lib/pkgconfig ./configure --prefix=/my/install/prefix

=== synfig-studio ===

''Requires'': ETL (etl-dev, already installed if you successfully built etl), synfig (libsynfig-dev, already installed if you successfully built synfig-core), gtkmm >= 2.4, gtk >= 2.0, glibmm, libsigc++, libltdl, libtool, gettext, cvs, intltool, libboost >= 1.53, libcairo >= 1.12 
* Debian: etl-dev libsynfig-dev libgtkmm-2.4-dev libgtk2.0-dev libglibmm-2.4-dev libsigc++-2.0-dev libltdl3-dev libtool gettext cvs
* Gentoo: virtual/ETL virtual/synfig dev-cpp/gtkmm-2.4 dev-libs/libsigc++ sys-devel/libtool
** If you are using ./configure --prefix="$PREFIX" to configure synfigstudio, do not install virtual/ETL or virtual/synfig.
''Optional'': fonts (for the images), [http://www.fmod.org FMOD] (version 3.x, proprietary)
* Debian: ttf-freefont ttf-dejavu ttf-dustin
* Gentoo: freefonts dejavu

''Type the following commands at the directory where you cloned the git repo''
<pre>
$ cd synfig/synfig-studio
$ ./bootstrap.sh
$ ./configure
$ make
$ sudo make install
</pre>



== finalizing ==

Depending on where you installed synfig to, you might have to tell your system where the libraries can be found. That can be done via the following command:

<pre>
$ sudo ldconfig
</pre>

== Build script examples ==

If you want to build a binary for testing or debugging proposes you can run one of the following scripts:

The binaries are installed at $(pwd)/install/bin. Alter the script according to your preferences.

Your system must satisfy synfig's build requirements, the script won't do it for you. Also be sure what git branch are you building each time. In some cases you'll need to make clean on each folder first.

Be sure that '''you have ccache installed''' on your system because you will get errors otherwise.

=== Linux ===
<pre>
#!/bin/sh
CPUS=4
prefix=$(pwd)/install
export PKG_CONFIG_PATH="$prefix/lib/pkgconfig"
export PATH=$(pwd)/synfig-core/src/tool/.libs:$PATH
export CXX="/usr/bin/ccache /usr/bin/g++"
# Uncomment this line if you want to use ccache
# export CXX="/usr/bin/ccache g++-snapshot"

cd ETL &&
autoreconf --install --force &&
./configure --prefix $prefix &&
make --debug=b install &&
\
cd ../synfig-core &&
libtoolize --copy --force &&
autoreconf --install --force &&
./configure --prefix $prefix --enable-optimization=0 --enable-debug &&
make --debug=b -j $CPUS install &&
\
cd ../synfig-studio &&
./bootstrap.sh &&
./configure --prefix $prefix --enable-optimization=0 --enable-debug &&
make --debug=b -j $CPUS install
</pre>

With libboost no standard installation to /personal/boost/install/path/ :

<pre>
#!/bin/sh
#move to synfig folder (to get the script out from git)
cd synfig
CPUS=2
prefix=$(pwd)/install
export PKG_CONFIG_PATH="$prefix/lib/pkgconfig"
export PATH=$(pwd)/synfig-core/src/tool/.libs:$PATH
export CXX="/usr/bin/ccache /usr/bin/g++"

cd ETL &&
autoreconf --install --force &&
./configure --prefix $prefix &&
make install &&
\
cd ../synfig-core &&
libtoolize --ltdl --copy --force &&
autoreconf --install --force &&
./configure --with-boost=/personal/boost/install/path/boost_1_55_0 --enable-optimization=0 --prefix $prefix --enable-debug &&
make -j $CPUS install &&
\
cd ../synfig-studio &&
autoreconf --install --force &&
intltoolize --force --copy &&
./configure --enable-optimization=0 --prefix $prefix --enable-debug &&
make -j $CPUS install
</pre>

=== Mac OSX ===
<pre>
#!/bin/sh
CPUS=4
prefix=$(pwd)/install
export PKG_CONFIG_PATH="$prefix/lib/pkgconfig"
export ACLOCAL_FLAGS="-I $prefix/share/aclocal"
export PATH=$(pwd)/synfig-core/src/tool/.libs:$PATH
# Uncomment those line if you want to use g++ instead of the native clang
# compiler and preprocessor
#export CXX="/opt/local/bin/ccache /usr/bin/g++"
#export CPP="/usr/bin/cpp"
export CPPFLAGS="-I/opt/local/include"
export LDFLAGS="-L/opt/local/lib"

cd ETL &&
autoreconf --install --force &&
./configure --prefix $prefix &&
make --debug=b install &&
\
cd ../synfig-core &&
libtoolize --copy --force &&
autoreconf --install --force &&
./configure --prefix $prefix --enable-optimization=0 --enable-debug &&
make --debug=b -j $CPUS install &&
\
cd ../synfig-studio &&
./bootstrap.sh &&
./configure --prefix $prefix --enable-optimization=0 --enable-debug &&
make --debug=b -j $CPUS install
</pre>

Dev:IDE Linux

2016-01-10T00:08:49Z

BobSynfig: /* + dnf for Fedora */

= Want to setup an IDE to debug / develop synfig ?=

''Here, we will not discuss of witch IDE is better or if real hacker do all with vi/emacs''

{{Note|Clone the code my dear|This assume you already {{l|Dev:Source_code|cloned the code}} from git}}

== Anjuta from gnu/linux ==
(Tested with Anjuta 3.14.0)

[http://anjuta.org/ What Anjuta is?]
=== First build !===

This will generate all needed makefile

* Open {{Literal|autobuild/synfigstudio-linux-build.sh}} and change {{Literal|<nowiki>DEBUG=</nowiki>0}} to {{Literal|<nowiki>DEBUG=1</nowiki>}} (line 76)
* Build from {{Literal|autobuild/synfigstudio-linux-build.sh}}
* During this time install {{Literal|anjuta}} from synaptic or whatever ... (from xubuntu 14.10 you must install Anjuta 3.14 from this [https://launchpad.net/~inizan-yannick/+archive/ubuntu/development ppa] for example : see [https://bugzilla.gnome.org/show_bug.cgi?id=728295#c17 here] why)

when anjuta installed and synfig builded....

=== Import synfig (etl / core / studio) projects in Anjuta ===

* Open Anjuta, in {{Literal|Action}} choose {{Literal|Import a project}} and choose your code location (synfig/ETL , synfig/synfig-core or synfig/synfig-studio)
* Select a project name and Import
* At the project backend choice, select {{Literal|Autotools}} and go for it (if you kept the default project name, replace the existing project with the new one)
* Wait a minute ... project loaded !

Repeat for each synfig project

''Your now able to build from Anjuta.''

=== Want to debug maybe ?===

* From Anjuta {{c|<Menu>|<Execute>|<Program Paramter>|Program}} : select synfig-studio binary {{Literal|/home/user/synfig/bin}} (i also setup the working directory)
* Now you need to clean the project and build it again (but this time from anjuta)
* Anjuta {{c|<Menu>|<Build>|Clean}}
* Anjuta {{c|<Menu>|<Build>|Build}}

''you (shouldbe) are ready to debug / improve / patch and share !''

=== Extra note ===

As Anjuta projects are saved in git examined folders, you could have sort of behavior when you ''git your code'' ... personally i have made a little script to backup/restore my own project to keep the folder safe of undesired change (.gitignore is also git surveyed !)

== Eclipse from gnu/linux ==
(Tested with Eclipse 3.8.1)

[http://eclipse.org/ What Eclipse is?]

=== First build !===

This will generate all needed makefile

* Open {{Literal|autobuild/synfigstudio-linux-build.sh}} and change {{Literal|<nowiki>DEBUG=</nowiki>0}} to {{Literal|<nowiki>DEBUG=1</nowiki>}} (line 76)
* Build from {{Literal|autobuild/synfigstudio-linux-build.sh}}
* During this time install {{Literal|eclipse}} & {{Literal|eclispe-cdt}} packages from synaptic or whatever ...

when eclipse installed and synfig builded....

=== Import synfig (etl / core / studio) projects in Eclipse ===

Open Eclipse, choose your desired place for the workspace (i recommend not in ./synfig folder if you want to commit, better just above)

For each synfig component (etl / core / studio ...)

# Eclipse / Menu / Makefile project with existing code
# Choose your project name (etl / core / studio ...)
# Select code location (synfig/ETL , synfig/synfig-core or synfig/synfig-studio)
# Select your toolchain ... and click Finish ... and Wait a little ...

''Your now able to build from Eclipse.''

=== Want to debug maybe ?===

* From {{Literal|Project Explorer}} panel, select your project properties (alt+enter / menu-project or right clicking)
* In {{Literal|C/C++ Build}} Uncheck {{Literal|Use default build command}} and put a {{Literal|make -j2 install}} (-jXX at your connivance ...)
* In {{Literal|Run/Debug Setting}} click "New" or "Edit..." , in C/C++ Application , browse and select the synfig-studio binary from {{Literal|/home/user/synfig/bin}}

Stop on Startup, what the heck ?
* ''Make sure you are in the c++ perspective, then go to menu Run -> Debug Configurations. Make sure your application is chosen in the left pane, press the Debugger tab, and uncheck Stop on startup at: checkbox.'' [http://stackoverflow.com/questions/4278532/how-to-stop-gdb-from-executing-break-main-by-default-in-eclipse How to stop GDB from executing “break main” by default in Eclipse?]

''you (shouldbe) are ready to debug / improve / patch and share !''

=== Have a functional environment ===

Add Includes paths to Code Analysis
* From {{Literal|Project Explorer}} panel, select your project properties (alt+enter / menu-project or right clicking)
* In C/C++ General / Paths and Symbols / Includes , add all the paths you need (ETL / Synfig-core / Cairo / Gtkmm ....)

== Netbeans from gnu/linux ==
(Tested with Netbeans 8.0.2) 
[https://netbeans.org/ What Netbeans is?] 
Done following the [https://www.youtube.com/watch?v=kR7MKXAYCww video tutorial made by Konstantin Dmitriev (in russian ;))] 
Assuming the source will be installed in /home/''yourUsername''/sources/synfig.single in the screenshots 
Don't forget to replace it with your own userName!

=== Install Netbeans ===

Be aware you need to have a JDK devel package installed on your machine to be able to install Netbeans 
On Fedora, I had to install it with the following command
{{Literal|yum install -y java-1.8.0-openjdk-devel}} (or {{Literal|dnf install -y java-1.8.0-openjdk-devel}} on latest version)

Install {{Literal|Netbeans}} from synaptic or from the [https://netbeans.org/downloads/ original download page], if not done already ... 

=== First build !===

This will generate all needed makefile

* Open {{Literal|autobuild/synfigstudio-linux-build.sh}} and change {{Literal|<nowiki>DEBUG=</nowiki>0}} to {{Literal|<nowiki>DEBUG=1</nowiki>}} (line 76)
OR
*Another possibility (like on the video) is to set DEBUG=1 (and a space) before the script name in the console 
in the console enter:{{Literal| /home/yourUsername/sources/synfig.single/autobuild/synfigstudio-linux-build.sh}} 

when Netbeans installed and synfig builded....

=== Import synfig (etl / core / studio) projects in Netbeans ===
* Open Netbeans
* Open File/New Project....

<table>
<tr><td>
1. Choose Project 
* Choose {{Literal|C/C++ Project}} under {{Literal|Categories}}, 
* Choose {{Literal|C/C++ Project with Existing Sources}} 
</td><td>[[File:Install_In_Netbeans_1.png]]</td>
</tr>

<tr><td>
* 2. Select Mode 
{| class="wikitable"
|-
|Source folder||/home/yourUsername/sources/synfig.single
|-
|Build Host||localhost
|-
|Tools Collection||Default(GNU (GNU))
|-
|Configuration Mode||Custom
|}</td>
<td>[[File:Install_In_Netbeans_2.png]]</td>
</tr>

<tr><td>
3. Build Tool 
* Using an existing makefile 
{{Literal|/home/yourUsername/sources/synfig.single/synfig-studio/Makefile}}
* Uncheck {{Literal|Clean and Build after Finish}}
</td>
<td>[[File:Install_In_Netbeans_3.png]]</td>
</tr>

<tr>
<td>
4. Build Action 
{| class="wikitable"
|-
|Working Directory||{{Literal|/home/yourUsername/sources/synfig.single/synfig-studio}}
|-
|Build Command||{{Literal|${MAKE} -f Makefile -j 4 install}}
|-
|Clean Command||{{Literal|${MAKE} -f Makefile clean}}
|-
|Build Result||{{Literal|/home/yourUsername/synfig/bin/synfigstudio}}
|}
</td>
<td>[[File:Install_In_Netbeans_4.png]]</td>
</tr>

<tr>
<td>5. Source Files 
* Add {{Literal|/home/yourUsername/sources/synfig.single}}
</td>
<td>[[File:Install_In_Netbeans_5.png]]</td>
</tr>

<tr>
<td>6. Code Assistance Configuration 
* Choose {{Literal|Automatic Configuration}}
</td>
<td>[[File:Install_In_Netbeans_6.png]]</td>
</tr>

<tr>
<td>7. Project Name and Location 
{| class="wikitable"
|-
|Project Name||{{Literal|synfig.single}}
|-
|Project Location||{{Literal|/home/yourUsername/sources}}
|-
|Project Folder||{{Literal|/home/yourUsername/sources/synfig.single}}
|-
|Build Host||{{Literal|localhost}}
|-
|Tool Collection||{{Literal|Default(GNU (GNU))}}
|}
</td>
<td>[[File:Install_In_Netbeans_7.png]]</td>
</tr>
</table>
* Press {{Literal|Finish}}
* Wait a minute ... project loaded !
''You are now able to build from Netbeans.''

Doc:Basic Bone Tutorial/fr

2015-09-17T22:53:39Z

BobSynfig: /* Astuce */

{{Title|Basic Bone Tutorial}}
{{Navigation|Category:Manual|Doc:Interface}}
{{Navigation|Category:Tutorials|Doc:Basic Bone Tutorial}}
{{NewTerminology}}
{{TOCright}}
[[Category:Manual]]
[[Category:Tutorials]]
[[Category:Tutorials Basic]]


[[File:bone.gif|left|frame]]
 
== Introduction ==
Dans ce tutoriel nous allons doter un bras d'une armature avec des jointures fixes en utilisant le {{l|Skeleton Layer}} et 3 os (bones). Le bras est constitué de 3 parties: '''upperArm''', '''lowerArm''' et '''hand'''. (IMAGE 1)

Chaque partie est groupée dans son propre calque et les trois groupes sont eux-mêmes groupés dans un calque appelé '''arm''' (IMAGE 2).
[[File:bonestut01.png|left|frame|IMAGE 1: Les trois parties du bras]] [[File:bonestut09.png|centre|frame|216x475px|IMAGE 2: Les calques]]
 

== Préparation des jointures ==
[[File:bonestut02.png|left|200x237px|frame|IMAGE 3: Jointures]]
Avant de commencer à doter le bras d'une armature nous devons le préparer afin d'être sûr que les jointures tourneront correctement.

Dans ''image 1'' nous pouvons voir que la partie basse du haut du bras est droit et ne possède pas de bordure, alors que la partie haut de l'avant-bras possède une bordure qui est courbe. La partie basse de l'avant bras n'a pas de bordure et est également droite. La jointure de la main est également courbe avec une bordure.

Pour s'assurer que le parties de jointures du bras tournent correctement, nous les avons faites avec l'aide de quelques croix de visée (ou crosshair, image 3). Dans ''image 4'' et ''image 5'' nous pouvons voir comment la ligne horizontale du crosshair correspond à la ligne droite du bas de la partie haute du bras et en même temps la bordure du cercle du crosshair correspond à la bordure incurvée supérieure de l'avant-bras.

Le même principe est appliqué à la main et à la partie basse de l'avant-bras. Les crosshairs marquent aussi le centre du point de rotation qui sera utilisé ultérieurement durant le placement des armatures. Avant de placer les armatures nous pouvons aligner le {{l|Group Transformation Widget}} (pressez contrôle et tirez la poignée du coin gauche du {{l|Group Transformation Widget}} pour le déplacer.) du groupe '''lowerArm''' et le groupe '''hand''' avec les crosshairs du coude et le poignet pour vérifier si les jointures tournent correctement.

N'oubliez pas d'amener le bras dans sa position initiale originale en pressant undo. (Ne vous inquiétez pas si la main ne tourne pas avec le coude quand vous vérifierez la jointure du coude en utilisant le {{l|Group Transformation Widget}}.)
 
[[File:bonestut07.png|left|frame|IMAGE 4: Alignement des jointures]] [[File:bonestut08.png|center|frame|IMAGE 5: Alignement des jointures]]
 

== Ajout des armatures ==
[[File:bonestut13.png|left|250x400px|frame|IMAGE 6: Ajout d'une armature]]Il est maintenant temps d'ajouter un {{l|Skeleton Layer}} qui fournira les armatures dont nous avons besoin pour bouger le bras.

Cliquez-droit sur n'importe quel calque dans le {{l|Layers Panel}} et choisissez {{c|<New Layer>|<Other>|<Skeleton>}}. Un nouveau {{l|Skeleton Layer}} (IMAGE 7) va apparaître dans le {{l|Layers Panel}} avec à côté un petit os dans le canevas (IMAGE 6). Mettez le {{l|Skeleton Layer}} au-dessus du groupe '''arm''' s'il n'est pas encore placé là. La poignée verte de l'armature est l'origine de celle-ci et est utilisé pour la déplacer et est également son centre de rotation. LA poignée bleue est utilisée pour faire tourner l'armature.

La poignée orange détermine la longueur de l'armature et est utilisée pour étirer l'armature et son contenu. La première armature est l'armature parente et devrait être placée devant l'épaule et étirée de façon à ce qu'elle atteigne presque les bordures du premier crosshair du coude. Cliquez-droit sur n'importe quelle poignée de l'armature parente et sélectionnez {{Literal|Create Child Bone}}. Déplacez le point d'origine vert de l'armature enfant de sorte qu'il corresponde au crosshair du coude et étirez jusqu'à ce qu'il atteigne presque le crosshair du poignet. Cliquez-droit sur n'importe quelle poignée de l'armature enfant et créez une autre armature enfant. Déplacez le point d'origine vert de la seconde armature enfant de sorte qu'elle corresponde au crosshair du poignet (IMAGE 8). Étirez l'armature jusqu'à ce qu'elle atteigne l'extrémité des doigts.
[[File:bonestut11.png|left|frame|200x200px|IMAGE 7: Ajout du skeleton layer]][[File:bonestut05.png|center|frame|300x300px|IMAGE 8: Point d'origine vert de la main]]
 

== Lier l'ossature ==
[[File:bonestut12.png|left|frame|IMAGE 8: Liaison de la main au deuxième os enfant.]]
Maintenant que le {{l|Skeleton Layer}} est en place nous devons attacher les armatures aux parties du bras. Dans le {{l|Layers Panel}} cliquez sur le groupe '''upperArm''', cliquez-droit et {{Literal|Select All Child Layers}}. Pressez alors {{Shortcut|ctrl|A}} dans la fenêtre canevas. Avec tout de mis en surbrillance dans le groupe '''upperArm''', {{Shortcut|ctrl}}-clic sur n'importe quelle armature dans la fenêtre canevas et cliquez-droit sur n'importe laquelle des poignées de l'armature parent et cliquez {{Literal|Link to Bone}}. Le groupe '''upperArm''' est désormais lié à l'armature parente.

Allez à nouveau au {{l|Layers Panel}} et sélectionnez le groupe '''lowerArm'''. Cliquez-droit et {{Literal|Select All Child Layers}}. Pressez {{Shortcut|ctrl|A}} dans la fenêtre canevas et {{Shortcut|ctrl}}-clic sur l'une des armatures. Alors cliquez-droit sur n'importe quelle poignée de la première armature enfantet sélectionnez {{Literal|Link to bone}}. Le groupe '''lowerArm''' est maintenant lié à la seconte armature enfant.

Dans le {{l|Layers Panel}} sélectionnez tous les calques enfants du groupe '''hand''' et pressez {{Shortcut|ctrl|A}} dans la fenêtre canevas. {{Shortcut|ctrl}}-clic sur n'importe quelle armature et cliquez-droit sur n'importe laquelle des poignées de la seconde armature enfant et sélectionnez {{Literal|Link to bone}} (IMAGE 8) LA main est alors liée à la seconde armature enfant et le squelette entier est maintenant lié au bras.

Le fichier sif contenant les parties de ce tutoriel peut être trouvé {{l|Media:rigarm.sifz|ici}}
 

== Astuce ==
Faire un crosshair dans Synfig est simple. Dessinez un cercle. Dessinez les bordures d'un carré et alignez-les avec le cercle. Dessinez un X en utilisant les coins du carré comme référence. Effacez le carré. Groupez le cercle et le X. Tournez à 45 degrés en utilisant le {{l|Group Transformation Widget}}.
[[File:bonestut18.png|left|frame|IMAGE 9: Dessiner un crosshair.]]
 

== Étapes suivantes ==

Félicitation, vous avez atteint la fin des tutos d'introductions !

A partir de maintenant vous pouvez jetez un oeil à la page traitant de l'{{l|Doc:Quick_Overview|Interface}}, ou continuer à lire et réaliser le reste des {{l|Category:Tutorials|Tutoriels}}. La page {{l|Category:Manual|Manuel}} liste tout les articles disponibles afin de compléter vôtre apprentissage de Synfig.

{{Navigation|Category:Manual|Doc:Interface}}

Dev:IDE Linux

2015-08-23T23:33:20Z

BobSynfig: /* Import synfig (etl / core / studio) projects in Netbeans */ Typo

= Want to setup an IDE to debug / develop synfig ?=

''Here, we will not discuss of witch IDE is better or if real hacker do all with vi/emacs''

{{Note|Clone the code my dear|This assume you already {{l|Dev:Source_code|cloned the code}} from git}}

== Anjuta from gnu/linux ==
(Tested with Anjuta 3.14.0)

[http://anjuta.org/ What Anjuta is?]
=== First build !===

This will generate all needed makefile

* Open {{Literal|autobuild/synfigstudio-linux-build.sh}} and change {{Literal|<nowiki>DEBUG=</nowiki>0}} to {{Literal|<nowiki>DEBUG=1</nowiki>}} (line 76)
* Build from {{Literal|autobuild/synfigstudio-linux-build.sh}}
* During this time install {{Literal|anjuta}} from synaptic or whatever ... (from xubuntu 14.10 you must install Anjuta 3.14 from this [https://launchpad.net/~inizan-yannick/+archive/ubuntu/development ppa] for example : see [https://bugzilla.gnome.org/show_bug.cgi?id=728295#c17 here] why)

when anjuta installed and synfig builded....

=== Import synfig (etl / core / studio) projects in Anjuta ===

* Open Anjuta, in {{Literal|Action}} choose {{Literal|Import a project}} and choose your code location (synfig/ETL , synfig/synfig-core or synfig/synfig-studio)
* Select a project name and Import
* At the project backend choice, select {{Literal|Autotools}} and go for it (if you kept the default project name, replace the existing project with the new one)
* Wait a minute ... project loaded !

Repeat for each synfig project

''Your now able to build from Anjuta.''

=== Want to debug maybe ?===

* From Anjuta {{c|<Menu>|<Execute>|<Program Paramter>|Program}} : select synfig-studio binary {{Literal|/home/user/synfig/bin}} (i also setup the working directory)
* Now you need to clean the project and build it again (but this time from anjuta)
* Anjuta {{c|<Menu>|<Build>|Clean}}
* Anjuta {{c|<Menu>|<Build>|Build}}

''you (shouldbe) are ready to debug / improve / patch and share !''

=== Extra note ===

As Anjuta projects are saved in git examined folders, you could have sort of behavior when you ''git your code'' ... personally i have made a little script to backup/restore my own project to keep the folder safe of undesired change (.gitignore is also git surveyed !)

== Eclipse from gnu/linux ==
(Tested with Eclipse 3.8.1)

[http://eclipse.org/ What Eclipse is?]

=== First build !===

This will generate all needed makefile

* Open {{Literal|autobuild/synfigstudio-linux-build.sh}} and change {{Literal|<nowiki>DEBUG=</nowiki>0}} to {{Literal|<nowiki>DEBUG=1</nowiki>}} (line 76)
* Build from {{Literal|autobuild/synfigstudio-linux-build.sh}}
* During this time install {{Literal|eclipse}} & {{Literal|eclispe-cdt}} packages from synaptic or whatever ...

when eclipse installed and synfig builded....

=== Import synfig (etl / core / studio) projects in Eclipse ===

Open Eclipse, choose your desired place for the workspace (i recommend not in ./synfig folder if you want to commit, better just above)

For each synfig component (etl / core / studio ...)

# Eclipse / Menu / Makefile project with existing code
# Choose your project name (etl / core / studio ...)
# Select code location (synfig/ETL , synfig/synfig-core or synfig/synfig-studio)
# Select your toolchain ... and click Finish ... and Wait a little ...

''Your now able to build from Eclipse.''

=== Want to debug maybe ?===

* From {{Literal|Project Explorer}} panel, select your project properties (alt+enter / menu-project or right clicking)
* In {{Literal|C/C++ Build}} Uncheck {{Literal|Use default build command}} and put a {{Literal|make -j2 install}} (-jXX at your connivance ...)
* In {{Literal|Run/Debug Setting}} click "New" or "Edit..." , in C/C++ Application , browse and select the synfig-studio binary from {{Literal|/home/user/synfig/bin}}

Stop on Startup, what the heck ?
* ''Make sure you are in the c++ perspective, then go to menu Run -> Debug Configurations. Make sure your application is chosen in the left pane, press the Debugger tab, and uncheck Stop on startup at: checkbox.'' [http://stackoverflow.com/questions/4278532/how-to-stop-gdb-from-executing-break-main-by-default-in-eclipse How to stop GDB from executing “break main” by default in Eclipse?]

''you (shouldbe) are ready to debug / improve / patch and share !''

=== Have a functional environment ===

Add Includes paths to Code Analysis
* From {{Literal|Project Explorer}} panel, select your project properties (alt+enter / menu-project or right clicking)
* In C/C++ General / Paths and Symbols / Includes , add all the paths you need (ETL / Synfig-core / Cairo / Gtkmm ....)

== Netbeans from gnu/linux ==
(Tested with Netbeans 8.0.2) 
[https://netbeans.org/ What Netbeans is?] 
Done following the [https://www.youtube.com/watch?v=kR7MKXAYCww video tutorial made by Konstantin Dmitriev (in russian ;))] 
Assuming the source will be installed in /home/''yourUsername''/sources/synfig.single in the screenshots 
Don't forget to replace it with your own userName!

=== Install Netbeans ===

Be aware you need to have a JDK devel package installed on your machine to be able to install Netbeans 
On Fedora, I had to install it with the following command
{{Literal|yum install -y java-1.8.0-openjdk-devel}}

Install {{Literal|Netbeans}} from synaptic or from the [https://netbeans.org/downloads/ original download page], if not done already ... 

=== First build !===

This will generate all needed makefile

* Open {{Literal|autobuild/synfigstudio-linux-build.sh}} and change {{Literal|<nowiki>DEBUG=</nowiki>0}} to {{Literal|<nowiki>DEBUG=1</nowiki>}} (line 76)
OR
*Another possibility (like on the video) is to set DEBUG=1 (and a space) before the script name in the console 
in the console enter:{{Literal| /home/yourUsername/sources/synfig.single/autobuild/synfigstudio-linux-build.sh}} 

when Netbeans installed and synfig builded....

=== Import synfig (etl / core / studio) projects in Netbeans ===
* Open Netbeans
* Open File/New Project....

<table>
<tr><td>
1. Choose Project 
* Choose {{Literal|C/C++ Project}} under {{Literal|Categories}}, 
* Choose {{Literal|C/C++ Project with Existing Sources}} 
</td><td>[[File:Install_In_Netbeans_1.png]]</td>
</tr>

<tr><td>
* 2. Select Mode 
{| class="wikitable"
|-
|Source folder||/home/yourUsername/sources/synfig.single
|-
|Build Host||localhost
|-
|Tools Collection||Default(GNU (GNU))
|-
|Configuration Mode||Custom
|}</td>
<td>[[File:Install_In_Netbeans_2.png]]</td>
</tr>

<tr><td>
3. Build Tool 
* Using an existing makefile 
{{Literal|/home/yourUsername/sources/synfig.single/synfig-studio/Makefile}}
* Uncheck {{Literal|Clean and Build after Finish}}
</td>
<td>[[File:Install_In_Netbeans_3.png]]</td>
</tr>

<tr>
<td>
4. Build Action 
{| class="wikitable"
|-
|Working Directory||{{Literal|/home/yourUsername/sources/synfig.single/synfig-studio}}
|-
|Build Command||{{Literal|${MAKE} -f Makefile -j 4 install}}
|-
|Clean Command||{{Literal|${MAKE} -f Makefile clean}}
|-
|Build Result||{{Literal|/home/yourUsername/synfig/bin/synfigstudio}}
|}
</td>
<td>[[File:Install_In_Netbeans_4.png]]</td>
</tr>

<tr>
<td>5. Source Files 
* Add {{Literal|/home/yourUsername/sources/synfig.single}}
</td>
<td>[[File:Install_In_Netbeans_5.png]]</td>
</tr>

<tr>
<td>6. Code Assistance Configuration 
* Choose {{Literal|Automatic Configuration}}
</td>
<td>[[File:Install_In_Netbeans_6.png]]</td>
</tr>

<tr>
<td>7. Project Name and Location 
{| class="wikitable"
|-
|Project Name||{{Literal|synfig.single}}
|-
|Project Location||{{Literal|/home/yourUsername/sources}}
|-
|Project Folder||{{Literal|/home/yourUsername/sources/synfig.single}}
|-
|Build Host||{{Literal|localhost}}
|-
|Tool Collection||{{Literal|Default(GNU (GNU))}}
|}
</td>
<td>[[File:Install_In_Netbeans_7.png]]</td>
</tr>
</table>
* Press {{Literal|Finish}}
* Wait a minute ... project loaded !
''You are now able to build from Netbeans.''

Dev:IDE Windows

2015-08-23T23:32:36Z

BobSynfig: /* Import synfig (etl / core / studio) projects in Netbeans */ Typo

= Want to setup an IDE to debug / develop synfig ? (under Windows)=

''Here, we will not discuss of witch IDE is better or if real hacker do all with vi/emacs''

== Install GIT, other tools and clone the code ==
{{Note|Clone the code my dear|This assume you read the section {{l|Dev:Source_code|"Clone the code from git"}} }}

Before to setup any IDE, you will have to prepare the synfig-build environment under Windows.
It requires administrator rights.

Here is the original "Usage notes" from ''synfigstudio-cygwin-mingw-build.sh'' (by Konstantin Dmitriev).
We will follow it step-by-step!
<pre>
# * Download and install Git (http://msysgit.github.io/).
# * Open Git Bash and execute following commands:
# ** mkdir C:\synfig-build
# ** cd C:\synfig-build
# ** git clone https://github.com/synfig/synfig.git
# ** mkdir cygwin-dist
# ** cd synfig
# ** git config --global core.autocrlf input
# ** exit
# * Download Cygwin setup binary (http://www.cygwin.com/) and save it into C:\synfig-build\cygwin-dist\ directory.
# * Run Cygwin setup and install with the default parameters.
# * Download and install NSIS >=3.0 (http://nsis.sourceforge.net/). Install into C:\synfig-build\NSIS\ directory.
# * (64-bit build only!) Download and install 7zip (http://downloads.sourceforge.net/sevenzip/7z920-x64.msi). Install into C:\synfig-build\7zip\ directory.
# * Open Cygwin console (with administrator previlegies) and run the build script:
# ** bash C:/synfig-build/synfig/autobuild/synfigstudio-cygwin-mingw-build.sh
# * Installation bundle will be written to C:\synfig-build\
#
#
# = Other notes =
# * Builds from current repository, current revision. So you should manually checkout the desired revision to build
# * Executing script without arguments makes a full clean build and produces installer package
# * You can pass arguments to the script to invoke particular stage.
# Available stages: mkprep, mketl, mksynfig, mksynfigstudio, mkpackage
# Example:
# synfigstudio-cygwin-mingw-build.sh mkpackage
# * You can pass a custom command to be invoked in the build environment.
# Example (executes make with respect to the build environment):
# synfigstudio-cygwin-mingw-build.sh make -j2
</pre>

{{Note|Warning! Your attention please!|'''Be aware that the lines with ** have to be executed in Git Bash.''' If you don't, you will meet some nasty side-effects during the first build and you may lose your sanity!}}

=== Download and install Git ===
If you already installed Git, you can skip this section.

Visit the original website https://git-for-windows.github.io/ and click on the big download button. If you don't see it, go and see an ophthalmologist :P 
You will be redirected on the GitHub page with the last version, offered as 32 and 64bit.

You will install it with (most of) the default values, like on the screenshots below (featuring my mouse cursor as a Guest Star). 

<table border="1">
<tr>
<td>1. Welcome Screen. Press Next.</td>
<td>[[File:GitWinSetup_01.png]]</td>
</tr>
<tr>
<td>2. GNU GPL License Notice. Press Next.</td>
<td>[[File:GitWinSetup_02.png]]</td>
</tr>
<tr>
<td>3. In this page, you should check everything. Press Next.</td>
<td>[[File:GitWinSetup_03.png]]</td>
</tr>
<tr>
<td>4. Choose "Use Git from Git Bash only". It would permit you to avoid some mess with other tools. Press Next.</td>
<td>[[File:GitWinSetup_04.png]]</td>
</tr>
<tr>
<td>5. Choose "Checkout Windows-style, commit Unix-style line endings". Press Next.</td>
<td>[[File:GitWinSetup_05.png]]</td>
</tr>
<tr>
<td>6. Choose "Use MiniTTY". It has more possibilities. Press Next</td>
<td>[[File:GitWinSetup_06.png]]</td>
</tr>
<tr>
<td>7. Let this one unchecked. It doesn't take so much time anyway. Press Next. </td>
<td>[[File:GitWinSetup_07.png]]</td>
</tr>
<tr>
<td>8. Uncheck this one, no need to read. Press Finish.</td>
<td>[[File:GitWinSetup_08.png]]</td>
</tr>
</table>

=== Clone the Code ===

Start Git Bash as Administrator and type exactly all the following commands at the prompt. 
You can also paste in the Git Bash window with ''alt-space, modify, paste'' 
If you don't, you will notice it soon! 
''With Git 2.5.0 I had an error with "mkdir C:\synfig-build" so I changed it to "mkdir /c/synfig-build"''

<pre>
mkdir /c/synfig-build
cd C:\synfig-build
git clone https://github.com/synfig/synfig.git
mkdir cygwin-dist
cd synfig
git config --global core.autocrlf input
exit
</pre>

=== Download and install Cygwin ===

Download Cygwin setup binary (http://www.cygwin.com/). 
Save it into ''C:\synfig-build\cygwin-dist\'' directory.

Run Cygwin setup (with administrator rights) and install with the default parameters. 
It should be intalled in ''C:\cygwin''.

=== Download and install NSIS ===

Download and install NSIS '''''>=3.0''''' (http://nsis.sourceforge.net/). 
Don't use ''2.46'', it will fail! 
Install it full into ''C:\synfig-build\NSIS\'' directory.

=== You plan to build 64-bit version? You need 7zip ===
For the 64-bit build only!
Download and install 7zip (''http://downloads.sourceforge.net/sevenzip/7z920-x64.msi''). 
Install into ''C:\synfig-build\7zip\'' directory.

=== First build ! ===
Be aware that it was downloading components and compiling during more than 2 hours for me. 
It depends on you bandwith, the speed of your computer and hard disk type! 
But it should be only for this first build if you follow it carefully :) 
Sometimes it will looks stalled but you can check in your Task Manager if there are some sh/bash executable running. 
So let it run !

Open Cygwin console (with administrator privileges) and run the build script: 
<pre>bash C:/synfig-build/synfig/autobuild/synfigstudio-cygwin-mingw-build.sh</pre>

You can go and take a coffee (or a cocoa, depending on your age ;) ) 
Installation bundle will be written to ''C:\synfig-build\''

== Netbeans from Windows ==

(Tested with Netbeans 8.0.2) 
[https://netbeans.org/ What Netbeans is?] 
Done following the [https://www.youtube.com/watch?v=kR7MKXAYCww video tutorial made by Konstantin Dmitriev (in russian ;))] and adapted for Windows/Cygwin. 
Assuming the source will be installed in C:\synfig-build\synfig\ as expected. 

=== Prepare your Build Tools ===

You have to use a specific Build Tool Collection in your project. 
Go in the menu ''Tools'' / ''Options'' / ''C/C++'' / ''Build Tools'' 
Press ''Add'' (down-left). 
Enter ''C:\cygwin\bin'' as '''Base Directory''', ''GNU 4.x Cygwin'' as '''Tool Collection Family''', and ''Cygwin_4.x'' as '''Tool Collection Name'''. 

[[File:NB-Win-AddNewTool.png]] 

As a result, you should have the resulting information in the form: 

[[File:NB-Win-Build-Tools-Options.png]]

Press Ok. 
Now we are ready to setup the projects!

=== Import synfig (etl / core / studio) projects in Netbeans ===
* Open Netbeans (if not done yet)
* Open File/New Project....

<table border="1">
<tr><td>
1. Choose Project 
* Choose {{Literal|C/C++ Project}} under {{Literal|Categories}}, 
* Choose {{Literal|C/C++ Project with Existing Sources}} 
</td><td>[[File:NB-Win-01.png]]</td>
</tr>

<tr><td>
* 2. Select Mode 
{| class="wikitable"
|-
|Source folder||c:\synfig-build\synfig
|-
|Build Host||localhost
|-
|Tools Collection||Cygwin 4.x (GNU 4.x Cygwin)
|-
|Configuration Mode||Custom
|}</td>
<td>[[File:NB-Win-02.png]]</td>
</tr>

<tr><td>
3. Build Tool 
* Using an existing makefile 
{{Literal|c:/synfig-build/synfig/synfig-studio/Makefile}}
* Uncheck {{Literal|Clean and Build after Finish}}
</td>
<td>[[File:NB-Win-03.png]]</td>
</tr>

<tr>
<td>
4. Build Action 
{| class="wikitable"
|-
|Working Directory||{{Literal|c:/synfig-build/synfig/synfig-studio}}
|-
|Build Command||{{Literal|${MAKE} -f Makefile -j 4 install}}
|-
|Clean Command||{{Literal|${MAKE} -f Makefile clean}}
|-
|Build Result||{{Literal|c:/synfig-build/dist/bin/synfigstudio.exe}}
|}
</td>
<td>[[File:NB-Win-04.png]]</td>
</tr>

<tr>
<td>5. Source Files 
* Add {{Literal|c:\synfig-build\synfig}}
</td>
<td>[[File:NB-Win-05.png]]</td>
</tr>

<tr>
<td>6. Code Assistance Configuration 
* Choose {{Literal|Automatic Configuration}}
</td>
<td>[[File:NB-Win-06.png]]</td>
</tr>

<tr>
<td>7. Project Name and Location 
{| class="wikitable"
|-
|Project Name||{{Literal|synfig}}
|-
|Project Location||{{Literal|c:\synfig-build}}
|-
|Project Folder||{{Literal|c:\synfig-build\synfig}}
|-
|Build Host||{{Literal|localhost}}
|-
|Tool Collection||{{Literal|Cygwin_4.x (GNU 4.x Cygwin)}}
|}
</td>
<td>[[File:NB-Win-07.png]]</td>
</tr>
</table>
* Press {{Literal|Finish}}
* Wait a minute ... project loaded !
''You are now able to build from Netbeans.''

Dev:IDE Windows

2015-08-23T14:04:03Z

BobSynfig: In First build - Changed duration + advice

= Want to setup an IDE to debug / develop synfig ? (under Windows)=

''Here, we will not discuss of witch IDE is better or if real hacker do all with vi/emacs''

== Install GIT, other tools and clone the code ==
{{Note|Clone the code my dear|This assume you read the section {{l|Dev:Source_code|"Clone the code from git"}} }}

Before to setup any IDE, you will have to prepare the synfig-build environment under Windows.
It requires administrator rights.

Here is the original "Usage notes" from ''synfigstudio-cygwin-mingw-build.sh'' (by Konstantin Dmitriev).
We will follow it step-by-step!
<pre>
# * Download and install Git (http://msysgit.github.io/).
# * Open Git Bash and execute following commands:
# ** mkdir C:\synfig-build
# ** cd C:\synfig-build
# ** git clone https://github.com/synfig/synfig.git
# ** mkdir cygwin-dist
# ** cd synfig
# ** git config --global core.autocrlf input
# ** exit
# * Download Cygwin setup binary (http://www.cygwin.com/) and save it into C:\synfig-build\cygwin-dist\ directory.
# * Run Cygwin setup and install with the default parameters.
# * Download and install NSIS >=3.0 (http://nsis.sourceforge.net/). Install into C:\synfig-build\NSIS\ directory.
# * (64-bit build only!) Download and install 7zip (http://downloads.sourceforge.net/sevenzip/7z920-x64.msi). Install into C:\synfig-build\7zip\ directory.
# * Open Cygwin console (with administrator previlegies) and run the build script:
# ** bash C:/synfig-build/synfig/autobuild/synfigstudio-cygwin-mingw-build.sh
# * Installation bundle will be written to C:\synfig-build\
#
#
# = Other notes =
# * Builds from current repository, current revision. So you should manually checkout the desired revision to build
# * Executing script without arguments makes a full clean build and produces installer package
# * You can pass arguments to the script to invoke particular stage.
# Available stages: mkprep, mketl, mksynfig, mksynfigstudio, mkpackage
# Example:
# synfigstudio-cygwin-mingw-build.sh mkpackage
# * You can pass a custom command to be invoked in the build environment.
# Example (executes make with respect to the build environment):
# synfigstudio-cygwin-mingw-build.sh make -j2
</pre>

{{Note|Warning! Your attention please!|'''Be aware that the lines with ** have to be executed in Git Bash.''' If you don't, you will meet some nasty side-effects during the first build and you may lose your sanity!}}

=== Download and install Git ===
If you already installed Git, you can skip this section.

Visit the original website https://git-for-windows.github.io/ and click on the big download button. If you don't see it, go and see an ophthalmologist :P 
You will be redirected on the GitHub page with the last version, offered as 32 and 64bit.

You will install it with (most of) the default values, like on the screenshots below (featuring my mouse cursor as a Guest Star). 

<table border="1">
<tr>
<td>1. Welcome Screen. Press Next.</td>
<td>[[File:GitWinSetup_01.png]]</td>
</tr>
<tr>
<td>2. GNU GPL License Notice. Press Next.</td>
<td>[[File:GitWinSetup_02.png]]</td>
</tr>
<tr>
<td>3. In this page, you should check everything. Press Next.</td>
<td>[[File:GitWinSetup_03.png]]</td>
</tr>
<tr>
<td>4. Choose "Use Git from Git Bash only". It would permit you to avoid some mess with other tools. Press Next.</td>
<td>[[File:GitWinSetup_04.png]]</td>
</tr>
<tr>
<td>5. Choose "Checkout Windows-style, commit Unix-style line endings". Press Next.</td>
<td>[[File:GitWinSetup_05.png]]</td>
</tr>
<tr>
<td>6. Choose "Use MiniTTY". It has more possibilities. Press Next</td>
<td>[[File:GitWinSetup_06.png]]</td>
</tr>
<tr>
<td>7. Let this one unchecked. It doesn't take so much time anyway. Press Next. </td>
<td>[[File:GitWinSetup_07.png]]</td>
</tr>
<tr>
<td>8. Uncheck this one, no need to read. Press Finish.</td>
<td>[[File:GitWinSetup_08.png]]</td>
</tr>
</table>

=== Clone the Code ===

Start Git Bash as Administrator and type exactly all the following commands at the prompt. 
You can also paste in the Git Bash window with ''alt-space, modify, paste'' 
If you don't, you will notice it soon! 
''With Git 2.5.0 I had an error with "mkdir C:\synfig-build" so I changed it to "mkdir /c/synfig-build"''

<pre>
mkdir /c/synfig-build
cd C:\synfig-build
git clone https://github.com/synfig/synfig.git
mkdir cygwin-dist
cd synfig
git config --global core.autocrlf input
exit
</pre>

=== Download and install Cygwin ===

Download Cygwin setup binary (http://www.cygwin.com/). 
Save it into ''C:\synfig-build\cygwin-dist\'' directory.

Run Cygwin setup (with administrator rights) and install with the default parameters. 
It should be intalled in ''C:\cygwin''.

=== Download and install NSIS ===

Download and install NSIS '''''>=3.0''''' (http://nsis.sourceforge.net/). 
Don't use ''2.46'', it will fail! 
Install it full into ''C:\synfig-build\NSIS\'' directory.

=== You plan to build 64-bit version? You need 7zip ===
For the 64-bit build only!
Download and install 7zip (''http://downloads.sourceforge.net/sevenzip/7z920-x64.msi''). 
Install into ''C:\synfig-build\7zip\'' directory.

=== First build ! ===
Be aware that it was downloading components and compiling during more than 2 hours for me. 
It depends on you bandwith, the speed of your computer and hard disk type! 
But it should be only for this first build if you follow it carefully :) 
Sometimes it will looks stalled but you can check in your Task Manager if there are some sh/bash executable running. 
So let it run !

Open Cygwin console (with administrator privileges) and run the build script: 
<pre>bash C:/synfig-build/synfig/autobuild/synfigstudio-cygwin-mingw-build.sh</pre>

You can go and take a coffee (or a cocoa, depending on your age ;) ) 
Installation bundle will be written to ''C:\synfig-build\''

== Netbeans from Windows ==

(Tested with Netbeans 8.0.2) 
[https://netbeans.org/ What Netbeans is?] 
Done following the [https://www.youtube.com/watch?v=kR7MKXAYCww video tutorial made by Konstantin Dmitriev (in russian ;))] and adapted for Windows/Cygwin. 
Assuming the source will be installed in C:\synfig-build\synfig\ as expected. 

=== Prepare your Build Tools ===

You have to use a specific Build Tool Collection in your project. 
Go in the menu ''Tools'' / ''Options'' / ''C/C++'' / ''Build Tools'' 
Press ''Add'' (down-left). 
Enter ''C:\cygwin\bin'' as '''Base Directory''', ''GNU 4.x Cygwin'' as '''Tool Collection Family''', and ''Cygwin_4.x'' as '''Tool Collection Name'''. 

[[File:NB-Win-AddNewTool.png]] 

As a result, you should have the resulting information in the form: 

[[File:NB-Win-Build-Tools-Options.png]]

Press Ok. 
Now we are ready to setup the projects!

=== Import synfig (etl / core / studio) projects in Netbeans ===
* Open Netbeans (if not done yet)
* Open File/New Project....

<table border="1">
<tr><td>
1. Choose Project 
* Choose {{Literal|C/C++ Project}} under {{Literal|Categories}}, 
* Choose {{Literal|C/C++ Project with Existing Sources}} 
</td><td>[[File:NB-Win-01.png]]</td>
</tr>

<tr><td>
* 2. Select Mode 
{| class="wikitable"
|-
|Source folder||c:\synfig-build\synfig
|-
|Build Host||localhost
|-
|Tools Collection||Cygwin 4.x (GNU 4.x Cygwin)
|-
|Configuration Mode||Custom
|}</td>
<td>[[File:NB-Win-02.png]]</td>
</tr>

<tr><td>
3. Build Tool 
* Using an existing makefile 
{{Literal|c:/synfig-build/synfig/synfig-studio/Makefile}}
* Uncheck {{Literal|Clean and Build after Finish}}
</td>
<td>[[File:NB-Win-03.png]]</td>
</tr>

<tr>
<td>
4. Build Action 
{| class="wikitable"
|-
|Working Directory||{{Literal|c:/synfig-build/synfig/synfig-studio}}
|-
|Build Command||{{Literal|${MAKE} -f Makefile -j 4 install}}
|-
|Clean Command||{{Literal|${MAKE} -f Makefile clean}}
|-
|Build Result||{{Literal|c:/synfig-build/dist/bin/synfigstudio.exe}}
|}
</td>
<td>[[File:NB-Win-04.png]]</td>
</tr>

<tr>
<td>5. Source Files 
* Add {{Literal|c:\synfig-build\synfig}}
</td>
<td>[[File:NB-Win-05.png]]</td>
</tr>

<tr>
<td>6. Code Assistance Configuration 
* Choose {{Literal|Automatic Configuration}}
</td>
<td>[[File:NB-Win-06.png]]</td>
</tr>

<tr>
<td>7. Project Name and Location 
{| class="wikitable"
|-
|Project Name||{{Literal|synfig}}
|-
|Project Location||{{Literal|c:\synfig-build}}
|-
|Project Folder||{{Literal|c:\synfig-build\synfig}}
|-
|Build Host||{{Literal|localhost}}
|-
|Tool Collection||{{Literal|Cygwin_4.x (GNU 4.x Cygwin)}}
|}
</td>
<td>[[File:NB-Win-07.png]]</td>
</tr>
</table>
* Press {{Literal|Finish}}
* Wait a minute ... project loaded !
''Your now able to build from Netbeans.''

Dev:IDE Windows

2015-08-22T21:50:49Z

BobSynfig: Modified to "mkdir /c/synfig-build", can't create with "mkdir C:\synfig-build" (Git 2.5.0)

= Want to setup an IDE to debug / develop synfig ? (under Windows)=

''Here, we will not discuss of witch IDE is better or if real hacker do all with vi/emacs''

== Install GIT, other tools and clone the code ==
{{Note|Clone the code my dear|This assume you read the section {{l|Dev:Source_code|"Clone the code from git"}} }}

Before to setup any IDE, you will have to prepare the synfig-build environment under Windows.
It requires administrator rights.

Here is the original "Usage notes" from ''synfigstudio-cygwin-mingw-build.sh'' (by Konstantin Dmitriev).
We will follow it step-by-step!
<pre>
# * Download and install Git (http://msysgit.github.io/).
# * Open Git Bash and execute following commands:
# ** mkdir C:\synfig-build
# ** cd C:\synfig-build
# ** git clone https://github.com/synfig/synfig.git
# ** mkdir cygwin-dist
# ** cd synfig
# ** git config --global core.autocrlf input
# ** exit
# * Download Cygwin setup binary (http://www.cygwin.com/) and save it into C:\synfig-build\cygwin-dist\ directory.
# * Run Cygwin setup and install with the default parameters.
# * Download and install NSIS >=3.0 (http://nsis.sourceforge.net/). Install into C:\synfig-build\NSIS\ directory.
# * (64-bit build only!) Download and install 7zip (http://downloads.sourceforge.net/sevenzip/7z920-x64.msi). Install into C:\synfig-build\7zip\ directory.
# * Open Cygwin console (with administrator previlegies) and run the build script:
# ** bash C:/synfig-build/synfig/autobuild/synfigstudio-cygwin-mingw-build.sh
# * Installation bundle will be written to C:\synfig-build\
#
#
# = Other notes =
# * Builds from current repository, current revision. So you should manually checkout the desired revision to build
# * Executing script without arguments makes a full clean build and produces installer package
# * You can pass arguments to the script to invoke particular stage.
# Available stages: mkprep, mketl, mksynfig, mksynfigstudio, mkpackage
# Example:
# synfigstudio-cygwin-mingw-build.sh mkpackage
# * You can pass a custom command to be invoked in the build environment.
# Example (executes make with respect to the build environment):
# synfigstudio-cygwin-mingw-build.sh make -j2
</pre>

{{Note|Warning! Your attention please!|'''Be aware that the lines with ** have to be executed in Git Bash.''' If you don't, you will meet some nasty side-effects during the first build and you may lose your sanity!}}

=== Download and install Git ===
If you already installed Git, you can skip this section.

Visit the original website https://git-for-windows.github.io/ and click on the big download button. If you don't see it, go and see an ophthalmologist :P 
You will be redirected on the GitHub page with the last version, offered as 32 and 64bit.

You will install it with (most of) the default values, like on the screenshots below (featuring my mouse cursor as a Guest Star). 

<table border="1">
<tr>
<td>1. Welcome Screen. Press Next.</td>
<td>[[File:GitWinSetup_01.png]]</td>
</tr>
<tr>
<td>2. GNU GPL License Notice. Press Next.</td>
<td>[[File:GitWinSetup_02.png]]</td>
</tr>
<tr>
<td>3. In this page, you should check everything. Press Next.</td>
<td>[[File:GitWinSetup_03.png]]</td>
</tr>
<tr>
<td>4. Choose "Use Git from Git Bash only". It would permit you to avoid some mess with other tools. Press Next.</td>
<td>[[File:GitWinSetup_04.png]]</td>
</tr>
<tr>
<td>5. Choose "Checkout Windows-style, commit Unix-style line endings". Press Next.</td>
<td>[[File:GitWinSetup_05.png]]</td>
</tr>
<tr>
<td>6. Choose "Use MiniTTY". It has more possibilities. Press Next</td>
<td>[[File:GitWinSetup_06.png]]</td>
</tr>
<tr>
<td>7. Let this one unchecked. It doesn't take so much time anyway. Press Next. </td>
<td>[[File:GitWinSetup_07.png]]</td>
</tr>
<tr>
<td>8. Uncheck this one, no need to read. Press Finish.</td>
<td>[[File:GitWinSetup_08.png]]</td>
</tr>
</table>

=== Clone the Code ===

Start Git Bash as Administrator and type exactly all the following commands at the prompt. 
You can also paste in the Git Bash window with ''alt-space, modify, paste'' 
If you don't, you will notice it soon! 
''With Git 2.5.0 I had an error with "mkdir C:\synfig-build" so I changed it to "mkdir /c/synfig-build"''

<pre>
mkdir /c/synfig-build
cd C:\synfig-build
git clone https://github.com/synfig/synfig.git
mkdir cygwin-dist
cd synfig
git config --global core.autocrlf input
exit
</pre>

=== Download and install Cygwin ===

Download Cygwin setup binary (http://www.cygwin.com/). 
Save it into ''C:\synfig-build\cygwin-dist\'' directory.

Run Cygwin setup (with administrator rights) and install with the default parameters. 
It should be intalled in ''C:\cygwin''.

=== Download and install NSIS ===

Download and install NSIS '''''>=3.0''''' (http://nsis.sourceforge.net/). 
Don't use ''2.46'', it will fail! 
Install it full into ''C:\synfig-build\NSIS\'' directory.

=== You plan to build 64-bit version? You need 7zip ===
For the 64-bit build only!
Download and install 7zip (''http://downloads.sourceforge.net/sevenzip/7z920-x64.msi''). 
Install into ''C:\synfig-build\7zip\'' directory.

=== First build ! ===
Be aware that it was downloading components and compiling during about one hour for me. 
It depends on you bandwith, the speed of your computer and hard disk type! 
But it should be only for this first build if you follow it carefully :)

Open Cygwin console (with administrator privileges) and run the build script: 
<pre>bash C:/synfig-build/synfig/autobuild/synfigstudio-cygwin-mingw-build.sh</pre>

You can go and take a coffee (or a cocoa, depending on your age ;) ) 
Installation bundle will be written to ''C:\synfig-build\''

== Netbeans from Windows ==

(Tested with Netbeans 8.0.2) 
[https://netbeans.org/ What Netbeans is?] 
Done following the [https://www.youtube.com/watch?v=kR7MKXAYCww video tutorial made by Konstantin Dmitriev (in russian ;))] and adapted for Windows/Cygwin. 
Assuming the source will be installed in C:\synfig-build\synfig\ as expected. 

=== Prepare your Build Tools ===

You have to use a specific Build Tool Collection in your project. 
Go in the menu ''Tools'' / ''Options'' / ''C/C++'' / ''Build Tools'' 
Press ''Add'' (down-left). 
Enter ''C:\cygwin\bin'' as '''Base Directory''', ''GNU 4.x Cygwin'' as '''Tool Collection Family''', and ''Cygwin_4.x'' as '''Tool Collection Name'''. 

[[File:NB-Win-AddNewTool.png]] 

As a result, you should have the resulting information in the form: 

[[File:NB-Win-Build-Tools-Options.png]]

Press Ok. 
Now we are ready to setup the projects!

=== Import synfig (etl / core / studio) projects in Netbeans ===
* Open Netbeans (if not done yet)
* Open File/New Project....

<table border="1">
<tr><td>
1. Choose Project 
* Choose {{Literal|C/C++ Project}} under {{Literal|Categories}}, 
* Choose {{Literal|C/C++ Project with Existing Sources}} 
</td><td>[[File:NB-Win-01.png]]</td>
</tr>

<tr><td>
* 2. Select Mode 
{| class="wikitable"
|-
|Source folder||c:\synfig-build\synfig
|-
|Build Host||localhost
|-
|Tools Collection||Cygwin 4.x (GNU 4.x Cygwin)
|-
|Configuration Mode||Custom
|}</td>
<td>[[File:NB-Win-02.png]]</td>
</tr>

<tr><td>
3. Build Tool 
* Using an existing makefile 
{{Literal|c:/synfig-build/synfig/synfig-studio/Makefile}}
* Uncheck {{Literal|Clean and Build after Finish}}
</td>
<td>[[File:NB-Win-03.png]]</td>
</tr>

<tr>
<td>
4. Build Action 
{| class="wikitable"
|-
|Working Directory||{{Literal|c:/synfig-build/synfig/synfig-studio}}
|-
|Build Command||{{Literal|${MAKE} -f Makefile -j 4 install}}
|-
|Clean Command||{{Literal|${MAKE} -f Makefile clean}}
|-
|Build Result||{{Literal|c:/synfig-build/dist/bin/synfigstudio.exe}}
|}
</td>
<td>[[File:NB-Win-04.png]]</td>
</tr>

<tr>
<td>5. Source Files 
* Add {{Literal|c:\synfig-build\synfig}}
</td>
<td>[[File:NB-Win-05.png]]</td>
</tr>

<tr>
<td>6. Code Assistance Configuration 
* Choose {{Literal|Automatic Configuration}}
</td>
<td>[[File:NB-Win-06.png]]</td>
</tr>

<tr>
<td>7. Project Name and Location 
{| class="wikitable"
|-
|Project Name||{{Literal|synfig}}
|-
|Project Location||{{Literal|c:\synfig-build}}
|-
|Project Folder||{{Literal|c:\synfig-build\synfig}}
|-
|Build Host||{{Literal|localhost}}
|-
|Tool Collection||{{Literal|Cygwin_4.x (GNU 4.x Cygwin)}}
|}
</td>
<td>[[File:NB-Win-07.png]]</td>
</tr>
</table>
* Press {{Literal|Finish}}
* Wait a minute ... project loaded !
''Your now able to build from Netbeans.''

Developer Documentation

2015-08-22T19:32:59Z

BobSynfig: /* Main pages */

{{Title|Developer Documentation}}
{{TOCright}}

The Developer Documentation part of this wiki is primarily for the following groups of people:

*Current developers of the code
*Future and potential developers
*Those interested in bug filing and generating ideas

= Main pages =

* {{l|Dev:Build Instructions|Build Instructions}}
* [[Building Documentation|Building Documentation]]
* {{l|Dev:Source code|Source code}} description and workflow
* IDE Setup {{l|Dev:IDE_Linux|under Linux}} | {{l|Dev:IDE_Windows| under Windows}}
* {{l|Dev:Roadmap|Roadmap}}
* {{l|Dev:Contribute to Code}}
* {{l|Dev:Wish list|Wish List}}
* {{l|Dev:Coding_Conventions|Coding Conventions}}
* {{l|Dev:UI/UX Redesign|UI/UX Redesign}}
* {{l|Dev:ETL_replacement|ETL replacement}}

=Synfig components=
Synfig is divided into three main components: etl, synfig-core and synfig-studio.
* '''[http://download.tuxfamily.org/synfig/api/ETL/annotated.html ETL]''' is the extended template library. One of its most important components is the shared object class, which is the base class for most other parts of the application. Using "handles" to shared objects instead of c++ pointers provides garbage collection via reference counting.
* '''[http://download.tuxfamily.org/synfig/api/synfig-core/annotated.html Synfig-core]''' is the core/command-line (cli) renderer ("synfig") contains the document data structure for the application: valuenodes, layers, and canvases.
* '''[http://download.tuxfamily.org/synfig/api/synfig-studio/annotated.html Synfig Studio]''' ("synfig-studio") provides the gui for the application.
* See also: {{l|Dev:How Synfig Works|How Synfig Works}}

= External libs =
== Synfig use several external libs==
* [https://developer.gnome.org/gtkmm-tutorial/2.24/ Gtkmm 2], some work on branchs has been started to reach [https://developer.gnome.org/gtk3/ Gtkmm 3] ([https://developer.gnome.org/gtk3/3.4/gtk-migrating-2-to-3.html Migrating 2to3])
* [https://developer.gnome.org/gtkmm/2.24/namespaceGdk_1_1Cairo.html Cairo] (Cairo render mode)
* [http://freetype.org/ Freetype2] library (Text layer rendering in software render mode)
* [http://libxmlplusplus.sourceforge.net/ libxmlplusplus] (to parse the project files)
* [http://www.boost.org/doc/libs/1_54_0/doc/html/program_options.html Boost Program Options] (synfig cli)
* [http://www.mltframework.org/ MLT Framework - Media Loving Toolkit] (Sound Layer)
* [http://www.libpng.org/pub/png/libpng.html libpng] (load and write .png files)

==Optionally you will also need==
* [http://www.imagemagick.org/Magick++/ Magick++] the ImageMagick API (to build mod_magickpp, the magick++ module from synfig-core)
* libavcodec (to build mod_libavcodec, from synfig-core)
* libmng (to build mod_mng, from synfig-core)
... check the {{l|Dev:Build Instructions|Build Instructions}} page for more detailed informations.

=Complete coding tutorials=
* {{l|Dev:Adding a Layer|Adding a Layer}}
* Adding a Panel, {{l|Dev:Adding a Panel - Part I|Part I}} and {{l|Dev:Adding a Panel - Part II|Part II}}. '''Note: these are highly out of date''' please note that the directory "gtkmm" has been renamed to "gui", Panel is now know has Dock. Also, some files were moved into subfolders (take a look inside the "gui/docks" folder for example).

=Other links=
* [http://download.tuxfamily.org/synfig/api/index.html ETL, Synfig, SynfigStudio Api documentation]
* [http://synfig.org/wiki/index.php?title=Special:PrefixIndex&from=&namespace=102 All Dev namespace pages]
* {{l|Dev:Translation|Translate the application}}
* {{l|Dev:Release|Release procedure}}
* {{l|Dev:GoogleSoC|Google Summer of Code}}
* [http://sourceforge.net/p/synfig/mailman/synfig-devl/ Synfig Developer Mailing List]
* [http://www.synfig.org/issues/thebuggenie/synfig Synfig Issue Tracker]
* [http://www.synfig.org/forums/viewtopic.php?f=2&t=6097 Genete free stuff...]

Dev:IDE Windows

2015-08-22T19:28:03Z

BobSynfig: Added Import in Netbeans

= Want to setup an IDE to debug / develop synfig ? (under Windows)=

''Here, we will not discuss of witch IDE is better or if real hacker do all with vi/emacs''

== Install GIT, other tools and clone the code ==
{{Note|Clone the code my dear|This assume you read the section {{l|Dev:Source_code|"Clone the code from git"}} }}

Before to setup any IDE, you will have to prepare the synfig-build environment under Windows.
It requires administrator rights.

Here is the original "Usage notes" from ''synfigstudio-cygwin-mingw-build.sh'' (by Konstantin Dmitriev).
We will follow it step-by-step!
<pre>
# * Download and install Git (http://msysgit.github.io/).
# * Open Git Bash and execute following commands:
# ** mkdir C:\synfig-build
# ** cd C:\synfig-build
# ** git clone https://github.com/synfig/synfig.git
# ** mkdir cygwin-dist
# ** cd synfig
# ** git config --global core.autocrlf input
# ** exit
# * Download Cygwin setup binary (http://www.cygwin.com/) and save it into C:\synfig-build\cygwin-dist\ directory.
# * Run Cygwin setup and install with the default parameters.
# * Download and install NSIS >=3.0 (http://nsis.sourceforge.net/). Install into C:\synfig-build\NSIS\ directory.
# * (64-bit build only!) Download and install 7zip (http://downloads.sourceforge.net/sevenzip/7z920-x64.msi). Install into C:\synfig-build\7zip\ directory.
# * Open Cygwin console (with administrator previlegies) and run the build script:
# ** bash C:/synfig-build/synfig/autobuild/synfigstudio-cygwin-mingw-build.sh
# * Installation bundle will be written to C:\synfig-build\
#
#
# = Other notes =
# * Builds from current repository, current revision. So you should manually checkout the desired revision to build
# * Executing script without arguments makes a full clean build and produces installer package
# * You can pass arguments to the script to invoke particular stage.
# Available stages: mkprep, mketl, mksynfig, mksynfigstudio, mkpackage
# Example:
# synfigstudio-cygwin-mingw-build.sh mkpackage
# * You can pass a custom command to be invoked in the build environment.
# Example (executes make with respect to the build environment):
# synfigstudio-cygwin-mingw-build.sh make -j2
</pre>

{{Note|Warning! Your attention please!|'''Be aware that the lines with ** have to be executed in Git Bash.''' If you don't, you will meet some nasty side-effects during the first build and you may lose your sanity!}}

=== Download and install Git ===
If you already installed Git, you can skip this section.

Visit the original website https://git-for-windows.github.io/ and click on the big download button. If you don't see it, go and see an ophthalmologist :P 
You will be redirected on the GitHub page with the last version, offered as 32 and 64bit.

You will install it with (most of) the default values, like on the screenshots below (featuring my mouse cursor as a Guest Star). 

<table border="1">
<tr>
<td>1. Welcome Screen. Press Next.</td>
<td>[[File:GitWinSetup_01.png]]</td>
</tr>
<tr>
<td>2. GNU GPL License Notice. Press Next.</td>
<td>[[File:GitWinSetup_02.png]]</td>
</tr>
<tr>
<td>3. In this page, you should check everything. Press Next.</td>
<td>[[File:GitWinSetup_03.png]]</td>
</tr>
<tr>
<td>4. Choose "Use Git from Git Bash only". It would permit you to avoid some mess with other tools. Press Next.</td>
<td>[[File:GitWinSetup_04.png]]</td>
</tr>
<tr>
<td>5. Choose "Checkout Windows-style, commit Unix-style line endings". Press Next.</td>
<td>[[File:GitWinSetup_05.png]]</td>
</tr>
<tr>
<td>6. Choose "Use MiniTTY". It has more possibilities. Press Next</td>
<td>[[File:GitWinSetup_06.png]]</td>
</tr>
<tr>
<td>7. Let this one unchecked. It doesn't take so much time anyway. Press Next. </td>
<td>[[File:GitWinSetup_07.png]]</td>
</tr>
<tr>
<td>8. Uncheck this one, no need to read. Press Finish.</td>
<td>[[File:GitWinSetup_08.png]]</td>
</tr>
</table>

=== Clone the Code ===

Start Git Bash as Administrator and type exactly all the following commands at the prompt. 
If you don't, you will notice it soon!

<pre>
mkdir C:\synfig-build
cd C:\synfig-build
git clone https://github.com/synfig/synfig.git
mkdir cygwin-dist
cd synfig
git config --global core.autocrlf input
exit
</pre>

=== Download and install Cygwin ===

Download Cygwin setup binary (http://www.cygwin.com/). 
Save it into ''C:\synfig-build\cygwin-dist\'' directory.

Run Cygwin setup (with administrator rights) and install with the default parameters. 
It should be intalled in ''C:\cygwin''.

=== Download and install NSIS ===

Download and install NSIS '''''>=3.0''''' (http://nsis.sourceforge.net/). 
Don't use ''2.46'', it will fail! 
Install it full into ''C:\synfig-build\NSIS\'' directory.

=== You plan to build 64-bit version? You need 7zip ===
For the 64-bit build only!
Download and install 7zip (''http://downloads.sourceforge.net/sevenzip/7z920-x64.msi''). 
Install into ''C:\synfig-build\7zip\'' directory.

=== First build ! ===
Be aware that it was downloading components and compiling during about one hour for me. 
It depends on you bandwith, the speed of your computer and hard disk type! 
But it should be only for this first build if you follow it carefully :)

Open Cygwin console (with administrator privileges) and run the build script: 
<pre>bash C:/synfig-build/synfig/autobuild/synfigstudio-cygwin-mingw-build.sh</pre>

You can go and take a coffee (or a cocoa, depending on your age ;) ) 
Installation bundle will be written to ''C:\synfig-build\''

== Netbeans from Windows ==

(Tested with Netbeans 8.0.2) 
[https://netbeans.org/ What Netbeans is?] 
Done following the [https://www.youtube.com/watch?v=kR7MKXAYCww video tutorial made by Konstantin Dmitriev (in russian ;))] and adapted for Windows/Cygwin. 
Assuming the source will be installed in C:\synfig-build\synfig\ as expected. 

=== Prepare your Build Tools ===

You have to use a specific Build Tool Collection in your project. 
Go in the menu ''Tools'' / ''Options'' / ''C/C++'' / ''Build Tools'' 
Press ''Add'' (down-left). 
Enter ''C:\cygwin\bin'' as '''Base Directory''', ''GNU 4.x Cygwin'' as '''Tool Collection Family''', and ''Cygwin_4.x'' as '''Tool Collection Name'''. 

[[File:NB-Win-AddNewTool.png]] 

As a result, you should have the resulting information in the form: 

[[File:NB-Win-Build-Tools-Options.png]]

Press Ok. 
Now we are ready to setup the projects!

=== Import synfig (etl / core / studio) projects in Netbeans ===
* Open Netbeans (if not done yet)
* Open File/New Project....

<table border="1">
<tr><td>
1. Choose Project 
* Choose {{Literal|C/C++ Project}} under {{Literal|Categories}}, 
* Choose {{Literal|C/C++ Project with Existing Sources}} 
</td><td>[[File:NB-Win-01.png]]</td>
</tr>

<tr><td>
* 2. Select Mode 
{| class="wikitable"
|-
|Source folder||c:\synfig-build\synfig
|-
|Build Host||localhost
|-
|Tools Collection||Cygwin 4.x (GNU 4.x Cygwin)
|-
|Configuration Mode||Custom
|}</td>
<td>[[File:NB-Win-02.png]]</td>
</tr>

<tr><td>
3. Build Tool 
* Using an existing makefile 
{{Literal|c:/synfig-build/synfig/synfig-studio/Makefile}}
* Uncheck {{Literal|Clean and Build after Finish}}
</td>
<td>[[File:NB-Win-03.png]]</td>
</tr>

<tr>
<td>
4. Build Action 
{| class="wikitable"
|-
|Working Directory||{{Literal|c:/synfig-build/synfig/synfig-studio}}
|-
|Build Command||{{Literal|${MAKE} -f Makefile -j 4 install}}
|-
|Clean Command||{{Literal|${MAKE} -f Makefile clean}}
|-
|Build Result||{{Literal|c:/synfig-build/dist/bin/synfigstudio.exe}}
|}
</td>
<td>[[File:NB-Win-04.png]]</td>
</tr>

<tr>
<td>5. Source Files 
* Add {{Literal|c:\synfig-build\synfig}}
</td>
<td>[[File:NB-Win-05.png]]</td>
</tr>

<tr>
<td>6. Code Assistance Configuration 
* Choose {{Literal|Automatic Configuration}}
</td>
<td>[[File:NB-Win-06.png]]</td>
</tr>

<tr>
<td>7. Project Name and Location 
{| class="wikitable"
|-
|Project Name||{{Literal|synfig}}
|-
|Project Location||{{Literal|c:\synfig-build}}
|-
|Project Folder||{{Literal|c:\synfig-build\synfig}}
|-
|Build Host||{{Literal|localhost}}
|-
|Tool Collection||{{Literal|Cygwin_4.x (GNU 4.x Cygwin)}}
|}
</td>
<td>[[File:NB-Win-07.png]]</td>
</tr>
</table>
* Press {{Literal|Finish}}
* Wait a minute ... project loaded !
''Your now able to build from Netbeans.''

File:NB-Win-07.png

2015-08-22T18:50:10Z

BobSynfig: NB-Win-07

NB-Win-07

File:NB-Win-06.png

2015-08-22T18:49:43Z

BobSynfig: NB-Win-06

NB-Win-06

File:NB-Win-05.png

2015-08-22T18:49:18Z

BobSynfig: NB-Win-05

NB-Win-05

File:NB-Win-04.png

2015-08-22T18:48:57Z

BobSynfig: NB-Win-04

NB-Win-04

File:NB-Win-03.png

2015-08-22T18:48:31Z

BobSynfig: NB-Win-03

NB-Win-03

File:NB-Win-02.png

2015-08-22T18:47:35Z

BobSynfig: NB-Win-02

NB-Win-02

File:NB-Win-01.png

2015-08-22T18:46:54Z

BobSynfig: NB-Win-01

NB-Win-01

Dev:IDE Windows

2015-08-22T18:45:24Z

BobSynfig: /* Netbeans from Windows */

= Want to setup an IDE to debug / develop synfig ? (under Windows)=

''Here, we will not discuss of witch IDE is better or if real hacker do all with vi/emacs''

== Install GIT, other tools and clone the code ==
{{Note|Clone the code my dear|This assume you read the section {{l|Dev:Source_code|"Clone the code from git"}} }}

Before to setup any IDE, you will have to prepare the synfig-build environment under Windows.
It requires administrator rights.

Here is the original "Usage notes" from ''synfigstudio-cygwin-mingw-build.sh'' (by Konstantin Dmitriev).
We will follow it step-by-step!
<pre>
# * Download and install Git (http://msysgit.github.io/).
# * Open Git Bash and execute following commands:
# ** mkdir C:\synfig-build
# ** cd C:\synfig-build
# ** git clone https://github.com/synfig/synfig.git
# ** mkdir cygwin-dist
# ** cd synfig
# ** git config --global core.autocrlf input
# ** exit
# * Download Cygwin setup binary (http://www.cygwin.com/) and save it into C:\synfig-build\cygwin-dist\ directory.
# * Run Cygwin setup and install with the default parameters.
# * Download and install NSIS >=3.0 (http://nsis.sourceforge.net/). Install into C:\synfig-build\NSIS\ directory.
# * (64-bit build only!) Download and install 7zip (http://downloads.sourceforge.net/sevenzip/7z920-x64.msi). Install into C:\synfig-build\7zip\ directory.
# * Open Cygwin console (with administrator previlegies) and run the build script:
# ** bash C:/synfig-build/synfig/autobuild/synfigstudio-cygwin-mingw-build.sh
# * Installation bundle will be written to C:\synfig-build\
#
#
# = Other notes =
# * Builds from current repository, current revision. So you should manually checkout the desired revision to build
# * Executing script without arguments makes a full clean build and produces installer package
# * You can pass arguments to the script to invoke particular stage.
# Available stages: mkprep, mketl, mksynfig, mksynfigstudio, mkpackage
# Example:
# synfigstudio-cygwin-mingw-build.sh mkpackage
# * You can pass a custom command to be invoked in the build environment.
# Example (executes make with respect to the build environment):
# synfigstudio-cygwin-mingw-build.sh make -j2
</pre>

{{Note|Warning! Your attention please!|'''Be aware that the lines with ** have to be executed in Git Bash.''' If you don't, you will meet some nasty side-effects during the first build and you may lose your sanity!}}

=== Download and install Git ===
If you already installed Git, you can skip this section.

Visit the original website https://git-for-windows.github.io/ and click on the big download button. If you don't see it, go and see an ophthalmologist :P 
You will be redirected on the GitHub page with the last version, offered as 32 and 64bit.

You will install it with (most of) the default values, like on the screenshots below (featuring my mouse cursor as a Guest Star). 

<table border="1">
<tr>
<td>1. Welcome Screen. Press Next.</td>
<td>[[File:GitWinSetup_01.png]]</td>
</tr>
<tr>
<td>2. GNU GPL License Notice. Press Next.</td>
<td>[[File:GitWinSetup_02.png]]</td>
</tr>
<tr>
<td>3. In this page, you should check everything. Press Next.</td>
<td>[[File:GitWinSetup_03.png]]</td>
</tr>
<tr>
<td>4. Choose "Use Git from Git Bash only". It would permit you to avoid some mess with other tools. Press Next.</td>
<td>[[File:GitWinSetup_04.png]]</td>
</tr>
<tr>
<td>5. Choose "Checkout Windows-style, commit Unix-style line endings". Press Next.</td>
<td>[[File:GitWinSetup_05.png]]</td>
</tr>
<tr>
<td>6. Choose "Use MiniTTY". It has more possibilities. Press Next</td>
<td>[[File:GitWinSetup_06.png]]</td>
</tr>
<tr>
<td>7. Let this one unchecked. It doesn't take so much time anyway. Press Next. </td>
<td>[[File:GitWinSetup_07.png]]</td>
</tr>
<tr>
<td>8. Uncheck this one, no need to read. Press Finish.</td>
<td>[[File:GitWinSetup_08.png]]</td>
</tr>
</table>

=== Clone the Code ===

Start Git Bash as Administrator and type exactly all the following commands at the prompt. 
If you don't, you will notice it soon!

<pre>
mkdir C:\synfig-build
cd C:\synfig-build
git clone https://github.com/synfig/synfig.git
mkdir cygwin-dist
cd synfig
git config --global core.autocrlf input
exit
</pre>

=== Download and install Cygwin ===

Download Cygwin setup binary (http://www.cygwin.com/). 
Save it into ''C:\synfig-build\cygwin-dist\'' directory.

Run Cygwin setup (with administrator rights) and install with the default parameters. 
It should be intalled in ''C:\cygwin''.

=== Download and install NSIS ===

Download and install NSIS '''''>=3.0''''' (http://nsis.sourceforge.net/). 
Don't use ''2.46'', it will fail! 
Install it full into ''C:\synfig-build\NSIS\'' directory.

=== You plan to build 64-bit version? You need 7zip ===
For the 64-bit build only!
Download and install 7zip (''http://downloads.sourceforge.net/sevenzip/7z920-x64.msi''). 
Install into ''C:\synfig-build\7zip\'' directory.

=== First build ! ===
Be aware that it was downloading components and compiling during about one hour for me. 
It depends on you bandwith, the speed of your computer and hard disk type! 
But it should be only for this first build if you follow it carefully :)

Open Cygwin console (with administrator privileges) and run the build script: 
<pre>bash C:/synfig-build/synfig/autobuild/synfigstudio-cygwin-mingw-build.sh</pre>

You can go and take a coffee (or a cocoa, depending on your age ;) ) 
Installation bundle will be written to ''C:\synfig-build\''

== Netbeans from Windows ==

(Tested with Netbeans 8.0.2) 
[https://netbeans.org/ What Netbeans is?] 
Done following the [https://www.youtube.com/watch?v=kR7MKXAYCww video tutorial made by Konstantin Dmitriev (in russian ;))] and adapted for Windows/Cygwin. 
Assuming the source will be installed in C:\synfig-build\synfig\ as expected. 

=== Prepare your Build Tools ===

You have to use a specific Build Tool Collection in your project. 
Go in the menu ''Tools'' / ''Options'' / ''C/C++'' / ''Build Tools'' 
Press ''Add'' (down-left). 
Enter ''C:\cygwin\bin'' as '''Base Directory''', ''GNU 4.x Cygwin'' as '''Tool Collection Family''', and ''Cygwin_4.x'' as '''Tool Collection Name'''. 

[[File:NB-Win-AddNewTool.png]] 

As a result, you should have the resulting information in the form: 

[[File:NB-Win-Build-Tools-Options.png]]

Press Ok. 
Now we are ready to setup the projects!

File:NB-Win-Build-Tools-Options.png

2015-08-22T18:41:32Z

BobSynfig: NB-Win-Build-Tools-Options

NB-Win-Build-Tools-Options

File:NB-Win-AddNewTool.png

2015-08-22T18:37:28Z

BobSynfig: Netbeans - Add New Tool Collection

Netbeans - Add New Tool Collection

Dev:IDE Windows

2015-08-22T17:01:26Z

BobSynfig: Some additions

Dev:IDE Windows

2015-08-21T22:45:01Z

BobSynfig: Creation of the page, install of Git, Clone the code

File:GitWinSetup 08.png

2015-08-21T22:11:56Z

BobSynfig: GitWinSetup_08

GitWinSetup_08

File:GitWinSetup 07.png

2015-08-21T22:11:22Z

BobSynfig: GitWinSetup_07

GitWinSetup_07

File:GitWinSetup 06.png

2015-08-21T22:10:46Z

BobSynfig: GitWinSetup_06

GitWinSetup_06

File:GitWinSetup 05.png

2015-08-21T22:10:16Z

BobSynfig: GitWinSetup_05

GitWinSetup_05

File:GitWinSetup 04.png

2015-08-21T22:09:50Z

BobSynfig: GitWinSetup_04

GitWinSetup_04

File:GitWinSetup 03.png

2015-08-21T22:09:07Z

BobSynfig: GitWinSetup_03

GitWinSetup_03

File:GitWinSetup 02.png

2015-08-21T22:08:30Z

BobSynfig: GitWinSetup_02

GitWinSetup_02