abonneren
article

Animaties maken met Stykz

Leerlingen zelf animaties laten maken? Dat hoeft niet ingewikkeld te zijn met het gratis programma Stykz. Als je die naam leest als ‘sticks’, dan zal het je weinig verbazen dat de animaties vooral draaien rond simpele figuurtjes die uit stokjes lijken opgebouwd.  


Installatie
Je vindt het gratis programma Stykz op stykz.net, zowel voor Mac als voor Windows – een Linux-variant is in de maak. In deze workshop gaan wij in elk geval met de Windows-variant aan de slag. Zodra je het gedownloade zip-bestand hebt uitgepakt, start je de installatie. Het hele proces vergt nauwelijks meer dan viermaal op Next drukken en eenmaal op Install en op Finish. Start je Stykz op, dan krijgt je standaard het welkomstvenster te zien. Verwijder het vinkje bij Show At Startup als je dat liever anders hebt.

Verkenning
In dit welkomstvenster kun je op verschillende manieren aan een ‘document’ beginnen. Zo kun je een al bestaande animatie openen, maar je kunt ook met een compleet nieuwe animatie aan de slag. Dat kan een volledig lege animatie zijn [Blank Document], maar ook een animatie waarop al één stokfiguurtje prijkt [Default Document]. Om sneller aan de slag te kunnen, kies je bij voorkeur deze laatste optie.

Even later duiken dan de verschillende panelen op waaruit Stykz is opgebouwd. Dat zijn er standaard zes: de Stage [waarin je de eigenlijke animatie ontwerpt], Properties [met de eigenschappen van je selectie], Tools [een bescheiden gereedschapskist], Commands [waar je bepaalde handelingen kiest], Frames [met een chronologische lijst van de frames waaruit de animatie is opgebouwd] en Controller [waarmee je de animatie bedient].

Je kunt elk van deze panelen afsluiten, maar het is wel zo handig als je ze in beeld [en dus bij de hand] hebt. Overigens kun je deze panelen ook weer [on]zichtbaar maken via het menu Windows. Merk op dat je hier nog een zevend paneel aantreft: Library [een bibliotheek met herbruikbare objecten].

Eigenschappen
Als het goed is, heb je op dit moment één stokfiguurtje in het midden van de scène [stage] staan. Standaard is die scène 700 pixels breed en 500 pixels hoog. Dat kunt u wijzigen: klik een lege plaats in de scène aan en klik vervolgens op de knop 500 of 700 in de Stage Properties: je hoeft nu maar de gewenste afmeting in te vullen. Ook de achtergrondkleur kun je aanpassen. Klik op de witte knop bij Bg Color en kies een andere tint. Als u het vinkje verwijdert bij Web, heb je nog meer keuze.

Selecteer nu opnieuw het figuurtje: de verschillende knooppunten [nodes] rond welke de segmenten kunnen bewegen, kleuren rood. Probeert maar eens een [zwartgekleurd] segment te verplaatsen met de muis. Eén knooppunt is geel: dat is het punt waar je de figuur kunt vastpakken om die in zijn geheel te verplaatsen. Ook vanuit Figure Properties zijn allerlei aanpassingen mogelijk. Zo kun je de schaal [Scale] en hoek [Angle] wijzigen, maar ook de dikte van het ‘stokje’ en de kleur van de figuur.

Basisanimatie
Animatie: de illusie van beweging door het afspelen van afzonderlijke, stilstaande beelden.
Leuk, maar hoe krijg je nu een animatie-effect? Dat kan alleen maar als je minstens twee – maar liefst veel meer – frames maakt. Stel, je hebt een geschikte startpositie voor je figuur gevonden. Klik dan op New Frame in het Frames-paneel. Je zult zien dat uw frame gekopieerd wordt en dat dit tweede frame meteen ook geselecteerd is [rode kleur]. Op die manier creëer je nog meer frames en klik je eenvoudigweg het frame aan dat je wil bewerken. Een frame verwijderen doet u via de Delete-knop, vanuit het contextmenu van zo’n frame of via het paneel Frame Properties.

De bedoeling is nu natuurlijk dat je elk opeenvolgend frame lichtjes aanpast, zodat het een vloeiende beweging lijkt wanneer je die frames snel na elkaar afspeelt. Op www.droidz.org/RANDOMFILES/walktut vind je alvast een aantal tips om je figuur op een ‘natuurlijke’ manier te laten wandelen. Het afspelen van een animatie doe je vanuit de Controller, waar je Play indrukt. De snelheid bepaal je met de schuifknop en als je de animatie herhaald wilt zien, druk je de Loop-knop in.

Figuren
Het wordt pas echt leuk wanneer je figuren gaat ontwerpen. In het Tools-paneeltje vind je alvast twee knoppen waarmee je objecten kunt toevoegen: een lijnsegment en een cirkel. Een extra knooppunt toevoegen gaat heel eenvoudig door een segment aan te klikken met Alt+linkermuisknop.

Ook het inkleuren van vlakken is mogelijk. Stel, je hebt met behulp van een aantal lijnsegmenten een veelhoek gecreëerd. Om die in te kleuren klik je het middelste pictogram in het Tools-paneel aan, waarna u alle opeenvolgende knooppunten aanklikt. Bent u helemaal rond, dan wordt het vlak automatisch ingekleurd. In het paneel PolyFill Properties kies je vervolgens een geschikte kleur uit.

Het kan natuurlijk zijn dat je bijvoorbeeld het uitzicht van één specifiek segment wil aanpassen. Hiervoor klik je het tweede pictogram in het Tools-paneel aan en selecteer je vervolgens het beoogde segment: bij Segment Properties leg je nu alle eigenschappen naar wens vast. Bevindt het ene object zich boven op een ander en had je dat graag anders gewild: met de knoppen Front en Back in het Command-paneel heb je dat zo geregeld.

Bibliotheek
Je hebt aardig wat tijd en energie gestoken in het ontwerpen van een fraai figuur. Zonde als dat werk zomaar verloren gaat. Gelukkig is daar een oplossing voor. Selecteer de figuur [via de bovenste knop in het Tools-paneel], klik die met de rechtermuisknop aan en kies Add to Library. Verzin een duidelijke naam en bevestig met OK: de figuur  wordt nu netjes aan de bibliotheek toegevoegd. Heb je die later nodig, dan hoef je die maar vanuit de bibliotheek naar uw scène te verslepen. Een andere mogelijkheid: je versleept de figuur naar je bureaublad. De figuur komt dan terecht in een styk-bestand dat u vervolgens via het menu File, Open in een nieuwe animatie kunt importeren.

We hebben het ook al een paar keer gehad over het Commands-paneel. Daar vind je enkele frequent gebruikte handelingen verzameld. Het is echter mogelijk dat paneel geheel naar wens op te vullen met uw favoriete acties. Druk daarvoor op het knopje met de vier pijlen, onderaan het paneel, en vervolgens op het plus-knopje. Kies het gewenste commando uit waarna u een duidelijke naam voor uw nieuwe knop meegeeft. Die knop kunt u dan naar de gewenste positie in het paneel verplaatsen. Ben je hiermee klaar, klik dan nogmaals het knopje met de vier pijlen aan.

Export
De animatie is eindelijk klaar en de ingebouwde Stykz-player vertelt je dat alles er goed uitziet. Mooi, maar je wilt het eindresultaat natuurlijk ook met anderen delen. Dat kan door de animatie naar een geschikt formaat te exporteren. Veiligheidshalve slaat u natuurlijk wel eerst de animatie in een [bewerkbaar] stykz-formaat op, via File, Save as – maar dat heb je intussen ongetwijfeld al vaker gedaan.

In hetzelfde menu File vind je nu Export animation terug – overigens tref je hier ook de optie Export Frame aan waarmee je alleen het geselecteerde frame exporteert naar png-, jpg- of gif-formaat. Een complete animatie kun je eveneens naar een sequentie van gif’s of png’s exporteren, maar voor een echte animatie ben je natuurlijk beter af met een geanimeerd gif’je of een mov-bestand. Afhankelijk van je keuze kun je hier nog bijkomende opties instellen, zoals de frame rate, compressie-algoritme of resolutie.

Niets houdt je echter  tegen om dat eventueel achteraf nog naar een ander formaat te converteren, bijvoorbeeld met het gratis Freemake Video Converter.

Wil je nu alvast een paar Stykz animaties aan het werk zien, tik dan op YouTube de zoekterm ‘Stykz animation’ in. Keuze genoeg!

stykz.net

blog comments powered by Disqus