https://www.wiki.synfig.org/api.php?action=feedcontributions&user=Pupazzo&feedformat=atomSynfig Studio :: Documentation - User contributions [en]2024-03-29T15:36:20ZUser contributionsMediaWiki 1.26.3https://www.wiki.synfig.org/index.php?title=Doc:Ball_Bounce&diff=15659Doc:Ball Bounce2012-03-30T20:46:49Z<p>Pupazzo: Add missing link; make text more readable.</p>
<hr />
<div><!-- Page info --><br />
{{Title|Ball Bounce}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Intermediate}}<br />
<!-- Page info end --><br />
<br />
This tutorial explains how to create a bouncing ball animation, focusing on ball movement. Cartoon-like balls also have a very deformed shape while traveling and especially when they hit the ground. This could be covered in a second stage.<br />
<br />
==Different approximations for the same result==<br />
<br />
With Synfig there are four ways to create a bouncing ball:<br />
<br />
# Do the bouncing ball manually. This involves creating several waypoints and adjust them to match a parabolic movement (in time and space).<br />
# Use the interpolation parameters of the waypoints when they are set to TCB interpolation. This drastically reduces the amount of waypoints and also makes the timing of the bounces easier.<br />
# Use the Link to bline feature. If you draw the path of a bouncing ball using a bline it is easy to make the ball follow the path even changing the bouncing speed.<br />
# Create the mathematical equations to do that. Make several parabolic shots at the right place and the right time to simulate a bouncing ball. It would be a little tricky but probably should be the most accurate one.<br />
<br />
== Manual Ball Bounce ==<br />
<br />
The rule to make the ball bounce manually is to draw in a paper the desired bounce. Then mark the horizontal line with regular intervals and match the curve intersection in vertical. See the image:<br />
<br />
{{l|Image:bounce.jpg|256px}}<br />
<br />
You can notice that having regular intervals in the horizontal axis gives irregular intervals to the vertical axis. It is due to the nature of the curve. <br />
<br />
Once the points are located in a 2D grid then it can be drawn directly in Synfig doing use of the grid (F11). After drawing them we normalized the values to be completely symmetrical. That gives the following table:<br />
<br />
{| <br />
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Highest point<br />
|- <br />
| 4f || -165.0 || 92.0 ||<br />
|- <br />
| 8f || -155.0 || 81.118 ||<br />
|- <br />
| 12f || -145.0 || 63.678 ||<br />
|- <br />
| 16f || -135.0 || 29.479 ||<br />
|- <br />
| 20f || -125.0 || -15.522 || Lower point<br />
|- <br />
| 24f || -115.0 || 29.479 ||<br />
|- <br />
| 28f || -105.0 || 63.782 ||<br />
|- <br />
| ... || ... ||<br />
|}<br />
<br />
You can see that the X position is increasing in steps of 10.0 and the Y position reproduces a parabolic curve.<br />
<br />
To proceed with more than one bounce just duplicate the waypoints (place the cursor at the right place right click over the waypoint and duplicate) reproducing symmetrical movements. You should need to edit the X values manually to decrease by 10.0 for each new waypoint. <br />
<br />
This is the resulting graph for the manual approximation to the ball bounce.<br />
<br />
{{l|Image:manual-graph.png|800px}}<br />
<br />
The lower points are not peak points. To do that you need to insert more waypoints in intermediate places around the lower frame (20f). TRy it by your self with the attached file.<br />
<br />
The resulting animation and file are those ones.<br />
<br />
{{l|Image:manual.gif}}<br />
<br />
File: {{l|Media:manual.sifz}}<br />
<br />
== Ball Bounce using waypoints interpolations==<br />
<br />
The TCB interpolation mode allows modify the Tension, Continuity, Bias, and Temporal Tension values of the waypoint. So you can create easily smooth or peak aproximation to the value of the valuenode in the waypoint position. <br />
<br />
This time I would use the same values for the highest and lower points of the table before. But I won't use more than one waypoint for each extreme position. The rest of the curve would be done using the TCB parameters.<br />
<br />
The table of waypoints gives this result:<br />
<br />
{| <br />
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Highest point<br />
|- <br />
| 20f || -125.0 || -15.522 || Lower point<br />
|-<br />
| 40f || -75.0 || 92.0 || Highest point<br />
|- <br />
| 60f || -25.0 || -15.522 || Lower point<br />
|- <br />
| ... || ... <br />
|}<br />
<br />
As you can see the number of points is reduced drastically.<br />
<br />
In you only use a default TCB interpolation it would give you a poor result. Look at the graph:<br />
<br />
{{l|Image:waypoint-curves1.png|800px}}<br />
<br />
But if you edit the TCB parameters this is the result you obtain:<br />
<br />
{{l|Image:waypoint-graph2.png|800px}}<br />
<br />
<br />
The TCB parameters are the following:<br />
<br />
{| <br />
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''||'''Tension'''|| '''Continuity'''|| '''Bias'''|| '''Temporal Tension'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Highest point|| 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| 20f || -125.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0<br />
|-<br />
| 40f || -75.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| 60f || -25.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0<br />
|-<br />
| 80f || 25.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| ... || ... ||... || ... || ... || ... || ... || ...<br />
|}<br />
<br />
<br />
That's the resulting animation:<br />
<br />
{{l|Image:waypoint-2.gif}}<br />
<br />
And the sample file: {{l|Media:waypoint-2.sifz}}<br />
<br />
Notice that the curve at 0f and at 80f are not properly formed. It is due to the fact that the TCB parameters needs to belong to an intermediate waypoint to have effect. If the waypoint is extreme (the end or the beginning of the animation for the parameter it cannot modify the curve. To solve that you should split the X and Y coordinates of the Origin and apply a Ease In/Out interpolation to those Y coordinate and leave the X coordinate with the current interpolation. So please consider only the bounces between the two black vertical lines.<br />
<br />
Notice also that you can make the highest point more flat increasing the Temporal Tension parameter (a good value can be 0.5). This would produce a deformation to the X coordinate so you need to separate both coordinates to do that. Try it by your self editing the attached file. I have left the highest point to have the default values. <br />
<br />
Here is a comparison of both bounces a the same time.<br />
<br />
{{l|Image:waypoint-compare.gif}}<br />
<br />
With this approximation you can easily modify the Y coordinate of the highest points. The interpolation would take care of the rest. With the manual interpolation you should calculate all the x/y coordinates od the resulting curve for a lower bounce. You can record the values into a calculus sheet and just multiply the Y value by a reduction factor. Anyway you have to enter all the value pairs one by one.<br />
<br />
== Ball Bounce following a path ==<br />
<br />
Before reading this section you should be familiar with {{l|Doc:Following_a_BLine}} tutorial. <br />
<br />
The use of a path to perform the bounce has some advantages: <br />
<br />
* You can see the complete ball bounces in one shot.<br />
* You can make the ball rotate along the path (this would allow to make bounces of non round objects).<br />
* You can make bounces to vertical, horizontal or any kind of walls you like. Just draw the path.<br />
<br />
and some disadvantages: <br />
<br />
* It is difficult to control the horizontal movement. It is due to the parameter that moves the object through the path is linked to the number of vertices of the path. If the path has five vertices and it is an open Bline the parameter that defines the path has the following values when define each vertex: 0.0 for the first, 0.25 for the second, 0.5 for the third, 0.75 for the fourth and 1.0 for the fifth (and last) independent of the length of the Bline section between vertices.<br />
<br />
The first thing you have to do is define the path that the bouncing ball is going to describe. I've used the previous manual animation to draw this Bline:<br />
<br />
{{l|Image:bline-path.png}}<br />
<br />
<small> (You can notice that there are some missing tangents. It is due that I've linked the parallel tangents of the peak points of the path. It is more easy to setup because you only have to control two tangents to control all the tangents at the same time.)</small><br />
<br />
Once defined then create a circle or the ball you want to move and place it centered at the origin (0,0). I prefer that you encapsulate it and use the paste canvas origin parameter to make the animation. Once encapsulated select the bline you have created and the paste canvas of the encapsulated ball and select the Origin duck of the paste canvas. Then right click over the bline (avoiding any duck) and select "Link to Bline". You can see my green ball in the figure.<br />
<br />
Once linked you can drag it and it will stick to the bline. <br />
<br />
Now expand the Origin parameter of the paste canvas layer of the encapsulated ball and search for the Amount parameter. This parameter is the one you need to animate to move the ball over the Bline. <br />
<br />
Considering the example, the bline has 6 vertices and 5 bline sections. If you are following the tutorial try to set that parameter to 0.0, 0.2, 0.4, 0.6, 0.8, 1.0 and you will see that the ball moves to each vertex. Now create the following waypoints:<br />
<br />
{| <br />
| '''Time''' || '''Amount''' || '''Comments'''<br />
|- <br />
| 0f || 0.0 || Highest point<br />
|- <br />
| 20f || 0.2 || Lower point<br />
|-<br />
| 40f || 0.4 || Highest point<br />
|- <br />
| 60f || 0.6 || Lower point<br />
|- <br />
| 80f || 0.8 || Highest point<br />
|- <br />
| 100f || 1.0 || Lower point<br />
|}<br />
<br />
This coincides with the main waypoints of the last method we have seen. But look what's the result:<br />
<br />
{{l|Image:bline-track.png|800px}}<br />
<br />
Its X movement graph looks ugly. It is not a straight line that means that the horizontal velocity is not constant. To solve that you have to insert more waypoints in the middle. <br />
<br />
To do that I've uses the animation of the second method to try to match the position at regular intervals. This is the table I've needed.<br />
<br />
<br />
{| <br />
| '''Time''' || '''Amount''' || '''Comments'''<br />
|- <br />
| 0f || 0.0 || Highest point<br />
|- <br />
| 20f || 0.2 || Lower point<br />
|- <br />
| 24f || 0.2626 || <br />
|- <br />
| 28f || 0.3085 || <br />
|- <br />
| 32f || 0.3463 || <br />
|- <br />
| 36f || 0.3741 || <br />
|-<br />
| 40f || 0.4 || Highest point<br />
|- <br />
| 44f || 0.4245 || <br />
|- <br />
| 48f || 0.4554 || <br />
|- <br />
| 52f || 0.4926 || <br />
|- <br />
| 56f || 0.5280 || <br />
|- <br />
| 60f || 0.6 || Lower point<br />
|- <br />
| 64f || 0.6629 || <br />
|- <br />
| 68f || 0.7075 || <br />
|- <br />
| 72f || 0.7445 || <br />
|- <br />
| 76f || 0.7783 || <br />
|- <br />
| 80f || 0.8 || Highest point<br />
|- <br />
| 84f || 0.8253 || <br />
|- <br />
| 88f || 0.8539 || <br />
|- <br />
| 92f || 0.8928 || <br />
|- <br />
| 96f || 0.9375 || <br />
|- <br />
| 100f || 1.0 || Lower point<br />
|}<br />
<br />
Now look to the graphs again and notice that the X travel is now a ''straight'' line.<br />
<br />
{{l|Image:bline-track2.png|800px}}<br />
<br />
This is the resulting animation and the sifz file. <br />
<br />
{{l|Image:bline.gif}}<br />
<br />
The sample file: {{l|Media:bline.sifz}}<br />
<br />
It is supposed that the small yellow ball should follow the red one all the time but you can see that is goes a little faster some times and a little slower other times. It is due to I need to use different times for the adjusting waypoints or add more of them.<br />
<br />
== Mathematical emulation ==<br />
<br />
Anyone want to try? :)<br />
<br />
==Conclusions==</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=Doc:Ball_Bounce&diff=15658Doc:Ball Bounce2012-03-30T20:32:53Z<p>Pupazzo: /* Different approximations for the same result */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Ball Bounce}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Intermediate}}<br />
<!-- Page info end --><br />
<br />
This tutorial explains how to create a bouncing ball animation, focusing on ball movement. Cartoon-like balls also have a very deformed shape while traveling and especially when they hit the ground. This could be covered in a second stage.<br />
<br />
==Different approximations for the same result==<br />
<br />
With Synfig there are four ways to create a bouncing ball:<br />
<br />
# Do the bouncing ball manually. This involves creating several waypoints and adjust them to match a parabolic movement (in time and space).<br />
# Use the interpolation parameters of the waypoints when they are set to TCB interpolation. This drastically reduces the amount of waypoints and also makes the timing of the bounces easier.<br />
# Use the Link to bline feature. If you draw the path of a bouncing ball using a bline it is easy to make the ball follow the path even changing the bouncing speed.<br />
# Create the mathematical equations to do that. Make several parabolic shots at the right place and the right time to simulate a bouncing ball. It would be a little tricky but probably should be the most accurate one.<br />
<br />
== Manual Ball Bounce ==<br />
<br />
The rule to make the ball bounce manually is to draw in a paper the desired bounce. Then mark the horizontal line with regular intervals and match the curve intersection in vertical. See the image:<br />
<br />
{{l|Image:bounce.jpg|256px}}<br />
<br />
You can notice that having regular intervals in the horizontal axis gives irregular intervals to the vertical axis. It is due to the nature of the curve. <br />
<br />
Once the points are located in a 2D grid then it can be drawn directly in Synfig doing use of the grid (F11). After drawing them we normalized the values to be completely symmetrical. That gives the following table:<br />
<br />
{| <br />
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Highest point<br />
|- <br />
| 4f || -165.0 || 92.0 ||<br />
|- <br />
| 8f || -155.0 || 81.118 ||<br />
|- <br />
| 12f || -145.0 || 63.678 ||<br />
|- <br />
| 16f || -135.0 || 29.479 ||<br />
|- <br />
| 20f || -125.0 || -15.522 || Lower point<br />
|- <br />
| 24f || -115.0 || 29.479 ||<br />
|- <br />
| 28f || -105.0 || 63.782 ||<br />
|- <br />
| ... || ... ||<br />
|}<br />
<br />
You can see that the X position is increasing in steps of 10.0 and the Y position reproduces a parabolic curve.<br />
<br />
To proceed with more than one bounce just duplicate the waypoints (place the cursor at the right place right click over the waypoint and duplicate) reproducing symmetrical movements. You should need to edit the X values manually to decrease by 10.0 for each new waypoint. <br />
<br />
This is the resulting graph for the manual approximation to the ball bounce.<br />
<br />
{{l|Image:manual-graph.png|800px}}<br />
<br />
The lower points are not peak points. To do that you need to insert more waypoints in intermediate places around the lower frame (20f). TRy it by your self with the attached file.<br />
<br />
The resulting animation and file are those ones.<br />
<br />
{{l|Image:manual.gif}}<br />
<br />
File: {{l|Media:manual.sifz}}<br />
<br />
== Ball Bounce using waypoints interpolations==<br />
<br />
The TCB interpolation mode allows modify the Tension, Continuity, Bias, and Temporal Tension values of the waypoint. So you can create easily smooth or peak aproximation to the value of the valuenode in the waypoint position. <br />
<br />
This time I would use the same values for the highest and lower points of the table before. But I won't use more than one waypoint for each extreme position. The rest of the curve would be done using the TCB parameters.<br />
<br />
The table of waypoints gives this result:<br />
<br />
{| <br />
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Highest point<br />
|- <br />
| 20f || -125.0 || -15.522 || Lower point<br />
|-<br />
| 40f || -75.0 || 92.0 || Highest point<br />
|- <br />
| 60f || -25.0 || -15.522 || Lower point<br />
|- <br />
| ... || ... <br />
|}<br />
<br />
As you can see the number of points is reduced drastically.<br />
<br />
In you only use a default TCB interpolation it would give you a poor result. Look at the graph:<br />
<br />
{{l|Image:waypoint-curves1.png|800px}}<br />
<br />
But if you edit the TCB parameters this is the result you obtain:<br />
<br />
{{l|Image:waypoint-graph2.png|800px}}<br />
<br />
<br />
The TCB parameters are the following:<br />
<br />
{| <br />
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''||'''Tension'''|| '''Continuity'''|| '''Bias'''|| '''Temporal Tension'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Highest point|| 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| 20f || -125.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0<br />
|-<br />
| 40f || -75.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| 60f || -25.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0<br />
|-<br />
| 80f || 25.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| ... || ... ||... || ... || ... || ... || ... || ...<br />
|}<br />
<br />
<br />
That's the resulting animation:<br />
<br />
{{l|Image:waypoint-2.gif}}<br />
<br />
And the sample file: {{l|Media:waypoint-2.sifz}}<br />
<br />
Notice that the curve at 0f and at 80f are not properly formed. It is due to the fact that the TCB parameters needs to belong to an intermediate waypoint to have effect. If the waypoint is extreme (the end or the beginning of the animation for the parameter it cannot modify the curve. To solve that you should split the X and Y coordinates of the Origin and apply a Ease In/Out interpolation to those Y coordinate and leave the X coordinate with the current interpolation. So please consider only the bounces between the two black vertical lines.<br />
<br />
Notice also that you can make the highest point more flat increasing the Temporal Tension parameter (a good value can be 0.5). This would produce a deformation to the X coordinate so you need to separate both coordinates to do that. Try it by your self editing the attached file. I have left the highest point to have the default values. <br />
<br />
Here is a comparison of both bounces a the same time.<br />
<br />
{{l|Image:waypoint-compare.gif}}<br />
<br />
With this approximation you can easily modify the Y coordinate of the highest points. The interpolation would take care of the rest. With the manual interpolation you should calculate all the x/y coordinates od the resulting curve for a lower bounce. You can record the values into a calculus sheet and just multiply the Y value by a reduction factor. Anyway you have to enter all the value pairs one by one.<br />
<br />
== Ball Bounce following a path ==<br />
<br />
To follow this section you should consider read the Follow a Bline tutorial. It makes use of that feature. <br />
<br />
The use of a path to perform the bounce have some advantages. <br />
<br />
*You can see the complete ball bounces in one shot.<br />
*You can make the ball rotate along the path (this would allow make bounces of non rounded things).<br />
*You can make bounces to vertical,horizontal or any kind of walls you like. Just draw the path.<br />
<br />
It has some disadvantages: <br />
<br />
*It is difficult to control the horizontal movement. It is due to the paramter that moves the object through the path is linked to the number of vertices vertices of the path. If the path have five vertices and it is an open Bline the parameter that defines the path has the following values when define each vertex: 0.0 for the first, 0.25 for the second, 0.5 for the third, 0.75 for the fourth and 1.0 for the fifth (and last) independent of the length of the Bline section between vertices.<br />
<br />
The first thing you have to do is define the path that the bouncing ball is going to describe. I've used the previous manual animation to draw this Bline:<br />
<br />
{{l|Image:bline-path.png}}<br />
<br />
<small> (You can notice that there are some missing tangents. It is due that I've linked the parallel tangents of the peak points of the path. It is more easy to setup because you only have to control two tangents to control all the tangents at the same time.)</small><br />
<br />
Once defined then create a circle or the ball you want to move and place it centred at the origin (0,0). I prefer that you encapsulate it and use the paste canvas origin parameter to make the animation. Once encapsulated select the bline you have created and the paste canvas of the encapsulated ball and select the Origin duck of the paste canvas. Then make right click over the bline (avoiding any duck) and select "Link to Bline". You can see my green ball in the figure.<br />
<br />
Once linked you can drag it and it would be stick to the bline. <br />
<br />
Now expand the Origin parameter of the paste canvas layer of the encapsulated ball and search for the Amount parameter. This parameter is the parameter you need to animate to move the ball over the Bline. <br />
<br />
Considering the example, the bline has 6 vertices and 5 bline sections. If you are following the tutorial try to set that parameter to 0.0, 0.2, 0.4, 0.6, 0.8, 1.0 and you will see that the ball moves to each vertex. Now create the following waypoints:<br />
<br />
{| <br />
| '''Time''' || '''Amount''' || '''Comments'''<br />
|- <br />
| 0f || 0.0 || Highest point<br />
|- <br />
| 20f || 0.2 || Lower point<br />
|-<br />
| 40f || 0.4 || Highest point<br />
|- <br />
| 60f || 0.6 || Lower point<br />
|- <br />
| 80f || 0.8 || Highest point<br />
|- <br />
| 100f || 1.0 || Lower point<br />
|}<br />
<br />
This coincides with the main waypoints of the last method we have seen. But look what's the result:<br />
<br />
{{l|Image:bline-track.png|800px}}<br />
<br />
Its X movement graph looks ugly. It is not a straight line that means that the horizontal velocity is not constant. To solve that you have to insert more waypoints in the middle. <br />
<br />
To do that I've uses the animation of the second method to try to match the position at regular intervals. This is the table I've needed.<br />
<br />
<br />
{| <br />
| '''Time''' || '''Amount''' || '''Comments'''<br />
|- <br />
| 0f || 0.0 || Highest point<br />
|- <br />
| 20f || 0.2 || Lower point<br />
|- <br />
| 24f || 0.2626 || <br />
|- <br />
| 28f || 0.3085 || <br />
|- <br />
| 32f || 0.3463 || <br />
|- <br />
| 36f || 0.3741 || <br />
|-<br />
| 40f || 0.4 || Highest point<br />
|- <br />
| 44f || 0.4245 || <br />
|- <br />
| 48f || 0.4554 || <br />
|- <br />
| 52f || 0.4926 || <br />
|- <br />
| 56f || 0.5280 || <br />
|- <br />
| 60f || 0.6 || Lower point<br />
|- <br />
| 64f || 0.6629 || <br />
|- <br />
| 68f || 0.7075 || <br />
|- <br />
| 72f || 0.7445 || <br />
|- <br />
| 76f || 0.7783 || <br />
|- <br />
| 80f || 0.8 || Highest point<br />
|- <br />
| 84f || 0.8253 || <br />
|- <br />
| 88f || 0.8539 || <br />
|- <br />
| 92f || 0.8928 || <br />
|- <br />
| 96f || 0.9375 || <br />
|- <br />
| 100f || 1.0 || Lower point<br />
|}<br />
<br />
Now look to the graphs again and notice that the X travel is now a ''straight'' line.<br />
<br />
{{l|Image:bline-track2.png|800px}}<br />
<br />
This is the resulting animation and the sifz file. <br />
<br />
{{l|Image:bline.gif}}<br />
<br />
The sample file: {{l|Media:bline.sifz}}<br />
<br />
It is supposed that the small yellow ball should follow the red one all the time but you can see that is goes a little faster some times and a little slower other times. It is due to I need to use different times for the adjusting waypoints or add more of them. <br />
<br />
<br />
== Mathematical emulation ==<br />
<br />
Anyone want to try? :)<br />
<br />
==Conclusions==</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=Doc:Ball_Bounce&diff=15657Doc:Ball Bounce2012-03-30T20:27:28Z<p>Pupazzo: Fix English; make text more readable</p>
<hr />
<div><!-- Page info --><br />
{{Title|Ball Bounce}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Intermediate}}<br />
<!-- Page info end --><br />
<br />
This tutorial explains how to create a bouncing ball animation, focusing on ball movement. Cartoon-like balls also have a very deformed shape while traveling and especially when they hit the ground. This could be covered in a second stage.<br />
<br />
==Different approximations for the same result==<br />
<br />
With Synfig there are four ways to create a bouncing ball:<br />
<br />
# Do the bouncing ball manually. This involves creating several waypoints and adjust them to match a parabolic movement (in time and space).<p><br />
# Use the interpolation parameters of the waypoints when they are set to TCB interpolation. This drastically reduces the amount of waypoints and also makes the timing of the bounces easier.<p><br />
# Use the Link to bline feature. If you draw the path of a bouncing ball using a bline it is easy to make the ball follow the path even changing the bouncing speed. <p><br />
# Create the mathematical equations to do that. Make several parabolic shots at the right place and the right time to simulate a bouncing ball. It would be a little tricky but probably should be the most accurate one.<br />
<br />
== Manual Ball Bounce ==<br />
<br />
The rule to make the ball bounce manually is to draw in a paper the desired bounce. Then mark the horizontal line with regular intervals and match the curve intersection in vertical. See the image:<br />
<br />
{{l|Image:bounce.jpg|256px}}<br />
<br />
You can notice that having regular intervals in the horizontal axis gives irregular intervals to the vertical axis. It is due to the nature of the curve. <br />
<br />
Once the points are located in a 2D grid then it can be drawn directly in Synfig doing use of the grid (F11). After drawing them we normalized the values to be completely symmetrical. That gives the following table:<br />
<br />
{| <br />
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Highest point<br />
|- <br />
| 4f || -165.0 || 92.0 ||<br />
|- <br />
| 8f || -155.0 || 81.118 ||<br />
|- <br />
| 12f || -145.0 || 63.678 ||<br />
|- <br />
| 16f || -135.0 || 29.479 ||<br />
|- <br />
| 20f || -125.0 || -15.522 || Lower point<br />
|- <br />
| 24f || -115.0 || 29.479 ||<br />
|- <br />
| 28f || -105.0 || 63.782 ||<br />
|- <br />
| ... || ... ||<br />
|}<br />
<br />
You can see that the X position is increasing in steps of 10.0 and the Y position reproduces a parabolic curve.<br />
<br />
To proceed with more than one bounce just duplicate the waypoints (place the cursor at the right place right click over the waypoint and duplicate) reproducing symmetrical movements. You should need to edit the X values manually to decrease by 10.0 for each new waypoint. <br />
<br />
This is the resulting graph for the manual approximation to the ball bounce.<br />
<br />
{{l|Image:manual-graph.png|800px}}<br />
<br />
The lower points are not peak points. To do that you need to insert more waypoints in intermediate places around the lower frame (20f). TRy it by your self with the attached file.<br />
<br />
The resulting animation and file are those ones.<br />
<br />
{{l|Image:manual.gif}}<br />
<br />
File: {{l|Media:manual.sifz}}<br />
<br />
== Ball Bounce using waypoints interpolations==<br />
<br />
The TCB interpolation mode allows modify the Tension, Continuity, Bias, and Temporal Tension values of the waypoint. So you can create easily smooth or peak aproximation to the value of the valuenode in the waypoint position. <br />
<br />
This time I would use the same values for the highest and lower points of the table before. But I won't use more than one waypoint for each extreme position. The rest of the curve would be done using the TCB parameters.<br />
<br />
The table of waypoints gives this result:<br />
<br />
{| <br />
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Highest point<br />
|- <br />
| 20f || -125.0 || -15.522 || Lower point<br />
|-<br />
| 40f || -75.0 || 92.0 || Highest point<br />
|- <br />
| 60f || -25.0 || -15.522 || Lower point<br />
|- <br />
| ... || ... <br />
|}<br />
<br />
As you can see the number of points is reduced drastically.<br />
<br />
In you only use a default TCB interpolation it would give you a poor result. Look at the graph:<br />
<br />
{{l|Image:waypoint-curves1.png|800px}}<br />
<br />
But if you edit the TCB parameters this is the result you obtain:<br />
<br />
{{l|Image:waypoint-graph2.png|800px}}<br />
<br />
<br />
The TCB parameters are the following:<br />
<br />
{| <br />
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''||'''Tension'''|| '''Continuity'''|| '''Bias'''|| '''Temporal Tension'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Highest point|| 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| 20f || -125.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0<br />
|-<br />
| 40f || -75.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| 60f || -25.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0<br />
|-<br />
| 80f || 25.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| ... || ... ||... || ... || ... || ... || ... || ...<br />
|}<br />
<br />
<br />
That's the resulting animation:<br />
<br />
{{l|Image:waypoint-2.gif}}<br />
<br />
And the sample file: {{l|Media:waypoint-2.sifz}}<br />
<br />
Notice that the curve at 0f and at 80f are not properly formed. It is due to the fact that the TCB parameters needs to belong to an intermediate waypoint to have effect. If the waypoint is extreme (the end or the beginning of the animation for the parameter it cannot modify the curve. To solve that you should split the X and Y coordinates of the Origin and apply a Ease In/Out interpolation to those Y coordinate and leave the X coordinate with the current interpolation. So please consider only the bounces between the two black vertical lines.<br />
<br />
Notice also that you can make the highest point more flat increasing the Temporal Tension parameter (a good value can be 0.5). This would produce a deformation to the X coordinate so you need to separate both coordinates to do that. Try it by your self editing the attached file. I have left the highest point to have the default values. <br />
<br />
Here is a comparison of both bounces a the same time.<br />
<br />
{{l|Image:waypoint-compare.gif}}<br />
<br />
With this approximation you can easily modify the Y coordinate of the highest points. The interpolation would take care of the rest. With the manual interpolation you should calculate all the x/y coordinates od the resulting curve for a lower bounce. You can record the values into a calculus sheet and just multiply the Y value by a reduction factor. Anyway you have to enter all the value pairs one by one.<br />
<br />
== Ball Bounce following a path ==<br />
<br />
To follow this section you should consider read the Follow a Bline tutorial. It makes use of that feature. <br />
<br />
The use of a path to perform the bounce have some advantages. <br />
<br />
*You can see the complete ball bounces in one shot.<br />
*You can make the ball rotate along the path (this would allow make bounces of non rounded things).<br />
*You can make bounces to vertical,horizontal or any kind of walls you like. Just draw the path.<br />
<br />
It has some disadvantages: <br />
<br />
*It is difficult to control the horizontal movement. It is due to the paramter that moves the object through the path is linked to the number of vertices vertices of the path. If the path have five vertices and it is an open Bline the parameter that defines the path has the following values when define each vertex: 0.0 for the first, 0.25 for the second, 0.5 for the third, 0.75 for the fourth and 1.0 for the fifth (and last) independent of the length of the Bline section between vertices.<br />
<br />
The first thing you have to do is define the path that the bouncing ball is going to describe. I've used the previous manual animation to draw this Bline:<br />
<br />
{{l|Image:bline-path.png}}<br />
<br />
<small> (You can notice that there are some missing tangents. It is due that I've linked the parallel tangents of the peak points of the path. It is more easy to setup because you only have to control two tangents to control all the tangents at the same time.)</small><br />
<br />
Once defined then create a circle or the ball you want to move and place it centred at the origin (0,0). I prefer that you encapsulate it and use the paste canvas origin parameter to make the animation. Once encapsulated select the bline you have created and the paste canvas of the encapsulated ball and select the Origin duck of the paste canvas. Then make right click over the bline (avoiding any duck) and select "Link to Bline". You can see my green ball in the figure.<br />
<br />
Once linked you can drag it and it would be stick to the bline. <br />
<br />
Now expand the Origin parameter of the paste canvas layer of the encapsulated ball and search for the Amount parameter. This parameter is the parameter you need to animate to move the ball over the Bline. <br />
<br />
Considering the example, the bline has 6 vertices and 5 bline sections. If you are following the tutorial try to set that parameter to 0.0, 0.2, 0.4, 0.6, 0.8, 1.0 and you will see that the ball moves to each vertex. Now create the following waypoints:<br />
<br />
{| <br />
| '''Time''' || '''Amount''' || '''Comments'''<br />
|- <br />
| 0f || 0.0 || Highest point<br />
|- <br />
| 20f || 0.2 || Lower point<br />
|-<br />
| 40f || 0.4 || Highest point<br />
|- <br />
| 60f || 0.6 || Lower point<br />
|- <br />
| 80f || 0.8 || Highest point<br />
|- <br />
| 100f || 1.0 || Lower point<br />
|}<br />
<br />
This coincides with the main waypoints of the last method we have seen. But look what's the result:<br />
<br />
{{l|Image:bline-track.png|800px}}<br />
<br />
Its X movement graph looks ugly. It is not a straight line that means that the horizontal velocity is not constant. To solve that you have to insert more waypoints in the middle. <br />
<br />
To do that I've uses the animation of the second method to try to match the position at regular intervals. This is the table I've needed.<br />
<br />
<br />
{| <br />
| '''Time''' || '''Amount''' || '''Comments'''<br />
|- <br />
| 0f || 0.0 || Highest point<br />
|- <br />
| 20f || 0.2 || Lower point<br />
|- <br />
| 24f || 0.2626 || <br />
|- <br />
| 28f || 0.3085 || <br />
|- <br />
| 32f || 0.3463 || <br />
|- <br />
| 36f || 0.3741 || <br />
|-<br />
| 40f || 0.4 || Highest point<br />
|- <br />
| 44f || 0.4245 || <br />
|- <br />
| 48f || 0.4554 || <br />
|- <br />
| 52f || 0.4926 || <br />
|- <br />
| 56f || 0.5280 || <br />
|- <br />
| 60f || 0.6 || Lower point<br />
|- <br />
| 64f || 0.6629 || <br />
|- <br />
| 68f || 0.7075 || <br />
|- <br />
| 72f || 0.7445 || <br />
|- <br />
| 76f || 0.7783 || <br />
|- <br />
| 80f || 0.8 || Highest point<br />
|- <br />
| 84f || 0.8253 || <br />
|- <br />
| 88f || 0.8539 || <br />
|- <br />
| 92f || 0.8928 || <br />
|- <br />
| 96f || 0.9375 || <br />
|- <br />
| 100f || 1.0 || Lower point<br />
|}<br />
<br />
Now look to the graphs again and notice that the X travel is now a ''straight'' line.<br />
<br />
{{l|Image:bline-track2.png|800px}}<br />
<br />
This is the resulting animation and the sifz file. <br />
<br />
{{l|Image:bline.gif}}<br />
<br />
The sample file: {{l|Media:bline.sifz}}<br />
<br />
It is supposed that the small yellow ball should follow the red one all the time but you can see that is goes a little faster some times and a little slower other times. It is due to I need to use different times for the adjusting waypoints or add more of them. <br />
<br />
<br />
== Mathematical emulation ==<br />
<br />
Anyone want to try? :)<br />
<br />
==Conclusions==</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=Doc:Reuse_Animations&diff=15654Doc:Reuse Animations2012-03-30T19:53:37Z<p>Pupazzo: Make text more readable.</p>
<hr />
<div><!-- Page info --><br />
{{Title|Reuse Animations}}<br />
{{Category|Manual}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Advanced}}<br />
<!-- Page info end --><br />
== Introduction ==<br />
<br />
One of the goals of all animators (especially the lazy ones like me) is to have the opportunity to reuse pieces of animation. It allows you to save a lot of time if you can insert some portions of animations already recorded into any other position in time.<br />
<br />
This is especially useful for making characters speak because you have to move your character's mouth to repeated positions depending on the phonemes it describes while speaking.<br />
<br />
This can be done easily just using a combination of {{l|Keyframe|keyframes}} and exported canvases.<br />
<br />
== Keyframes ==<br />
<br />
Our goal is to record some sort of animation and reuse it later. This can be done using keyframes. If you create some keyframes at the beginning of your animation you can reuse these "poses" at a later point in time just by duplicating the keyframes at another time position. To do that just do following:<br />
<br />
# Create a Keyframe at a frame (all of our keyframes should be created close to each other to use a small portion of time. We only want to record a "pose" not a transition)<br />
# Modify your objects in the way you want (for example make an eye close just by moving the points of the eyelid).<br />
# Give a name to the keyframe just by clicking on its corresponding Description cell. <br />
# Repeat the above steps as many times you need to make a new "pose". Let's say you have created a keyframe at frames number 2 (eye open) and 4 (eye closed)<br />
# Once done then go to another frame with the {{l|Time Cursor|time cursor}}, select the keyframe you want to introduce and press the "Duplicate keyframe" button. You'll obtain a copy of the selected keyframe at the current {{l|Time Cursor|time cursor}} position.<br />
<br />
{{l|Image:Reuse_Animations_1.png}}<br />
<br />
There is a problem with this technique. You are making copies of the entire animation poses that you have stored in the first keyframes of the time (frames 2 and 4 of the sample) and therefore you have made copies of all the other objects existing in the scene (following the example, the eyeball).<br />
<br />
If you already have an eyeball animation recorded and you overlap an eyeblink (open and closed) set of keyframes in the middle, then the eyeball animation would be broken by the insertion of the copies of the eyelid movement keyframes.<br />
<br />
== Exporting the Canvas Parameter ==<br />
<br />
Every time you encapsulate a group of layers you obtain a {{l|Paste Canvas}} layer called "Inline Canvas" that prevents the composition of the contained layers over layers outside of it.<br />
<br />
One of the parameters of the encapsulation layer is the {{l|Canvas|Canvas}}. The canvas is like a workspace that represents all the encapsulated layers. <br />
<br />
<br />
{{l|Image:Reuse_Animations_2.png}}<br />
<br />
To avoid the problem described in the previous section (the keyframes affecting all the objects in the scene) you can do following:<br />
<br />
#Before creating the keyframe poses of the eyelids, encapsulate all the layers that form the eyelids.<br />
#Select the encapsulated layer and select the Canvas parameter in the Parameter Dialog. <br />
#Right click the Canvas parameter, export it, and give it a name (in the sample this will be "eyelids"). <br />
<br />
{{l|Image:Reuse_Animations_3.png}}<br />
<br />
Go to the {{l|Canvas Browser Panel}} and select the just exported canvas. <br />
<br />
Double click it and a new workarea window will open with just the layers that were encapsulated on the step 1 - the "eyelids" canvas in the sample. <br />
<br />
{{l|Image:Reuse_Animations_4.png}}<br />
<br />
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.<br />
<br />
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" encapsulated 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 encapsulated 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 encapsulated layers.<br />
<br />
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.<br />
<br />
It would be a great improvement if you could connect the time cursors of the main work area and the exported paste 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.<br />
<br />
== A sample == <br />
<br />
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.<br />
<br />
I have stored the poses "Open" and "Closed" at frames 0 and 2. The animation is defined to start at frame 6.<br />
<br />
[[File:Eyeblink.gif]]<br />
<br />
[[Media:Eyeblink.sifz|Sample file]]<br />
<br />
All comments are welcome.</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=Reuse_Exported_ValueNodes&diff=15653Reuse Exported ValueNodes2012-03-30T19:30:55Z<p>Pupazzo: Make text more fluid.</p>
<hr />
<div><!-- Page info --><br />
{{Title|Reusing Exported Value Nodes}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Advanced}}<br />
<!-- Page info end --><br />
<br />
==Introduction==<br />
<br />
{{l|Export|Exporting}} and {{l|Convert|converting}} a {{l|ValueNode}} are among the most interesting features of synfig. A combination of them allows the user to organize complex animations modifying just a few parameters. See the tutorial {{l|Doc:Following_a_BLine}} for an example.<br />
<br />
Sometimes you would like to do the same combination of exported values and convert types. And it is so tedious to repeat each time. <br />
<br />
There is a way to avoid this and reuse the exported and converted values.<br />
<br />
Imagine that you have a situation where you have a cool conversion combination and want to use it into another already done animation. You can do the following:<br />
<br />
# In the animation file that has the cool conversion do:<br />
## Export all the values that you want to control. For example if parameter 'a' is a=b+c then you should export three parameters: 'a', 'b' and 'c'. The exported parameter 'a' will be an ''Add'' parameter and will be calculated based on the 'b' and 'c' exported parameters.<br />
## Delete all the layers (you don't need them at all, because you only need the cool conversion combination). Save the file with other name ("master.sifz"). This will be the main file.<br />
# Go to File->Import and select the file that have the current done animation where on you want to use the cool exported valuenodes combination.<br />
# Then select the imported paste canvas layer and go to its canvas parameter and export it. Set a meaningful name. Save the "master" file and close it.<br />
#Open the "master" file again and you'll see that the imported animation file (already an exported canvas) has an expand triangle that allows to select the layers that are inside of it. <br />
# Select the parameter of the layer of the imported canvas that you want and link the parameter to any of the "master" canvas exported values that are accessible to the children layers parameters, using the right click mouse button.<br />
<br />
That's all folks! ;-)</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=Doc:Adding_Layers&diff=15467Doc:Adding Layers2012-03-22T22:04:28Z<p>Pupazzo: /* Digging further... */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Adding Layers}}<br />
{{Navigation|Category:Manual|Doc:Creating_Shapes}}<br />
[[Category:Manual]]<br />
[[Category:Tutorials]]<br />
[[Category:Tutorials Basic]]<br />
[[Category:Updated]]<br />
<!-- Page info end --><br />
<br />
== Introduction ==<br />
<br />
In the {{l|Doc:Animation_Basics|previous tutorial}}, you made your first simple animation by changing the attributes of 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.<br />
<br />
However, Synfig's layers are different from layers in other programs in at least two aspects:<br />
# Every object, element, and effect gets its own layer. There are not layes of multiple primitives or multiple effects.<br />
# The up to down layer combination allows you to use upper layers to change the behavior (or look) of underlying layers. Those are called effect layers or filter layers.<br />
<br />
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.<br />
<br />
== Combining layers ==<br />
<br />
So let's look at a simple example of how we can combine two layers to create a gradient effect on a rectangle.<br />
<br />
Create a new file with 0 duration. There's no need to bother with a timeline at this point. Next, create a simple rectangle with the Rectangle Tool. <br />
<br />
[[Image:Adding-layers-tutorial-1.png|frame|center]]<br />
<br />
Pick the {{l|Gradient Tool|Gradient Tool}} from the {{l|Category:Toolbox|Toolbox}}, 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. <br />
<br />
[[Image:Adding-layers-tutorial-2.png|frame|center]]<br />
<br />
{{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 ducks. You need to grab the one you see and move it a bit until a gradient appears.}}<br />
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.<br />
<br />
In the {{l|Layers Panel}}, select both the gradient and the rectangle layer. Then, right-click and select {{Literal|Encapsulate}} from the menu. The view of your Layers Panel should change now, showing a small box called {{l|Paste Canvas|Inline Canvas}} with an arrow in front. By clicking on the arrow you can expand the inline canvas to see its contents, your previous two layers: the gradient and the rectangle.<br />
<br />
[[Image:Adding-layers-tutorial-3.png|frame|center]]<br />
<br />
You can treat this layer like any other layer &mdash; 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.<br />
<br />
== Using locality ==<br />
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|Params Panel}} (by default it resides in the bottom window), and search for the attribute called {{Literal|Blend Method}}. Double-click the entry and select {{Literal|Onto}} from the drop-down menu.<br />
<br />
[[Image:Adding-layers-tutorial-4.png|frame|center]]<br />
<br />
The gradient should now be restricted to the rectangle. Congratulations! You just made your first effect by interacting layers with Synfig.<br />
<br />
[[Image:Adding-layers-tutorial-5.png|frame|center]]<br />
<br />
If only for the additional organization, encapsulating layers into inline canvases 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 can '''only''' modify the data that it gets from '''directly below''' it. In other words, if you were to throw a {{l|Blur Layer}} on top of the layers inside the {{l|Paste Canvas|inline canvas}} we created, it would just blur them &mdash; anything under the inline canvas would not be blurred! Let's try it.<br />
<br />
== Using layers to modify other layers==<br />
Make sure you have the Inline Canvas layer selected and create two red {{l|Circle Tool|circles}}. They will appear on top of the Inline Canvas. Select the Inline Canvas layer and use the {{Literal|Raise Layer}} button in the Layers Panel to place it on top of the circles.<br />
<br />
[[Image:Adding-layers-tutorial-6-raise-layer.png|center|frame]]<br />
<br />
Now our inline canvas layer (with rectangle and gradient) is in front of those two circles.<br />
<br />
[[Image:Adding-layers-tutorial-7.png|center|frame]]<br />
<br />
Expand the inline canvas 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 inline canvas.<br />
<br />
[[Image:Adding-layers-tutorial-8.png|center|frame]]<br />
<br />
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}}).<br />
<br />
[[Image:Adding-layers-tutorial-10-composite-blur.png|center|frame]]<br />
<br />
Well, it blurred... but something is not quite right &mdash; the outside edge of the contents of the inline canvas is still sharp. It is doing this because the blend method of the blur defaulted to {{Literal|Composite}} (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). 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 Params Panel.<br />
<br />
{{Note|Note|In the Synfig version {{Literal|0.62.02}}, the blend method for newly created blur layers is {{Literal|Straight}} if the default blend method in the Toolbox is set to {{Literal|By Layer Default}}.}}<br />
[[Image:Adding-layers-tutorial-11.png|frame|center]]<br />
<br />
Ok, now we have all of the contents of the inline canvas 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 Inline Canvas because the Blur layer is inside it.<br />
<br />
== Digging further... ==<br />
<br />
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.<br />
<br />
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}}.<br />
<br />
Let's continue digging further on {{l|Doc:Creating Shapes|shapes creation}}.</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=Doc:Animation_Basics&diff=15466Doc:Animation Basics2012-03-22T21:55:39Z<p>Pupazzo: add missing links; fluid text</p>
<hr />
<div><!-- Page info --><br />
{{Title|Animation Basics}}<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}<br />
[[Category:Manual]]<br />
[[Category:Tutorials]]<br />
[[Category:Tutorials Basic]]<br />
[[Category:Updated]]<br />
<!-- Page info end --><br />
<br />
== Introduction ==<br />
<br />
Creating an animation in Synfig Studio is really easy. It basically means to change a drawing &mdash; you just need to create the first stage and last stage of a change, and Synfig takes care of the steps in between.<br />
<br />
Let's look at a simple example. Consider a moving light like the one at the front of the Knight Rider car. Drop the realism, you get a circle moving from left to right and back. In other words, you need to create three 'steps' or 'stages':<br />
<br />
# The circle is on the left.<br />
# The circle is on the right.<br />
# The circle is back on the left.<br />
<br />
== Setting up the workspace ==<br />
<br />
Let's do it. Start Synfig Studio. New file is automatically created at the start. Click the 'caret' menu (between the horizontal and vertical rules, in the top left hand corner of the canvas), then select {{c|Edit|Properties}}. The {{l|Canvas_Properties_Dialog}} will appear.<br />
<br />
Give a name and description for your canvas, then click {{Literal|Apply}} (don't click {{Literal|OK}} yet &mdash; we're not quite done with the Properties dialog). Go to the {{Literal|Time}} tab and make sure to edit {{Literal|End Time}}. Change "5s" to "2s" &mdash; that will make our animation 2 seconds long.<br />
<br />
[[Image:File Properties Dialog - End Time.png|center|frame|Canvas Properties Dialog]]<br />
<br />
Now click "OK", select the {{l|Rectangle Tool}} and create a simple black rectangle that will serve as our background. It's not necessary to make it cover the whole canvas. <br />
<br />
[[Image:synfig_tut_2.png|450px|center|thumb]]<br />
<br />
Now we need a circle. Change the fill color to red, select the {{l|Circle Tool}} and create a circle. It doesn't matter if it's not perfect: You can edit it. Select the {{l|Transform Tool}} and click the circle. It will go into an editing mode which is easy to detect by the small green dot in the middle and the white rectangle around it. You can move the circle by grabbing it on its green dot (the ''Origin'') in the middle.<br />
<br />
[[Image:synfig_tut_3.png|450px|center|thumb]]<br />
<br />
These are the first steps to draw an object and to move it, but not an animation yet, you may say. Indeed. Let's have a look how this works.<br />
<br />
== Adding movement ==<br />
<br />
In the beginning, you entered a value of 2 seconds in the Properties dialog. Because the length of your animation is non-zero, your canvas window (the one where you draw) has a grey time slider at the bottom, the {{l|Timebar}}. You can click on it, and a small orange indicator will appear indicating your position in time. Try clicking in several places on the time slider and notice that the entry field on the left of the time slider is changing its values to something like "12f", "1s 15f", etc. You can set your position on the time slider by changing values in that field. For example, if you enter "1s" and press {{Shortcut|enter}}, the orange indicator will move in the middle of the time slider, and entering "2s" will move it to the end of the time slider. <br />
<br />
{{Note|Note|At 2s the orange indicator won't be visible. That's because "2s" is at the far right boundary of the time slider, putting the indicator out of view.}}<br />
<br />
You may notice that nothing changes on the canvas at this point. Switch to {{l|Animate Editing Mode}} by clicking the green man button to the right of the gray time slider. The canvas will display a red outline; it reminds you that changes to your objects now affect your animation at the time shown in the time slider.<br />
<br />
In animate editing mode, every change to your objects creates a {{l|Waypoint|waypoint}} that associates the changes with the current time. As you will see, Synfig can create smooth intermediate changes between waypoints, and you can even choose the way in which the intermediate changes take place. You will probably find it helpful to associate some or all of your waypoints with {{l|Keyframe|keyframes}}. <br />
<br />
[[Image:synfig_tut_4.png|450px|center|thumb]]<br />
<br />
Previously, three "steps" or "stages" were mentioned. These are represented by {{l|Keyframe|keyframes}}. (Just in case you're familiar with video encoding: No, it's not the same!) A keyframe is an image in time where something important happens with your objects.<br />
<br />
Go to the {{l|Keyframes_Panel}} &mdash; click on the little tab with the small key icon in the bottom window &mdash; to edit keyframes. Now press the small button with the "plus" sign and you should get a new entry in the list displaying {{Literal|0f, 0f, (JMP)}}.<br />
<br />
[[Image:Keyframes Panel.png|center|frame]]<br />
<br />
Now, go to the "1s" mark in the time slider. The small orange indicator should move there. Then add another keyframe by clicking the small plus sign. Repeat the process with the time slider indicator set to "2s" (it's at the end of your animation). You should now have three keyframes in the list.<br />
<br />
[[Image:Keyframes Panel 2.png|center|frame]]<br />
<br />
== The s's and f's: Understanding the Timeline ==<br />
By now, you may have figured out what those mysterious "1s 10f"-type marks represent. They indicate a specific point on the timeline, expressing a location in terms of seconds (s) and frames (f).<br />
<br />
By default each second is divided into 24 frames, much like a meter on a measuring tape is divided into 100 centimeters. The frame markings begin at zero (0) and go up to 24, whereupon a new second is entered and the framecount returns to zero.<br />
<br />
For example, when five whole seconds and three frames have passed, using this timeline notation would be "5s 3f".<br />
<br />
== The Keyframes Panel ==<br />
<br />
The {{l|Keyframes Panel}} is rather easy to understand. It displays {{Literal|Time}} which is basically the start time, {{Literal|Length}} which is self-explanatory, {{Literal|Jump}} which we'll cover next, and {{Literal|Description}} which is, again, self-explanatory. <br />
<br />
Now, you might be wondering about the entries called {{Literal|(JMP)}}. In fact, these are links just like web links: click them, and the indicator in your time slider will jump to the correct time.<br />
<br />
You can use this to edit your image for a given moment in time. For instance, you can now jump to the first second, and move the red circle to the right. There! You made your first movement, your first animation with Synfig!<br />
<br />
{{l|Image:synfig_tut_5.png|center|frame}}<br />
<br />
Wondering where the animation is? Just click to an arbitrary position on the time slider: You will note that the red circle is in a new position, one that you didn't specify! So what happened? Synfig figured out what you would like to do, namely move the circle, and drew all the images between these states. Each image will later make a frame in your animation and the circle will appear to be moving.<br />
<br />
Note that you don't need to go to the last keyframe at "2s" and move your circle back to the left. Keyframes make Synfig remember the image states at particular times. That's why when we modified the circle's position at "1s", it stayed on the left at "2s" (as well as at "0s"). If you switch back to the Params Panel, and look at the {{l|Timetrack Panel}} you will see that three orange diamonds (or green dots in previous versions of synfig) appeared on the right of the {{Literal|Origin}} parameter. Those are called {{L|Waypoints}}, and they represent times at which object's parameters, like location or color, are instructed to take on specified new values.<br />
<br />
[[Image:TimetrackOriginWaypoints.png|thumb|center|450px]]<br />
<br />
== Rendering your animation ==<br />
<br />
Before you can see your animation, you need to render your work. There are two ways to do so: using the Synfig Studio (what you have been using so far) or the command-line program called "synfig".<br />
<br />
Let's try the first way. Leave the animate editing mode by clicking on the red dot in the timeline editing widget, and save your file; for instance under the name "BasicKnightRider.sifz". Then go to menu in the Canvas Window ("caret" button in the upper left corner) and select {{c|File|Render}}. Change the filename to "BasicKnightRider.gif" in the same location where you saved "BasicKnightRider.sifz" and choose "gif" target format instead of "Auto", then click Render. Depending on your processor speed it should take a few moments, but finally the image window status bar (located on the bottom of the window) should say "File rendered successfully".<br />
<br />
[[Image:synfig_tut_6.png|618px|thumb|center|Calling "Render" from menu in Synfig Studio]] <br />
<br />
{{Note|Note|The "magick++" target (if it is available) produces much better gif files than the "gif" target because it can optimise the palette for the image.}}<br />
Open BasicKnightRider.gif in Firefox or another application that is able to show animated gif's. However, Firefox will replay the GIF all the time which makes your short animation a rather long one. If you're now seeing a red circle moving from the left to the right and back, congratulations! You just made your first animation!<br />
<br />
{{Note|Note|You can also preview your animation. Press the "caret" menu button in the upper left corner of the Canvas Window and choose {{c|File|Preview}}.}}<br />
If you would rather use the command line instead of the menu to render your animation, then open a terminal (on Windows, go to {{c|Start|Run}}, type {{Literal|cmd}} and press {{Shortcut|enter}}), change to the directory you saved the file in, and type something like this:<br />
<br />
synfig -t gif BasicKnightRider.sifz<br />
<br />
A few messages appear that don't matter right now. Depending on your processor speed it should take a few moments, but finally a line like this will appear:<br />
<br />
BasicKnightRider.sifz ==> BasicKnightRider.gif: DONE<br />
<br />
Then you are done and can view your animated gif using Firefox or another program as mentioned above.<br />
<br />
== Conclusion ==<br />
<br />
Of course, the position of an object is not the only thing you can change with Synfig Studio. Other possibilities include its size, its outline, its color, etc. Synfig comes with several example files that should let you dig deeper into the possibilities.<br />
<br />
Now, let's continue with the next manual chapter: {{l|Doc:Adding Layers|Adding Layers}}</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=Doc:Animation_Basics&diff=15465Doc:Animation Basics2012-03-22T21:41:35Z<p>Pupazzo: Add missing links; make text fluid.</p>
<hr />
<div><!-- Page info --><br />
{{Title|Animation Basics}}<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}<br />
[[Category:Manual]]<br />
[[Category:Tutorials]]<br />
[[Category:Tutorials Basic]]<br />
[[Category:Updated]]<br />
<!-- Page info end --><br />
<br />
== Introduction ==<br />
<br />
Creating an animation in Synfig Studio is really easy. It basically means to change a drawing &mdash; you just need to create the first stage and last stage of a change, and Synfig takes care of the steps in between.<br />
<br />
Let's look at a simple example. Consider a moving light like the one at the front of the Knight Rider car. Drop the realism, you get a circle moving from left to right and back. In other words, you need to create three 'steps' or 'stages':<br />
<br />
# The circle is on the left.<br />
# The circle is on the right.<br />
# The circle is back on the left.<br />
<br />
== Setting up the workspace ==<br />
<br />
Let's do it. Start Synfig Studio. New file is automatically created at the start. Click the 'caret' menu (between the horizontal and vertical rules, in the top left hand corner of the canvas), then select {{c|Edit|Properties}}. The {{l|Canvas_Properties_Dialog}} will appear.<br />
<br />
Give a name and description for your canvas, then click {{Literal|Apply}} (don't click {{Literal|OK}} yet &mdash; we're not quite done with the Properties dialog). Go to the {{Literal|Time}} tab and make sure to edit {{Literal|End Time}}. Change "5s" to "2s" &mdash; that will make our animation 2 seconds long.<br />
<br />
[[Image:File Properties Dialog - End Time.png|center|frame|Canvas Properties Dialog]]<br />
<br />
Now click "OK", select the {{l|Rectangle Tool}} and create a simple black rectangle that will serve as our background. It's not necessary to make it cover the whole canvas. <br />
<br />
[[Image:synfig_tut_2.png|450px|center|thumb]]<br />
<br />
Now we need a circle. Change the fill color to red, select the {{l|Circle Tool}} and create a circle. It doesn't matter if it's not perfect: You can edit it. Select the {{l|Transform Tool}} and click the circle. It will go into an editing mode which is easy to detect by the small green dot in the middle and the white rectangle around it. You can move the circle by grabbing it on its green dot (the ''Origin'') in the middle.<br />
<br />
[[Image:synfig_tut_3.png|450px|center|thumb]]<br />
<br />
These are the first steps to draw an object and to move it, but not an animation yet, you may say. Indeed. Let's have a look how this works.<br />
<br />
== Adding movement ==<br />
<br />
In the beginning, you entered a value of 2 seconds in the Properties dialog. Because the length of your animation is non-zero, your canvas window (the one where you draw) has a grey time slider at the bottom, the {{l|Timebar}}. You can click on it, and a small orange indicator will appear indicating your position in time. Try clicking in several places on the time slider and notice that the entry field on the left of the time slider is changing its values to something like "12f", "1s 15f", etc. You can set your position on the time slider by changing values in that field. For example, if you enter "1s" and press {{Shortcut|enter}}, the orange indicator will move in the middle of the time slider, and entering "2s" will move it to the end of the time slider. <br />
<br />
{{Note|Note|At 2s the orange indicator won't be visible. That's because "2s" is at the far right boundary of the time slider, putting the indicator out of view.}}<br />
<br />
You may notice that nothing changes on the canvas at this point. Switch to {{l|Animate Editing Mode}} by clicking the green man button to the right of the gray time slider. The canvas will display a red outline; it reminds you that changes to your objects now affect your animation at the time shown in the time slider.<br />
<br />
In animate editing mode, every change to your objects creates a {{l|Waypoint|waypoint}} that associates the changes with the current time. As you will see, Synfig can create smooth intermediate changes between waypoints, and you can even choose the way in which the intermediate changes take place. You will probably find it helpful to associate some or all of your waypoints with {{l|Keyframe|keyframes}}. <br />
<br />
[[Image:synfig_tut_4.png|450px|center|thumb]]<br />
<br />
Previously, three "steps" or "stages" were mentioned. These are represented by {{l|Keyframe|keyframes}}. (Just in case you're familiar with video encoding: No, it's not the same!) A keyframe is an image in time where something important happens with your objects.<br />
<br />
Go to the {{l|Keyframes_Panel}} &mdash; click on the little tab with the small key icon in the bottom window &mdash; to edit keyframes. Now press the small button with the "plus" sign and you should get a new entry in the list displaying {{Literal|0f, 0f, (JMP)}}.<br />
<br />
[[Image:Keyframes Panel.png|center|frame]]<br />
<br />
Now, go to the "1s" mark in the time slider. The small orange indicator should move there. Then add another keyframe by clicking the small plus sign. Repeat the process with the time slider indicator set to "2s" (it's at the end of your animation). You should now have three keyframes in the list.<br />
<br />
[[Image:Keyframes Panel 2.png|center|frame]]<br />
<br />
== The s's and f's: Understanding the Timeline ==<br />
By now, you may have figured out what those mysterious "1s 10f"-type marks represent. They indicate a specific point on the timeline, expressing a location in terms of seconds (s) and frames (f).<br />
<br />
By default each second is divided into 24 frames, much like a meter on a measuring tape is divided into 100 centimeters. The frame markings begin at zero (0) and go up to 24, whereupon a new second is entered and the framecount returns to zero.<br />
<br />
For example, when five whole seconds and three frames have passed, using this timeline notation would be "5s 3f".<br />
<br />
== The Keyframe List ==<br />
<br />
The keyframe list is rather easy to understand. It displays {{Literal|Time}} which is basically the start time, {{Literal|Length}} which is self-explanatory, {{Literal|Jump}} which we'll cover next, and {{Literal|Description}} which is, again, self-explanatory. <br />
<br />
Now, you might be wondering about the entries called {{Literal|(JMP)}}. In fact, these are links just like web links: click them, and the indicator in your time slider will jump to the correct time.<br />
<br />
You can use this to edit your image for a given moment in time. For instance, you can now jump to the first second, and move the red circle to the right. There! You made your first movement, your first animation with Synfig!<br />
<br />
{{l|Image:synfig_tut_5.png|center|frame}}<br />
<br />
Wondering where the animation is? Just click to an arbitrary position on the time slider: You will note that the red circle is in a new position, one that you didn't specify! So what happened? Synfig figured out what you would like to do, namely move the circle, and drew all the images between these states. Each image will later make a frame in your animation and the circle will appear to be moving.<br />
<br />
Notice, that you don't need to go to the last keyframe at "2s" and move your circle back to the left. Keyframes make Synfig remember the image states at particular times. That's why when we modified the circle's position at "1s", it stayed on the left at "2s" (as well as at "0s"). If you switch back to the Params Panel, and look at the Timetrack Panel you'll notice that three green dots appeared on the right of the {{Literal|Origin}} parameter (since Synfig Studio 0.63.04 the default waypoint type has been modified to be an orange diamond). Those are called {{L|Waypoints}}, and they represent times at which object's parameters, like location or color, are instructed to take on specified new values.<br />
<br />
[[Image:TimetrackOriginWaypoints.png|thumb|center|450px]]<br />
<br />
== Rendering your animation ==<br />
<br />
Before you can see your animation, you need to render your work. There are two ways to do so: using the Synfig Studio (what you have been using so far) or the command-line program called "synfig".<br />
<br />
Let's try the first way. Leave the animate editing mode by clicking on the red dot in the timeline editing widget, and save your file; for instance under the name "BasicKnightRider.sifz". Then go to menu in the Canvas Window ("caret" button in the upper left corner) and select {{c|File|Render}}. Change the filename to "BasicKnightRider.gif" in the same location where you saved "BasicKnightRider.sifz" and choose "gif" target format instead of "Auto", then click Render. Depending on your processor speed it should take a few moments, but finally the image window status bar (located on the bottom of the window) should say "File rendered successfully".<br />
<br />
[[Image:synfig_tut_6.png|618px|thumb|center|Calling "Render" from menu in Synfig Studio]] <br />
<br />
{{Note|Note|The "magick++" target (if it is available) produces much better gif files than the "gif" target because it can optimise the palette for the image.}}<br />
Open BasicKnightRider.gif in Firefox or another application that is able to show animated gif's. However, Firefox will replay the GIF all the time which makes your short animation a rather long one. If you're now seeing a red circle moving from the left to the right and back, congratulations! You just made your first animation!<br />
<br />
{{Note|Note|You can also preview your animation. Press the "caret" menu button in the upper left corner of the Canvas Window and choose {{c|File|Preview}}.}}<br />
If you would rather use the command line instead of the menu to render your animation, then open a terminal (on Windows, go to {{c|Start|Run}}, type {{Literal|cmd}} and press {{Shortcut|enter}}), change to the directory you saved the file in, and type something like this:<br />
<br />
synfig -t gif BasicKnightRider.sifz<br />
<br />
A few messages appear that don't matter right now. Depending on your processor speed it should take a few moments, but finally a line like this will appear:<br />
<br />
BasicKnightRider.sifz ==> BasicKnightRider.gif: DONE<br />
<br />
Then you are done and can view your animated gif using Firefox or another program as mentioned above.<br />
<br />
== Conclusion ==<br />
<br />
Of course, the position of an object is not the only thing you can change with Synfig Studio. Other possibilities include its size, its outline, its color, etc. Synfig comes with several example files that should let you dig deeper into the possibilities.<br />
<br />
Now, let's continue with the next manual chapter: {{l|Doc:Adding Layers|Adding Layers}}</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=Doc:Animation_Basics&diff=15464Doc:Animation Basics2012-03-22T21:24:26Z<p>Pupazzo: Add missing link</p>
<hr />
<div><!-- Page info --><br />
{{Title|Animation Basics}}<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}<br />
[[Category:Manual]]<br />
[[Category:Tutorials]]<br />
[[Category:Tutorials Basic]]<br />
[[Category:Updated]]<br />
<!-- Page info end --><br />
<br />
== Introduction ==<br />
<br />
Creating an animation in Synfig Studio is really easy. It basically means to change a drawing &mdash; you just need to create the first stage and last stage of a change, and Synfig takes care of the steps in between.<br />
<br />
Let's look at a simple example. Consider a moving light like the one at the front of the Knight Rider car. Drop the realism, you get a circle moving from left to right and back. In other words, you need to create three 'steps' or 'stages':<br />
<br />
# The circle is on the left.<br />
# The circle is on the right.<br />
# The circle is back on the left.<br />
<br />
== Setting up the workspace ==<br />
<br />
Let's do it. Start Synfig Studio. New file is automatically created at the start. Click the 'caret' menu (between the horizontal and vertical rules, in the top left hand corner of the canvas), then select {{c|Edit|Properties}}. The {{l|Canvas_Properties_Dialog}} will appear.<br />
<br />
Give a name and description for your canvas, then click {{Literal|Apply}} (don't click {{Literal|OK}} yet &mdash; we're not quite done with the Properties dialog). Go to the {{Literal|Time}} tab and make sure to edit {{Literal|End Time}}. Change "5s" to "2s" &mdash; that will make our animation 2 seconds long.<br />
<br />
[[Image:File Properties Dialog - End Time.png|center|frame|Canvas Properties Dialog]]<br />
<br />
Now click "OK", select the {{l|Rectangle Tool}} and create a simple black rectangle that will serve as our background. It's not necessary to make it cover the whole canvas. <br />
<br />
[[Image:synfig_tut_2.png|450px|center|thumb]]<br />
<br />
Now we need a circle. Change the fill color to red, select the {{l|Circle Tool}} and create a circle. It doesn't matter if it's not perfect: You can edit it. Select the {{l|Transform Tool}} and click the circle. It will go into an editing mode which is easy to detect by the small green dot in the middle and the white rectangle around it. You can move the circle by grabbing it on its green dot (the ''Origin'') in the middle.<br />
<br />
[[Image:synfig_tut_3.png|450px|center|thumb]]<br />
<br />
These are the first steps to draw an object and to move it, but not an animation yet, you may say. Indeed. Let's have a look how this works.<br />
<br />
== Adding movement ==<br />
<br />
In the beginning, you entered a value of 2 seconds in the Properties dialog. Because the length of your animation is non-zero, your canvas window (the one where you draw) got a grey time slider at the bottom. You can click on it, and a small orange indicator will appear indicating your position in time. Try clicking in several places on the time slider and notice that the entry field on the left of the time slider is changing its values to something like "12f", "1s 15f", etc. You can set your position on the time slider by changing values in that field. For example, if you enter "1s" and press {{Shortcut|enter}}, the orange indicator will move in the middle of the time slider, and entering "2s" will move it to the end of the time slider. <br />
<br />
{{Note|Note|At 2s the orange indicator won't be visible. That's because "2s" is at the far right boundary of the time slider, putting the indicator out of view.}}<br />
You may notice nothing changes on the canvas at this point. Switch to {{Literal|Animate Editing Mode}} by clicking the green dot to the right of the gray time slider (if you have version 0.62.02, you may see a green checkmark). The canvas will display a red outline; it reminds you that changes to your objects now affect your animation at the time shown in the time slider. In animation editing mode, every change to your objects creates what's called a {{l|Waypoint|waypoint}}; the waypoint associates the changes with the time. As you'll see, Synfig can create smooth intermediate changes between waypoints, and you can even change the way in which the intermediate changes take place. You'll probably find it helpful to associate some or all of your waypoints with keyframes. <br />
<br />
[[Image:synfig_tut_4.png|450px|center|thumb]]<br />
<br />
Previously, three "steps" or "stages" were mentioned. These are represented by so-called "{{l|Keyframe|keyframes}}". (Just in case you're familiar with video encoding: No, it's not the same!) A keyframe is an image in time where something important happens with your objects.<br />
<br />
Go to the Keyframes panel &mdash; click on the little tab with the small key icon in the bottom window &mdash; to edit keyframes. Now press the small button with the "plus" sign and you should get a new entry in the list displaying {{Literal|0f, 0f, (JMP)}}.<br />
<br />
[[Image:Keyframes Panel.png|center|frame]]<br />
<br />
Now, go to the "1s" mark in the time slider. The small orange indicator should move there. Then add another keyframe by clicking the small plus sign. Repeat the process with the time slider indicator set to "2s" (it's at the end of your animation). You should now have three keyframes in the list.<br />
<br />
[[Image:Keyframes Panel 2.png|center|frame]]<br />
<br />
== The s's and f's: Understanding the Timeline ==<br />
By now, you may have figured out what those mysterious "1s 10f"-type marks represent. They indicate a specific point on the timeline, expressing a location in terms of seconds (s) and frames (f).<br />
<br />
By default each second is divided into 24 frames, much like a meter on a measuring tape is divided into 100 centimeters. The frame markings begin at zero (0) and go up to 24, whereupon a new second is entered and the framecount returns to zero.<br />
<br />
For example, when five whole seconds and three frames have passed, using this timeline notation would be "5s 3f".<br />
<br />
== The Keyframe List ==<br />
<br />
The keyframe list is rather easy to understand. It displays {{Literal|Time}} which is basically the start time, {{Literal|Length}} which is self-explanatory, {{Literal|Jump}} which we'll cover next, and {{Literal|Description}} which is, again, self-explanatory. <br />
<br />
Now, you might be wondering about the entries called {{Literal|(JMP)}}. In fact, these are links just like web links: click them, and the indicator in your time slider will jump to the correct time.<br />
<br />
You can use this to edit your image for a given moment in time. For instance, you can now jump to the first second, and move the red circle to the right. There! You made your first movement, your first animation with Synfig!<br />
<br />
{{l|Image:synfig_tut_5.png|center|frame}}<br />
<br />
Wondering where the animation is? Just click to an arbitrary position on the time slider: You will note that the red circle is in a new position, one that you didn't specify! So what happened? Synfig figured out what you would like to do, namely move the circle, and drew all the images between these states. Each image will later make a frame in your animation and the circle will appear to be moving.<br />
<br />
Notice, that you don't need to go to the last keyframe at "2s" and move your circle back to the left. Keyframes make Synfig remember the image states at particular times. That's why when we modified the circle's position at "1s", it stayed on the left at "2s" (as well as at "0s"). If you switch back to the Params Panel, and look at the Timetrack Panel you'll notice that three green dots appeared on the right of the {{Literal|Origin}} parameter (since Synfig Studio 0.63.04 the default waypoint type has been modified to be an orange diamond). Those are called {{L|Waypoints}}, and they represent times at which object's parameters, like location or color, are instructed to take on specified new values.<br />
<br />
[[Image:TimetrackOriginWaypoints.png|thumb|center|450px]]<br />
<br />
== Rendering your animation ==<br />
<br />
Before you can see your animation, you need to render your work. There are two ways to do so: using the Synfig Studio (what you have been using so far) or the command-line program called "synfig".<br />
<br />
Let's try the first way. Leave the animate editing mode by clicking on the red dot in the timeline editing widget, and save your file; for instance under the name "BasicKnightRider.sifz". Then go to menu in the Canvas Window ("caret" button in the upper left corner) and select {{c|File|Render}}. Change the filename to "BasicKnightRider.gif" in the same location where you saved "BasicKnightRider.sifz" and choose "gif" target format instead of "Auto", then click Render. Depending on your processor speed it should take a few moments, but finally the image window status bar (located on the bottom of the window) should say "File rendered successfully".<br />
<br />
[[Image:synfig_tut_6.png|618px|thumb|center|Calling "Render" from menu in Synfig Studio]] <br />
<br />
{{Note|Note|The "magick++" target (if it is available) produces much better gif files than the "gif" target because it can optimise the palette for the image.}}<br />
Open BasicKnightRider.gif in Firefox or another application that is able to show animated gif's. However, Firefox will replay the GIF all the time which makes your short animation a rather long one. If you're now seeing a red circle moving from the left to the right and back, congratulations! You just made your first animation!<br />
<br />
{{Note|Note|You can also preview your animation. Press the "caret" menu button in the upper left corner of the Canvas Window and choose {{c|File|Preview}}.}}<br />
If you would rather use the command line instead of the menu to render your animation, then open a terminal (on Windows, go to {{c|Start|Run}}, type {{Literal|cmd}} and press {{Shortcut|enter}}), change to the directory you saved the file in, and type something like this:<br />
<br />
synfig -t gif BasicKnightRider.sifz<br />
<br />
A few messages appear that don't matter right now. Depending on your processor speed it should take a few moments, but finally a line like this will appear:<br />
<br />
BasicKnightRider.sifz ==> BasicKnightRider.gif: DONE<br />
<br />
Then you are done and can view your animated gif using Firefox or another program as mentioned above.<br />
<br />
== Conclusion ==<br />
<br />
Of course, the position of an object is not the only thing you can change with Synfig Studio. Other possibilities include its size, its outline, its color, etc. Synfig comes with several example files that should let you dig deeper into the possibilities.<br />
<br />
Now, let's continue with the next manual chapter: {{l|Doc:Adding Layers|Adding Layers}}</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=Doc:Animation_Basics&diff=15463Doc:Animation Basics2012-03-22T21:22:52Z<p>Pupazzo: Add missing links</p>
<hr />
<div><!-- Page info --><br />
{{Title|Animation Basics}}<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}<br />
[[Category:Manual]]<br />
[[Category:Tutorials]]<br />
[[Category:Tutorials Basic]]<br />
[[Category:Updated]]<br />
<!-- Page info end --><br />
<br />
== Introduction ==<br />
<br />
Creating an animation in Synfig Studio is really easy. It basically means to change a drawing &mdash; you just need to create the first stage and last stage of a change, and Synfig takes care of the steps in between.<br />
<br />
Let's look at a simple example. Consider a moving light like the one at the front of the Knight Rider car. Drop the realism, you get a circle moving from left to right and back. In other words, you need to create three 'steps' or 'stages':<br />
<br />
# The circle is on the left.<br />
# The circle is on the right.<br />
# The circle is back on the left.<br />
<br />
== Setting up the workspace ==<br />
<br />
Let's do it. Start Synfig Studio. New file is automatically created at the start. Click the 'caret' menu (between the horizontal and vertical rules, in the top left hand corner of the canvas), then select {{c|Edit|Properties}}. The {{l|Canvas_Properties_Dialog}} will appear.<br />
<br />
Give a name and description for your canvas, then click {{Literal|Apply}} (don't click {{Literal|OK}} yet &mdash; we're not quite done with the Properties dialog). Go to the {{Literal|Time}} tab and make sure to edit {{Literal|End Time}}. Change "5s" to "2s" &mdash; that will make our animation 2 seconds long.<br />
<br />
[[Image:File Properties Dialog - End Time.png|center|frame|Canvas Properties Dialog]]<br />
<br />
Now click "OK", and create a simple black rectangle that will serve as our background. It's not necessary to make it cover the whole canvas. <br />
<br />
[[Image:synfig_tut_2.png|450px|center|thumb]]<br />
<br />
Now we need a circle. Change the fill color to red, select the {{l|Circle Tool}} and create a circle. It doesn't matter if it's not perfect: You can edit it. Select the {{l|Transform Tool}} and click the circle. It will go into an editing mode which is easy to detect by the small green dot in the middle and the white rectangle around it. You can move the circle by grabbing it on its green dot (the ''Origin'') in the middle.<br />
<br />
[[Image:synfig_tut_3.png|450px|center|thumb]]<br />
<br />
These are the first steps to draw an object and to move it, but not an animation yet, you may say. Indeed. Let's have a look how this works.<br />
<br />
== Adding movement ==<br />
<br />
In the beginning, you entered a value of 2 seconds in the Properties dialog. Because the length of your animation is non-zero, your canvas window (the one where you draw) got a grey time slider at the bottom. You can click on it, and a small orange indicator will appear indicating your position in time. Try clicking in several places on the time slider and notice that the entry field on the left of the time slider is changing its values to something like "12f", "1s 15f", etc. You can set your position on the time slider by changing values in that field. For example, if you enter "1s" and press {{Shortcut|enter}}, the orange indicator will move in the middle of the time slider, and entering "2s" will move it to the end of the time slider. <br />
<br />
{{Note|Note|At 2s the orange indicator won't be visible. That's because "2s" is at the far right boundary of the time slider, putting the indicator out of view.}}<br />
You may notice nothing changes on the canvas at this point. Switch to {{Literal|Animate Editing Mode}} by clicking the green dot to the right of the gray time slider (if you have version 0.62.02, you may see a green checkmark). The canvas will display a red outline; it reminds you that changes to your objects now affect your animation at the time shown in the time slider. In animation editing mode, every change to your objects creates what's called a {{l|Waypoint|waypoint}}; the waypoint associates the changes with the time. As you'll see, Synfig can create smooth intermediate changes between waypoints, and you can even change the way in which the intermediate changes take place. You'll probably find it helpful to associate some or all of your waypoints with keyframes. <br />
<br />
[[Image:synfig_tut_4.png|450px|center|thumb]]<br />
<br />
Previously, three "steps" or "stages" were mentioned. These are represented by so-called "{{l|Keyframe|keyframes}}". (Just in case you're familiar with video encoding: No, it's not the same!) A keyframe is an image in time where something important happens with your objects.<br />
<br />
Go to the Keyframes panel &mdash; click on the little tab with the small key icon in the bottom window &mdash; to edit keyframes. Now press the small button with the "plus" sign and you should get a new entry in the list displaying {{Literal|0f, 0f, (JMP)}}.<br />
<br />
[[Image:Keyframes Panel.png|center|frame]]<br />
<br />
Now, go to the "1s" mark in the time slider. The small orange indicator should move there. Then add another keyframe by clicking the small plus sign. Repeat the process with the time slider indicator set to "2s" (it's at the end of your animation). You should now have three keyframes in the list.<br />
<br />
[[Image:Keyframes Panel 2.png|center|frame]]<br />
<br />
== The s's and f's: Understanding the Timeline ==<br />
By now, you may have figured out what those mysterious "1s 10f"-type marks represent. They indicate a specific point on the timeline, expressing a location in terms of seconds (s) and frames (f).<br />
<br />
By default each second is divided into 24 frames, much like a meter on a measuring tape is divided into 100 centimeters. The frame markings begin at zero (0) and go up to 24, whereupon a new second is entered and the framecount returns to zero.<br />
<br />
For example, when five whole seconds and three frames have passed, using this timeline notation would be "5s 3f".<br />
<br />
== The Keyframe List ==<br />
<br />
The keyframe list is rather easy to understand. It displays {{Literal|Time}} which is basically the start time, {{Literal|Length}} which is self-explanatory, {{Literal|Jump}} which we'll cover next, and {{Literal|Description}} which is, again, self-explanatory. <br />
<br />
Now, you might be wondering about the entries called {{Literal|(JMP)}}. In fact, these are links just like web links: click them, and the indicator in your time slider will jump to the correct time.<br />
<br />
You can use this to edit your image for a given moment in time. For instance, you can now jump to the first second, and move the red circle to the right. There! You made your first movement, your first animation with Synfig!<br />
<br />
{{l|Image:synfig_tut_5.png|center|frame}}<br />
<br />
Wondering where the animation is? Just click to an arbitrary position on the time slider: You will note that the red circle is in a new position, one that you didn't specify! So what happened? Synfig figured out what you would like to do, namely move the circle, and drew all the images between these states. Each image will later make a frame in your animation and the circle will appear to be moving.<br />
<br />
Notice, that you don't need to go to the last keyframe at "2s" and move your circle back to the left. Keyframes make Synfig remember the image states at particular times. That's why when we modified the circle's position at "1s", it stayed on the left at "2s" (as well as at "0s"). If you switch back to the Params Panel, and look at the Timetrack Panel you'll notice that three green dots appeared on the right of the {{Literal|Origin}} parameter (since Synfig Studio 0.63.04 the default waypoint type has been modified to be an orange diamond). Those are called {{L|Waypoints}}, and they represent times at which object's parameters, like location or color, are instructed to take on specified new values.<br />
<br />
[[Image:TimetrackOriginWaypoints.png|thumb|center|450px]]<br />
<br />
== Rendering your animation ==<br />
<br />
Before you can see your animation, you need to render your work. There are two ways to do so: using the Synfig Studio (what you have been using so far) or the command-line program called "synfig".<br />
<br />
Let's try the first way. Leave the animate editing mode by clicking on the red dot in the timeline editing widget, and save your file; for instance under the name "BasicKnightRider.sifz". Then go to menu in the Canvas Window ("caret" button in the upper left corner) and select {{c|File|Render}}. Change the filename to "BasicKnightRider.gif" in the same location where you saved "BasicKnightRider.sifz" and choose "gif" target format instead of "Auto", then click Render. Depending on your processor speed it should take a few moments, but finally the image window status bar (located on the bottom of the window) should say "File rendered successfully".<br />
<br />
[[Image:synfig_tut_6.png|618px|thumb|center|Calling "Render" from menu in Synfig Studio]] <br />
<br />
{{Note|Note|The "magick++" target (if it is available) produces much better gif files than the "gif" target because it can optimise the palette for the image.}}<br />
Open BasicKnightRider.gif in Firefox or another application that is able to show animated gif's. However, Firefox will replay the GIF all the time which makes your short animation a rather long one. If you're now seeing a red circle moving from the left to the right and back, congratulations! You just made your first animation!<br />
<br />
{{Note|Note|You can also preview your animation. Press the "caret" menu button in the upper left corner of the Canvas Window and choose {{c|File|Preview}}.}}<br />
If you would rather use the command line instead of the menu to render your animation, then open a terminal (on Windows, go to {{c|Start|Run}}, type {{Literal|cmd}} and press {{Shortcut|enter}}), change to the directory you saved the file in, and type something like this:<br />
<br />
synfig -t gif BasicKnightRider.sifz<br />
<br />
A few messages appear that don't matter right now. Depending on your processor speed it should take a few moments, but finally a line like this will appear:<br />
<br />
BasicKnightRider.sifz ==> BasicKnightRider.gif: DONE<br />
<br />
Then you are done and can view your animated gif using Firefox or another program as mentioned above.<br />
<br />
== Conclusion ==<br />
<br />
Of course, the position of an object is not the only thing you can change with Synfig Studio. Other possibilities include its size, its outline, its color, etc. Synfig comes with several example files that should let you dig deeper into the possibilities.<br />
<br />
Now, let's continue with the next manual chapter: {{l|Doc:Adding Layers|Adding Layers}}</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=Draw_Tool&diff=15447Draw Tool2012-03-21T17:33:48Z<p>Pupazzo: /* Options */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Draw Tool}}<br />
{{Category|Tools}}<br />
<!-- Page info end --><br />
<br />
{{l|Image:Draw_icon.png|64px}} <span style="font-size:150%">'''ALT-D'''</span><br />
<br />
The draw tool is the one that most artists will be familiar with. This tool is best used with a drawing tablet, although it can be used with a mouse.<br />
<br />
The draw tool can generate a region, an {{l|Outline Layer}} and an {{l|Advanced Outline Layer}} with pressure output from the tablet mapped to the line's width.<br />
<br />
==Options==<br />
<br />
;'''Create Outline'''<br />
;'''Create Advanced Outline'''<br />
;'''Create Region'''<br />
;'''Auto Loop'''<br />
:When the stroke of the draw tool ends near the beginning of the stroke, automatically connect the last duck to the first.<br />
;'''Auto Extend'''<br />
:When the stroke begins and/or end at or near an endpoint duck of another {{l|Outline Layer|outline}}, the resulting {{l|Outline Layer|outline}} is simply appended to the existing {{l|Outline Layer}}<br />
:Whether or not to scale the width based on the pressure input. If this is unchecked, the layer will be drawn at the width indicated in the {{l|New Layer Defaults}} section of the {{l|Toolbox}}<br />
;'''Auto Link'''<br />
:When the stroke begins and/or ends at or near a vertex duck in another {{l|Outline Layer|outline}}, and the outline isn't being extended by the Auto Extend option above, the first and/or last vertex of the resulting {{l|Outline Layer|outline}} is {{l|Linking|linked}} to the duck on the existing {{l|Outline Layer}}.<br />
;'''Auto Export'''<br />
;'''Pressure Width'''<br />
;'''LocalError'''<br />
:''This affects whether the Smooth option is in world coordinates or not. But I'm not sure what it measures when this is turned on.''<br />
;'''Min Pressure'''<br />
:The value of this option clamps the lower end of the Pressure sensitivity to a specific value, essentially determining how thin the thinnest possible segment is relative to the {{l|New Layer Defaults#Brush Size|Brush Size}} parameter in the {{l|Toolbox}}.<br />
;'''BLine Smoothness'''<br />
:Determines how much tablet jitter is removed, and as a result, how many vertices the resulting splines are composed of.<br />
;'''Max Width Error'''<br />
;'''Feather'''<br />
:''(revise me) Seems to have something to do with setting the {{l|Feather Parameter}} on the layer, but there doesn't seem to be a clear translation between the setting of this control, and the resulting parameters.''<br />
<br />
==Buttons==<br />
<br />
;'''Fill Tool'''</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=Draw_Tool&diff=15446Draw Tool2012-03-21T17:31:18Z<p>Pupazzo: Add/update missing options</p>
<hr />
<div><!-- Page info --><br />
{{Title|Draw Tool}}<br />
{{Category|Tools}}<br />
<!-- Page info end --><br />
<br />
{{l|Image:Draw_icon.png|64px}} <span style="font-size:150%">'''ALT-D'''</span><br />
<br />
The draw tool is the one that most artists will be familiar with. This tool is best used with a drawing tablet, although it can be used with a mouse.<br />
<br />
The draw tool can generate a region, an {{l|Outline Layer}} and an {{l|Advanced Outline Layer}} with pressure output from the tablet mapped to the line's width.<br />
<br />
==Options==<br />
<br />
;'''Create Outline'''<br />
;'''Create Advanced Outline'''<br />
;'''Create Region'''<br />
;'''Auto Loop'''<br />
:When the stroke of the draw tool ends near the beginning of the stroke, automatically connect the last duck to the first.<br />
;'''Auto Extend'''<br />
:When the stroke begins and/or end at or near an endpoint duck of another {{l|Outline Layer|outline}}, the resulting {{l|Outline Layer|outline}} is simply appended to the existing {{l|Outline Layer}};'''Pressure Width'''<br />
:Whether or not to scale the width based on the pressure input. If this is unchecked, the layer will be drawn at the width indicated in the {{l|New Layer Defaults}} section of the {{l|Toolbox}}<br />
;'''Auto Link'''<br />
:When the stroke begins and/or ends at or near a vertex duck in another {{l|Outline Layer|outline}}, and the outline isn't being extended by the Auto Extend option above, the first and/or last vertex of the resulting {{l|Outline Layer|outline}} is {{l|Linking|linked}} to the duck on the existing {{l|Outline Layer}}.<br />
;'''Auto Export'''<br />
;'''Pressure Width'''<br />
;'''LocalError'''<br />
:''This affects whether the Smooth option is in world coordinates or not. But I'm not sure what it measures when this is turned on.''<br />
;'''Min Pressure'''<br />
:The value of this option clamps the lower end of the Pressure sensitivity to a specific value, essentially determining how thin the thinnest possible segment is relative to the {{l|New Layer Defaults#Brush Size|Brush Size}} parameter in the {{l|Toolbox}}.<br />
;'''BLine Smoothness'''<br />
:Determines how much tablet jitter is removed, and as a result, how many vertices the resulting splines are composed of.<br />
;'''Max Width Error'''<br />
;'''Feather'''<br />
:''(revise me) Seems to have something to do with setting the {{l|Feather Parameter}} on the layer, but there doesn't seem to be a clear translation between the setting of this control, and the resulting parameters.''<br />
<br />
==Buttons==<br />
<br />
;'''Fill Tool'''</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=Advanced_Outline_Layer&diff=15445Advanced Outline Layer2012-03-21T16:46:26Z<p>Pupazzo: fluidify text</p>
<hr />
<div><!-- Page info --><br />
{{Title|Advanced Outline Layer}}<br />
{{Category|Layers}}<br />
<!-- Page info end --><br />
Under construction! TODO: add hyperlinks for known words. Add some visual examples. Add dashed outline.<br />
[[Image:Layer_geometry_advanced_outline_icon.png|64px]]<br />
<br />
== About Advanced Outline Layers ==<br />
<br />
=== Differences with Outline Layer: Outline width ===<br />
<br />
The ''width'' ducks define the outline width at particular place.<br />
<br />
In the regular [[Outline Layer]], each width duck is connected to the vertex that defines the outline shape at that place. That means that the user needs to insert a new vertex on the [[BLine]] every time he wants to change the outline width in some place. This behaviour can cause problems when the shape of the outline is very simple but the width varies a lot.<br />
<br />
Practice shows that most of the time the user wants to specify the width independently from the placement of [[BLine]] vertices. Such functionality is available in the Advanced Outline layer, which handles its width in a different way: the width ducks are freely moved around the bline and define its width at any point.<br />
<br />
== New features ==<br />
<br />
Advanced Outline introduces some new features to the regular outline, as shown in this [http://www.youtube.com/watch?v=boM_ZC9VZ54 Advanced outline demo] video. They are listed with examples below:<br />
<br />
<gallery widths="490px" heights="300px" perrow="2"><br />
File:Variable-width-without-blinepoints.png | No need to place vertex to change the width<br />
File:Lots-of-blinepoints-width-just-two width-controls.png | Width controlled just by two points, while the bline constructed of many vertices<br />
File:Different-types of tips.png | Different types of tips<br />
File: Segments of outlines.png | Segmented outline<br />
File:Different cusps types.png | Three global cusps types<br />
File:Smoothness control.png | Control of smoothness from linear (0.0) to smooth (1.0)<br />
</gallery><br />
<br />
<br />
==Parameters of Advanced Outline Layers==<br />
<br />
The parameters of the Advanced Outline Layers are:<br />
<br />
{|border="0" align="left" style="border-collapse" cellpadding="3" cellspacing="0" <br />
|-style="background:silver"<br />
|'''Name'''||'''Value'''||'''Type''' <br />
|-<br />
||[[Image:Type_real_icon.png|16px]] [[Z Depth Parameter|Z Depth]]<br />
||0.000000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] [[Amount Parameter|Amount]]<br />
||1.000000<br />
||real<br />
<br />
|-<br />
||[[Image:type_integer_icon.png|16px]] [[Blend Method|Blend Method]]<br />
||Composite<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_color_icon.png|16px]] [[Colors Dialog|Color]]<br />
||<br />
{| style="width:95%; height:16px; background:black; color:black" border="1"<br />
|- <br />
|}<br />
||color<br />
<br />
|-style="background:#"<br />
||[[Image:Type_vector_icon.png|16px]] Origin<br />
||0.000000u,0.000000u<br />
||vector<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_bool_icon.png|16px]] Invert<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||[[Image:Type_bool_icon.png|16px]] Antialiasing<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Feather<br />
||0.000000pt<br />
||real<br />
<br />
|-<br />
||[[Image:Type_integer_icon.png|16px]] Type of Feather<br />
||Fast Gaussian Blur<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Winding Sytle<br />
||Non Zero<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_list_icon.png|16px]] Vertices<br />
||List<br />
||list (BLine)<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Outline Width<br />
||2.000000pt<br />
||real<br />
<br />
|-<br />
||[[Image:Type_real_icon.png|16px]] Expand<br />
||0.000000pt<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Tip Type at Start<br />
||Rounded Stop<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_integer_icon.png|16px]] Tip Type at End<br />
||Rounded Stop<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Cusps Type<br />
||Sharp<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_real_icon.png|16px]] Smoothness<br />
||0.500000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_list_icon.png|16px]] Width Point List<br />
||List<br />
||list(WPList)<br />
<br />
|-<br />
||[[Image:Type_bool_icon.png|16px]] Fast<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_bool_icon.png|16px]] Dashed Outline<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||[[Image:Type_list_icon.png|16px]] Dash Item List<br />
||List<br />
||list(WPList)<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Dash Items Offset<br />
||0.000000u<br />
||real<br />
<br />
|}<br />
<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br />
==Specific parameters for Advanced Outline Layer==<br />
<br />
This section lists only the parameters specific to the Advanced Outline Layer. For documentation about the other parameters, refer to [[Outline Layer]].<br />
<br />
* Tip Type at start<br />
* Tip Type at end<br />
* Cusps type<br />
* Smoothness<br />
* Width Point List<br />
<br />
=== Width Point List ===<br />
Each Advanced Outline has a list of parameters that represent the information for each width item. They are called Width Points and consist of four sub-parameters:<br />
<br />
* '''Position''' (Real number): represents the position of the width point along the BLine. Although it is allowed to be any real number, its meaning is only from 0.0 to 1.0. 0.0 corresponds to the start of the BLine (first BLine point on the bline list) and 1.0 to the last BLine point. For looped blines 0.0 and 1.0 are equal. The position is represented by the light purple duck that always lies on the bline.<br />
* '''Width''' (Real number): It is the width multiplicator of the global Width parameter of the Advanced Outline Layer on the position given by the Position parameter. The final width is calculated multiplying the global Advanced Outline's Width (W) by the Width of the widthpoint (w) and adding the Expand parameter (E). Calculated width = W*w+E<br />
* '''Tip Side Before/After''': Those two sub-parameters controls how the width is interpolated before and after the current widthpoint. The sub-parameter can have four values: <br />
** '''Interpolate''': Between the previous/following width point, the width is calculated by interpolation based on smoothness value.<br />
** '''Rounded''': There is a rounded tip that points to the width point before or after. If the previous/following width point is 'Interpolate' on its posterior/previous side it considers that the width of the widthpoint in question is zero just before/after it. If the previous/posterior width point is other than 'Interpolate' then the segment between those two width points is empty. See examples to understand it fully.<br />
** '''Squared''': Same as Rounded but using square tip.<br />
** '''Peak''': Same as Rounded but using peak tip.<br />
** '''Flat''': Same as Rounded but using flat tip.<br />
<br />
The Width Point list has one internal non-animatable parameter called ''loop''. You can reach it by right clicking the Width Point List parameter. If the Width Point list is unlooped, then any width point that has a Position outisde the range of [0,1] is clamped to (brought within) that range. For example: a Position = 1.35 is clamped to 1.0 then the Width Point List is unlooped. Otherwise, if the Width Point List is looped and a width point has a Position of 1.3, its modulus based on the range [0,1] is used, so it is turned to a position of 0.3.<br />
<br />
=== Smoothness ===<br />
<br />
The Smoothness controls how the width is calculated betwen widthpoints. The width at a position p is a function of the surrounding width points. When smoothness is zero interpolation is lineal, when smoothness is 1.0 interpolation is given by a 5th degree smooth spline.<br />
<br />
=== Cusp types ===<br />
<br />
There are three types of cusps in the Advanced Outline:<br />
<br />
* Sharp<br />
* Rounded<br />
* Bevel<br />
<br />
The type of cusp is controlled for the entire layer so currently it is not possible to control the type of corner individually. Maybe in future versions it will be possible.<br />
<br />
=== Tip type at start / end ===<br />
<br />
As with width points, the end and start of the unlooped Advanced Outlines has a type of tip defined. The user can choose between the same types of tips as for a width point. When the first/last width point has its before/after interpolation type set to Interpolate the start/end of the outline is rendered using the Tip type at start/end parameter.<br />
<br />
Those parameters don't have any effect if the bline is looped or the first/last width point has its before/after interpolation type set to anything but Interpolate. In that case, the segment between the start/end width point and the start/end of the bline is not rendered.<br />
<br />
The types of tips are the same as the width point tip types except that it doesn't offer the Interpolate type because it would not make sense:<br />
* Rounded<br />
* Squared<br />
* Peak<br />
* Flat<br />
<br />
== Working with the Avdanced Outline ==<br />
<br />
=== Creation of the Advanced Outline ===<br />
<br />
You can create Advanced Outlines in three ways:<br />
* With the Draw tool (check ''Create Advanced Outline'' in the tool options).<br />
* With the BLine Tool (check ''Create Advanced Outline'' in the tool options).<br />
* With the menu Insert-> Layer->Geometry->Advanced Outline.<br />
<br />
=== Change the width of the Width Points ===<br />
<br />
Initially the width ducks are hidden. You can make them visible by pressing Alt+5 or cliking on the width toggle button. It is possible to change the width using the Width Tool using the same procedure as for regular outlines. If you want more control over the width you can modify the width ducks with the Transform tool (Alt+A). More fine tunning is possible by expanding the width point sub-parameter and entering a specific value for the Width sub-parameter. In that case negative values are allowed to produce nice effects.<br />
<br />
=== Change the position of the Width Points ===<br />
<br />
When you make the width ducks of the width points visible/invisible, the position ducks also become visible/invisible. (NOTE: this may change in the future). This way, the user has a single way to hide/show the position and width ducks.<br />
<br />
The position ducks of the width points can be modified using the Transform Tool (ALT-A) and clicking and dragging the position duck. You will notice that ducks are tied to the bline so once clicked and dragged they can be placed at any way on the bline. Notice that if you have a width point position duck at position 0.2 and you click and drag at position 0.9 it may happen that you obtain a value of -0.1 because you dragged it in one step and the Width Point List may be looped. If you want to avoid those problems do the movement in small steps to indicate the correct path to follow when calculating the new position.<br />
<br />
=== Adding or removing width points ===<br />
To add a new width point you have to right click on the width point position duck purple duck to get the context menu. Then select "Add Item (smart)" here to create more width points entries. The width points are created this way:<br />
<br />
In the general case, the new widthpoint is created between the width point you click on and the "previous" width point. Depending on the loop status of the bline, the "previous" width point can be the start of the bline (unlooped) or the last widthpoint (looped). The worst case is when there is only one width point on the Width Point List. If you add one new item it will lie over the existing one.<br />
<br />
The newly added width point will have the interpolated width at the position where it is created. <br />
<br />
{{Note|Warning|Be warned that if you remove all the width points you will use the width of the layer as the only one width but you will enter in an unrecoverable status because it will be not possible to add a new width point. This is something that has to be fixed.}}<br />
<br />
=== Specific actions for Width Points ===<br />
<br />
Some needed actions have been added to width points as well as functionality for existing actions for items of the List type parameters. You can reach the list of available actions by right clicking on the width point position or directly on the width point item of the Width Point List. Here are some descriptions of the available actions:<br />
<br />
* Convert: Width Points are composite Value Nodes so its natural format is Composite (you can access its componets). But you can convert it to other formats. See Convert for details. &&TODO: Update Convert wiki page&&<br />
* Disconnect: This will disconnect the width point item from the Composite type Value Node. That means that there won't be any duck to show and that any of its values can be modified. Maybe it is useful for some types of workflows. To restore its Composite status, choose Convert->Composite.<br />
* Insert/ Remove Item Smart: This will add or remove a width point. If Remove is used in animation mode, it will also set the current width point as OFF instead of effectively removing it from the Width Point List. Opposite for the Insert Item Smart.<br />
* Mark Active Point as ON/OFF: You can set width points off to make it not count for width control while the width point is off. When the width point is half on to off or viceversa, the used width point should be the interpolation between the on and off status. But it doesn't work properly at the moment. On / Off values are not interpolated but fully on or fully off. This has to be corrected.<br />
* Export: See Export.<br />
* Loop: When set as looped, as mentioned before, it allows the width point positions loop around the range [0,1].<br />
* Rotate Order: Doesn't do anything.<br />
* Set Side Before/After to: Interpolate, Rounded, Squared, Peak, Flat. Those are shorcuts to do the same as going directly to the sub-parameter and choosing the appropiate Tip Type. Maybe it should be renamed to "Set Tip Before/After".<br />
* Set Width to default/zero: those actions have been added for two reasons. It is very common to want to set the width of a width point to zero. Despite the possibility of use the User Preference of Restrict Radius to First Quadrant, this way it is accesed quickly from the same usual menu. Also when a width point position duck and a width point width duck are on top of each other (width = 0) it is hard to modify the width or the position without trouble. To solve this the position duck has preference over the width duck in case of coincidence. So access the width duck it is needed to have a quick action to set it to its default value (1.0).</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=Advanced_Outline_Layer&diff=15444Advanced Outline Layer2012-03-21T16:40:35Z<p>Pupazzo: fix table layout</p>
<hr />
<div><!-- Page info --><br />
{{Title|Advanced Outline Layer}}<br />
{{Category|Layers}}<br />
<!-- Page info end --><br />
Under construction! TODO: add hyperlinks for known words. Add some visual examples. Add dashed outline.<br />
[[Image:Layer_geometry_advanced_outline_icon.png|64px]]<br />
<br />
== About Advanced Outline Layers ==<br />
<br />
=== Differences with Outline Layer: Outline width ===<br />
<br />
The ''width'' ducks define the outline width at particular place.<br />
<br />
In the regular [[Outline Layer]], each width duck is connected to the vertex that defines the outline shape at that place. That means that the user needs to insert a new vertex on the [[BLine]] every time he wants to change the outline width in some place. This behaviour can cause problems when the shape of the outline is very simple but the width varies a lot.<br />
<br />
Practice shows that most of the time the user wants to specify the width independently from the placement of [[BLine]] vertices. Such functionality is available in the Advanced Outline layer, which handles its width in a different way: the width ducks are freely moved around the bline and define its width at any point.<br />
<br />
== New features ==<br />
<br />
Advanced Outline introduces some new features to the regular outline, as shown in this [http://www.youtube.com/watch?v=boM_ZC9VZ54 Advanced outline demo] video. They are listed with examples below:<br />
<br />
<gallery widths="490px" heights="300px" perrow="2"><br />
File:Variable-width-without-blinepoints.png | No need to place vertex to change the width<br />
File:Lots-of-blinepoints-width-just-two width-controls.png | Width controlled just by two points, while the bline constructed of many vertices<br />
File:Different-types of tips.png | Different types of tips<br />
File: Segments of outlines.png | Segmented outline<br />
File:Different cusps types.png | Three global cusps types<br />
File:Smoothness control.png | Control of smoothness from linear (0.0) to smooth (1.0)<br />
</gallery><br />
<br />
<br />
==Parameters of Advanced Outline Layers==<br />
<br />
The parameters of the Advanced Outline Layers are:<br />
<br />
{|border="0" align="left" style="border-collapse" cellpadding="3" cellspacing="0" <br />
|-style="background:silver"<br />
|'''Name'''||'''Value'''||'''Type''' <br />
|-<br />
||[[Image:Type_real_icon.png|16px]] [[Z Depth Parameter|Z Depth]]<br />
||0.000000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] [[Amount Parameter|Amount]]<br />
||1.000000<br />
||real<br />
<br />
|-<br />
||[[Image:type_integer_icon.png|16px]] [[Blend Method|Blend Method]]<br />
||Composite<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_color_icon.png|16px]] [[Colors Dialog|Color]]<br />
||<br />
{| style="width:95%; height:16px; background:black; color:black" border="1"<br />
|- <br />
|}<br />
||color<br />
<br />
|-style="background:#"<br />
||[[Image:Type_vector_icon.png|16px]] Origin<br />
||0.000000u,0.000000u<br />
||vector<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_bool_icon.png|16px]] Invert<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||[[Image:Type_bool_icon.png|16px]] Antialiasing<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Feather<br />
||0.000000pt<br />
||real<br />
<br />
|-<br />
||[[Image:Type_integer_icon.png|16px]] Type of Feather<br />
||Fast Gaussian Blur<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Winding Sytle<br />
||Non Zero<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_list_icon.png|16px]] Vertices<br />
||List<br />
||list (BLine)<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Outline Width<br />
||2.000000pt<br />
||real<br />
<br />
|-<br />
||[[Image:Type_real_icon.png|16px]] Expand<br />
||0.000000pt<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Tip Type at Start<br />
||Rounded Stop<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_integer_icon.png|16px]] Tip Type at End<br />
||Rounded Stop<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Cusps Type<br />
||Sharp<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_real_icon.png|16px]] Smoothness<br />
||0.500000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_list_icon.png|16px]] Width Point List<br />
||List<br />
||list(WPList)<br />
<br />
|-<br />
||[[Image:Type_bool_icon.png|16px]] Fast<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_bool_icon.png|16px]] Dashed Outline<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||[[Image:Type_list_icon.png|16px]] Dash Item List<br />
||List<br />
||list(WPList)<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Dash Items Offset<br />
||0.000000u<br />
||real<br />
<br />
|}<br />
<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br />
==Specific parameters for Advanced Outline Layer==<br />
Notice that many of the parameters are the same as the regular [[Outline Layer|Outline]], so you can find the explanation of its usage by reading its wiki page. The new parameters are:<br />
* Tip Type at start<br />
* Tip Type at end<br />
* Cusps type<br />
* Smoothness<br />
* Width Point List<br />
<br />
=== Width Point List ===<br />
Each Advanced Outline has a list of parameters that represent the information for each width item. They are called Width Points and consist of four sub-parameters:<br />
<br />
* '''Position''' (Real number): represents the position of the width point along the bline. Although it is allowed to be any real number, its meaning is only from 0.0 to 1.0. 0.0 corresponds to the start of the bline (first blinepoint on the bline list) and 1.0 to the last blinepoint. For looped blines 0.0 and 1.0 are equal. The position is represented by the light purple duck that always lies on the bline.<br />
* '''Width''' (Real number): It is the width multiplicator of the global Width parameter of the Advanced Outline Layer on the position given by the Position parameter. The final width is calculated multiplying the global Advanced Outline's Width (W) by the Width of the widthpoint (w) and adding the Expand parameter (E). Calculated width = W*w+E<br />
* '''Tip Side Before/After''': Those two sub-parameters controls how the width is interpolated before and after the current widthpoint. The sub-parameter can have four values: <br />
** '''Interpolate''': Between the previous/following width point, the width is calculated by interpolation based on smoothness value.<br />
** '''Rounded''': There is a rounded tip that points to the width point before or after. If the previous/following width point is 'Interpolate' on its posterior/previous side it considers that the width of the widthpoint in question is zero just before/after it. If the previous/posterior width point is other than 'Interpolate' then the segment between those two width points is empty. See examples to understand it fully.<br />
** '''Squared''': Same as Rounded but using square tip.<br />
** '''Peak''': Same as Rounded but using peak tip.<br />
** '''Flat''': Same as Rounded but using flat tip.<br />
<br />
The Width Point list has one internal non-animatable parameter called ''loop''. You can reach it by right clicking the Width Point List parameter. If the Width Point list is unlooped, then any width point that has a Position outisde the range of [0,1] is clamped to (brought within) that range. For example: a Position = 1.35 is clamped to 1.0 then the Width Point List is unlooped. Otherwise, if the Width Point List is looped and a width point has a Position of 1.3, its modulus based on the range [0,1] is used, so it is turned to a position of 0.3.<br />
<br />
=== Smoothness ===<br />
<br />
The Smoothness controls how the width is calculated betwen widthpoints. The width at a position p is a function of the surrounding width points. When smoothness is zero interpolation is lineal, when smoothness is 1.0 interpolation is given by a 5th degree smooth spline.<br />
<br />
=== Cusp types ===<br />
<br />
There are three types of cusps in the Advanced Outline:<br />
<br />
* Sharp<br />
* Rounded<br />
* Bevel<br />
<br />
The type of cusp is controlled for the entire layer so currently it is not possible to control the type of corner individually. Maybe in future versions it will be possible.<br />
<br />
=== Tip type at start / end ===<br />
<br />
As with width points, the end and start of the unlooped Advanced Outlines has a type of tip defined. The user can choose between the same types of tips as for a width point. When the first/last width point has its before/after interpolation type set to Interpolate the start/end of the outline is rendered using the Tip type at start/end parameter.<br />
<br />
Those parameters don't have any effect if the bline is looped or the first/last width point has its before/after interpolation type set to anything but Interpolate. In that case, the segment between the start/end width point and the start/end of the bline is not rendered.<br />
<br />
The types of tips are the same as the width point tip types except that it doesn't offer the Interpolate type because it would not make sense:<br />
* Rounded<br />
* Squared<br />
* Peak<br />
* Flat<br />
<br />
== Working with the Avdanced Outline ==<br />
<br />
=== Creation of the Advanced Outline ===<br />
<br />
You can create Advanced Outlines in three ways:<br />
* With the Draw tool (check ''Create Advanced Outline'' in the tool options).<br />
* With the BLine Tool (check ''Create Advanced Outline'' in the tool options).<br />
* With the menu Insert-> Layer->Geometry->Advanced Outline.<br />
<br />
=== Change the width of the Width Points ===<br />
<br />
Initially the width ducks are hidden. You can make them visible by pressing Alt+5 or cliking on the width toggle button. It is possible to change the width using the Width Tool using the same procedure as for regular outlines. If you want more control over the width you can modify the width ducks with the Transform tool (Alt+A). More fine tunning is possible by expanding the width point sub-parameter and entering a specific value for the Width sub-parameter. In that case negative values are allowed to produce nice effects.<br />
<br />
=== Change the position of the Width Points ===<br />
<br />
When you make the width ducks of the width points visible/invisible, the position ducks also become visible/invisible. (NOTE: this may change in the future). This way, the user has a single way to hide/show the position and width ducks.<br />
<br />
The position ducks of the width points can be modified using the Transform Tool (ALT-A) and clicking and dragging the position duck. You will notice that ducks are tied to the bline so once clicked and dragged they can be placed at any way on the bline. Notice that if you have a width point position duck at position 0.2 and you click and drag at position 0.9 it may happen that you obtain a value of -0.1 because you dragged it in one step and the Width Point List may be looped. If you want to avoid those problems do the movement in small steps to indicate the correct path to follow when calculating the new position.<br />
<br />
=== Adding or removing width points ===<br />
To add a new width point you have to right click on the width point position duck purple duck to get the context menu. Then select "Add Item (smart)" here to create more width points entries. The width points are created this way:<br />
<br />
In the general case, the new widthpoint is created between the width point you click on and the "previous" width point. Depending on the loop status of the bline, the "previous" width point can be the start of the bline (unlooped) or the last widthpoint (looped). The worst case is when there is only one width point on the Width Point List. If you add one new item it will lie over the existing one.<br />
<br />
The newly added width point will have the interpolated width at the position where it is created. <br />
<br />
{{Note|Warning|Be warned that if you remove all the width points you will use the width of the layer as the only one width but you will enter in an unrecoverable status because it will be not possible to add a new width point. This is something that has to be fixed.}}<br />
<br />
=== Specific actions for Width Points ===<br />
<br />
Some needed actions have been added to width points as well as functionality for existing actions for items of the List type parameters. You can reach the list of available actions by right clicking on the width point position or directly on the width point item of the Width Point List. Here are some descriptions of the available actions:<br />
<br />
* Convert: Width Points are composite Value Nodes so its natural format is Composite (you can access its componets). But you can convert it to other formats. See Convert for details. &&TODO: Update Convert wiki page&&<br />
* Disconnect: This will disconnect the width point item from the Composite type Value Node. That means that there won't be any duck to show and that any of its values can be modified. Maybe it is useful for some types of workflows. To restore its Composite status, choose Convert->Composite.<br />
* Insert/ Remove Item Smart: This will add or remove a width point. If Remove is used in animation mode, it will also set the current width point as OFF instead of effectively removing it from the Width Point List. Opposite for the Insert Item Smart.<br />
* Mark Active Point as ON/OFF: You can set width points off to make it not count for width control while the width point is off. When the width point is half on to off or viceversa, the used width point should be the interpolation between the on and off status. But it doesn't work properly at the moment. On / Off values are not interpolated but fully on or fully off. This has to be corrected.<br />
* Export: See Export.<br />
* Loop: When set as looped, as mentioned before, it allows the width point positions loop around the range [0,1].<br />
* Rotate Order: Doesn't do anything.<br />
* Set Side Before/After to: Interpolate, Rounded, Squared, Peak, Flat. Those are shorcuts to do the same as going directly to the sub-parameter and choosing the appropiate Tip Type. Maybe it should be renamed to "Set Tip Before/After".<br />
* Set Width to default/zero: those actions have been added for two reasons. It is very common to want to set the width of a width point to zero. Despite the possibility of use the User Preference of Restrict Radius to First Quadrant, this way it is accesed quickly from the same usual menu. Also when a width point position duck and a width point width duck are on top of each other (width = 0) it is hard to modify the width or the position without trouble. To solve this the position duck has preference over the width duck in case of coincidence. So access the width duck it is needed to have a quick action to set it to its default value (1.0).</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=Advanced_Outline_Layer&diff=15443Advanced Outline Layer2012-03-21T16:38:08Z<p>Pupazzo: Add missing parameters to the table</p>
<hr />
<div><!-- Page info --><br />
{{Title|Advanced Outline Layer}}<br />
{{Category|Layers}}<br />
<!-- Page info end --><br />
Under construction! TODO: add hyperlinks for known words. Add some visual examples. Add dashed outline.<br />
[[Image:Layer_geometry_advanced_outline_icon.png|64px]]<br />
<br />
== About Advanced Outline Layers ==<br />
<br />
=== Differences with Outline Layer: Outline width ===<br />
<br />
The ''width'' ducks define the outline width at particular place.<br />
<br />
In the regular [[Outline Layer]], each width duck is connected to the vertex that defines the outline shape at that place. That means that the user needs to insert a new vertex on the [[BLine]] every time he wants to change the outline width in some place. This behaviour can cause problems when the shape of the outline is very simple but the width varies a lot.<br />
<br />
Practice shows that most of the time the user wants to specify the width independently from the placement of [[BLine]] vertices. Such functionality is available in the Advanced Outline layer, which handles its width in a different way: the width ducks are freely moved around the bline and define its width at any point.<br />
<br />
== New features ==<br />
<br />
Advanced Outline introduces some new features to the regular outline, as shown in this [http://www.youtube.com/watch?v=boM_ZC9VZ54 Advanced outline demo] video. They are listed with examples below:<br />
<br />
<gallery widths="490px" heights="300px" perrow="2"><br />
File:Variable-width-without-blinepoints.png | No need to place vertex to change the width<br />
File:Lots-of-blinepoints-width-just-two width-controls.png | Width controlled just by two points, while the bline constructed of many vertices<br />
File:Different-types of tips.png | Different types of tips<br />
File: Segments of outlines.png | Segmented outline<br />
File:Different cusps types.png | Three global cusps types<br />
File:Smoothness control.png | Control of smoothness from linear (0.0) to smooth (1.0)<br />
</gallery><br />
<br />
<br />
==Parameters of Advanced Outline Layers==<br />
<br />
The parameters of the Advanced Outline Layers are:<br />
<br />
{|border="0" align="left" style="border-collapse" cellpadding="3" cellspacing="0" <br />
|-style="background:silver"<br />
|'''Name'''||'''Value'''||'''Type''' <br />
|-<br />
||[[Image:Type_real_icon.png|16px]] [[Z Depth Parameter|Z Depth]]<br />
||0.000000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] [[Amount Parameter|Amount]]<br />
||1.000000<br />
||real<br />
<br />
|-<br />
||[[Image:type_integer_icon.png|16px]] [[Blend Method|Blend Method]]<br />
||Composite<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_color_icon.png|16px]] [[Colors Dialog|Color]]<br />
||<br />
{| style="width:95%; height:16px; background:black; color:black" border="1"<br />
|- <br />
|}<br />
||color<br />
<br />
|-style="background:#"<br />
||[[Image:Type_vector_icon.png|16px]] Origin<br />
||0.000000u,0.000000u<br />
||vector<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_bool_icon.png|16px]] Invert<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||[[Image:Type_bool_icon.png|16px]] Antialiasing<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Feather<br />
||0.000000pt<br />
||real<br />
<br />
|-<br />
||[[Image:Type_integer_icon.png|16px]] Type of Feather<br />
||Fast Gaussian Blur<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Winding Sytle<br />
||Non Zero<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_list_icon.png|16px]] Vertices<br />
||List<br />
||list (BLine)<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Outline Width<br />
||2.000000pt<br />
||real<br />
<br />
|-<br />
||[[Image:Type_real_icon.png|16px]] Expand<br />
||0.000000pt<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Tip Type at Start<br />
||Rounded Stop<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_integer_icon.png|16px]] Tip Type at End<br />
||Rounded Stop<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Cusps Type<br />
||Sharp<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_real_icon.png|16px]] Smoothness<br />
||0.500000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_list_icon.png|16px]] Width Point List<br />
||List<br />
||list(WPList)<br />
<br />
|-<br />
||[[Image:Type_bool_icon.png|16px]] Fast<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_bool_icon.png|16px]] Dashed Outline<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||[[Image:Type_list_icon.png|16px]] Dash Item List<br />
||List<br />
||list(WPList)<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Dash Items Offset<br />
||0.000000u<br />
||real<br />
<br />
|}<br />
<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br />
==Specific parameters for Advanced Outline Layer==<br />
Notice that many of the parameters are the same as the regular [[Outline Layer|Outline]], so you can find the explanation of its usage by reading its wiki page. The new parameters are:<br />
* Tip Type at start<br />
* Tip Type at end<br />
* Cusps type<br />
* Smoothness<br />
* Width Point List<br />
<br />
=== Width Point List ===<br />
Each Advanced Outline has a list of parameters that represent the information for each width item. They are called Width Points and consist of four sub-parameters:<br />
<br />
* '''Position''' (Real number): represents the position of the width point along the bline. Although it is allowed to be any real number, its meaning is only from 0.0 to 1.0. 0.0 corresponds to the start of the bline (first blinepoint on the bline list) and 1.0 to the last blinepoint. For looped blines 0.0 and 1.0 are equal. The position is represented by the light purple duck that always lies on the bline.<br />
* '''Width''' (Real number): It is the width multiplicator of the global Width parameter of the Advanced Outline Layer on the position given by the Position parameter. The final width is calculated multiplying the global Advanced Outline's Width (W) by the Width of the widthpoint (w) and adding the Expand parameter (E). Calculated width = W*w+E<br />
* '''Tip Side Before/After''': Those two sub-parameters controls how the width is interpolated before and after the current widthpoint. The sub-parameter can have four values: <br />
** '''Interpolate''': Between the previous/following width point, the width is calculated by interpolation based on smoothness value.<br />
** '''Rounded''': There is a rounded tip that points to the width point before or after. If the previous/following width point is 'Interpolate' on its posterior/previous side it considers that the width of the widthpoint in question is zero just before/after it. If the previous/posterior width point is other than 'Interpolate' then the segment between those two width points is empty. See examples to understand it fully.<br />
** '''Squared''': Same as Rounded but using square tip.<br />
** '''Peak''': Same as Rounded but using peak tip.<br />
** '''Flat''': Same as Rounded but using flat tip.<br />
<br />
The Width Point list has one internal non-animatable parameter called ''loop''. You can reach it by right clicking the Width Point List parameter. If the Width Point list is unlooped, then any width point that has a Position outisde the range of [0,1] is clamped to (brought within) that range. For example: a Position = 1.35 is clamped to 1.0 then the Width Point List is unlooped. Otherwise, if the Width Point List is looped and a width point has a Position of 1.3, its modulus based on the range [0,1] is used, so it is turned to a position of 0.3.<br />
<br />
=== Smoothness ===<br />
<br />
The Smoothness controls how the width is calculated betwen widthpoints. The width at a position p is a function of the surrounding width points. When smoothness is zero interpolation is lineal, when smoothness is 1.0 interpolation is given by a 5th degree smooth spline.<br />
<br />
=== Cusp types ===<br />
<br />
There are three types of cusps in the Advanced Outline:<br />
<br />
* Sharp<br />
* Rounded<br />
* Bevel<br />
<br />
The type of cusp is controlled for the entire layer so currently it is not possible to control the type of corner individually. Maybe in future versions it will be possible.<br />
<br />
=== Tip type at start / end ===<br />
<br />
As with width points, the end and start of the unlooped Advanced Outlines has a type of tip defined. The user can choose between the same types of tips as for a width point. When the first/last width point has its before/after interpolation type set to Interpolate the start/end of the outline is rendered using the Tip type at start/end parameter.<br />
<br />
Those parameters don't have any effect if the bline is looped or the first/last width point has its before/after interpolation type set to anything but Interpolate. In that case, the segment between the start/end width point and the start/end of the bline is not rendered.<br />
<br />
The types of tips are the same as the width point tip types except that it doesn't offer the Interpolate type because it would not make sense:<br />
* Rounded<br />
* Squared<br />
* Peak<br />
* Flat<br />
<br />
== Working with the Avdanced Outline ==<br />
<br />
=== Creation of the Advanced Outline ===<br />
<br />
You can create Advanced Outlines in three ways:<br />
* With the Draw tool (check ''Create Advanced Outline'' in the tool options).<br />
* With the BLine Tool (check ''Create Advanced Outline'' in the tool options).<br />
* With the menu Insert-> Layer->Geometry->Advanced Outline.<br />
<br />
=== Change the width of the Width Points ===<br />
<br />
Initially the width ducks are hidden. You can make them visible by pressing Alt+5 or cliking on the width toggle button. It is possible to change the width using the Width Tool using the same procedure as for regular outlines. If you want more control over the width you can modify the width ducks with the Transform tool (Alt+A). More fine tunning is possible by expanding the width point sub-parameter and entering a specific value for the Width sub-parameter. In that case negative values are allowed to produce nice effects.<br />
<br />
=== Change the position of the Width Points ===<br />
<br />
When you make the width ducks of the width points visible/invisible, the position ducks also become visible/invisible. (NOTE: this may change in the future). This way, the user has a single way to hide/show the position and width ducks.<br />
<br />
The position ducks of the width points can be modified using the Transform Tool (ALT-A) and clicking and dragging the position duck. You will notice that ducks are tied to the bline so once clicked and dragged they can be placed at any way on the bline. Notice that if you have a width point position duck at position 0.2 and you click and drag at position 0.9 it may happen that you obtain a value of -0.1 because you dragged it in one step and the Width Point List may be looped. If you want to avoid those problems do the movement in small steps to indicate the correct path to follow when calculating the new position.<br />
<br />
=== Adding or removing width points ===<br />
To add a new width point you have to right click on the width point position duck purple duck to get the context menu. Then select "Add Item (smart)" here to create more width points entries. The width points are created this way:<br />
<br />
In the general case, the new widthpoint is created between the width point you click on and the "previous" width point. Depending on the loop status of the bline, the "previous" width point can be the start of the bline (unlooped) or the last widthpoint (looped). The worst case is when there is only one width point on the Width Point List. If you add one new item it will lie over the existing one.<br />
<br />
The newly added width point will have the interpolated width at the position where it is created. <br />
<br />
{{Note|Warning|Be warned that if you remove all the width points you will use the width of the layer as the only one width but you will enter in an unrecoverable status because it will be not possible to add a new width point. This is something that has to be fixed.}}<br />
<br />
=== Specific actions for Width Points ===<br />
<br />
Some needed actions have been added to width points as well as functionality for existing actions for items of the List type parameters. You can reach the list of available actions by right clicking on the width point position or directly on the width point item of the Width Point List. Here are some descriptions of the available actions:<br />
<br />
* Convert: Width Points are composite Value Nodes so its natural format is Composite (you can access its componets). But you can convert it to other formats. See Convert for details. &&TODO: Update Convert wiki page&&<br />
* Disconnect: This will disconnect the width point item from the Composite type Value Node. That means that there won't be any duck to show and that any of its values can be modified. Maybe it is useful for some types of workflows. To restore its Composite status, choose Convert->Composite.<br />
* Insert/ Remove Item Smart: This will add or remove a width point. If Remove is used in animation mode, it will also set the current width point as OFF instead of effectively removing it from the Width Point List. Opposite for the Insert Item Smart.<br />
* Mark Active Point as ON/OFF: You can set width points off to make it not count for width control while the width point is off. When the width point is half on to off or viceversa, the used width point should be the interpolation between the on and off status. But it doesn't work properly at the moment. On / Off values are not interpolated but fully on or fully off. This has to be corrected.<br />
* Export: See Export.<br />
* Loop: When set as looped, as mentioned before, it allows the width point positions loop around the range [0,1].<br />
* Rotate Order: Doesn't do anything.<br />
* Set Side Before/After to: Interpolate, Rounded, Squared, Peak, Flat. Those are shorcuts to do the same as going directly to the sub-parameter and choosing the appropiate Tip Type. Maybe it should be renamed to "Set Tip Before/After".<br />
* Set Width to default/zero: those actions have been added for two reasons. It is very common to want to set the width of a width point to zero. Despite the possibility of use the User Preference of Restrict Radius to First Quadrant, this way it is accesed quickly from the same usual menu. Also when a width point position duck and a width point width duck are on top of each other (width = 0) it is hard to modify the width or the position without trouble. To solve this the position duck has preference over the width duck in case of coincidence. So access the width duck it is needed to have a quick action to set it to its default value (1.0).</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=Advanced_Outline_Layer&diff=15442Advanced Outline Layer2012-03-21T16:30:39Z<p>Pupazzo: fix typo</p>
<hr />
<div><!-- Page info --><br />
{{Title|Advanced Outline Layer}}<br />
{{Category|Layers}}<br />
<!-- Page info end --><br />
Under construction! TODO: add hyperlinks for known words. Add some visual examples. Add dashed outline.<br />
[[Image:Layer_geometry_advanced_outline_icon.png|64px]]<br />
<br />
== About Advanced Outline Layers ==<br />
<br />
=== Differences with Outline Layer: Outline width ===<br />
<br />
The ''width'' ducks define the outline width at particular place.<br />
<br />
In the regular [[Outline Layer]], each width duck is connected to the vertex that defines the outline shape at that place. That means that the user needs to insert a new vertex on the [[BLine]] every time he wants to change the outline width in some place. This behaviour can cause problems when the shape of the outline is very simple but the width varies a lot.<br />
<br />
Practice shows that most of the time the user wants to specify the width independently from the placement of [[BLine]] vertices. Such functionality is available in the Advanced Outline layer, which handles its width in a different way: the width ducks are freely moved around the bline and define its width at any point.<br />
<br />
== New features ==<br />
<br />
Advanced Outline introduces some new features to the regular outline, as shown in this [http://www.youtube.com/watch?v=boM_ZC9VZ54 Advanced outline demo] video. They are listed with examples below:<br />
<br />
<gallery widths="490px" heights="300px" perrow="2"><br />
File:Variable-width-without-blinepoints.png | No need to place vertex to change the width<br />
File:Lots-of-blinepoints-width-just-two width-controls.png | Width controlled just by two points, while the bline constructed of many vertices<br />
File:Different-types of tips.png | Different types of tips<br />
File: Segments of outlines.png | Segmented outline<br />
File:Different cusps types.png | Three global cusps types<br />
File:Smoothness control.png | Control of smoothness from linear (0.0) to smooth (1.0)<br />
</gallery><br />
<br />
<br />
==Parameters of Advanced Outline Layers==<br />
<br />
The parameters of the Advanced Outline Layers are:<br />
<br />
{|border="0" align="left" style="border-collapse" cellpadding="3" cellspacing="0" <br />
|-style="background:silver"<br />
|'''Name'''||'''Value'''||'''Type''' <br />
|-<br />
||[[Image:Type_real_icon.png|16px]] [[Z Depth Parameter|Z Depth]]<br />
||0.000000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] [[Amount Parameter|Amount]]<br />
||1.000000<br />
||real<br />
<br />
|-<br />
||[[Image:type_integer_icon.png|16px]] [[Blend Method|Blend Method]]<br />
||Composite<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_color_icon.png|16px]] [[Colors Dialog|Color]]<br />
||<br />
{| style="width:95%; height:16px; background:black; color:black" border="1"<br />
|- <br />
|}<br />
||color<br />
<br />
|-style="background:#"<br />
||[[Image:Type_vector_icon.png|16px]] Origin<br />
||0.000000u,0.000000u<br />
||vector<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_bool_icon.png|16px]] Invert<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||[[Image:Type_bool_icon.png|16px]] Antialiasing<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Feather<br />
||0.000000pt<br />
||real<br />
<br />
|-<br />
||[[Image:Type_integer_icon.png|16px]] Type of Feather<br />
||Fast Gaussian Blur<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Winding Sytle<br />
||Non Zero<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_list_icon.png|16px]] Vertices<br />
||List<br />
||list (BLine)<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Outline Width<br />
||2.000000pt<br />
||real<br />
<br />
|-<br />
||[[Image:Type_real_icon.png|16px]] Expand<br />
||0.000000pt<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Tip Type at Start<br />
||Rounded Stop<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_integer_icon.png|16px]] Tip Type at End<br />
||Rounded Stop<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Cusps Type<br />
||Sharp<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_real_icon.png|16px]] Smoothness<br />
||0.500000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_list_icon.png|16px]] Width Point List<br />
||List<br />
||list(WPList)<br />
<br />
|}<br />
<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br />
==Specific parameters for Advanced Outline Layer==<br />
Notice that many of the parameters are the same as the regular [[Outline Layer|Outline]], so you can find the explanation of its usage by reading its wiki page. The new parameters are:<br />
* Tip Type at start<br />
* Tip Type at end<br />
* Cusps type<br />
* Smoothness<br />
* Width Point List<br />
<br />
=== Width Point List ===<br />
Each Advanced Outline has a list of parameters that represent the information for each width item. They are called Width Points and consist of four sub-parameters:<br />
<br />
* '''Position''' (Real number): represents the position of the width point along the bline. Although it is allowed to be any real number, its meaning is only from 0.0 to 1.0. 0.0 corresponds to the start of the bline (first blinepoint on the bline list) and 1.0 to the last blinepoint. For looped blines 0.0 and 1.0 are equal. The position is represented by the light purple duck that always lies on the bline.<br />
* '''Width''' (Real number): It is the width multiplicator of the global Width parameter of the Advanced Outline Layer on the position given by the Position parameter. The final width is calculated multiplying the global Advanced Outline's Width (W) by the Width of the widthpoint (w) and adding the Expand parameter (E). Calculated width = W*w+E<br />
* '''Tip Side Before/After''': Those two sub-parameters controls how the width is interpolated before and after the current widthpoint. The sub-parameter can have four values: <br />
** '''Interpolate''': Between the previous/following width point, the width is calculated by interpolation based on smoothness value.<br />
** '''Rounded''': There is a rounded tip that points to the width point before or after. If the previous/following width point is 'Interpolate' on its posterior/previous side it considers that the width of the widthpoint in question is zero just before/after it. If the previous/posterior width point is other than 'Interpolate' then the segment between those two width points is empty. See examples to understand it fully.<br />
** '''Squared''': Same as Rounded but using square tip.<br />
** '''Peak''': Same as Rounded but using peak tip.<br />
** '''Flat''': Same as Rounded but using flat tip.<br />
<br />
The Width Point list has one internal non-animatable parameter called ''loop''. You can reach it by right clicking the Width Point List parameter. If the Width Point list is unlooped, then any width point that has a Position outisde the range of [0,1] is clamped to (brought within) that range. For example: a Position = 1.35 is clamped to 1.0 then the Width Point List is unlooped. Otherwise, if the Width Point List is looped and a width point has a Position of 1.3, its modulus based on the range [0,1] is used, so it is turned to a position of 0.3.<br />
<br />
=== Smoothness ===<br />
<br />
The Smoothness controls how the width is calculated betwen widthpoints. The width at a position p is a function of the surrounding width points. When smoothness is zero interpolation is lineal, when smoothness is 1.0 interpolation is given by a 5th degree smooth spline.<br />
<br />
=== Cusp types ===<br />
<br />
There are three types of cusps in the Advanced Outline:<br />
<br />
* Sharp<br />
* Rounded<br />
* Bevel<br />
<br />
The type of cusp is controlled for the entire layer so currently it is not possible to control the type of corner individually. Maybe in future versions it will be possible.<br />
<br />
=== Tip type at start / end ===<br />
<br />
As with width points, the end and start of the unlooped Advanced Outlines has a type of tip defined. The user can choose between the same types of tips as for a width point. When the first/last width point has its before/after interpolation type set to Interpolate the start/end of the outline is rendered using the Tip type at start/end parameter.<br />
<br />
Those parameters don't have any effect if the bline is looped or the first/last width point has its before/after interpolation type set to anything but Interpolate. In that case, the segment between the start/end width point and the start/end of the bline is not rendered.<br />
<br />
The types of tips are the same as the width point tip types except that it doesn't offer the Interpolate type because it would not make sense:<br />
* Rounded<br />
* Squared<br />
* Peak<br />
* Flat<br />
<br />
== Working with the Avdanced Outline ==<br />
<br />
=== Creation of the Advanced Outline ===<br />
<br />
You can create Advanced Outlines in three ways:<br />
* With the Draw tool (check ''Create Advanced Outline'' in the tool options).<br />
* With the BLine Tool (check ''Create Advanced Outline'' in the tool options).<br />
* With the menu Insert-> Layer->Geometry->Advanced Outline.<br />
<br />
=== Change the width of the Width Points ===<br />
<br />
Initially the width ducks are hidden. You can make them visible by pressing Alt+5 or cliking on the width toggle button. It is possible to change the width using the Width Tool using the same procedure as for regular outlines. If you want more control over the width you can modify the width ducks with the Transform tool (Alt+A). More fine tunning is possible by expanding the width point sub-parameter and entering a specific value for the Width sub-parameter. In that case negative values are allowed to produce nice effects.<br />
<br />
=== Change the position of the Width Points ===<br />
<br />
When you make the width ducks of the width points visible/invisible, the position ducks also become visible/invisible. (NOTE: this may change in the future). This way, the user has a single way to hide/show the position and width ducks.<br />
<br />
The position ducks of the width points can be modified using the Transform Tool (ALT-A) and clicking and dragging the position duck. You will notice that ducks are tied to the bline so once clicked and dragged they can be placed at any way on the bline. Notice that if you have a width point position duck at position 0.2 and you click and drag at position 0.9 it may happen that you obtain a value of -0.1 because you dragged it in one step and the Width Point List may be looped. If you want to avoid those problems do the movement in small steps to indicate the correct path to follow when calculating the new position.<br />
<br />
=== Adding or removing width points ===<br />
To add a new width point you have to right click on the width point position duck purple duck to get the context menu. Then select "Add Item (smart)" here to create more width points entries. The width points are created this way:<br />
<br />
In the general case, the new widthpoint is created between the width point you click on and the "previous" width point. Depending on the loop status of the bline, the "previous" width point can be the start of the bline (unlooped) or the last widthpoint (looped). The worst case is when there is only one width point on the Width Point List. If you add one new item it will lie over the existing one.<br />
<br />
The newly added width point will have the interpolated width at the position where it is created. <br />
<br />
{{Note|Warning|Be warned that if you remove all the width points you will use the width of the layer as the only one width but you will enter in an unrecoverable status because it will be not possible to add a new width point. This is something that has to be fixed.}}<br />
<br />
=== Specific actions for Width Points ===<br />
<br />
Some needed actions have been added to width points as well as functionality for existing actions for items of the List type parameters. You can reach the list of available actions by right clicking on the width point position or directly on the width point item of the Width Point List. Here are some descriptions of the available actions:<br />
<br />
* Convert: Width Points are composite Value Nodes so its natural format is Composite (you can access its componets). But you can convert it to other formats. See Convert for details. &&TODO: Update Convert wiki page&&<br />
* Disconnect: This will disconnect the width point item from the Composite type Value Node. That means that there won't be any duck to show and that any of its values can be modified. Maybe it is useful for some types of workflows. To restore its Composite status, choose Convert->Composite.<br />
* Insert/ Remove Item Smart: This will add or remove a width point. If Remove is used in animation mode, it will also set the current width point as OFF instead of effectively removing it from the Width Point List. Opposite for the Insert Item Smart.<br />
* Mark Active Point as ON/OFF: You can set width points off to make it not count for width control while the width point is off. When the width point is half on to off or viceversa, the used width point should be the interpolation between the on and off status. But it doesn't work properly at the moment. On / Off values are not interpolated but fully on or fully off. This has to be corrected.<br />
* Export: See Export.<br />
* Loop: When set as looped, as mentioned before, it allows the width point positions loop around the range [0,1].<br />
* Rotate Order: Doesn't do anything.<br />
* Set Side Before/After to: Interpolate, Rounded, Squared, Peak, Flat. Those are shorcuts to do the same as going directly to the sub-parameter and choosing the appropiate Tip Type. Maybe it should be renamed to "Set Tip Before/After".<br />
* Set Width to default/zero: those actions have been added for two reasons. It is very common to want to set the width of a width point to zero. Despite the possibility of use the User Preference of Restrict Radius to First Quadrant, this way it is accesed quickly from the same usual menu. Also when a width point position duck and a width point width duck are on top of each other (width = 0) it is hard to modify the width or the position without trouble. To solve this the position duck has preference over the width duck in case of coincidence. So access the width duck it is needed to have a quick action to set it to its default value (1.0).</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=User:Pupazzo&diff=15441User:Pupazzo2012-03-21T15:15:34Z<p>Pupazzo: </p>
<hr />
<div>Tutorials I wrote:<br />
* {{l|Doc:Looping_Background}}<br />
<br />
Tutorials I would like to write if I have time<br />
<br />
* moving travel path on maps. Refs:<br />
** [http://www.synfig.org/forums/viewtopic.php?f=3&t=2803#p11032 animate a "travel path"]<br />
<br />
* moving / animated text. Write-on (animated drawing).Refs:<br />
** [http://www.synfig.org/forums/viewtopic.php?f=3&t=2901#p11637 animated writing / letter U]<br />
** [http://synfig.org/forums/viewtopic.php?f=10&t=3018 Animated Drawing with Bline on Advanced layer]<br />
<br />
* kinetic typography<br />
** http://www.youtube.com/watch?v=fOi5P1qxrM4 Tutorial with after effects but full of good ideas.</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=Advanced_Outline_Layer&diff=15440Advanced Outline Layer2012-03-21T14:37:15Z<p>Pupazzo: /* Creation of the Advanced Outline */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Advanced Outline Layer}}<br />
{{Category|Layers}}<br />
<!-- Page info end --><br />
Under construction! TODO: add hyperlinks for known words. Add some visual examples. Add dashed outline.<br />
[[Image:Layer_geometry_advanced_outline_icon.png|64px]]<br />
<br />
== About Advanced Outline Layers ==<br />
<br />
=== Differences with Outline Layer: Outline width ===<br />
<br />
The ''width'' ducks define the outline width at particular place.<br />
<br />
In the regular [[Outline Layer]], each width duck is connected to the vertex that defines the outline shape at that place. That means that the user needs to insert a new vertex on the [[BLine]] every time he wants to change the outline width in some place. This behaviour can cause problems when the shape of the outline is very simple but the width varies a lot.<br />
<br />
Practice shows that most of the time the user wants to specify the width independently from the placement of [[BLine]] vertices. Such functionality is available in the Advanced Outline layer, which handles its width in a different way: the width ducks are freely moved around the bline and define its width at any point.<br />
<br />
== New features ==<br />
<br />
Advanced Outline introduces some new features to the regular outline, as shown in this [http://www.youtube.com/watch?v=boM_ZC9VZ54 Advanced outline demo] video. They are listed with examples below:<br />
<br />
<gallery widths="490px" heights="300px" perrow="2"><br />
File:Variable-width-without-blinepoints.png | No need to place vertex to change the width<br />
File:Lots-of-blinepoints-width-just-two width-controls.png | Width controlled just by two points, while the bline constructed of many vertices<br />
File:Different-types of tips.png | Different types of tips<br />
File: Segments of outlines.png | Segmented outline<br />
File:Different cusps types.png | Three global cusps types<br />
File:Smoothness control.png | Control of smoothness from linear (0.0) to smooth (1.0)<br />
</gallery><br />
<br />
<br />
==Parameters of Advanced Outline Layers==<br />
<br />
The parameters of the Advanced Outline Layers are:<br />
<br />
{|border="0" align="left" style="border-collapse" cellpadding="3" cellspacing="0" <br />
|-style="background:silver"<br />
|'''Name'''||'''Value'''||'''Type''' <br />
|-<br />
||[[Image:Type_real_icon.png|16px]] [[Z Depth Parameter|Z Depth]]<br />
||0.000000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] [[Amount Parameter|Amount]]<br />
||1.000000<br />
||real<br />
<br />
|-<br />
||[[Image:type_integer_icon.png|16px]] [[Blend Method|Blend Method]]<br />
||Composite<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_color_icon.png|16px]] [[Colors Dialog|Color]]<br />
||<br />
{| style="width:95%; height:16px; background:black; color:black" border="1"<br />
|- <br />
|}<br />
||color<br />
<br />
|-style="background:#"<br />
||[[Image:Type_vector_icon.png|16px]] Origin<br />
||0.000000u,0.000000u<br />
||vector<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_bool_icon.png|16px]] Invert<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||[[Image:Type_bool_icon.png|16px]] Antialiasing<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Feather<br />
||0.000000pt<br />
||real<br />
<br />
|-<br />
||[[Image:Type_integer_icon.png|16px]] Tyep of Feather<br />
||Fast Gaussian Blur<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Winding Sytle<br />
||Non Zero<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_list_icon.png|16px]] Vertices<br />
||List<br />
||list (BLine)<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Outline Width<br />
||2.000000pt<br />
||real<br />
<br />
|-<br />
||[[Image:Type_real_icon.png|16px]] Expand<br />
||0.000000pt<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Tip Type at Start<br />
||Rounded Stop<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_integer_icon.png|16px]] Tip Type at End<br />
||Rounded Stop<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Cusps Type<br />
||Sharp<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_real_icon.png|16px]] Smoothness<br />
||0.500000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_list_icon.png|16px]] Width Point List<br />
||List<br />
||list(WPList)<br />
<br />
|}<br />
<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br />
==Specific parameters for Advanced Outline Layer==<br />
Notice that many of the parameters are the same as the regular [[Outline Layer|Outline]], so you can find the explanation of its usage by reading its wiki page. The new parameters are:<br />
* Tip Type at start<br />
* Tip Type at end<br />
* Cusps type<br />
* Smoothness<br />
* Width Point List<br />
<br />
=== Width Point List ===<br />
Each Advanced Outline has a list of parameters that represent the information for each width item. They are called Width Points and consist of four sub-parameters:<br />
<br />
* '''Position''' (Real number): represents the position of the width point along the bline. Although it is allowed to be any real number, its meaning is only from 0.0 to 1.0. 0.0 corresponds to the start of the bline (first blinepoint on the bline list) and 1.0 to the last blinepoint. For looped blines 0.0 and 1.0 are equal. The position is represented by the light purple duck that always lies on the bline.<br />
* '''Width''' (Real number): It is the width multiplicator of the global Width parameter of the Advanced Outline Layer on the position given by the Position parameter. The final width is calculated multiplying the global Advanced Outline's Width (W) by the Width of the widthpoint (w) and adding the Expand parameter (E). Calculated width = W*w+E<br />
* '''Tip Side Before/After''': Those two sub-parameters controls how the width is interpolated before and after the current widthpoint. The sub-parameter can have four values: <br />
** '''Interpolate''': Between the previous/following width point, the width is calculated by interpolation based on smoothness value.<br />
** '''Rounded''': There is a rounded tip that points to the width point before or after. If the previous/following width point is 'Interpolate' on its posterior/previous side it considers that the width of the widthpoint in question is zero just before/after it. If the previous/posterior width point is other than 'Interpolate' then the segment between those two width points is empty. See examples to understand it fully.<br />
** '''Squared''': Same as Rounded but using square tip.<br />
** '''Peak''': Same as Rounded but using peak tip.<br />
** '''Flat''': Same as Rounded but using flat tip.<br />
<br />
The Width Point list has one internal non-animatable parameter called ''loop''. You can reach it by right clicking the Width Point List parameter. If the Width Point list is unlooped, then any width point that has a Position outisde the range of [0,1] is clamped to (brought within) that range. For example: a Position = 1.35 is clamped to 1.0 then the Width Point List is unlooped. Otherwise, if the Width Point List is looped and a width point has a Position of 1.3, its modulus based on the range [0,1] is used, so it is turned to a position of 0.3.<br />
<br />
=== Smoothness ===<br />
<br />
The Smoothness controls how the width is calculated betwen widthpoints. The width at a position p is a function of the surrounding width points. When smoothness is zero interpolation is lineal, when smoothness is 1.0 interpolation is given by a 5th degree smooth spline.<br />
<br />
=== Cusp types ===<br />
<br />
There are three types of cusps in the Advanced Outline:<br />
<br />
* Sharp<br />
* Rounded<br />
* Bevel<br />
<br />
The type of cusp is controlled for the entire layer so currently it is not possible to control the type of corner individually. Maybe in future versions it will be possible.<br />
<br />
=== Tip type at start / end ===<br />
<br />
As with width points, the end and start of the unlooped Advanced Outlines has a type of tip defined. The user can choose between the same types of tips as for a width point. When the first/last width point has its before/after interpolation type set to Interpolate the start/end of the outline is rendered using the Tip type at start/end parameter.<br />
<br />
Those parameters don't have any effect if the bline is looped or the first/last width point has its before/after interpolation type set to anything but Interpolate. In that case, the segment between the start/end width point and the start/end of the bline is not rendered.<br />
<br />
The types of tips are the same as the width point tip types except that it doesn't offer the Interpolate type because it would not make sense:<br />
* Rounded<br />
* Squared<br />
* Peak<br />
* Flat<br />
<br />
== Working with the Avdanced Outline ==<br />
<br />
=== Creation of the Advanced Outline ===<br />
<br />
You can create Advanced Outlines in three ways:<br />
* With the Draw tool (check ''Create Advanced Outline'' in the tool options).<br />
* With the BLine Tool (check ''Create Advanced Outline'' in the tool options).<br />
* With the menu Insert-> Layer->Geometry->Advanced Outline.<br />
<br />
=== Change the width of the Width Points ===<br />
<br />
Initially the width ducks are hidden. You can make them visible by pressing Alt+5 or cliking on the width toggle button. It is possible to change the width using the Width Tool using the same procedure as for regular outlines. If you want more control over the width you can modify the width ducks with the Transform tool (Alt+A). More fine tunning is possible by expanding the width point sub-parameter and entering a specific value for the Width sub-parameter. In that case negative values are allowed to produce nice effects.<br />
<br />
=== Change the position of the Width Points ===<br />
<br />
When you make the width ducks of the width points visible/invisible, the position ducks also become visible/invisible. (NOTE: this may change in the future). This way, the user has a single way to hide/show the position and width ducks.<br />
<br />
The position ducks of the width points can be modified using the Transform Tool (ALT-A) and clicking and dragging the position duck. You will notice that ducks are tied to the bline so once clicked and dragged they can be placed at any way on the bline. Notice that if you have a width point position duck at position 0.2 and you click and drag at position 0.9 it may happen that you obtain a value of -0.1 because you dragged it in one step and the Width Point List may be looped. If you want to avoid those problems do the movement in small steps to indicate the correct path to follow when calculating the new position.<br />
<br />
=== Adding or removing width points ===<br />
To add a new width point you have to right click on the width point position duck purple duck to get the context menu. Then select "Add Item (smart)" here to create more width points entries. The width points are created this way:<br />
<br />
In the general case, the new widthpoint is created between the width point you click on and the "previous" width point. Depending on the loop status of the bline, the "previous" width point can be the start of the bline (unlooped) or the last widthpoint (looped). The worst case is when there is only one width point on the Width Point List. If you add one new item it will lie over the existing one.<br />
<br />
The newly added width point will have the interpolated width at the position where it is created. <br />
<br />
{{Note|Warning|Be warned that if you remove all the width points you will use the width of the layer as the only one width but you will enter in an unrecoverable status because it will be not possible to add a new width point. This is something that has to be fixed.}}<br />
<br />
=== Specific actions for Width Points ===<br />
<br />
Some needed actions have been added to width points as well as functionality for existing actions for items of the List type parameters. You can reach the list of available actions by right clicking on the width point position or directly on the width point item of the Width Point List. Here are some descriptions of the available actions:<br />
<br />
* Convert: Width Points are composite Value Nodes so its natural format is Composite (you can access its componets). But you can convert it to other formats. See Convert for details. &&TODO: Update Convert wiki page&&<br />
* Disconnect: This will disconnect the width point item from the Composite type Value Node. That means that there won't be any duck to show and that any of its values can be modified. Maybe it is useful for some types of workflows. To restore its Composite status, choose Convert->Composite.<br />
* Insert/ Remove Item Smart: This will add or remove a width point. If Remove is used in animation mode, it will also set the current width point as OFF instead of effectively removing it from the Width Point List. Opposite for the Insert Item Smart.<br />
* Mark Active Point as ON/OFF: You can set width points off to make it not count for width control while the width point is off. When the width point is half on to off or viceversa, the used width point should be the interpolation between the on and off status. But it doesn't work properly at the moment. On / Off values are not interpolated but fully on or fully off. This has to be corrected.<br />
* Export: See Export.<br />
* Loop: When set as looped, as mentioned before, it allows the width point positions loop around the range [0,1].<br />
* Rotate Order: Doesn't do anything.<br />
* Set Side Before/After to: Interpolate, Rounded, Squared, Peak, Flat. Those are shorcuts to do the same as going directly to the sub-parameter and choosing the appropiate Tip Type. Maybe it should be renamed to "Set Tip Before/After".<br />
* Set Width to default/zero: those actions have been added for two reasons. It is very common to want to set the width of a width point to zero. Despite the possibility of use the User Preference of Restrict Radius to First Quadrant, this way it is accesed quickly from the same usual menu. Also when a width point position duck and a width point width duck are on top of each other (width = 0) it is hard to modify the width or the position without trouble. To solve this the position duck has preference over the width duck in case of coincidence. So access the width duck it is needed to have a quick action to set it to its default value (1.0).</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=Advanced_Outline_Layer&diff=15439Advanced Outline Layer2012-03-21T14:32:34Z<p>Pupazzo: Update to current synfig capabilities</p>
<hr />
<div><!-- Page info --><br />
{{Title|Advanced Outline Layer}}<br />
{{Category|Layers}}<br />
<!-- Page info end --><br />
Under construction! TODO: add hyperlinks for known words. Add some visual examples. Add dashed outline.<br />
[[Image:Layer_geometry_advanced_outline_icon.png|64px]]<br />
<br />
== About Advanced Outline Layers ==<br />
<br />
=== Differences with Outline Layer: Outline width ===<br />
<br />
The ''width'' ducks define the outline width at particular place.<br />
<br />
In the regular [[Outline Layer]], each width duck is connected to the vertex that defines the outline shape at that place. That means that the user needs to insert a new vertex on the [[BLine]] every time he wants to change the outline width in some place. This behaviour can cause problems when the shape of the outline is very simple but the width varies a lot.<br />
<br />
Practice shows that most of the time the user wants to specify the width independently from the placement of [[BLine]] vertices. Such functionality is available in the Advanced Outline layer, which handles its width in a different way: the width ducks are freely moved around the bline and define its width at any point.<br />
<br />
== New features ==<br />
<br />
Advanced Outline introduces some new features to the regular outline, as shown in this [http://www.youtube.com/watch?v=boM_ZC9VZ54 Advanced outline demo] video. They are listed with examples below:<br />
<br />
<gallery widths="490px" heights="300px" perrow="2"><br />
File:Variable-width-without-blinepoints.png | No need to place vertex to change the width<br />
File:Lots-of-blinepoints-width-just-two width-controls.png | Width controlled just by two points, while the bline constructed of many vertices<br />
File:Different-types of tips.png | Different types of tips<br />
File: Segments of outlines.png | Segmented outline<br />
File:Different cusps types.png | Three global cusps types<br />
File:Smoothness control.png | Control of smoothness from linear (0.0) to smooth (1.0)<br />
</gallery><br />
<br />
<br />
==Parameters of Advanced Outline Layers==<br />
<br />
The parameters of the Advanced Outline Layers are:<br />
<br />
{|border="0" align="left" style="border-collapse" cellpadding="3" cellspacing="0" <br />
|-style="background:silver"<br />
|'''Name'''||'''Value'''||'''Type''' <br />
|-<br />
||[[Image:Type_real_icon.png|16px]] [[Z Depth Parameter|Z Depth]]<br />
||0.000000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] [[Amount Parameter|Amount]]<br />
||1.000000<br />
||real<br />
<br />
|-<br />
||[[Image:type_integer_icon.png|16px]] [[Blend Method|Blend Method]]<br />
||Composite<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_color_icon.png|16px]] [[Colors Dialog|Color]]<br />
||<br />
{| style="width:95%; height:16px; background:black; color:black" border="1"<br />
|- <br />
|}<br />
||color<br />
<br />
|-style="background:#"<br />
||[[Image:Type_vector_icon.png|16px]] Origin<br />
||0.000000u,0.000000u<br />
||vector<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_bool_icon.png|16px]] Invert<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||[[Image:Type_bool_icon.png|16px]] Antialiasing<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Feather<br />
||0.000000pt<br />
||real<br />
<br />
|-<br />
||[[Image:Type_integer_icon.png|16px]] Tyep of Feather<br />
||Fast Gaussian Blur<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Winding Sytle<br />
||Non Zero<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_list_icon.png|16px]] Vertices<br />
||List<br />
||list (BLine)<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Outline Width<br />
||2.000000pt<br />
||real<br />
<br />
|-<br />
||[[Image:Type_real_icon.png|16px]] Expand<br />
||0.000000pt<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Tip Type at Start<br />
||Rounded Stop<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_integer_icon.png|16px]] Tip Type at End<br />
||Rounded Stop<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Cusps Type<br />
||Sharp<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_real_icon.png|16px]] Smoothness<br />
||0.500000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_list_icon.png|16px]] Width Point List<br />
||List<br />
||list(WPList)<br />
<br />
|}<br />
<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br />
==Specific parameters for Advanced Outline Layer==<br />
Notice that many of the parameters are the same as the regular [[Outline Layer|Outline]], so you can find the explanation of its usage by reading its wiki page. The new parameters are:<br />
* Tip Type at start<br />
* Tip Type at end<br />
* Cusps type<br />
* Smoothness<br />
* Width Point List<br />
<br />
=== Width Point List ===<br />
Each Advanced Outline has a list of parameters that represent the information for each width item. They are called Width Points and consist of four sub-parameters:<br />
<br />
* '''Position''' (Real number): represents the position of the width point along the bline. Although it is allowed to be any real number, its meaning is only from 0.0 to 1.0. 0.0 corresponds to the start of the bline (first blinepoint on the bline list) and 1.0 to the last blinepoint. For looped blines 0.0 and 1.0 are equal. The position is represented by the light purple duck that always lies on the bline.<br />
* '''Width''' (Real number): It is the width multiplicator of the global Width parameter of the Advanced Outline Layer on the position given by the Position parameter. The final width is calculated multiplying the global Advanced Outline's Width (W) by the Width of the widthpoint (w) and adding the Expand parameter (E). Calculated width = W*w+E<br />
* '''Tip Side Before/After''': Those two sub-parameters controls how the width is interpolated before and after the current widthpoint. The sub-parameter can have four values: <br />
** '''Interpolate''': Between the previous/following width point, the width is calculated by interpolation based on smoothness value.<br />
** '''Rounded''': There is a rounded tip that points to the width point before or after. If the previous/following width point is 'Interpolate' on its posterior/previous side it considers that the width of the widthpoint in question is zero just before/after it. If the previous/posterior width point is other than 'Interpolate' then the segment between those two width points is empty. See examples to understand it fully.<br />
** '''Squared''': Same as Rounded but using square tip.<br />
** '''Peak''': Same as Rounded but using peak tip.<br />
** '''Flat''': Same as Rounded but using flat tip.<br />
<br />
The Width Point list has one internal non-animatable parameter called ''loop''. You can reach it by right clicking the Width Point List parameter. If the Width Point list is unlooped, then any width point that has a Position outisde the range of [0,1] is clamped to (brought within) that range. For example: a Position = 1.35 is clamped to 1.0 then the Width Point List is unlooped. Otherwise, if the Width Point List is looped and a width point has a Position of 1.3, its modulus based on the range [0,1] is used, so it is turned to a position of 0.3.<br />
<br />
=== Smoothness ===<br />
<br />
The Smoothness controls how the width is calculated betwen widthpoints. The width at a position p is a function of the surrounding width points. When smoothness is zero interpolation is lineal, when smoothness is 1.0 interpolation is given by a 5th degree smooth spline.<br />
<br />
=== Cusp types ===<br />
<br />
There are three types of cusps in the Advanced Outline:<br />
<br />
* Sharp<br />
* Rounded<br />
* Bevel<br />
<br />
The type of cusp is controlled for the entire layer so currently it is not possible to control the type of corner individually. Maybe in future versions it will be possible.<br />
<br />
=== Tip type at start / end ===<br />
<br />
As with width points, the end and start of the unlooped Advanced Outlines has a type of tip defined. The user can choose between the same types of tips as for a width point. When the first/last width point has its before/after interpolation type set to Interpolate the start/end of the outline is rendered using the Tip type at start/end parameter.<br />
<br />
Those parameters don't have any effect if the bline is looped or the first/last width point has its before/after interpolation type set to anything but Interpolate. In that case, the segment between the start/end width point and the start/end of the bline is not rendered.<br />
<br />
The types of tips are the same as the width point tip types except that it doesn't offer the Interpolate type because it would not make sense:<br />
* Rounded<br />
* Squared<br />
* Peak<br />
* Flat<br />
<br />
== Working with the Avdanced Outline ==<br />
<br />
=== Creation of the Advanced Outline ===<br />
<br />
You can create Advanced Outlines in the same way that you make normal ones with the BLine Tool (Alt+B), but make sure the Advanced Outline box is ticked in the bline toolbox. Alternatively you can create a default Advanced Outline by clicking in the menu Insert-> Layer->Geometry->Advanced Outline.<br />
<br />
=== Change the width of the Width Points ===<br />
<br />
Initially the width ducks are hidden. You can make them visible by pressing Alt+5 or cliking on the width toggle button. It is possible to change the width using the Width Tool using the same procedure as for regular outlines. If you want more control over the width you can modify the width ducks with the Transform tool (Alt+A). More fine tunning is possible by expanding the width point sub-parameter and entering a specific value for the Width sub-parameter. In that case negative values are allowed to produce nice effects.<br />
<br />
=== Change the position of the Width Points ===<br />
<br />
When you make the width ducks of the width points visible/invisible, the position ducks also become visible/invisible. (NOTE: this may change in the future). This way, the user has a single way to hide/show the position and width ducks.<br />
<br />
The position ducks of the width points can be modified using the Transform Tool (ALT-A) and clicking and dragging the position duck. You will notice that ducks are tied to the bline so once clicked and dragged they can be placed at any way on the bline. Notice that if you have a width point position duck at position 0.2 and you click and drag at position 0.9 it may happen that you obtain a value of -0.1 because you dragged it in one step and the Width Point List may be looped. If you want to avoid those problems do the movement in small steps to indicate the correct path to follow when calculating the new position.<br />
<br />
=== Adding or removing width points ===<br />
To add a new width point you have to right click on the width point position duck purple duck to get the context menu. Then select "Add Item (smart)" here to create more width points entries. The width points are created this way:<br />
<br />
In the general case, the new widthpoint is created between the width point you click on and the "previous" width point. Depending on the loop status of the bline, the "previous" width point can be the start of the bline (unlooped) or the last widthpoint (looped). The worst case is when there is only one width point on the Width Point List. If you add one new item it will lie over the existing one.<br />
<br />
The newly added width point will have the interpolated width at the position where it is created. <br />
<br />
{{Note|Warning|Be warned that if you remove all the width points you will use the width of the layer as the only one width but you will enter in an unrecoverable status because it will be not possible to add a new width point. This is something that has to be fixed.}}<br />
<br />
=== Specific actions for Width Points ===<br />
<br />
Some needed actions have been added to width points as well as functionality for existing actions for items of the List type parameters. You can reach the list of available actions by right clicking on the width point position or directly on the width point item of the Width Point List. Here are some descriptions of the available actions:<br />
<br />
* Convert: Width Points are composite Value Nodes so its natural format is Composite (you can access its componets). But you can convert it to other formats. See Convert for details. &&TODO: Update Convert wiki page&&<br />
* Disconnect: This will disconnect the width point item from the Composite type Value Node. That means that there won't be any duck to show and that any of its values can be modified. Maybe it is useful for some types of workflows. To restore its Composite status, choose Convert->Composite.<br />
* Insert/ Remove Item Smart: This will add or remove a width point. If Remove is used in animation mode, it will also set the current width point as OFF instead of effectively removing it from the Width Point List. Opposite for the Insert Item Smart.<br />
* Mark Active Point as ON/OFF: You can set width points off to make it not count for width control while the width point is off. When the width point is half on to off or viceversa, the used width point should be the interpolation between the on and off status. But it doesn't work properly at the moment. On / Off values are not interpolated but fully on or fully off. This has to be corrected.<br />
* Export: See Export.<br />
* Loop: When set as looped, as mentioned before, it allows the width point positions loop around the range [0,1].<br />
* Rotate Order: Doesn't do anything.<br />
* Set Side Before/After to: Interpolate, Rounded, Squared, Peak, Flat. Those are shorcuts to do the same as going directly to the sub-parameter and choosing the appropiate Tip Type. Maybe it should be renamed to "Set Tip Before/After".<br />
* Set Width to default/zero: those actions have been added for two reasons. It is very common to want to set the width of a width point to zero. Despite the possibility of use the User Preference of Restrict Radius to First Quadrant, this way it is accesed quickly from the same usual menu. Also when a width point position duck and a width point width duck are on top of each other (width = 0) it is hard to modify the width or the position without trouble. To solve this the position duck has preference over the width duck in case of coincidence. So access the width duck it is needed to have a quick action to set it to its default value (1.0).</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=Advanced_Outline_Layer&diff=15438Advanced Outline Layer2012-03-21T14:12:11Z<p>Pupazzo: edit formatting</p>
<hr />
<div><!-- Page info --><br />
{{Title|Advanced Outline Layer}}<br />
{{Category|Layers}}<br />
<!-- Page info end --><br />
Under construction! TODO: add hyperlinks for known words. Add some visual examples. Add dashed outline.<br />
[[Image:Layer_geometry_advanced_outline_icon.png|64px]]<br />
<br />
== About Advanced Outline Layers ==<br />
<br />
=== Differences with Outline Layer: Outline width ===<br />
<br />
The ''width'' ducks define the outline width at particular place.<br />
<br />
In the regular [[Outline Layer]], each width duck is connected to the vertex that defines the outline shape at that place. That means that the user needs to insert a new vertex on the [[BLine]] every time he wants to change the outline width in some place. This behaviour can cause problems when the shape of the outline is very simple but the width varies a lot.<br />
<br />
Practice shows that most of the time the user wants to specify the width independently from the placement of [[BLine]] vertices. Such functionality is available in the Advanced Outline layer, which handles its width in a different way: the width ducks are freely moved around the bline and define its width at any point.<br />
<br />
== New features ==<br />
<br />
Advanced Outline introduces some new features to the regular outline, as shown in this [http://www.youtube.com/watch?v=boM_ZC9VZ54 Advanced outline demo] video. They are listed with examples below:<br />
<br />
<gallery widths="490px" heights="300px" perrow="2"><br />
File:Variable-width-without-blinepoints.png | No need to place vertex to change the width<br />
File:Lots-of-blinepoints-width-just-two width-controls.png | Width controlled just by two points, while the bline constructed of many vertices<br />
File:Different-types of tips.png | Different types of tips<br />
File: Segments of outlines.png | Segmented outline<br />
File:Different cusps types.png | Three global cusps types<br />
File:Smoothness control.png | Control of smoothness from linear (0.0) to smooth (1.0)<br />
</gallery><br />
<br />
<br />
==Parameters of Advanced Outline Layers==<br />
<br />
The parameters of the Advanced Outline Layers are:<br />
<br />
{|border="0" align="left" style="border-collapse" cellpadding="3" cellspacing="0" <br />
|-style="background:silver"<br />
|'''Name'''||'''Value'''||'''Type''' <br />
|-<br />
||[[Image:Type_real_icon.png|16px]] [[Z Depth Parameter|Z Depth]]<br />
||0.000000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] [[Amount Parameter|Amount]]<br />
||1.000000<br />
||real<br />
<br />
|-<br />
||[[Image:type_integer_icon.png|16px]] [[Blend Method|Blend Method]]<br />
||Composite<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_color_icon.png|16px]] [[Colors Dialog|Color]]<br />
||<br />
{| style="width:95%; height:16px; background:black; color:black" border="1"<br />
|- <br />
|}<br />
||color<br />
<br />
|-style="background:#"<br />
||[[Image:Type_vector_icon.png|16px]] Origin<br />
||0.000000u,0.000000u<br />
||vector<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_bool_icon.png|16px]] Invert<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||[[Image:Type_bool_icon.png|16px]] Antialiasing<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Feather<br />
||0.000000pt<br />
||real<br />
<br />
|-<br />
||[[Image:Type_integer_icon.png|16px]] Tyep of Feather<br />
||Fast Gaussian Blur<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Winding Sytle<br />
||Non Zero<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_list_icon.png|16px]] Vertices<br />
||List<br />
||list (BLine)<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Outline Width<br />
||2.000000pt<br />
||real<br />
<br />
|-<br />
||[[Image:Type_real_icon.png|16px]] Expand<br />
||0.000000pt<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Tip Type at Start<br />
||Rounded Stop<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_integer_icon.png|16px]] Tip Type at End<br />
||Rounded Stop<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Cusps Type<br />
||Sharp<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_real_icon.png|16px]] Smoothness<br />
||0.500000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_list_icon.png|16px]] Width Point List<br />
||List<br />
||list(WPList)<br />
<br />
|}<br />
<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br />
==Specific parameters for Advanced Outline Layer==<br />
Notice that many of the parameters are the same as the regular [[Outline Layer|Outline]], so you can find the explanation of its usage by reading its wiki page. The new parameters are:<br />
* Tip Type at start<br />
* Tip Type at end<br />
* Cusps type<br />
* Smoothness<br />
* Width Point List<br />
<br />
=== Width Point List ===<br />
Each Advanced Outline has a list of parameters that represent the information for each width item. They are called Width Points and consist of four sub-parameters:<br />
<br />
* '''Position''' (Real number): represents the position of the width point along the bline. Although it is allowed to be any real number, its meaning is only from 0.0 to 1.0. 0.0 corresponds to the start of the bline (first blinepoint on the bline list) and 1.0 to the last blinepoint. For looped blines 0.0 and 1.0 are equal. The position is represented by the light purple duck that always lies on the bline.<br />
* '''Width''' (Real number): It is the width multiplicator of the global Width parameter of the Advanced Outline Layer on the position given by the Position parameter. The final width is calculated multiplying the global Advanced Outline's Width (W) by the Width of the widthpoint (w) and adding the Expand parameter (E). Calculated width = W*w+E<br />
* '''Tip Side Before/After''': Those two sub-parameters controls how the width is interpolated before and after the current widthpoint. The sub-parameter can have four values: <br />
** '''Interpolate''': Between the previous/following width point, the width is calculated by interpolation based on smoothness value.<br />
** '''Rounded''': There is a rounded tip that points to the width point before or after. If the previous/following width point is 'Interpolate' on its posterior/previous side it considers that the width of the widthpoint in question is zero just before/after it. If the previous/posterior width point is other than 'Interpolate' then the segment between those two width points is empty. See examples to understand it fully.<br />
** '''Squared''': Same as Rounded but using square tip.<br />
** '''Peak''': Same as Rounded but using peak tip.<br />
** '''Flat''': Same as Rounded but using flat tip.<br />
<br />
The Width Point list has one internal non-animatable parameter called ''loop''. You can reach it by right clicking the Width Point List parameter. If the Width Point list is unlooped, then any width point that has a Position outisde the range of [0,1] is clamped to (brought within) that range. For example: a Position = 1.35 is clamped to 1.0 then the Width Point List is unlooped. Otherwise, if the Width Point List is looped and a width point has a Position of 1.3, its modulus based on the range [0,1] is used, so it is turned to a position of 0.3.<br />
<br />
=== Smoothness ===<br />
<br />
The Smoothness controls how the width is calculated betwen widthpoints. The width at a position p is a function of the surrounding width points. When smoothness is zero interpolation is lineal, when smoothness is 1.0 interpolation is given by a 5th degree smooth spline.<br />
<br />
=== Cusp types ===<br />
<br />
There are three types of cusps in the Advanced Outline:<br />
<br />
* Sharp<br />
* Rounded<br />
* Bevel<br />
<br />
The type of cusp is controlled for the entire layer so currently it is not possible to control the type of corner individually. Maybe in future versions it will be possible.<br />
<br />
=== Tip type at start / end ===<br />
<br />
As with width points, the end and start of the unlooped Advanced Outlines has a type of tip defined. The user can choose between the same types of tips as for a width point. When the first/last width point has its before/after interpolation type set to Interpolate the start/end of the outline is rendered using the Tip type at start/end parameter.<br />
<br />
Those parameters don't have any effect if the bline is looped or the first/last width point has its before/after interpolation type set to anything but Interpolate. In that case, the segment between the start/end width point and the start/end of the bline is not rendered.<br />
<br />
The types of tips are the same as the width point tip types except that it doesn't offer the Interpolate type because it would not make sense:<br />
* Rounded<br />
* Squared<br />
* Peak<br />
* Flat<br />
<br />
== Working with the Avdanced Outline ==<br />
<br />
=== Creation of the Advanced Outline ===<br />
<br />
You can create Advanced Outlines in the same way that you make normal ones with the BLine Tool (Alt+B), but make sure the Advanced Outline box is ticked in the bline toolbox. Alternatively you can create a default Advanced Outline by clicking in the menu Insert-> Layer->Geometry->Advanced Outline.<br />
<br />
Currently it is not possible to create Advanced Outlined with the Draw Tool. It has been postponed to a future release.<br />
<br />
=== Change the width of the Width Points ===<br />
<br />
Initially the width ducks are hidden. You can make them visible by pressing Alt+5 or cliking on the width toggle button. It is possible to change the width using the Width Tool using the same procedure as for regular outlines. If you want more control over the width you can modify the width ducks with the Transform tool (Alt+A). More fine tunning is possible by expanding the width point sub-parameter and entering a specific value for the Width sub-parameter. In that case negative values are allowed to produce nice effects.<br />
<br />
=== Change the position of the Width Points ===<br />
<br />
When you make the width ducks of the width points visible/invisible, the position ducks also become visible/invisible. (NOTE: this may change in the future). This way, the user has a single way to hide/show the position and width ducks.<br />
<br />
The position ducks of the width points can be modified using the Transform Tool (ALT-A) and clicking and dragging the position duck. You will notice that ducks are tied to the bline so once clicked and dragged they can be placed at any way on the bline. Notice that if you have a width point position duck at position 0.2 and you click and drag at position 0.9 it may happen that you obtain a value of -0.1 because you dragged it in one step and the Width Point List may be looped. If you want to avoid those problems do the movement in small steps to indicate the correct path to follow when calculating the new position.<br />
<br />
=== Adding or removing width points ===<br />
To add a new width point you have to right click on the width point position duck purple duck to get the context menu. Then select "Add Item (smart)" here to create more width points entries. The width points are created this way:<br />
<br />
In the general case, the new widthpoint is created between the width point you click on and the "previous" width point. Depending on the loop status of the bline, the "previous" width point can be the start of the bline (unlooped) or the last widthpoint (looped). The worst case is when there is only one width point on the Width Point List. If you add one new item it will lie over the existing one.<br />
<br />
The newly added width point will have the interpolated width at the position where it is created. <br />
<br />
{{Note|Warning|Be warned that if you remove all the width points you will use the width of the layer as the only one width but you will enter in an unrecoverable status because it will be not possible to add a new width point. This is something that has to be fixed.}}<br />
<br />
=== Specific actions for Width Points ===<br />
<br />
Some needed actions have been added to width points as well as functionality for existing actions for items of the List type parameters. You can reach the list of available actions by right clicking on the width point position or directly on the width point item of the Width Point List. Here are some descriptions of the available actions:<br />
<br />
* Convert: Width Points are composite Value Nodes so its natural format is Composite (you can access its componets). But you can convert it to other formats. See Convert for details. &&TODO: Update Convert wiki page&&<br />
* Disconnect: This will disconnect the width point item from the Composite type Value Node. That means that there won't be any duck to show and that any of its values can be modified. Maybe it is useful for some types of workflows. To restore its Composite status, choose Convert->Composite.<br />
* Insert/ Remove Item Smart: This will add or remove a width point. If Remove is used in animation mode, it will also set the current width point as OFF instead of effectively removing it from the Width Point List. Opposite for the Insert Item Smart.<br />
* Mark Active Point as ON/OFF: You can set width points off to make it not count for width control while the width point is off. When the width point is half on to off or viceversa, the used width point should be the interpolation between the on and off status. But it doesn't work properly at the moment. On / Off values are not interpolated but fully on or fully off. This has to be corrected.<br />
* Export: See Export.<br />
* Loop: When set as looped, as mentioned before, it allows the width point positions loop around the range [0,1].<br />
* Rotate Order: Doesn't do anything.<br />
* Set Side Before/After to: Interpolate, Rounded, Squared, Peak, Flat. Those are shorcuts to do the same as going directly to the sub-parameter and choosing the appropiate Tip Type. Maybe it should be renamed to "Set Tip Before/After".<br />
* Set Width to default/zero: those actions have been added for two reasons. It is very common to want to set the width of a width point to zero. Despite the possibility of use the User Preference of Restrict Radius to First Quadrant, this way it is accesed quickly from the same usual menu. Also when a width point position duck and a width point width duck are on top of each other (width = 0) it is hard to modify the width or the position without trouble. To solve this the position duck has preference over the width duck in case of coincidence. So access the width duck it is needed to have a quick action to set it to its default value (1.0).</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=Advanced_Outline_Layer&diff=15437Advanced Outline Layer2012-03-21T14:06:56Z<p>Pupazzo: Try to make the text more fluid to read/understand.</p>
<hr />
<div><!-- Page info --><br />
{{Title|Advanced Outline Layer}}<br />
{{Category|Layers}}<br />
<!-- Page info end --><br />
Under construction! TODO: add hyperlinks for known words. Add some visual examples. Add dashed outline.<br />
[[Image:Layer_geometry_advanced_outline_icon.png|64px]]<br />
<br />
== About Advanced Outline Layers ==<br />
<br />
=== Differences with Outline Layer: Outline width ===<br />
<br />
The ''width'' ducks define the outline width at particular place.<br />
<br />
In the regular [[Outline Layer]], each width duck is connected to the vertex that defines the outline shape at that place. That means that the user needs to insert a new vertex on the [[BLine]] every time he wants to change the outline width in some place. This behaviour can cause problems when the shape of the outline is very simple but the width varies a lot.<br />
<br />
Practice shows that most of the time the user wants to specify the width independently from the placement of [[BLine]] vertices. Such functionality is available in the Advanced Outline layer, which handles its width in a different way: the width ducks are freely moved around the bline and define its width at any point.<br />
<br />
== New features ==<br />
<br />
Advanced Outline introduces some new features to the regular outline, as shown in this [http://www.youtube.com/watch?v=boM_ZC9VZ54 Advanced outline demo] video. They are listed with examples below:<br />
<br />
<gallery widths="490px" heights="300px" perrow="2"><br />
File:Variable-width-without-blinepoints.png | No need to place vertex to change the width<br />
File:Lots-of-blinepoints-width-just-two width-controls.png | Width controlled just by two points, while the bline constructed of many vertices<br />
File:Different-types of tips.png | Different types of tips<br />
File: Segments of outlines.png | Segmented outline<br />
File:Different cusps types.png | Three global cusps types<br />
File:Smoothness control.png | Control of smoothness from linear (0.0) to smooth (1.0)<br />
</gallery><br />
<br />
<br />
==Parameters of Advanced Outline Layers==<br />
<br />
The parameters of the Advanced Outline Layers are:<br />
<br />
{|border="0" align="left" style="border-collapse" cellpadding="3" cellspacing="0" <br />
|-style="background:silver"<br />
|'''Name'''||'''Value'''||'''Type''' <br />
|-<br />
||[[Image:Type_real_icon.png|16px]] [[Z Depth Parameter|Z Depth]]<br />
||0.000000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] [[Amount Parameter|Amount]]<br />
||1.000000<br />
||real<br />
<br />
|-<br />
||[[Image:type_integer_icon.png|16px]] [[Blend Method|Blend Method]]<br />
||Composite<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_color_icon.png|16px]] [[Colors Dialog|Color]]<br />
||<br />
{| style="width:95%; height:16px; background:black; color:black" border="1"<br />
|- <br />
|}<br />
||color<br />
<br />
|-style="background:#"<br />
||[[Image:Type_vector_icon.png|16px]] Origin<br />
||0.000000u,0.000000u<br />
||vector<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_bool_icon.png|16px]] Invert<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||[[Image:Type_bool_icon.png|16px]] Antialiasing<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Feather<br />
||0.000000pt<br />
||real<br />
<br />
|-<br />
||[[Image:Type_integer_icon.png|16px]] Tyep of Feather<br />
||Fast Gaussian Blur<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Winding Sytle<br />
||Non Zero<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_list_icon.png|16px]] Vertices<br />
||List<br />
||list (BLine)<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Outline Width<br />
||2.000000pt<br />
||real<br />
<br />
|-<br />
||[[Image:Type_real_icon.png|16px]] Expand<br />
||0.000000pt<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Tip Type at Start<br />
||Rounded Stop<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_integer_icon.png|16px]] Tip Type at End<br />
||Rounded Stop<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Cusps Type<br />
||Sharp<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_real_icon.png|16px]] Smoothness<br />
||0.500000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_list_icon.png|16px]] Width Point List<br />
||List<br />
||list(WPList)<br />
<br />
|}<br />
<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br />
==Specific parameters for Advanced Outline Layer==<br />
Notice that many of the parameters are the same as the regular [[Outline Layer|Outline]], so you can find the explanation of its usage by reading its wiki page. The new parameters are:<br />
* Tip Type at start<br />
* Tip Type at end<br />
* Cusps type<br />
* Smoothness<br />
* Width Point List<br />
<br />
=== Width Point List ===<br />
Each Advanced Outline has a list of parameters that represent the information for each width item. They are called Width Points and consist of four sub-parameters:<br />
<br />
* Position (Real number): represents the position of the width point along the bline. Although it is allowed to be any real number, its meaning is only from 0.0 to 1.0. 0.0 corresponds to the start of the bline (first blinepoint on the bline list) and 1.0 to the last blinepoint. For looped blines 0.0 and 1.0 are equal. The position is represented by the light purple duck that always lies on the bline.<br />
* Width (Real number): It is the width multiplicator of the global Width parameter of the Advanced Outline Layer on the position given by the Position parameter. The final width is calculated multiplying the global Advanced Outline's Width (W) by the Width of the widthpoint (w) and adding the Expand parameter (E). Calculated width = W*w+E<br />
* Tip Side Before/After: Those two sub-parameters controls how the width is interpolated before and after the current widthpoint. The sub-parameter can have four values: <br />
** Interpolate: Between the previous/following width point, the width is calculated by interpolation based on smoothness value.<br />
** Rounded: There is a rounded tip that points to the width point before or after. If the previous/following width point is 'Interpolate' on its posterior/previous side it considers that the width of the widthpoint in question is zero just before/after it. If the previous/posterior width point is other than 'Interpolate' then the segment between those two width points is empty. See examples to understand it fully.<br />
** Squared: Same as Rounded but using square tip.<br />
** Peak: Same as Rounded but using peak tip.<br />
** Flat: Same as Rounded but using flat tip.<br />
<br />
The Width Point list has one internal non-animatable parameter called ''loop''. You can reach it by right clicking the Width Point List parameter. If the Width Point list is unlooped, then any width point that has a Position outisde the range of [0,1] is clamped to (brought within) that range. For example: a Position = 1.35 is clamped to 1.0 then the Width Point List is unlooped. Otherwise, if the Width Point List is looped and a width point has a Position of 1.3, its modulus based on the range [0,1] is used, so it is turned to a position of 0.3.<br />
<br />
=== Smoothness ===<br />
<br />
The Smoothness controls how the width is calculated betwen widthpoints. The width at a position p is a function of the surrounding width points. When smoothness is zero interpolation is lineal, when smoothness is 1.0 interpolation is given by a 5th degree smooth spline.<br />
<br />
=== Cusp types ===<br />
<br />
There are three types of cusps in the Advanced Outline:<br />
<br />
* Sharp<br />
* Rounded<br />
* Bevel<br />
<br />
The type of cusp is controlled for the entire layer so currently it is not possible to control the type of corner individually. Maybe in future versions it will be possible.<br />
<br />
=== Tip type at start / end ===<br />
<br />
As with width points, the end and start of the unlooped Advanced Outlines has a type of tip defined. The user can choose between the same types of tips as for a width point. When the first/last width point has its before/after interpolation type set to Interpolate the start/end of the outline is rendered using the Tip type at start/end parameter.<br />
<br />
Those parameters don't have any effect if the bline is looped or the first/last width point has its before/after interpolation type set to anything but Interpolate. In that case, the segment between the start/end width point and the start/end of the bline is not rendered.<br />
<br />
The types of tips are the same as the width point tip types except that it doesn't offer the Interpolate type because it would not make sense:<br />
* Rounded<br />
* Squared<br />
* Peak<br />
* Flat<br />
<br />
== Working with the Avdanced Outline ==<br />
<br />
=== Creation of the Advanced Outline ===<br />
<br />
You can create Advanced Outlines in the same way that you make normal ones with the BLine Tool (Alt+B), but make sure the Advanced Outline box is ticked in the bline toolbox. Alternatively you can create a default Advanced Outline by clicking in the menu Insert-> Layer->Geometry->Advanced Outline.<br />
<br />
Currently it is not possible to create Advanced Outlined with the Draw Tool. It has been postponed to a future release.<br />
<br />
=== Change the width of the Width Points ===<br />
<br />
Initially the width ducks are hidden. You can make them visible by pressing Alt+5 or cliking on the width toggle button. It is possible to change the width using the Width Tool using the same procedure as for regular outlines. If you want more control over the width you can modify the width ducks with the Transform tool (Alt+A). More fine tunning is possible by expanding the width point sub-parameter and entering a specific value for the Width sub-parameter. In that case negative values are allowed to produce nice effects.<br />
<br />
=== Change the position of the Width Points ===<br />
<br />
When you make the width ducks of the width points visible/invisible, the position ducks also become visible/invisible. (NOTE: this may change in the future). This way, the user has a single way to hide/show the position and width ducks.<br />
<br />
The position ducks of the width points can be modified using the Transform Tool (ALT-A) and clicking and dragging the position duck. You will notice that ducks are tied to the bline so once clicked and dragged they can be placed at any way on the bline. Notice that if you have a width point position duck at position 0.2 and you click and drag at position 0.9 it may happen that you obtain a value of -0.1 because you dragged it in one step and the Width Point List may be looped. If you want to avoid those problems do the movement in small steps to indicate the correct path to follow when calculating the new position.<br />
<br />
=== Adding or removing width points ===<br />
To add a new width point you have to right click on the width point position duck purple duck to get the context menu. Then select "Add Item (smart)" here to create more width points entries. The width points are created this way:<br />
<br />
In the general case, the new widthpoint is created between the width point you click on and the "previous" width point. Depending on the loop status of the bline, the "previous" width point can be the start of the bline (unlooped) or the last widthpoint (looped). The worst case is when there is only one width point on the Width Point List. If you add one new item it will lie over the existing one.<br />
<br />
The newly added width point will have the interpolated width at the position where it is created. <br />
<br />
{{Note|Warning|Be warned that if you remove all the width points you will use the width of the layer as the only one width but you will enter in an unrecoverable status because it will be not possible to add a new width point. This is something that has to be fixed.}}<br />
<br />
=== Specific actions for Width Points ===<br />
<br />
Some needed actions have been added to width points as well as functionality for existing actions for items of the List type parameters. You can reach the list of available actions by right clicking on the width point position or directly on the width point item of the Width Point List. Here are some descriptions of the available actions:<br />
<br />
* Convert: Width Points are composite Value Nodes so its natural format is Composite (you can access its componets). But you can convert it to other formats. See Convert for details. &&TODO: Update Convert wiki page&&<br />
* Disconnect: This will disconnect the width point item from the Composite type Value Node. That means that there won't be any duck to show and that any of its values can be modified. Maybe it is useful for some types of workflows. To restore its Composite status, choose Convert->Composite.<br />
* Insert/ Remove Item Smart: This will add or remove a width point. If Remove is used in animation mode, it will also set the current width point as OFF instead of effectively removing it from the Width Point List. Opposite for the Insert Item Smart.<br />
* Mark Active Point as ON/OFF: You can set width points off to make it not count for width control while the width point is off. When the width point is half on to off or viceversa, the used width point should be the interpolation between the on and off status. But it doesn't work properly at the moment. On / Off values are not interpolated but fully on or fully off. This has to be corrected.<br />
* Export: See Export.<br />
* Loop: When set as looped, as mentioned before, it allows the width point positions loop around the range [0,1].<br />
* Rotate Order: Doesn't do anything.<br />
* Set Side Before/After to: Interpolate, Rounded, Squared, Peak, Flat. Those are shorcuts to do the same as going directly to the sub-parameter and choosing the appropiate Tip Type. Maybe it should be renamed to "Set Tip Before/After".<br />
* Set Width to default/zero: those actions have been added for two reasons. It is very common to want to set the width of a width point to zero. Despite the possibility of use the User Preference of Restrict Radius to First Quadrant, this way it is accesed quickly from the same usual menu. Also when a width point position duck and a width point width duck are on top of each other (width = 0) it is hard to modify the width or the position without trouble. To solve this the position duck has preference over the width duck in case of coincidence. So access the width duck it is needed to have a quick action to set it to its default value (1.0).</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=Outline_Layer&diff=15436Outline Layer2012-03-21T13:52:33Z<p>Pupazzo: Fix broken links; use current names for tools; fix English.</p>
<hr />
<div><!-- Page info --><br />
{{Title|Outline Layer}}<br />
{{Category|Layers}}<br />
<!-- Page info end --><br />
<br />
{{l|Image:Layer_geometry_outline_icon.png|64px}}<br />
<br />
== About Outline Layers==<br />
<br />
Outline Layers are use to hold strokes or edges of filled shapes. They give a cartoon look to an animation when added to be the edge of the filled shapes. Also standalone Outlines (strokes) are used to define fold of 3D drawings and used together with shadows (created using gradients or feathering) are the basis of an artist's work.<br />
<br />
To create an Outline Layer use the {{l|BLine Tool}} and check ''Create Outline BLine'' in the {{l|Tool Options Panel}}. Once you finish the definition of the geometry of your outline and after pressing the ''Execute'' button (or selecting another tool or state) you create the Outline Layer with the current foreground colour.<br />
<br />
==Parameters of Outline Layers==<br />
<br />
The parameters of the Outline layers are:<br />
<br />
{|border="0" align="left" style="border-collapse" cellpadding="3" cellspacing="0" <br />
|-style="background:#silver"<br />
|'''Name'''||'''Value'''||'''Type''' <br />
|-<br />
||{{l|Image:Type_real_icon.png|16px}} {{l|Z Depth Parameter|Z Depth}}<br />
||0.000000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_real_icon.png|16px}} {{l|Amount Parameter|Amount}}<br />
||1.000000<br />
||real<br />
<br />
|-<br />
||{{l|Image:type_integer_icon.png|16px}} {{l|Blend Method|Blend Method}}<br />
||Composite<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_color_icon.png|16px}} {{l|Colors Dialog|Color}}<br />
||<br />
{| style="width:95%; height:16px; background:black; color:black" border="1"<br />
|- <br />
|}<br />
||color<br />
<br />
|-style="background:#"<br />
||{{l|Image:Type_vector_icon.png|16px}} Origin<br />
||0.000000u,0.000000u<br />
||vector<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_bool_icon.png|16px}} Invert<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||{{l|Image:Type_bool_icon.png|16px}} Antialiasing<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_real_icon.png|16px}} Feather<br />
||0.000000pt<br />
||real<br />
<br />
|-<br />
||{{l|Image:Type_integer_icon.png|16px}} Type of Feather<br />
||Fast Gaussian Blur<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_integer_icon.png|16px}} Winding Style<br />
||Non Zero<br />
||integer<br />
<br />
|-<br />
||{{l|Image:Type_list_icon.png|16px}} Vertices<br />
||List<br />
||list (BLine)<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_real_icon.png|16px}} Outline Width<br />
||2.000000pt<br />
||real<br />
<br />
|-<br />
||{{l|Image:Type_real_icon.png|16px}} Expand<br />
||0.000000pt<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_bool_icon.png|16px}} Sharp Cusps<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||{{l|Image:Type_bool_icon.png|16px}} Rounded Begin<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_bool_icon.png|16px}} Rounded End<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||{{l|Image:Type_real_icon.png|16px}} Loopyness<br />
||1.000000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_bool_icon.png|16px}} Homogeneous<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|}<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Specific parameters for Outline Layers ==<br />
<br />
The first 11 parameters of the Outline are common parameter that are shared for several types of Layers. Click on the links to see their definitions. Only the particular parameters for the Outline Layer are described here.<br />
<br />
This is a sample screen shot of an Outline Layer in action:<br />
<br />
{{l|Image:Outline_Sample.png}}<br />
<br />
=== Outline width ===<br />
<br />
The Outline width parameter is a float value in pixels that represents the basic value of the width for all the points of the curve at the same time. It works together with the width parameter of the vertices' child values. So setting the Outline Width to 1.0px then the resulting value for the rendered width in that vertex comes from this formula: W = OLW * VW + 2E. <br />
<br />
Where: <br />
* W = resulting width of the outline at that vertex.<br />
* OLW = overall parameter for the width of all the vertices (that is the Outline Width parameter).<br />
* VW = specific vertex width value. <br />
* E = value of the Expand parameter.<br />
<br />
The width duck would show the radius value for that vertex (W/2).<br />
<br />
The width that ends up being used for each vertex is ((VertexWidth * OutLineWidth) + Expand*2):<br />
{| <br />
| {{l|Image:Outline-default.png}}<br />
| {{l|Image:Outline-outline-width.png}} <br />
|-<br />
| starting image<br />
| after doubling the value of 'outline width'<br />
|}<br />
<br />
It's possible to specify negative values for the width values, which kind of turns the vertex inside out. Here's an example where the left vertex has a negative width and the right has a positive width. Note how the edges of the bline between the vertices cross each other in the middle:<br />
<br />
{|<br />
| {{l|Image:Outline-negative-width.png}}<br />
| {{l|Image:Outline-negative-width-selected.png}}<br />
|}<br />
<br />
=== Expand ===<br />
<br />
The Expand parameter is similar to the Outline Width parameter, but rather than being multiplied by each vertex's width, it is added to the radius of each vertex. In other words (2*Expand) is added to the diameter of each vertex.<br />
<br />
The width that ends up being used for each vertex is ((VertexWidth * OutLineWidth) + Expand*2):<br />
{| <br />
| {{l|Image:Outline-default.png}}<br />
| {{l|Image:Outline-expand.png}} <br />
|-<br />
| zero 'expand'<br />
| non-zero 'expand'<br />
|}<br />
<br />
=== Sharp cups ===<br />
<br />
Enabling 'sharp cusps' makes the corners pointy when the tangents are split:<br />
{| <br />
| {{l|Image:Outline-default.png}}<br />
| {{l|Image:Outline-sharp-cusps.png}}<br />
|-<br />
| no sharp cusps<br />
| sharp cusps<br />
|}<br />
<br />
=== Rounded Begin ===<br />
<br />
Enabling 'rounded begin' makes the start of the outline rounded:<br />
{| <br />
| {{l|Image:Outline-default.png}}<br />
| {{l|Image:Outline-rounded-begin.png}}<br />
|-<br />
| no rounded begin<br />
| rounded begin<br />
|}<br />
<br />
=== Rounded End ===<br />
<br />
Enabling 'rounded end' makes the end of the outline rounded:<br />
{| <br />
| {{l|Image:Outline-default.png}}<br />
| {{l|Image:Outline-rounded-end.png}}<br />
|-<br />
| no rounded end<br />
| rounded end<br />
|}<br />
<br />
=== Loopyness ===<br />
<br />
This parameter currently does absolutely nothing at all!<br />
<br />
=== Homogeneous ===<br />
<br />
Enabling 'Homogeneous' changes the way that the width of the outline changes from one blinepoint to the next. Each point in the bline has its own width, and the bline has its own 'Outline Width' and 'Expand' parameters which are used to give the final width at each blinepoint. The 'Homogeneous' parameter controls how the width is interpolated between two neighbouring blinepoints:<br />
*When 'Homogeneous' isn't checked, the width is interpolated linearly with the spline's 't' parameter.<br />
*When 'Homogeneous' is checked, the width is interpolated linearly with the spline's length.<br />
<br />
Turning off homogeneous often makes the fat end of a bline look lumpy. Maybe that's a bug:<br />
{| <br />
| {{l|Image:Outline-not-homogeneous.png}}<br />
| {{l|Image:Outline-homogeneous.png}}<br />
|-<br />
| not homogeneous<br />
| homogeneous<br />
|}<br />
<br />
=== Misc ===<br />
<br />
The 'antialias' checkbox isn't specific to the Outline layer, but it is particularly useful for the Outline layer. It makes the edges appear smoother:<br />
{| <br />
| {{l|Image:Outline-no-antialias.png}}<br />
| {{l|Image:Outline-default.png}}<br />
|-<br />
| not antialiased<br />
| antialiased<br />
|}</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=Advanced_Outline_Layer&diff=15435Advanced Outline Layer2012-03-21T12:55:46Z<p>Pupazzo: Add link to demo video by Genete; minor edits.</p>
<hr />
<div><!-- Page info --><br />
{{Title|Advanced Outline Layer}}<br />
{{Category|Layers}}<br />
<!-- Page info end --><br />
Under construction! TODO: add hyperlinks for known words. Add some visual examples. Add dashed outline.<br />
[[Image:Layer_geometry_advanced_outline_icon.png|64px]]<br />
<br />
== Introduction ==<br />
<br />
In the regular [[Outline Layer]] width ducks, defining outline width at particular place, are connected to the vertices, defining the outline shape. That means that user needs to insert new a vertex on the bline every time he wants to change outline width in some place. This behaviour can cause problems when the shape of the outline is very simple but the width varies a lot. Practice shows that most of the time user needs to specify the width independently from the placement of [[BLine]] vertices. That functionality is available in Advanced Outline layer, which handles its width in a different way - the width ducks are freely moved around the bline and define its width at any point.<br />
<br />
== New features ==<br />
<br />
Advanced Outline introduces some new features to the regular outline, as shown in this [http://www.youtube.com/watch?v=boM_ZC9VZ54 Advanced outline demo] video. They are listed with examples below:<br />
<br />
<gallery widths="490px" heights="300px" perrow="2"><br />
File:Variable-width-without-blinepoints.png | No need to place vertex to change the width<br />
File:Lots-of-blinepoints-width-just-two width-controls.png | Width controlled just by two points, while the bline constructed of many vertices<br />
File:Different-types of tips.png | Different types of tips<br />
File: Segments of outlines.png | Segmented outline<br />
File:Different cusps types.png | Three global cusps types<br />
File:Smoothness control.png | Control of smoothness from linear (0.0) to smooth (1.0)<br />
</gallery><br />
<br />
<br />
==Parameters of Advanced Outline Layers==<br />
<br />
The parameters of the Advanced Outline Layers are:<br />
<br />
{|border="0" align="left" style="border-collapse" cellpadding="3" cellspacing="0" <br />
|-style="background:silver"<br />
|'''Name'''||'''Value'''||'''Type''' <br />
|-<br />
||[[Image:Type_real_icon.png|16px]] [[Z Depth Parameter|Z Depth]]<br />
||0.000000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] [[Amount Parameter|Amount]]<br />
||1.000000<br />
||real<br />
<br />
|-<br />
||[[Image:type_integer_icon.png|16px]] [[Blend Method|Blend Method]]<br />
||Composite<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_color_icon.png|16px]] [[Colors Dialog|Color]]<br />
||<br />
{| style="width:95%; height:16px; background:black; color:black" border="1"<br />
|- <br />
|}<br />
||color<br />
<br />
|-style="background:#"<br />
||[[Image:Type_vector_icon.png|16px]] Origin<br />
||0.000000u,0.000000u<br />
||vector<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_bool_icon.png|16px]] Invert<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||[[Image:Type_bool_icon.png|16px]] Antialiasing<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Feather<br />
||0.000000pt<br />
||real<br />
<br />
|-<br />
||[[Image:Type_integer_icon.png|16px]] Tyep of Feather<br />
||Fast Gaussian Blur<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Winding Sytle<br />
||Non Zero<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_list_icon.png|16px]] Vertices<br />
||List<br />
||list (BLine)<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Outline Width<br />
||2.000000pt<br />
||real<br />
<br />
|-<br />
||[[Image:Type_real_icon.png|16px]] Expand<br />
||0.000000pt<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Tip Type at Start<br />
||Rounded Stop<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_integer_icon.png|16px]] Tip Type at End<br />
||Rounded Stop<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Cusps Type<br />
||Sharp<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_real_icon.png|16px]] Smoothness<br />
||0.500000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_list_icon.png|16px]] Width Point List<br />
||List<br />
||list(WPList)<br />
<br />
|}<br />
<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br />
==Specific parameters for Advanced Outline Layer==<br />
Notice that many of the parameters are the same as the regular [[Outline Layer|Outline]], so you can find the explanation of its usage by reading its wiki page. The new parameters are:<br />
* Tip Type at start<br />
* Tip Type at end<br />
* Cusps type<br />
* Smoothness<br />
* Width Point List<br />
<br />
=== Width Point List ===<br />
Each Advanced Outline has a list of parameters that represent the information for each width item. They are called Width Points and consist of four sub-parameters:<br />
<br />
* Position (Real number): represents the position of the width point along the bline. Although it is allowed to be any real number, its meaning is only from 0.0 to 1.0. 0.0 corresponds to the start of the bline (first blinepoint on the bline list) and 1.0 to the last blinepoint. For looped blines 0.0 and 1.0 are equal. The position is represented by the light purple duck that always lies on the bline.<br />
* Width (Real number): It is the width multiplicator of the global Width parameter of the Advanced Outline Layer on the position given by the Position parameter. The final width is calculated multiplying the global Advanced Outline's Width (W) by the Width of the widthpoint (w) and adding the Expand parameter (E). Calculated width = W*w+E<br />
* Tip Side Before/After: Those two sub-parameters controls how the width is interpolated before and after the current widthpoint. The sub-parameter can have four values: <br />
** Interpolate: Between the previous/following width point, the width is calculated by interpolation based on smoothness value.<br />
** Rounded: There is a rounded tip that points to the width point before or after. If the previous/following width point is 'Interpolate' on its posterior/previous side it considers that the width of the widthpoint in question is zero just before/after it. If the previous/posterior width point is other than 'Interpolate' then the segment between those two width points is empty. See examples to understand it fully.<br />
** Squared: Same as Rounded but using square tip.<br />
** Peak: Same as Rounded but using peak tip.<br />
** Flat: Same as Rounded but using flat tip.<br />
<br />
The Width Point list has one internal non-animatable parameter called ''loop''. You can reach it by right clicking the Width Point List parameter. If the Width Point list is unlooped, then any width point that has a Position outisde the range of [0,1] is clamped to (brought within) that range. For example: a Position = 1.35 is clamped to 1.0 then the Width Point List is unlooped. Otherwise, if the Width Point List is looped and a width point has a Position of 1.3, its modulus based on the range [0,1] is used, so it is turned to a position of 0.3.<br />
<br />
=== Smoothness ===<br />
<br />
The Smoothness controls how the width is calculated betwen widthpoints. The width at a position p is a function of the surrounding width points. When smoothness is zero interpolation is lineal, when smoothness is 1.0 interpolation is given by a 5th degree smooth spline.<br />
<br />
=== Cusp types ===<br />
<br />
There are three types of cusps in the Advanced Outline:<br />
<br />
* Sharp<br />
* Rounded<br />
* Bevel<br />
<br />
The type of cusp is controlled for the entire layer so currently it is not possible to control the type of corner individually. Maybe in future versions it will be possible.<br />
<br />
=== Tip type at start / end ===<br />
<br />
As with width points, the end and start of the unlooped Advanced Outlines has a type of tip defined. The user can choose between the same types of tips as for a width point. When the first/last width point has its before/after interpolation type set to Interpolate the start/end of the outline is rendered using the Tip type at start/end parameter.<br />
<br />
Those parameters don't have any effect if the bline is looped or the first/last width point has its before/after interpolation type set to anything but Interpolate. In that case, the segment between the start/end width point and the start/end of the bline is not rendered.<br />
<br />
The types of tips are the same as the width point tip types except that it doesn't offer the Interpolate type because it would not make sense:<br />
* Rounded<br />
* Squared<br />
* Peak<br />
* Flat<br />
<br />
== Working with the Avdanced Outline ==<br />
<br />
=== Creation of the Advanced Outline ===<br />
<br />
You can create Advanced Outlines in the same way that you make normal ones with the BLine Tool (Alt+B), but make sure the Advanced Outline box is ticked in the bline toolbox. Alternatively you can create a default Advanced Outline by clicking in the menu Insert-> Layer->Geometry->Advanced Outline.<br />
<br />
Currently it is not possible to create Advanced Outlined with the Draw Tool. It has been postponed to a future release.<br />
<br />
=== Change the width of the Width Points ===<br />
<br />
Initially the width ducks are hidden. You can make them visible by pressing Alt+5 or cliking on the width toggle button. It is possible to change the width using the Width Tool using the same procedure as for regular outlines. If you want more control over the width you can modify the width ducks with the Transform tool (Alt+A). More fine tunning is possible by expanding the width point sub-parameter and entering a specific value for the Width sub-parameter. In that case negative values are allowed to produce nice effects.<br />
<br />
=== Change the position of the Width Points ===<br />
<br />
When you make the width ducks of the width points visible/invisible, the position ducks also become visible/invisible. (NOTE: this may change in the future). This way, the user has a single way to hide/show the position and width ducks.<br />
<br />
The position ducks of the width points can be modified using the Transform Tool (ALT-A) and clicking and dragging the position duck. You will notice that ducks are tied to the bline so once clicked and dragged they can be placed at any way on the bline. Notice that if you have a width point position duck at position 0.2 and you click and drag at position 0.9 it may happen that you obtain a value of -0.1 because you dragged it in one step and the Width Point List may be looped. If you want to avoid those problems do the movement in small steps to indicate the correct path to follow when calculating the new position.<br />
<br />
=== Adding or removing width points ===<br />
To add a new width point you have to right click on the width point position duck purple duck to get the context menu. Then select "Add Item (smart)" here to create more width points entries. The width points are created this way:<br />
<br />
In the general case, the new widthpoint is created between the width point you click on and the "previous" width point. Depending on the loop status of the bline, the "previous" width point can be the start of the bline (unlooped) or the last widthpoint (looped). The worst case is when there is only one width point on the Width Point List. If you add one new item it will lie over the existing one.<br />
<br />
The newly added width point will have the interpolated width at the position where it is created. <br />
<br />
{{Note|Warning|Be warned that if you remove all the width points you will use the width of the layer as the only one width but you will enter in an unrecoverable status because it will be not possible to add a new width point. This is something that has to be fixed.}}<br />
<br />
=== Specific actions for Width Points ===<br />
<br />
Some needed actions have been added to width points as well as functionality for existing actions for items of the List type parameters. You can reach the list of available actions by right clicking on the width point position or directly on the width point item of the Width Point List. Here are some descriptions of the available actions:<br />
<br />
* Convert: Width Points are composite Value Nodes so its natural format is Composite (you can access its componets). But you can convert it to other formats. See Convert for details. &&TODO: Update Convert wiki page&&<br />
* Disconnect: This will disconnect the width point item from the Composite type Value Node. That means that there won't be any duck to show and that any of its values can be modified. Maybe it is useful for some types of workflows. To restore its Composite status, choose Convert->Composite.<br />
* Insert/ Remove Item Smart: This will add or remove a width point. If Remove is used in animation mode, it will also set the current width point as OFF instead of effectively removing it from the Width Point List. Opposite for the Insert Item Smart.<br />
* Mark Active Point as ON/OFF: You can set width points off to make it not count for width control while the width point is off. When the width point is half on to off or viceversa, the used width point should be the interpolation between the on and off status. But it doesn't work properly at the moment. On / Off values are not interpolated but fully on or fully off. This has to be corrected.<br />
* Export: See Export.<br />
* Loop: When set as looped, as mentioned before, it allows the width point positions loop around the range [0,1].<br />
* Rotate Order: Doesn't do anything.<br />
* Set Side Before/After to: Interpolate, Rounded, Squared, Peak, Flat. Those are shorcuts to do the same as going directly to the sub-parameter and choosing the appropiate Tip Type. Maybe it should be renamed to "Set Tip Before/After".<br />
* Set Width to default/zero: those actions have been added for two reasons. It is very common to want to set the width of a width point to zero. Despite the possibility of use the User Preference of Restrict Radius to First Quadrant, this way it is accesed quickly from the same usual menu. Also when a width point position duck and a width point width duck are on top of each other (width = 0) it is hard to modify the width or the position without trouble. To solve this the position duck has preference over the width duck in case of coincidence. So access the width duck it is needed to have a quick action to set it to its default value (1.0).</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=User:Pupazzo&diff=15434User:Pupazzo2012-03-21T11:36:27Z<p>Pupazzo: </p>
<hr />
<div>Tutorials I wrote:<br />
* {{l|Doc:Looping_Background}}<br />
<br />
Tutorials I would like to write if I have time<br />
<br />
* moving travel path on maps. Refs:<br />
** [http://www.synfig.org/forums/viewtopic.php?f=3&t=2803#p11032 animate a "travel path"]<br />
<br />
* moving / animated text. Write-on (animated drawing).Refs:<br />
** [http://www.synfig.org/forums/viewtopic.php?f=3&t=2901#p11637 animated writing / letter U]<br />
** [http://synfig.org/forums/viewtopic.php?f=10&t=3018 Animated Drawing with Bline on Advanced layer]</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=Doc:Write_On&diff=15433Doc:Write On2012-03-21T11:00:20Z<p>Pupazzo: Add to the 'tutorial' category so users of the wiki will finally find it :-)</p>
<hr />
<div><!-- Page info --><br />
{{Title|Write On}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Intermediate}}<br />
<!-- Page info end --><br />
<br />
This is a tutorial the "Write On" effect. This tutorial was actually written while using synfigstudio-0.63.00.exe (you can download the Windows executable at http://sourceforge.net/projects/synfig/files/binaries/windows-binaries/ ). I am assured by the experts that it will work equally well on the current release -0.63.02.exe. Note, however, some of the Synfig icons have changed since -0.63.00.exe. <br />
<br />
This tutorial may seem lengthy but it is only because I have tried to indicate every little step for the new user. After you have done it once or twice, it really isn’t a long process. <br />
<br />
Open Synfig Studio. First in the tool box, change the interpolation to “Linear”. Mine defaults to “TCB”.<br />
<br />
[[File:Writeon1.jpg]]<br />
<br />
Next, in the bottom of the workspace canvas, make sure the lock icon is set to “Past keyframes locked”. This is accomplished by repeatedly clicking on the icon until the correct setting is achieved.<br />
<br />
[[File:Writeon2.jpg]]<br />
<br />
Next, we want to edit canvas properties. Click the 'caret' menu between the horizontal and vertical rules, in the top left hand corner of the canvas. In Linux, this caret is easily seen; in windows it is microscopic:<br />
<br />
[[File:Writeon3.jpg]]<br />
<br />
<br />
then select "Edit → Properties". A canvas properties dialog will appear. <br />
<br />
[[File:Writeon4.jpg]]<br />
<br />
<br />
Give a name and description for your canvas, then click "Apply" Go to the "Time" tab and make sure to edit "End Time". Change "5s" to whatever number of seconds you want the duration of your animation to be.<br />
If you are going to import a picture to trace, I recommend you change the image size to match that imported drawing. If the drawing is very large, just change the image size to match the proportions of the imported image. Also (in the case of a large image to trace) make sure the that Synfig will automatically scale that image to your canvas size. At the top of the toolbox, ->File ->Setup ->Misc tab-> check box that says “scale to canvas size”. If you are not going to import a picture to trace, don’t worry about any of this.<br />
<br />
Now to start drawing. In the Toolbox, select the Bline tool. [[File:Writeon5.jpg]]<br />
<br />
In the tools options panel, make sure only the “Create Advanced Outline BLine” is checked.<br />
<br />
[[File:Writeon6.jpg]]<br />
<br />
By the way if you are looking a panel that doesn’t seem to be on your screen, go to Toolbox -> File -> Panels.<br />
Now start drawing your shape by clicking your mouse at various intervals on the workspace canvas. When you have finished drawing your line, click on the transform tool [[File:Writeon7.jpg]]in the Toolbox. Note that if you are doing detailed drawing, you can zoom in on your picture or zoom out. Now that you have drawn your first line, you will probably see a bunch of yellow and orange circles. The orange ones are vertex ducks, the yellow circles are tangent ducks, and the turquoise circles are the radius ducks. Use the icons at the top of the drawing canvas to make those ducks disappear. To keep the view simple, we just want to see the purple width ducks.<br />
<br />
[[File:Writeon8.jpg]]<br />
<br />
Now that your first BLine is complete, you will note that you have created a new layer in the Layers panel. If you are going to have several BLines, you will have several layers so I recommend you rename the layers as you go, so you can distinguish it from the other layers later on.<br />
Now we have a bit of work to do in the Params panel before we start animation. Make sure your new layer is highlighted. Next in the Params panel as shown below:<br />
<br />
[[File:Writeon9.jpg]]<br />
<br />
Expand the Width Points List by clicking on the arrow. Do the same for Width points 001 and 002. Your screen should then look like the picture below:<br />
<br />
[[File:WriteOn10.jpg]]<br />
<br />
You will need to make four changes to these parameters as shown below:<br />
<br />
[[File:WriteOn11.jpg]]<br />
<br />
You will note that when we change the position values, we are effectively changing the position of our purple width ducks.<br />
At this point you can also change the Width values in the table about to 2.000 or 3.000 depending how thick you want your line to be.<br />
<br />
Now to animate. Click the green circle at the bottom right of the drawing canvas to switch to the animation mode. The circle will change to a red color.<br />
<br />
[[File:WriteOn12.jpg]] <br />
[[File:WriteOn13.jpg]]<br />
<br />
In the Keyframes panel, click on the + symbol to add the first keyframe. Add the description “Start” as this is time zero.<br />
<br />
[[File:WriteOn14.jpg]]<br />
<br />
<br />
Next, in the timeline at the bottom of the drawing canvas, click in the timeline when you want your first BLine to complete. In the example below, I have selected 1 second, 3 frames.<br />
<br />
[[File:WriteOn15.jpg]]<br />
<br />
You will now be able to add another Keyframe (by clicking on the + symbol) at this point in time.<br />
<br />
[[File:WriteOn_16.jpg]]<br />
<br />
<br />
Now, let us jump back to the first Keyframes by clicking the (JMP) in the first Keyframes line. At this first Keyframe we want to change the position of the width ducks from 0 and 1 (as we set them earlier) to 0 and 0 as shown below:<br />
<br />
[[File:WriteOn17.jpg]] <br />
<br />
Note that when you make a change to the above values you will oftentimes have to re-expand the widthpoints. The red arrow shows the value you changed (from 1 to zero) , the green arrow shows the waypoints you created (this particular shape indicates that you are in the linear interpolation mode), the blue dashed arrow shows the time of the selected ke yframe (which happens to be the start time), and the orange arrow shows the Keyframe where the first Bline will be complete.<br />
<br />
Next, in the Keyframes panel, we want to jump to the second Keyframe. We want to make sure the 002 width duck position is still at 1. In this particular example, it changed back to zero so let us set it again to one. When we do this we see in the Params panel that we have created a second set of waypoints as shown below <br />
<br />
[[File:WriteOn18.jpg]]<br />
<br />
You have probably figured out by now that the 0,0 width duck setting equates to the line not showing and the 0, 1 setting equates to the line being totally visible.<br />
This completes the first BLine.<br />
The process continues by getting out of the animation mode and adding additional BLines. One important additional point: If I add an additional Bline and follow the steps above, I end up with the Params table for the second BLine looking like:<br />
<br />
[[File:WriteOn19.jpg]]<br />
<br />
Instead of having the required 2 sets of waypoints for the second BLine layer, we have 3 sets of waypoint. The first set needs to be removed (right-click the top-left waypoint and click remove).</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=Doc:Write_On&diff=15431Doc:Write On2012-03-21T10:57:41Z<p>Pupazzo: moved Doc talk:Write On to Doc:Write On: I think this tutorial has been put in the talk section by mistake. There were no links pointing to it, so it was not visible by anyone using the wiki or performing a standard search.</p>
<hr />
<div>This is a tutorial the "Write On" effect. This tutorial was actually written while using synfigstudio-0.63.00.exe (you can download the Windows executable at http://sourceforge.net/projects/synfig/files/binaries/windows-binaries/ ). I am assured by the experts that it will work equally well on the current release -0.63.02.exe. Note, however, some of the Synfig icons have changed since -0.63.00.exe. <br />
<br />
This tutorial may seem lengthy but it is only because I have tried to indicate every little step for the new user. After you have done it once or twice, it really isn’t a long process. <br />
<br />
Open Synfig Studio. First in the tool box, change the interpolation to “Linear”. Mine defaults to “TCB”.<br />
<br />
[[File:Writeon1.jpg]]<br />
<br />
Next, in the bottom of the workspace canvas, make sure the lock icon is set to “Past keyframes locked”. This is accomplished by repeatedly clicking on the icon until the correct setting is achieved.<br />
<br />
[[File:Writeon2.jpg]]<br />
<br />
Next, we want to edit canvas properties. Click the 'caret' menu between the horizontal and vertical rules, in the top left hand corner of the canvas. In Linux, this caret is easily seen; in windows it is microscopic:<br />
<br />
[[File:Writeon3.jpg]]<br />
<br />
<br />
then select "Edit → Properties". A canvas properties dialog will appear. <br />
<br />
[[File:Writeon4.jpg]]<br />
<br />
<br />
Give a name and description for your canvas, then click "Apply" Go to the "Time" tab and make sure to edit "End Time". Change "5s" to whatever number of seconds you want the duration of your animation to be.<br />
If you are going to import a picture to trace, I recommend you change the image size to match that imported drawing. If the drawing is very large, just change the image size to match the proportions of the imported image. Also (in the case of a large image to trace) make sure the that Synfig will automatically scale that image to your canvas size. At the top of the toolbox, ->File ->Setup ->Misc tab-> check box that says “scale to canvas size”. If you are not going to import a picture to trace, don’t worry about any of this.<br />
<br />
Now to start drawing. In the Toolbox, select the Bline tool. [[File:Writeon5.jpg]]<br />
<br />
In the tools options panel, make sure only the “Create Advanced Outline BLine” is checked.<br />
<br />
[[File:Writeon6.jpg]]<br />
<br />
By the way if you are looking a panel that doesn’t seem to be on your screen, go to Toolbox -> File -> Panels.<br />
Now start drawing your shape by clicking your mouse at various intervals on the workspace canvas. When you have finished drawing your line, click on the transform tool [[File:Writeon7.jpg]]in the Toolbox. Note that if you are doing detailed drawing, you can zoom in on your picture or zoom out. Now that you have drawn your first line, you will probably see a bunch of yellow and orange circles. The orange ones are vertex ducks, the yellow circles are tangent ducks, and the turquoise circles are the radius ducks. Use the icons at the top of the drawing canvas to make those ducks disappear. To keep the view simple, we just want to see the purple width ducks.<br />
<br />
[[File:Writeon8.jpg]]<br />
<br />
Now that your first BLine is complete, you will note that you have created a new layer in the Layers panel. If you are going to have several BLines, you will have several layers so I recommend you rename the layers as you go, so you can distinguish it from the other layers later on.<br />
Now we have a bit of work to do in the Params panel before we start animation. Make sure your new layer is highlighted. Next in the Params panel as shown below:<br />
<br />
[[File:Writeon9.jpg]]<br />
<br />
Expand the Width Points List by clicking on the arrow. Do the same for Width points 001 and 002. Your screen should then look like the picture below:<br />
<br />
[[File:WriteOn10.jpg]]<br />
<br />
You will need to make four changes to these parameters as shown below:<br />
<br />
[[File:WriteOn11.jpg]]<br />
<br />
You will note that when we change the position values, we are effectively changing the position of our purple width ducks.<br />
At this point you can also change the Width values in the table about to 2.000 or 3.000 depending how thick you want your line to be.<br />
<br />
Now to animate. Click the green circle at the bottom right of the drawing canvas to switch to the animation mode. The circle will change to a red color.<br />
<br />
[[File:WriteOn12.jpg]] <br />
[[File:WriteOn13.jpg]]<br />
<br />
In the Keyframes panel, click on the + symbol to add the first keyframe. Add the description “Start” as this is time zero.<br />
<br />
[[File:WriteOn14.jpg]]<br />
<br />
<br />
Next, in the timeline at the bottom of the drawing canvas, click in the timeline when you want your first BLine to complete. In the example below, I have selected 1 second, 3 frames.<br />
<br />
[[File:WriteOn15.jpg]]<br />
<br />
You will now be able to add another Keyframe (by clicking on the + symbol) at this point in time.<br />
<br />
[[File:WriteOn_16.jpg]]<br />
<br />
<br />
Now, let us jump back to the first Keyframes by clicking the (JMP) in the first Keyframes line. At this first Keyframe we want to change the position of the width ducks from 0 and 1 (as we set them earlier) to 0 and 0 as shown below:<br />
<br />
[[File:WriteOn17.jpg]] <br />
<br />
Note that when you make a change to the above values you will oftentimes have to re-expand the widthpoints. The red arrow shows the value you changed (from 1 to zero) , the green arrow shows the waypoints you created (this particular shape indicates that you are in the linear interpolation mode), the blue dashed arrow shows the time of the selected ke yframe (which happens to be the start time), and the orange arrow shows the Keyframe where the first Bline will be complete.<br />
<br />
Next, in the Keyframes panel, we want to jump to the second Keyframe. We want to make sure the 002 width duck position is still at 1. In this particular example, it changed back to zero so let us set it again to one. When we do this we see in the Params panel that we have created a second set of waypoints as shown below <br />
<br />
[[File:WriteOn18.jpg]]<br />
<br />
You have probably figured out by now that the 0,0 width duck setting equates to the line not showing and the 0, 1 setting equates to the line being totally visible.<br />
This completes the first BLine.<br />
The process continues by getting out of the animation mode and adding additional BLines. One important additional point: If I add an additional Bline and follow the steps above, I end up with the Params table for the second BLine looking like:<br />
<br />
[[File:WriteOn19.jpg]]<br />
<br />
Instead of having the required 2 sets of waypoints for the second BLine layer, we have 3 sets of waypoint. The first set needs to be removed (right-click the top-left waypoint and click remove).</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=Doc_talk:Write_On&diff=15432Doc talk:Write On2012-03-21T10:57:41Z<p>Pupazzo: moved Doc talk:Write On to Doc:Write On: I think this tutorial has been put in the talk section by mistake. There were no links pointing to it, so it was not visible by anyone using the wiki or performing a standard search.</p>
<hr />
<div>#REDIRECT [[Doc:Write On]]</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=User:Pupazzo&diff=15429User:Pupazzo2012-03-21T08:52:00Z<p>Pupazzo: </p>
<hr />
<div>Tutorials I wrote:<br />
* {{l|Doc:Looping_Background}}<br />
<br />
Tutorials I would like to write if I have time<br />
<br />
* moving travel path on maps. Refs:<br />
** http://www.synfig.org/forums/viewtopic.php?f=3&t=2803#p11032<br />
** http://synfig.org/forums/viewtopic.php?f=6&t=1442<br />
** http://synfig.org/forums/viewtopic.php?f=10&t=3018<br />
<br />
* moving / animated text. Ref: http://www.synfig.org/forums/viewtopic.php?f=3&t=2901#p11637</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=User:Pupazzo&diff=15428User:Pupazzo2012-03-21T08:39:14Z<p>Pupazzo: </p>
<hr />
<div>Tutorials I wrote:<br />
* {{l|Doc:Looping_Background}}<br />
<br />
Tutorials I would like to write if I have time<br />
<br />
* moving travel path on maps. Ref: http://www.synfig.org/forums/viewtopic.php?f=3&t=2803#p11032<br />
<br />
* moving / animated text. Ref: http://www.synfig.org/forums/viewtopic.php?f=3&t=2901#p11637</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=User:Pupazzo&diff=15426User:Pupazzo2012-03-20T17:57:29Z<p>Pupazzo: Created page with "Tutorials I would like to write if I have time moving travel path on maps http://www.synfig.org/forums/viewtopic.php?f=3&t=2803#p11032 moving / animated text http://www.synfig...."</p>
<hr />
<div>Tutorials I would like to write if I have time<br />
<br />
moving travel path on maps<br />
http://www.synfig.org/forums/viewtopic.php?f=3&t=2803#p11032<br />
<br />
moving / animated text<br />
http://www.synfig.org/forums/viewtopic.php?f=3&t=2901#p11637</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=Doc:Looping_Background&diff=15425Doc:Looping Background2012-03-20T17:18:01Z<p>Pupazzo: Finished! Yahi!</p>
<hr />
<div><!-- Page info --><br />
{{Title|Looping Background}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Intermediate}}<br />
<!-- Page info end --><br />
<br />
== Introduction ==<br />
<br />
A looping background is a moving background that simulates camera panning, and that seamlessly repeats itself. It is a standard animation technique.<br />
<br />
There are multiple ways to do looping backgrounds in Synfig. The one presented here is simple, minimizes manual work and repetition, and doesn't need {{l|Keyframe|keyframes}}.<br />
<br />
We will be using two files: one for the background and one for the animation.<br />
<br />
Say that the animation size will be WA = 640 pixels, HA = 480 pixels.<br />
<br />
== The background image ==<br />
<br />
The background can be a [http://en.wikipedia.org/wiki/Raster_graphics bitmap] or a [http://en.wikipedia.org/wiki/Vector_graphics vector graphics]. In order to be usable as a looping background, the requirements are the same. Imagine duplicating the image and putting the duplicate next to the original in an horizontal line: the left edge must seamlessly blend with the right edge.<br />
<br />
This tutorial uses a vector graphics background, but the same workflow can be applied for bitmap images.<br />
<br />
If you already have a background, skip to section ''The animation''.<br />
<br />
=== Create background ===<br />
<br />
Since we are creating the background and the animation from scratch, the easiest way is to use the same ''scale'' for the two synfig files. <br />
<br />
In Synfig Studio, create a new canvas with <tt>File | New</tt>. Its height should be the same as the animation (HB = HA = 480), while its width should be bigger than the animation (no need to be a multiple). Say WB = 1200. To be sure to keep the correct background size when importing it into the animation, proceed as follows: <br />
<br />
Open the {{l|Canvas_Properties_Dialog}} (<tt>Caret | Edit | Properties</tt>). In the ''Other'' tab, check pixel width, pixel height, image aspect, pixel aspect. Uncheck the other items. In the ''Image'' tab, finally put the size: Width = WB = 1200, Height = HB = 480. All the other values should be automatically updated.<br />
<br />
In the ''Time'' tab, set Start time and End time to 0. This tells synfig that the canvas is a still image and the interface becomes simpler.<br />
<br />
Now draw the background :-). This is the one we will be using for the tutorial:<br />
<br />
[[File:Loop-bg-1.png]]<br />
<br />
It is made of two bline regions. To tile seamlessly, the Y coordinates of the left control points A, B, C must match with the Y coordinates of the right control points A', B', C'. In addition, the tangents should make the lines as smooth as necessary to adapt to the overall image stile.<br />
<br />
If you look at the sample sif file, you will see that the Y coordinates of A, A' and C, C' are hardcoded to match. The same could be done for B, B', but just to show another, more flexible way, the Y coordinate of B is exported and reused by the Y coordinate of B'. This means that if you move with the mouse point B, point B' will move too, and vice versa :-)<br />
<br />
Save the file. We use the name <tt>mountain-bg.sifz</tt>.<br />
<br />
== The animation ==<br />
<br />
Create a new canvas for the animation. As mentioned previously, in this tutorial we will use WA = 640, HA = 480. See section ''Create background'' for a safe way to set the dimensions of a canvas. In the ''Time'' tab of the canvas properties, set <tt>Start time = 0f</tt>, <tt>End Time = 30s</tt>.<br />
<br />
Import the background (<tt>Caret | File | Import</tt>), name it <tt>[bg 1]</tt>. Duplicate it (<tt>Layers palette | right click on background layer | duplicate</tt>), name it <tt>[bg 2]</tt>.<br />
<br />
Move the Origin of layer <tt>[bg 2]</tt> WB pixels in the same direction of the simulated camera panning. So if the camera pans towards the right, in our tutorial example the coordinates of <tt>[bg 2]</tt> Origin would be X = WB = 1200, Y = 0.<br />
<br />
Add on top a Zoom layer with <tt>Amount = -1.5</tt>. When rendering, this layer must be disabled, but it is very useful to see the two background layers at once and validate what one is doing.<br />
<br />
[[File:Loop-bg-2.png]]<br />
<br />
In the above screenshot, you can see the <tt>[bg 2]</tt> layer selected in the layers panel, its bounding box in the main window and, in the Params panel, the coordinates on the Origin (X = 1200, Y = 0). The zoom layer is enabled.<br />
<br />
Add a Translate layer just above the two background layers. Keep it selected. We now need to add two waypoints, on at the beginning of the loop and one at the end. Turn on animate editing mode. The loop will last T = 10 seconds. Move the animation time to 10s. Set the X coordinate of Origin to the opposite of <tt>[bg 2]</tt>, in this case <tt>X = -1200 px</tt>. This will add a waypoint at time 10s.<br />
<br />
Set the in/out interpolation of the waypoint to linear (<tt>right-click the waypoint | Both | Linear</tt>).<br />
<br />
Move the animation time to 0s. Set the X coordinate of Origin to 0. This will create another waypoint. Set its in/out interpolation to linear.<br />
<br />
Turn off Animate editing mode.<br />
<br />
[[File:Loop-bg-3.png]]<br />
<br />
In the above screenshot, in the layers palette there is the added Translate layer. In the timeline there are the two waypoints, one at 0s and one at 10s, with the icons that represent linear interpolation. The time is now 5s, shown by the small blue vertical line. The X value of Origin is -600, and matches the fact that the value goes from 0 to -1200, that the interpolation is linear, and that 5s is exactly half loop time.<br />
<br />
If you play the animation, the background will move for 10 seconds and then stop. We will now add a Time Loop layer to have the flexibility to ''automatically'' adapt to any total animation duration, as we will see later.<br />
<br />
Add a Time Loop layer over the Translate layer (<tt>right-click translate layer | New Layer | Other | Time Loop</tt>). Set the Duration to the same duration of the loop, in this case Duration = 10s.<br />
<br />
That's it! Click play and enjoy the moving background for the same duration of the animation, in this case 30 seconds!<br />
<br />
Thanks to the looping background, if you change the duration of the canvas animation (<tt>Caret | Edit | Properties</tt>) in the ''Time'' tab, the background animation will adapt automatically.<br />
<br />
== Sample files ==<br />
<br />
[[File:Mountain-bg.sifz]]<br />
[[File:Mountain-looping-tut.sifz]]<br />
<br />
== Credits ==<br />
<br />
Based on posts and sample sif files by [http://www.synfig.org/forums/viewtopic.php?t=2267 Genete] and [http://synfig.org/forums/viewtopic.php?t=257 others] in the Synfig forum, check them out.</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=File:Mountain-looping-tut.sifz&diff=15424File:Mountain-looping-tut.sifz2012-03-20T17:15:33Z<p>Pupazzo: Animation for the looping background tutorial</p>
<hr />
<div>Animation for the looping background tutorial</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=File:Mountain-bg.sifz&diff=15423File:Mountain-bg.sifz2012-03-20T17:12:50Z<p>Pupazzo: Background for the looping background tutorial</p>
<hr />
<div>Background for the looping background tutorial</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=File:Loop-bg-3.png&diff=15422File:Loop-bg-3.png2012-03-20T16:50:35Z<p>Pupazzo: Looping background example, intermediate step</p>
<hr />
<div>Looping background example, intermediate step</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=Doc:Looping_Background&diff=15421Doc:Looping Background2012-03-20T16:46:54Z<p>Pupazzo: snapshot</p>
<hr />
<div><!-- Page info --><br />
{{Title|Looping Background}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Intermediate}}<br />
<!-- Page info end --><br />
<br />
== Introduction ==<br />
<br />
A looping background is a moving background that simulates camera panning, and that seamlessly repeats itself. It is a standard animation technique.<br />
<br />
There are multiple ways to do looping backgrounds in Synfig. The one presented here is simple, minimizes manual work and repetition, and doesn't need {{l|Keyframe|keyframes}}.<br />
<br />
We will be using two files: one for the background and one for the animation.<br />
<br />
Say that the animation size will be WA = 640 pixels, HA = 480 pixels.<br />
<br />
== The background image ==<br />
<br />
The background can be a [http://en.wikipedia.org/wiki/Raster_graphics bitmap] or a [http://en.wikipedia.org/wiki/Vector_graphics vector graphics]. In order to be usable as a looping background, the requirements are the same. Imagine duplicating the image and putting the duplicate next to the original in an horizontal line: the left edge must seamlessly blend with the right edge.<br />
<br />
This tutorial uses a vector graphics background, but the same workflow can be applied for bitmap images.<br />
<br />
If you already have a background, skip to section ''The animation''.<br />
<br />
=== Create background ===<br />
<br />
Since we are creating the background and the animation from scratch, the easiest way is to use the same ''scale'' for the two synfig files. <br />
<br />
In Synfig Studio, create a new canvas with <tt>File | New</tt>. Its height should be the same as the animation (HB = HA = 480), while its width should be bigger than the animation (no need to be a multiple). Say WB = 1200. To be sure to keep the correct background size when importing it into the animation, proceed as follows: <br />
<br />
Open the {{l|Canvas_Properties_Dialog}} (<tt>Caret | Edit | Properties</tt>). In the ''Other'' tab, check pixel width, pixel height, image aspect, pixel aspect. Uncheck the other items. In the ''Image'' tab, finally put the size: Width = WB = 1200, Height = HB = 480. All the other values should be automatically updated.<br />
<br />
In the ''Time'' tab, set Start time and End time to 0. This tells synfig that the canvas is a still image and the interface becomes simpler.<br />
<br />
Now draw the background :-). This is the one we will be using for the tutorial:<br />
<br />
[[File:Loop-bg-1.png]]<br />
<br />
It is made of two bline regions. To tile seamlessly, the Y coordinates of the left control points A, B, C must match with the Y coordinates of the right control points A', B', C'. In addition, the tangents should make the lines as smooth as necessary to adapt to the overall image stile.<br />
<br />
If you look at the sample sif file, you will see that the Y coordinates of A, A' and C, C' are hardcoded to match. The same could be done for B, B', but just to show another, more flexible way, the Y coordinate of B is exported and reused by the Y coordinate of B'. This means that if you move with the mouse point B, point B' will move too, and vice versa :-)<br />
<br />
Save the file. We use the name <tt>mountain-bg.sifz</tt>.<br />
<br />
== The animation ==<br />
<br />
Create a new canvas for the animation. As mentioned previously, in this tutorial we will use WA = 640, HA = 480. See section ''Create background'' for a safe way to set the dimensions of a canvas. In the ''Time'' tab of the canvas properties, set <tt>Start time = 0f</tt>, <tt>End Time = 30s</tt>.<br />
<br />
Import the background (<tt>Caret | File | Import</tt>), name it <tt>[bg 1]</tt>. Duplicate it (<tt>Layers palette | right click on background layer | duplicate</tt>), name it <tt>[bg 2]</tt>.<br />
<br />
Move the Origin of layer <tt>[bg 2]</tt> WB pixels in the same direction of the simulated camera panning. So if the camera pans towards the right, in our tutorial example the coordinates of <tt>[bg 2]</tt> Origin would be X = WB = 1200, Y = 0.<br />
<br />
Add on top a Zoom layer with <tt>Amount = -1.5</tt>. When rendering, this layer must be disabled, but it is very useful to see the two background layers at once and validate what one is doing.<br />
<br />
[[File:Loop-bg-2.png]]<br />
<br />
In the screenshot, you can see the <tt>[bg 2]</tt> layer selected in the layers panel, its bounding box in the main window and, in the Params panel, the coordinates on the Origin (X = 1200, Y = 0). The zoom layer is enabled.<br />
<br />
Add a Translate layer just above the two background layers. Keep it selected. We now need to add two waypoints, on at the beginning of the loop and one at the end. Turn on animate editing mode. The loop will last T = 10 seconds. Move the animation time to 10s. Set the X coordinate of Origin to the opposite of <tt>[bg 2]</tt>, in this case <tt>X = -1200 px</tt>. This will add a waypoint at time 10s.<br />
<br />
Set the in/out interpolation of the waypoint to linear (<tt>right-click the waypoint | Both | Linear</tt>).<br />
<br />
Move the animation time to 0s. Set the X coordinate of Origin to 0. This will create another waypoint. Set its in/out interpolation to linear.<br />
<br />
Turn off Animate editing mode.<br />
<br />
If you play the animation, the background will move for 10 seconds and then stop. We will now add a <br />
<br />
TO BE FINISHED<br />
<br />
== Workflow overview ==<br />
<br />
# Add translation layer.<br />
## Record mode. Move translation layer opposite direction of loop, L pixels. Two waypoints, one at time 0, one at time T. Exit from record mode.<br />
# Add Timed Loop layer. Set duration to T.<br />
# Enjoy!<br />
<br />
== Examples ==<br />
<br />
== Credits ==<br />
<br />
Based on posts by [http://www.synfig.org/forums/viewtopic.php?t=2267 Genete] and [http://synfig.org/forums/viewtopic.php?t=257 others] in the Synfig forum.</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=File:Loop-bg-2.png&diff=15420File:Loop-bg-2.png2012-03-20T16:05:11Z<p>Pupazzo: Looping background example, intermediate step</p>
<hr />
<div>Looping background example, intermediate step</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=Doc:Looping_Background&diff=15419Doc:Looping Background2012-03-20T13:51:49Z<p>Pupazzo: </p>
<hr />
<div><!-- Page info --><br />
{{Title|Looping Background}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Intermediate}}<br />
<!-- Page info end --><br />
<br />
== Introduction ==<br />
<br />
A looping background is a moving background that simulates camera panning, and that seamlessly repeats itself. It is a standard animation technique.<br />
<br />
There are multiple ways to do looping backgrounds in Synfig. The one presented here is simple, minimizes manual work and repetition, and doesn't need {{l|Keyframe|keyframes}}.<br />
<br />
We will be using two files: one for the background and one for the animation.<br />
<br />
Say that the animation size will be WA = 640 pixels, HA = 480 pixels.<br />
<br />
== The background image ==<br />
<br />
The background can be a [http://en.wikipedia.org/wiki/Raster_graphics bitmap] or a [http://en.wikipedia.org/wiki/Vector_graphics vector graphics]. In order to be usable as a looping background, the requirements are the same. Imagine duplicating the image and putting the duplicate next to the original in an horizontal line: the left edge must seamlessly blend with the right edge.<br />
<br />
This tutorial uses a vector graphics background, but the same workflow can be applied for bitmap images.<br />
<br />
If you already have a background, skip to section ''The animation''.<br />
<br />
=== Create background ===<br />
<br />
Since we are creating the background and the animation from scratch, the easiest way is to use the same ''scale'' for the two synfig files. <br />
<br />
In Synfig Studio, create a new canvas with <tt>File | New</tt>. Its height should be the same as the animation (HB = HA = 480), while its width should be bigger than the animation (no need to be a multiple). Say WB = 1200. To be sure to keep the correct background size when importing it into the animation, proceed as follows: <br />
<br />
Open the {{l|Canvas_Properties_Dialog}} (<tt>Caret | Edit | Properties</tt>). In the ''Other'' tab, check pixel width, pixel height, image aspect, pixel aspect. Uncheck the other items. In the ''Image'' tab, finally put the size: Width = WB = 1200, Height = HB = 480. All the other values should be automatically updated.<br />
<br />
In the ''Time'' tab, set Start time and End time to 0. This tells synfig that the canvas is a still image and the interface becomes simpler.<br />
<br />
Now draw the background :-). This is the one we will be using for the tutorial:<br />
<br />
[[File:Loop-bg-1.png]]<br />
<br />
It is made of two bline regions. To tile seamlessly, the Y coordinates of the left control points A, B, C must match with the Y coordinates of the right control points A', B', C'. In addition, the tangents should make the lines as smooth as necessary to adapt to the overall image stile.<br />
<br />
If you look at the sample sif file, you will see that the Y coordinates of A, A' and C, C' are hardcoded to match. The same could be done for B, B', but just to show another, more flexible way, the Y coordinate of B is exported and reused by the Y coordinate of B'. This means that if you move with the mouse point B, point B' will move too, and vice versa :-)<br />
<br />
Save the file. We use the name 'mountain-bg'.<br />
<br />
== The animation ==<br />
<br />
Create a new canvas for the animation. As mentioned previously, in this tutorial we will use WA = 640, HA = 480. See section ''Create background'' for a safe way to set the dimensions of a canvas.<br />
<br />
Import the background (<tt>Caret | File | Import</tt>). Duplicate it (<tt>Layers palette | right click on background layer | duplicate</tt>).<br />
<br />
Move the Origin of the duplicated layer WB pixels in the same direction of the simulated camera panning. So if the camera pans towards the right, in our tutorial example the coordinates of the Origin of the duplicated background would be X = WB = 1200, Y = 0.<br />
<br />
Add a Zoom layer with Amount = -1.5. When rendering, this layer must be disabled, but it is very useful to see the two background layers at once and validate what one is doing.<br />
<br />
<br />
<br />
TO BE FINISHED<br />
<br />
== Workflow overview ==<br />
<br />
# Add translation layer.<br />
## Record mode. Move translation layer opposite direction of loop, L pixels. Two waypoints, one at time 0, one at time T. Exit from record mode.<br />
# Add Timed Loop layer. Set duration to T.<br />
# Enjoy!<br />
<br />
== Examples ==<br />
<br />
== Credits ==<br />
<br />
Based on posts by [http://www.synfig.org/forums/viewtopic.php?t=2267 Genete] and [http://synfig.org/forums/viewtopic.php?t=257 others] in the Synfig forum.</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=Doc:Looping_Background&diff=15418Doc:Looping Background2012-03-20T10:47:10Z<p>Pupazzo: snapshot</p>
<hr />
<div><!-- Page info --><br />
{{Title|Looping Background}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Intermediate}}<br />
<!-- Page info end --><br />
<br />
== Introduction ==<br />
<br />
A looping background is a moving background that simulates camera panning, and that seamlessly repeats itself. It is a standard animation technique.<br />
<br />
There are multiple ways to do looping backgrounds in Synfig. The one presented here is simple, minimizes manual work and repetition, and doesn't use {{l|Keyframe|keyframes}}.<br />
<br />
We will be using two files: one for the background and one for the animation.<br />
<br />
Say that the animation size will be WA = 640 pixels, HA = 480 pixels.<br />
<br />
== The background image ==<br />
<br />
The background can be a [http://en.wikipedia.org/wiki/Raster_graphics bitmap] or a [http://en.wikipedia.org/wiki/Vector_graphics vector graphics]. In order to be usable as a looping background, the requirements are the same. Imagine duplicating the image and putting the duplicate next to the original in an horizontal line: the left edge must seamlessly blend with the right edge.<br />
<br />
This tutorial uses a vector graphics background, but the same workflow can be applied for bitmap images.<br />
<br />
If you already have a background, skip to the ''The animation'' section.<br />
<br />
=== Create background ===<br />
<br />
Since we are creating the background and the animation from scratch, the easiest way is to use the same ''scale'' for the two synfig files. <br />
<br />
In Synfig Studio, create a new canvas with <tt>File | New</tt>. Its height should be the same as the animation (HB = HA = 480), while its width should be bigger than the animation (no need to be a multiple). Say WB = 1200. To be sure to keep the correct background size when importing it into the animation, proceed as follows: <br />
<br />
Open the {{l|Canvas_Properties_Dialog}} (<tt>Caret | Edit | Properties</tt>). In the ''Other'' tab, check pixel width, pixel height, image aspect, pixel aspect. Uncheck the other items. In the ''Image'' tab, finally put the size: Width = WB = 1200, Height = HB = 480. All the other values should be automatically updated.<br />
<br />
In the ''Time'' tab, set Start time and End time to 0. This tells synfig that the canvas is a still image and the interface becomes simpler.<br />
<br />
Now draw the background :-). This is the one we will be using for the tutorial:<br />
<br />
[[File:Loop-bg-1.png]]<br />
<br />
It is made of two bline regions. To tile seamlessly, the Y coordinates of the left control points A, B, C must match with the Y coordinates of the right control points A', B', C'. In addition, the tangents should make the lines as smooth as necessary to adapt to the overall image stile.<br />
<br />
If you look at the sample sif file, you will see that the Y coordinates of A, A' and C, C' are hardcoded to match. The same could be done for B, B', but just to show another, more flexible way, the Y coordinate of B is exported and reused by the Y coordinate of B'. This means that if you move with the mouse point B, point B' will move too, and vice versa :-)<br />
<br />
Save the file. We use the name 'mountain-bg'.<br />
<br />
== The animation ==<br />
<br />
writeme :-)<br />
<br />
== Workflow overview ==<br />
<br />
<br />
# Prepare or gather background.<br />
## Mention trick to keep same size when importing a sif file.<br />
## Mention trick to keep the two ends the same (exported, decomposed vector).<br />
# Import background.<br />
# Genete's trick of the Zoom layer.<br />
# Duplicate encapsulated background. Say bounding box width is L pixels.<br />
# Move center of the duplicate L pixels towards the direction of the loop.<br />
# Add translation layer.<br />
## Record mode. Move translation layer opposite direction of loop, L pixels. Two waypoints, one at time 0, one at time T. Exit from record mode.<br />
# Add Timed Loop layer. Set duration to T.<br />
# Enjoy!<br />
<br />
== Examples ==<br />
<br />
== Credits ==<br />
<br />
Based on posts by [http://www.synfig.org/forums/viewtopic.php?t=2267 Genete] and [http://synfig.org/forums/viewtopic.php?t=257 others] in the Synfig forum.</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=Doc:Looping_Background&diff=15417Doc:Looping Background2012-03-20T10:37:36Z<p>Pupazzo: /* Create background */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Looping Background}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Intermediate}}<br />
<!-- Page info end --><br />
<br />
{{Note|Work in progress|}} <br />
<br />
== Introduction ==<br />
<br />
A looping background is a moving background that simulates camera panning, and that seamlessly repeats itself. It is a standard animation technique.<br />
<br />
There are multiple ways to do looping backgrounds in Synfig. The one presented here is simple, minimizes manual work and repetition, and doesn't use {{l|Keyframe|keyframes}}.<br />
<br />
We will be using two files: one for the background and one for the animation.<br />
<br />
Say that the animation size will be WA = 640 pixels, HA = 480 pixels.<br />
<br />
== The background image ==<br />
<br />
The background can be a [http://en.wikipedia.org/wiki/Raster_graphics bitmap] or a [http://en.wikipedia.org/wiki/Vector_graphics vector graphics]. In order to be usable as a looping background, the requirements are the same. Imagine duplicating the image and putting the duplicate next to the original in an horizontal line: the left edge must seamlessly blend with the right edge.<br />
<br />
This tutorial uses a vector graphics background, but the same workflow can be applied for bitmap images.<br />
<br />
If you already have a background, skip to the next section.<br />
<br />
=== Create background ===<br />
<br />
Since we are creating the background and the animation from scratch, the easiest way is to use the same ''scale'' for the two synfig files. <br />
<br />
In Synfig Studio, create a new canvas with <tt>File | New</tt>. Its height should be the same as the animation (HB = HA = 480), while its width should be bigger than the animation (no need to be a multiple). Say WB = 1200. To be sure to keep the correct background size when importing it into the animation, proceed as follows: <br />
<br />
Open the {{l|Canvas_Properties_Dialog}} (<tt>Caret | Edit | Properties</tt>). In the ''Other'' tab, check pixel width, pixel height, image aspect, pixel aspect. Uncheck the other items. In the ''Image'' tab, finally put the size: Width = WB = 1200, Height = HB = 480. All the other values should be automatically updated.<br />
<br />
Now draw the background :-). This is the one we will be using for the tutorial:<br />
<br />
[[File:Loop-bg-1.png]]<br />
<br />
It is made of two bline regions. To tile seamlessly, the Y coordinates of the left control points A, B, C must match with the Y coordinates of the right control points A', B', C'. In addition, the tangents should make the lines as smooth as necessary to adapt to the overall image stile.<br />
<br />
If you look at the sample sif file, you will see that the Y coordinates of A, A' and C, C' are hardcoded to match. The same could be done for B, B', but just to show another, more flexible way, the Y coordinate of B is exported and reused by the Y coordinate of B'. This means that if you move with the mouse point B, point B' will move too, and vice versa :-)<br />
<br />
== Workflow overview ==<br />
<br />
<br />
# Prepare or gather background.<br />
## Mention trick to keep same size when importing a sif file.<br />
## Mention trick to keep the two ends the same (exported, decomposed vector).<br />
# Import background.<br />
# Genete's trick of the Zoom layer.<br />
# Duplicate encapsulated background. Say bounding box width is L pixels.<br />
# Move center of the duplicate L pixels towards the direction of the loop.<br />
# Add translation layer.<br />
## Record mode. Move translation layer opposite direction of loop, L pixels. Two waypoints, one at time 0, one at time T. Exit from record mode.<br />
# Add Timed Loop layer. Set duration to T.<br />
# Enjoy!<br />
<br />
== Examples ==<br />
<br />
== Credits ==<br />
<br />
Based on posts by [http://www.synfig.org/forums/viewtopic.php?t=2267 Genete] and [http://synfig.org/forums/viewtopic.php?t=257 others] in the Synfig forum.</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=File:Loop-bg-1.png&diff=15416File:Loop-bg-1.png2012-03-20T10:23:20Z<p>Pupazzo: Looping background example</p>
<hr />
<div>Looping background example</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=Doc:Looping_Background&diff=15415Doc:Looping Background2012-03-20T09:54:29Z<p>Pupazzo: snapshot</p>
<hr />
<div><!-- Page info --><br />
{{Title|Looping Background}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Intermediate}}<br />
<!-- Page info end --><br />
<br />
{{Note|Work in progress|}} <br />
<br />
== Introduction ==<br />
<br />
A looping background is a moving background that simulates camera panning, and that seamlessly repeats itself. It is a standard animation technique.<br />
<br />
There are multiple ways to do looping backgrounds in Synfig. The one presented here is simple, minimizes manual work and repetition, and doesn't use {{l|Keyframe|keyframes}}.<br />
<br />
We will be using two files: one for the background and one for the animation.<br />
<br />
Say that the animation size will be WA = 640 pixels, HA = 480 pixels.<br />
<br />
== The background image ==<br />
<br />
The background can be a [http://en.wikipedia.org/wiki/Raster_graphics bitmap] or a [http://en.wikipedia.org/wiki/Vector_graphics vector graphics]. In order to be usable as a looping background, the requirements are the same. Imagine duplicating the image and putting the duplicate next to the original in an horizontal line: the left edge must seamlessly blend with the right edge.<br />
<br />
This tutorial uses a vector graphics background, but the same workflow can be applied for bitmap images.<br />
<br />
If you already have a background, skip to the next section.<br />
<br />
=== Create background ===<br />
<br />
Since we are creating the background and the animation from scratch, the easiest way is to use the same ''scale'' for the two synfig files. <br />
<br />
In Synfig Studio, create a new canvas with <tt>File | New</tt>. Its height should be the same as the animation (HB = HA = 480), while its width should be bigger than the animation (no need to be a multiple). Say WB = 1200. To be sure to keep the correct background size when importing it into the animation, proceed as follows: <br />
<br />
Open the {{l|Canvas_Properties_Dialog}} (<tt>Caret | Edit | Properties</tt>). In the ''Other'' tab, check pixel width, pixel heigth, image aspect, pixel aspect. Uncheck the other items. In the ''Image'' tab, finally put the size: Width = WB = 1200, Height = HB = 480. All the other values should be automatically updated.<br />
<br />
Now draw the background :-). This is the one we will be using for the tutorial:<br />
<br />
<br />
<br />
== Workflow overview ==<br />
<br />
<br />
# Prepare or gather background.<br />
## Mention trick to keep same size when importing a sif file.<br />
## Mention trick to keep the two ends the same (exported, decomposed vector).<br />
# Import background.<br />
# Genete's trick of the Zoom layer.<br />
# Duplicate encapsulated background. Say bounding box width is L pixels.<br />
# Move center of the duplicate L pixels towards the direction of the loop.<br />
# Add translation layer.<br />
## Record mode. Move translation layer opposite direction of loop, L pixels. Two waypoints, one at time 0, one at time T. Exit from record mode.<br />
# Add Timed Loop layer. Set duration to T.<br />
# Enjoy!<br />
<br />
== Examples ==<br />
<br />
== Credits ==<br />
<br />
Based on posts by [http://www.synfig.org/forums/viewtopic.php?t=2267 Genete] and [http://synfig.org/forums/viewtopic.php?t=257 others] in the Synfig forum.</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=Doc:Looping_Background&diff=15414Doc:Looping Background2012-03-20T09:18:40Z<p>Pupazzo: snapshot</p>
<hr />
<div><!-- Page info --><br />
{{Title|Looping Background}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Intermediate}}<br />
<!-- Page info end --><br />
<br />
{{Note|Work in progress|}} <br />
<br />
== Introduction ==<br />
<br />
A looping background is a moving background that simulates camera panning, and that seamlessly repeats itself. It is a standard animation technique.<br />
<br />
There are multiple ways to do looping backgrounds in Synfig. The one presented here is simple, minimizes manual work and repetition, and doesn't use {{l|Keyframe|keyframes}}.<br />
<br />
== Background image ==<br />
<br />
The background can be a [http://en.wikipedia.org/wiki/Raster_graphics bitmap] or a [http://en.wikipedia.org/wiki/Vector_graphics vector graphics]. In order to be usable as a looping background, the requirements are the same. Imagine duplicating the image and putting the duplicate next to the original in an horizontal line: the left edge must seamlessly blend with the right edge.<br />
<br />
This tutorial uses a vector graphics background, but the same workflow can be applied for bitmap images.<br />
<br />
If you already have a background, skip to the next section.<br />
<br />
=== Create background ===<br />
<br />
In Synfig Studio, create a new canvas with File | New. <br />
<br />
== Workflow overview ==<br />
<br />
<br />
# Prepare or gather background.<br />
## Mention trick to keep same size when importing a sif file.<br />
## Mention trick to keep the two ends the same (exported, decomposed vector).<br />
# Import background.<br />
# Genete's trick of the Zoom layer.<br />
# Duplicate encapsulated background. Say bounding box width is L pixels.<br />
# Move center of the duplicate L pixels towards the direction of the loop.<br />
# Add translation layer.<br />
## Record mode. Move translation layer opposite direction of loop, L pixels. Two waypoints, one at time 0, one at time T. Exit from record mode.<br />
# Add Timed Loop layer. Set duration to T.<br />
# Enjoy!<br />
<br />
== Examples ==<br />
<br />
== Credits ==<br />
<br />
Based on posts by [http://www.synfig.org/forums/viewtopic.php?t=2267 Genete] and [http://synfig.org/forums/viewtopic.php?t=257 others] in the Synfig forum.</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=Doc:Looping_Background&diff=15413Doc:Looping Background2012-03-19T21:06:43Z<p>Pupazzo: Outline of the tutorial</p>
<hr />
<div><!-- Page info --><br />
{{Title|Looping Background}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Intermediate}}<br />
<!-- Page info end --><br />
<br />
{{Note|Work in progress|}} <br />
<br />
== Workflow overview ==<br />
<br />
There are multiple ways to do looping backgrounds in Synfig. The one presented here is simple and clean, no need for keyframes.<br />
<br />
# Prepare or gather background.<br />
## Mention trick to keep same size when importing a sif file.<br />
## Mention trick to keep the two ends the same (exported, decomposed vector).<br />
# Import background.<br />
# Genete's trick of the Zoom layer.<br />
# Duplicate encapsulated background. Say bounding box width is L pixels.<br />
# Move center of the duplicate L pixels towards the direction of the loop.<br />
# Add translation layer.<br />
## Record mode. Move translation layer opposite direction of loop, L pixels. Two waypoints, one at time 0, one at time T. Exit from record mode.<br />
# Add Timed Loop layer. Set duration to T.<br />
# Enjoy!<br />
<br />
== Examples ==<br />
<br />
== Credits ==<br />
<br />
Based on posts by [http://www.synfig.org/forums/viewtopic.php?t=2267 Genete] and [http://synfig.org/forums/viewtopic.php?t=257 others] in the Synfig forum.</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=Image_Dimensions&diff=15412Image Dimensions2012-03-19T15:18:49Z<p>Pupazzo: Add link to a post on synfig-dev</p>
<hr />
<div><div style="background-color:#DDFFDD; border:thin solid green; padding:1em"><br />
'''Disclaimer:''' This page's content is not official and not guaranteed to be free of mistakes. At the moment, it's even only a sum of personal thoughts to cast a bit of light onto synfig's image dimensions handling.</div><br />
<br />
==Describing the fields of the Canvas Properties Dialog==<br />
The user access the image dimensions in the {{l|Canvas Properties Dialog}}.<br />
===The ''Other'' tab===<br />
[[File:Canvas-properties-other.png]]<br />
<br />
Here some properties can simply be locked (such that they can't be changed) and linked (so that changes in one entry simultaneously change other entries as well).<br />
<br />
===The ''Image'' tab===<br />
<br />
[[File:Canvas-properties-image.png]]<br />
<br />
Obviously here the image dimensions can be set. There seem to be basically three groups of fields to edit:<br />
<br />
;The on-screen size(?): The fields ''Width'' and ''Height'' tell synfigstudio how many pixels the image shall cover at a zoom level of 100%.<br />
<br />
;The physical size: The physical width and height should tell how big the image is on some physical media. That could be when printing out images on paper, or maybe even on transparencies or film. Not all file formats can save this on exporting/rendering images.<br />
<br />
;The mysterious ''Image Area'': Given as two points (upper-left and lower-right corner) which also define the image span (Pythagoras: <font style="vertical-align:10%;font-size:8pt"><math>\scriptstyle\text{span}=\sqrt{\Delta x^2 + \Delta y^2}</math></font>). The unit seems to be not pixels but ''unit''s, which are at {{l|Unit System|60 pixels each}}. If the ratio of the image size and image area dimensions are off, for example circles will appear as an ellipse (see image). These settings seem to influence how large one ''Image Size'' pixel is being rendered. This might be useful when one has to deal with non-square output pixels.<br />
<br />
==Effects of the Image Area==<br />
{{l|image:Non_square_pixels.png|thumb|300px|Note the different scales at the rulers. Although the image is clearly 400x300 pixels big on screen, the rulers say it is only 400x200, which is what the ''Image Area'' values say.}}<br />
{{l|Image:Non_square.gif|frame|left|Note how the rectangle becomes a square and an elongated rectangle again as it rotates. Source:{{l|Image:Non square.sifz|Source file}} }}<br />
<br clear="all" /><br />
<br />
Somehow the image area setting seems to be saved when copy&pasting between image, see also bug [http://sourceforge.net/tracker/index.php?func=detail&aid=2116947&group_id=144022&atid=757416 #2116947]. <br />
<br />
==Possible intended effects of out-of-ratio image areas==<br />
As mentioned above, different ratios might be needed when then output needs to be specified in pixels, but those pixels are not squares. That might happen for several kinds of media, such as videos encoded in some PAL formats or for dvds. For further reading, look at [http://en.wikipedia.org/wiki/Pixel_aspect_ratio Wikipedia].<br />
<br />
Still, it is probably consensus that the image, as shown on screen while editing should look as closely as possible like when viewed by the final audience. So, while specifying a different output resolution at ''rendering'' time may well be wanted, synfigstudio should (for the majority of monitors) show square pixels, i.e. circles should stay circles.<br />
<br />
==Feature wishlist to simplify working across documents==<br />
<br />
== See also ==<br />
<br />
[http://www.mail-archive.com/synfig-devl@lists.sourceforge.net/msg01514.html Explanation by dooglus] on the synfig-dev mailing list.</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=Preferences_Dialog&diff=15411Preferences Dialog2012-03-19T14:13:15Z<p>Pupazzo: Minor rewording.</p>
<hr />
<div><!-- Page info --><br />
{{Title|Setup Dialog}}<br />
{{Category|Dialogs}}<br />
{{Category|File Menu (Toolbox)}}<br />
<!-- Page info end --><br />
== Purpose of the Setup Dialog ==<br />
<br />
The Setup Dialog allows the user set certain properties and preferences that are globally adopted by the application and used by all the Documents opened or to be opened. The Setup Dialog is organized in Tabs allowing modify the properties or preferences by meaningful groups.<br />
<br />
== Gamma Tab ==<br />
<br />
{{l|Image:Gamma.png}}<br />
<br />
The gamma tab controls how the color representation in Synfig Studio is managed while editing a Document. There is a gamma pattern diagram on the top to let the user visually know how the gamma modifications would look in the color space. <br />
<br />
In the middle there are three color sliders that control the gamma for each separate channel. Default values for those sliders are 2.2 for each color. Depending on the gamma adjustment you have in your monitor or output device, you may want to change those values to be more appropriate. <br />
<br />
Below those sliders there is a Black level selector. It is used to calibrate your output device to show the black color as black. Most of the time you'll need this value set to 0.0.<br />
<br />
==Miscellaneous tab==<br />
<br />
{{l|Image:Misc.png}}<br />
<br />
This tab groups some miscellaneous global preferences for the application. All of them would affect new files opened or created after they have been changed.<br />
<br />
=== Time Format ===<br />
<br />
This selection menu allows to set the time format used in the application. It would affect how all time parameters and information you see in Synfig Studio are shown. Although internally all the time values are stored as seconds, you can see the time in other formats:<br />
<br />
* HH:MM:SS.FF. This is a fixed format that shows always the time in hours:minutes:seconds.frames with two significant digits minimum. Examples: 123:45:58.13, 00:00:04.23<br />
*(HHh MMm SSs) FFf '''default'''. This is a flexible format that would use the needed space to show the time using the correct derived unit. Examples: 123h 45m 58s 13f, 4s 23f. Notice that the second time only use the needed derived units (seconds) not using minutes or hours like in the previous type.<br />
*(HHhMMmSSs)FFf. This one works exactly like the previous one but in a more compact format (no spaces). Examples: 123h45m58s13f, 4s23f.<br />
* HHh MMm SSs FFf. This is like the default one but in a fixed format like the first one. Examples: 123h 45m 58s 13f, 00h 00m 04s 23f.<br />
* HHhMMmSSsFFf. I think you can imagine how does this one works. Examples: 123h45m58s13f, 00h00m04s23f.<br />
* FFf. This one shows all the times in frames. (There is a bug here because it doesn't work properly) Examples: 10693405f, 119f, assuming that the frames per second are set to 24.<br />
<br />
=== Unit System ===<br />
<br />
This drop down list allows change the global preference to the unit system that the user would want to use in any opened or created documents. Although all the vector dimensions are stored internally in synfig as units there are unit conversions to other systems to make editing more friendly or appropriate to the values that the user has from the model. Available Unit Systems are:<br />
<br />
* points (pt)<br />
* units (u)<br />
* pixels (px)<br />
* inches (in)<br />
* metres (m)<br />
* centimeters (cm)<br />
* millimeters (mm)<br />
<br />
See the {{l|Unit System|Unit System}} in action to know the equivalence between those units.<br />
<br />
=== Recent Files ===<br />
<br />
This spin button entry box allows the user to define how many recent files are shown when the {{l|Toolbox|Toolbox}}>File>Recent Files menu option is selected. Maximum value is set to 50 and minimum to 1. Default is 25.<br />
<br />
=== Automatic Backup Interval ===<br />
<br />
Synfig studio may crash (an infrequent thing lately), or you may have lost power or killed the program for any reason. Synfig Studio does a security copy of the current working document and would ask to recover it the next time you run the program. It can be set to a minimum of 1 second and does not have a maximum. Set it to 0s to disable the automatic backup. Default value is 3m.<br />
<br />
===Browser command ===<br />
<br />
This entry box allows the user select the name of your preferred browser. Set there the name of the binary to execute when Synfig Studio need to invoke the external browser (for example when clicking on the help menu items). The default value for Unix like system is "xdg-open" and "open" for Windows and MacOs. <br />
<br />
===Visually Linear Color Selection ===<br />
<br />
This [http://en.wikipedia.org/wiki/RGB_color_model#Nonlinearity Wikipedia] article talks about how color output is non-linear, that if 0 is black and 100 is white, then 50 is only about 22 percent of the brightness of white, rather than 50% as you might expect.<br />
<br />
In Synfig Studio there is an option (on by default) to make sure that if you ask for 50, you get 50% of the brightness of white. <br />
<br />
If you turn this option off, everything will go back to its non-linear, yet strangely comfortable and familiar mode.<br />
<br />
=== Restrict Real Value Ducks to the Top Right Quadrant === <br />
<br />
This is a feature that makes the manipulation of the real value ducks easier in certain situations. Real value ducks are the ones that can manage any kind of real number (if it is implemented in the layer interface). For example Circle Radius is controlled by a Real Value Duck. Also the Outlines Width are controlled by this kind of ducks. If you have to set the real value exactly to 0.0 it becomes especially difficult to do with the normal behavior of the real value ducks. If you set this parameter on, the position of the duck is restricted to be in the top right quadrant of the 2D space. In this way you can set the real value to any number and also easily reach the value of 0.0 just dragging the duck to the left bottom part of your 2D space.<br />
<br />
=== Use Only a Single Thread (Windows only) ===<br />
<br />
When checked, this option obligates to the renderer to use only a single thread to do the render of the scene on the screen. Keeping this enables performs the stability of Synfig Studio in the Windows platform. Uncheck this option would cause the program to hang or crash more frequently.<br />
<br />
== Document Tab ==<br />
<br />
{{l|Image:Document.png}}<br />
<br />
This tab groups some Document global preferences for the application. All of them would affect new files opened or created after they have been changed.<br />
<br />
=== New Document filename prefix ===<br />
<br />
This option sets the prefix of the newly created Documents in Synfig Studio. A sequential number, starting with 1, will be added to it for each new file you create in a Synfig Studio session. This is particularly useful if you're working in a project with several files.<br />
<br />
=== New Document X and Y sizes === <br />
<br />
In those spin buttons entries you can set the preferred X and Y dimensions in pixels of newly created documents. This is useful if you're working with a certain resolution and want to keep all the file exactly the same without the tedious task of editing the particular dimensions of each newly created file. Image Area (in units) are calculated accordingly to the correspondence between pixels and units (60 pixels = 1 unit). Default values are X=480 and Y=270 pixels. <br />
<br />
There is also a drop down list of predefined resolutions according to the standards of the digital industry. Default resolution is "480x270 Web 480x HD".</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=File:Non_square_pixels.png&diff=15410File:Non square pixels.png2012-03-19T12:54:48Z<p>Pupazzo: </p>
<hr />
<div>A showcase for when Image Size and Image Area don't have the same side ratio.</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=Image_Dimensions&diff=15409Image Dimensions2012-03-19T12:50:35Z<p>Pupazzo: Add screenshot</p>
<hr />
<div><div style="background-color:#DDFFDD; border:thin solid green; padding:1em"><br />
'''Disclaimer:''' This page's content is not official and not guaranteed to be free of mistakes. At the moment, it's even only a sum of personal thoughts to cast a bit of light onto synfig's image dimensions handling.</div><br />
<br />
==Describing the fields of the Canvas Properties Dialog==<br />
The user access the image dimensions in the {{l|Canvas Properties Dialog}}.<br />
===The ''Other'' tab===<br />
[[File:Canvas-properties-other.png]]<br />
<br />
Here some properties can simply be locked (such that they can't be changed) and linked (so that changes in one entry simultaneously change other entries as well).<br />
<br />
===The ''Image'' tab===<br />
<br />
[[File:Canvas-properties-image.png]]<br />
<br />
Obviously here the image dimensions can be set. There seem to be basically three groups of fields to edit:<br />
<br />
;The on-screen size(?): The fields ''Width'' and ''Height'' tell synfigstudio how many pixels the image shall cover at a zoom level of 100%.<br />
<br />
;The physical size: The physical width and height should tell how big the image is on some physical media. That could be when printing out images on paper, or maybe even on transparencies or film. Not all file formats can save this on exporting/rendering images.<br />
<br />
;The mysterious ''Image Area'': Given as two points (upper-left and lower-right corner) which also define the image span (Pythagoras: <font style="vertical-align:10%;font-size:8pt"><math>\scriptstyle\text{span}=\sqrt{\Delta x^2 + \Delta y^2}</math></font>). The unit seems to be not pixels but ''unit''s, which are at {{l|Unit System|60 pixels each}}. If the ratio of the image size and image area dimensions are off, for example circles will appear as an ellipse (see image). These settings seem to influence how large one ''Image Size'' pixel is being rendered. This might be useful when one has to deal with non-square output pixels.<br />
<br />
==Effects of the Image Area==<br />
{{l|image:Non_square_pixels.png|thumb|300px|Note the different scales at the rulers. Although the image is clearly 400x300 pixels big on screen, the rulers say it is only 400x200, which is what the ''Image Area'' values say.}}<br />
{{l|Image:Non_square.gif|frame|left|Note how the rectangle becomes a square and an elongated rectangle again as it rotates. Source:{{l|Image:Non square.sifz|Source file}} }}<br />
<br clear="all" /><br />
<br />
Somehow the image area setting seems to be saved when copy&pasting between image, see also bug [http://sourceforge.net/tracker/index.php?func=detail&aid=2116947&group_id=144022&atid=757416 #2116947]. <br />
<br />
==Possible intended effects of out-of-ratio image areas==<br />
As mentioned above, different ratios might be needed when then output needs to be specified in pixels, but those pixels are not squares. That might happen for several kinds of media, such as videos encoded in some PAL formats or for dvds. For further reading, look at [http://en.wikipedia.org/wiki/Pixel_aspect_ratio Wikipedia].<br />
<br />
Still, it is probably consensus that the image, as shown on screen while editing should look as closely as possible like when viewed by the final audience. So, while specifying a different output resolution at ''rendering'' time may well be wanted, synfigstudio should (for the majority of monitors) show square pixels, i.e. circles should stay circles.<br />
<br />
==Feature wishlist to simplify working across documents==</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=File:Canvas-properties-image.png&diff=15408File:Canvas-properties-image.png2012-03-19T12:47:34Z<p>Pupazzo: </p>
<hr />
<div></div>Pupazzohttps://www.wiki.synfig.org/index.php?title=Image_Dimensions&diff=15407Image Dimensions2012-03-19T12:45:01Z<p>Pupazzo: Add screenshot</p>
<hr />
<div><div style="background-color:#DDFFDD; border:thin solid green; padding:1em"><br />
'''Disclaimer:''' This page's content is not official and not guaranteed to be free of mistakes. At the moment, it's even only a sum of personal thoughts to cast a bit of light onto synfig's image dimensions handling.</div><br />
<br />
==Describing the fields of the Canvas Properties Dialog==<br />
The user access the image dimensions in the {{l|Canvas Properties Dialog}}.<br />
===The ''Other'' tab===<br />
[[File:Canvas-properties-other.png]]<br />
<br />
Here some properties can simply be locked (such that they can't be changed) and linked (so that changes in one entry simultaneously change other entries as well).<br />
<br />
===The 'Image' tab===<br />
Obviously here the image dimensions can be set. There seem to be basically three groups of fields to edit:<br />
;The on-screen size(?): The fields ''Width'' and ''Height'' tell synfigstudio how many pixels the image shall cover at a zoom level of 100%.<br />
;The physical size: The physical width and height should tell how big the image is on some physical media. That could be when printing out images on paper, or maybe even on transparencies or film. Not all file formats can save this on exporting/rendering images.<br />
;The mysterious ''Image Area'': Given as two points (upper-left and lower-right corner) which also define the image span (Pythagoras: <font style="vertical-align:10%;font-size:8pt"><math>\scriptstyle\text{span}=\sqrt{\Delta x^2 + \Delta y^2}</math></font>). The unit seems to be not pixels but ''unit''s, which are at {{l|Unit System|60 pixels each}}. If the ratio of the image size and image area dimensions are off, for example circles will appear as an ellipse (see image). These settings seem to influence how large one ''Image Size'' pixel is being rendered. This might be useful when one has to deal with non-square output pixels.<br />
<br />
==Effects of the Image Area==<br />
{{l|image:Non_square_pixels.png|thumb|300px|Note the different scales at the rulers. Although the image is clearly 400x300 pixels big on screen, the rulers say it is only 400x200, which is what the ''Image Area'' values say.}}<br />
{{l|Image:Non_square.gif|frame|left|Note how the rectangle becomes a square and an elongated rectangle again as it rotates. Source:{{l|Image:Non square.sifz|Source file}} }}<br />
<br clear="all" /><br />
<br />
Somehow the image area setting seems to be saved when copy&pasting between image, see also bug [http://sourceforge.net/tracker/index.php?func=detail&aid=2116947&group_id=144022&atid=757416 #2116947]. <br />
<br />
==Possible intended effects of out-of-ratio image areas==<br />
As mentioned above, different ratios might be needed when then output needs to be specified in pixels, but those pixels are not squares. That might happen for several kinds of media, such as videos encoded in some PAL formats or for dvds. For further reading, look at [http://en.wikipedia.org/wiki/Pixel_aspect_ratio Wikipedia].<br />
<br />
Still, it is probably consensus that the image, as shown on screen while editing should look as closely as possible like when viewed by the final audience. So, while specifying a different output resolution at ''rendering'' time may well be wanted, synfigstudio should (for the majority of monitors) show square pixels, i.e. circles should stay circles.<br />
<br />
==Feature wishlist to simplify working across documents==</div>Pupazzohttps://www.wiki.synfig.org/index.php?title=Canvas_Properties_Dialog&diff=15406Canvas Properties Dialog2012-03-19T12:41:02Z<p>Pupazzo: Add screenshots for the tree tabs of the dialog.</p>
<hr />
<div><!-- Page info --><br />
{{Title|Canvas Properties Dialog}}<br />
{{Category|Dialogs}}<br />
<!-- Page info end --><br />
{{l|Image:Canvas_properties.png}}<br />
<br />
This Canvas Properties dialog is used to establish the properties of the current main canvas. If you have defined the SYNFIG_ENABLE_NEW_CANVAS_EDIT_PROPERTIES {{l|Environment Variables|environment variable}}, then this will automatically be displayed when you start a new project. To change these parameters while working on a project, go to the {{l|Canvas_Menu_Caret|caret menu}}, select '{{l|Edit Menu|edit}}' and then 'properties'. Or you can alternatively use the {{l|Keyboard Shortcuts|keyboard shortcut}} F8.<br />
<br />
In the main dialog you can set:<br />
<br />
#Canvas Info:<br />
#* Name<br />
#* Description<br />
<br />
In the '''Image''' tab you can set:<br />
<br />
#Image Size:<br />
#* Width<br />
#* Height<br />
#* X Resolution<br />
#* Y Resolution<br />
#* Physical Width<br />
#* Physical Height<br />
#Image Area:<br />
#* Top Left (x,y)<br />
#* Bottom right (x,y) - Those parameters defining the Top Left and Bottom Right canvas corners relatively to the center of the coordinates.<br />
<br />
In the '''Time''' tab you can set:<br />
<br />
{{l|Image:Canvas-properties-time.png}}<br />
<br />
#Time Info:<br />
#* Frames per second<br />
#* Start Time (seconds)<br />
#* End Time (seconds)<br />
<br />
In the '''Other''' tab you can set:<br />
<br />
{{l|Image:Canvas-properties-other.png}}<br />
<br />
#Locks and Links:<br />
#* Image Width<br />
#* Image Height<br />
#* Image Aspect<br />
#* Image Span<br />
#* Pixel Width<br />
#* Pixel Height<br />
#* Pixel Aspect<br />
#Other:<br />
#*Focus Point<br />
<br />
<br />
<br />
Please note that since this dialog caused confusion, even among some very experienced people, here are some unofficial {{l|Image_Dimensions|thoughts}} about image dimensions.</div>Pupazzo