Share
De sleutel tot animatie, net als veel dingen, is een logische aanpak en een goede workflow. In deze tut neemt Hasier je mee door je animatie te plannen, schetsen en verfijnen om je de beweging te geven waarnaar je op zoek bent.
Tijdens deze tutorial zullen we de volgende animatie maken:
Deze tutorial zal worden verdeeld in 4 delen. In elk deel gaan we over de verschillende fasen van het maken van een animatie van begin tot einde. Dit zijn de tutorials en hun inhoud:
In het eerste deel van deze tutorial zullen we de dingen bespreken die je moet weten voordat je gaat animeren. Kijk deze dingen niet over het hoofd; Als u uw animatie plant voordat u rechtstreeks in Flash bent gesprongen, bespaart u later veel tijd.
De allereerste stap bij het maken van een animatie bepaalt natuurlijk wat je wilt animeren. In deze zelfstudie animeren we dit:
Hij is een eenvoudig spionnetje dat ik al een tijd geleden heb verzonnen. Omdat hij zo simpel is, is het gemakkelijk om hem te animeren. Als dit je eerste keer is dat je probeert te animeren, raad ik je aan mijn spion te gebruiken voordat je doorgaat naar meer complexe personages.
Pak dus een stuk papier en teken de spion een paar keer. Frame-per-frame-animatie betekent hetzelfde tekenen telkens opnieuw, dus u moet er goed aan doen uw figuur te tekenen. Dit is hoe ik hem teken:
Als je eenmaal je karakter van binnen en van buiten kent, is het tijd om erover na te denken hem tot leven te brengen. Animaties worden gepland door sleutelframes (ook wel genoemd thumbnails). In deze tutorial zal ik ze noemen als sleutel tekeningen om ze niet te verwarren met de keyframes van Flash. Dus, wat is een sleuteltekening? Sleuteltekeningen zijn de tekeningen die het verhaal vertellen en de beweging definiëren in een animatie. Met andere woorden, ze zijn een manier om de animatie samen te vatten in enkele tekeningen. Het onderstaande voorbeeld laat zien hoe een klein verschil in een sleuteltekening een grote impact kan hebben op de uiteindelijke animatie:
Een sleuteltekening moet worden gepland aan het begin en aan het einde van een beweging en elke keer dat een verandering in richting of ritme in de animatie optreedt. Dus, kijk nog eens naar de uiteindelijke animatie en schets de belangrijkste tekeningen rekening houdend met deze aanwijzingen. Ze zouden er ongeveer zo uit moeten zien:
Wanneer je de slag hebt gekregen met het tekenen van je personage en de animatie hebt gepland, is het tijd om verder te gaan met Flash.
Begin met het openen van een nieuw Flash-document. De standaard 12 fps is te laag voor een animatie, dus voor deze tutorial gebruiken we 15 fps.
Noem de huidige laag "BG". Selecteer een lichte kleur en schets de basisachtergrond van de scène, in ons geval een kamer. Teken niets bijzonders, alleen de elementen die nodig zijn om de ruwe animatie te maken: muren, vloer en het raam.
Om in Flash te schetsen, kies ik meestal een grote penseelgrootte met drukgevoeligheid en breng ik de egalisatie terug naar ongeveer 10. Dit geeft me meer vrijheid om te schetsen, omdat ik de slagdikte kan variëren en ik meer controle heb over scherp hoeken vanwege de lage afvlakking. Ik stel voor dat je dezelfde instellingen gebruikt als ik. Maak je geen zorgen als je streken er grillig uitzien; we kunnen dat aan het einde oplossen.
Nu gaan we de belangrijkste tekeningen opnieuw maken die we eerder hebben gemaakt. Maak een nieuwe laag en noem het zoiets als "Spion". Teken in het eerste frame de eerste sleuteltekening die u eerder had gepland. Nogmaals, teken gewoon de basisvormen. Het zou er ongeveer zo uit moeten zien:
Plaats een leeg hoofdframe (F7) in de laag "Spion". Schakel ui-villen in, zodat u het vorige frame kunt zien. Teken met de eerste tekening als richtlijn de tweede sleuteltekening.
Herhaal hetzelfde proces voor de rest van de belangrijkste tekeningen. Als je klaar bent, zou je vijf keyframes moeten hebben met vijf verschillende sleuteltekeningen.
We komen nu bij de belangrijkste (en waarschijnlijk de moeilijkste) stap in het maken van een animatie: timing; het berekenen van de tijd tussen onze belangrijkste tekeningen. Wat we nu doen, bepaalt de hele animatie, dus het is belangrijk dat het goed wordt gedaan.
Selecteer het eerste frame in de laag "Spion" en voeg een paar lege hoofdframes toe (F7) tussen de eerste en tweede sleuteltekening. Doe hetzelfde met de resthoofdframes. Dit is hoe uw tijdlijn eruit zou moeten zien:
Test de film (Ctrl + Enter). Zoals u kunt zien, is de timing helemaal verkeerd, dus ga terug naar .fla om het te repareren. Als de timing tussen twee hoofdtekeningen te kort is, voegt u er meer lege hoofdframes tussen toe; als de timing te lang is, verwijdert u enkele keyframes.
Nadat je het een beetje hebt aangepast, test je de film om te zien of deze er beter uitziet dan eerst. Als het er nog steeds niet goed uitziet, moet u nog wat wijzigingen aanbrengen. Het is moeilijk om de animatie te maken met slechts vijf keyframes, dus maak je geen zorgen als het niet perfect is in dit stadium; we kunnen de timing later nog aanpassen. Tot dusverre is dit mijn resultaat:
De kern van onze animatie is nu compleet, maar er moet nog veel werk worden verzet. Ten eerste moeten we meer keyframes toevoegen om de animatie soepel te laten lijken. De tekeningen die tussen de belangrijkste tekeningen verschijnen om de animatie te voltooien, worden tussen haakjes genoemd. Het tekenen van de tussenlijnen is vrij eenvoudig, omdat we al het meeste werk hebben gedaan toen we de belangrijkste tekeningen maakten.
Selecteer een sleutelframe tussen de eerste twee sleuteltekeningen en zet het villen van de ui in. Met twee tekeningen als referentie teken je de spion halverwege de sleuteltekeningen in het huidige frame.
Herhaal het proces. Teken een nieuw hoofdframe tussen elk van de sleuteltekeningen. Je zou negen keyframes moeten hebben.
Test de film. Als de timing er nog steeds niet goed uitziet, is dit het moment om de timing te wijzigen. Zoals ik al eerder zei, timing is het belangrijkste onderdeel van animatie, dus neem je tijd om te controleren of dit klopt. Na het tweaken van keyframes zou de animatie er als volgt uit moeten zien:
Er valt weinig meer uit te leggen. Blijf de tussenliggende tussenvoegen toevoegen om de animatie glad te strijken totdat er geen lege sleutelframes meer overblijven. Test je film om te kijken of er iets moet worden opgelost. Dit was mijn resultaat tot deze fase:
De ruwe animatie is nu voltooid. In dit deel van de tutorial werken we aan het tekenen van de schone versie van ons personage.
Maak een nieuwe map en noem deze "ruw". Zet de lagen "BG" en "Spy" in hulplijnen zodat ze niet worden weergegeven wanneer de film wordt gepubliceerd. Vergrendel beide lagen en plaats ze in de map. Maak een nieuwe laag en noem hem opnieuw "Spion". In deze laag gaan we de schone versie van ons personage tekenen.
Wijzig de vulkleur in zwart en stel de penseelinstellingen in zoals beschreven in stap 4. Haal nu de tekeningen uit het begin. Gebruik ze als een referentie om de spion over de ruwe tekening te trekken.
Doe hetzelfde voor alle keyframes. U kunt ui skinning gebruiken om het vorige frame als referentie te gebruiken.
Het ziet er absoluut veel schoner uit, maar ze zijn nog steeds niet schoon genoeg. Bekijk de schone tekeningen van dichtbij. Je zult merken dat de slagen gekarteld zijn. We kunnen ze laten zoals ze zijn voor deze animatie, maar als we aan een groter project zouden werken, zouden we ze moeten optimaliseren. Optimaliseren is een methode die Flash gebruikt om een vorm te verfijnen door de hoeveelheid curven te verminderen die nodig zijn om de vorm te definiëren.
Als u de streken in de animatie wilt optimaliseren, selecteert u de tekeningen van alle frames (met "Bewerk meerdere frames" ingeschakeld) en klikt u op Wijzigen> Vorm> Optimaliseren (Crt + Alt + Shift + C). Het dialoogvenster Optimalisatiecurves wordt geopend. U kunt de mate van afvlakking aanpassen met de schuifregelaar. Vink het vakje "Gebruik meerdere passen" aan. Hierdoor wordt de vorm steeds opnieuw gladgestreken totdat geen verdere afvlakking kan worden bereikt zonder de vorm aan te tasten. Wanneer u op OK klikt, verschijnt een bericht met het percentage van de krommeverlaging.
Schakel 'meerdere frames bewerken' uit en bekijk uw tekeningen. Ze zijn nu veel soepeler, maar de kans is groot dat de optimalisatie de vormen heeft gewijzigd (althans enigszins). Je kunt ze bewerken met de gratis transformatie tool (Q). Zorg ervoor dat alle tekeningen gesloten zijn en geen openingen hebben.
Het is nu tijd om de spion wat kleur te geven. Dus pak de verfemmer (K) en vul hem in! Ik gebruikte # 000033 voor het hoofd, # 010243 voor het lichaam, en #FFFFFF voor de ogen.
Opmerking: als u met de verfemmer in de tekening klikt en er gebeurt niets, betekent dit dat uw tekening ergens een gat heeft. Vind het en sluit het met de Free Transform Tool.
De animatie is voltooid, maar er zijn nog enkele verbeteringen te doen. Wat ik hier uitleg, zijn louter suggesties die u niet woord voor woord hoeft te volgen, en ik zal daarom niet veel tijd besteden aan elke.
Nu we de spion hebben gekleurd, hebben we een even kleurrijke achtergrond nodig. Het doel van deze zelfstudie was echter om het animatieproces te laten zien, dus het maken van de achtergrond valt buiten het bereik van deze tut. Maar voor degenen die nieuwsgierig zijn, hier is een korte samenvatting van hoe het werd gemaakt:
Ik heb de kamer opnieuw gemaakt in Swift3D, een programma dat is ontworpen om 3D-elementen op te nemen in Flash. Ik heb de scène geëxporteerd als vectoren en geopend in Flash. Ten slotte heb ik een aantal wijzigingen in de kleur aangebracht en een gele gloed voor de lamp toegevoegd.
U kunt uw achtergrond rechtstreeks in Flash of op een andere manier maken. Als je de mijne wilt gebruiken, vind je die in de bronbestanden.
Zoals je waarschijnlijk al hebt opgemerkt, is er een klein probleem dat we moeten oplossen. Omdat de laag 'Spion' zich boven de laag 'BG' bevindt, kunnen we de spion zien wanneer hij in de eerste frames achter de muur moet staan. Om het deel van zijn lichaam te bedekken dat niet mag worden getoond, gebruiken we een laagmasker.
Maak een nieuwe laag, verander het in een maskerlaag en noem het op gepaste wijze "masker". Maak de laag "Spionage" gemaskeerd. Als je deze zelfstudie hebt kunnen volgen, ken je Flash waarschijnlijk goed genoeg om bekend te zijn met laagmaskers, maar ik zal ze snel behandelen:
Een maskerlaag bevat een gevulde vorm waardoor een gelinkte (gemaskeerde) laag er doorheen kan worden gezien; alle lege gebieden in de maskerlaag worden onzichtbaar in de gemaskerde laag.
Ons masker moet de hele spion bedekken (in alle frames waar een deel van zijn lichaam verborgen moet zijn), behalve het deel dat uit het raam steekt. Ze zeggen dat een foto meer zegt dan duizend woorden, dus kijk hieronder:
Notitie: Als u zowel de maskerlaag als de gemaskeerde laag vergrendelt, ziet u het effect van het masker.
De laatste aanraking die ik aan de animatie heb toegevoegd was een zachte schaduw onder de spion. Maak een zwarte cirkel in een nieuwe laag. Transformeer het zodat het lijkt op de schaduw van de spion.
Zet het om in een filmclip en animeer het zodat het de muur en grond onder de spion volgt (zoals ik al eerder zei, ik zal niet in details treden, je zou dit in je eentje moeten kunnen doen). De geanimeerde schaduw zou er als volgt uit moeten zien:
Als u de schaduw wilt laten lijken op een schaduw, verlaagt u de alpha tot 25% in de eigenschappencontrole voor filmclips. Om het zacht te laten lijken, voegt u een wazig filter toe op het tabblad Filters met de hieronder getoonde parameters.
Gefeliciteerd! Test je film, leun achterover en ontspan. Je kunt jezelf nu een animator noemen. Maar onthoud dat dit slechts het begin is! Kijk om je heen! Er zijn oneindige dingen om te animeren! Maak je eigen personages, ontdek nieuwe technieken, ontwikkel je eigen stijl en vooral: veel plezier met animeren!
Er zijn veel boeken over traditionele animatie die ik u aanraden te bekijken. Drie boeken die opvallen zijn:
Als je geïnteresseerd bent in Flash-animatie, ga dan naar biteycastle.com en bekijk de bekroonde animaties van Adam Phillips en zijn Bitey Castle Academy.
Accentsconagua