Synfig Studio :: Documentation - User contributions [en]

Category:Layer Menu

2008-08-05T12:38:17Z

HoekstraF: Corrected typos

Layers Menu provides menu entries to operate on existing layers as well as a sub-menu that allows creation of any of the possible Layers in synfig.

[[Image:LayerMenu.png]]

You can obtain a Layer Menu with either a context-click on the [[Layers Panel]] or using the [[Canvas Menu Caret]].

The meaning of the entries of the Layer Menu are as follows:

* '''New Layer''': It provides a new submenu that allows selection of any of the possible [[Layer|layers]] that exist in synfig. Just click on an option and the new Layer will be inserted. Remember that the layer will be inserted ''over'' the current selected layer. If no layer is selected then it is added at the beginning of the list of layers, i.e. above all other layers.

* '''Increase Amount and Decrease Amount''': These two commands modify the [[Amount Parameter]], increasing or decreasing its value. It is the same as if you click on the parameter and click on the little up and down arrows to increase - decrease the value of the parameter. (Note: It could be a new feature that the increase or decrease value can be chosen in the Preferences menu and or can be different if you press CTRL or ALT when press the little arrow buttons.). There are [[Keyboard Shortcuts| keyboard shortcuts]] for those actions. <Control>-<Alt>-'(' and <Control>-<Alt>-')'

*'''Add/Remove Layers to/from a Group''': This command operates on the selected layers. If they are in a Group they are removed when you press the "Remove" button. If they are already in a group and request to Add layer to a group then it would move the layer from one group to another. In any case it would ask you the new group to add the selected layers to. ''NOTE:(For the moment the feature is a little buggy. Please remove this comments when it were corrected)''

*'''Duplicate Layer''': Create a copy of the currently selected layer. It works also for multiple selected layers. Duplication includes the current layer definition and exported values (keyframes and waypoints) (Note: It could be cool if the duplicated layers have a modified description (like Gimp does) to allow the user find them easily).

*'''[[Encapsulate]]''': See its own page. See also [[Reuse Animations]] tutorial for other application of Encapsulate.

* '''Remove Layer''': Delete the layer from the list of layers. There is a [[Keyboard Shortcuts|keyboard shortcut]] for that <Delete>.

* ''' Set Layer Description''': Allows to modify the current description of the selected layer to another one more meaningful to the user. It is not shown when more than one layers is selected. You can also modify the layer description by just clicking in its corresponding "Layer" column in the [[Layers Panel]]

* '''Raise Layer / Lower Layer''': Moves the layer up or down in the layer list inside of its scope. If a layer is inside a [[Paste Canvas]] layer then it would only allow to be raised to the top of the scope of the Paste Canvas layer and not higher If you need to put a layer outside of the scope of a Paste Canvas layer then you should use ''drag and drop''. If multiple layers are selected the commands continue working but the commands are shown depending on whether all the layers can be raised or lower at the same time.

* '''Cut/Copy/Paste''': These commands do what they are supposed to do with the currently selected layers. If more than one layer is selected and one of them belongs to a Paste Canvas then, if you select "Cut", the following message pop ups: ''layer_remove: This layer doesn't belong to this canvas anymore''. You can paste the cut layers but you cannot do [[Edit Menu#Undo|undo]] with those layers.

== New Layer Menu ==

There are 9 categories of layers, as shown below:

[[Image:Layers-blurs.png]]
[[Image:Layers-distortions.png]]
[[Image:Layers-filters.png]]

[[Image:Layers-fractals.png]]
[[Image:Layers-geometry.png]]
[[Image:Layers-gradients.png]]

[[Image:Layers-other.png]]
[[Image:Layers-stylize.png]]
[[Image:Layers-transform.png]]

Canvas Properties Dialog

2008-08-05T12:19:14Z

HoekstraF: Minor stylistic changes

[[Category:Dialogs]]

http://i170.photobucket.com/albums/u243/zenoscope/properties.png

<span style="font-size:80%">This image needs to be updated</span>

This dialog is used to establish the properties of the current main canvas. This dialog is automatically shown when you first start a project or if the SYNFIG_ENABLE_NEW_CANVAS_EDIT_PROPERTIES [[Environment Variables|environment variable]] is defined. This dialog allows you to set the following parameters:

#Canvas Info:
#* Name
#* Description
#Image Size:
#* Width
#* Height
#* X Resolution
#* Y Resolution
#* Physical Width
#* Physical Height
#Image Area:
#* Top Left (x,y)
#* Bottom right (x,y)
#Locks and Links:
#* Pixel Aspect
#* Pixel Width
#* Pixel Height
#* Image Aspect
#* Image Width
#* Image Height
#* Image Span
#Time Info:
#* Frames per second
#* Start Time (seconds)
#* End Time (seconds)
#Other:
#*Focus Point

To change these parameters while working on a project, go to the [[Canvas_Menu_Caret|caret menu]], select '[[Edit Menu|edit]]' and then 'properties'.

Color Editor Dialog

2008-08-05T12:11:55Z

HoekstraF: Made stylistic changes

[[Category:Dialogs]]

==The Color Dialog ==
The color dialog has two sections: one for the color itself and another for the alpha channel (the opacity of the color). The color section allows changes to the color channels and shows the hexadecimal representation of the color. This hexadecimal representation does not include the alpha channel.

[[Image:Color1.png]] [[Image:ColorDialog1.png]] [[Image:ColorsDialogYUV1.png]] [[Image:ColorTest1.png]]

You can set the color you are editing using two methods: RGB composition (red, green and blue channels) or YUV composition (luma, hue, saturation, U and V channels). Select one of the tabs to make the modifications using the method you prefer.

All the RGB channels and alpha values can be modified using the triangular sliders or the numeric input. In all cases the value can be between 0 and 100. RGB values, and alpha values as well, can actually be higher than 100 and lower than 0. If you set RGB values higher than 100 it produces a shifted color with transparency. Same happens if values are lower than 0. You can create an object with a color with alpha = 200. Then if you apply it over another layer with alpha = 100 and use "alpha over" as the composition method. You will then obtain a composited alpha of -100 (-100 = 100-200). Anyway the alpha value will be truncated to be in the [0,100] interval when the image is rendered because images cannot hold negative alpha or bigger than 100% (''Are you sure?'').

On the other hand, YUV channels can only be set using the triangular sliders. It would be a good feature if those channels could also be modified by their numerical values.

== Examples of RGB channels outside [0,100] ==

Here are some examples of what happens when a color channel value is set to values beyond its natural scope.

[[Image:Color2.png]] [[Image:ColorDialog2.png]] [[Image:ColorTest2.png]]

[[Image:Color3.png]] [[Image:ColorDialog3.png]] [[Image:ColorTest3.png]]

[[Image:Color4.png]] [[Image:ColorDialog4.png]] [[Image:ColorTest4.png]]

[[Image:Color5.png]] [[Image:ColorDialog5.png]] [[Image:ColorTest5.png]]

[[Image:Color7.png]] [[Image:ColorDialog7.png]] [[Image:ColorTest7.png]]

[[Image:Color6.png]] [[Image:ColorDialog6.png]] [[Image:ColorTest6.png]]

[[Image:Color8.png]] [[Image:ColorDialog8.png]] [[Image:ColorTest8.png]]

[[Image:Color9.png]] [[Image:ColorDialog9.png]] [[Image:ColorTest9.png]]

[[Image:Color10.png]] [[Image:ColorDialog10.png]] [[Image:ColorTest10.png]]

In all the examples the blend method of the horizontal rectangle was "composite".

In the examples you can notice that negative values for an RGB channel ("overdesaturated") combined with alpha set to an intermediate value affects light colors more than dark colors. On the other hand RGB channel values greater than 100 ("oversaturated") affects dark colors more than light colors.

== Examples of Alpha channel outside [0,100] ==

In the following examples you can see that negative alpha values and bigger than 100% alpha values composited with other layers produces very interesting effects. If someone want to explain why those effects are produced, please edit this page! :)

[[Image:Color11.png]] [[Image:ColorDialog11.png]] [[Image:ColorTest11.png]]

[[Image:Color12.png]] [[Image:ColorDialog12.png]] [[Image:ColorTest12.png]]

[[Image:Color13.png]] [[Image:ColorDialog13.png]] [[Image:ColorTest13.png]]

== The sample file ==

This is the file that I've used to produce the color effects.
[[Media:ColorTest.sifz]]

Color Editor Dialog

2008-08-05T12:06:09Z

HoekstraF: Made stylistic changes

[[Category:Dialogs]]

==The Color Dialog ==
The color dialog has two sections: one for the color itself and another for the alpha channel (the opacity of the color). The color section allows changes to the color channels and shows the hexadecimal representation of the color. This hexadecimal representation does not include the alpha channel.

[[Image:Color1.png]] [[Image:ColorDialog1.png]] [[Image:ColorsDialogYUV1.png]] [[Image:ColorTest1.png]]

You can set the color you are editing using two methods: RGB composition (red, green and blue channels) or YUV composition (luma, hue, saturation, U and V channels). Select one of the tabs to make the modifications using the method you prefer.

All the RGB channels and alpha values can be modified using the triangular sliders or the numeric input. In all cases the value can be between 0 and 100. RGB values, and alpha values as well, can actually be higher than 100 and lower than 0. If you set RGB values higher than 100 it produces a shifted color with transparency. Same happens if values are lower than 0. You can create an object with a color with alpha = 200. Then if you apply it over another layer with alpha = 100 and use "alpha over" as the composition method. You will then obtain a composited alpha of -100 (-100 = 100-200). Anyway the alpha value will be truncated to be in the [0,100] interval when the image is rendered because images cannot hold negative alpha or bigger than 100% (''Are you sure?'').

On the other hand, YUV channels can only be set using the triangular sliders. It would be a good feature if those channels could also be modified by their numerical values.

== Examples of RGB channels outside [0,100] ==

Here you can see some examples of what happens when a color channel value is set to be out of its natural scope.

[[Image:Color2.png]] [[Image:ColorDialog2.png]] [[Image:ColorTest2.png]]

[[Image:Color3.png]] [[Image:ColorDialog3.png]] [[Image:ColorTest3.png]]

[[Image:Color4.png]] [[Image:ColorDialog4.png]] [[Image:ColorTest4.png]]

[[Image:Color5.png]] [[Image:ColorDialog5.png]] [[Image:ColorTest5.png]]

[[Image:Color7.png]] [[Image:ColorDialog7.png]] [[Image:ColorTest7.png]]

[[Image:Color6.png]] [[Image:ColorDialog6.png]] [[Image:ColorTest6.png]]

[[Image:Color8.png]] [[Image:ColorDialog8.png]] [[Image:ColorTest8.png]]

[[Image:Color9.png]] [[Image:ColorDialog9.png]] [[Image:ColorTest9.png]]

[[Image:Color10.png]] [[Image:ColorDialog10.png]] [[Image:ColorTest10.png]]

In all the examples the blend method of the horizontal rectangle was "composite".

In the examples you can notice that negative values for a RGB channel ("overdesaturated") combined with alpha set to an intermediate value affects to white like colors more than to black like ones. On the other hand RGB channel values greater than 100 ("oversaturated") affects to black like colors more than to white like colors.

== Examples of Alpha channel outside [0,100] ==

In the following examples you can see that negative alpha values and bigger than 100% alpha values composited with other layers produces very interesting effects. If someone want to explain why those effects are produced, please edit this page! :)

[[Image:Color11.png]] [[Image:ColorDialog11.png]] [[Image:ColorTest11.png]]

[[Image:Color12.png]] [[Image:ColorDialog12.png]] [[Image:ColorTest12.png]]

[[Image:Color13.png]] [[Image:ColorDialog13.png]] [[Image:ColorTest13.png]]

== The sample file ==

This is the file that I've used to produce the color effects.
[[Media:ColorTest.sifz]]

Palette Editor Panel

2008-08-05T11:52:33Z

HoekstraF: Corrected typos

[[Category:Panels]]

http://i170.photobucket.com/albums/u243/zenoscope/palette_editor.png

Here you can add, edit or delete colors from your document. A right click on a color gives you 2 options: color (to edit the color) and delete (to delete it).

Z Depth Parameter

2008-08-05T11:37:52Z

HoekstraF: Corrected typo, added explanation

This parameter can be used to change the 'depth' of a layer in the layer stack. By default, each canvas gives its layers zdepths which depend on their order in the canvas. The first layer has a depth of 0, the 2nd has a depth of 1, and so on.

Zdepth may be thought of as an indication of the distance to an observer: layers with a lower zdepth are 'nearer' to an observer than layers with a higher zdepth.

The Z Depth parameter on each layer can be used to adjust this default depth. The value of the Z Depth parameter is added to the layer's 'natural' depth, given by its order in its canvas.

For example, suppose we have 2 layers, first a circle, and then a rectangle. The circle will have a 'natural' depth of 0, and the rectangle's will be 1, so the circle will be drawn on top of the rectangle.

If we use the params dialog to set the rectangle's zdepth to -2, however, -2 will be added to its natural depth of 1, giving a new depth of -1, and so it will be drawn above the circle.

The parameter can be animated, so that layers change order throughout the animation.

Here's an example which shows the Z Depth parameter being animated to bring one circle in front of another at a certain point in time:

[[Image:Offset-z-depth-revisited.gif]]
[[Media:Offset-z-depth-revisited.sifz|source sif file]]

== Too Much Detail ==

If you want to see a more complex Z depth order animation and an explanation to how it was done please watch this animation and this PDF file.

Animation: http://www.youtube.com/watch?v=YTpSfUthuVE

Explanatory PDF file: http://www.darthfurby.com/genete/synfig/Balls.pdf

Same file but ODT format: http://www.darthfurby.com/genete/synfig/Ballsv2.odt

Canvas Browser Panel

2008-08-05T11:24:22Z

HoekstraF: Corrected typo

[[Category:Panels]]

[[Image:canvas_icon.png|64px]]

The canvas browser dialog shows the tree of canvases that are present in the currently selected document. [[Export|Exporting]] a canvas parameter of a [[Paste Canvas]] layer will cause the canvas to be added to the canvas browser dialog. Double-clicking on a subcanvas in the dialog will open a new workarea window allowing you to work on the subcanvas in isolation.

http://i209.photobucket.com/albums/bb207/rore4wiki/Synfig/dialogs/Capture-CanvasBrowser.png

Canvas Browser Panel

2008-08-05T11:23:39Z

HoekstraF: Corrected a type

[[Category:Panels]]

[[Image:canvas_icon.png|64px]]

The canvas browser dialog shows the tree of canvases that are present in the currently selected document. [[Export|Exporting]] the canvas parameter of a [[Paste Canvas]] layer will cause the canvas to be added to the canvas browser dialog. Double-clicking on a subcanvas in the dialog will open a new workarea window allowing you to work on the subcanvas in isolation.

http://i209.photobucket.com/albums/bb207/rore4wiki/Synfig/dialogs/Capture-CanvasBrowser.png

History Panel

2008-08-05T11:20:38Z

HoekstraF: Correct minor typing and grammatical errors

[[Category:Panels]]

The history panel keeps track of all the actions that are made in synfigstudio while editing a file. This history list is empty for a new clean file and also when the file already exists and is opened, so it is not saved with the file (is it worth to save it in the sifz file?).

[[Image:History-Panel.png]]

When a single user operation produces a lot of actions (typically when manipulating lots of ducks at the same time) all those common actions are grouped into a expandable one. See the small triangle in the image sample. By clicking on the small triangle you can expand the grouped actions and access them individually.

The check box column is used to disable specific actions without having to go back through the entire actionlist. So if you want to redo or undo a specific action (or group of actions) just click on the check box.

The (JMP) column is used to redo or undo all actions from the current situation to the action where you clicked on the (JUMP) word.

The Action column gives a description of the action itself. It
attempts to give a concise but meaningful description of the action

The undo and redo buttons undo or redo a single action each time they are pressed.

Finally the Clear Undo and Clear Redo buttons clean the history list of Undo or Redo actions. The Clear Undo and Clear Redo actions cannot be undone.