|
|
| Line 1: |
Line 1: |
| − | <!-- Page info -->
| |
| − | {{Title|Animatie basis}}
| |
| − | {{Navigation|Category:Manual|Doc:Adding Layers}}
| |
| − | [[Category:Manual]]
| |
| − | [[Category:Tutorials]]
| |
| − | [[Category:Tutorials Basic]]
| |
| − | [[Category:Updated]]
| |
| − | <!-- Page info end -->
| |
| | | | |
| − | == 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 {{c|Edit|Properties}}. Een venster met canvasopties zal verschijnen.
| |
| − |
| |
| − | Geef je canvas een naam en omschrijving, klik dan op {{Literal|Apply}} (klik nog niet op {{Literal|OK}} — we zijn nog niet klaar met het eigenschappenvenster. Ga naar de tab {{Literal|Time}} en bewerk de {{Literal|eindtijd}}. Verander "5s" in "2s" — dat zorgt ervoor dat onze animatie twee seconden duurt.
| |
| − |
| |
| − | [[Image:File Properties Dialog - End Time.png|center|frame|Canvas Properties Dialoogvenster]]
| |
| − |
| |
| − | 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 {{Literal|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.
| |
| − |
| |
| − | [[Image:synfig_tut_2.png|450px|center|thumb]]
| |
| − |
| |
| − | 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.
| |
| − |
| |
| − | [[Image:synfig_tut_3.png|450px|center|thumb]]
| |
| − |
| |
| − | 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 (degene 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 tijdsgelijder te klikken en merkt op dat het tekstveld aan de linkerzijde van de tijdsglijder steeds van waarde verandert. Je kunt je positie op de tijdgelijder aanpassen door de waardes in dat tekstveld te veranderen. Als je b.v. "ls" invult en op {{shortcut|enter}} drukt, zal de oranje indcator naar het midden van de tijdsgelijder 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.}}
| |
| − | Je merkt op dat er nog niets op het canvas verandert. Verander naar {{Literal|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.
| |
| − |
| |
| − | [[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 bekedt 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)}}.
| |
| − |
| |
| − | [[Image:Keyframes Panel.png|center|frame]]
| |
| − |
| |
| − | 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.
| |
| − |
| |
| − | [[Image:Keyframes Panel 2.png|center|frame]]
| |
| − |
| |
| − | == 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 frame markeringen 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 {{Literal|Tijd}} 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.
| |
| − |
| |
| − | 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!
| |
| − |
| |
| − | {{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 verplaaten, 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.
| |
| − |
| |
| − | [[Image:TimetrackOriginWaypoints.png|thumb|center|450px]]
| |
| − |
| |
| − | == 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 {{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|Calling "Render" from 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.}}
| |
| − | Open nu BasicKnighRider.gif in Firefox of een andere applicatie dat geanimeerde gif's kan weergeven. Firefox echter zal de GIF voortdurend herspelen 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 canvesvenster en kies {{c|File|Preview}}.}}
| |
| − | Als je liever de konsole zou gebruiken om je animatie te renderen, open dan een konsole (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
| |
| − |
| |
| − | 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.
| |
