Doc:Adding Layers/fi - Revision history

Genete: Fix categories to don't show this page in English version

2011-01-12T19:06:23Z

Fix categories to don't show this page in English version

Mikalaari at 13:53, 28 October 2010

2010-10-28T13:53:09Z

Mikalaari at 22:42, 26 October 2010

2010-10-26T22:42:06Z

Mikalaari at 19:23, 26 October 2010

2010-10-26T19:23:20Z

Mikalaari at 18:41, 26 October 2010

2010-10-26T18:41:43Z

Mikalaari at 11:32, 25 October 2010

2010-10-25T11:32:03Z

Mikalaari: Created page with ' {{Title|Tasojen lisääminen}} {{Navigation|Category:Manual|Doc:Creating_Shapes/fi}} Category:Manual Category:Tutorials Category:Tutorials Basic [[…'

2010-10-21T18:32:15Z

Created page with ' {{Title|Tasojen lisääminen}} {{Navigation|Category:Manual|Doc:Creating_Shapes/fi}} Category:Manual Category:Tutorials Category:Tutorials Basic [[…'

New page

{{Title|Tasojen lisääminen}}
{{Navigation|Category:Manual|Doc:Creating_Shapes/fi}}
[[Category:Manual]]
[[Category:Tutorials]]
[[Category:Tutorials Basic]]
[[Category:Updated]]


== 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 in that they are used to separate different elements of an image.

However, Synfig's layers are different from layers in other programs in at least three respects:
# Every object, element, and effect gets its own layer.
# You can organize layers into hierarchical groups.
# You can use upper layers to change the behavior (or look) of underlying layers.

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

== Combining layers ==

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

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

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

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

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

{{Note|Note|If you see no gradient but just a plain color, that means that you probably just clicked on the canvas without dragging your mouse. To fix that pick the {{l|Transform Tool|Transform Tool}}, click into the canvas to activate the gradient's ducks. You need to grab the one you see and move it a bit until a gradient appears.}}
You now have a gradient, but it is not what you wanted: it spreads across the whole canvas. The goal was to have a gradient in the rectangle. So, let's fix this now.

In the {{l|Layers Panel}}, select both the gradient and the rectangle layer. Then, right-click and select {{Literal|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.

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

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

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

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

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

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

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 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 — anything under the inline canvas would not be blurred! Let's try it.

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

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

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

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

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.

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

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

[[Image:Adding-layers-tutorial-10-composite-blur.png|center|frame]]

Well, it blurred... but something is not quite right — the outside edge of 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.

{{Note|Note|We 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.}}
[[Image:Adding-layers-tutorial-11.png|frame|center]]

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

For example, you could create a {{L|Doc:Creating Shapes|some 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 can create a rotating effect. This technique is used for creation of {{L|Doc:Cut-out Animation}}.

@@ Line 46: / Line 46: @@
 [[Image:Adding-layers-tutorial-4.png|frame|center]]
-Gradientin tulisi nyt rajoittua suorakulmioon. Onnittelut! Teit juuri ensimmäisen tehosteen Synfigissä vuorovaikutteisilla tasoilla.
+Gradientin tulisi nyt rajoittua suorakulmioon. Onnittelut! Teit juuri ensimmäisen tehosteesi Synfigissä vuorovaikutteisilla tasoilla.
 [[Image:Adding-layers-tutorial-5.png|frame|center]]
-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 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.
+Jo yksin lisääntyneen järjestyksen vuoksi tasojen kapselointi leikekankaisiin parantaa Synfig-studion käytettävyyttä dramaattisesti. Mutta sama pätee moniin muihinkin ohjelmiin. Äsken esitelty "vaikutusalueen" käsite erottaa Synfigin muista tasohierarkian sisältävistä ohjelmista. Avainasia on se, että taso voi muuttaa vain ja ainoastaan dataa, jonka se saa '''suoraan itsensä alapuolelta'''. Toisin sanoen, jos aikoisit heittää {{l|Blur Layer/fi|sumennustason}} tekemämme {{l|Paste Canvas|leikekankaan}} sisälle muiden tasojen päälle, se sumentaisi vain ne &mdash; mitään leikekankaan alla olevaa ei sumennettaisi! Testataan sitä käytännössä.
 == Using layers to modify other layers==

@@ Line 35: / Line 35: @@
 Nyt sinulla on gradientti, mutta se ei ole sellainen kuin halusit: se levittäytyy koko kankaan yli. Tavoitteena oli laittaa gradientti suorakulmioon. Korjataanpa tilanne.
-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.
+Valitse {{l|Layers Panel/fi|tasopaneelista}} sekä gradientti että suorakaide. Avaa niistä sitten kohdevalikko hiiren oikealla napilla ja napsauta valikosta {{Literal|Kapseloi}}. Tasopaneelin pitäisi nyt muuttua ja näyttää vain pieni laatikko ja teksti {{l|Paste Canvas/fi|leikekangas}}, jonka edessä on nuoli. Nuolta napsauttamalla voit laajentaa leikekankaan ja kurkistaa sen sisältöä, eli edelliset kaksi tasoa: gradientti ja suorakulmio.
 [[Image:Adding-layers-tutorial-3.png|frame|center]]
-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.
+Tätä tasoa voi nyt käsitellä kuten mitä tahansa tasoa: liikutella, monistaa, kopioida ja liittää. Jos haluat antaa sille nimeksi jotain kuvaavampaa, sinun tarvitsee vain valita taso paneelista ja napsauttaa sen nimikettä. Sitten voit muokata sitä paikan päällä. Voit tehdä saman mille tahansa tasolle, ja suosittelemme sitä.
 == Using locality ==

@@ Line 2: / Line 2: @@
 {{Title|Tasojen lisääminen}}
 {{Navigation|Category:Manual|Doc:Creating_Shapes/fi}}
-[[Category:Manual]]
+[[Category:Manual/fi]]
-[[Category:Tutorials]]
+[[Category:Tutorials/fi]]
-[[Category:Tutorials Basic]]
+[[Category:Tutorials Basic/fi]]
 [[Category:Updated]]
 <!-- Page info end -->

@@ Line 23: / Line 23: @@
 Katsotaanpa yksinkertaista esimerkkiä kahden tason yhdistämisestä toisiinsa gradienttitehosteen luomiseksi suorakaiteeseen.
-Avaa uusi tiedosto, jonka pituus on nolla. Tässä vaiheessa ei tarvitse huolehtia aikajanasta. Piirrä sitten suorakaidetyökalulla yksinkertainen suorakaide.
+Tee uusi tiedosto, jonka pituus on nolla. Tässä vaiheessa ei tarvitse välittää aikajanasta. Piirrä sitten suorakaidetyökalulla yksinkertainen suorakaide.
 [[Image:Adding-layers-tutorial-1.png|frame|center]]
-Pick the {{l|Gradient Tool|Gradient Tool}} from the {{l|Category:Toolbox|Toolbox}}, press left mouse button on the canvas, drag to change gradient direction and release button when you are done. You should note that another layer was added in the {{l|Layers Panel}} called '''Gradient'''. This is nothing special.
+Ota {{l|Category:Toolbox|työkalupakista}} {{l|Gradient Tool/fi|gradienttityökalu}}, paina hiiren vasenta nappia kankaalla, muuta gradientien suuntaa raahaamalla ja päästä napista, kun olet valmis. Pane merkille, että {{l|Layers Panel/fi|tasopaneeliin}} on lisätty taso nimeltä '''Gradientti'''. Tässä ei ole mitään erikoista.
 [[Image:Adding-layers-tutorial-2.png|frame|center]]
-{{Note|Note|If you see no gradient but just a plain color, that means that you probably just clicked on the canvas without dragging your mouse. To fix that pick the {{l|Transform Tool|Transform Tool}}, click into the canvas to activate the gradient's ducks. You need to grab the one you see and move it a bit until a gradient appears.}}
+{{Note|Huomio|Jos et näe gradienttia, vaan yhden ainoan värin, olet mitä todennäköisemmin napsauttanut kangasta raahamatta hiirtä lainkaan. Tilanteen korjaamiseksi nappaa {{l|Transform Tool|muutostyökalu}} ja napsauta kangasta, jotta saat gradienttikahvat esiin. Sinun pitää tarttua päällimmäiseen kahvaan ja raahata sitä hiukan, kunnes saat gradientin näkyviin.}}
-You now have a gradient, but it is not what you wanted: it spreads across the whole canvas. The goal was to have a gradient in the rectangle. So, let's fix this now.
 In the {{l|Layers Panel}}, select both the gradient and the rectangle layer. Then, right-click and select {{Literal|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.

@@ Line 8: / Line 8: @@
 <!-- Page info end -->
-== Introduction ==
+== Johdanto ==
-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.
+{{l|Doc:Animation_Basics/fi|Edellisessä oppaassa}} opetimme sinua tekemään yksinkertaisen animaation muuttamalla peruskuvioiden ominaisuuksia kuten paikkaa, väriä ja kokoa. Nämä perustyypit eivät silti useinkaan riitä monimutkaisten hahmojen ja kappaleiden tekoon. Niiden tekemiseen Synfig käyttää {{l|Layer/fi|tasoja}}. Ne muistuttavat muissa piirrosohjelmissa käytettäviä tasoja sikäli, että niiden avulla kuvan eri osat erotetaan toisistaan.
-However, Synfig's layers are different from layers in other programs in at least three respects:
+Synfigin tasot eroavat kuitenkin muiden ohjelmien tasoista ainakin kolmessa mielessä:
-# Every object, element, and effect gets its own layer.
+# Jokainen kuvio, osa ja tehoste on omalla tasollaan.
-# You can organize layers into hierarchical groups.
+# Tasot voi järjestää hierarkisiin ryhmiin.
-# You can use upper layers to change the behavior (or look) of underlying layers.
+# Ylempiä tasoja voi käyttää muuttamaan alempien tasojen käyttäytymistä (tai ulkonäköä).
-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.
+Kuten tulet huomaamaan, tasot ovat erittäin tärkeä osa Synfigiä, paljon enemmän kuin muissa grafiikkaohjelmissa.
-== Combining layers ==
+== Tasojen yhdistelmät ==
-So let's look at a simple example of how we can combine two layers to create a gradient effect on a rectangle.
+Katsotaanpa yksinkertaista esimerkkiä kahden tason yhdistämisestä toisiinsa gradienttitehosteen luomiseksi suorakaiteeseen.
-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.
+Avaa uusi tiedosto, jonka pituus on nolla. Tässä vaiheessa ei tarvitse huolehtia aikajanasta. Piirrä sitten suorakaidetyökalulla yksinkertainen suorakaide.
 [[Image:Adding-layers-tutorial-1.png|frame|center]]