AV-Animatie

inclusief Adobe Animate

Uitleg symbolen? Klik op Skills.

foto Hans Eiskonen

Skill 1: Wat is Adobe Animate

Leerdoelen:

Je kunt uitleggen wat een animatie is en waar je die voor zou kunnen gebruiken.
Je weet hoe de gebruikersinterface van Adobe Animate er uit ziet, zodat je overweg kan met

Werkwijze:

Om een indruk te krijgen van Adobe Animate, lees je onderstaande tekst van 'Adobe Animate' en van 'Alan Becker' en bekijk je de drie filmjes
Daarna bekijk je het filmpje van Skill 1. Hierin wordt uitgelegd hoe de gebruikersinterface van Adobe Animate er uit ziet.

Adobe Animate is ooit begonnen als het tekenpakket SmartSketch. Later is het overgenomen door Macromedia en daarbij kreeg het de naam MacroMedia Flash. Onder de hoede van Adobe werd het Adobe Flash. Flash is echter een beveiligingsnachtmerrie. Toen HTML5 uit kwam heeft Adobe er voor gezorgd dat Flash geschikt is voor HTML5. Daarbij hebben ze de naam veranderd van Adobe Flash naar Adobe Animate.

Met Adobe Animate ontwerp je 2D vectoranimaties voor games, apps en het web. Met Animate breng je cartoons tot leven, en je maakt banneradvertenties of teasers voor bijvoorbeeld een film of festival. Je gaat zelf dan ook een animatie maken.

Alan Becker is een Animator Boss.

Naast de vele animaties heeft hij een kanaal voor Animator vs Games, een kanaal voor (Flash) Animatie tutorials en een kanaal voor Minecraft.

Bij Skill 5 wordt Alan Becker hij ook genoemd.

Maak kennis met de Gebruikers Interface, in het Engels: de User Interface (UI) van Adobe Animate.

Instructievideo's per onderwerp

Een nieuw bestand maken en bewegen in je werkveld

Bestaande elementen gebruiken

Bewegingstween maken

Tekenen met vormen en lijnen

Tekenen met penselen en pen

Camera tool gebruiken

Verdieping

Alternatieven voor Adobe Animate zijn Adobe After Effects, Toon Boom Harmony, TV Paint, Moho en Wick Editor.

Zoek uit wat de verschillen zijn in prijs, leercurve en toepassing. Zet de verschillen in een Office document (bv Word of PowerPoint).
Zoek voor elk pakket een mooi animatie voorbeeld op en zet dit ook in je document.
Stuur het document naar je docent.

Adobe handboek: Visuele woordenlijst: Standaard gereedschappen | Tijd en lagen | Elementen

AE Assets

Skill 2: Frame voor frame animatie

Leerdoelen:

Je kan een bal laten stuiteren met een frame voor frame animatie.

Werkwijze:

Bekijk eerst het filmpje Skill 2.
Daarna start je Adobe Animate en klik op 'Leren (1)' (geen knop met Leren? Kijk dan hieronder bij LET OP)
Klik in het opstartscherm, onder Praktische zelfstudies, op "Maak een animatie met een stuiterende bal (2)' (zie afbeelding hieronder),
Klik eerst op de knop "Inleidende video bekijken (3 rechts)".
Daarna klik je op de knop "Aan de slag (3 links)".
Lever een video van het resultaat in op Flipgrid

LET OP: als je opstartscherm niet werkt, of als de knop "Leren" niet aanwezig is, klik je in het menu 'Help' op 'Praktische zelfstudie' > 'Animatie van de stuiterende bal'.

Adobe handboek: Frames en hoofdframes gebruiken

Skill 3: Klassieke tween

Leerdoelen:

Je kan uitleggen wat een tween is.
Ja kunt van een willekeurig ingelezen object animeren met een klassiek tween

Werkwijze:

Bekijk eerst het filmpje Skill 3.
Daarna start je Adobe Animate en klik op 'Leren' (geen knop met Leren? Kijk bij LET OP hieronder)
Klik in het opstartscherm, onder Praktische zelfstudies, op 'Maak een animatie dansend vuur'.
Klik eerst op de knop "Inleidende video bekijken".
Daarna klik je op de knop "Aan de slag".
Lever een video van het resultaat in op FlipGrid

Wat is een tween?

Stel je hebt twee frames getekend, net als bij Skill 1. Dan kan je met een tween de computer de bewegingen tussen de twee frames laten tekenen. Dit noem je tweenen, van in-betweens, zeg maar de-beelden-er-tussen. Adobe kent de Klassieke Tween (Skill 3) en de Bewegingstween (Skill 4).

Adobe handboek: Tweens, Klassieke tween, of bekijk de uitleg van Alan Becker.

Skill 4: Bewegingstween of motiontween

Leerdoelen:

Je kan een bewegingstween maken waarbij een symbool verandert van plaats, grote en snelheid
Ja kan het path van een bewegingstween wijzigen van een recht lijn naar een kromme.
Je kan een symbool 'over het path laten lopen'

Werkwijze:

Bekijk eerst het filmpje van Adobe Animate Skill 4 voor een introductie van de bewegingstween, en de uitwerking van de 6 basis oefeningen van Brian.
Maak daarna de 6 basis oefeningen.
Tot slot maak je één 'Schermopname / Screen Recording' met Flipgrid waarin alle 6 de basis animaties in Adobe Animate zichtbaar zijn, net zoals in het voorbeeld van Brian. (Zie ook de LET OP, onder aan Skill 4)

Bewegingstween, dit is de laatste en nieuwste vorm van tweenen. Net als in de klassieke tween kunnen alleen object worden geanimeerd.

Het belangrijkste verschil met de klassieke tween is dat een bewegings-tween gedurende de gehele tween-reeks maar één doelobject heeft, terwijl je bij een klassieke tween gaat tweenen tussen twee hoofdframes die instanties van hetzelfde symbool of verschillende symbolen bevatten.

De Bewegingstween

LET OP: Flipgrid geeft een foutmelding als je PC geen camera en geen microfoon heeft. Maak dan je schermopname met Screencastify. Deze opname zet je weer in Flipgrid. Lees hier hoe je dat doet.

Skill 5: Animatie van symbolen

Leerdoelen:

Je herkent de 12 principes van animatie.

Werkwijze:

Lees onderstaande tekst en bekijk de twee filmpjes.

Bij de klassiek tween in Skill 3 heb je van een object (de oranje driehoek) een geanimeerd symbool (een vlam) gemaakt.

Disney heeft 12 principes van animaties opgesteld. Door deze principes toe te passen lijkt het of een object 'leeft'. Voor Skill 3 heb je Principe 1: 'Squash & Stretch' toegepast. Onthoud de 12 principes en gebruik deze kennis voor al je animaties!

Werkwijze

Bekijk onderstaande filmpjes

12 Principles of Animation

Naar Frank Thomas en Ollie Johnston van Walt Disney Studios, zie ook de bijbehorende animatie's op de website van Cento Lodigiani

12 Principles Pixar-ated

Door Shawn Sheehan, geinspireerd op Cento Lodigiani (zie links)

Zie ook 12 Principles door Alan Becker

Verdieping

Leer hoe je ease-in en ease-out (slow-in en slow-out) kan toepassen op jouw animaties. Bekijk deze video

Leer het verschil tussen Vormen (shapes) en Symbolen (graphic and movie clip), en hoe je ze animeert.

Adobe handboek: De vormtween

Skill 6: Werken met tekst

Leerdoelen:

Je kan tekst animeren door de tekst te verplaatsen, te scalen, te vervagen en door de tekst te roteren.

Werkwijze:

Voorlopig is het oefenen met oefening 6 van de 6 basisoefeningen voldoende.

Verdieping

Bekijk deze video voor tekst verplaatsen, scalen, vervagen, roteren en masking.

Skill 7: Muziek toevoegen

Leerdoelen:

Je kan muziek en geluidseffecten aan je animatie kan toevoegen.

Werkwijze:

Lees onderstaande tekst
Bekijk het laatste deel (deel 8) 'Working with audio' van de serie 'Getting Started with Adobe Animate'.

Geluidseffecten zijn prima toe te voegen aan je animatie.

Achtergrondmuziek is soms iets minder makkelijk toe te voegen omdat het geluid door blijft lopen. Bewerk dan je achtergrondgeluid/muziek eerst in een ander programma. Bijvoorbeeld in Première Pro.

Skill 8: Exporteren en publiceren

Leerdoelen:

Je weet hoe je een Adobe Animate project bestand (fla) kan exporteren naar mov en naar mp4
Je kan uitleggen waar de bestandstypen fla, swf, mov en mp4 voor worden gebruikt.
Je herkent de videocompressiestandaard H.264 (of AVC)

Werkwijze:

Lees onderstaande tekst
Bekijk Skill 8

Adobe 2020 exporteert standaard naar QuickTime mov.

Heb je mp4 nodig? Exporteer je Animatie als Media/Video van het type H.264 (mp4). Adobe Animate zal dan de Adobe Media Converter opstarten voor de conversie van mov naar mp4.

File types: fla is het Adobe Animate werkbestand en swf is de flash output file (zie LinkedIn FLA and SWF). Wij gebruiken mp4 als output file

LET OP: Soms lukt het niet om de audio te exporteren. Er is iets raars met Adobe Animate: vaak werkt het wel als het geluidsbestand op frame 2 (of later) begint...