Opprette Realistisk 3D-animasjon i Flash CS4

Creating Realistisk 3D-animasjon i Flash CS4
en
Del
en
Del

Dette Cyber ​​mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

Flash CS4 kom med noen store endringer og funksjoner som fortsatt forbløffe oss selv etter den nyere versjonen av Flash CS5. Flash har nå muligheten til å arbeide med objekter i 3D-rom direkte i arbeidsmiljøet.


Selv om det fortsatt er en grunnleggende funksjon i forhold til hva du kan gjøre med 3D i Action klasser, åpner dette verktøyet døren til designere og animatører som ikke vet mye om kode. Det gir dem mulighet til å begynne å flytte sine objekter i 3D-rom uten behov for å bruke gamle metoder (for eksempel importere 3D-animasjon i sekvensbilder etc.)

Sammen med 3D-verktøy, har Flash endret måten vi forstår bevegelse tweening ved å legge den nye motion tweening stil, som er mer som animasjon auto-nøkkelen i After Effects. Sammen med motion tweening endringer, kommer Flash med Motion Editor. Dette panelet har en rekke funksjoner og muligheter som gir animatør mer kontroll over animasjon i Flash bruker animasjon kurver.

The Motion Editor-panelet ikke bare forbedrer animasjon ved å gi flere alternativer gjennom kurver kontroll, det gir også kontroll over animasjonen lettelser, utlån en mer realistisk utseende. Den lettelser konseptet er kjent i mange animasjon programmer som After Effects, men det var tidligere så grunnleggende i Flash og begrenset til å endre verdien lettelser 100 til -100. De nyere lettelser funksjonene gir deg mer evne til å kontrollere animasjon lettelser som vi vil se i trinnene nedenfor.

I denne opplæringen, vil vi flette 3D og lettelser funksjoner ved å skape 3D-animasjon i Flash og også bruk av . lettelser kurver

Endelig resultat Forhåndsvisning

La oss ta en titt på det endelige resultatet vi skal jobbe mot:

Den første delen i vår tutorial er å bygge tegneserie scene for et rom med en dør

Trinn 1:.. Nytt dokument

Åpne en ny Flash-dokument med dimensjonene 600px X 450px og begynne å tegne omrisset av rommet vist i figuren nedenfor

Legg merke til at 3D-verktøyet er bare tilgjengelig når du har dokumentet publisere innstillinger for Actionscript 3 og Flash Player 10 eller nyere. I tillegg kan det brukes bare på filmklipp symboler. Du bør sørge for at din File Publish Settings (finnes i Fil> Publish Settings
, overraskende) er satt til Action Script 3 og Flash Player 10 eller høyere

Trinn 2:. Door

Skjær døren området og plassere den på et nytt lag for å kunne kontrollere det ved hjelp av 3D-verktøy

Trinn 3:. Detaljer

Nå, la oss legge til noen detaljer til bakgrunnen for å gi den en ekte tegneserie utseende. Vi vil også legge til noen skygger og teksturer til gulvet og dør

Trinn 4:. "Dør"

Konverter døren symbol til et filmklipp og gi den navnet " Dør ’ .

Trinn 5: The 3D Navigation Asset

3D navigasjon eiendel omfatter fire sykluser, dra over hver syklus lar deg rotere symbol i en av retningene som følgende:
< li> Den røde syklus lar deg rotere symbolet på X-aksen

Den grønne syklus lar deg rotere symbolet på Y-aksen

Den blå syklus lar deg rotere symbol på Z-aksen

Dra over oransje syklusen lar deg rotere objektet i noen av disse retningene. Mens det gir fri rotasjon, betyr det ikke gi nøyaktige rotasjonsverdier.

Mens døren symbol er valgt, velger du 3D-verktøyet. De 3D aktiva sykluser vises i midten av filmklipp symbol

Trinn 6:. Point of Rotation

Klikk på midtpunktet på 3D-sykluser og dra navigasjon ressurs til midten til høyre av døren for å gjøre det midtpunktet hvor døren roterer rundt. Den endelige utseendet for bakgrunnen skal være som følger

Trinn 7:. Tidslinje

I punktene ovenfor, utarbeidet vi tegneserie bakgrunnen for 3D-animasjon gjennom bevegelse tweening. I denne animasjonen, vil vi animere døren for å åpne og lukke bruker 3D-verktøyet. Dra tidslinjen indikatoren til den første rammen i tidslinjepanelet for å starte animasjonen

Trinn 8:. Velg

Klikk på 3D-roteringsverktøyet, og klikk på døren symbol. Legg merke til at 3D-navigasjon eiendelen vises på høyre side av objektet

Trinn 9:. Open Sesame

Klikk over den grønne syklus og dra for å åpne døren i retning utenfor rommet som vist i figuren nedenfor

Trinn 10:. Roter

Flytt tidslinjen indikatoren å ramme 50. Og bruke 3D-roteringsverktøyet for å rotere døren til den andre siden av rommet som vist i figuren nedenfor.

Vi har nå laget 3D-animasjon for døren på Flash scenen. Deretter vil vi bruke bevegelses editor for å lage mer realistiske animasjonseffekter ved bruk av lettelsene kurvene i Motion Editor panel. Mens denne forbedrede lettelser funksjonen ble lagt til Flash CS4 og nyere utgivelser, eldre versjoner av Flash hadde en forenklet funksjon lettelser gjennom lettelser verdi i egenskapsvinduet. Du kan fortsatt finne denne verdien når du klikker hvor som helst i bevegelse tweening, men denne metoden aldri ga mange andre enn lettelser inn og ut alternativer.

The Motion Editor-panelet består av animasjon kurver som styrer objektegenskapene gjennom animasjon løpet tidsrammen. Hver kurve representerer en spesiell egenskap for objektet, og er ansvarlig for den endring over tid, og nivået av endringen. For eksempel representerer X kurve animasjonen av objektet på X-aksen. Denne verdien blir aktiv når du oppretter en bevegelse tweening forbundet med det.

De lettelser kurvene i Motion panelet er lik resten av bevegelse redaktør animasjon kurver som de gir deg mer evne til å kontrollere animasjoner 'realistisk motion.

Det er to hovedmetoder for å skape lettelser kurve. Den første er gjennom den enkle forhåndsinnstillinger på rullegardinmenyen som inneholder klare lettelser alternativer. Den andre metoden er å opprette egendefinerte lettelser kurve. I denne opplæringen vil vi prøve begge metodene.

Før vi går videre, her er en kort oversikt over de lettelser kurvene i Motion panel.

I lettelser del av Motion Editor-panelet, kan du legge til /fjerne og redigere lettelser kurvene ved å velge ønsket kurve. Før vi se hvordan du søker lettelser effekten på 3D-animasjon, vil vi kort se hvordan lettelser kurven arbeider i Motion Editor-panelet.

Lettelsene kurve er en omfattende metode for å kontrollere hvordan animasjonen akselererer gjennom motion tweening å skape et mer realistisk animasjon; Det viser akselerasjon eller retardasjon verdien av animasjon gjennom tiden.

The Motion Editor-panelet gir deg muligheten til å skape mange lettelser kurver og tildele forskjellige kurver til hver bevegelse eiendom og bruke ulike easings til hver funksjon. I de følgende trinnene, vil vi begynne med å påføre en lettelser forhåndsinnstilt til døråpningen animasjon

Trinn 11:. Velg

Velg den filmklipp eller klikk hvor som helst på motion tweening, gå til Motion Editor panel og naviger til Hjelpemiddel delen

Trinn 12:. Legg Brukervennlighet

Klikk på plussikonet i Hjelpemiddel delen for å legge letthet fra rullegardin lettelser forhåndsinnstillinger. Velg Spring lettelser

Trinn 13:. Y Curve

Gå til Rotation Y kurve som viser animasjonen av døren. I Lettelser nedtrekkslisten velger Spring. Trykk Ctrl + Enter for å teste animasjonen.

Du vil merke at døren animasjon endret fra en enkel animasjon av to nøkkelbilder til en kompleks animasjon med våren effekt. Du kan også legge til andre lettelser forhåndsinnstillinger og prøve dem for å se hvordan det påvirker døren animasjon. Animasjonen skal være som følgende:

I de følgende trinnene, vil vi lage en egendefinert lettelser kurve og bruke den til døråpningen animasjon. Vi vil ha en nærmere titt på hvordan kurve fungerer og få tak i hvordan jobbe med det

Trinn 14:. Fjern lettelser

Først, la oss fjerne den forrige lettelser enten ved velge Nei Brukervennlighet fra lettelser nedtrekkslisten eller klikke på minus-ikonet på lettelser delen og velge lettelser du ønsker å fjerne. I dette eksemplet vil vi fjerne Spring lettelser

Trinn 15:. Custom lettelser

Klikk på pluss-ikonet ved siden av Hjelpemiddel seksjonen og velg Tilpass fra nedtrekkslisten. Dette vil skape en ny tilpasset lettelser kurve med en grønn kurve å indikere at det er redigerbar. Hvis du oppretter ekstra tilpasset lettelser kurver, vil hver kurve har en unik farge assosiert med det

Trinn 16:. Håndterer

Det er utrolig lett kurve fungerer på samme måte tegning stier. Du kan lage punkter på det; disse punktene representerer nøkkelbildene eller de punktene som tilsier endringer i lettelser animasjon. Hvert punkt har to håndtakene for å endre hvordan høyre og venstre deler av kurven utseende. Nå vil vi lage punkter på lettelser kurve som vil påvirke døren animasjon:

Høyreklikk på lettelser kurven og lage keyframes på rammer 10, 20, 30 og 40

Trinn 17: 0 - 100

å lette kurve varierer mellom null og 100. Når kurven beveger seg mot null, animasjons beveger seg mot den første ramme og å bevege kurven til 100 verdi betyr den beveger seg til enden av animasjon. Vær også oppmerksom på at hard slip kurve betyr høyere hastighet akselerasjon og treg slip betyr langsom animasjonen akselerasjon.

Vi skal redigere punktene 'posisjon og kurve å påvirke animasjonen akselerasjon. Velg det første punktet og flytte den til lettelser verdi 100. Dette betyr at animasjonen vil nå sin ende på dette punktet og det harde slip betyr at animasjonen vil akselerere fort

Trinn 18:. Points
< p> Flytt andre punktet til verdien null, det tredje punktet til verdi 50 og fjerde punkt å verd 50.

Trinn 19: Smooooth

Bruk punkt handlers på de to siste punktene for å skape en jevn buet slip for å gjøre døren animere langsom ved slutten av animasjonen. Den endelige lettelser kurven skulle gjerne figuren under:

Trinn 20: Test

Trykk Ctrl + Enter for å teste animasjonen og se hvordan den nye lettelser kurve påvirker døren animasjon. Den endelige animasjon for tilpassede lettelser bør være som følger:

Konklusjon

Dette er slutten av opplæringen. Det forsøkte å hjelpe deg å forstå hvordan du bruker Flash 3D-verktøy for å lage animasjon i 3D-rom og anvende omfattende lettelser funksjoner i Motion panel gjennom lettelser kurver.

Forståelse Lettelser kurver kan hjelpe deg å lage komplekse, realistisk animasjon . mer enkelt og effektivt ved å bruke lettelser kurver til animasjon i stedet for å lage mange keyframes i bevegelse tweening

Du vil også finne denne videoen opplæringen av Tom Green nyttig for å forstå mer om Motion Editor i Flash: Flash CS4 Motion Editor.