Animando Formas
(→Adicionando Pétalas) |
(→Escondendo as Pétalas) |
||
| Line 89: | Line 89: | ||
== Escondendo as Pétalas == | == Escondendo as Pétalas == | ||
| + | |||
| + | <!-- This part is maybe the most clumsy one. I guess there may be an easier way to manage this step, and if I find it, I'll update the tutorial ;) --> | ||
| + | |||
| + | Digamos que nós queremos que as pétalas apareçam aos 4 segundos de animação, e estejam com o tamanho total aos 5 segundos, ao invés de estarem visíveis e com o tamanho final o tempo todo. | ||
| + | |||
| + | Mude para o {{Literal|Modo de Edição de Animação}} novamente clicando no círculo verde no canto inferior direito da tela. Se nós alterarmos algo aos {{Literal|4s}} de animação, as mudanças também ocorrerão aos {{Literal|5s}}, porque a forma/posição das pétalas não estão fixadas neste momento do tempo por nenhum waypoint ou quadro-chave. Isto significa que não precisamos um quadro chave aos {{Literal|5s}}. Na linha da tempo, coloque o cursor na marca de 5 segundos. No {{l|Keyframes Panel|Painel de Quadros Chave}}, clique em "+" para adicionar um novo quadro-chave. | ||
| + | |||
| + | Agora clique em {{literal|4s}}, e no Painel de Camadas, selecione todas as camadas de pétalas (com ctrl+clique), então pressione {{Shortcut|Ctrl|A}} para selecionar todos os vértices das pétalas. Diminua o seu tamanho com a {{l|Scale Tool|Ferramenta de Escala}}, e as mova de forma que fiquem escondidas pelo caule, como demonstrado. | ||
| + | |||
| + | [[Image:FlowerTutorial-11.png|center|frame]] | ||
| + | |||
| + | De 4s a 5s, as pétalas irão agora aparecer e abrir. Mas note que temos um quadro-chave aos 0s que também lembra a forma das pétalas. Isto é um problema — as pétalas continuam visíveis do primeiro quadro-chave até o quadro chave dos 4s. Podemos ou fazer com q as pétalas estejam pequenas e escondidas mudando seu tamanho do 0s aos 4s, ou nós podemos fazê-las invisíveis neste intervalo. | ||
| + | |||
| + | Vamos usar a segunda solução. Para deixar as coisas mais fácies, nós vamos {{l|encapsulate|encapsular}} as camadas de pétalas em uma {{l|Paste Canvas|Camada Embutida}}. Com todas as pétalas selecionadas, clique com o botão direito sobre elas no Painel de Camadas e selecione {{Literal|Encapsulate}}. Você pode renomear as camadas para deixar as coisas mais claras. | ||
| + | |||
| + | [[Image:FlowerTutorial-12.png|center|frame]] | ||
| + | |||
| + | Selecione a camada embutida "Pétalas" e pule para o primeiro quadro-chave. Na aba de Parâmetros, configure o valor {{Literal|{{l|Amount Parameter|Amount}}}} para {{Literal|0}}. As pétalas estarão agora invisíveis naquele quadro-chave. Note que dois waypoints foram adicionados na frente do parâmetro {{Literal|Amount}}. Um aos 0s e outro aos 5s. Arraste o waypoint dos 5s para 4s, para que a opacidade das pétalas seja 1 aos 4s. | ||
| + | |||
| + | [[Image:FlowerTutorial-13.png|center|frame]] | ||
| + | |||
| + | Ainda resta mais um problema: de 0s a 4s, a opacidade das pétalas aumenta lentamente, fazendo as pétalas visiveis quando não deveriam ser. Para resolver isto, iremos mudar o método de interpolação do parâmetro ''Amount''. Clique com o botão direito no waypoint do ''Amount'' aos 0s, e selecione {{Literal|Edit}}. Um novo diálogo irá aparecer, onde é possível escolher a interpolação ''In'' (entrada) e ''Out'' (saída). Mude a Interpolação de Saída para {{Literal|Constant}}. | ||
| + | |||
| + | [[Image:FlowerTutorial-14.png|center|frame]] | ||
| + | |||
| + | {{Note|Dica|É possível mudar a interpolação da saída (out) do waypoint clicando com o botão direito sobre ele e selecionando {{c|Out|Constant}}.}} | ||
| + | Isto significa que ''depois'' deste waypoint, o valor ''Amount'' ainda será constante, até que outro waypoint é encontrado. Então do 0f até os 4s o ''Amount'' será igual a 0, e aos 4s será alterado subitamente para 1, fazendo as pétalas visíveis, como esperado. Outra forma de conseguir o mesmo efeito, seria mudar a Interpolação de Entrada do waypoint aos 4s para {{Literal|Constant}}. | ||
| + | |||
| + | Perceba como o (metade) waypoint muda de um círculo verde (significando uma animação suave do parâmetro ''amount'') para um degrau vermelho (significando que o parâmetro ''amount'' é trocado repentinamente). | ||
| + | |||
| + | Terminado! O caule cresce por 4,5 segundos e fica estático durante os últimos 1,5 segundos. As pétalas estão escondidas até 4 segundos, crescem rapidamente entre 4 e 5 segundo, e ficam imoveis durante o ultimo segundo também. | ||
| + | |||
| + | Clique em {{c|File|Render}} Para renderizar sua animação. Selecione qualquer formato que desejar, e certifique-se que a opção {{Literal|Use current frame}} ("usar a frame atual") não está selecionada (se não, apenas a frame atual será renderizada). | ||
Revision as of 04:31, 7 July 2010
|
Warning! This page contains outdated information. The release of Synfig Studio 0.64.0 introduced new terminology and this translated page needs to be updated according to original English text. You can help updating this page - see instructions here. Thank you! |
|
Atenção! Este artigo está em processo de tradução! Você pode ajudar a traduzi-lo, ou revisá-lo. Obrigado pela compreensão. :)
|
Configurações Básicas
Neste tutorial aprenderemos como criar uma simples animação de uma flor crescendo, usando BLines.
Primeiro, precisamos criar um gradiente para o fundo. Clique nas cores de contorno e preenchimento na caixa de ferramentas para selecionar as cores que nosso gradiente terá. Você pode também editar diretamente o gradiente, clicando na linha de gradiente na caixa de ferramentas.
Selecione a Ferramenta Gradiente e arraste seu cursor verticalmente sobre a tela para preenchê-la.
Em seguida, selecione a Ferramenta BLine e no Painel de Opções de Ferramenta e certifique-se que apenas "Create Regiion BLine" está selecionado. Na caixa de ferramentas, mude a cor de preenchimento para verde. Desenhe uma espécie de triangulo com a Ferramenta BLine. Para fechar a forma depois de desenhar os 3 vértices, clique com o botão direito no primeiro vértice e escolha "Loop Bline".
Agora que a forma está fechada, você pode "criar" a forma bline selecionando outra ferramenta ou pressionando o botão que se parece com uma engrenagem na parte de baixo do Painel de Opções de Ferramenta.
Isto irá ser a base do nosso caule. Você pode mudar alças das tangentes (pontos vermelhos) um pouquinho para fazer um triangulo mais arredondado. Com a Ferramenta Transformar, clique com o botão direito em cada vértice e selecione "Split Tangents", para que as alças de cada vértice possa ser movidas separadamente. Aqui terminamos com as configurações básicas.
Animando o Caule
No menu da Tela, selecione "Edit → Properties". Vá até a aba do tempo, ajuste o "End time" para "6s" e clique em OK.
Clique no começo da linha do tempo ("0f"), e então, no Painel de Quadros-Chave (aquele com o ícone que é uma chavezinha) clique no botão com um ícone que é um sinal de "+" (adicionar novo quadro chave). Quadros-chave nos permitem estabelecer a cena: ex: em um quadro-chave, cada elemento da cena terá todas as suas propriedades lembradas. Clique novamente na linha do tempot, aos "4.5s". Pressione o círculo verde no canto inferior direito da tela (ou qualquer que seja o ícone que você tem ali, dependendo do tema atual) para mudar para o Mode de Edição de Animação (o circulo ficará vermelho).
Com a Ferramenta Transformar, selecione o broto, e mova o vértice para cima para fazer o caule. Você pode brincar com as alças do vértice para entortar a forma um pouco se quiser.
Ainda aos "4.5s", clique com o botão direito na borda do caule, perto do topo, e escolha "Insert Item (smart)". Faça o mesmo no outro lado. Clique com o botão direito nestes novos pontos e selecione "Split Tangents" novamente. Então tente fazer uma forma que pareça como a da imagem abaixo, para criar o botão.
Agora se você clicar em "2s" (por exemplo), é possível ver que a forma do botão está levemente visível, mesmo se o broto for pequeno, e mesmo se os manipuladores do botão estejam invisíveis.
Digamos que nós queremos que o botão apareça apenas aos 3.5s, e esteja completo aos 4.5s.
Clique em "3.5s" na linha do tempo. Agora veja os painéis de "Parâmetros" e da "Linha do Tempo" na janela de baixo. É possível perceber que cada parâmetro no Painel de Parâmetros está alinhado com uma linha do Painel da Linha do Tempo. O último parâmetro é a lista de vértices. Clique na flechinha da esquerda para abrí-la. Você deve ver algo como isto:
Cada ponto verde (ou waypoint) significa um valor gravado (aqui a posição dos vértices foram gravadas em 0f com o quadro chave, e aos 4s quando movemos alguns vértices ou manipuladores). Os dois vértices que adicionamos para fazer o botão são marcados em "DYN" (do inglês dynamic - dinâmico). Clique com o botão direito sobre eles na lista de parâmetros, e selecione "Mark Activepoint as Off".
O painel deve se parecer com isto agora, a parte cinza sendo a parte onde os vértices do botão não tem efeito no caule.
Por exemplo se você clicar em "2s", ou mesmo "3s" agora, o formato do botão da flor não é visível. Ele começa a aparecer apenas um pouco depois dos 3.5s.
Entretanto, a forma do caule pode não estar muito legal durante seu crescimento entre 0 e 4s. Tenha certeza de ainda estar no Modo de Edição de Animação, e mude a forma em vários momentos do tempo para conseguir algo que você goste.
A animação do caule está pronta, mas ainda faltam as pétalas. Você pode assistir uma prévia da sua animação: Vá em "File → Preview", entre com suas configurações e clique em ok, espere a pré-visualização ser gerada, e assista.
|
Nota Pré-visualizações geralmente são pixeladas e desfocadas, mas a renderização final terá uma qualidade perfeita. Para uma melhor qualidade da pré-visualização, use valores mais altos para os campos 'Zoom' e 'Frames per second' na janela do dialogo de pré-visualização.
|
Adicionando Pétalas
Agora sai do "Modo de Edição de Animação" clicando no círculo vermelho no canto direito da tela.
Mude a cor de preenchimento para rosa, e crie uma pétala com a Ferramenta BLine. Nota-se que o manipulador verde que permite movimentar facilmente uma forma está no centro da tela. Selecione todos os vértices da pétala pressionando CtrlA e os mova para perto do ponto verde (com a Ferramenta Transformar), como mostrado.
Então arraste o manipulador verde para bem perto do topo do botão da flor. Pressione CtrlA novamente para selecionar todos os vértices da pétala e os rotacione um pouquinho com a Ferramenta Rotacionar. Também, no Painel de Camadas selecione a camada da pétala e a coloque abaixo da camada do caule. Clique na pétala para selecioná-la, e então segure a tecla ctrl e clique no caule. Ambos os objetos deverão ser selecionados.
Agora clique no vértice no topo do caule e clique no ponto verde da pétala enquanto segura a tecla cntrl (ambas devem aparecer com uma cor mais clara quando selecionadas). Então clique com o botão direito no vértice do topo do caule,e selecione "Link". A pétala irá se mover um pouquinho, e o ponto verde ficará "grudado" no vértice do caule.
Agora que existe uma conexão entre a pétala e o topo do caule, quando o topo deste se mover, a pétala irá segui-lo. (E se o manipulador verde da petal se mover, o topo do caule se moverá junto, mas não queremos que você faça isso.)
No Painel de Camadas, selecione a camada recém criada da Pétala e a duplique (com o terceiro botão, na parte de baixo do painel). Na tela, pressione CtrlA para selecionar todos os vértices da pétala duplicada, e a mova um pouco, para que as pétalas não fiquem sobrepostas. (Não mova o ponto verde, apenas os laranjas). Repita o processo várias vezes, para ter algo como a imagem.
Note que as pétalas duplicadas estão também conectadas ao caule. Se você voltar para o primeiro quadro-chave, você verá que as pétalas estão visiveis. Nós não queremos isto. Queremos que as pétalas apareçam e abram quase no final do crescimento.
Escondendo as Pétalas
Digamos que nós queremos que as pétalas apareçam aos 4 segundos de animação, e estejam com o tamanho total aos 5 segundos, ao invés de estarem visíveis e com o tamanho final o tempo todo.
Mude para o "Modo de Edição de Animação" novamente clicando no círculo verde no canto inferior direito da tela. Se nós alterarmos algo aos "4s" de animação, as mudanças também ocorrerão aos "5s", porque a forma/posição das pétalas não estão fixadas neste momento do tempo por nenhum waypoint ou quadro-chave. Isto significa que não precisamos um quadro chave aos "5s". Na linha da tempo, coloque o cursor na marca de 5 segundos. No Painel de Quadros Chave, clique em "+" para adicionar um novo quadro-chave.
Agora clique em "4s", e no Painel de Camadas, selecione todas as camadas de pétalas (com ctrl+clique), então pressione CtrlA para selecionar todos os vértices das pétalas. Diminua o seu tamanho com a Ferramenta de Escala, e as mova de forma que fiquem escondidas pelo caule, como demonstrado.
De 4s a 5s, as pétalas irão agora aparecer e abrir. Mas note que temos um quadro-chave aos 0s que também lembra a forma das pétalas. Isto é um problema — as pétalas continuam visíveis do primeiro quadro-chave até o quadro chave dos 4s. Podemos ou fazer com q as pétalas estejam pequenas e escondidas mudando seu tamanho do 0s aos 4s, ou nós podemos fazê-las invisíveis neste intervalo.
Vamos usar a segunda solução. Para deixar as coisas mais fácies, nós vamos encapsular as camadas de pétalas em uma Camada Embutida. Com todas as pétalas selecionadas, clique com o botão direito sobre elas no Painel de Camadas e selecione "Encapsulate". Você pode renomear as camadas para deixar as coisas mais claras.
Selecione a camada embutida "Pétalas" e pule para o primeiro quadro-chave. Na aba de Parâmetros, configure o valor "Amount" para "0". As pétalas estarão agora invisíveis naquele quadro-chave. Note que dois waypoints foram adicionados na frente do parâmetro "Amount". Um aos 0s e outro aos 5s. Arraste o waypoint dos 5s para 4s, para que a opacidade das pétalas seja 1 aos 4s.
Ainda resta mais um problema: de 0s a 4s, a opacidade das pétalas aumenta lentamente, fazendo as pétalas visiveis quando não deveriam ser. Para resolver isto, iremos mudar o método de interpolação do parâmetro Amount. Clique com o botão direito no waypoint do Amount aos 0s, e selecione "Edit". Um novo diálogo irá aparecer, onde é possível escolher a interpolação In (entrada) e Out (saída). Mude a Interpolação de Saída para "Constant".
|
Dica É possível mudar a interpolação da saída (out) do waypoint clicando com o botão direito sobre ele e selecionando "Out → Constant".
|
Isto significa que depois deste waypoint, o valor Amount ainda será constante, até que outro waypoint é encontrado. Então do 0f até os 4s o Amount será igual a 0, e aos 4s será alterado subitamente para 1, fazendo as pétalas visíveis, como esperado. Outra forma de conseguir o mesmo efeito, seria mudar a Interpolação de Entrada do waypoint aos 4s para "Constant".
Perceba como o (metade) waypoint muda de um círculo verde (significando uma animação suave do parâmetro amount) para um degrau vermelho (significando que o parâmetro amount é trocado repentinamente).
Terminado! O caule cresce por 4,5 segundos e fica estático durante os últimos 1,5 segundos. As pétalas estão escondidas até 4 segundos, crescem rapidamente entre 4 e 5 segundo, e ficam imoveis durante o ultimo segundo também.
Clique em "File → Render" Para renderizar sua animação. Selecione qualquer formato que desejar, e certifique-se que a opção "Use current frame" ("usar a frame atual") não está selecionada (se não, apenas a frame atual será renderizada).
