Animate en kontinuerlig Quad Run Cycle Med Flash
3
Del
4
Del
Dette Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
To ganger i måneden, vi besøker noen av våre lesere favoritt innlegg fra hele historien Activetuts +. Denne opplæringen ble første gang utgitt i juni 2009.
I denne opplæringen vil vi lage en quad løp syklus. Animasjonen vil bli laget med enkle linjer. Underveis vil vi dekke litt av arbeidsflyt og animasjon teori, så nær slutten vi bruker Motion Tween og Actionscript for å flytte dyr over skjermen.
Final Animasjon Forhåndsvisning
La oss ta en titt på den endelige animasjonen vi tar sikte på:
Trinn 1: Decision Tid
Først bestemme hva du vil animere (ettersom forskjellige dyr beveger seg på forskjellige måter). Jeg kommer til å animere en generisk feline, slik at det vil bevege seg i en lignende til en løve, gepard, tiger, etc.
Trinn 2: Referanser
jeg ofte studere . referanser hvis jeg ikke vet hvordan motivet beveger
Her er noen nettsteder /bøker som jeg brukte:
BBC Motion Gallery
YouTube Anmeldelser
Getty Images
Dyr i Motion
Hvordan Draw Animals
Trinn 3: Anatomy
Det er nyttig å forstå . anatomien på dyret, på denne måten kan du bedre visualisere hva som faktisk beveger seg under huden
Her er noen bøker om dyr anatomi:
Animal Anatomy for Artists: The Elementer av Form
Et Atlas of Animal Anatomy for Artists
Hvordan Draw Animals
Trinn 4: Tegning
Når du 've brukt nok tid på å analysere og studere referanser, er det på tide å gjøre noen tegning. Jeg foretrekker normalt å gjøre litt planlegging på papir først, selv om noen mennesker foretrekker å gå rett inn på datamaskinen og begynne å animere. Det spiller egentlig ingen rolle hvilken metode du velger, bare så lenge det fungerer for deg.
Forresten, trenger du ikke å være en stor artist å tegne. Enkle linjer er god nok, så lenge du kan forstå dine egne tegninger. Vanligvis vil jeg trekke viktige positurer som jeg ønsker å se i animasjonen
Trinn 5:. Flash
La oss komme i gang i Flash ...
< ol>
Opprett en ny FLA dokument.
Angi dimensjonene til 560 x 400 piksler.
Sett scenen farge til svart siden jeg skal tegne i hvitt.
Endre dimensjonene og farger som passer dine behov
Trinn 6:. Layer It Up
Lag følgende lag:
handlinger
dyr
bakken
Så låse "handlinger" lag siden det vil bare inneholde Actionscript-kode.
Trinn 7: Frames Per Second (fps)
fps for web animasjon varierer ganske mye. Hele veien fra 4 ~ 48fps. Jeg skal animere på 24fps
Her er noen andre standarder ...
PAL -. 25fps
NTSC - 30fps
Film - 24fps
For å endre fps, bare endre den i bunnen av tidslinjen, eller gå til Endre > . Dokument
Trinn 8: Frame by Frame
Det er mange måter å animere i Flash, men jeg skal animere i en mer tradisjonell stil hvor jeg skal trekke hver positur av animasjonen. Jeg skal være med "Pencil Tool" å tegne. For "Pencil Mode", har jeg valgt "Smooth" -innstillingen som betyr Flash vil jevne ut linjene som jeg tegner
Trinn 9:. Ground
Velg først "bakken" lag og trekke en rett linje til å representere bakken. Deretter låser laget. Bakken har en hvit (#FFFFFF) slag farge og et slag vekt på 3.
Trinn 10: Poses
Gå inn i "dyret" laget og begynne å tegne de viktige positurer . Vanligvis er de kontaktene og ekstreme positurer. For dyret stiller jeg har brukt et slag vekt på 5. Nå, hvis du hadde planlagt dette på forhånd, kan du bare tegne det hele i Flash. Hvis du vil, kan du også skanne inn dine tegninger og spore over dem
Merk:.. Det kan være lurt å se en trinn 15 ~ 21 før du begynner å animere
Her er positurer I 've trukket så langt.
For å utvide mengden av rammer for den "bakken" lag, høyreklikker du på fjerde ramme og velg "Sett Frame". Dette fungerer selv om laget er "låst".
Den lille svarte prikken på hver ramme indikerer en "Keyframe" i Flash. For å opprette en keyframe, høyreklikke på en ramme og velg "Sett inn Keyframe" eller gå til Sett > Tidslinje > . Keyframe
Trinn 11: Bearbeiding Pose
Det er svært sannsynlig at du får lyst til å gjøre endringer etter å tegne en positur. Bare velg "Selection Tool" da, og bevege musa nær linjen du ønsker å endre. Når ikonet nederst til høyre på musen endres til en "kurve", klikk og dra linjen
Trinn 12:. Timing
Når du er fornøyd med din viktigste positurer, kan du begynne å leke seg med timingen. Hvis du tester filmen nå, vil det være for fort. Sett noen rammer mellom positurer og leke seg med timingen. For å legge til en ramme, høyreklikker du en ramme og velg "Sett Frame" eller gå til Sett > Tidslinje > . Frame
Trinn 13: Flere Poses
La oss nå legge til flere positurer i mellom
Merk:. Føl deg fri til å justere timing for å få animasjonen . arbeider som helhet
Trinn 14: Even More Poses
Vi kan selv gjøre det mykere ved å legge til flere inbetweens
Trinn 15:. Onion Skin
Når animere, finner jeg det nyttig å bruke "Onion Skin" og "Onion skin Outlines". Disse verktøyene kan vise innholdet i en rekke rammer, før og etter gjeldende ramme. Du kan også øke eller redusere antall bilder ved å dra sirkler på hver ende
Trinn 16:. Tips
Noen av dere kan finne animasjon lett, mens andre kanskje ikke. Jeg har derfor gitt noen tips som forhåpentligvis vil hjelpe deg i prosessen Vanligvis animasjons sykluser bevege seg med konstant hastighet. Dermed når animere bena, sørg for at forskjellen mellom avstanden på hver fot (mellom frames) er omtrent den samme. Hvis ikke, kan føttene ser ut som de sklir La oss nå gå animasjon syklus over skjermen. Men først må vi konvertere rammene til en "Movie Clip". Konvertere bildene på hovedtidslinjen til et filmklipp: Du skal nå være på "dyret løp syklus" tidslinje. Høyreklikk det første bildet og velg "Lim Frames". Nå gå tilbake til hovedtidslinjen ved å klikke på scenenavnet (under tidslinjen). Deretter fjerne alle rammer på "dyret" lag og dra "dyret løp syklus" fra biblioteket på scenen Ved hjelp av Motion Tween vi kan flytte dyret over scenen så det virker som det kjører over skjermen. Avstanden du ønsker å flytte for hver ramme bør være lik differansen mellom posisjonen for den plantet foten (mellom frames). Vi vil referere til "forskjell" som "dX". Her er en formel som finner "antall frames" gitt at du kjenner de første og siste posisjonene numberOfFrames = (finalXPosition - initialXPosition). ÷ dX Her er et eksempel: Et dyr som har en utgangsstilling ved -50, et dX-verdi på 11,5 og en sluttstilling ved 610. Således kan mengden av rammer mellom sin utgangsstilling og sluttstilling er ... Slik oppretter Motion Tween: < . br> Merk: Den faktiske endelige rammen er 58 siden den første rammen er 1 - antall bilder mellom den første og siste bildet er 57. Resultat: Det er lettere å flytte dyret ved hjelp av Action siden du ikke trenger å bekymre deg for formelen, og alt du trenger å vite er DX. Først må du ha en forekomst av "dyret løp syklus" på scenen. Hvis ikke, gå til biblioteket panelet og dra ut. Gi den en forekomst navnet "animal_mc", og deretter flytte dyret utenfor skjermen til venstre. Deretter velger du ramme en i "Handling" panel og legge til følgende kode: AS3: AS2: Resultat: La oss si at du ville dyret til å flytte den andre veien (rett til venstre). Velg "animal_mc" og gå til Endre > Transform > Vend vannrett Her er den nye Actionscript-kode: AS3: AS2: Resultat: Takk for at du leser denne opplæringen, og jeg håper du har det gøy animere Anmeldelser
Volum:.
En av de viktigste tingene å være klar over når animere er at volumet bør forbli det samme. Dyret kan squash og strekke så lenge volumet opprettholdes
Force og VEKT:.
Når animere, prøver alltid å føle hvor kraften og vekten er på reise. Tenk på hvor vekten er på. Hvor kommer det fra? Hvor er det du reiser til
Opp og ned:?
Fra studere referanser, jeg har lagt merke til at jo raskere et dyr beveger seg, jo mindre up-and-ned bevegelse den har. Det samme gjelder halen
Planting føtter:.
En annen ting jeg la merke til fra referansen er foten mønster. Føttene vanligvis plante i rundskriv rekkefølge. For eksempel, la oss si den første foten som planter på bakken er foran til venstre (1). Så disse vil være de to mulige bestillinger ... CCW
front-venstre fot
back-venstre fot
bakre høyre fot
foran høyre fot
CW
front-venstre fot
foran høyre fot
bakre høyre foten
back-venstre fot
Trinn 17: Skyve Feet
Trinn 18:. Konvertering inn filmklipp
Velg alle rammer fra "dyret" lag
Høyreklikk og velg "Kopier Frames"
Gå til Sett > New Symbol ...
Name it "dyret løp syklus" og sørge for at den typen er "Movie Clip".
Trinn 19:. Motion Tween
= (610--50) ÷ 11,5
= 660 /11,5
= 57 frames (avrundet til nærmeste heltall)
Velg "dyret" lag
Høyreklikk det første bildet og velg > "Create Motion Tween".
Trinn 20: Action
Var dX: Number = 11,5; //Legger en enterframe til «animal_mc". animal_mc.addEventListener (Event.ENTER_FRAME, moveAnimal, falsk, 0, true); //enterframe funksjon for "animal_mc" .function moveAnimal (evt: Hendelses): void {//Dyrets x posisjoner øker med DX. evt.target.x + = dX; //Flytt dyret tilbake til venstre når den beveger seg utenfor skjermen. if (evt.target.x & gt; stage.stageWidth + evt.target.width) {evt.target.x = -evt.target.width; }}
Var dX: Number = 11,5; //Legger en enterframe til «animal_mc" .animal_mc.onEnterFrame = function () {//Dyrets x posisjoner øker med dX . this._x + = dX; //Flytt dyret tilbake til venstre når den beveger seg utenfor skjermen. if (this._x & gt; Stage.width + this._width) {this._x = -this._width; }}
Trinn 21: The Other Direction
Var dX: Number = 11,5; //Legger en enterframe til «animal_mc".. animal_mc.addEventListener (Event.ENTER_FRAME, moveAnimal, falsk, 0, true); //enterframe funksjon for "animal_mc" .function moveAnimal (evt: Hendelses): void {//Dyrets x stilling reduseres med DX. evt.target.x - = dX; //Flytt dyret tilbake til høyre når den beveger seg utenfor skjermen. if (evt.target.x < -evt.target.width) {evt.target.x = stage.stageWidth + evt.target.width; }}
Var dX: Number = 11,5; //Legger en enterframe til «animal_mc" .animal_mc.onEnterFrame = function () {//Dyrets x stilling reduseres med dX . this._x - = dX; //Flytt dyret tilbake til høyre når den beveger seg utenfor skjermen. if (this._x < -this._width) {this._x = Stage.width + this._width; }}
Final Word