Animation Basics
(→Introducere) |
(→Setarea spatiului de lucru) |
||
| Line 19: | Line 19: | ||
== Setarea spatiului de lucru == | == Setarea spatiului de lucru == | ||
| + | |||
| + | Deschidem aplicatia Synfig Studio. Automat este creat un fisier nou. Click pe meniul 'caret' (care se afla la intersectia riglei orizontale cu cea verticala, in partea din stanga sus a spatiului de lucru), apoi selectam {{c|Edit|Properties}}. Va fi afisata fereastra de dialog {{l|Canvas_Properties_Dialog}}. | ||
| + | |||
| + | Dati un nume si o descriere pentru spatiul de lucru, apoi click pe {{Literal|Apply}} (inca nu dati click pe {{Literal|OK}} — inca nu am terminat cu fereastra de dialog Properties). In eticheta {{Literal|Time}} modificati {{Literal|End Time}}, de la "5s" la "2s" — acest lucru va face ca animatia sa dureze doar doua secunde. | ||
| + | |||
| + | [[Image:File Properties Dialog - End Time.png|center|frame|Canvas Properties Dialog]] | ||
| + | |||
| + | Acum dati click pe "OK", selectati instrumentul {{l|Rectangle Tool}} si creati un dreptunghi negru care va servi ca fundal. nu este necesara acoperirea intregului spatiu de lucru. | ||
| + | |||
| + | [[Image:synfig_tut_2.png|450px|center|thumb]] | ||
| + | |||
| + | Acum vom desena cercul. Modificati culoarea de umplere la rosu, selectati instrumentul {{l|Circle Tool}} si creati un cerc. Nu conteaza cat de perfect este: acesta poate fi editat ulterior. Selectati instrumentul {{l|Transform Tool}} si dati click pe cerc. Astfel comutati in mod editare - apare un punct mic de culoare verde in mijlocul obiectului selectat si un patrat (alb) in jurul acestuia. Puteti muta cercul prin tragerea punctului verde (''Originea'') care se afla in mijlocul acestuia. | ||
| + | |||
| + | [[Image:synfig_tut_3.png|450px|center|thumb]] | ||
| + | |||
| + | Acestia sunt primii pasi pentru desenarea si mutarea unui obiect, dar inca nu am realizat animatia. Sa vedem cum functioneaza. | ||
| + | |||
| + | == Adaugarea miscarii == | ||
| + | |||
| + | La inceput, am introdus o valoare de 2 secunde in fereastra de dialog Properties. Datorita faptului ca animatia este non-zero, fereastra spatiului de lucru (locul unde desenati) are un cursor gri pentru timp in partea de jos, pe bara pentru timp - {{l|Timebar}}. Cu click pe bara, va apare un mic indicator portocaliu care indica pozitia in timp. Cu click in diferite locuri pe bara timpului se observa ca in campul din stanga barei se modifica valorile - de ex "12f", "1s 15f", etc. Se poate seta pozitia in bara pentru timp modificand valorile din acel camp. De exemplu, daca tastati "1s" si apasati {{Shortcut|enter}}, indicatorul portocaliu se va muta la mijlocul barei de timp, iar tastand "2s" il va muta la sfarsitul barei pentru timp (in acest caz, animatia a fost setata la doar doua secunde). | ||
| + | |||
| + | {{Note|Nota|La doua secunde, indicatorul portocaliu nu va mai fi vizibil. Asta pentru ca "2s" se afla chiar la marginea din dreapta barei pentru timp, loc unde indicatorul nu mai este vizibil.}} | ||
| + | |||
| + | Vei observa ca nu se modifica nimic pe spatiul de lucru in acest moment. Comutati in modul {{l|Animate Editing Mode}} cu click pe butonul verde care reprezinta un om - din dreapta barei pentru timp. Spatiul de lucru va afisa un contur rosu; aceasta pentru a va atentiona ca modificarile la obiecte vor afecta animatia la timpul afisat pe bara timpului. | ||
| + | |||
| + | In modul de editare a animatiei, orice modificare a obiectelor creeaza un punct de referinta {{l|Waypoint|waypoint}} care asociaza modificarile in spatiu cu timpul curent. Dupa cum veti vedea, Synfig poate creea modificari line intre punctele de referinta si se poate alege si modul in care vor avea loc acele modificari. Este utila si asocierea unor sau tuturor punctelor de referinta cu cadrele-cheie respective - {{l|Keyframe|keyframes}}. | ||
| + | |||
| + | [[Image:synfig_tut_4.png|450px|center|thumb]] | ||
| + | |||
| + | Mai sus au fost men’ionati trei "pasi" sau "scene". Acestia sunt reprezentati de cadre-cheie - {{l|Keyframe|keyframes}}. (In cayul in care sunteti familiarizati cu “video encoding”: Nu este acelasi lucru!) Aici, un cadru-cheie este o imagine in timp unde se petrece ceva important cu obiectele de pe spatiul de lucru. | ||
| + | |||
| + | In caseta {{l|Keyframes_Panel}} — click pe eticheta mica care are ca si pictograma o cheie - in partea de jos a ferestrei — pentru a edita cadrele-cheie. Acum apasati pe butonul mic care are semnul "plus" si veti obtine o noua valoare in lista, ceva de genul {{Literal|0f, 0f, (JMP)}}. | ||
| + | |||
| + | [[Image:Keyframes Panel.png|center|frame]] | ||
| + | |||
| + | Acum, reveniti la primul marcaj "1s" de pe bara timpului. Micul indicator portocaliu ar trebui sa sara in acel loc. Apoi adaugati un alt cadru-cheie cu click pe semnul plus. Repetati operatia, avand indicatorul la "2s" (la finalul animatiei). Ar trebui sa aveti acum trei cadre-cheie in lista. | ||
| + | |||
| + | [[Image:Keyframes Panel 2.png|center|frame]] | ||
| + | |||
| + | == The s's and f's: Intelegerea barei pentru timp == | ||
| + | Sa vedem ce inseamna marcajele de tip "1s 10f". Acestea indica un anumit punct pe bara timpului, exprimat in secunde (s) si cadre (f). | ||
| + | |||
| + | Implicit, fiecare secunda este impartita in 24 de cadre, asa cum un metru este impartita in 100 de centimetri. Marcajele pentru cadre incep de la zero (0) si merg pana la 24, de unde incepe o noua secunda pe bara timpului, iar numaratoarea cadrelor reincepe de la zero. | ||
| + | |||
| + | De exemplu, dupa ce au trecut 5 secunde si trei cadre, notatia de pe bara timpului este "5s 3f". | ||
| + | |||
| + | == Caseta pentru cadrele-cheie == | ||
| + | |||
| + | Caseta {{l|Keyframes Panel}} este simpla. Afiseaza timpul - {{Literal|Time}} care contine timpul de incepere, lungimea animatiei - {{Literal|Length}}, salturile - {{Literal|Jump}} pana la urmatoarea scena si descrierea - {{Literal|Description}}. | ||
| + | |||
| + | Inregistrarile numite {{Literal|(JMP)}} functioneaza ca si legaturile de pe o pagina web: la click pe acestea, indicatorul din bara timpului va sari la timpul corespunzator. | ||
| + | |||
| + | Acestea pot fi folosite pentru editarea imaginii la un moment dat in timp. De exemplu, puteti sari la prima secunda si sa mutati cercul rosu la dreapta. Iata! Ati realizat prima miscare si prima animatie cu Synfig! | ||
| + | |||
| + | {{l|Image:synfig_tut_5.png|center|frame}} | ||
| + | |||
| + | Acum dati click pe o pozitie oarecare de pe bara timpului: observati ca cercul rosu se va deplasa intr-o alta pozitie pe care nu ati specificat-o! Deci, ce s-a intamplat? Synfig a mutat cercul si a desenat toate imaginile intermediare dintre cele doua cadre-cheie. Fiecare imagine va constitui mai tarziu un cadru in animatie, iar cercul va parea ca se misca. | ||
| + | |||
| + | Retineti ca nu este necesar sa mergeti la ultimul cadru de la "2s" si sa mutati cercul inapoi in partea stanga. Cadrele-cheie il fac pe Synfig sa retina starile imaginii la momente diferite. De aceea, cand am modificat pozitia cercului la "1s", acesta a ramas nemiscat la "2s" (aceeasi pozitie ca la "0s"). Daca reveniti la caseta cu parametri - Params Panel si priviti la caseta {{l|Timetrack Panel}}, veti vedea trei romburi portocalii (sau puncte verzi in versiunile anterioare ale Synfig) care apar in dreapta paremetrului {{Literal|Origin}}. Acestea sunt numite {{L|Waypoints}} si reprezinta la acel timp parametrii fiecarui obiect, cum ar fi locatie sau culoare. | ||
| + | |||
| + | [[Image:TimetrackOriginWaypoints.png|thumb|center|450px]] | ||
| + | |||
| + | == Realizarea (randarea) animatiei == | ||
| + | |||
| + | Inainte de a vedea animatia, aceasta trebuie randata. Acest lucru poate fi facut prin doua moduri: folosind Synfig Studio (aplicatia) sau un program in linie de comanda numit "synfig". | ||
| + | |||
| + | Sa incercam prima metoda. Parasiti modul de editare cu click pe punctul rosu de pe bara timpului si salvati fisierul cu un nume sugestiv. Apoi, din meniul ferestrei Canvas (butonul "caret" din coltul din stanga sus) selectati optiunea {{c|File|Render}}. Alegeti ca fisierul randat sa fie de tip .gif ,apoi click pe Render. In functie de viteza procesorului, randarea ar putea dura cateva momente, iar la final, pe bara de stare a ferestrei va apare mesajul de confirmare a operatiei: "File rendered successfully". | ||
| + | |||
| + | [[Image:synfig_tut_6.png|618px|thumb|center|Calling "Render" from menu in Synfig Studio]] | ||
| + | |||
| + | {{Note|Nota|Optiunea "magick++" (daca este valabila) produce fisiere gif optimizate.}} | ||
| + | Apoi puteti deschide fisierul.gif in browser (Firefox sau alta aplicatie) pentru a vedea animatia realizata. Felicitari! Tocmai ati realizat prima animatie! | ||
| + | |||
| + | {{Note|Nota|Puteti previzualiza animatia. Apasati pe butonul meniului "caret" din coltul stanga-sus a ferestrei Canvas si alegeti din meniu {{c|File|Preview}}.}} | ||
| + | Daca doriti sa folositi linia de comanda in locul randarii cu ajutorul meniului, deschideti un terminal (in Windows, mergeti in {{c|Start|Run}}, tastati {{Literal|cmd}} si apasati {{Shortcut|enter}}), modificati directorul in care ati salvat fisierul si tastati ceva de genul: | ||
| + | |||
| + | synfig -t gif BasicKnightRider.sifz | ||
| + | |||
| + | Vor apara cateva mesaje de configurare care nu conteaza acum. In functie de viteza procesorului, dupa cateva momente va apare in linia de comanda un mesaj de tipul: | ||
| + | |||
| + | BasicKnightRider.sifz ==> BasicKnightRider.gif: DONE | ||
| + | |||
| + | Apoi puteti vizualiza fisierul gif animat folosind un browser, asa cum am mentionat si mai sus. | ||
| + | |||
| + | == Concluzie == | ||
| + | |||
| + | Desigur, pozitia unui obiect nu e singurul lucru care poate fi modificat cu Synfig Studio. Exista si alte posibilitati, care includ marimea, conturul, culoarea etc. Synfig vine cu cateva fisiere exemplu care va permit sa analizati mai bine posibilitatile aplicatiei. | ||
| + | |||
| + | Acum sa continuam cu urmatorul capitol din manual: {{l|Doc:Adding Layers|Adaugare straturi}}. | ||
Revision as of 20:53, 23 March 2012
 |
Language: |
English • Deutsch • español • suomi • français • italiano • Nederlands • 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! |
Contents
Introducere
Crearea unei animatii in Synfig Studio este simpla. Se rezuma doar la modificarea unui desen — e suficient sa creati prima si ultima scena, iar Synfig va realiza pasii intermediari.
Sa realizam un exemplu simplu: un cerc alb care se misca pe fundal negru. Va trebui sa realizam un cerc care se misca de la stanga la dreapta si inapoi. Altfel zis, vom creea trei 'pasi' sau 'scene':
- Cercul se afla la stanga.
- Cercul se afla la dreapta.
- Cercul revine la stanga.
Setarea spatiului de lucru
Deschidem aplicatia Synfig Studio. Automat este creat un fisier nou. Click pe meniul 'caret' (care se afla la intersectia riglei orizontale cu cea verticala, in partea din stanga sus a spatiului de lucru), apoi selectam "Edit → Properties". Va fi afisata fereastra de dialog Canvas Properties Dialog.
Dati un nume si o descriere pentru spatiul de lucru, apoi click pe "Apply" (inca nu dati click pe "OK" — inca nu am terminat cu fereastra de dialog Properties). In eticheta "Time" modificati "End Time", de la "5s" la "2s" — acest lucru va face ca animatia sa dureze doar doua secunde.
Acum dati click pe "OK", selectati instrumentul Rectangle Tool si creati un dreptunghi negru care va servi ca fundal. nu este necesara acoperirea intregului spatiu de lucru.
Acum vom desena cercul. Modificati culoarea de umplere la rosu, selectati instrumentul Circle Tool si creati un cerc. Nu conteaza cat de perfect este: acesta poate fi editat ulterior. Selectati instrumentul Transform Tool si dati click pe cerc. Astfel comutati in mod editare - apare un punct mic de culoare verde in mijlocul obiectului selectat si un patrat (alb) in jurul acestuia. Puteti muta cercul prin tragerea punctului verde (Originea) care se afla in mijlocul acestuia.
Acestia sunt primii pasi pentru desenarea si mutarea unui obiect, dar inca nu am realizat animatia. Sa vedem cum functioneaza.
Adaugarea miscarii
La inceput, am introdus o valoare de 2 secunde in fereastra de dialog Properties. Datorita faptului ca animatia este non-zero, fereastra spatiului de lucru (locul unde desenati) are un cursor gri pentru timp in partea de jos, pe bara pentru timp - Timebar. Cu click pe bara, va apare un mic indicator portocaliu care indica pozitia in timp. Cu click in diferite locuri pe bara timpului se observa ca in campul din stanga barei se modifica valorile - de ex "12f", "1s 15f", etc. Se poate seta pozitia in bara pentru timp modificand valorile din acel camp. De exemplu, daca tastati "1s" si apasati ↵ Enter, indicatorul portocaliu se va muta la mijlocul barei de timp, iar tastand "2s" il va muta la sfarsitul barei pentru timp (in acest caz, animatia a fost setata la doar doua secunde).
|
Nota La doua secunde, indicatorul portocaliu nu va mai fi vizibil. Asta pentru ca "2s" se afla chiar la marginea din dreapta barei pentru timp, loc unde indicatorul nu mai este vizibil.
|
Vei observa ca nu se modifica nimic pe spatiul de lucru in acest moment. Comutati in modul Animate Editing Mode cu click pe butonul verde care reprezinta un om - din dreapta barei pentru timp. Spatiul de lucru va afisa un contur rosu; aceasta pentru a va atentiona ca modificarile la obiecte vor afecta animatia la timpul afisat pe bara timpului.
In modul de editare a animatiei, orice modificare a obiectelor creeaza un punct de referinta waypoint care asociaza modificarile in spatiu cu timpul curent. Dupa cum veti vedea, Synfig poate creea modificari line intre punctele de referinta si se poate alege si modul in care vor avea loc acele modificari. Este utila si asocierea unor sau tuturor punctelor de referinta cu cadrele-cheie respective - keyframes.
Mai sus au fost men’ionati trei "pasi" sau "scene". Acestia sunt reprezentati de cadre-cheie - keyframes. (In cayul in care sunteti familiarizati cu “video encoding”: Nu este acelasi lucru!) Aici, un cadru-cheie este o imagine in timp unde se petrece ceva important cu obiectele de pe spatiul de lucru.
In caseta Keyframes Panel — click pe eticheta mica care are ca si pictograma o cheie - in partea de jos a ferestrei — pentru a edita cadrele-cheie. Acum apasati pe butonul mic care are semnul "plus" si veti obtine o noua valoare in lista, ceva de genul "0f, 0f, (JMP)".
Acum, reveniti la primul marcaj "1s" de pe bara timpului. Micul indicator portocaliu ar trebui sa sara in acel loc. Apoi adaugati un alt cadru-cheie cu click pe semnul plus. Repetati operatia, avand indicatorul la "2s" (la finalul animatiei). Ar trebui sa aveti acum trei cadre-cheie in lista.
The s's and f's: Intelegerea barei pentru timp
Sa vedem ce inseamna marcajele de tip "1s 10f". Acestea indica un anumit punct pe bara timpului, exprimat in secunde (s) si cadre (f).
Implicit, fiecare secunda este impartita in 24 de cadre, asa cum un metru este impartita in 100 de centimetri. Marcajele pentru cadre incep de la zero (0) si merg pana la 24, de unde incepe o noua secunda pe bara timpului, iar numaratoarea cadrelor reincepe de la zero.
De exemplu, dupa ce au trecut 5 secunde si trei cadre, notatia de pe bara timpului este "5s 3f".
Caseta pentru cadrele-cheie
Caseta Keyframes Panel este simpla. Afiseaza timpul - "Time" care contine timpul de incepere, lungimea animatiei - "Length", salturile - "Jump" pana la urmatoarea scena si descrierea - "Description".
Inregistrarile numite "(JMP)" functioneaza ca si legaturile de pe o pagina web: la click pe acestea, indicatorul din bara timpului va sari la timpul corespunzator.
Acestea pot fi folosite pentru editarea imaginii la un moment dat in timp. De exemplu, puteti sari la prima secunda si sa mutati cercul rosu la dreapta. Iata! Ati realizat prima miscare si prima animatie cu Synfig!
Acum dati click pe o pozitie oarecare de pe bara timpului: observati ca cercul rosu se va deplasa intr-o alta pozitie pe care nu ati specificat-o! Deci, ce s-a intamplat? Synfig a mutat cercul si a desenat toate imaginile intermediare dintre cele doua cadre-cheie. Fiecare imagine va constitui mai tarziu un cadru in animatie, iar cercul va parea ca se misca.
Retineti ca nu este necesar sa mergeti la ultimul cadru de la "2s" si sa mutati cercul inapoi in partea stanga. Cadrele-cheie il fac pe Synfig sa retina starile imaginii la momente diferite. De aceea, cand am modificat pozitia cercului la "1s", acesta a ramas nemiscat la "2s" (aceeasi pozitie ca la "0s"). Daca reveniti la caseta cu parametri - Params Panel si priviti la caseta Time Track Panel, veti vedea trei romburi portocalii (sau puncte verzi in versiunile anterioare ale Synfig) care apar in dreapta paremetrului "Origin". Acestea sunt numite Waypoints si reprezinta la acel timp parametrii fiecarui obiect, cum ar fi locatie sau culoare.
Realizarea (randarea) animatiei
Inainte de a vedea animatia, aceasta trebuie randata. Acest lucru poate fi facut prin doua moduri: folosind Synfig Studio (aplicatia) sau un program in linie de comanda numit "synfig".
Sa incercam prima metoda. Parasiti modul de editare cu click pe punctul rosu de pe bara timpului si salvati fisierul cu un nume sugestiv. Apoi, din meniul ferestrei Canvas (butonul "caret" din coltul din stanga sus) selectati optiunea "File → Render". Alegeti ca fisierul randat sa fie de tip .gif ,apoi click pe Render. In functie de viteza procesorului, randarea ar putea dura cateva momente, iar la final, pe bara de stare a ferestrei va apare mesajul de confirmare a operatiei: "File rendered successfully".
|
Nota Optiunea "magick++" (daca este valabila) produce fisiere gif optimizate.
|
Apoi puteti deschide fisierul.gif in browser (Firefox sau alta aplicatie) pentru a vedea animatia realizata. Felicitari! Tocmai ati realizat prima animatie!
|
Nota Puteti previzualiza animatia. Apasati pe butonul meniului "caret" din coltul stanga-sus a ferestrei Canvas si alegeti din meniu "File → Preview".
|
Daca doriti sa folositi linia de comanda in locul randarii cu ajutorul meniului, deschideti un terminal (in Windows, mergeti in "Start → Run", tastati "cmd" si apasati ↵ Enter), modificati directorul in care ati salvat fisierul si tastati ceva de genul:
synfig -t gif BasicKnightRider.sifz
Vor apara cateva mesaje de configurare care nu conteaza acum. In functie de viteza procesorului, dupa cateva momente va apare in linia de comanda un mesaj de tipul:
BasicKnightRider.sifz ==> BasicKnightRider.gif: DONE
Apoi puteti vizualiza fisierul gif animat folosind un browser, asa cum am mentionat si mai sus.
Concluzie
Desigur, pozitia unui obiect nu e singurul lucru care poate fi modificat cu Synfig Studio. Exista si alte posibilitati, care includ marimea, conturul, culoarea etc. Synfig vine cu cateva fisiere exemplu care va permit sa analizati mai bine posibilitatile aplicatiei.
Acum sa continuam cu urmatorul capitol din manual: Adaugare straturi.
