Share
To ganger i måneden besøker vi noen av våre leseres favorittinnlegg fra hele historien til Activetuts +. Denne opplæringen ble først publisert i juni 2009.
I denne opplæringen lager vi en quad-run-syklus. Animasjonen vil bli opprettet ved hjelp av enkle linjer. Underveis vil vi dekke litt arbeidsflyt og animasjonsteori, så i slutten bruker vi Motion Tween og ActionScript for å flytte dyret over skjermen..
La oss ta en titt på den siste animasjonen vi satser på:
Først avgjøre hva du vil animere (siden forskjellige dyr beveger seg på forskjellige måter). Jeg kommer til å animere en generisk feline, så det kommer til å bevege seg i en lion, jakt, tiger osv..
Jeg studerer ofte referanser hvis jeg ikke vet hvordan motivet beveger seg.
Her er noen nettsteder / bøker som jeg brukte:
Det er nyttig å forstå dyrets anatomi, slik at du bedre kan visualisere det som faktisk beveger seg under huden.
Her er noen bøker om dyranatomi:
Når du har brukt nok tid til å analysere og studere referansene, er det på tide å gjøre noen tegninger. Jeg foretrekker vanligvis å gjøre litt planlegging på papir først, selv om noen foretrekker å gå rett inn på datamaskinen og begynne å animere. Det spiller ingen rolle hvilken metode du velger, så lenge det fungerer for deg.
Forresten, du trenger ikke å være en flott artist å tegne. Enkle linjer er gode nok, så lenge du kan forstå dine egne tegninger. Vanligvis vil jeg tegne de viktige stillingene som jeg vil se i animasjonen.
La oss begynne i Flash ...
Endre dimensjoner og farger for å dekke dine behov.
Lag følgende lag:
Deretter låser du "handlinger" -laget siden det bare inneholder ActionScript-kode.
FPS for web animasjon varierer ganske mye. Hele veien fra 4 ~ 48fps. Jeg skal animere på 24 fps.
Her er noen andre standarder ...
For å endre fps, må du bare endre det nederst på tidslinjen, eller gå til Endre> Dokument.
Det er mange måter å animere i Flash, men jeg vil animere i en mer tradisjonell stil hvor jeg tegner hver pose av animasjonen. Jeg skal bruke "blyantverktøyet" for å tegne. For "Blyantmodus" har jeg valgt "Glatt" -innstillingen som betyr at Flash vil glatte ut linjene som jeg tegner.
Velg først "bakken" laget og tegne en rett linje for å representere bakken. Lås deretter laget. Jorden har en hvit (#FFFFFF) slagfarge og en slagvekt på 3.
Gå inn i "dyr" laget og begynn å tegne de viktige stillingene. Vanligvis er de kontakter og ekstreme poser. For dyret har jeg brukt en slagvekt på 5. Nå, hvis du hadde planlagt dette på forhånd, kan du bare redraw alt i Flash. Hvis du vil, kan du også skanne i tegningene dine og spore over dem.
Merk: Du vil kanskje se trinn 15 ~ 21 før du begynner å animere.
Her er de stillingene jeg har tegnet så langt.
For å utvide mengden rammer for "bakken" laget, høyreklikk den fjerde rammen og velg "Sett inn ramme". Dette fungerer selv om laget er "låst".
Den lille svarte prikken på hver ramme indikerer en "Keyframe" i Flash. For å lage en keyframe høyreklikker du en ramme og velger "Sett inn keyframe" eller gå til Sett inn> Tidslinje> Keyframe.
Det er høyst sannsynlig at du vil gjøre endringer etter å ha tegnet en pose. Bare velg "Utvalgsverktøy" og flytt deretter musen nær linjen du vil endre. Når ikonet nederst til høyre på musen endres til en "kurve", klikker du og drar linjen.
Når du er fornøyd med dine hovedposer, kan du begynne å leke med timingen. Hvis du tester din film nå, blir det for fort. Sett inn noen rammer mellom posene og lek med timingen. For å legge til en ramme, høyreklikk en ramme og velg "Sett inn ramme" eller gå til Sett inn> Tidslinje> Ramme.
La oss nå legge til flere ting i mellom.
Merk: Vær så snill å justere timingen for å få animasjonen til å fungere som en helhet.
Vi kan til og med gjøre det jevnere ved å legge til flere inbetweens.
Når jeg animerer, synes jeg det er nyttig å bruke "Onion Skin" og "Onion Skin Outlines". Disse verktøyene kan vise innholdet for en rekke rammer, før og etter gjeldende ramme. Du kan også øke eller redusere antall rammer ved å dra kretsene i hver ende.
Noen av dere kan finne animasjon lett mens andre ikke kan. Jeg har derfor gitt noen tips som forhåpentligvis hjelper deg i prosessen.
Vanligvis beveger animasjons sykluser konstant fart. Derfor må du sørge for at forskjellen mellom avstanden til hver fot (mellom rammene) er omtrent den samme når du beger deg på beina. Hvis ikke, kan føttene se ut som de skyver.
La oss nå flytte animasjonssyklusen over skjermen. Først må vi imidlertid konvertere rammene til en "Filmklipp". Slik konverterer du rammer på hovedtidslinjen til en filmklipp:
Du burde nå være på tidslinjen "Animal Run Cycle". Høyreklikk den første rammen og velg "Lim inn rammer".
Gå nå tilbake til hovedlinjen ved å klikke på scenenavnet (under tidslinjen). Fjern deretter alle rammene på "animal" -laget og dra "dyrkjøring" fra biblioteket til scenen.
Ved å bruke Motion Tween kan vi flytte dyret over scenen, så det ser ut som om det kjører over skjermen. Avstanden du vil flytte for hver ramme skal være lik forskjellen mellom posisjonen til den plantede foten (mellom rammene).
Vi refererer til "forskjellen" som "dX". Her er en formel som finner "antall rammer" gitt at du kjenner de første og endelige posisjonene.
numberOfFrames = (finalXPosition - initialXPosition) ÷ dX
Her er et eksempel:
Et dyr har en innledende posisjon ved -50, en dX-verdi på 11,5 og en endelig posisjon ved 610. Således er mengden rammer mellom sin opprinnelige posisjon og sluttposisjon ...
= (610 - -50) ÷ 11,5
= 660 / 11,5
= 57 rammer (avrundet til nærmeste heltall)
Slik lager du Motion Tween:
Merk: Den faktiske endelige rammen er 58 siden den innledende rammen er 1 - antall rammer mellom innledende og siste ramme er 57.
Resultat:
Det er lettere å flytte dyret ved hjelp av ActionScript, siden du ikke trenger å bekymre deg for formelen, og alt du trenger å vite er dX.
Først må du sørge for at du har en forekomst av "dyrkjøring" på scenen. Hvis ikke, gå til bibliotekspanelet og dra en ut. Gi det et forekomstnavn "animal_mc", og flytt deretter dyret av skjermen til venstre. Velg deretter ramme 1 i "Handling" -panelet og legg til følgende kode:
AS3:
var dX: tall = 11,5; // Legger til enterFrame til "animal_mc". animal_mc.addEventListener (Event.ENTER_FRAME, moveAnimal, false, 0, true); // enterFrame funksjon for "animal_mc". funksjon moveAnimal (evt: Event): void // Dyrets x posisjon øker med dX. evt.target.x + = dX; // Flytt dyret tilbake til venstre når det beveger seg av skjermen. hvis (evt.target.x> scene.stageWidth + evt.target.width) evt.target.x = -evt.target.width;
AS2:
var dX: tall = 11,5; // Legger til enterFrame til "animal_mc". animal_mc.onEnterFrame = function () // Dyrets x-posisjon øker med dX. this._x + = dX; // Flytt dyret tilbake til venstre når det beveger seg av skjermen. hvis (this._x> Stage.width + this._width) this._x = -this._width;
Resultat:
La oss si at du ville at dyret skulle bevege seg på den andre veien (høyre til venstre). Velg "animal_mc" og gå til Modify> Transform> Flip Horizontal.
Her er den nye ActionScript-koden:
AS3:
var dX: tall = 11,5; // Legger til enterFrame til "animal_mc". animal_mc.addEventListener (Event.ENTER_FRAME, moveAnimal, false, 0, true); // enterFrame funksjon for "animal_mc". funksjon moveAnimal (evt: Event): void // Dyrets x posisjon reduseres med dX. evt.target.x - = dX; // Flytt dyret tilbake til høyre når det beveger seg av skjermen. if (evt.target.x < -evt.target.width) evt.target.x = stage.stageWidth + evt.target.width;
AS2:
var dX: tall = 11,5; // Legger til enterFrame til "animal_mc". animal_mc.onEnterFrame = function () // Dyrets x-posisjon minker med dX. this._x - = dX; // Flytt dyret tilbake til høyre når det beveger seg av skjermen. if (this._x < -this._width) this._x = Stage.width + this._width;
Resultat:
Takk for at du har lest denne opplæringen, og jeg håper du har det gøy å animere!
Accentsconagua