Verslaglegging (alleen voor examenklas)

Als je kiest voor deze cursus, ga je wat langer werken aan het maken van tekenfilmpjes. Je zou dit kunnen gebruiken voor je grote opdracht in klas 4 en dan heb je een soort van verslaglegging nodig als bewijs voor je examen. Hoe je dat doet mag je zelf weten. In deze cursus verwijs ik steeds naar een Adobe Spark Page. Dit ziet er uit zoals deze cursus en die kun je dus zo presenteren.

• Maak een Adobe Spark webpage aan via spark.adobe.com (eerst aanmelden).
• Maak eerst een header aan, met daarop de titel van de cursus Motion Graphics 1 en als ondertitel je naam en klas.
• Plaats een toepasselijke foto als achtergrond.
• Plaats de datum onder de header.
• Klik op Share om je page te delen en te updaten. Bij de eerste keer moet je ook de categorie education kiezen.

Wat gaan we doen in deel 1:

• Een eerste kennismaking met de geschiedenis van animatie.
• Kijken hoe het werkblad van Animate er uit ziet.
• Leren hoe de Shape tools in Animate werken.
• leren hoe we de Timeline en keyframes in Animate kunnen gebruiken.
• Uitleggen wat frame-by-frame is.
• Twee korte filmpjes maken.
• Leren hoe je een video exporteert in Animate.

Achtergrond informatie

We gaan eerst een paar video's bekijken, om je kennis van animatie te vergroten. Ze zijn in het Engels, maar je hoeft de informatie ook niet terug te leren. De informatie die in de video's gegeven wordt kun je vaak wel weer in je eigen animaties gebruiken. Deze video's kun je ook thuis bekijken, zodat je meer tijd in de klas hebt om zelf aan het werk te gaan.

De British animator Bob Godfrey (1921-2013) geeft antwoord op de vraag: "What Is Animation?"

De volgende video gaat over de geschiedenis van animatie.

Animatie proces

Animatie is het proces van het creëren van een illusie van beweging, door middel van een serie van stilstaande beelden. Het is een belangrijk gereedschap geworden in communicatie in reclames, games, multimedia, educatievel/informatieve initiativen en entertainment.

Normaal gesproken, animation is geproduceerd met 12, 24, 25, or 30 frames/plaatjes per seconde. Iedere individueel plaatje moet heel iets verschillen van het vorige en volgende plaatje, zodat we de illusie krijgen als we de beelden snel achter elkaar zien, dat er iets beweegt op het plaatje. De simpelste varianten van deze animatievorm krijg je bij een flipboek; een aantal tekeningetjes op iedere pagina op de onderhoek van bijvoorbeeld een tekenblok. Door de bladzijdes snel langs je duim los te laten, zie je een animatie.

Animaties bewegen niet echt. We zien deze beweging door een fenomeen dat optische illusie heet. Dit komt doordat de hersenen en de ogen samenwerken; de ogen nemen plaatjes waar in 1/30e van een seconde en je hersenen zetten dit zo om dat het een soepele overgang heeft. Omdat animatie frames snel achter elkaar gezet worden, zien de meeste mensen een soepel verlopende gebeurtenis.

In onderstaande video zie je een heel aantal kleine animatie video's achter elkaar, misschien krijg je ideeën voor je eigen video's.

Tutorial 1a

Acceptatiecriteria:

• Je kent het werkblad van Animate
• Je werkt met de Shape tools of het maakgereedschap
• Je weet wat de Timeline and keyframes zijn
• Je weet wat frame-by-frame animatie is
• Je kunt je video exporteren

In tutorial 1a, krijg je een uitleg over hoe om te gaan met Animate en maak je een eerste simpele animatie.

Het is misschien het handigst om de hele video eerst een keer helemaal te doorlopen, om een overzicht te krijgen wat de bedoeling is. Dan te bedenken wat je zelf voor animatie wil gaan maken. En dan de tutorial in kleine stukjes af te spelen en steeds te pauzeren om zelf een stuk van je animatie te maken.

Opdracht 1a: Een lopende lijn.

• Maak met Animate CC, een frame-by-frame animatie van 50 frames van een lijn die loopt over het scherm. Aan het eind moet de lijn in iets anders veranderen. De manier van lopen mag je zelf weten.
• Export je video als een MP4, gebruik daarvoor de H.264 instelling, zoals in de onderstaande video. Upload het naar Vimeo of YouTube en plaats je videolink dan in je page van deze cursus.
• Zet boven je video de datum en de titel: Opdracht 1a: Een lopende lijn.
• Schrijf een korte reflectie: Zet onder je video in het kort iets over de opdracht; was het leuk, moeilijk te bedenken, lastig te volgen, makkelijk in elkaar te zetten, ...

Punten: 1

Tutorial 1b

Acceptatiecriteria:

• Je hebt een achtergrondfoto geplaatst
• Je laat je wormpje een bepaalde voortbewegingen manier uitvoeren
• Je worm maakt een route over het scherm

Bekijk onderstaande tutorial en bewerk deze op dezelfde manier als opdracht 1a: bekijken, nadoen, exporteren, plaatsen in vimeo of youtube, in je page zetten, datum, naam opdracht 1b: Worm over het scherm en een korte reflectie geven.

Voordat je deze opdracht gaat maken moet je wel eerst een afbeelding downloaden van het internet. Kijk hiervoor bij pixabay.com, pexels.com of misschien wil je wel een schilderij wil van het Rijksmuseum. Deze afbeeldingen zijn allemaal vrij te gebruiken.

Opdracht 1b: Een worm over een portret.

• Maak met Animate CC, een frame-by-frame animatie van een lijn die loopt over een afbeelding. De route van lopen mag je zelf weten.
• Export je video als een MP4, gebruik daarvoor de H.264 instelling, zoals in de onderstaande video. Upload het naar Vimeo of YouTube en plaats je videolink dan in je page van deze cursus.
• Zet boven je video de datum en de titel: Opdracht 1b: Een lopende lijn over een plaatje.
• Schrijf een korte reflectie: Zet onder je video in het kort iets over de opdracht; was het leuk, moeilijk te bedenken, lastig te volgen, makkelijk in elkaar te zetten, ...

Punten: 1

Denk aan het updaten van je page!

Wat gaan we doen in deel 2:

• Kijken hoe we basiselementen in verandering kunnen zetten, door middel van tweening.
• De voordelen van overtrek bekijken.
• Hoe kun je groeperen en uit elkaar halen.
• Kijken naar het belang van de hoeveelheid frames per second.

Achtergrond informatie: Animatie met tweening and transformatie

Voordat we onze eigen tweens gaan creëren, kijken we eerst naar de geschiedenis van bewegende beelden.

Vanaf het vroegste begin in de geschiedenis heeft de mens geprobeerd beweging vast te leggen in afbeeldingen. In onderstaande video, zie je een aantal afbeeldingen, waarin beweging is afgebeeld. Van de grottekeningen tot de moderne kunst. Bekijk deze presentatie van 40.000 jaar in twee minuten.

40,000 years in 2 minutes

Technologie speelt een belangrijke rol in onze mogelijkheid om beweging vast te leggen. Maar we kennen aal hele oude mogelijkheden van animatie. De zoetrope is al bijna 2000 jaar oude en gebruikt gezichtsbedrog om beweging te laten ontstaan. Door door de gaatjes te kijken, zie je een ruiter op een galopperend paard. Bekijk de video om te zien hoe zo'n zoetrope werkte.

Dit oude idee van de paardrijder gebruikte de filmpionier Eadweard Muybridge, in de 19e eeuw, tot het maken van zijn film over paarden. Er wordt verteld dat dit het resultaat was van een weddenschap, waarin het er om ging of een paard helemaal los komt van de grond of dat er minstens een been nog op de grond bleef.

Er is wat onenigheid over wie nu de eerste op films gebaseerde animatie hebben gemaakt, maar waarschijnlijk heeft Start Blackton de animatie Humorous Phases of Funny Faces in 1906 gemaakt.

In 1914, Winsor McCay produceerde Gertie, The Trained Dinosaur, deze film bevat meer dan 10.000 tekeningen. Dit was de eerste keyframe animatie.

In 1995, kwam Toy Story uit. Dit was de eerste lange 3D computer gemaakte film. Hier onder zie je de trailer.

Technische achtergrond

Na dit stukje geschiedenis, terug naar de techniek achter animatie.

In plaats van de frame-by-frame animatie, waarbij je iedere tekening opnieuw maakt, kunnen we ook een ander proces gebruiken, als we op de computer werken, namelijk tweening. Inbetweening of tweening is een sleutelproces in alle soorten animatie , inclusief computeranimatie . Het is het proces van het maken van tussenliggende frames tussen twee beelden, keyframes (sleutelframes) genaamd, om het uiterlijk te geven dat het eerste beeld vloeiend in het tweede beeld overgaat. (Inbe)tweens zijn de tekeningen die de illusie van beweging creëren. Doordat de computer de tussenliggende beelden maakt is het veel minder arbeidsintensief.

Bij vorm-tweening teken je een vectorvorm in een bepaald frame in de tijdlijn en wijzig je deze vorm of teken je een andere vorm in een ander frame verderop in de tijdlijn. Animate verandert vervolgens de tussenliggende vormen in de tussenliggende frames, waardoor een animatie ontstaat waarbij één vorm overvloeit in een andere. Is je vorm niet mooi in zijn verandering, dan kun je altijd tussenliggende vormen aanpassen.

Tutorial 2

Acceptatiecriteria:

• Je maakt een korte animatie met behulp van Shape tweens (vorm-tweens)
• Je maakt vorm aanpassingen
• Je kunt vormen opdelen, groeperen en omzetten
• Je weet te werken met frames per seconde

Bekijk de tutorial eerst weer helemaal, zodat je weet wat de bedoeling is. Bedenk een animatie die jij wil maken en maak deze dan door de tutorial stukje bij stukje nog een keer te bekijken. Net zoals opdracht 1.

Opdracht 2: Mijn naam met Shape tweens

• Maak een animatie van de letters van je naam of een begrip, door vormen die het scherm invliegen, in het midden verzamelen en dan in letters veranderen. Kies je eigen achtergrond en kleuren. Pas eventueel shape hints toe.
• Exporteer je animatie weer als een MP4 (H.264) en upload dit naar vimeo of youtube. Plaats de video dan weer in je eigen webpage.
• Zet boven je video de datum en de titel: Opdracht 2: Mijn naam met Shape tweens.
• Schrijf een korte reflectie: Zet onder je video in het kort iets over de opdracht; was het leuk, moeilijk te bedenken, lastig te volgen, makkelijk in elkaar te zetten, ...

Punten: 1

Denk aan het updaten van je page!

In dit deel van de cursus leer je:

• De principes van animatie.
• Hoe je de bibliotheek in Animate gebruikt.
• Hoe je symbolen gebruikt in Animate.
• Hoe je een animatie maakt waarin je geluid (audio) toevoegt.
• Hoe je een lip-synched animatie maakt.

Achtergrond informatie

Eerst weer wat informatie; we kijken naar de 12 principes van animatie. Deze principes geven een overzicht van de wijze waarop de structuur van een animatie het best kan worden weergegeven. Drie van de principes zullen we daarna wat uitwerken.

Als je gebruik maakt van de principes van animatie, dan lijkt je animatie er echter uit te zien. De bewegingen in je animatie zullen geloofwaardiger zijn.

Hier zijn de 12 hoofdprincipes van animatie:

• Uitrekken en samenpersen
• Anticiperen
• Plaatsing
• Beginnen en maar zien hoe het loopt - van hoofddeel naar hoofddeel
• overlappen en opvolgen van acties
• versnellen en vertragen
• Bewegen met een boog
• Secundaire acties
• Timing
• Overdrijven
• Vaste tekening van kwaliteit
• Appeal of karakters met uitstraling

Bekijk de videos hieronder, waarin je de basisprincipes van animatie als voorbeeld worden uitgelegd.

Wil je meer weten? Dan kun je de volgende website bekijken: Animation mentor

In de volgende drie cursusonderdelen bekijken we steeds 1 of 2 principes, die je dan kan gebruiken bij je opdracht. Deze keer timing.

Timing

Het eerste principe is timing. Het is de manier waarop iets beweegt in de tijd, of het nu een bal, een kat of een auto is. Op de traditionele manier van animeren is timing bepaald door het aantal tekeningen die je maakt om iets te laten bewegen. Met minder tekeningen of frames, gaat de beweging sneller, met meer frames langzamer. Het is helemaal aan jou om te bepalen of een actie snel of langzaam gaat en waarom.

De onderstaande video legt uit hoe timing werk. En ook de plaatsing is belangrijk bij timing.

Om timing te begrijpen, kun je zelf aan de slag. Bekijk hoe lang je er over doet om naar de deur te lopen of het uitspreken van Mississippi. Of kijk naar anderen, hoe bewegen zij. Als je een filmpje wil maken van iemand die loopt of springt, maak dan eerst een video van zo'n echte gebeurtenis om te zien wat er gebeurt.

Technische achtergrond

We gaan nu twee zaken uit het programma aanstippen: Symbols en Library.

In de bibliotheek of Library van het programma kun je allerlei onderdelen bewaren die je hebt gemaakt of verzameld. Dit kunnen bitmap afbeeldingen zijn, maar ook audio, lettertypes, videoclips en heel belangrijk symbolen. What zijn die symbolen in Animate? Het is een set van complexe componenten, die je kunt hergebruiken in je project. Maak je een symbool en zet je die in de bibliotheek, dan hoef je dat ding niet steeds weer te tekenen. In de tutorial zie je hoe je ze maakt en hoe je ze kunt gebruiken.

Tutorial 3

Acceptatiecriteria:

• Je hebt gebruik gemaakt van symbolen
• Je hebt symbolen geïmporteerd in de bibliotheek
• Je hebt beweging tweens gebruikt
• Je hebt gebruik gemaakt van de Frame Picker
• Je filmpje heeft audio als ondersteuning van de mond

Je kunt de onderdelen, om te downloaden, uit de tutorial, hier vinden: Resources, maar je kunt natuurlijk ook bijvoorbeeld je eigen geluidsopname gebruiken.

Opdracht 3: Lip-synched video

• Maak een tekening van een persoon naar keuze op het scherm en plaats er een audio-bestand onder in de tijdlijn. Gebruik dan de monden om een lip-synched video te maken. Een voorbeeld zou zijn; een beroemd persoon, met een beroemde uitspraak, en op de achtergrond de bijbehorende gebeurtenis. Maar houdt het kort.
• Exporteer je animatie weer als een MP4 (H.264) en upload dit naar vimeo of youtube. Plaats de video dan weer in je eigen webpage.
• Zet boven je video de datum en de titel: Opdracht 3: Lip-synched video.
• Een korte reflectie: Zet onder je video in het kort iets over de opdracht; was het leuk, moeilijk te bedenken, lastig te volgen, makkelijk in elkaar te zetten, ...

punten: 2

Denk aan het updaten van je page!

In deel 4 bekijken we het volgende:

• hoe maak je o.a. gebruik van maskers, filters in je animatie.
• Het principe van versnellen en vertragen.

Achtergrond informatie

In het vorige deel hebben we gekeken naar de 12 principes van animatie en timing er uit gehaald om beter te bekijken. Nu gaan we kijken naar hoe je de bewegingen maakt in je animatie, zodat het zo echt mogelijk lijkt.

Hier onder nog een keer de 12 principes van animatie, op een andere manier, kort weergegeven.

Bekijk onderstaande video waarin het principe van versnelling en vertraging, of in het Engels Slow In and Slow Out, wordt beschreven

Als je weer een animatie gaat maken, probeer dan rekening te houden me dit principe.

Tutorial 4

Acceptatiecriteria

• Je bent bezig geweest met het versoepelen van de bewegingslijn
• Je hebt gebruik gemaakt van beweging- en vormtweens
• Je hebt maskers toegepast
• Je hebt gebruik gemaakt van filters
• In je video heb je overvloeiingen

Bekijk de tutorials weer op de manier zoals in de andere delen; eerst helemaal en dan in kleine stukjes tijdens het maken van je eigen werk.

Opdracht 4: Zonsondergang

Ontwerp en maak een mooie zonsondergang, waarbij je zo veel mogelijk technieken uit de tutorial gebruikt. Exporteer je video dan weer als een MP4 en upload het naar je Vimeo of YouTube kanaal. Plaats de link dan weer in je Page met de gebruikelijke dingen, zoals datum, naam en korte reflectie.

Punten: 2

Denk aan het updaten van je Page!

In dit deel bekijk en maak je:

• Een laatste deel van de principes van Animatie.
• Hoe je stevige botten in je lijf krijgt.
• En maak je een animatie waarin armen zitten voorzien van de bone-tool.

Achtergrond informatie

Ook deze keer weer een filmpje van de 12 Principes van Animatie.

Anticipatie

In dit deel gaan we kijken naar anticipatie, of te wel; wat gaat er gebeuren? Het heeft dus te maken met het spannend houden van je animatie. Kijkers moeten zich eigenlijk steeds afvragen; wat is de volgende stap in de film? Anticipatie is de pauze tussen twee handelingen, die geven een realistisch beeld weer. In het echt zitten er tussen handelingen ook altijd een pauze. In die pauze wordt de spanning opgebouwd.

De beste manier om dit te zien is bij een sprong. Wanneer we springen, hebben we een moment van voorbereiding. Dan buigen we de knieën, en dan gaan we omhoog. Die voorbereiding en kniebuiging geeft de sprong een stukje extra echtheid.

Hier zie je een voorbeeld van anticipatie:

Tutorial 5

Acceptatiecriteria

• Je hebt gebruik gemaakt van Inverse Kinematics
• Je hebt gebruik gemaakt van de Bone en Bind tools
• De robotarm bestaat uit minimaal 3 bewegende onderdelen
• De robotarm pakt iets op en verplaatst dit
• Er zit een verrassing aan het eind

Bekijk en maak de tutorial weer na, op de zelfde methode als bij de vorige tutorials van deze cursus.

Opdracht 5:

Teken een robotarm met drie segmenten die kunnen bewegen. Gebruik de Inverse Kinematics functie. Het is de bedoeling dat de robotarm dingen oppakt en ergens anders weer neerzet. De robotarm moet drie dingen verplaatsen, waarbij bij de laatste iets onverwachts moet gebeuren.

Als je je animatie af hebt, plaats deze dan weer in je Page, met een korte reflectie.

Punten: 2

Denk aan het updaten van je Page!

Als je meer wil leren van Animate, kun je altijd kijken op de Animate Learn & Support page: https://helpx.adobe.com/animate.html

Reflecteren op je leerproces

Schrijf een kort verslag van je leerproces in deze hele cursus en plaats deze in je verslag over die cursus. Dit kun je gebruiken bij je presentatie voor het vak D&I.

Geef aan:

• De datum.
• Korte omschrijving wat je in deze cursus hebt gedaan. Wat was er moeilijk was en wat makkelijk?
• Wat was het leukst van de opdrachten en zou je nog een cursus of opdracht over dit onderwerp willen doen?
• Heb je alles gedaan of alleen de opdrachten? En wat heb je dan gehad aan de achtergrond informatie? Of heb je een keuze uit de opdrachten gedaan?
• Klopt de planning die je van te voren hebt gemaakt met het uiteindelijke resultaat?
• Als je in groepjes hebt gewerkt, had je dan wat aan elkaar en waarom?

Denk aan het updaten van je page!