Les 3: Animatie

Nu wordt het leuk. Hier leer je je eerste Flash animaties maken. Er zijn een aantal technieken voor om deze te maken en ik ga proberen je alles te leren wat ik van die technieken weet. Schrik niet, want zo veel is dat niet, maar in ieder geval genoeg om zoiets te maken als het introfilmpje die je gezien hebt aan het begin van de site.

Motion Tweening
In de vorige les heb je geleerd wat keyframes zijn en in de les daarvoor hoe je ze moet maken. Met keyframes alleen kom je er niet, je wilt ze laten vliegen, van grootte doen veranderen en rond laten draaien. Het eerste wat ik je leer om dit te kunnen bewerkstelligen is de motion tween. Motion ken je wel (beweging), maar wat tween betekend. Mijn woordenboek weet het ook niet, dus waarschijnlijk is het een door Flash bedacht woord. Ik vraag me af wat de Nederlandse versie van Flash voor het woord bedacht heeft. Maar goed, dit is geen les formulering en spellen dus laten we verder gaan.
Wat je nodig hebt om een motion tween te maken is een keyframe. We beginnen simpel, dus we willen een object (bijvoorbeeld een blauw vierkant) van links naar rechts laten vliegen. Je begint uiteraard met het tekenen van het blauwe vierkant, vergeten hoe? Snel terug naar les 1! Nadat je het vierkant getekend hebt, heb je als het goed is een keyframe in het eerste frame. Zorg er wel ff voor dat het vierkant links in je werkblad staat (hij ging van links naar rechts, weet je wel?). Vervolgens klik je een paar frames verder (bijvoorbeeld frame 10) met rechts en je kiest insert keyframe. Je krijgt dan zoiets:

Zodra je dit gedaan hebt, merk je dat je vierkant geselecteerd is. Is dit niet zo doe dit dan (het beste is het rechter keyframe selecteren). Sleep je vierkant naar de rechterkant van je werkblad. Het is nu tijd om je filmpje eens te testen. Dit doe je door op Enter te drukken of je gaat naar Control en je klikt op Play. Je ziet dat de rode lijn (ook op het plaatje te zien, deze lijn geeft aan welk keyframes er nu te zien zijn op je werkblad) bij frame 1 begint en doorloopt tot het laatste keyframe. Op het werkblad zie je het volgende filmpje (zonder die knop dan, maar die zit erbij voor jullie, duh!):

Niet bepaald een mooi soepel vliegend vierkant die van links naar recht gaat. De motion tween moet namelijk nog toegevoegd worden. Dit is ontzettend simpel: Klik gewoon met je rechtermuisknop ergens in de grijze frames (dus tussen frame 1 en frame 10) en kies Create Motion Tween. De frames 1 t/m 9 worden nu paars en er zit een onderbroken lijn in (toch?). Dit is nog niet goed, daarom moet je ook in frame 10 een motion tween creëren. Als het goed is ziet je layer er dan zo uit:

Wanneer je het filmpje test zie je zoiets als dit:

En? Voelt dat als een grote triomf? Nee? Nou, dat kan kloppen...een gevoel van triomf voel je pas als je een filmpje hebt gemaakt waar je heel veel Flashtechnieken hebt toegepast, met geluid, knoppen en veel kleur enzo. Je zult nog even deze en de volgende les door moeten werken. Voelde je wel een gevoel  van triomf? Nou, dan zou ik wel even zorgen dat je aan het eind van les 4 een paar kalmeringspilletjes ingenomen hebt. Maar even zonder dollen, laten we maar eens verder gaan met de les.
Het is leuker als je wat meer variatie hebt in je filmpjes. Daarom ga ik nu even uitleggen hoe je je vierkant kunt laten draaien én van grootte kan veranderen. Het lijkt misschien moeilijk, maar dat valt reuze mee. Eerst maar eens beginnen met het makkelijkste: de formaatverandering. Je selecteerd het laatste frame (en daarmee je vierkant) en klikt op de Scaleknop onder de options van de Arrow tool (). Je ziet dat er 8 witte vierkantjes rond je vierkant verschijnen, deze ken je ook wel van Paint. Je kunt er de grootte van je vierkant mee veranderen. Probeer maar eens iets, ik maak 'm kleiner.
Om je vierkant 180 graden te laten draaien (dus een halve keer), selecteer je wederom je laatste frame. Dan klik je op de snelknop rechtsonder in beeld Info (weet je niet meer wat ik bedoel, ga dan naar les 2) en klik op het tweede tabblad Transform. Hier kon je je object o.a. laten draaien. Met je vierkant in frame 10 nog steeds geselecteerd vul je bij rotate in 180. Als je nu je filmpje afspeelt zul je als het goed is ongeveer het volgende zien:

Dat lijkt al ergens op. Je kunt ook tijdens de tween je vierkant eerst groot laten worden en dan weer klein. Dit doe je gewoon door nog een keyframe tussen frame 1 en 10 te zetten en hier de grootte van je vierkant aan te passen. Op deze manier kun je een heleboel dingen aanpassen. Gewoon veel proberen. Ook kun je het vierkant van kleur laten veranderen: alleen kun je dit niet doen door gewoon even de kleur van het vierkant in het laatste frame te veranderen. Als je dat probeert zul je merken dat je het vierkant helemaal niet meer van kleur kunt laten veranderen. Dat komt omdat Flash het vierkant in een symbol heeft laten veranderen. Wil je het symbool aanpassen, dan dubbelklik je er gewoon op. Als je er dubbel op hebt geklikt, vervaagt de achtergrond. Om je film weer aan te passen ga ja naar Edit en dan klik je op Edit Movie...
Maar als je het symbool aanpast moet je hier op letten:
Verander je iets aan het symbool (bijvoorbeel de kleur) dan zijn alle keyframes in het filmpje aangepast met die verandering!
Je kunt dus niet op deze manier het vierkant van blauw naar rood laten gaan, want verander je de kleur van het symbool in rood, dan is het vierkant overal rood. Wil je het vierkant toch van blauw naar rood laten veranderen, doe dan het volgende. Klik op de snelknop rechtsonder in beeld Instance en kies het tweede tabblad Effect. Uit het dropdown menu kies je de optie Tint en je kiest een rode kleur uit. Er waren nog meer opties:

1. Brightness, hiermee kies je uit hoe donker of licht je je symbool wilt hebben
2. Alpha, kies uit hoe transparant je je symbool wilt (dus de 'doorzichtigheidsgraad')
3. Advanced, een combinatie van de andere opties, maar dan moeilijk. Dit is een optie voor de gevorderden.

Als je de tween langer wilt laten duren, verplaats je het laatste keyframe van frame 10 naar bijvoorbeeld frame 35, hierdoor kun je meer veranderingen plaats laten vinden in je filmpje. Ik zou eens flink gaan oefenen en mogelijkheden gaan uitproberen en uiteindelijk kun je zoiets maken:

Guide Layer
Tot zover de 'simpele' motion tween. We gaan het wat moeilijker maken. Ik ga de Guide Layer introduceren. Een guide layer is een layer die zijn onderliggende layer een bepaalde weg laat afleggen. Met de motion tween kun je een object (een symbool eigenlijk, want objecten zijn passieve tekeningen en een symbool een actieve tekening) van punt A naar punt B verplaatsen. Met de Guide Layer verkrijg je hetzelfde resultaat, maar dan verplaats je je symbool met een omweg. Is dat zo duidelijk? Nou, ik zal een voorbeeld laten zien. Als je de knop Show Guide Layer ingedrukt houd zie je de guide layer, dus dan zie je het pad die het balletje volgt:

Deze Flashtechniek gebruik ik niet zoveel, maar het is wel handig als je weet hoe het werkt. Allereerst teken je het object dat je wilt verplaatsen (in dit geval het rode bolletje). Vervolgens zorg je dat je de layer van het bolletje geselecteerd hebt en klik je op Add Guide Layer (), de knop naast Insert Layer. Er wordt een nieuwe layer boven de geselecteerde aangemaakt en die heet standaard Guide: Layer 1. Deze layer is de Guide Layer. Nu moet je de Guide Layer gaan maken, hiervoor kun je het beste het te verplaatsen symbool (het rode bolletje) even onzichtbaar maken. Selecteer de Guide Layer en trek een lijn. Deze lijn kan uit meerdere delen bestaan (als je dat doet is het handig de Magneet Tool aan te zetten), het gaat er in ieder geval om dat je het pad tekent die je symbool moet gaan afleggen. Dit pad moet bestaan uit een lijn.
Voor het volgende moet je zorgen dat je Magneet Tool aan hebt staan. Zorg er voor dat je je symbool weer zichtbaar hebt en 'plak deze vast aan de lijn'. Dit vastplakken is gewoon je symbool selecteren en 'm richting het begin van de lijn slepen totdat deze automatisch vast wordt geplakt door de Magneet Tool. Voeg nu een keyframe in op de Guide Layer, bijvoorbeeld op frame 20. Daarna voeg je een keyframe in op de layer van je symbool (in hetzelfde frame als de keyframe die je net bij de Guide Layer hebt ingevoegd). Bij dit nieuwe keyframe (van het symbool dus) verplaats je het symbool naar het einde van de lijn. Zet een motion tween tussen de frames van je symbool-layer en je guide layer is klaar. Onee, je moet je Guide Layer nog onzichtbaar maken, anders is het niet mooi. Want dan zie je je symbool over een lijn vliegen. Dit doe je gewoon zoals je alle layers onzichtbaar maakt: door op het bolletje onder het oogje te klikken (zie les 2 als je het vergeten bent). Dan is er nog 1 ding waar je op moet letten:
Stel je hebt een Guide Layer gemaakt en je hebt er een symbool aan vastgeplakt en je bent in princiepe klaar met alles. Dan kom je er achter dat je de lijn (het pad die het symbool moet volgen) verkeerd getekend hebt. Als je de lijn aanpast en je wilt kijken of je symbool nu wel de goede weg neemt, dan zul je zien dat je symbool in plaats van de nieuwe lijn te volgen, gewoon een rechte lijn neemt. Je moet dan eerst de Guide Layer verwijderen en bijna alles weer overnieuw doen. Let dus goed op dat je het als het kan in één keer goed doet. Maar, hoe kan dit en is er een betere manier om je Guide Layer aan te passen zonder dat je dat negatieve effect krijgt?

Ik hoop dat ik het zo een beetje duidelijk uitgelegd heb, want uitleggen is niet mijn sterkste kant. Zodra je de Guide Layer een beetje kent, raad ik je alweer aan om er eens flink mee te gaan oefenen. Als je dat gedaan hebt, kun je doorgaan met het volgende: Masking

Masking
Bij Masking heb je een layer met een gat en in dat gat kun je de layers eronder zien. Dit klinkt weer eens heel vaag, dus daarom hier een voorbeeld:

Het is alsof je een masker met een gat op een achtergrond hebt liggen en deze over de achtergrond schuift. Dit effect heb ik gebruikt bij het intro van mijn James Bond site (verwacht verder niks van de site, want ik doe er al lang niets meer mee).
Je maakt een Mask op de volgende manier: Maak eerst je achtergrond. Selecteer dan de layer die je achtergrond bevat en klik op Insert Layer, zodat er een nieuwe layer boven je achtergrondlayer ontstaat. Deze nieuwe layer wordt je mask. Teken een object die de vorm van het gat heeft, zorg er voor dat dit object 1 kleur heeft, ik doe meestal zwart, maar het kan elke kleur zijn. Klik met rechts op de nieuwe layer en kies Mask. De nieuwe layer is nu in een masker verandert en het object dat je net in de nieuwe layer getekend had is nu het gat geworden. Let wel op, de twee layers (de masklayer en je achtergrondlayer) zijn nu gelockt. Dit is nodig om het maskeffect toe te kunnen passen. Wil je nog iets aanpassen, unlock dan de gewenste layer en pas 'm aan. Je kunt het gat d.m.v. een motion tween over je achtergrond verplaatsen. Normaal gesproken wordt alleen de eerste layer onder de masklayer als een achtergrond gezien, wil je meer layers als echtergrond doe dan het volgende: selecteer de layer die je ook als achtergrond wilt hebben en plaats deze direct onder de masklayer. Wil je deze layer niet direct onder de masklayer, maar onder je huidige achtergrondlayer, sleep dan de layer onder je huidige achtergrondlayer en klik met rechts op de layer. Kies Properties en kies Masked bij Type, ook deze layer zal nu een achtergrondlayer zijn.
Hoe kan je van het gat van een mask een muiscursor maken? Zodat je zelf bepaalt waar je de achtergrond laat zien.

Shape Tween
Nu ga ik je iets leren wat ik zelf nog nooit gedaan heb. Het effect wat je bereikt als je dit kan, kan heel mooi zijn. Ik ga je leren hoe je een Shape Tween moet maken. Misschien weet je al wel wat het is, maar het is een tween waar je een keyframe mee van vorm doet veranderen. Zoals dit:

Prachtige abstracte creatie, vind je niet? Het is net zo simpel als dat het abstract is. Teken een object waar je de shape tween zodadelijk mee wilt beginnen. Maak een keyframe een gewenst aantal frames verderop en teken hier je object zoals de tween er uiteindelijk uit moet zien. Met het laatste keyframe geselecteerd open je het Instance menu (rechtsonder in beeld) en ga je naar het tabblad Frame. Kies bij Tweening de optie Shape. Selecteer nu de frames voor het laatste keyframe (gewoon één van de frames tussen de eerste en laatste keyframe selecteren) en kies wederom bij het tabblad Frame de optie Shape. De eerst grijze frames zijn nu lichtgroen geworden en er staat een pijl van de eerste keyframe naar de laatste keyframe in. Speel je filmpje af om te kijken wat je bereikt hebt.
Het is mogelijk je shape tween wat mooier te maken, afhankelijk van de verandering die plaatsvind. Is het verschil tussen de keyframes heel groot, dan is het handig gebruik te maken van Shape Hints. Dit zijn punten die je op je eerste en laatste keyframe zet en die je zou kunnen zien als 'houvastpunten' voor Flash. Dankzij deze hints weet Flash welke punten van je object verbonden moeten worden tijdens het tweenen. Het is weer eens heel moeilijk uit te leggen, maar als je een beetje uitprobeert weet je wel ongeveer wat ik bedoel. Een Shape Hint voeg je toe door op Modify te klikken en dan bij Transform op Add Shape Hint te klikken (of druk op Ctr + Shift + H), terwijl je je eerste keyframe geselecteerd hebt. Je ziet dat er een rood cirkeltje verschijnt met een 'a' erin. Sleep de hint naar een punt op je object die je straks wilt verbinden. Het is handig om de Magneet Tool aan te hebben staan. Selecteer nu je laatste keyframe en sleep het rondje hier naar het punt dat je hier wilt verbinden. Als het goed is, is dit rondje nu groen geworden en als je bij je eerste keyframe kijkt is ie hier geel. Is dit niet het geval, sleep dan nog een beetje met de rondjes (in beide keyframes) tot ze wel groen/geel zijn.
Gebruik niet teveel Shape Hints! Probeer maar eens uit wat er dan gebeurd: eerder chaos dan orde...

In het Frame tabblad zijn nog meer opties. Zo staat er ook een schuifbalkje met Easing. Schuif je de balk omhoog (het getal dat erbij staat wordt positief en er komt Out bij te staan) dan begint je shape tween langzaam en eindigt ie sneller. Trek de balk naar beneden en je hebt het tegenovergestelde effect. Probeer maar uit, soms ziet het er mooi uit. Je kunt het ook toepassen bij de andere tweens.

Zo, dat was het dan wat Animatie betreft. Dit was denk ik wel de belangrijkste les van de site. Als je bovenstaande technieken goed kent, kun je al heel redelijke filmpjes maken. Het moet je al lukken mijn introfilmpje na te maken, op één ding na: de Skip Intro knop. Dit leer je in de volgende les. Nog eens deze les doornemen? Ga dan terug naar boven.