Synfig Studio :: Documentation - User contributions [en]

Reuse Exported ValueNodes

2010-03-18T17:56:50Z

Marietto2008:

{{Title|Reusing Exported Value Nodes}}
{{Category|Tutorials}}
{{Category|Tutorials Advanced}}


==Introduction==

{{l|Export}} a {{l|ValueNode}} is one of the most interesting features of synfig. Also {{l|convert|Convert}} a valuenode is also one of the main features of synfig. A combination of them allows the user organize complex animations just modifying a few parameters. See the tutorial {{l|Doc:Following_a_BLine}} for an example of that.

Sometimes you would like to do the same combination of exported values and convert types. And it is so tedious to repeat each time.

There is a way to avoid this and reuse the exported and converted values.

Imagine that you have a situation where you have a cool conversion combination and want to use it into another already done animation. You should do the following:

# At the animation file that have the cool conversion do:
## Export all the values that 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 'b' and 'c' exported parameters.
## 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.
# When saved the file then 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.
# Then select the imported paste canvas layer and go to its canvas parameter and export it. Set a meaning name. Save the "master" file and close it.
#Open the "master" file again and you'll see that the imported animation file (already an exported canvas) have an expand triangle that allow select the layers that are inside of it.
# 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 operation.

That's all folks! ;-)

Tutorials

2010-03-17T17:32:57Z

Marietto2008:

{{Category|Unsorted}}pu

This is an index of all of the tutorials for Synfig Studio.

{| border="1" cellspacing="0" align="center" width="80%"
|'''Tutorial Name'''||'''Description''' || '''Level'''
|-
| {{l|Getting Started}} {{l|http://synfig.org/files/voria/synfig_tutorial.pdf PDF}} || New to Synfig Studio? This tutorial will help you get the gist of things || Basic
|-
| {{l|Animation Basics}} || Introduction to making things move, the timeline, and the {{l|Keyframes Panel|Keyframes Panel}}. || Basic
|-
| {{l|Adding Layers}} || Introduction to the Layers palette, and basics of compositing. || Basic
|-
| {{l|Creating Shapes}} || Introduction to making shapes using the bline and normal tools. || Basic
|-
| {{l|Basic Masking}} || Introduction to the concept of masking || Basic
|-
| {{l|How do I|How do I...?}} || Quick tutorials, and commonly-needed tasks. || Basic
|-
| {{l|Slideshow Tutorial}} || Make a slideshow out of a series of images or other Synfig layers. || Intermediate
|-
| {{l|Flower Animation}} || A beginner tutorial, showing animation with blines. It could be a good tutorial to follow, after the Animations Basics one. || Intermediate
|-
| {{l|Snowflake with the Duplicate Layer}} || A tutorial explaining how to use the Duplicate Layer to easily duplicate objects. || Intermediate
|-
| {{l|Shiny Effects}} #1 || A tutorial of making some shiny effects. || Intermediate
|-
| {{l|Building a magnifying glass}} {{l|http://www.musikboden.se/synfigfiles/tutorial_magnifying_glass.pdf PDF}} || A tutorial showing how to build a magnifying glass. || Intermediate
|-
| {{l|Rescale Animations}} || A tutorial that shows how to rescale a portion of animation in start - end and speed up/down (WIP). || Intermediate.
|-
| {{l|Doc:Cut-out_Animation}} || A tutorial that shows how to create cut-out style animations. || Intermediate.
|-
| {{l|Doc:Following_a_BLine}} || A tutorial showing how to make a layer follow a BLine rotating to face the direction it's moving in. || Advanced
|-
| {{l|Walk Cycle}} || Tutorial showing import of multiple still frames, and rotoscoping to generate a walk cycle animation || Advanced
|-
| {{l|Reuse Animations}} || Tutorial that explains how to reuse "poses" of portions of the scene without interfere on the rest of it. || Advanced
|-
| {{l|Switching Scenes}} || Tutorial that explains how to edit a collection of .sif files together and switch back and forth between them. || Advanced
|-
| {{l|Reuse Exported ValueNodes}} || Small tutorial to show how to reuse cool conversion collections on several animations || Advanced
|-
| {{l|Sewing BLines}} || A tutorial to show how to sew the edges of the BLines (Outlines, Regions and any BLine based) to each others || Advanced
|-
| {{l|Parabolic Shot}} || A tutorial to show how to make layers follow a mathematical equation || Advanced
|-
| {{l|Particles}} || A tutorial to show how to use the particles template released by {{l|User:Genete|Genete}} || Advanced
|-
| {{l|Brushes}} || A tutorial to show how to create brushes using the Duplicate Layer and the Link to Bline features|| Advanced
|-
| [http://morevnaproject.org/2008/11/27/camera-widget/ Camera view] || How to arrange camera pan/zoom of canvas and manage ValueBase Nodes of imported canvases || Advanced
|-
| {{l|Requested Tutorials}} || Need a tutorial? Request it here. || N/A
|}

== See Also ==
* {{l|Keyboard Shortcuts}}
* {{l|Mouse Shortcuts}}
* {{l|Video Tutorials}}
* {{l|Quick Overview}}

General animation tutorial links:

* [http://www.keithlango.com/tutorials/old/popThru/popThru.html Keith Largo Tutes]
* [http://www.animationarchive.org/2006/05/meta-100000-animation-drawing-course.html The Animation Drawing Course at The Animation Archive]
*[http://www.garycmartin.com/mouth_shapes.html Lip Sync]
*[http://www.channel4.com/4talent/moveit/index.html MOVE IT! Animation Tutorial]
* [http://www.smashingmagazine.com/2009/04/16/40-cartoon-character-illustration-tutorials/ 40+ Cartoon Character Illustration Tutorials]

Doc:Adding Layers

2010-03-17T16:00:06Z

Marietto2008:

{{Title|Adding Layers}}
{{Navigation|Category:Manual|Doc:Creating_Shapes}}
{{Category|Manual}}
{{Category|Tutorials}}
{{Category|Tutorials Basic}}


''Usual note to the reader: This is not yet finished; please be patient.''

== Introduction ==

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, such as the GIMP, for instance.

{|
|
However, Synfig is different from simple layers in at least two respects:
# You can organize layers into hierachical groups.
# You can use upper layers to change the behaviour (or look) of underlying layers.

Doing so is quite easy. Let's look at a simple example.

# Create a new file with 0 duration. There's no need to bother with a timeline at this point.
# Create a simple rectangle with corresponding tool.
|| ||
{{l|Image:Rectangle-tool-on-panel.jpg}}
|}

{{l|Image:Adding-layers-tutorial-0.jpg}}

== Combining Layers ==

Now there are two ways to proceed. In the first way, pick the {{l|Gradient Tool|gradient tool}} from the Synfig {{l|Toolbox}}, and click into the canvas once. You should note that another layer was added in the {{l|Layers Panel}} called 'Gradient'. This is nothing special. If you see no gradient but just a plain color, pick the {{l|Normal Tool|normal 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.

{{l|Image:Adding-layers-tutorial-1.jpg}}

You now have a gradient but it is not what you wanted: It spreads the whole canvas and the goal was to have a gradient on the rectangle. Let's fix this now.

Select the gradient and the rectangle layer in the {{l|Layers Panel}}. They should appear with a blue background now. Then, context-click (ie. right-click on Windows and Linux) and select '{{l|Encapsulate}}' from the menu. The view of your layer tab should change now, showing a small box called '{{l|Paste Canvas|Inline Canvas}}' with an arrow in front.

You can treat this layer like any other layer -- move it around, duplicate it, copy and paste it. By clicking on the arrow you can expand the inline canvas to see its contents, your previous two layers, the gradient and the rectangle.

If you want to change the name of it to something more descriptive, just select the layer in the layer tab and click on its label. Then you just edit it in place. You can do this for ANY layer, and are strongly encouraged to do so.

== Using locality ==

{{l|Image:Adding-layers-tutorial-2.jpg}}

However, there is still a problem: The gradient still covers the whole canvas althought we wanted it to be restricted on the rectangle. To do so, activate the gradient layer in the Layer tab. Now go to the {{l|Params Panel}} (by default a tab in the Params-Children-Keyframes window), and search the attribute called '{{l|Blend Method}}'. Double-click the entry and select '{{l|Blend Method#Onto|Onto}}' from the appearing drop-down menu.

{{l|Image:Adding-layers-tutorial-3.jpg}}

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

{{l|Image:Adding-layers-tutorial-4.jpg}}

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.

However, 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 just created, it would just blur them -- anything under the inline canvas would not be blurred!

Let's try it. Create two red {{l|Circle Tool|circles}} and in the {{l|Layers Panel}} move them under the inline canvas. Now our inline canvas (with rectangle and gradient) is in front of those two circles.

{{l|Image:Adding-layers-tutorial-5.jpg}}

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 new layer. Create another circle filled with a black color. Layer with circle will be created over the gradient layer inside the inline canvas.

{{l|Image:Adding-layers-tutorial-6.jpg}} {{l|Image:Adding-layers-tutorial-7.jpg}}

Now, right click on the layer with black circle in the {{l|Layers Panel}} and a popup menu will appear. The first item in that popup is "New Layer". Inside of the "New Layer" menu, you'll see several categories of layers you could create, but what we want is a blur, so goto the Blur category and select the "Blur" layer. (so that would be "New Layer->{{l|Blur Layer Category|Blurs}}->{{l|Blur Layer|Blur}}")

{{l|Image:Adding-layers-tutorial-8.jpg}}

Well, it blurred... but something is not quite right - outside edge of contents of the inline canvas is still sharp. It is doing this because the blend method of the blur defaulted to "{{l|Blend Method#Composite|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 {{l|Toolbox}}). What we want is a blend method of "{{l|Blend Method#Straight|Straight}}". Just select the blur layer, and change the {{l|Blend Method}} to "{{l|Blend Method#Straight|Straight}}" in the {{l|Params Panel}}.

: NOTE: I will probably change the way that default blend methods are handled in the future--as the way it is currently handled seems to only create hassles like this.

{{l|Image:Adding-layers-tutorial-9.jpg}} {{l|Image:Adding-layers-tutorial-10.jpg}}

Ok, now we have all of the contents of the inline canvas blurred, but everything under it is sharp!

== Digging further... ==

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

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