Animatie basis
(Created page with "<!-- Page info --> {{Title|Animatie basis}} {{Navigation|Category:Manual|Doc:Adding Layers}} Category:Manual Category:Tutorials Category:Tutorials Basic [[Category:Up...") |
|||
| Line 38: | Line 38: | ||
== Beweging toevoegen == | == Beweging toevoegen == | ||
| − | In het eigenschappenvenster heb je in het begin een waarde van twee seconden ingegeven. Daar de lengte van je animatie niet nul is heeft je canvasvenster ( | + | In het eigenschappenvenster heb je in het begin een waarde van twee seconden ingegeven. Daar de lengte van je animatie niet nul is heeft je canvasvenster (datgene waarin je tekent) onderaan een grijze tijdsglijder. Je kunt hierop klikken en een smalle oranje indicator geeft je positie in de tijd aan. Probeer om op verschillende plaaten op de tijdsglijder te klikken en merkt op dat het tekstveld aan de linkerzijde van de tijdsglijder steeds van waarde verandert. Je kunt je positie op de tijdsglijder aanpassen door de waardes in dat tekstveld te veranderen. Als je b.v. "ls" invult en op {{shortcut|enter}} drukt, zal de oranje indicator naar het midden van de tijdsglijder springen, "2s" invullen zal de indicator naar het einde van de tijdsglijder verplaatsen. |
{{Note|Opmerking|Op 2s zal de oranje indicator niet zichtbaar zijn. Dit komt omdat "2s" aan het rechteruiteinde van de tijdsglijder ligt, waardoor de indicator als het ware onzichtbaar wordt.}} | {{Note|Opmerking|Op 2s zal de oranje indicator niet zichtbaar zijn. Dit komt omdat "2s" aan het rechteruiteinde van de tijdsglijder ligt, waardoor de indicator als het ware onzichtbaar wordt.}} | ||
| Line 45: | Line 45: | ||
[[Image:synfig_tut_4.png|450px|center|thumb]] | [[Image:synfig_tut_4.png|450px|center|thumb]] | ||
| − | Voorheen hebben we gemeld dat er drie "stappen" of "stages" nodig zijn. Deze worden voorgesteld door zogenaamde {{l|keyframe|keyframes}}. (In geval je | + | Voorheen hebben we gemeld dat er drie "stappen" of "stages" nodig zijn. Deze worden voorgesteld door zogenaamde {{l|keyframe|keyframes}}. (In geval je bekend bent met videoencoding: Neen, het is niet hetzelfde!) Een keyframe is een afbeelding in de tijd waarop iets belangrijks met het object gebeurt. |
Ga naar het keyframespaneel — klik op het kleine tabje met het icoon van een sleutel onderaan het venster — om keyframes aan te passen. Klik nu op de kleine knop met het "plus" teken en je zou een nieuwe ingang moeten krijgen in de lijst die aangeeft {{Literal|0f, 0f, (JMP)}}. | Ga naar het keyframespaneel — klik op het kleine tabje met het icoon van een sleutel onderaan het venster — om keyframes aan te passen. Klik nu op de kleine knop met het "plus" teken en je zou een nieuwe ingang moeten krijgen in de lijst die aangeeft {{Literal|0f, 0f, (JMP)}}. | ||
| Line 58: | Line 58: | ||
Misschien heb je al ontdekt wat die mysterieuze "1s 10f" type markeringen willen zeggen. Ze geven een specifiek punt op de tijdslijn aan, door een locatie in seconden (s) of in frames (f) weer te geven. | Misschien heb je al ontdekt wat die mysterieuze "1s 10f" type markeringen willen zeggen. Ze geven een specifiek punt op de tijdslijn aan, door een locatie in seconden (s) of in frames (f) weer te geven. | ||
| − | Standaard wordt elke seconde in 24 frames verdeeld, zoals een meter op een meetlint is onderverdeeld in 100 centimeters. De | + | Standaard wordt elke seconde in 24 frames verdeeld, zoals een meter op een meetlint is onderverdeeld in 100 centimeters. De framemarkeringen beginnen bij nul en gaan tot 24, waarna een nieuwe seconde wordt weergegeven en de teller van de frames terug op nul wordt geplaatst. |
B.v. wanneer er vijf hele seconden en drie frames gepasseerd zijn, zou de notatie door gebruik te maken van deze tijdslijn "5s 3f" moeten zijn. | B.v. wanneer er vijf hele seconden en drie frames gepasseerd zijn, zou de notatie door gebruik te maken van deze tijdslijn "5s 3f" moeten zijn. | ||
| Line 64: | Line 64: | ||
== De keyframe lijst == | == De keyframe lijst == | ||
| − | De keyframe lijst is tamelijk gemakkelijk te begrijpen. Het toont de {{Literal| | + | De keyframe lijst is tamelijk gemakkelijk te begrijpen. Het toont de {{Literal|Time}} wat ongeveer gelijk is aan de starttijd, de {{Literal|Length}} wat zichzelf uitwijst, {{Literal|Jump}} die we in het volgende stuk zullen bespreken, en {{Literal|Description}} die opnieuw zichzelf uitwijst. |
Misschien vraag je je nu af wat de "entries" {{Literal|(JMP)}} betekenen. Dit zijn in feite links zoals weblinks: klik erop en de indicator in je tijdsglijder zal verspringen naar de correcte tijd. | Misschien vraag je je nu af wat de "entries" {{Literal|(JMP)}} betekenen. Dit zijn in feite links zoals weblinks: klik erop en de indicator in je tijdsglijder zal verspringen naar de correcte tijd. | ||
| Line 72: | Line 72: | ||
{{l|Image:synfig_tut_5.png|center|frame}} | {{l|Image:synfig_tut_5.png|center|frame}} | ||
| − | Waar bevindt zich nu deze animatie? Klik gewoon op een vrije positie op de tijdsglijder: je zult zien dat de rode cirkel op een nieuwe positie staat, één die je niet zelf hebt aangegeven! Dus wat is er gebeurd? Synfig wist wat je wilde doen, namelijk de cirkel | + | Waar bevindt zich nu deze animatie? Klik gewoon op een vrije positie op de tijdsglijder: je zult zien dat de rode cirkel op een nieuwe positie staat, één die je niet zelf hebt aangegeven! Dus wat is er gebeurd? Synfig wist wat je wilde doen, namelijk de cirkel verplaatsen, en tekende alle afbeeldingen tussen de keyframes. Elke afbeelding zal later een frame voorstellen in je animatie en de cirkel zal bewegen. |
Merk op dat het niet nodig is naar de laatste keyframe op "2s" te gaan en de cirkel terug naar links te verplaatsen. Keyframes laten Synfig toe de afbeeldingsplaatsen op een bepaald tijdstip te herinneren. Dat is waarom bij het verplaatsen van de positie van de cirkel op "1s", het links bleef staan op "2s" (zoals ook op "0s"). Als je terug naar het parameterspaneel gaat, en kijkt naar de TimeTrackpanel, zul je merken dat er drie groene punten verschenen zijn aan de rechterkant van de {{Literal|Origin}} parameter. Deze worden {{L|Waypoints}} genoemd, en worden gebruikt om veranderingen van de parameterwaarden over de tijd aan te geven. | Merk op dat het niet nodig is naar de laatste keyframe op "2s" te gaan en de cirkel terug naar links te verplaatsen. Keyframes laten Synfig toe de afbeeldingsplaatsen op een bepaald tijdstip te herinneren. Dat is waarom bij het verplaatsen van de positie van de cirkel op "1s", het links bleef staan op "2s" (zoals ook op "0s"). Als je terug naar het parameterspaneel gaat, en kijkt naar de TimeTrackpanel, zul je merken dat er drie groene punten verschenen zijn aan de rechterkant van de {{Literal|Origin}} parameter. Deze worden {{L|Waypoints}} genoemd, en worden gebruikt om veranderingen van de parameterwaarden over de tijd aan te geven. | ||
| Line 84: | Line 84: | ||
Laten we de eerste manier proberen. Verlaat de animatiebewerkingsmodus door op de rode punt in de tijdslijn editing widget te klikken, en sla je bestand op; b.v. onder de naam "BasicKnighRider.sifz". Ga dan naar het menu in het Canvasvenster (de "caret"knop in de linkerbovenhoek) en selecteer {{c|File|Render}}. Verander de bestandsnaam in "BasicKnighRider.gif" in dezelfde map als waar je "BasicKnighRider.sifz" hebt opgeslagen en kies als formaat "Gif in plaats van "Auto", klik daarna op Render. Naargelang je processorsnelheid zal het een paar seconden duren, maar uiteindelijk zal de statusbalk in de afbeeldingsvenster (onderaan het venster) moeten vermelden "File rendered succesfully". | Laten we de eerste manier proberen. Verlaat de animatiebewerkingsmodus door op de rode punt in de tijdslijn editing widget te klikken, en sla je bestand op; b.v. onder de naam "BasicKnighRider.sifz". Ga dan naar het menu in het Canvasvenster (de "caret"knop in de linkerbovenhoek) en selecteer {{c|File|Render}}. Verander de bestandsnaam in "BasicKnighRider.gif" in dezelfde map als waar je "BasicKnighRider.sifz" hebt opgeslagen en kies als formaat "Gif in plaats van "Auto", klik daarna op Render. Naargelang je processorsnelheid zal het een paar seconden duren, maar uiteindelijk zal de statusbalk in de afbeeldingsvenster (onderaan het venster) moeten vermelden "File rendered succesfully". | ||
| − | [[Image:synfig_tut_6.png|618px|thumb|center| | + | [[Image:synfig_tut_6.png|618px|thumb|center|"Render" oproepen vanuit het menu in Synfig Studio]] |
{{Note|Opmerking|De "magick++" target (als het beschikbaar is) maakt veel betere gifbestanden dan de "gif" target omdat het het palet voor de afbeelding kan optimaliseren.}} | {{Note|Opmerking|De "magick++" target (als het beschikbaar is) maakt veel betere gifbestanden dan de "gif" target omdat het het palet voor de afbeelding kan optimaliseren.}} | ||
| − | Open nu BasicKnighRider.gif in Firefox of een andere applicatie dat geanimeerde | + | Open nu BasicKnighRider.gif in Firefox of een andere applicatie dat geanimeerde gifs kan weergeven. Firefox echter zal de gif voortdurend opnieuw spelen zodat je korte animatie langer wordt. Als je nu een rode cirkel ziet die van links naar rechts beweegt en terug, proficiat! Je hebt net je eerste animatie gemaakt. |
| − | {{Note|Opmerking|Je kunt een preview zien van je animatie. Druk op de "Caret" menuknop in de linkerbovenhoek van het | + | {{Note|Opmerking|Je kunt een preview zien van je animatie. Druk op de "Caret" menuknop in de linkerbovenhoek van het canvasvenster en kies {{c|File|Preview}}.}} |
| − | Als je liever de | + | Als je liever de console zou gebruiken om je animatie te renderen, open dan een console (op Windows, ga naar {{c|Start|Uitvoeren}}, typ {{Literal|cmd}} en druk op {{Shortcut|enter}}), ga naar de map waar je het bestand in opgeslagen hebt, en typ iets zoals: |
synfig -t gif BasicKnightRider.sifz | synfig -t gif BasicKnightRider.sifz | ||
Revision as of 14:28, 6 September 2011
 |
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
Inleiding
Het is zeer gemakkelijk in Synfig Studio om een animatie te maken. Het betekent eigenlijk gewoon om een afbeelding te veranderen — Je dient gewoon de eerste en de laatste fase van een verandering aan te geven, en Synfig neemt de tussenstappen voor zijn rekening.
Laten we een eenvoudig voorbeeld uitproberen. Neem eens een bewegend licht zoals dat van Kit van de Knight Rider auto. Als je het realisme laat voor wat het is heb je een cirkel die van links naar rechts beweegt en terug. Met andere woorden, je dient drie "stappen" of "stages" te maken.
- De cirkel staat links
- De cirkel staat rechts
- De cirkel staat terug links
De werkplaats opstellen
Laten we dat uitvoeren. Start Synfig Studio. Een nieuw bestand wordt bij het starten automatisch aangemaakt. Klik op het menu 'caret' (dit bevindt zich tussen de horizontale en verticale lignaal, in de linkderbovenhoek van het canvas) selecteer dan "Edit → Properties". Een venster met canvasopties zal verschijnen.
Geef je canvas een naam en omschrijving, klik dan op "Apply" (klik nog niet op "OK" — we zijn nog niet klaar met het eigenschappenvenster. Ga naar de tab "Time" en bewerk de "eindtijd". Verander "5s" in "2s" — dat zorgt ervoor dat onze animatie twee seconden duurt.
Klik nu op "OK", en maak een eenvoudige zwarte rechthoek dat als onze achtergrond dienst zal doen. Het is niet nodig om deze achtergrond over het hele canvas te vullen. Vink ook "Low Res" af die je bovenaan het canvasvenster vindt om de view mode van lage resolutie uit te schakelen - dit zorgt ervoor dat je afbeelding er beter afgewerkt uitziet. In het algemeen zorgt deze optie dat de snelheid voor het hertekenen van het canvas sneller verloopt, maar dat hebben wij hier niet nodig.
Nu hebben we een cirkel nodig. Verander de vulkleur in rood en maak een cirkel. Het doet er niet toe als het niet perfect is: je kunt het steeds aanpassen. Activeer het vervormgereedschap, en klik op de cirkel. Het verandert naar een soort verwerkingsmodus wat gemakkelijk te zien aan de kleine groene punt in het midden en de witte rechthoek rond de cirkel. Je kunt de cirkel verplaatsen door het beet te nemen aan zijn groene punt in het midden.
Dit zijn de eerste stappen om een object te tekenen en het te verplaatsen, maar is nog geen animatie. Laten we nu eens kijken hoe dat werkt.
Beweging toevoegen
In het eigenschappenvenster heb je in het begin een waarde van twee seconden ingegeven. Daar de lengte van je animatie niet nul is heeft je canvasvenster (datgene waarin je tekent) onderaan een grijze tijdsglijder. Je kunt hierop klikken en een smalle oranje indicator geeft je positie in de tijd aan. Probeer om op verschillende plaaten op de tijdsglijder te klikken en merkt op dat het tekstveld aan de linkerzijde van de tijdsglijder steeds van waarde verandert. Je kunt je positie op de tijdsglijder aanpassen door de waardes in dat tekstveld te veranderen. Als je b.v. "ls" invult en op ↵ Enter drukt, zal de oranje indicator naar het midden van de tijdsglijder springen, "2s" invullen zal de indicator naar het einde van de tijdsglijder verplaatsen.
|
Opmerking Op 2s zal de oranje indicator niet zichtbaar zijn. Dit komt omdat "2s" aan het rechteruiteinde van de tijdsglijder ligt, waardoor de indicator als het ware onzichtbaar wordt.
|
Je merkt op dat er nog niets op het canvas verandert. Verander naar "animeer verwerkingsmodus" door op de groene punt te klikken aan de rechterkant van de grijze tijdsglijder (als je met versie 0.62.02 werkt, kun je een groene checkmark zien). De canvas zal nu een rode outline tonen; Dit herinnert je eraan dat veranderingen die je maakt aan de objecten je animatie aanpassen.
Voorheen hebben we gemeld dat er drie "stappen" of "stages" nodig zijn. Deze worden voorgesteld door zogenaamde keyframes. (In geval je bekend bent met videoencoding: Neen, het is niet hetzelfde!) Een keyframe is een afbeelding in de tijd waarop iets belangrijks met het object gebeurt.
Ga naar het keyframespaneel — klik op het kleine tabje met het icoon van een sleutel onderaan het venster — om keyframes aan te passen. Klik nu op de kleine knop met het "plus" teken en je zou een nieuwe ingang moeten krijgen in de lijst die aangeeft "0f, 0f, (JMP)".
Ga nu naar het "1s" teken in de tijdsglijder. De kleine oranje indicator zou zich naar daar moeten verplaatsen. Voeg dan nog een keyframe toe door op het kleine plusteken te klikken. Herhaal deze handelingen wanneer de indicator van de tijdsglijder op "2s" staat (dit is aan het einde van je animatie). Nu zou je drie keyframes in de lijst moeten hebben.
De s'en en f'en: de tijdslijn begrijpen
Misschien heb je al ontdekt wat die mysterieuze "1s 10f" type markeringen willen zeggen. Ze geven een specifiek punt op de tijdslijn aan, door een locatie in seconden (s) of in frames (f) weer te geven.
Standaard wordt elke seconde in 24 frames verdeeld, zoals een meter op een meetlint is onderverdeeld in 100 centimeters. De framemarkeringen beginnen bij nul en gaan tot 24, waarna een nieuwe seconde wordt weergegeven en de teller van de frames terug op nul wordt geplaatst.
B.v. wanneer er vijf hele seconden en drie frames gepasseerd zijn, zou de notatie door gebruik te maken van deze tijdslijn "5s 3f" moeten zijn.
De keyframe lijst
De keyframe lijst is tamelijk gemakkelijk te begrijpen. Het toont de "Time" wat ongeveer gelijk is aan de starttijd, de "Length" wat zichzelf uitwijst, "Jump" die we in het volgende stuk zullen bespreken, en "Description" die opnieuw zichzelf uitwijst.
Misschien vraag je je nu af wat de "entries" "(JMP)" betekenen. Dit zijn in feite links zoals weblinks: klik erop en de indicator in je tijdsglijder zal verspringen naar de correcte tijd.
Je kunt dit gebruiken om je afbeeldingen voor een bepaald tijdstip te bewerken. B.v. je kunt nu springen naar de eerste seconde en de rode cirkel naar rechts verplaatsen. Zo, je hebt je eerste beweging, je eerste animatie met Synfig gemaakt!
Waar bevindt zich nu deze animatie? Klik gewoon op een vrije positie op de tijdsglijder: je zult zien dat de rode cirkel op een nieuwe positie staat, één die je niet zelf hebt aangegeven! Dus wat is er gebeurd? Synfig wist wat je wilde doen, namelijk de cirkel verplaatsen, en tekende alle afbeeldingen tussen de keyframes. Elke afbeelding zal later een frame voorstellen in je animatie en de cirkel zal bewegen.
Merk op dat het niet nodig is naar de laatste keyframe op "2s" te gaan en de cirkel terug naar links te verplaatsen. Keyframes laten Synfig toe de afbeeldingsplaatsen op een bepaald tijdstip te herinneren. Dat is waarom bij het verplaatsen van de positie van de cirkel op "1s", het links bleef staan op "2s" (zoals ook op "0s"). Als je terug naar het parameterspaneel gaat, en kijkt naar de TimeTrackpanel, zul je merken dat er drie groene punten verschenen zijn aan de rechterkant van de "Origin" parameter. Deze worden Waypoints genoemd, en worden gebruikt om veranderingen van de parameterwaarden over de tijd aan te geven.
Het renderen van je animatie
Voordat je de animatie kunt tonen, dien je je werk te renderen. Er zijn twee manieren om dit te doen: gebruik van Synfig Studio (zoals je tot nu toe steeds hebt gedaan) of het consoleprogramma "Synfig" uitvoeren.
Laten we de eerste manier proberen. Verlaat de animatiebewerkingsmodus door op de rode punt in de tijdslijn editing widget te klikken, en sla je bestand op; b.v. onder de naam "BasicKnighRider.sifz". Ga dan naar het menu in het Canvasvenster (de "caret"knop in de linkerbovenhoek) en selecteer "File → Render". Verander de bestandsnaam in "BasicKnighRider.gif" in dezelfde map als waar je "BasicKnighRider.sifz" hebt opgeslagen en kies als formaat "Gif in plaats van "Auto", klik daarna op Render. Naargelang je processorsnelheid zal het een paar seconden duren, maar uiteindelijk zal de statusbalk in de afbeeldingsvenster (onderaan het venster) moeten vermelden "File rendered succesfully".
|
Opmerking De "magick++" target (als het beschikbaar is) maakt veel betere gifbestanden dan de "gif" target omdat het het palet voor de afbeelding kan optimaliseren.
|
Open nu BasicKnighRider.gif in Firefox of een andere applicatie dat geanimeerde gifs kan weergeven. Firefox echter zal de gif voortdurend opnieuw spelen zodat je korte animatie langer wordt. Als je nu een rode cirkel ziet die van links naar rechts beweegt en terug, proficiat! Je hebt net je eerste animatie gemaakt.
|
Opmerking Je kunt een preview zien van je animatie. Druk op de "Caret" menuknop in de linkerbovenhoek van het canvasvenster en kies "File → Preview".
|
Als je liever de console zou gebruiken om je animatie te renderen, open dan een console (op Windows, ga naar "Start → Uitvoeren", typ "cmd" en druk op ↵ Enter), ga naar de map waar je het bestand in opgeslagen hebt, en typ iets zoals:
synfig -t gif BasicKnightRider.sifz
Er verschijnen enkele boodschappen die op het ogenblik niet ter zake doen. Na een tijdje, naargelang je processorsnelheid, zal er uiteindelijk een regel verschijnen met de boodschap:
BasicKnightRider.sifz ==> BasicKnightRider.gif: DONE
Dan ben je klaar en kun je de geanimeerde gif zien door gebruik te maken van Firefox of een ander programma zoals hierboven vermeld.
Besluit
Het aanpassen van de positie van een object is natuurlijk niet het enige wat je met Synfig Studio kunt aanpassen. Andere mogelijkheden zijn het veranderen van de grootte, de outline, de kleur, etc... Synfig wordt verscheept met verschillende voorbeeldbestanden die je toelaten om verder de mogelijkheden te onderzoeken.
