Share
Twee keer per maand bekijken we enkele van onze favoriete lezers uit de geschiedenis van Activetuts +. Deze tutorial werd voor het eerst gepubliceerd in juni 2009.
In deze zelfstudie maken we een cyclus met vier cycli. De animatie wordt gemaakt met eenvoudige lijnen. Onderweg bespreken we een beetje werkstroom en animatietheorie, en tegen het einde gebruiken we Motion Tween en ActionScript om het dier over het scherm te bewegen.
Laten we de uiteindelijke animatie bekijken waar we naar streven:
Bepaal eerst wat je wilt animeren (aangezien verschillende dieren op verschillende manieren bewegen). Ik ga een generieke katachtige animeren, dus het beweegt in een soort zoals een leeuw, cheeta, tijger, enz..
Ik studeer vaak referenties als ik niet weet hoe het onderwerp beweegt.
Hier zijn enkele sites / boeken die ik heb gebruikt:
Het is handig om de anatomie van het dier te begrijpen, op deze manier kun je beter visualiseren wat zich onder de huid beweegt.
Hier zijn een paar boeken over dierlijke anatomie:
Als je genoeg tijd hebt besteed aan het analyseren en bestuderen van de referenties, is het tijd om te tekenen. Normaal gesproken geef ik er de voorkeur aan eerst wat papierwerk te doen, hoewel sommige mensen liever rechtstreeks naar de computer gaan en beginnen met animeren. Het maakt niet echt uit welke methode je kiest, zolang het maar voor jou werkt.
Trouwens, je hoeft geen geweldige artiest te zijn om te tekenen. Simpele lijnen zijn goed genoeg, zolang je je eigen tekeningen maar kunt begrijpen. Meestal teken ik de belangrijke poses die ik graag in de animatie zou willen zien.
Laten we aan de slag gaan in Flash ...
Verander de afmetingen en kleuren om aan uw behoeften te voldoen.
Maak de volgende lagen:
Vergrendel vervolgens de laag 'acties' omdat deze alleen ActionScript-code bevat.
De fps voor webanimatie varieert nogal. Helemaal van 4 ~ 48 fps. Ik zal animeren met 24 fps.
Hier zijn enkele andere normen ...
Als u de fps wilt wijzigen, wijzigt u deze eenvoudig onderaan de tijdlijn of gaat u naar Modify> Document.
Er zijn veel manieren om te animeren in Flash, maar ik zal animeren in een meer traditionele stijl waarbij ik elke pose van de animatie teken. Ik gebruik de "Pencil Tool" om te tekenen. Voor de "potloodmodus" heb ik de instelling "Vloeiend" geselecteerd, wat betekent dat Flash de lijnen egaliseert terwijl ik teken.
Selecteer eerst de "grondlaag" en teken een rechte lijn om de grond weer te geven. Vergrendel vervolgens de laag. De grond heeft een witte (#FFFFFF) streekkleur en een slaggewicht van 3.
Ga naar de "dierlijke" laag en begin met het tekenen van de belangrijke houdingen. Over het algemeen zijn dit de contacten en extreme houdingen. Voor de dierenposities heb ik een slaggewicht van 5 gebruikt. Nu, als je dit van tevoren had gepland, kun je het allemaal eenvoudig in Flash opnieuw tekenen. Als u wilt, kunt u uw tekeningen ook scannen en er overheen traceren.
Opmerking: misschien wilt u een stap 15 - 21 bekijken voordat u gaat animeren.
Dit zijn de houdingen die ik tot nu toe heb getrokken.
Als u het aantal frames voor de laag "ground" wilt uitbreiden, klikt u met de rechtermuisknop op het vierde frame en selecteert u "Frame invoegen". Dit werkt zelfs als de laag "vergrendeld" is.
De kleine zwarte stip op elk frame geeft een "hoofdframe" aan in Flash. Als u een hoofdframe wilt maken, klikt u met de rechtermuisknop op een kader en selecteert u 'Hoofdframe invoegen' of gaat u naar Invoegen> Tijdlijn> Hoofdframe.
Het is zeer waarschijnlijk dat je wijzigingen wilt aanbrengen nadat je een pose hebt getekend. Selecteer eenvoudig het "Selectiehulpmiddel" en beweeg de muis dicht bij de lijn die u wilt wijzigen. Wanneer het pictogram rechtsonder van de muis verandert in een "curve", klik en sleep de lijn.
Als je eenmaal tevreden bent met je belangrijkste houdingen, kun je beginnen met spelen met de timing. Als je je film nu test, zal het te snel zijn. Voeg een paar frames tussen de poses in en speel rond met de timing. Als u een frame wilt toevoegen, klikt u met de rechtermuisknop op een kader en selecteert u 'Frame invoegen' of gaat u naar 'Invoegen'> Tijdlijn> Frame.
Laten we nu meer poses toevoegen tussenin.
Opmerking: voel je vrij om de timing opnieuw in te stellen om de animatie als geheel te laten werken.
We kunnen het zelfs soepeler maken door meer tussenruimtes toe te voegen.
Tijdens het animeren, vind ik het nuttig om de "Onion Skin" en "Onion Skin Outlines" te gebruiken. Deze hulpmiddelen kunnen de inhoud voor een reeks frames weergeven, voor en na het huidige frame. U kunt ook het aantal frames verhogen of verlagen door de cirkels aan elk uiteinde te slepen.
Sommigen van jullie vinden animatie gemakkelijk, anderen niet. Ik heb daarom enkele tips gegeven die u hopelijk zullen helpen in het proces.
Over het algemeen bewegen animatiecycli met een constante snelheid. Zorg er bij het animeren van de benen voor dat het verschil tussen de afstand van elke voet (tussen de frames) ongeveer hetzelfde is. Als dat niet het geval is, zien de pootjes eruit alsof ze glijden.
Laten we nu de animatiecyclus over het scherm verplaatsen. Eerst moeten we de frames echter omzetten in een "filmclip". Om frames op de hoofdtijdlijn naar een filmclip te converteren:
Je zou nu op de tijdlijn van de "dierruncyclus" moeten staan. Klik met de rechtermuisknop op het eerste frame en selecteer "Plak frames".
Ga nu terug naar de hoofdtijdlijn door op de scènenaam te klikken (onder de tijdlijn). Wis vervolgens alle frames op de laag "dier" en sleep de cyclus "dierruns" van de bibliotheek naar het podium.
Met Motion Tween kunnen we het dier over het podium bewegen, zodat het lijkt alsof het over het scherm loopt. De afstand die u voor elk frame wilt verplaatsen, moet gelijk zijn aan het verschil tussen de positie voor de geplante voet (tussen de frames).
We zullen het "verschil" als "dX" noemen. Hier is een formule die het "aantal frames" vindt, gegeven dat u de begin- en eindposities kent.
numberOfFrames = (finalXPosition - initialXPosition) ÷ dX
Hier is een voorbeeld:
Een dier heeft een initiële positie bij -50, een dX-waarde van 11,5 en een uiteindelijke positie bij 610. Dus het aantal frames tussen de beginpositie en de uiteindelijke positie is ...
= (610 - -50) ÷ 11.5
= 660 / 11.5
= 57 frames (afgerond op het dichtstbijzijnde gehele getal)
Om Motion Tween te maken:
Opmerking: het feitelijke laatste frame is 58 omdat het eerste frame 1 is - het aantal frames tussen het begin- en eindframe is 57.
Resultaat:
Het is gemakkelijker om het dier te verplaatsen met ActionScript, omdat u zich geen zorgen hoeft te maken over de formule en het enige dat u moet weten is dX.
Zorg er eerst voor dat je een exemplaar van de "animal run cycle" op het podium hebt staan. Als dat niet het geval is, gaat u naar het bibliotheekpaneel en sleept u er een naar buiten. Geef het een instantienaam "animal_mc" en verplaats het dier vervolgens van het scherm naar links. Selecteer vervolgens frame 1 in het deelvenster "Actie" en voeg de volgende code toe:
AS3:
var dX: Number = 11.5; // Voegt een enterFrame toe aan "animal_mc". animal_mc.addEventListener (Event.ENTER_FRAME, moveAnimal, false, 0, true); // enterFrame-functie voor "animal_mc". function moveAnimal (evt: Event): void // De x-positie van het dier neemt toe met dX. evt.target.x + = dX; // Verplaats het dier terug naar links wanneer het van het scherm verdwijnt. if (evt.target.x> stage.stageWidth + evt.target.width) evt.target.x = -evt.target.width;
AS2:
var dX: Number = 11.5; // Voegt een enterFrame toe aan "animal_mc". animal_mc.onEnterFrame = function () // De x-positie van het dier neemt toe met dX. this._x + = dX; // Verplaats het dier terug naar links wanneer het van het scherm verdwijnt. if (this._x> Stage.width + this._width) this._x = -this._width;
Resultaat:
Laten we zeggen dat je wilde dat het dier de andere kant opging (van rechts naar links). Selecteer "animal_mc" en ga naar Modify> Transform> Flip Horizontal.
Hier is de nieuwe ActionScript-code:
AS3:
var dX: Number = 11.5; // Voegt een enterFrame toe aan "animal_mc". animal_mc.addEventListener (Event.ENTER_FRAME, moveAnimal, false, 0, true); // enterFrame-functie voor "animal_mc". function moveAnimal (evt: Event): void // De x-positie van het dier neemt af met dX. evt.target.x - = dX; // Verplaats het dier terug naar rechts wanneer het van het scherm verdwijnt. if (evt.target.x < -evt.target.width) evt.target.x = stage.stageWidth + evt.target.width;
AS2:
var dX: Number = 11.5; // Voegt een enterFrame toe aan "animal_mc". animal_mc.onEnterFrame = function () // De x-positie van het dier neemt af met dX. this._x - = dX; // Verplaats het dier terug naar rechts wanneer het van het scherm verdwijnt. if (this._x < -this._width) this._x = Stage.width + this._width;
Resultaat:
Bedankt voor het lezen van deze tutorial en ik hoop dat je veel plezier hebt met animeren!
Accentsconagua