Ontwikkel vloeiend een karikatuur met bewegings-tweens

In deze zelfstudie zullen we zien hoe we een karikatuur kunnen maken, deze opsplitsen in verschillende lagen en de stukjes correct rangschikken als grafische symbolen. Ten slotte bekijken we hoe gemakkelijk we de karikatuur vlot kunnen animeren door bewegings-tweens te gebruiken. Dit is een lange handleiding, dus laten we aan de slag gaan!


Eindresultaat

Laten we even kijken naar het effect dat we willen bereiken met deze tut:

Stap 1:

Begin met het karikatuurontwerp. Ik ontwierp een heel eenvoudige karikatuur, hoewel ik hem nog steeds gestileerd hield. De beste manier om te brainstormen is door te krabbelen. Ik heb een ruwe schets gemaakt en de afbeelding gescand.

Stap 2:

Open nu Flash en begin een nieuw flash-bestand. Maak de stage-maat: 720px X 576px, beeldsnelheid: 25 fps en achtergrondkleur: wit. Deze instellingen zijn zo omdat we de animatie op uitzendniveau maken.

Stap 3:

Importeer de gescande afbeelding naar de standaardlaag door naar Bestand> Importeren> Importeren in werkgebied te gaan.

Stap 4:

Schaal nu het beeld zodat het op het podium past. Noem de laag met de afbeelding "Ref-afbeelding" en sluit deze.

Stap 5:

Maak een nieuwe laag. Teken de vorm van de karikatuur stukje bij beetje, volg de Ref afbeelding eronder. Als je wilt, kun je je tekening verder verfraaien en stileren, meer dan de ruwe schets.

Stap 6:

Teken elk deel van de karikatuur op een andere laag en blijf ze een naam geven. Het tekenen van lichaamsdelen in afzonderlijke lagen geeft ruimte voor meer gedetailleerde animatie door individuele onderdelen te animeren. Door ze op de juiste manier te benoemen, kunt u eenvoudig de gewenste laag vinden. Het is ook erg belangrijk voor projecten waarbij veel mensen in hetzelfde bestand werken.

Stap 7:

Na het gezicht en de romp getekend te hebben, lijkt het erop dat dit hele deel zou werken als een enkel lichaamsdeel (natuurlijk! Hoe zou anders een dikke man moeten bewegen?). Selecteer nu in de tijdlijn het frame van de bovenste laag, houd vervolgens "shift" ingedrukt en selecteer het frame in de onderste laag. Door dit te doen, selecteer je alle frames van alle lagen. Klik nu met de rechtermuisknop op het geselecteerde gebied van de tijdlijn. Veel opties zullen verschijnen. Selecteer "Frames kopiëren".

Stap 8:

Druk nu op "Ctrl + F8" of ga naar Invoegen> Nieuw symbool maken. Dit opent een dialoogvenster. Typ "body n face" als naam en selecteer symbooltype als Graphic. Klik nu op OK.

Stap 9:

Er verschijnt een symbool in de bibliotheek en direct zal de tijdlijnweergave verschuiven naar het lege grafische symbool in plaats van de hele scène. Klik opnieuw met de rechtermuisknop op het eerste frame van de lege laag en selecteer "Paste Frames" uit de opties. Alle gekopieerde frames verschijnen in het symbool en behouden hun laagvolgorde en laagnamen.

Stap 10:

Ga nu terug naar de scènemenzichtweergave door op "Scene 1" te klikken in de bewerkbalk.

Stap 11:

Maak een nieuwe laag bovenop alle bestaande lagen en versleep het symbool vervolgens naar die laag. Bekijk nu de laag in de overzichtsmodus. Lijn het symbool uit op dezelfde positie als het door de andere lagen is bekeken.

Stap 12:

Hernoem de laag zodat deze overeenkomt met de symboolnaam en verwijder de andere lagen die al in het symbool zijn gekopieerd. Op deze manier stapelen de lagen in de tijdlijn zich niet op en ontstaat een juiste hiërarchie.

Stap 13:

Teken de hand door naar de afbeelding te verwijzen. Maak het eerst in twee lagen. Maak de hand in de ene tot de pols. Maak in de tweede laag de rest van de hand (passend deel). Zorg ervoor dat deze twee lagen elkaar overlappen. Dit zal helpen om deze te animeren.

Stap 14:

Denk nu eens aan hoe onze arm beweegt terwijl we lopen; het buigt naar de elleboog. Dus we moeten ook het handgedeelte van de elleboog breken. Maak een nieuwe laag. Selecteer en klik met de rechtermuisknop op het frame waar je getekend hebt. Kopieer dat frame. Maak een nieuwe laag en plak het kader op die nieuwe laag.

Stap 15:

Sluit nu alle lagen los van de bovenste. Sleep met je muiscursor vanaf de onderkant van het scherm en selecteer het onderste gedeelte van de vorm (zorg ervoor dat de selectie iets minder is dan het denkbeeldige ellebooggebied). Dit extra gebied zal overlappend zijn. Druk nu op "verwijderen" en verwijder de selectie. Het resterende deel vormt de overhand.

Stap 16:

Selecteer de vorm en selecteer vervolgens Wijzigen> Converteren naar symbool of druk op "F8". Typ in het dialoogvenster "omhoog" als naam en selecteer het symbooltype als Afbeelding. Klik nu op OK. Dit creëert de overhand. Het converteren van vormen naar symbolen is uitermate belangrijk voor gebruik in bewegings-tween. Hernoem de laag hetzelfde als het symbool, dubbelklik vervolgens op het symbool, ga erin en je zult de laag naar binnen vinden. Het heeft de standaardnaam van "Laag 1", dus hernoem het.

Stap 17:

Vergrendel de "omhoog hand" -laag en schakel over naar de overzichtsmodus. Ontgrendel de onderstaande laag. Sleep met je muiscursor vanaf de bovenzijde van het scherm en selecteer het bovenste deel van de vorm, zorg ervoor dat de selectie een klein gebied van de bovenste laag bedekt, zichtbaar als omtrek. Wederom, wis de selectie.

Stap 18:

Converteer de vorm naar een grafisch symbool en noem deze "lage hand". Npw voert alle naamgevingsprocessen uit zoals u eerder hebt gedaan. Maak er een gewoonte van om symbolen en lagen dienovereenkomstig te hernoemen. Als u klaar bent, zet u de "omhoog hand" -laag terug naar de normale weergavemodus.

Stap 19:

Vergrendel andere lagen en maak het polsstuk een symbool. Noem het "pols".

Stap 20:

Maak een nieuwe laag en teken het beengedeelte (exclusief de schoen), overlappend over de romp en de schoenzones.

Stap 21:

Trek in een andere nieuwe laag de schoen.

Stap 22:

Verdeel de poot in twee delen, overlappend in het gebied van de knie, zoals je deed voor de hand. Converteer alle onderdelen in symbolen en noem ze "lage benen" en "stijgende benen". Hernoem ook de lagen.

Stap 23:

Verdeel de schoen door hem verticaal in twee delen te splitsen, een richting de hiel, een andere richting de teen. Maak ze ook symbolen. Noem ze "schoenhak" en "schoenenteen".

Stap 24:

Breng nu de lagen aan door de been- en schoenenlagen onder de laag "body n face" te trekken. Schakel zichtbaarheid voor alle lagen in. Zien? Je karikatuur is klaar, hoewel hij er een beetje buitenproportioneel uitziet.

Stap 25:

Dit is het laatste punt waarop je je ontwerp nog kunt aanpassen. Knijp het een beetje horizontaal en schaal de schoen en benen naar wens. Eindelijk wanneer u klaar bent, klik met de rechtermuisknop op de "ref-beeld" -laag en selecteer "gids". "Ref-afbeelding" wordt niet meer weergegeven wanneer u de film bekijkt of exporteert. Je kunt zelfs de zichtbaarheid uitschakelen als je wilt.

Stap 26:

Nu is het tijd om de draaipunten te positioneren. We weten dat onze handen, benen en lichaam rond een aantal vaste gewrichten in ons skelet bewegen. Die punten worden gevonden door onze schouders, knieën, ellebogen, heupen en nek. Dus zelfs in deze karikatuur moet je die gezamenlijke posities opnieuw creëren om de karikatuur natuurlijke beweging te geven.

Stap 27:

Selecteer de transformatietool en selecteer vervolgens één voor één elk symbool in scènemenzicht. De standaard draaipositie wordt in het midden geplaatst, dus verplaats het draaipunt (de cirkel) naar het juiste draaigebied van de karikatuur. Zie de afbeelding hieronder voor hulp.

Stap 28:

Voordat je met animatie begint, zal er wat meer nesten nodig zijn. Het lijkt erop dat er te veel lagen zijn om te animeren en dat ze in één keer moeilijk te hanteren zijn. Selecteer "wrist", "low hand" en "up hand" samen (Ctrl + klik), klik met de rechtermuisknop op het frame en "frame kopiëren". Maak een nieuw symbool, noem het "rechterhand" en leg daar de lagen in. Maak een nieuwe laag en plaats dit nieuwe symbool op de juiste manier, door de laag dienovereenkomstig te hernoemen. Verwijder de oude lagen.

Stap 29:

Herhaal hetzelfde proces, deze keer een symbool "rechterbeen" maken, "omhoog been" en "onderbeen" combineren. De lagen "schoenhak" en "schoenneus" moeten ook in dit symbool worden geplaatst, maar sla dit nu gewoon over. Je zult zien dat er een fout is gemaakt ...

Stap 30:

Nu heb je de fout gevonden! Geen probleem. Selecteer de lagen en kies "Frame kopiëren". Dubbelklik in de bibliotheek op het pictogram "rechterpijp" om het symboolbeeld omhoog te brengen. Maak een nieuwe laag bovenaan, klik met de rechtermuisknop op het frame en klik vervolgens op "Kaders plakken". Dat is het! De fout is verholpen, wat bewijst dat deze regeling op elk moment eenvoudig kan worden gewijzigd. Verwijder ten slotte de extra schoenenlagen uit de scènemenup.

Stap 31:

Je hebt een rechterbeen, maar je hebt ook een linkerbeen nodig. Selecteer het symbool "rechterbeen", klik met de rechtermuisknop en selecteer vervolgens uit de opties "Dupliceren". Wanneer het dialoogvenster verschijnt, geeft u het dubbele "linkerbeen" een naam.

Stap 32:

Maak een laag onder "rechterbeen", versleep het nieuwe symbool en plaats het op de juiste manier.

Stap 33:

Maak op dezelfde manier de linkerhand van de karikatuur en leg de laag onderaan. Visueel zal de linkerhand achter alles staan. Als u het symbool nauwkeurig wilt plaatsen, schakelt u de zichtbaarheid van de laag naar de overzichtsmodus.

Stap 34:

Voordat je gaat animeren, moet je rekening houden met de belangrijkste houdingen van lopen. Zie de figuur hieronder; dat zijn belangrijke houdingen, ook wel 'uitersten' genoemd. Eerst moet je keyframes maken met die poses, en door het tussenframe te verfijnen, wordt het resultaat bereikt.

Stap 35:

U hebt een grondvlakreferentie nodig om te zien of de voet de grond goed raakt. Dus neem een ​​nieuwe laag onder alle lagen. Teken een horizontale lijn en plaats die net onder de voet. Zet de laag op slot.

Stap 36:

Dubbelklik op het rechterbeen van de karikatuur om binnen het symbool "rechterbeen" te gaan. Plaats nu het been door de beenonderdelen te draaien en te verplaatsen (niet schalen). Laat het op de onderstaande afbeelding lijken. Een extra tip hier: natuurlijk, als ons rechterbeen naar voren beweegt, komt onze rechterhand achterwaarts.

Stap 37:

Ga nu terug naar de scène en voer het symbool "linkerbeen" in. Stel het been naar wens.

Stap 38:

Evenzo, poseer de rechterhand.

Stap 39:

Vorm de linkerhand. Hier, omdat het achter alles staat, moet je overschakelen naar de overzichtsmodus.

Stap 40:

De eerste belangrijke pose is gedaan. Je zult drie andere belangrijke houdingen moeten maken om de loopcyclus te voltooien. Laten we besluiten dat het interval (tijdsverschil) tussen elke twee sleutelposities 8 frames is. De volgende toetspositie zou daarom moeten verschijnen in frame 9. Sleep-selecteer alle lagen bij frame 9. Druk vervolgens op "F6" om een ​​keyframe voor "rechterbeen" te maken.

Stap 41:

Stel nu het "rechterbeen" voor de tweede belangrijke pose. Stel vervolgens alle andere delen één voor één neer, net zoals je deed voor de eerste toetshouding. Als je klaar bent, ben je klaar met de tweede belangrijke pose!

Stap 42:

U zult de nieuwe sleutelpositie niet kunnen zien in de scèneweergave, omdat de hoofdlagen (bovenliggend) maar één frame hebben. Laten we het uitbreiden tot frame 32. De logica hierachter is duidelijk; acht frames voor elke pose (4 X 8 = 32). Dan op frame 9 kun je de pose zien. Sleep - selecteer alle hoofdframes bij frame 32 en druk op "F5". Hiermee maakt u een frame (geen hoofdframe) en breidt u de animatie uit tot aan frame 32.

Stap 43:

Stel de karikatuur op frame 17 en frame 25. Maak keyframes bij frame 33, kopieer vervolgens de frames van frame 1 en plak ze daar. We willen dat de animatie wordt gelust en na frame 32 moet frame 1 weer terugkomen. Dat is het. Je keypose-animatie is voltooid. Zie het zelf door op "Ctrl + Enter" te drukken.

Stap 44:

De animatie is helemaal niet soepel. We hebben een vlotte animatie nodig. Dus voer opnieuw elk hoofdsymbool in waar je keyframes hebt neergezet en ze hebt geanimeerd. Sleep-selecteer alle frames. Open het tabblad Eigenschappen en wijzig het Tween-type van "none" in "motion". Alle frames worden lichtpaars en pijlen wijzen van keyframe naar keyframe. Doe dit voor alle onderdelen.

Stap 45:

Druk op "Ctrl + Enter" en controleer het voorbeeld. Nu kun je zien dat de karikatuur soepel loopt, maar er zijn veel fouten. Gewrichten volgen elkaar niet, dus elk bewegend onderdeel zweeft onafhankelijk van elkaar. Let wel, ze zijn niet ver weg van hun juiste posities. Nu moeten we die dingen stap voor stap oplossen.

Stap 46:

Laten we dat uitzoeken. Dit proces wordt "tussenin" genoemd. Plaats een sleutelframe tussen twee hoofdframes, meer speciaal wanneer de delen te ver van elkaar verwijderd zijn. Soms hoeft u nooit tussendoor te gebruiken, omdat de onderdelen precies zo bewegen als u wilt. In sommige gevallen moet u bijna elk frame aanpassen.

Laten we de tween van het rechterbeen controleren. Bij frame 5 zijn de delen echt ver van elkaar verwijderd. Druk op "F6" en selecteer alle kaders. Blijf nu tweaken, totdat de pose is zoals het hoort. Zorg ervoor dat u overlappende voegen mooi hebt overlapt, zodat de naakte randen niet zichtbaar zijn.

Stap 47:

Scrub door de animatie. Er zijn nog steeds veel frames waar de randen uit de verbinding komen. Maak keyframes, tweak en repareer die. Doe dit voor elk onderdeel. Dit kan enige tijd duren en er is geduld voor nodig. Als het klaar is, kunt u een voorbeeld van de animatie bekijken.

Stap 48:

Nu zijn de hand- en beenbewegingen correct, maar het lichaam lijkt stijf. Je moet ook wat beweging aan het lichaam geven en hetzelfde zou op de handen van toepassing moeten zijn. Anders zal de schouder niet op zijn plaats zitten. Selecteer lagen "lichaam n gezicht" en "rechterhand", kopieer frames, maak een nieuw symbool "lichaamsbeweging" en plak die in die. Plaats nu het resultaat in plaats van de twee lagen, zoals je vele malen eerder hebt gedaan. We sluiten "linkerhand" uit, omdat die laag zelden zichtbaar is.

Stap 49:

Maak hoofdframes op dezelfde frames als de keyposes. Plaats het draaipunt van dit nieuwe symbool op dezelfde plaats als voor de torso. Voordat je gaat animeren, onthoud dat wanneer we onze benen naar voren strekken, onze torso ook naar voren leunt. Wanneer we één been uit de grond nemen, buigt ons lichaam naar achteren. Dit is hoe we balans tijdens het lopen.

Stap 50:

Stel de romp op door het symbool te draaien en voeg bewegingstween toe aan de frames. Een extra tip hier: u kunt gebruik maken van het tabblad Transformeren om de rotatiewaarde te bekijken, in te stellen en te wijzigen.

Stap 51:

Controleer zo nodig de preview- en tweak-waarden.

Stap 52:

Om de animatie verder te verfijnen, trekt u de romp iets naar beneden en beweegt u deze een beetje omhoog in andere poses (positie omhoog). Dit zal meer dynamiek toevoegen aan de wandeling. Controleer het voorbeeld; je loopbare animatie is klaar.

Stap 53:

Selecteer nu alle karikatielagen, maak ze een enkel symbool en daarom ook een enkele laag. Noem ze "Mr. Smart".

Stap 54:

Verberg de "roadline" -laag en maak er een gids van. Ontwerp een achtergrond om de scène aantrekkelijker te maken; Ik heb een eenvoudige achtergrond gemaakt in mijn animatiebestand.

Stap 55:

Op dit moment loopt Mr. Smart, maar hij beweegt niet van de ene plaats naar de andere. Zelfs dat kan ook gemakkelijk worden gedaan. Bij het eerste frame, verplaats en plaats de karikatuur naar links, buiten het podium. Verleng de animatieduur tot frame 96. Druk bij frame 96 op "F6" en maak er een hoofdframe van. Verplaats de karikatuur op dit frame horizontaal naar de rechterkant, opnieuw van het podium. Voeg beweging-tween toe aan de laag.

Stap 56:

Bekijk de preview van de uiteindelijke animatie!

Bedankt voor het volgen van deze tutorial. Ik hoop dat je iets waardevols hebt geleerd!