Animarea Formelor

From Synfig Studio :: Documentation
Jump to: navigation, search
(→‎Animarea / cresterea tulpinii)
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<!-- Page info -->
 
<!-- Page info -->
−
{{Title|Animating Shapes}}
+
{{Title|Animarea Formelor}}
 
{{Navigation|Category:Manual|Doc:Interface}}
 
{{Navigation|Category:Manual|Doc:Interface}}
 
{{Category|Tutorials}}
 
{{Category|Tutorials}}
Line 59: Line 59:
  
 
[[Image:FlowerTutorialCanvas4.png|center|frame]]
 
[[Image:FlowerTutorialCanvas4.png|center|frame]]
 +
 +
Fiecare punct verde (sau {{l|waypoints|waypoint}}) este o valoare inregistrata (aici pozitiile nodurilor sunt inregistrate la 0f (zero frame - cadrul zero) cu cadrul cheie si la 4s atunci cand am mutat cateva noduri sau marcatori de noduri). Cele doua noduri pe care le/am adaugat pentru a realiza bobocul sunt marcate la {{Literal|DYN}} (dinamic). Dati click buton dreapta de mouse pe acestea in lista de parametri, si selectati "Mark Activepoint as Off".
 +
 +
Caseta ar trebui sa arate ca mai jos, partea gri fiind partea unde nodurile bobocului nu au efect asupra tulpinii.
 +
 +
[[Image:FlowerTutorial-7-WaypointsActivepointsOff.png|center|frame]]
 +
 +
De exemplu, daca dati click pe {{Literal|2s}} sau chiar pe {{Literal|3s}}, forma bobocului nu este vizibila. Aceasta incepe sa apara putin dupa 3.5s.
 +
 +
Oricum, e posibil ca forma tulpinii sa nu arate prea frumos in timpul cresterii intre 0 si 4s. Asigurati-va ca inca sunteti in modul de editare a animatiei - Animate Edit si modificati forma la momente diferite in timp, pentru a obtine ceva care sa va placa.
 +
 +
Animatia tulpinii este acum finalizata, dar lupsesc petalele.
 +
Puteti previzualiza animatia: in {{c|File|Preview}}, validare, asteptati ca previzualizarea sa fie generata, apoi priviti.
 +
 +
{{Note|Nota|Previzualizarea poate fi pixelata sau in ceata, dar randarea finala va arata mult mai bine.  Previzualizarile de calitate inalta pot fi obtinute folosind valori mai mari pentru 'Zoom' si 'Frames per second' din fereastra de dialog pentru previzualizare.}}
 +
 +
== Adaugarea petalelor ==
 +
 +
Acum sa iesim din modul de editare a animatiei {{Literal|Animate Editing}} cu click pe cercul rosu din partea dreapta-jos a spatiului de lucru.
 +
 +
Schimbati culoarea de umplere la roz si creati o petala cu instrumentul BLine. Observati ca {{l|duck|marcatorul}} verde  care permite mutarea formei se afla in centrul spatiului de lucru. Selectati toate nodurile petalei cu {{Shortcut|Ctrl|a}} si mutati-le aproape de marcatorul verde (cu instrumentul Transform), ca in figura.
 +
 +
[[Image:FlowerTutorial-8.png|center|frame]]
 +
 +
Apoi trageti marcatorul verde foarte aproape de varful bobocului. Apasati din nou combinatia de taste {{Shortcut|Ctrl|a}} pentru a selecta toate nodurile petalei si modificati-le putin folosind instrumentul de rotire - Rotate. Apoi, in caseta pentru straturi - {{l|Layers Panel}} selectati stratul pentru petale si trageti-l '''sub''' stratul tulpinii.
 +
Click pe petala pentru a o selecta, apoi dati ctrl-click pe tulpina. Astfel ati selectat ambele obiecte.
 +
 +
Acum dati click pe nodul din varful tulpinii si ctrl-click pe marcatorul verde al petalei (ambele vor aparea cu o culoare mai deschisa, ca se indice ca au fost selectate). Apoi dati click buton dreapta de mouse pe nodul din varf al tulpinii si selectati {{Literal|Link}}. Petala se va misca putin, pentru ca marcatorul verde va fi legat la nodul tulpinii.
 +
 +
[[Image:FlowerTutorial-9.png|center|frame]]
 +
 +
Prin realizarea unei legaturi intre petala si varful tulpinii, miscarea varfului tulpinii va misca si petala. (Si invers, daca se misca marcatorul verde al petalei, se va misca si varful tulpinii, dar aici nu dorim acest lucru.)
 +
 +
In caseta Layers, selectati noul strat creat pentru Petale si duplicati-l (cu al treilea buton, care se afla in partea de jos a casetei pentru straturi - Layers).In spatiul de lucru, apasati combinatia de taste {{Shortcut|Ctrl|A}} pentru a selecta toate nodurile ale petalei duplicat si mutati-le putin, astfel incat petalele sa nu se suprapuna. (Nu mutati marcatorul verde, ci doar pe cele portocalii). Repetati operatiunea de cateva ori, pentru a obtine ceva asemanator imaginii de mai jos.
 +
 +
[[Image:FlowerTutorial-10.png|center|frame]]
 +
 +
Retineti ca fiecare petala duplicat este legata de varful tulpinii (preia aceasta proprietate de la prima petala).
 +
Daca reveniti la primul cadru-cheie, veti vedea ca petalele sunt vizibile.
 +
Dar nu dorim acest lucru. Petalele trebuie sa apara si sa creasca abia dupa ce a crescut tulpina.
 +
 +
== Ascunderea petalelor ==
 +
 +
<!-- 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 ;) -->
 +
 +
Sa presupunem ca dorim ca petalele sa apara putin dupa secunda a 4-a in animatie si sa creasca la marimea completa la secunda a 5-a.
 +
 +
Comutati din nou la modul de editare a animatiei - {{Literal|Animate Editing Mode}} cu click pe cercul verde din partea din dreapta-jos a spatiului de lucru. Dar daca vom merge la cadrul {{Literal|4s}} si il vom modifica, acesta va modifica si cadrul de la {{Literal|5s}}. Asta pentru ca forma/pozitia petalelor inca nu este fixata cu waypoints sau keyframes. Asta inseamna ca avem nevoie de {{Literal|5s}}. Pe bara timpului, click pe locul corespunzator celor 5 secunde din animatie. In caseta {{l|Keyframes}}, click pe "+" pentru a adauga un nou cadru-cheie.
 +
 +
Acum dati click pe {{literal|4s}}, si in caseta Layers, selectati toate straturile cu petale (cu ctrl+click), apoi apasati {{Shortcut|Ctrl|A}} pentru a selecta toate nodurile petalelor. Micsorati-le folosind {{l|Scale Tool}}, si mutati-le astfel incat sa fse afla dupa tulpina, ca in figura de mai jos.
 +
 +
[[Image:FlowerTutorial-11.png|center|frame]]
 +
 +
De la 4s la 5s, aceste petale vor aparea de dupa tulpina si vor creste/inflori. Dar retineti ca avem un cadru-cheie la 0s care a inregistrat si el forma petalelor. Problema este ca petalele sunt vizibile de la inceputul animatiei pana la cadrul 4s.
 +
In acest caz, putem fie sa facem petalele foarte mici in cadrele de la 0s la 4s, fie sa le facem invizibile pe acest interval.
 +
 +
Sa alegem rezolvarea a doua. Pentru a usura lucrurile, vom {{l|encapsulate|encapsula}} straturile cu petale intr-un  {{l|Paste Canvas|Inline Canvas}}. Avand toate straturile cu petale selectate, dati, click pe butonul din dreapta al mouse-ului in caseta Layers si selectati {{Literal|Encapsulate}}. Puteti redenumi straturile cu nume sugestive (de ex. “Petals”).
 +
 +
[[Image:FlowerTutorial-12.png|center|frame]]
 +
 +
Selectati stratul inline "Petals" si mergeti la primul cadru. In eticheta Param, setati valoarea {{Literal|Amount}} la {{Literal|0}}. Petalele sunt acum invizibile pentru acel cadru-cheie.
 +
Retineti ca acum au fost adaugate doua “waypoints” in fata parametrului {{Literal|Amount}},unul la 0s, iar celalalt la 5s. Trageti de punctul 5s spre 4s, astfel ca petalele sa fie opace in intervalul 1s-4s.
 +
 +
[[Image:FlowerTutorial-13.png|center|frame]]
 +
 +
Mai exista o problema: de la 0s la 4s, opacitatea petalelor creste incet, facand petalele vizibile, lucru care nu ar trebui sa se petreaca. Pentru a rezolva acest lucru, vom modifica metoda de interpolare a valorii. Cu click pe butonul dreapta mouse pe Amount waypoint la 0f, selectati {{Literal|Edit}}. Apare o fereastra de dialog, in care puteti alege intre interpolarea In sau Out. Alegeti interpolarea Out la {{Literal|Constant}}.
 +
 +
[[Image:FlowerTutorial-14.png|center|frame]]
 +
 +
{{Note|Truc|Puteti modifica interpolarea Out pentru “waypoint” cu click buton dreapta mouse pe el si selectarea {{c|Out|Constant}}.}}
 +
 +
 +
Asta inseamna ca ''dupa'' acest punct waypoint, valoarea Amount va ramane constanta, pana cand va fi intalnit un alt waypoint. Deci de la 0f la 4s valoarea Amount va fi 0, iar la 4s se va schimba deodata la 1, facand petalele vizibile, asa cum am dorit.  Alternativ, putem obtine acelasi efect prin setarea interpolarii In a waypoint la 4s la {{Literal|Constant}}.
 +
 +
Puteti observa cum (jumatate din) waypoint isi schimba culoarea din cerc verde (care reprezinta o animatie lina pentru parametrul amount) in cerc rosu (care inseamna ca acel parametru amount se modifica brusc).
 +
 +
Am terminat.
 +
Tulpina creste timp de 4.5 secunde si ramane nemiscata ultimele 1.5 secunde.
 +
Petalele sunt ascunse timp de 4 secunde, apoi cresc rapid intre secundele 4 si 5 si raman nemodificate in ultima secunda de animatie.
 +
 +
Click pe {{c|File|Render}} pentru a realiza animatia. Selectati orice format dorit si asigurati-va ca optiunea {{Literal|Use current frame}} este debifata (altfel va fi creata doar cadrul selectat).
 +
 +
== Etapele urmatoare ==
 +
 +
Aceasta este ultima lectie introductiva - de aici puteti citi pagina in care se descrie {{l|Doc:Interface|Interfata}} sau puteti continua sa cititi celelalte {{l|Category:Tutorials|lectii }}. In {{l|Category:Manual|Manual}} puteti gasi o lista cu articole care pot fi citite pentru a aprofunda invatarea aplicatiei Synfig.

Latest revision as of 09:28, 3 May 2012

Languages Language: 

English • español • français • italiano • português • română • русский • 中文（中国大陆）‎

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!

warning end


Navigation Navigation:  << • Manual • >>

Setarile de baza

In aceasta lectie vom invata sa realizam o animatie simpla - cresterea unei flori folosind BLines.

Flower 0.png
Deschideti aplicatia Synfig Studio — va fi creata o noua animatie. Daca ati deschis deja Synfig Studio, selectati "File → New" din caseta cu instrumente.

Mai intai, va trebui sa realizam o trecere de culoare - gradient pentru fundal. Click pe culorile pentru contur si pentru umplere din caseta cu instrumente pentru a selecta trecerea de culoare pe care o vom folosi. De asemenea puteti edita direct trecerea de culoare cu click pe linia de gradient din caseta cu instrumente.

Selectati instrumentul Gradient si trageti cursorul pe verticala pe suprafata spatiului de lucru pentru a-l umple cu acea trecere de culoare.

Apoi, selectati instrumentul BLine si in caseta Tool Options, asigurati-va ca este bifata doar optiunea "Create Region BLine". In cutia cu instrumente, setati culoarea de umplere la verde. Desenati un fel de triunghi folosind instrumentul BLine. Pentru a inchide forma dupa ce ati desenat cele trei noduri, dati click dreapta pe primul nod si alegeti "Loop BLine".

Dupa ce ati inchis forma, o puteti genera mai bine prin selectarea unui alt instrument sau prin apasarea butonului care are o roata dintata - din caseta de jos -Tool Options.

FlowerTutorialCanvas1.png

Aceasta forma va fi baza tulpinii. O puteti rotunji, tragand putin de marcatorii tangenti la noduri (punctele rosii). Cu instrumentul Transform Tool, dati click buton dreapta mouse pe fiecare nod si selectati "Split Tangents", pentru ca marcatorii pentru tangentele la fiecare nod sa poate fi miscate separat. Am incheiat setarile de baza.

FlowerTutorialCanvas2.png

Animarea / cresterea tulpinii

In meniul spatiului de lucru, selectati pictograma caret menu din coltul stanga-sus, in locul unde se intersecteaza cele doua rigle si selectati "Edit → Properties". Apoi dati click pe eticheta Time, setati "End time" la "6s" si confirmati setarea cu click pe butonul OK.

Dati click la timpul zero - inceputul filmului ("0f"), apoi in caseta Keyframes Panel (care are ca pictograma o cheie) dati click pe butonul cu un "+" (adaugarea unui cadru nou). Keyframes ne permite sa stabiliti scena; adica, pentru un cadru, fiecare element din scena va avea setate anumite proprietati. Click din nou pe bara timpului la "4.5s". Apasati cercul verde din partea dreapta-jos a spatiului de lucru (oricare pictograma ar fi acolo - depinde de tema cu pictograme aleasa) pentru a comuta la modul de editare animatie - Animate Editing Mode (cercul/pictograma va avea acum culoarea rosie).

Folosind instrumentul Transform, selectati mugurele verde si mutati nodul de deasupra in sus pentru a “creste” tulpina. Daca doriti, puteti sa modificati si pozitia marcatorilor nodului pentru a indoi putin forma .

FlowerTutorialCanvas3.png

Fiind la "4.5s", dati click pe butonul dreapta mouse fiind pe conturul tulpinii, aproape de varf si alegeti optiunea "Insert Item (smart)". Faceti acelasi lucru pe partea cealalta a varfului tulpinii. Dati click dreapta mouse pe aceste puncte noi si alegeti "Split Tangents". Apoi, folosind marcatorii, modificati forma ca sa semene cu cea din imagine, pentru a realiza bobocul de floare.

Acum dati click pe linia timpului la "2s" (de exemplu), ca sa vedeti daca forma bobocului este usor vizibila, chair daca tulpina este mica si chiar daca marcatorii pentru boboc sunt invizibili.

FlowerTutorialCanvas5.png

Nota

Din cauza unei erori in versiunea 0.63.02, "Insert Item (smart)" nu va produce un punct "Off" corect la cadrul-cheie anterior (la 0s). Va trebui sa mutati cursorul pentru timp la 0f si cu click buton dreapta mouse pe fiecare nod selectati "Set Active Point Off" .
note end
Development Notes:

Aceasta eroare a fost eliminata la versiunea (0.63.05).

Sa presupunem ca dorim ca bobocul sa apara abia la 3.5s si sa fie complet la 4.5s.

Click pe "3.5s" din bara timpului. Acum sa privim casetele "Params" si "Timetrack" din partea de jos. Veti vedea ca fiecare parametru din caseta Params se afla cate un rand care are corespondent in caseta Timetrack. Ultimul parametru este lista de noduri. Click pe sageata mica din stanga pentru a desfasura lista. Ar trebui sa vedeti ceva ca aici:

FlowerTutorialTimetrackParamsPanels6.png
FlowerTutorialCanvas4.png

Fiecare punct verde (sau waypoint) este o valoare inregistrata (aici pozitiile nodurilor sunt inregistrate la 0f (zero frame - cadrul zero) cu cadrul cheie si la 4s atunci cand am mutat cateva noduri sau marcatori de noduri). Cele doua noduri pe care le/am adaugat pentru a realiza bobocul sunt marcate la "DYN" (dinamic). Dati click buton dreapta de mouse pe acestea in lista de parametri, si selectati "Mark Activepoint as Off".

Caseta ar trebui sa arate ca mai jos, partea gri fiind partea unde nodurile bobocului nu au efect asupra tulpinii.

FlowerTutorial-7-WaypointsActivepointsOff.png

De exemplu, daca dati click pe "2s" sau chiar pe "3s", forma bobocului nu este vizibila. Aceasta incepe sa apara putin dupa 3.5s.

Oricum, e posibil ca forma tulpinii sa nu arate prea frumos in timpul cresterii intre 0 si 4s. Asigurati-va ca inca sunteti in modul de editare a animatiei - Animate Edit si modificati forma la momente diferite in timp, pentru a obtine ceva care sa va placa.

Animatia tulpinii este acum finalizata, dar lupsesc petalele. Puteti previzualiza animatia: in "File → Preview", validare, asteptati ca previzualizarea sa fie generata, apoi priviti.

Nota

Previzualizarea poate fi pixelata sau in ceata, dar randarea finala va arata mult mai bine. Previzualizarile de calitate inalta pot fi obtinute folosind valori mai mari pentru 'Zoom' si 'Frames per second' din fereastra de dialog pentru previzualizare.
note end


Adaugarea petalelor

Acum sa iesim din modul de editare a animatiei "Animate Editing" cu click pe cercul rosu din partea dreapta-jos a spatiului de lucru.

Schimbati culoarea de umplere la roz si creati o petala cu instrumentul BLine. Observati ca marcatorul verde care permite mutarea formei se afla in centrul spatiului de lucru. Selectati toate nodurile petalei cu CtrlA si mutati-le aproape de marcatorul verde (cu instrumentul Transform), ca in figura.

FlowerTutorial-8.png

Apoi trageti marcatorul verde foarte aproape de varful bobocului. Apasati din nou combinatia de taste CtrlA pentru a selecta toate nodurile petalei si modificati-le putin folosind instrumentul de rotire - Rotate. Apoi, in caseta pentru straturi - Layers Panel selectati stratul pentru petale si trageti-l sub stratul tulpinii. Click pe petala pentru a o selecta, apoi dati ctrl-click pe tulpina. Astfel ati selectat ambele obiecte.

Acum dati click pe nodul din varful tulpinii si ctrl-click pe marcatorul verde al petalei (ambele vor aparea cu o culoare mai deschisa, ca se indice ca au fost selectate). Apoi dati click buton dreapta de mouse pe nodul din varf al tulpinii si selectati "Link". Petala se va misca putin, pentru ca marcatorul verde va fi legat la nodul tulpinii.

FlowerTutorial-9.png

Prin realizarea unei legaturi intre petala si varful tulpinii, miscarea varfului tulpinii va misca si petala. (Si invers, daca se misca marcatorul verde al petalei, se va misca si varful tulpinii, dar aici nu dorim acest lucru.)

In caseta Layers, selectati noul strat creat pentru Petale si duplicati-l (cu al treilea buton, care se afla in partea de jos a casetei pentru straturi - Layers).In spatiul de lucru, apasati combinatia de taste CtrlA pentru a selecta toate nodurile ale petalei duplicat si mutati-le putin, astfel incat petalele sa nu se suprapuna. (Nu mutati marcatorul verde, ci doar pe cele portocalii). Repetati operatiunea de cateva ori, pentru a obtine ceva asemanator imaginii de mai jos.

FlowerTutorial-10.png

Retineti ca fiecare petala duplicat este legata de varful tulpinii (preia aceasta proprietate de la prima petala). Daca reveniti la primul cadru-cheie, veti vedea ca petalele sunt vizibile. Dar nu dorim acest lucru. Petalele trebuie sa apara si sa creasca abia dupa ce a crescut tulpina.

Ascunderea petalelor

Sa presupunem ca dorim ca petalele sa apara putin dupa secunda a 4-a in animatie si sa creasca la marimea completa la secunda a 5-a.

Comutati din nou la modul de editare a animatiei - "Animate Editing Mode" cu click pe cercul verde din partea din dreapta-jos a spatiului de lucru. Dar daca vom merge la cadrul "4s" si il vom modifica, acesta va modifica si cadrul de la "5s". Asta pentru ca forma/pozitia petalelor inca nu este fixata cu waypoints sau keyframes. Asta inseamna ca avem nevoie de "5s". Pe bara timpului, click pe locul corespunzator celor 5 secunde din animatie. In caseta Keyframes, click pe "+" pentru a adauga un nou cadru-cheie.

Acum dati click pe "4s", si in caseta Layers, selectati toate straturile cu petale (cu ctrl+click), apoi apasati CtrlA pentru a selecta toate nodurile petalelor. Micsorati-le folosind Scale Tool, si mutati-le astfel incat sa fse afla dupa tulpina, ca in figura de mai jos.

FlowerTutorial-11.png

De la 4s la 5s, aceste petale vor aparea de dupa tulpina si vor creste/inflori. Dar retineti ca avem un cadru-cheie la 0s care a inregistrat si el forma petalelor. Problema este ca petalele sunt vizibile de la inceputul animatiei pana la cadrul 4s. In acest caz, putem fie sa facem petalele foarte mici in cadrele de la 0s la 4s, fie sa le facem invizibile pe acest interval.

Sa alegem rezolvarea a doua. Pentru a usura lucrurile, vom encapsula straturile cu petale intr-un Inline Canvas. Avand toate straturile cu petale selectate, dati, click pe butonul din dreapta al mouse-ului in caseta Layers si selectati "Encapsulate". Puteti redenumi straturile cu nume sugestive (de ex. “Petals”).

FlowerTutorial-12.png

Selectati stratul inline "Petals" si mergeti la primul cadru. In eticheta Param, setati valoarea "Amount" la "0". Petalele sunt acum invizibile pentru acel cadru-cheie. Retineti ca acum au fost adaugate doua “waypoints” in fata parametrului "Amount",unul la 0s, iar celalalt la 5s. Trageti de punctul 5s spre 4s, astfel ca petalele sa fie opace in intervalul 1s-4s.

FlowerTutorial-13.png

Mai exista o problema: de la 0s la 4s, opacitatea petalelor creste incet, facand petalele vizibile, lucru care nu ar trebui sa se petreaca. Pentru a rezolva acest lucru, vom modifica metoda de interpolare a valorii. Cu click pe butonul dreapta mouse pe Amount waypoint la 0f, selectati "Edit". Apare o fereastra de dialog, in care puteti alege intre interpolarea In sau Out. Alegeti interpolarea Out la "Constant".

FlowerTutorial-14.png

Truc

Puteti modifica interpolarea Out pentru “waypoint” cu click buton dreapta mouse pe el si selectarea "Out → Constant".
note end


Asta inseamna ca dupa acest punct waypoint, valoarea Amount va ramane constanta, pana cand va fi intalnit un alt waypoint. Deci de la 0f la 4s valoarea Amount va fi 0, iar la 4s se va schimba deodata la 1, facand petalele vizibile, asa cum am dorit. Alternativ, putem obtine acelasi efect prin setarea interpolarii In a waypoint la 4s la "Constant".

Puteti observa cum (jumatate din) waypoint isi schimba culoarea din cerc verde (care reprezinta o animatie lina pentru parametrul amount) in cerc rosu (care inseamna ca acel parametru amount se modifica brusc).

Am terminat. Tulpina creste timp de 4.5 secunde si ramane nemiscata ultimele 1.5 secunde. Petalele sunt ascunse timp de 4 secunde, apoi cresc rapid intre secundele 4 si 5 si raman nemodificate in ultima secunda de animatie.

Click pe "File → Render" pentru a realiza animatia. Selectati orice format dorit si asigurati-va ca optiunea "Use current frame" este debifata (altfel va fi creata doar cadrul selectat).

Etapele urmatoare

Aceasta este ultima lectie introductiva - de aici puteti citi pagina in care se descrie Interfata sau puteti continua sa cititi celelalte lectii. In Manual puteti gasi o lista cu articole care pot fi citite pentru a aprofunda invatarea aplicatiei Synfig.


Languages Language: 

English • español • français • italiano • português • română • русский • 中文（中国大陆）‎

Retrieved from "https://wiki.synfig.org/index.php?title=Doc:Flower_Animation/ro&oldid=15914"