Flash Tips og Best Practices for Designers: Animasjon
3
Del
3
Del

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

For designere, en stor del av Flash appell ligger i dens evne til å la brukere legge til bevegelse og interaktivitet til omtrent alt. For de fleste nye brukere, er det virkelige Wow! faktor kommer når de først finne ut hvordan man skal få ting til liv ved hjelp av Flash tidslinje og Actionscript.

I dag skal vi se på hvordan vi kan få mest mulig ut av verktøyene Flash kaster på oss for å legge til animasjon til våre symboler. Dette kan være ganske tett emne for å dekke gitt hvor mye programmet har vokst som en multimediekraftpakke siden sine tidlige dager, men jeg vil prøve og holde ting konsist og å nå frem. For mer inngående dekning, gjerne sjekke ut andre tutorials på Activetuts + og jeg er sikker på at du vil finne det du leter etter.

Selv om dette innlegget ble skrevet for Flash Professional CS5, de fleste av tipsene skal fungere helt fint i eldre versjoner. Jeg vil prøve og gjøre det til en vane å markere hvor noe er svært spesifikke for den nyeste versjonen av Flash.

Før vi kommer inn i detaljer, La oss ta et par minutter å gå over noen av sjargong vi vil referere til her. Siden de fleste Flash newbies kommer med svært lite eller ingen eksponering til begrepet bevegelige bilder, kan noen av disse begrepene være litt skremmende å få tak i. Det er best at vi dekker dem på forhånd før du stuper dypt inn de praktiske sidene av animasjon og interaktivitet i Flash.

WTH er FPS?

FPS (eller bildefrekvens), veldig enkelt, refererer til antall rammer gjengis hvert sekund. Noen bevegelige bilder - animasjon eller video - er en serie stillbilder, projiseres etter hverandre på en svært høy hastighet, forårsaker en illusjon av bevegelse. Hvis du har sett en filmrull fra den tiden da de faktisk brukte film til å skyte videoer, vil du se at det er rett og slett en stripe med en rekke stillbilder. Hvor fort filmen projektoren går gjennom dem er det som kalles FPS.

Standard FPS i tidligere versjoner av Flash var 12, som nå har blitt bumped opp til 24 i løpet av de siste par versjoner. Dette kan være fordi fordi Flash har gått fra å være en ren vektor animasjon verktøy til foretrukne avspilling av videoer på nettet. Siden videoer trenger å spille på minimum 24 fps å kjøre jevnt, må Flash beholder også å spille catch-up. Dessuten har Flash player forbedres drastisk nå, og kan gjengi mye større mengder data som trengs for å spille på høyere fps uten å ta en ytelse hit.

Shape vs Motion tween

Tatt direkte fra cel animasjon bøker, tweening (forkortelse for mellomeffekt) er den metoden som brukes til å opprette interim rammer mellom to nøkkelbilder. For eksempel, hvis jeg skulle animere en karakter hånd kommer fra det vanlige posisjon til å peke på noe, ville jeg trekke den første og siste posisjonene, og deretter trekke rammene i mellom for å simulere bevegelse. Hvor mange rammer gå mellom de to nøkkelbilder er definert av bildefrekvens på animasjonen og den tiden der du trenger bevegelse for å være ferdig. Tregere bevegelser bety mer lom rammer, og vice versa.

Flash gjør det lett for oss ved å tegne de tween rammer seg selv, i motsetning til hva du ville gjort i en tradisjonell håndtegnet animasjon. Siden CS4, er det tre distinkt forskjellige måter å tween - form, klassisk og bevegelse mellom. La oss forstå hver enkelt en bit:

Shape tween: Den mest grunnleggende type tween, selv om du sannsynligvis ikke kommer til å bruke dette for mye. Du starter med en form og forvandle det over tid. Med mindre begge former er ikke komplisert og er veldig like hverandre, er du sannsynligvis kommer til å trenge mye trening for å få dette til å fungere. Du kan legge form hint for å tvinge enkelte punkter på en form for å oppføre seg under transformasjon

Classic tween. Frem til versjon CS3, dette var den primære tweening metoden i Flash, en som var så elsket av alle som det ble hatet. Du i utgangspunktet ta et symbol og endre dets egenskaper mellom nøkkelbilder - som størrelse, plassering, fargeeffekt, etc. Siden metoden avhenger av to forskjellige stater - en på hver keyframe - redigere en animert symbol kan være ganske kjedelig oppgave. Noe så enkelt som å flytte symbolet rundt må du velge symbolet på hver keyframe og flytte den nøyaktig samme beløp

Motion tween. Den desidert største oppgraderingen til Flash animasjon evner, bringer bevegelse mellom After Effects 'mye elsket bevegelse redaktør for Flash. Den største endringen mellom den gamle og den nye metoden er at motion tween er nå objektbasert i stedet for tidslinjebasert som i den gamle metoden. Du søker tweens til symboler, med god kontroll over stort sett alle fysiske aspektet av objektet gjennom bevegelse redaktør panel. Jada, du likevel søke bevegelse på tidslinjen, men det er nå mulig å velge et symbol, flytte den, og har sin animasjon bar med seg.

Lettelser

Vi vet at når en ball dråper i den virkelige verden, er hastigheten ikke alltid det samme. Den plukker opp hastigheten som det nærmer seg bakken, og deretter spretter på omtrent samme fart og bremser ned så den når toppen der det hodet tilbake mot bakken. Når du animere objekter i Flash, vil de forandre på et jevnt tempo som standard. Hvis du har vært lurer på hvorfor animert tekst inn og ut av scenen føles flat, er dette grunnen. Med lettelser, kan du i utgangspunktet fortelle Flash for å ha bevegelse akselerere eller bremse uten å måtte justere posisjonen manuelt på hver ramme.

New Motion Tween Godhet

En av de største problemene med gamle bevegelse tween i Flash - noe jeg ikke visste før jeg så den nye - var at animasjonen var overveiende tidslinje-basert. Du opprettet en keyframe på et lag som er lagt inn et symbol på den, lagt til en annen keyframe noen rammer bort og modifisert symbolet. I hovedsak ble du arbeider med to forskjellige forekomster av et symbol. Flytte man gjorde ingen reell annerledes til forekomsten i neste keyframe. Jada, vi alle gikk gjennom helvete å prøve å omplassere elementer etter animere dem, men det er bare hvordan Flash spilt sine kort.

Så med CS4 kom bevegelse redaktør, og ting forandret for alltid. Dessverre er det bevegelse redaktør ikke akkurat best forstått delen av Flash selv etter ett og et halvt versjon trinn. La meg ta en liten stund da, og diskutere noen interessante ting om hvordan denne tingen fungerer, og hvordan du kan gjøre den jobben for deg.

To måter å animere

Du kan nå redigere dine symboler i to forskjellige måter å sette i gang en animasjon - fra innsiden av bevegelse editor, eller direkte på scenen som i gamle dager. Hver fysisk parameter i det valgte symbolet - som x &Co. y-koordinater, skala, fargeeffekter, filtre, etc. - er nå oppført som en rad i bevegelse editor. Bare flytte til et punkt i tidslinjen og endre parameter, og aa keyframe genereres for denne parameteren. Hvis du liker den tradisjonelle, visuell måte å animere ting, bare gå til en ramme og redigere symbolet på scenen.

Hva er viktig å forstå er at nøkkelbilder er nå lagt per parameter, så hvis du bare flyttet eksempel på scenen, vil det være et nøkkelbilde bare for X og /eller Y-koordinater i bevegelse editor. Dette gir en utrolig bredt spekter av kontroll over animasjon - noe som var umulig å få til i eldre versjoner av Flash

. Merk: Du trenger ikke å eksplisitt lage en keyframe lenger. Bare flytte til en ramme, endre noe om forekomsten og en keyframe blir automatisk generert for denne parameteren alene. For mange mennesker, er dette litt av en kulturell endring; noe de synes er veldig vanskelig å venne seg til. Selv om du fortsatt kan manuelt opprette en keyframe, har jeg funnet ut at unødvendig for det meste.

Finer kontroll over lettelser

I stedet for én input-feltet og en Rediger-knappen, du nå får en hel rad dedikert til lettelser i den nye bevegelses redaktør. En stiplet linje som strekker seg over alle rammene til en tween gjør det super-lett å se hvordan lettelser fungerer. De inkluderte forhåndsinnstillinger er en god måte å komme i gang. En buet linje betyr at hastigheten for animasjonen er gradvis økende eller minkende. En rett linje betyr jevn, selv tempo. Du kan lage så mange letter som du vil, og tildele ulike de til hver parameter. Husk at lettelser må eksplisitt tilordnet hvert sett av parametere. Med mindre du gjør det, vil animasjonen fortsette å være det samme flate bevegelse.

Når du har fått taket på hvordan lettelser fungerer med forhåndsinnstillingene, er det på tide å komme seg eventyrlystne og prøve 'Custom' valget . Hva du får her, er en rød heltrukken linje i stedet for den stiplede en, noe som indikerer at du kan redigere den. Gå til en ramme og lage en keyframe i "Custom" lettelser rad for å legge til en Bezier node i tidslinjen. Du kan deretter bruke node håndterer å redigere Curver som du ønsker

Quick Tips:. Hvis du ikke er så sikker på om hvordan lettelser gjerninger, men ønsker å umiddelbart ta animasjoner opp flere hakk, kan du bruke denne regelen som Jeg vanligvis gå med meg selv - vises elementer (noe som kommer inn i rammen eller på scenen) fungerer best med en positiv 'Simple (Medium)' lettelser på '50', mens forsvinner elementene fungerer best med det samme lettelser på '-50'. Dette gjør den totale animasjon føles mye glattere og konsekvent. Som regel bruker jeg lettelser på nesten alt som beveger seg i mine animasjoner.

Motion banen redigere

Når du flytter et objekt over tid ved hjelp av motion tween, vises en linje fra symbol registreringspunkt som viser start- og sluttpunktet av bevegelsen samt hver av rammene. En tilsynelatende skjult funksjon her er det faktum at denne banen er som alle andre linje i Flash. Du kan bruke valg og penn verktøy for å endre det slik du ville gjort en annen bane. Click & dra hvor som helst, men de ender av banen (selv om det ikke er valgt) for å konvertere den til en kurve. Du kan deretter bruke sub-utvalg verktøy for å redigere Bezier håndtak på nodene for bedre kontroll. Hver gang du legger til en keyframe i bevegelsesbane, blir en ny Bezier kurve lagt til banen, som du deretter kan redigere som du trenger det

Kort &.; lett pseudo-3D-animasjon

Hvis 3D i Flash er det du har alltid vært ute etter, men har ikke hatt hjerte til å spille rundt 3D-rammeverk som papervision, her er en rask og skitne måte å fake 3D bevegelse i Flash. Du kan bruke den nye 3D-rotasjon verktøy sammen med bevegelse editor for å gjøre objekter rotere i 3 dimensjoner for det ekstra jazz.

3D rotasjon ikke funksjonen i bevegelse editor med mindre du faktisk bruke den på et objekt. For å gjøre dette, velger du 3D-rotasjon Tool velger du objektet, og klikk & drar en av de tre fargede linjer som vises. Hver av de tre linjene representerer en akse - grønn er Y, er rød X og blått er Z. X & Y er vanligvis de som vil gjøre objektet ser ut som det roterer i 3D-rom. Få det til posisjonen du ønsker, kan du gå til slutten av motion tween og flytte rotere det igjen. Legg en "Bounce" letthet for litt ekstra krydder.

Omvendt animasjonen for mer forutsigbare resultater

Min typisk animasjon arbeidsflyt er å skape en sammensatt av de viktigste rammene i en animasjon, og deretter legge bevegelse til hvert objekt som er nødvendig. For alt som trenger å gli inn fra utenfor scenen til venstre, dette betyr at jeg må flytte objektet ut på det første bildet, redusere alpha, gå til den siste rammen, flytte den tilbake til der jeg ønsket og øke alfa til 100%. Dette er hvordan det har alltid vært veldig, så jeg aldri plaget med det så mye til en fin morgen da jeg oppdaget " reversere nøkkel ". Ideen er dum enkelt egentlig, men verdt utallige timer hvis du animere ting inn og ut av scenen hver dag.

Slik fungerer det. Når du har din kompositt på plass, bare animere det motsatte av den effekten du trenger. Start fra den endelige plasseringen av objektet, og animere det går ut mot venstre. Inkluderer alt du trenger for å lage animasjonen perfekt - alpha, uskarphet, et al. Deretter kan du enkelt høyreklikke på tween og klikk "reverse nøkkelbilder", og voila! Du har din lysbilde fra venstre animasjon akkurat som du trenger det å være

Kopier &.; lim i bevegelse

Kanskje den største tidsbesparende for meg siden jeg begynte å bruke motion redaktør i Flash, har vært evnen til å anvende bevegelse til et objekt, kopiere den og lime den for alle andre liknende varer. Dette gjør mest fornuftig når du har en haug av objekter som beveger seg i eller ut på en lignende måte - en punktliste, for eksempel. Når du har brukt en tween til en av listeelementene (forutsatt at hver og en er en enkelt MovieClip på sitt eget lag, selvfølgelig), høyreklikker du på tween og velg "Copy Motion". Deretter velger du bare de første nøkkelbildene av alle de andre listeelementer, høyreklikk og velg "Lim Motion". Du kan deretter endre hver enkelt individuelt ved behov

Diverse Animation Tips

Her er noen raske tips for å spare tid, energi og noen rammer når du arbeider med animasjon i Flash:.


Hvis du har en haug med movieclips på et lag som du ønsker å animere individuelt, er den første tingen å gjøre å plassere dem på separate lag. Neste gang du trenger å gjøre dette, velger du dem alle og trykk Shift + Ctrl + D. Flash vil gjøre det skitne arbeidet med å plassere dem alle på enkelte lag og vil selv navngi lagene å matche hver MovieClip.