Animatie basis

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

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.

1. De cirkel staat links
2. De cirkel staat rechts
3. 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.

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 "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.

note end

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".

"Render" oproepen vanuit het menu in Synfig Studio

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 end

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".

note end

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.