Doc:Creating Shapes/pt

2010-07-01T02:38:43Z

Nqatsi:

{{Title|Criando Formas}}
[[Category:Manual]]
[[Category:Tutorials]]
[[Category:Tutorials Basic]]
[[Category:Updated]]
{{Navigation|Category:Manual|Doc:Flower Animation}}

{{Note|Atenção!|Este artigo está em processo de tradução! Você pode ajudar a traduzi-lo, ou revisá-lo. Obrigado pela compreensão. :)}}

== Introdução ==
Formas básicas como círculos ou retângulos são ótimas, mas um pouco inflexíveis geometricamente. Que tal criar formas mais complexas? Para isto, usamos a Ferramenta BLine.

== Ferramenta BLine ==
No Synfig, o este objeto é chamado BLine. É parecido com o que os outros programas chamam de "path" (caminho), exceto que ela é estritamente uma spline de hermite.
{{Note|Nota do Tradutor|Segundo a [http://pt.wikipedia.org/wiki/Spline Wikipédia], '''Splines''' são "curvas definidas matematicamente por dois ou mais pontos de controle."
'''Charles Hermite''' foi um matemático francês do século IX. Uma spline de hermite, é uma curva que utiliza as equações de Charles Hermite no seus cálculos.

Difícil entender, e difícil de traduzir : P

Já o nome '''BLine''', vem de "Belzier Line", ou Linha de Bélzier em português.}}

[[Image:Toolbox Reset Colors Button.png|right|frame|Botão de Restaurar Cores na Caixa de Ferramentas]] Antes de nós começarmos com o tutorial de BLine, vamos dar uma olhada em algumas notas adicionais sobre como o Synfig funciona. Quando a {{l|BLine_Tool|Ferramenta Bline}} é selecionada, você verá que os vértices do seu objeto selecionado atualmente (se há algum) irão desaparecer, mas a(s) camada(s) continuarão selecionadas no {{l|Layers Panel|Painel de Camadas}}. Isto é normal. Qualquer coisa que for criada com a será inserida acima da camada atualmente selecionada. Lembre-se de que se você quer inserir uma forma em algum lugar, é necessário selecioná-lo antes de clicar na {{l|BLine_Tool|Ferramenta BLine}} — mudar a seleção depois disto irá automaticamente mudar de volta para a Ferramenta Transformar.

Agora, vá em frente e clique no botão {{Literal|Reiniciar Cores}} no canto inferior esquerdo da {{l|Toolbox|caixa de ferramentas}}, ao lado do seletores de cor de Contorno/Preenchimento. Isto irá reiniciar as cores de volta ao preto e branco. Além disso, selecione um tamanho maior para a {{l|New Layer Defaults#Default Line Width|largura padrão de linha}} — 10pt deverão servir.

Depois de mudar para a ferramenta BLine, de uma olhada no Painel de Opções de Ferramenta. Tenha certeza que apenas {{Literal|Criar Região BLine}}, {{Literal|Criar Contorno BLine}} e {{Literal|Conectar Origens}} estão marcados.

Clicar com o mouse na tela irá colocar vértices. Enquanto se posiciona um vértice, é possível mudar a sua tangente, arrastando sem soltar o mouse. Faça isso várias vezes, e você criou uma BLine.

Lembre-se que durante esta construção, não existe nada impedindo você de mover um vértice ou uma tangente, se você não gostou de onde os colocou. Sério! Se você quer remover um vértice, clique com o botão direito sobre ele e selecione {{Literal|Remover Vértice}}. Quer fechar a BLine? Clique com o botão direito na primeiro vértice e selecione {{Literal|Fechar BLine}}.

[[Image:Creating-shapes-2-bline-construction.png|center|frame]]

Digamos, que você têm sua primeira BLine onde queria. Isto é ótimo. Mas você deve ter notado que as camadas não foram criadas ainda. Isto é porque ainda estamos no modo de construção. Existem dois modos de criar as camadas: apenas mudar para outra ferramenta, ou pressionar o botão {{Literal|Criar}}, na parte de baixo do Painel de Opção de Ferramntas (o ícone que se parece com uma engrenagem). Por enquanto, apenas vá em frente e clique na {{l|Transform Tool|Ferramenta Transformar}}, porque terminamos com a Ferramenta BLine.

[[Image:Creating-shapes-3-bline-region-outline.png|center|frame]]

== Editando BLines ==
OK, temos agora uma bela região em branco com um contorno preto espeço. Como marcamos {{Literal|Criar Região BLine}}, {{Literal|Criar Contorno BLine}} no passos anteriores, você notará que criamos duas camadas — o {{l|Outline Layer|Contorno}} e o {{l|Region Layer|Preenchimento}} no Painel de Camadas. Apesar do fato de serem duas camadas diferentes, os parâmetros de seus vértices foram {{l|Linking|Conectados}} — então você pode selecionar qualquer um, mover seus manipuladores, e o outro irá mudar da mesma forma.

Se você quer manipular os vértices ''depois'' de criar as camadas, é muito fácil fazê-lo. Apenas clique em uma das camadas e o faça. Se quiser remover um vértice, clique com o botão direito sobre ele e selecione {{Literal|Remover Item (Smart)}}. Quer inserir um ponto em algum lugar? Dê um clique direito no segmento que quiser inserir algo e selecione {{Literal|Inserir item (Smart)}}.

{{Note|Nota|A única diferença entre este modo normal de editar e o modo de construção é apenas como você divide as tangentes — no modo de construção clique com o botão direito na própria tangente. No modo de edição de manipuladores, você deve clicar com o botão direito no vértice em que suas tangentes estão fixadas. Isto pode ser considerado um bug de usabilidade, e será resolvido em breve.}}

Pode parecer que isto fará das camadas uma grande bagunça. E sim, se você não estiver utilizando o software da forma certa, é exatamente o que irá acontecer. Mas existe uma forma de escapar da insanidade. Como mencionada no {{l|Doc:Adding Layers|tutorial anterior}}, você pode {{l|encapsulate|encapsular}} camadas em uma hierarquia.

Mais uma coisa a ser mencionada antes de terminar. É possível mudar a largura do contorno em cada vértice. Para isto selecione a camada do contorno (NOTA: você deve seleciona a Camada de Contorno, a Camada de Região não tem dados para largura) e movendo os manipuladores roxos. Por padrão, eles não aparecem na tela. Para mudar isto, pressione {{Shortcut|alt|5}} ou clique no botão {{Literal|Mostrar Manipuladores de Largura}}, no topo da janela da tela (o quinto da esquerda para a direita). Repita para escondê-los de novo. Outros coisas que podem ser escondidas podem ser acessadas no {{l|Canvas Menu Caret|Menu de Seta da Tela}}: {{c|View|Show/Hide Ducks}}.

== Usando uma mesa gráfica para desenhar formas ==
Se você tem uma [http://pt.wikipedia.org/wiki/Tablete_gr%C3%A1fico mesa gráfica] é possível usar a Ferramenta Desenhar para criar BLines.

O Synfig Studio tem suporte a pressão, mas você precisa configurá-lo primeiro. Vá em {{c|File|Input Devices...}} no menu da Caixa de Ferramentas. Ache sua mesa no diálogo Input e mude seu modo para {{Literal|Screen}}.

Agora pegue sua caneta, crie um novo projeto e clique no botão da ferramenta Desenhar, na Caixa de Ferramentas. Mude o valor largura padrão da linha para um valor grande o suficiente — digamos 15pt — caso contrário você não notará nenhum efeito de pressão. Escolha marrom como a cor padrão de preenchimento.

{{Note|Nota|Os passos anteriores devem ser feitos com a caneta da sua mesa gráfica, não com o mouse. O Synfig Studio grava as definições para cada dispositivo independentemente. Isto porque se você determinar estas opções com o mouse, não haverá nenhuma diferença quando mudar para a mesa gráfica.}}
Tenha certeza de ter as mesmas opções no Painel de Opções de Ferramenta que as mostradas na imagem abaixo.

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

Vamos desenhar alguma coisa como uma montanha irregular para o fundo. Comece a desenhar uma linha pela borda esquerda, em direção ao meio da tela. Tente variar a pressão enquanto você desenha. Pare perto do centro da tela. Este é a sua primeira linha. Perceba que uma nova camada de contorno foi criada no Painel de Camadas.

[[Image:Creating-shapes-4-draw.png|center|frame]]

Coloque o cursor de sua caneta sobre o último manipulador da nova BLine e continue desenhando em direção à borda direita da tela. Quando terminar, olha novamente para o Painel de Camadas. Ainda há apenas uma camada de contorno. o Synfig Studio é esperto o suficiente para perceber que você não precisa de uma nova camada de contorno e estende perfeitamente a última. É possível estender a BLine de ambas as pontas, mas se você começar a desenhar de qualquer outro lugar da tela, uma nova camada será criada. Sua primeira linha continuará selecionada e nada o impede de estendê-la mais tarde.

Voltando a arte. No Painel de Opções de Ferramenta, pressione o botão que o ícone é um baldinho para preencher o contorno que acabamos de criar. Uma camada de preenchimento irá aparecer no topo da camada em que estamos trabalhando no momento. Selecione a camada de contorno e pressione o botão {{Literal|Mover Camada Acima}} no painel de camadas, para colocar o contorno no topo do preenchimento.

[[Image:Creating-shapes-5-draw.png|center|frame]]

Estenda com uma linha, de ambos os lados, até abaixo dos cantos da tela, para o preenchimento aparecer. Ótimo.

[[Image:Creating-shapes-6-draw.png|center|frame]]

Vá em frente e adicione algumas linhas mais no topo da área preenchida para dar uma aparência de montanha. Se os manipuladores marrons estão no seu caminho, você pode escondê-los, clicando no botão {{Literal|Esconder Manipuladores de Vértices}} no topo da janela da tela (o segundo da esquerda para a direita).

[[Image:Creating-shapes-7-draw.png|center|frame]]

== Outras maneiras de criar BLines ==
Isso é tudo? Ainda não. Você pode usar as ferramentas Círculo, Retângulo, Estrela e Polígono para criar BLines também. Apenas marque as opções {{Literal|Create Outline BLine}} e {{Literal|Create Region BLine}} no Painel de Opções de Ferramenta enquanto as usa.

Criando figuras geométricas primitivas como BLine permite a você um melhor controle sobre sua forma e aparência. Por exemplo, se você quer uma estrela deformada, então pode usar a Ferramenta Estrela para criá-la como contorno e região de BLine, e então, usar a Ferramenta Transformar para deformá-la.

Agora estamos prontos para o {{L|Doc:Flower Animation|último tutorial}} desta seção. Não vá embora agora!

Doc:Creating Shapes

2010-07-01T02:38:00Z

Nqatsi: /* Using tablet to draw shapes */

{{Title|Creating Shapes}}
[[Category:Manual]]
[[Category:Tutorials]]
[[Category:Tutorials Basic]]
[[Category:Updated]]
{{Navigation|Category:Manual|Doc:Flower Animation}}


== Introduction ==

Basic primitives such as circles or rectangles are all great, but they are pretty much geometrically inflexible. What about creating more complex shapes? To do this, we use BLine Tool.

== BLine Tool ==

In Synfig, the construct for describing shapes is called a Bline. This is roughly analogous to a "path" in other programs, except that it is strictly a hermite spline.

[[Image:Toolbox Reset Colors Button.png|right|frame|Reset Colors button in the Toolbox]] Before we start with the BLine tutorial, let's look at some additional notes on how Synfig works. When you click on the {{l|BLine_Tool|Bline Tool}}, you will see that the vertices from your currently selected object (if there was one) will disappear, but the layer(s) will still remain selected in the {{l|Layers Panel}}. This is normal. Anything you create with the {{l|BLine_Tool|BLine Tool}} will be inserted above the currently selected layer. Keep in mind that if you want to insert a shape somewhere, you should select where you want to insert it before you go into the {{l|BLine_Tool|Bline Tool}} — changing the selection afterward will automatically swap you back to the Transform Tool.

Now, go ahead and click on the {{Literal|Reset Colors}} button in the lower left corner of the FG/BG color widget in the {{l|Toolbox|toolbox}}. This will reset us back to the default black and white. Also, set the {{l|New Layer Defaults#Default Line Width|default line width}} to something nice and thick — 10pt should do the trick.

After you switched to BLine tool, take a look at the Tool Options Panel. Make sure that only {{Literal|Create Region BLine}}, {{Literal|Create Outline BLine}} and {{Literal|Link Origins}} are checked.

Clicking with your mouse in the canvas will place vertices. While you are placing a vertex, you can drag out its tangent by dragging the mouse. Do this over and over, and you construct a Bline.

Keep in mind, however, that during this construction, there is nothing stopping you from just moving it if you don't like where you placed a vertex or a tangent. Honest! If you want to remove a vertex, right click on it and select {{Literal|Delete Vertex}}. Want to split the tangents? Right click on the tangent and hit {{Literal|Split Tangents}}. Want to loop the bline? Right click on the first vertex and select {{Literal|Loop BLine}}.

[[Image:Creating-shapes-2-bline-construction.png|center|frame]]

So we assume you got your first BLine laid out like you want it. That's great. But you may have noticed that the layers have not been created yet. That's because we are still in construction mode. There are two ways to create the layers: just either switch to another tool, or press the {{Literal|Create}} button at the bottom of the Tool Options Panel (it's the icon that looks like a gear). For now, just go ahead and click on the {{l|Transform Tool}} because we are done with the Bline Tool.

[[Image:Creating-shapes-3-bline-region-outline.png|center|frame]]

== Editing BLines ==

Ok, we now have a nice pretty white region with a thick black outline. Since we checked {{Literal|Create Region BLine}} and {{Literal|Create Outline BLine}} in previous steps, you'll notice that there are two layers that we have created — the {{l|Outline Layer|Outline}} and the {{l|Region Layer|Region}} in the Layers Panel. Despite the fact that they are two separate layers, their vertices parameter has already been {{l|Linking|linked}} — so you can select either one and move its ducks around and the other one will also change.

If you want to manipulate the vertices ''after'' you have created the layers, it is very easy to do so. Just click on one of the layers and have at it. If you want to remove a vertex, right click on it and hit {{Literal|Remove Item (smart)}}. Want to insert a point somewhere? Right click on the segment where you want to insert something and hit {{Literal|Insert item (smart)}}.

{{Note|Note|The only major difference between this normal editing mode and the construction mode is in how you split the tangents — in construction mode you right click on the tangent itself. In normal duck editing mode, you must right click on the vertex that the tangents are attached to. This could be considered a usability bug, and it will be resolved at some point.}}

This may appear to be leading to a mess of layers. And yes, if you aren't using the software properly, that is exactly what you will get. But there is a way to make this more sane. As mentioned in the {{l|Doc:Adding Layers|previous tutorial}}, you can {{l|encapsulate|encapsulate}} layers into hierarchy.

One quick thing to mention before I finish up. You can change the width of an outline at each vertex. You do this by selecting the outline layer (NOTE: you must select the Outline Layer, the Region Layer has no width data) and tweaking with the width ducks. By default, these are masked. To show them, press {{Shortcut|alt|5}} or click {{Literal|Toggle width ducks}} button at the top of the canvas window (the fifth one from the left). Repeat to hide them again. You can also see other things to mask via the {{l|Canvas Menu Caret}}: {{c|View|Show/Hide Ducks}}.

== Using tablet to draw shapes ==

If you have [http://en.wikipedia.org/wiki/Graphics_tablet graphic tablet] you can use Draw Tool to create BLines.

Synfig Studio supports pressure sensitivity, but you need to configure it first. Go to {{c|File|Input Devices...}} from toolbox menu. In the Input dialog find your tablet's stylus device and set its mode to {{Literal|Screen}}. Click {{Literal|Save}} and then {{Literal|Close}}.

Now grab your stylus, create new file and click on the Draw Tool button in the toolbox. Set default line width value to be big enough — say, 15pt — otherwise you will not notice any pressure sensitivity effect. Choose brown as default fill color.

{{Note|Note|Steps above should be done with stylus of your tablet, not the mouse. Synfig Studio remembers settings for each input device independently. That's why if you set those options with your mouse device they will not have any effect when you switch to stylus.}}
In the Tool Options Panel, make sure that you have same options as shown on screenshot below.

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

Now let's draw some thing like curvy mountain background. Start drawing a line from the left border to the middle of the canvas. Try to vary pressure while you drawing. Stop near the center of the canvas. This is your first line. Notice new outline layer created in the Layers Panel.

[[Image:Creating-shapes-4-draw.png|center|frame]]

Point your stylus at the last duck of your new BLine and continue drawing to the right border of the canvas. When you finish, look at the Layers Panel again. There's still only one outline layer. Synfig Studio is smart enough to figure out that you don't need a new outline layer and properly extends the last one. You can extend the BLine from both ends, but if you start drawing from any other place of the canvas a new outline layer will be created. Though, your first line will remain selected and nothing stops you to extend it later.

Back to our artwork. At the Tool Options Panel hit the button with bucket icon to fill the outline we just created. A region layer will appear at the top of the layer we are working with. Select outline layer and press {{Literal|Raise Layer}} button in the layers panel to put outline layer on top of the region.

[[Image:Creating-shapes-5-draw.png|center|frame]]

Extend a line from both sides down to the corners of the canvas to make fill appear at the bottom. Great.

[[Image:Creating-shapes-6-draw.png|center|frame]]

Go ahead and add a few more lines on top of the filled area to give it a mountain-like look. If brown ducks are on your way, you can hide them by clicking the {{Literal|Toggle vertex ducks}} button at the top of canvas window (the second one from the left).

[[Image:Creating-shapes-7-draw.png|center|frame]]

{{Note|Warning!|Don't use {{Shortcut|Alt|2}} shortcut to turn off visibility of vertex ducks while you using Draw Tool. There's a bug that will cause Synfig Studio to hang.}}
Draw tool is great for drawing complex shapes, but you end up with a bunch of ducks, which are hard to manipulate with the Transform Tool in the way we described above. There are two solutions here.

First, you can increase {{Literal|Smooth}} value in the Tool Options Dialog while using Draw Tool. That will reduce the count of vertices produced at drawing time, but will make your shape less detailed.

Second, you can use Smooth Move Tool to deform existing shape. Go for it and click Smooth Move Tool button in the toolbox. The trick about this tool is that it affects ''selected ducks only''. Press and hold your left mouse button at the empty place of the canvas. Drag to create selection box. Release mouse button when you are done. Or just hit {{Shortcut|Ctrl|a}} to select all ducks. Now you can deform selected segments of BLines. You can change size of influence area by tweaking {{Literal|Radius}} at the Tool Options Panel.

What about outline width? There is a Width Tool for that purpose. It is designed for increasing or decreasing the width of a line much like you would with a pencil on paper. Click Width Tool button on the toolbox, move your stylus over the line you want to change, press and move cursor back and forth along the line, like you scratching something. The width of outline will be increased at the places where you moved the cursor. If you want to decrease the width, just hold "Ctrl" while scratching. Easy!

If you don't want Width Ducks to be displayed, during usage of the Width Tool, just turn them off by pressing {{Literal|Toggle width ducks}} button at the top of canvas window.

{{Note|Warning!|Don't use {{Shortcut|Alt|5}} shortcut to turn off visibility of width ducks while you using Width Tool. There's a bug that will cause Synfig Studio to hang.}}

== Other ways to create BLines ==

Is that all? Not yet. You can use Circle, Rectangle, Star and Polygon tools to create BLines too. Just check the {{Literal|Create Outline BLine}} and {{Literal|Create Region BLine}} options at Tool Options Panel when using those tools.

Creating geometric primitive as BLine gives you a better control over it's shape and look. For example, if you want a deformed star, then you can use Star Tool to create it as outline and region BLines and then use Transform Tool to deform it.

Now you are ready for the {{L|Doc:Flower Animation|last tutorial}} in this section. Hang on!

Doc:Creating Shapes/pt

2010-06-26T22:53:17Z

Nqatsi:

Doc:Creating Shapes/pt

2010-06-26T22:43:46Z

Nqatsi:

Doc:Creating Shapes/pt

2010-06-26T22:43:24Z

Nqatsi:

2010-06-25T05:23:52Z

Nqatsi:

Doc:Adding Layers/pt

2010-06-25T04:44:06Z

Nqatsi:

{{Title|Adicionando Camadas}}
{{Navigation|Category:Manual|Doc:Creating_Shapes}}
[[Category:Manual]]
[[Category:Tutorials]]
[[Category:Tutorials Basic]]
[[Category:Updated]]


{{Note|Atenção!|Este artigo está em processo de tradução! Você pode ajudar a traduzi-lo, ou revisá-lo. Obrigado pela compreensão. :)}}

== Introdução ==

No {{l|Doc:Animation_Basics|tutorial anterior}}, você fez sua primeira animação simples, mudando atributos de objetos primitivos, como posição, cor e tamanho. Estes simples atributos são mais do que suficientes para criar objetos e personagens mais complexos. Para isto, o Synfig usa {{l|Layer|camadas}}. Elas são similares às camadas usadas em outros aplicativos para desenho, uma vez que servem para separar diferentes elementos de uma imagem.

Entretanto, as camadas do Synfig são diferentes de camadas de outros programas em pelo menos três aspectos:
# Cada objeto, elemento, e efeito têm uma camada própria.
# Você pode organizar camadas em hierarquias de grupos.
# Você pode usar camadas para mudar o comportamento (ou a aparência) das camadas abaixo.

Como você irá perceber, camadas são um aspecto extremamente importante do Synfig. Muito mais do que a maioria dos programas de edição gráfica. Entender o conceito de camadas é uma parte importante para entender como o Synfig funciona.

== Combinando Camadas ==
Vejamos um exemplo simples de como podemos combinar duas camadas para criar um efeito de gradiente em um retângulo.

Crie um novo projeto com um valor zero na duração. Não precisamos nos preocupar com a linha do tempo por hora. Em seguida, crie um retângulo simples com a Ferramenta Retângulo {{l|Image:Rectangle_icon.png|32px}}.

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

Selecione a {{l|Gradient Tool|Ferramenta Gradiente}} {{l|Image:Gradient_icon.png|32px}} na {{l|Category:Toolbox|Caixa de Ferramentas}}, clique com o botão esquerdo do mouse na tela, arraste para mudar a direção do gradiente e solte o botão quando terminar. Você deve ter notato que outra camada foi adicionada no {{l|Painel de Camada}}, chamada '''Gradiente'''. Nada especial.

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

{{Note|Nota|Se você não ver nenhum gradiente, mas apenas uma cor chapada, isto significa que você provavelmente clicou na tela sem arrastar seu mouse. Para arrumar isto, selecione a {{l|Transform Tool|Ferramenta Transformar}}, e clique na tela para ativar os manipuladores do gradiente. Você precisa clicar naquele que você vê e movê-lo até o gradiente aparecer.}}
O que se tem agora é um gradiente, mas não é o que você queria: ele se espalha por toda tela. O objetivo era colocar o gradiente apenas no retângulo. Então, vamos concertar isto.

No {{l|Painel de Camadas}}, selecione ambos as camadas do gradiente e do retângulo. Então, clique com o botão direito do mouse e selecione {{Literal|{{l|Encapsulate}}}} no menu. O conteúdo do Painel de Camadas deve ter mudado agora, mostrando uma pequena caixa nomeada "{{l|Paste Canvas|Inline Canvas}}" com uma seta na frente. Clicando nesta seta, esta camada pode ser expandida, mostrando seu conteúdo: suas duas camadas anteriores - o gradiente e o retângulo.

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

Esta camada pode ser tratada como qualquer outra camada — mover, duplicar, copiar e colar. Se você quiser mudar o nome dela para algo mais descritivo, apenas selecione a camada na aba de camadas, e clique no seu nome para editá-lo. Isto pode ser feito para QUALQUER camada, e nós o encorajamos a fazê-lo.

== Usando a localização ==
Entretanto, há um problema: o gradiente ainda cobre a tela toda embora nós queremos que ele fique restrito ao retângulo. Para isto, ative a camada do gradiente no Painel de Layers. Agora vá ao {{l|Painel de Parâmetros}} (por padrão ele fica na janela debaixo), e procure pelo atributo chamado {{Literal|{{l|Blend Method}}}}. Dê um duplo-clique na entrada e selecione {{Literal|{{l|Blend Method#Onto|Onto}}}} no meno que se abriu.

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

Agora, o gradiente deve estar restrito ao retângulo. Parabéns! Você acabou de criar seu primeiro efeito através de camadas interativas com o Synfig.

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

Levando em consideração apenas a organização adicional, encapsular camadas melhora drasticamente a facilidade de se usar o Synfig Studio. Mas muitos programas podem fazer isto. O conceito de ''alcance'' como demonstrado, diferencia o Synfig de outros programas com hierarquias de camadas. O ponto principal é que camadas podem modificar '''apenas''' dados que estão '''diretamente''' embaixo delas. Em outras palavras, se você colocar uma {{l|Blur Layer|Camada de Desfoque}} no topo das camadas dentro da {{l|Paste Canvas|Tela Incorporada}} que nós criamos, elas serão desfocadas — qualquer coisa a baixo desta não será desfocada! Vamos tentar.

== Usando camadas para modificar outras camadas ==
Esteja certo que a Tela Incorporada está selecionada e crie dois outros {{l|Circle Tool|círculos}} vermelhos. Eles irão aparecer à cima da sua seleção. Selecione a camada da Tela Incorporada e use o botão {{Literal|Raise Layer|Mover à cima}} na parte de baixo do Painel de Camadas, para mandá-la para cima dos círculos.

[[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.

Sua camada da tela incorporada (com o retângulo e o gradiente) agora está na frente dos dois círculos.

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

Expanda a tela incorporada para mostrar seu conteúdo, e selecione a camada do topo dentro dela (o gradiente). É aqui que queremos que você adicione a nova camada. Crie outro círculo preenchido com a cor preta. O círculo preto irá ser criado à cima da camada do gradiente, dentro da tela incorporada.
{| style="margin: 0 auto; text-align: center;"
|-
| [[Image:Adding-layers-tutorial-8.png|center|frame]]
| [[Image:Adding-layers-tutorial-9.png|center|frame]]
|}

Agora, clique com o botão direito sobre a camada do círculo preto, no Painél de Camadas, e um menu irá aparecer. O primeiro item é {{Literal|New Layer}}. Dentro deste item estão várias categorias de camadas que você pode criar, mas a que nos queremos é o desfoque, então vá para a categoria "''Blurs''" e selecione {{Literal|Blur}} (então, o caminho seria: {{c|New Layer|{{l|Blur Layer Category|Blurs}}|{{l|Blur Layer|Blur}}}}).
{| style="margin: 0 auto; text-align: center;"
|-
| [[Image:Adding-layers-tutorial-10-composite-blur.png|center|frame]]
| [[Image:Adding-layers-tutorial-12.png|frame|center]]
|}

Bom, desfocou... mas alguma coisa não está certa — a borda de fora dos conteúdos da tela incorporada continuam nítidos. Isto acontece porque o modo de mistura do desfoque é {{Literal|{{l|Blend Method#Composite|Composite}}}} por padrão (você pode mudar o {{l|New Layer Defaults#Default Blend Method|método padrão de mistura}} para novas camadas pela seção {{l|New Layer Defaults}} na Caixa de Ferramentas). O que nós queremos é um método de mistura {{Literal|{{l|Blend Method#Straight|Straight}}}}. Apenas selecione a camada de desfoque, e mude o método de mistura para {{Literal|Straight}} no Painel de Parâmetros.

{{Note|Nota|Provavelmente nós iremos mudar a maneira como os métodos de mistura padrão são usados no futuro — a maneira atual parece apenas criar aborrecimentos como este.}}
[[Image:Adding-layers-tutorial-11.png|frame|center]]

OK, agora temos todos os conteúdos da tela incorporada desfocados, mas todo o resto a baixo está nítido!

== Indo mais fundo... ==

Doc:Adding Layers/pt

2010-06-25T04:27:21Z

Nqatsi:

Doc:Adding Layers/pt

2010-06-25T04:17:19Z

Nqatsi:

{{Title|Adicionando Camadas}}
{{Navigation|Category:Manual|Doc:Creating_Shapes}}
[[Category:Manual]]
[[Category:Tutorials]]
[[Category:Tutorials Basic]]
[[Category:Updated]]


{{Note|Atenção!|Este artigo está em processo de tradução! Você pode ajudar a traduzi-lo, ou revisá-lo. Obrigado pela compreensão. :)}}

== Introdução ==

No {{l|Doc:Animation_Basics|tutorial anterior}}, você fez sua primeira animação simples, mudando atributos de objetos primitivos, como posição, cor e tamanho. Estes simples atributos são mais do que suficientes para criar objetos e personagens mais complexos. Para isto, o Synfig usa {{l|Layer|camadas}}. Elas são similares às camadas usadas em outros aplicativos para desenho, uma vez que servem para separar diferentes elementos de uma imagem.

Entretanto, as camadas do Synfig são diferentes de camadas de outros programas em pelo menos três aspectos:
# Cada objeto, elemento, e efeito têm uma camada própria.
# Você pode organizar camadas em hierarquias de grupos.
# Você pode usar camadas para mudar o comportamento (ou a aparência) das camadas abaixo.

Como você irá perceber, camadas são um aspecto extremamente importante do Synfig. Muito mais do que a maioria dos programas de edição gráfica. Entender o conceito de camadas é uma parte importante para entender como o Synfig funciona.

== Combinando Camadas ==
Vejamos um exemplo simples de como podemos combinar duas camadas para criar um efeito de gradiente em um retângulo.

Crie um novo projeto com um valor zero na duração. Não precisamos nos preocupar com a linha do tempo por hora. Em seguida, crie um retângulo simples com a Ferramenta Retângulo {{l|Image:Rectangle_icon.png|32px}}.

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

Selecione a {{l|Gradient Tool|Ferramenta Gradiente}} {{l|Image:Gradient_icon.png|32px}} na {{l|Category:Toolbox|Caixa de Ferramentas}}, clique com o botão esquerdo do mouse na tela, arraste para mudar a direção do gradiente e solte o botão quando terminar. Você deve ter notato que outra camada foi adicionada no {{l|Painel de Camada}}, chamada '''Gradiente'''. Nada especial.

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

{{Note|Nota|Se você não ver nenhum gradiente, mas apenas uma cor chapada, isto significa que você provavelmente clicou na tela sem arrastar seu mouse. Para arrumar isto, selecione a {{l|Transform Tool|Ferramenta Transformar}}, e clique na tela para ativar os manipuladores do gradiente. Você precisa clicar naquele que você vê e movê-lo até o gradiente aparecer.}}
O que se tem agora é um gradiente, mas não é o que você queria: ele se espalha por toda tela. O objetivo era colocar o gradiente apenas no retângulo. Então, vamos concertar isto.

No {{l|Painel de Camadas}}, selecione ambos as camadas do gradiente e do retângulo. Então, clique com o botão direito do mouse e selecione {{Literal|{{l|Encapsulate}}}} no menu. O conteúdo do Painel de Camadas deve ter mudado agora, mostrando uma pequena caixa nomeada "{{l|Paste Canvas|Inline Canvas}}" com uma seta na frente. Clicando nesta seta, esta camada pode ser expandida, mostrando seu conteúdo: suas duas camadas anteriores - o gradiente e o retângulo.

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

Esta camada pode ser tratada como qualquer outra camada — mover, duplicar, copiar e colar. Se você quiser mudar o nome dela para algo mais descritivo, apenas selecione a camada na aba de camadas, e clique no seu nome para editá-lo. Isto pode ser feito para QUALQUER camada, e nós o encorajamos a fazê-lo.

== Usando a localização ==
Entretanto, há um problema: o gradiente ainda cobre a tela toda embora nós queremos que ele fique restrito ao retângulo. Para isto, ative a camada do gradiente no Painel de Layers. Agora vá ao {{l|Painel de Parâmetros}} (por padrão ele fica na janela debaixo), e procure pelo atributo chamado {{Literal|{{l|Blend Method}}}}. Dê um duplo-clique na entrada e selecione {{Literal|{{l|Blend Method#Onto|Onto}}}} no meno que se abriu.

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

Agora, o gradiente deve estar restrito ao retângulo. Parabéns! Você acabou de criar seu primeiro efeito através de camadas interativas com o Synfig.

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

Levando em consideração apenas a organização adicional, encapsular camadas melhora drasticamente a facilidade de se usar o Synfig Studio. Mas muitos programas podem fazer isto. O conceito de ''alcance'' como demonstrado, diferencia o Synfig de outros programas com hierarquias de camadas. O ponto principal é que camadas podem modificar '''apenas''' dados que estão '''diretamente''' embaixo delas. Em outras palavras, se você colocar uma {{l|Blur Layer|Camada de Desfoque}} no topo das camadas dentro da {{l|Paste Canvas|Tela Incorporada}} que nós criamos, elas serão desfocadas — qualquer coisa a baixo desta não será desfocada! Vamos tentar.

== Usando camadas para modificar outras camadas ==
Esteja certo que a Tela Incorporada está selecionada e crie dois outros {{l|Circle Tool|círculos}} vermelhos. Eles irão aparecer à cima da sua seleção. Selecione a camada da Tela Incorporada e use o botão {{Literal|Raise Layer|Mover à cima}} na parte de baixo do Painel de Camadas, para mandá-la para cima dos círculos.

[[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.

Agora sua camada da tela incorporada (com o retângulo e o gradiente) está na frente dos dois círculos.

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

Expanda a tela incorporada para mostrar seu conteúdo, e selecione a camada do topo dentro dela (o gradiente). É aqui que queremos que você adicione a nova camada. Crie outro círculo preenchido com a cor preta. O círculo preto irá ser criado à cima da camada do gradiente, dentro da tela incorporada.
{| style="margin: 0 auto; text-align: center;"
|-
| [[Image:Adding-layers-tutorial-8.png|center|frame]]
| [[Image:Adding-layers-tutorial-9.png|center|frame]]
|}

== Indo mais fundo... ==

Doc:Adding Layers/pt

2010-06-25T02:27:12Z

Nqatsi:

Doc:Adding Layers/pt

2010-06-24T23:02:26Z

Nqatsi:

Doc:Adding Layers/pt

2010-06-24T21:43:57Z

Nqatsi:

Doc:Animation Basics/pt

2010-06-24T20:51:12Z

Nqatsi:

{{Title|Principios da Animação}}
{{Navigation|Category:Manual|Doc:Adding Layers}}
[[Category:Manual]]
[[Category:Tutorials]]
[[Category:Tutorials Basic]]
[[Category:Updated]]


== Introdução ==

Criar uma animação no Synfig Studio é muito fácil. Consiste basicamente em mudar um desenho — você precisa apenas criar o primeira e última fase da mudança, e o Synfig cuidará dos passos intermediários.

Vejamos um simples exemplo. Considere uma luz em movimento como aquela na frente do carro da Super Máquina (''Knight Rider''). Se deixar o realismo de lado, você tem um circulo se movendo da esquerda para a direita, e vice versa. Em outras palavras, você precisa criar três "passos" ou "fases":

# O círculo está na esquerda.
# O círculo está na direita.
# O círculo está de volta à esquerda.

Vamos fazer isto.

== Preparando a área de trabalho ==

Abra o Synfig Studio. Novos arquivos automaticamente são criado no início. Clique no menu da seta (entre as réguas horizontal e vertical, no lado superior esquerda da tela), e então selecione {{c|Edit|Properties}}. Um diálogo de propriedades da tela irá aparecer.

{{DevNotesBegin}}
'''Nota dos Desenvolvedores'''

O diálogo de propriedades da tela é uma bagunça, é verdade. Nós o re-desenharemos para ser algo muito mais compreensível em algum ponto do futuro. Por enquanto, ignore as seções "Image Area" e "Locks and Links".
{{DevNotesEnd}}

Dê um nome e descrição para sua tela, e clique em "Aplicar" (não clique em "Salvar" — não terminamos com as propriedades ainda). Vá na aba {{Literal|Time}} e tenha certeza de editar {{Literal|End Time}}. Mude de '5s' para '2s' — isso irá fazer com que nossa animação tenha 2 segundos de duração.

[[Image:File Properties Dialog - End Time.png|center|frame|Diálogo de Propriedades da Tela]]

Agora crie um retângulo preto simples que servirá como nosso fundo. Não é necessário fazê-lo cobrir toda a tela. Também, desmarque a opção {{Literal|Low Res}} no topo da janela da tela para desabilitar o modo de visualização de baixa resolução - isso fará com que sua imagem fique mais nítida. Geralmente, ter esta opção habilitada aumenta a velocidade de atualização da tela, mas não precisamos disto agora.

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

Agora precisamos de um círculo. Mude a cor do preenchimento para vermelho, e crie um círculo. Não importa se não está perfeito: você pode editá-lo depois . Selecione a Ferramenta Transformar, e clique no círculo. Ele entrará num modo de edição que é fácil de perceber pelo pequeno ponto verde no meio, e o retângulo branco ao seu redor. Você pode mover o círculo vermelho clicando no seu pontinho verde.

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

Estes são os primeiros passos para desenhar um objeto e movê-lo. Mas, não é uma animação ainda, obviamente. É verdade, vamos dar uma olhada em como isto funciona.

== Adicionando Movimento ==

No começo, você entrou um valor de 2 segundos no Diálogo de Propriedades. Por a duração da sua animação ser diferente de zero, a janela da tela (onde você desenha) tem uma linha do tempo cinza na parte de baixo. Você pode clicar ali e um pequeno cursor laranja irá aparecer, indicando sua posição no tempo. Tente clicar em vários lugares diferentes na linha do tempo, e perceba que a caixa de texto à esquerda muda o valor para algo como {{Literal|12f}}, {{Literal|1s 15f}}, etc. Você pode mudar sua posição na linha do tempo trocando os valores nesta caixa. Por exemplo, se você digitar {{Literal|1s}} e pressionar {{Shortcut|enter}}, o cursor laranja irá se mover para a metade da linha do tempo, e entrar com um valor de {{Literal|2s}} irá movê-lo para o final.

{{Note|Nota|No último exemplo, o cursor laranja ficará invisível, porque 2s é bem em cima da borda da linha do tempo, mas acredite em mim — está lá.}}
Mas quando você muda sua posição na linha do tempo, nada muda na tela. Isto é porquê você precisa mudar para o {{Literal|Modo de Edição de Animação}} primeiro, clicando no último botão verde, à direita da linha do tempo cinza. É possível notar que sua tela ganha um contorno vermelho: isto é para lembrá-lo que qualquer mudança nos objetos daqui em diante, afetará a sua animação.

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

Foram mencionados antes três "passos" ou "fases". Estes são representados pelos chamados "{{l|Keyframe|quadros-chave}}" (apenas no caso de você estar familiarizado com codificação de vídeo: não, não é a mesma coisa!). Um quadro-chave é uma imagem no tempo onde algo importante acontece com seus objetos.

Vá ao painel de quadros-chave — clique na aba com o desenho de uma chave, na janela debaixo — para editá-los. Agora pressione o botão com um sinal de "soma" e você terá uma nova entrada na lista mostrando algo como: {{Literal|0f, 0f, (JMP)}}.

[[Image:Keyframes Panel.png|center|frame]]

Agora vá até a marca de {{Literal|1s}} na linha do tempo. O cursor laranja deverá se mover para lá. Então, adicione outro quadro-chave clicando no ícone de soma de novo. Repita o processo com o cursor na linha do tempo aos {{Literal|2s}} (o final da sua animação). Você deverá ter agora três entradas na lista.

[[Image:Keyframes Panel 2.png|center|frame]]

== Os 'S's e 'f's: Entendendo a linha do tempo ==
A esta altura, você já deve ter percebido o que aquelas misteriosas marcações "1s 10f" representam. Elas indicam um ponto específico na linha do tempo, expressando a localização em termos de segundos (s) e quadros (f). ['''''Nota do tradutor:''' o 'f' vem de "frames" - quadros em inglês'']

Por padrão, cada segundo é dividido em 24 quadros, assim como um metro em uma trena é dividido em 100 centímetros. As marcações dos quadros começam em zero (0) e vão até 24. Assim que um novo segundo é atingido, o contador de quadros volta a zero.

Por exemplo, quando cinco segundos inteiros e três quadros tiverem passado, usando esta noção de tempo, será {{Literal|5s 3f}}.

== A lista de Quadros-Chave ==
A lista de quadros-chave é mais fácil de entender. Ela mostra as entradas {{Literal|Time}} que é basicamente o tempo onde começa o quadro, {{Literal|Length}} que é a duração, {{Literal|Jump}} que abordaremos em seguida, e {{Literal|Description}} que é uma descrição do que acontece neste quadro-chave.

Você deve estar se perguntando sobre as entradas chamadas {{Literal|(JMP)}}. Na verdade, elas são como os links na internet: clique-os, e o cursor na linha do tempo irá pular para o tempo respectivo.

Isto pode ser usado para editar sua imagem em um certo momento no tempo. Por exemplo, você pode agora pular para o primeiro segundo, e mover o círculo vermelho para a direita. Pronto! Você fez o seu primeiro movimento, sua primeira animação com o Synfig!

{{l|Image:synfig_tut_5.png|center|frame}}

Imaginando onde a animação está? Apenas clique em alguma posição arbitrária na linha do tempo: você irá notar que o círculo vermelho está em uma nova posição, aquela que você especificou! O que aconteceu, então? O Synfig deduziu que você queria fazer, moveu o circulo, e desenhou todas as imagens entre os estados. Cada imagem virá a ser mais tarde um quadro na sua animação, e o círculo irá parecer estar se movendo.

{{Note|Nota|Perceba que você não precisa ir até o último quadro aos '2s' e mover o círculo de volta ao começo. Quadros-chave fazem o Synfig lembrar o estado da imagem em um tempo particular. Isso porque nós modificamos a posição do circulo em '1s', e ele continua na esquerda aos '2s' (como também aos '0s'). Se você mudar de volta para o Painel de Parâmetros, e olhar no Painel de Controle de Tempo, irá notar que três pontos verdes apareceram à direita do parâmetro {{Literal|Origin}}. Esses pontos são chamados de {{L|Waypoints}} e indicam mudanças de parâmetro no decorrer do tempo.}}

{{l|Image:TimetrackOriginWaypoints.png|center|frame}}

== Renderizando sua animação ==
Antes de você ver sua animação, precisamos processar (ou renderizar) seu trabalho. Existem dois jeitos de fazer isto: com o synfigstudio (que você tem usando até agora) ou o programa de linha de comando synfig.

Feche o modo de edição de animação clicando no ponto vermelho à direita da linha do tempo, e salve seu arquivo com o nome BasicKnightRider.sif por exemplo. Clique então no menu da seta e selecione {{c|File|Render}}. Mude o nome para BasicKnightRider.gif no mesmo diretório que você salvou BasicKnightRider.sif e escolha o formato "gif" ao invés de "Auto", e clique em "Render". Dependendo da velocidade do seu processador, pode demorar alguns instantes, mas enfim a barra de status da janela da tela dirá "Arquivo renderizado com sucesso".

{{Note|Nota|A opção "magick++" (se disponível) em {{Literal|Target}} produz gifs com qualidade muito superior que a opção "gif", porque ela pode optimizar a paleta da imagem.}}
Abra o arquivo BasicKnightRider.gif no Firefox ou outra aplicação que mostre corretamente gif's. Entretanto, o Firefox irá tocar indefinidamente o GIF, deixando longa a sua curta animação. Se você está vendo um círculo vermelho se mexendo da esquerda para a direita e voltando, parabéns! Você acabou de fazer sua primeira animação!

{{Note|Nota|Você também pode pré-visualizar sua animação. Clique no menu da seta no canto superior esquerdo da janela da tela, e selecione {{c|File|Preview}}.}}

{{l|Image:synfig_tut_6.png|center|frame}}

Se você preferir usar linha de comando ao invés do menu para renderizar sua animação, abra o terminal (no Windows, vá em {{c|Start|Run}}, digite {{Literal|cmd}} e pressione {{Shortcut|enter}}), mude para o diretório que você salvou o arquivo e digite o seguinte:

synfig -t gif BasicKnightRider.sif

{{Note|Atenção!|A versão que você está usando pode não ter suporte ao formato GIF no momento. Isso depende da versão e das configurações de compilação.}}
Algumas mensagens que não importam agora aparecerão. Dependendo da velocidade do seu processador, isto pode levar alguns instantes, mas finalmente uma linha como

BasicKnightRider.sif ==> BasicKnightRider.gif: DONE

deverá aparecer, e você poderá ver seu gif animado usando o firefox ou outro programa como mencionado anteriormente.

== Conclusão ==

Claro, a posição de um objeto não é a única coisa que você pode mudar com o Synfig Studio. Outras possibilidades incluem tamanho, contorno, cor, etc. O Synfig vem com vários exemplos que permitem que você vá mais afundo nas possibilidades.

Doc:Adding Layers/pt

2010-06-24T20:49:12Z

Nqatsi: Created page with ' {{Title|Adicionando Camadas}} {{Navigation|Category:Manual|Doc:Creating_Shapes}} Category:Manual Category:Tutorials Category:Tutorials Basic [[Cate…'

{{Title|Adicionando Camadas}}
{{Navigation|Category:Manual|Doc:Creating_Shapes}}
[[Category:Manual]]
[[Category:Tutorials]]
[[Category:Tutorials Basic]]
[[Category:Updated]]


== Introdução ==

== Combinando Camadas ==
== Using locality ==
== Usando camadas para modificar outras camadas ==
== Indo mais fundo... ==

Doc:Animation Basics/pt

2010-06-24T04:13:16Z

Nqatsi:

{{Title|Principios da Animação}}
{{Navigation|Category:Manual|Doc:Adding Layers}}
[[Category:Manual]]
[[Category:Tutorials]]
[[Category:Tutorials Basic]]
[[Category:Updated]]


{{Note|Atenção!|Este artigo está em processo de tradução! Você pode ajudar a traduzi-lo, ou revisá-lo. Obrigado pela compreensão. :)}}

== Introdução ==

Criar uma animação no Synfig Studio é muito fácil. Consiste basicamente em mudar um desenho — você precisa apenas criar o primeira e última fase da mudança, e o Synfig cuidará dos passos intermediários.

Vejamos um simples exemplo. Considere uma luz em movimento como aquela na frente do carro da Super Máquina (''Knight Rider''). Se deixar o realismo de lado, você tem um circulo se movendo da esquerda para a direita, e vice versa. Em outras palavras, você precisa criar três "passos" ou "fases":

# O círculo está na esquerda.
# O círculo está na direita.
# O círculo está de volta à esquerda.

Vamos fazer isto.

== Preparando a área de trabalho ==

Abra o Synfig Studio. Novos arquivos automaticamente são criado no início. Clique no menu da seta (entre as réguas horizontal e vertical, no lado superior esquerda da tela), e então selecione {{c|Edit|Properties}}. Um diálogo de propriedades da tela irá aparecer.

{{DevNotesBegin}}
'''Nota dos Desenvolvedores'''

O diálogo de propriedades da tela é uma bagunça, é verdade. Nós o re-desenharemos para ser algo muito mais compreensível em algum ponto do futuro. Por enquanto, ignore as seções "Image Area" e "Locks and Links".
{{DevNotesEnd}}

Dê um nome e descrição para sua tela, e clique em "Aplicar" (não clique em "Salvar" — não terminamos com as propriedades ainda). Vá na aba {{Literal|Time}} e tenha certeza de editar {{Literal|End Time}}. Mude de '5s' para '2s' — isso irá fazer com que nossa animação tenha 2 segundos de duração.

[[Image:File Properties Dialog - End Time.png|center|frame|Diálogo de Propriedades da Tela]]

Agora crie um retângulo preto simples que servirá como nosso fundo. Não é necessário fazê-lo cobrir toda a tela. Também, desmarque a opção {{Literal|Low Res}} no topo da janela da tela para desabilitar o modo de visualização de baixa resolução - isso fará com que sua imagem fique mais nítida. Geralmente, ter esta opção habilitada aumenta a velocidade de atualização da tela, mas não precisamos disto agora.

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

Agora precisamos de um círculo. Mude a cor do preenchimento para vermelho, e crie um círculo. Não importa se não está perfeito: você pode editá-lo depois . Selecione a Ferramenta Transformar, e clique no círculo. Ele entrará num modo de edição que é fácil de perceber pelo pequeno ponto verde no meio, e o retângulo branco ao seu redor. Você pode mover o círculo vermelho clicando no seu pontinho verde.

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

Estes são os primeiros passos para desenhar um objeto e movê-lo. Mas, não é uma animação ainda, obviamente. É verdade, vamos dar uma olhada em como isto funciona.

== Adicionando Movimento ==

No começo, você entrou um valor de 2 segundos no Diálogo de Propriedades. Por a duração da sua animação ser diferente de zero, a janela da tela (onde você desenha) tem uma linha do tempo cinza na parte de baixo. Você pode clicar ali e um pequeno cursor laranja irá aparecer, indicando sua posição no tempo. Tente clicar em vários lugares diferentes na linha do tempo, e perceba que a caixa de texto à esquerda muda o valor para algo como {{Literal|12f}}, {{Literal|1s 15f}}, etc. Você pode mudar sua posição na linha do tempo trocando os valores nesta caixa. Por exemplo, se você digitar {{Literal|1s}} e pressionar {{Shortcut|enter}}, o cursor laranja irá se mover para a metade da linha do tempo, e entrar com um valor de {{Literal|2s}} irá movê-lo para o final.

{{Note|Nota|No último exemplo, o cursor laranja ficará invisível, porque 2s é bem em cima da borda da linha do tempo, mas acredite em mim — está lá.}}
Mas quando você muda sua posição na linha do tempo, nada muda na tela. Isto é porquê você precisa mudar para o {{Literal|Modo de Edição de Animação}} primeiro, clicando no último botão verde, à direita da linha do tempo cinza. É possível notar que sua tela ganha um contorno vermelho: isto é para lembrá-lo que qualquer mudança nos objetos daqui em diante, afetará a sua animação.

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

Foram mencionados antes três "passos" ou "fases". Estes são representados pelos chamados "{{l|Keyframe|quadros-chave}}" (apenas no caso de você estar familiarizado com codificação de vídeo: não, não é a mesma coisa!). Um quadro-chave é uma imagem no tempo onde algo importante acontece com seus objetos.

Vá ao painel de quadros-chave — clique na aba com o desenho de uma chave, na janela debaixo — para editá-los. Agora pressione o botão com um sinal de "soma" e você terá uma nova entrada na lista mostrando algo como: {{Literal|0f, 0f, (JMP)}}.

[[Image:Keyframes Panel.png|center|frame]]

Agora vá até a marca de {{Literal|1s}} na linha do tempo. O cursor laranja deverá se mover para lá. Então, adicione outro quadro-chave clicando no ícone de soma de novo. Repita o processo com o cursor na linha do tempo aos {{Literal|2s}} (o final da sua animação). Você deverá ter agora três entradas na lista.

[[Image:Keyframes Panel 2.png|center|frame]]

== Os 'S's e 'f's: Entendendo a linha do tempo ==
A esta altura, você já deve ter percebido o que aquelas misteriosas marcações "1s 10f" representam. Elas indicam um ponto específico na linha do tempo, expressando a localização em termos de segundos (s) e quadros (f). ['''''Nota do tradutor:''' o 'f' vem de "frames" - quadros em inglês'']

Por padrão, cada segundo é dividido em 24 quadros, assim como um metro em uma trena é dividido em 100 centímetros. As marcações dos quadros começam em zero (0) e vão até 24. Assim que um novo segundo é atingido, o contador de quadros volta a zero.

Por exemplo, quando cinco segundos inteiros e três quadros tiverem passado, usando esta noção de tempo, será {{Literal|5s 3f}}.

== A lista de Quadros-Chave ==
A lista de quadros-chave é mais fácil de entender. Ela mostra as entradas {{Literal|Time}} que é basicamente o tempo onde começa o quadro, {{Literal|Length}} que é a duração, {{Literal|Jump}} que abordaremos em seguida, e {{Literal|Description}} que é uma descrição do que acontece neste quadro-chave.

Você deve estar se perguntando sobre as entradas chamadas {{Literal|(JMP)}}. Na verdade, elas são como os links na internet: clique-os, e o cursor na linha do tempo irá pular para o tempo respectivo.

Isto pode ser usado para editar sua imagem em um certo momento no tempo. Por exemplo, você pode agora pular para o primeiro segundo, e mover o círculo vermelho para a direita. Pronto! Você fez o seu primeiro movimento, sua primeira animação com o Synfig!

{{l|Image:synfig_tut_5.png|center|frame}}

Imaginando onde a animação está? Apenas clique em alguma posição arbitrária na linha do tempo: você irá notar que o círculo vermelho está em uma nova posição, aquela que você especificou! O que aconteceu, então? O Synfig deduziu que você queria fazer, moveu o circulo, e desenhou todas as imagens entre os estados. Cada imagem virá a ser mais tarde um quadro na sua animação, e o círculo irá parecer estar se movendo.

{{Note|Nota|Perceba que você não precisa ir até o último quadro aos '2s' e mover o círculo de volta ao começo. Quadros-chave fazem o Synfig lembrar o estado da imagem em um tempo particular. Isso porque nós modificamos a posição do circulo em '1s', e ele continua na esquerda aos '2s' (como também aos '0s'). Se você mudar de volta para o Painel de Parâmetros, e olhar no Painel de Controle de Tempo, irá notar que três pontos verdes apareceram à direita do parâmetro {{Literal|Origin}}. Esses pontos são chamados de {{L|Waypoints}} e indicam mudanças de parâmetro no decorrer do tempo.}}

{{l|Image:TimetrackOriginWaypoints.png|center|frame}}

== Renderizando sua animação ==
Antes de você ver sua animação, precisamos processar (ou renderizar) seu trabalho. Existem dois jeitos de fazer isto: com o synfigstudio (que você tem usando até agora) ou o programa de linha de comando synfig.

Feche o modo de edição de animação clicando no ponto vermelho à direita da linha do tempo, e salve seu arquivo com o nome BasicKnightRider.sif por exemplo. Clique então no menu da seta e selecione {{c|File|Render}}. Mude o nome para BasicKnightRider.gif no mesmo diretório que você salvou BasicKnightRider.sif e escolha o formato "gif" ao invés de "Auto", e clique em "Render". Dependendo da velocidade do seu processador, pode demorar alguns instantes, mas enfim a barra de status da janela da tela dirá "Arquivo renderizado com sucesso".

{{Note|Nota|A opção "magick++" (se disponível) em {{Literal|Target}} produz gifs com qualidade muito superior que a opção "gif", porque ela pode optimizar a paleta da imagem.}}
Abra o arquivo BasicKnightRider.gif no Firefox ou outra aplicação que mostre corretamente gif's. Entretanto, o Firefox irá tocar indefinidamente o GIF, deixando longa a sua curta animação. Se você está vendo um círculo vermelho se mexendo da esquerda para a direita e voltando, parabéns! Você acabou de fazer sua primeira animação!

{{Note|Nota|Você também pode pré-visualizar sua animação. Clique no menu da seta no canto superior esquerdo da janela da tela, e selecione {{c|File|Preview}}.}}

{{l|Image:synfig_tut_6.png|center|frame}}

Se você preferir usar linha de comando ao invés do menu para renderizar sua animação, abra o terminal (no Windows, vá em {{c|Start|Run}}, digite {{Literal|cmd}} e pressione {{Shortcut|enter}}), mude para o diretório que você salvou o arquivo e digite o seguinte:

synfig -t gif BasicKnightRider.sif

{{Note|Atenção!|A versão que você está usando pode não ter suporte ao formato GIF no momento. Isso depende da versão e das configurações de compilação.}}
Algumas mensagens que não importam agora aparecerão. Dependendo da velocidade do seu processador, isto pode levar alguns instantes, mas finalmente uma linha como

BasicKnightRider.sif ==> BasicKnightRider.gif: DONE

deverá aparecer, e você poderá ver seu gif animado usando o firefox ou outro programa como mencionado anteriormente.

== Conclusão ==

Claro, a posição de um objeto não é a única coisa que você pode mudar com o Synfig Studio. Outras possibilidades incluem tamanho, contorno, cor, etc. O Synfig vem com vários exemplos que permitem que você vá mais afundo nas possibilidades.

Doc:Animation Basics/pt

2010-06-24T03:43:31Z

Nqatsi:

{{Title|Principios da Animação}}
{{Navigation|Category:Manual|Doc:Adding Layers}}
[[Category:Manual]]
[[Category:Tutorials]]
[[Category:Tutorials Basic]]
[[Category:Updated]]


{{Note|Atenção!|Este artigo está em processo de tradução! Você pode ajudar a traduzi-lo, ou revisá-lo. Obrigado pela compreensão. :)}}

== Introdução ==

Criar uma animação no Synfig Studio é muito fácil. Consiste basicamente em mudar um desenho — você precisa apenas criar o primeira e última fase da mudança, e o Synfig cuidará dos passos intermediários.

Vejamos um simples exemplo. Considere uma luz em movimento como aquela na frente do carro da Super Máquina (''Knight Rider''). Se deixar o realismo de lado, você tem um circulo se movendo da esquerda para a direita, e vice versa. Em outras palavras, você precisa criar três "passos" ou "fases":

# O círculo está na esquerda.
# O círculo está na direita.
# O círculo está de volta à esquerda.

Vamos fazer isto.

== Preparando a área de trabalho ==

Abra o Synfig Studio. Novos arquivos automaticamente são criado no início. Clique no menu da seta (entre as réguas horizontal e vertical, no lado superior esquerda da tela), e então selecione {{c|Edit|Properties}}. Um diálogo de propriedades da tela irá aparecer.

{{DevNotesBegin}}
'''Nota dos Desenvolvedores:'''

O diálogo de propriedades da tela é uma bagunça, admitimos. Nós o re-desenharemos para ser algo muito mais compreensível em algum ponto do futuro. Por enquanto, ignore as seções "Image Area" e "Locks and Links".
{{DevNotesEnd}}

Dê um nome e descrição para sua tela, e clique em "Aplicar" (não clique "Salvar" ainda — não ainda não terminamos com as propriedades). Vá na aba {{Literal|Time}} e tenha certeza de editar {{Literal|End Time}}. Mude '5s' para '2s' — isso irá fazer com que nossa animação tenha 2 segundos de duração.

[[Image:File Properties Dialog - End Time.png|center|frame|Diálogo de Propriedades da Tela]]

Agora crie um retângulo preto simples que servirá como nosso fundo. Não é necessário fazê-lo cobrir toda a tela. Também, desmarque a opção {{Literal|Low Res}} no topo da janela da tela para desabilitar o modo de visualização de baixa resolução - isso fará com que sua imagem fique mais nítida. Geralmente, ter esta opção habilitada aumenta a velocidade de atualização da tela, mas não precisamos disto agora.

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

Agora precisamos de um círculo. Mude a cor do preenchimento para vermelho, e crie um círculo. Não importa se não está perfeito: você pode editá-lo depois . Selecione a Ferramenta Transformar, e clique no círculo. Ele entrará num modo de edição que é fácil de perceber pelo pequeno ponto verde no meio, e o retângulo branco ao seu redor. Você pode mover o círculo vermelho clicando no seu pontinho verde.

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

Estes são os primeiros passos para desenhar um objeto e movê-lo. Mas, não é uma animação ainda, você deve ter percebido. É verdade, vamos dar uma olhada em como isto funciona.

== Adicionando Movimento ==

No começo, você entrou um valor de 2 segundos no Diálogo de Propriedades. Por que a duração da sua animação é diferente de zero, sua janela da tela (onde você desenha) tem uma linha do tempo cinza na parte de baixo. Você pode clicar ali e um pequeno cursor laranja irá aparecer, indicando sua posição no tempo. Tente clicar em vários lugares diferentes na linha do tempo, e perceba que a caixa de texto à esquerda muda o valor para algo como {{Literal|12f}}, {{Literal|1s 15f}}, etc. Você pode mudar sua posição na linha do tempo trocando os valores nesta caixa. Por exemplo, se você digitar {{Literal|1s}} e pressionar {{Shortcut|enter}}, o cursor laranja irá se mover para a metade da linha do tempo, e entrar com um valor de {{Literal|2s}} irá movê-lo para o final.

{{Note|Nota|No último exemplo, o cursor laranja ficará invisível, porque 2s é bem em cima da borda da linha do tempo, acredite em mim — está lá.}}
Mas quando você muda sua posição na linha do tempo, nada muda na tela. Isto é porquê você precisa mudar para o {{Literal|Modo de Edição de Animação}} primeiro, clicando no último botão verde, à direita da linha do tempo cinza. É possível notar que sua tela ganha um contorno vermelho: isto é para lembrar à você que qualquer mudança nos objetos daqui em diante, afetará a sua animação.

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

Foram mencionados antes três "passos" ou "fases". Estes são representados pelos chamados "{{l|Keyframe|quadros-chave}}" (apenas no caso de você estar familiarizado com codificação de vídeo: não, não é a mesma coisa!). Um quadro-chave é uma imagem no tempo onde algo importante acontece com seus objetos.

Vá ao painel de quadros-chave — apenas clique na aba com o desenho de uma chave, na janela de baixo — para habilitar a editá-los. Agora pressione o botão com um sinal de "soma" e você terá uma nova entrada na lista mostrando algo como: {{Literal|0f, 0f, (JMP)}}.

[[Image:Keyframes Panel.png|center|frame]]

Agora vá até a marca de {{Literal|1s}} na linha do tempo. O cursor laranja deverá se mover para lá. Então, adicione outro quadro-chave clicando no ícone de soma de novo. Repita o processo com o cursor na linha do tempo aos {{Literal|2s}} (o final da sua animação). Você deverá ter agora três entradas na lista.

[[Image:Keyframes Panel 2.png|center|frame]]

== Os 'S's e 'f's: Entendendo a linha do tempo ==
A esta altura, você já deve ter percebido o que aquelas misteriosas marcações '1s 10f' representam. Elas indicam um ponto específico na linha do tempo, expressando a localização em termos de segundos (s) e quadros (f). ['''''Nota do tradutor:''' o 'f' vem de "frames" - quadros em inglês'']

Por padrão, cada segundo é dividido em 24 quadros, assim como um metro em uma fita métrica é dividido em 100 centímetro. As marcações dos quadros começam em zero (0) e vão até 24. Assim que um novo segundo é atingido, o contador de quadros volta a zero.

Por exemplo, quando cinco segundos inteiros e três quadros tiverem passado, usando esta noção de linha do tempo, será {{Literal|5s 3f}}.

== A lista de Quadros-Chave ==
A lista de quadros-chave é mais fácil de entender. Ela mostra as entradas {{Literal|Time}} que é basicamente o tempo onde começa o quadro, {{Literal|Length}} que é a duração, {{Literal|Jump}} que abordaremos em seguida, e {{Literal|Description}} que é uma descrição do que acontece neste quadro-chave.

Você deve estar se perguntando sobre as entradas chamadas {{Literal|(JMP)}}. Na verdade, eles são como os links na internet: clique sobre eles, e o cursor na linha do tempo irá pular para o tempo correto.

Isto pode ser usado para editar sua imagem em um certo momento no tempo. Por exemplo, você pode agora pular para o primeiro segundo, e mover o círculo vermelho para a direita. Pronto! Você fez o seu primeiro movimento, sua primeira animação com o Synfig!

{{l|Image:synfig_tut_5.png|center|frame}}

Imaginando onde a animação está? Apenas clique em alguma posição arbitrária na linha do tempo: você irá notar que o círculo vermelho está em uma nova posição, aquela que você especificou! O que aconteceu, então? O Synfig deduziu que você queria fazer, moveu o circulo, e desenhou todas as imagens entre os estados. Cada imagem virá a ser mais tarde um quadro na sua animação, e o círculo irá parecer estar se movendo.

{{Note|Nota|Perceba que você não precisa ir até o último quadro aos '2s' e mover o círculo de volta ao começo. Quadros-chave fazem o Synfig lembrar o estado da imagem em um tempo particular. Isso porque nós modificamos a posição do circulo em '1s', e ele continua na esquerda aos '2s' (como também aos '0s'). Se você mudar de volta para o Painel de Parâmetros, e olhar no Painel de Controle de Tempo, irá notar que três pontos verdes apareceram à direita do parâmetro {{Literal|Origin}}. Esses pontos são chamados de {{L|Waypoints}} e indicam mudanças de parâmetro no decorrer do tempo.}}
{{l|Image:TimetrackOriginWaypoints.png|center|frame}}

== Renderizando sua animação ==
Antes de você ver sua animação, precisamos renderizar (ou renderizar) seu trabalho. Existem dois jeitos de fazer isto: usando o synfigstudio (que você tem usando até agora) ou o programa na linha de comando synfig.

Feche o modo de edição de animação clicando no ponto vermelho à direita da linha do tempo, e salve seu arquivo; com o nome BasicKnightRider.sif por exemplo. Clique então no menu da seta e selecione {{c|File|Render}}. Mude o nome para BasicKnightRider.gif no mesmo diretório que você salvou BasicKnightRider.sif e escolha o formato "gif" ao invés de "Auto", e clique em Render. Dependendo da velocidade do seu Processador, pode demorar alguns momentos, mas finalmente a barra de status da janela da tela deve dizer "Arquivo renderizado com sucesso".

{{Note|Nota|A opção "magick++" em {{Literal|Target}} (se disponível) produz gifs com qualidade muito superior que a opção "gif", porque ela pode optimizar a paleta da imagem.}}
Abra o arquivo BasicKnightRider.gif no Firefox ou outra aplicação que mostre corretamente gif's. Entretanto, o Firefox irá tocar novamente o GIF sem parar, deixando longa a sua animação curta. Se você está vendo um círculo vermelho se mexendo da esquerda para a direita e voltando, parabéns! Você acabou de fazer sua primeira animação!

{{Note|Nota|Você também pode pré-visualizar sua animação. Clique no menu da seta no canto superior esquerdo da janela da tela, e selecione {{c|File|Preview}}.}}

{{l|Image:synfig_tut_6.png|center|frame}}

Se você preferir usar linha de comando ao invés do menu para renderizar sua animação, abra o terminal (no Windows, vá em {{c|Start|Run}}, digite {{Literal|cmd}} e pressione {{Shortcut|enter}}), mude para o diretório que você salvou o arquivo e digite o seguinte:

synfig -t gif BasicKnightRider.sif

{{Note|Atenção!|A versão que você está usando pode não ter suporte ao formato GIF no momento. Isso depende da versão e das configurações de compilação.}}
Algumas mensagens que não importam agora aparecerão. Dependendo da velocidade do seu processador, isto pode levar alguns instantes, mas finalmente uma linha como

BasicKnightRider.sif ==> BasicKnightRider.gif: DONE

deverá aparecer, e você poderá ver seu gif animado usando o firefox ou outro programa como mencionado anteriormente.

== Conclusão ==

Claro, a posição de um objeto não é a única coisa que você pode mudar com o Synfig Studio. Outras possibilidades incluem tamanho, contorno, cor, etc. Synfig vem com vários exemplos que permitem que você vá mais afundo nas possibilidades.

Doc:Animation Basics/pt

2010-06-24T03:39:33Z

Nqatsi:

{{Title|Principios da Animação}}
{{Navigation|Category:Manual|Doc:Adding Layers}}
[[Category:Manual]]
[[Category:Tutorials]]
[[Category:Tutorials Basic]]
[[Category:Updated]]


{{Note|Atenção!|Este artigo está em processo de tradução! Você pode ajudar a traduzi-lo, ou revisá-lo. Obrigado pela compreensão. :)}}

== Introdução ==

Criar uma animação no Synfig Studio é muito fácil. Consiste basicamente em mudar um desenho — você precisa apenas criar o primeira e última fase da mudança, e o Synfig cuidará dos passos intermediários.

Vejamos um simples exemplo. Considere uma luz em movimento como aquela na frente do carro da Super Máquina (''Knight Rider''). Se deixar o realismo de lado, você tem um circulo se movendo da esquerda para a direita, e vice versa. Em outras palavras, você precisa criar três "passos" ou "fases":

# O círculo está na esquerda.
# O círculo está na direita.
# O círculo está de volta na esquerda.

Vamos fazer isto.

== Preparando a área de trabalho ==

Abra o Synfig Studio. Novos arquivos automaticamente são criado no início. Clique no menu da seta (entre as réguas horizontal e vertical, no lado superior esquerda da tela), e então selecione {{c|Edit|Properties}}. Um diálogo de propriedades da tela irá aparecer.

{{DevNotesBegin}}
'''Nota dos Desenvolvedores:''' O diálogo de propriedades da tela é uma bagunça, admitimos. Nós o re-desenharemos para ser algo muito mais compreensível em algum ponto do futuro. Por enquanto, ignore as seções "Image Area" e "Locks and Links".
{{DevNotesEnd}}

Dê um nome e descrição para sua tela, e clique em "Aplicar" (não clique "Salvar" ainda — não ainda não terminamos com as propriedades). Vá na aba {{Literal|Time}} e tenha certeza de editar {{Literal|End Time}}. Mude '5s' para '2s' — isso irá fazer com que nossa animação tenha 2 segundos de duração.

[[Image:File Properties Dialog - End Time.png|center|frame|Diálogo de Propriedades da Tela]]

Agora crie um retângulo preto simples que servirá como nosso fundo. Não é necessário fazê-lo cobrir toda a tela. Também, desmarque a opção {{Literal|Low Res}} no topo da janela da tela para desabilitar o modo de visualização de baixa resolução - isso fará com que sua imagem fique mais nítida. Geralmente, ter esta opção habilitada aumenta a velocidade de atualização da tela, mas não precisamos disto agora.

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

Agora precisamos de um círculo. Mude a cor do preenchimento para vermelho, e crie um círculo. Não importa se não está perfeito: você pode editá-lo depois . Selecione a Ferramenta Transformar, e clique no círculo. Ele entrará num modo de edição que é fácil de perceber pelo pequeno ponto verde no meio, e o retângulo branco ao seu redor. Você pode mover o círculo vermelho clicando no seu pontinho verde.

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

Estes são os primeiros passos para desenhar um objeto e movê-lo. Mas, não é uma animação ainda, você deve ter percebido. É verdade, vamos dar uma olhada em como isto funciona.

== Adicionando Movimento ==

No começo, você entrou um valor de 2 segundos no Diálogo de Propriedades. Por que a duração da sua animação é diferente de zero, sua janela da tela (onde você desenha) tem uma linha do tempo cinza na parte de baixo. Você pode clicar ali e um pequeno cursor laranja irá aparecer, indicando sua posição no tempo. Tente clicar em vários lugares diferentes na linha do tempo, e perceba que a caixa de texto à esquerda muda o valor para algo como {{Literal|12f}}, {{Literal|1s 15f}}, etc. Você pode mudar sua posição na linha do tempo trocando os valores nesta caixa. Por exemplo, se você digitar {{Literal|1s}} e pressionar {{Shortcut|enter}}, o cursor laranja irá se mover para a metade da linha do tempo, e entrar com um valor de {{Literal|2s}} irá movê-lo para o final.

{{Note|Nota|No último exemplo, o cursor laranja ficará invisível, porque 2s é bem em cima da borda da linha do tempo, acredite em mim — está lá.}}
Mas quando você muda sua posição na linha do tempo, nada muda na tela. Isto é porquê você precisa mudar para o {{Literal|Modo de Edição de Animação}} primeiro, clicando no último botão verde, à direita da linha do tempo cinza. É possível notar que sua tela ganha um contorno vermelho: isto é para lembrar à você que qualquer mudança nos objetos daqui em diante, afetará a sua animação.

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

Foram mencionados antes três "passos" ou "fases". Estes são representados pelos chamados "{{l|Keyframe|quadros-chave}}" (apenas no caso de você estar familiarizado com codificação de vídeo: não, não é a mesma coisa!). Um quadro-chave é uma imagem no tempo onde algo importante acontece com seus objetos.

Vá ao painel de quadros-chave — apenas clique na aba com o desenho de uma chave, na janela de baixo — para habilitar a editá-los. Agora pressione o botão com um sinal de "soma" e você terá uma nova entrada na lista mostrando algo como: {{Literal|0f, 0f, (JMP)}}.

[[Image:Keyframes Panel.png|center|frame]]

Agora vá até a marca de {{Literal|1s}} na linha do tempo. O cursor laranja deverá se mover para lá. Então, adicione outro quadro-chave clicando no ícone de soma de novo. Repita o processo com o cursor na linha do tempo aos {{Literal|2s}} (o final da sua animação). Você deverá ter agora três entradas na lista.

[[Image:Keyframes Panel 2.png|center|frame]]

== Os 'S's e 'f's: Entendendo a linha do tempo ==
A esta altura, você já deve ter percebido o que aquelas misteriosas marcações '1s 10f' representam. Elas indicam um ponto específico na linha do tempo, expressando a localização em termos de segundos (s) e quadros (f). ['''''Nota do tradutor:''' o 'f' vem de "frames" - quadros em inglês'']

Por padrão, cada segundo é dividido em 24 quadros, assim como um metro em uma fita métrica é dividido em 100 centímetro. As marcações dos quadros começam em zero (0) e vão até 24. Assim que um novo segundo é atingido, o contador de quadros volta a zero.

Por exemplo, quando cinco segundos inteiros e três quadros tiverem passado, usando esta noção de linha do tempo, será {{Literal|5s 3f}}.

== A lista de Quadros-Chave ==
A lista de quadros-chave é mais fácil de entender. Ela mostra as entradas {{Literal|Time}} que é basicamente o tempo onde começa o quadro, {{Literal|Length}} que é a duração, {{Literal|Jump}} que abordaremos em seguida, e {{Literal|Description}} que é uma descrição do que acontece neste quadro-chave.

Você deve estar se perguntando sobre as entradas chamadas {{Literal|(JMP)}}. Na verdade, eles são como os links na internet: clique sobre eles, e o cursor na linha do tempo irá pular para o tempo correto.

Isto pode ser usado para editar sua imagem em um certo momento no tempo. Por exemplo, você pode agora pular para o primeiro segundo, e mover o círculo vermelho para a direita. Pronto! Você fez o seu primeiro movimento, sua primeira animação com o Synfig!

{{l|Image:synfig_tut_5.png|center|frame}}

Imaginando onde a animação está? Apenas clique em alguma posição arbitrária na linha do tempo: você irá notar que o círculo vermelho está em uma nova posição, aquela que você especificou! O que aconteceu, então? O Synfig deduziu que você queria fazer, moveu o circulo, e desenhou todas as imagens entre os estados. Cada imagem virá a ser mais tarde um quadro na sua animação, e o círculo irá parecer estar se movendo.

{{Note|Nota|Perceba que você não precisa ir até o último quadro aos '2s' e mover o círculo de volta ao começo. Quadros-chave fazem o Synfig lembrar o estado da imagem em um tempo particular. Isso porque nós modificamos a posição do circulo em '1s', e ele continua na esquerda aos '2s' (como também aos '0s'). Se você mudar de volta para o Painel de Parâmetros, e olhar no Painel de Controle de Tempo, irá notar que três pontos verdes apareceram à direita do parâmetro {{Literal|Origin}}. Esses pontos são chamados de {{L|Waypoints}} e indicam mudanças de parâmetro no decorrer do tempo.}}
{{l|Image:TimetrackOriginWaypoints.png|center|frame}}

== Renderizando sua animação ==
Antes de você ver sua animação, precisamos renderizar (ou renderizar) seu trabalho. Existem dois jeitos de fazer isto: usando o synfigstudio (que você tem usando até agora) ou o programa na linha de comando synfig.

Feche o modo de edição de animação clicando no ponto vermelho à direita da linha do tempo, e salve seu arquivo; com o nome BasicKnightRider.sif por exemplo. Clique então no menu da seta e selecione {{c|File|Render}}. Mude o nome para BasicKnightRider.gif no mesmo diretório que você salvou BasicKnightRider.sif e escolha o formato "gif" ao invés de "Auto", e clique em Render. Dependendo da velocidade do seu Processador, pode demorar alguns momentos, mas finalmente a barra de status da janela da tela deve dizer "Arquivo renderizado com sucesso".

{{Note|Nota|A opção "magick++" em {{Literal|Target}} (se disponível) produz gifs com qualidade muito superior que a opção "gif", porque ela pode optimizar a paleta da imagem.}}
Abra o arquivo BasicKnightRider.gif no Firefox ou outra aplicação que mostre corretamente gif's. Entretanto, o Firefox irá tocar novamente o GIF sem parar, deixando longa a sua animação curta. Se você está vendo um círculo vermelho se mexendo da esquerda para a direita e voltando, parabéns! Você acabou de fazer sua primeira animação!

{{Note|Nota|Você também pode pré-visualizar sua animação. Clique no menu da seta no canto superior esquerdo da janela da tela, e selecione {{c|File|Preview}}.}}

{{l|Image:synfig_tut_6.png|center|frame}}

Se você preferir usar linha de comando ao invés do menu para renderizar sua animação, abra o terminal (no Windows, vá em {{c|Start|Run}}, digite {{Literal|cmd}} e pressione {{Shortcut|enter}}), mude para o diretório que você salvou o arquivo e digite o seguinte:

synfig -t gif BasicKnightRider.sif

{{Note|Atenção!|A versão que você está usando pode não ter suporte ao formato GIF no momento. Isso depende da versão e das configurações de compilação.}}
Algumas mensagens que não importam agora aparecerão. Dependendo da velocidade do seu processador, isto pode levar alguns instantes, mas finalmente uma linha como

BasicKnightRider.sif ==> BasicKnightRider.gif: DONE

deverá aparecer, e você poderá ver seu gif animado usando o firefox ou outro programa como mencionado anteriormente.

== Conclusão ==

Claro, a posição de um objeto não é a única coisa que você pode mudar com o Synfig Studio. Outras possibilidades incluem tamanho, contorno, cor, etc. Synfig vem com vários exemplos que permitem que você vá mais afundo nas possibilidades.