Del 1 av denne opplæringen tar Flash nybegynnere gjennom de grunnleggende prinsippene bak tegning og animerende vektorer i Flash. Vi skal tegne og animere en hoppende strandball. Forkunnskaper om Flash vil selvfølgelig hjelpe, men følgende teknikker skal være tilgjengelige for alle og med de fleste programvareversjoner. Del 2 kommer snart ...
Nedenfor er den endelige animasjonen vi skal jobbe for. Ønsker du tilgang til hele Vector Source-filene og nedlastbare kopier av hver opplæring, inkludert denne? Bli med VECTORTUTS PLUS for bare 9 / måned.
La oss begynne med å åpne et nytt dokument (File> New ...). Bare et Flash-fil (ActionScript 2.0) er fint; ActionScript-versjonen er ikke relevant, da vi ikke skal bruke noen.
Bruk Egenskapsinspektøren nederst på skjermen for å skrive inn dokumentegenskapene, klikk på dimensjonsknappen. Først gi dokumentet en tittel, og gi deretter scenen (området av dokumentet ditt som vil bli synlig når det publiseres) dimensjoner på 600px ved 400px. Bakgrunnsfargen vi forlater hvit, men endrer rammeprisen til 21 fps (rammer per sekund). 21 fps gir en rask, jevn animasjonshastighet.
Organisasjonen er nøkkelen når du arbeider med Flash, så før vi begynner å tegne vår ball, la oss navnet på laget det skal sitte på. Dobbeltklikk Lag 1 og kaller det "Ball".
Velg det ovale verktøyet, definer et strekk og en fyllfarge, som de som vises. Deretter tegner du en jevn sirkel (ved å holde Shift og dra musen). Bruk også Egenskapsinspektøren til å gi Stroke en 3px vekt.
Ved å lage symboler i Flash kan du bruke flere forekomster av de samme objektene i en fil. Symboler er alle tilgjengelige fra bibliotekspaletten (Vindu> Bibliotek). Ved å endre et symbol, vil alle forekomster av dette symbolet i filen bli endret.
Vi skal snu vår sirkel til et symbol som vil bli vår ball. Velg hele sirkelen og trykk F8. Navngi det "mc_ball", velg å gjøre det til et filmklippsymbol og klikk på OK.
Legg til et andre lag under "Ball" -laget og kaller det "Shadow." I den første rammen av dette laget tegner du en ellipse for å danne en skygge under ballen. Fjern slag og farg det # E2E0E5. Slå den inn i et symbol som du gjorde før med ballen, så navnet "mc_shadow."
Plasser de to symbolene i omtrent den riktige høyden for å antyde at ballen sitter på bakken. I paletten Juster (Vindu> Juster), velg Til trinn og senter de to symbolene horisontalt.
Vi har laget våre symboler i sin mest grunnleggende form, nå la oss begynne å animere dem. Hold Shift og klikk på ramme 20 av begge lagene på tidslinjen. Gå til Endre> Tidslinje> Konverter til Keyframes eller trykk F6 for å slå disse rammene inn i Keyframes. Keyframes representerer poeng langs tidslinjen der noe skjer. Dette punktet på tidslinjen er slutten på animasjonen; med andre ord vil ballen ha hoppet opp fra bakken, nådd den er apex og returnert til denne startposisjonen. Det samme gjelder for vår skygge: det vil bli bleknet når ballen steg og returnerte til denne starttilstanden ved rammen 20.
La oss legge til det punktet som ballen er på det høyeste. Velg ramme 10 på begge lagene og trykk F6 for å slå dem inn i Keyframes.
Med skyvekontrollen fremdeles i ramme 10, flytt ballen symbolet vertikalt oppover til et tidspunkt på scenen. Velg Free Transform Tool og gjør forekomsten av "shadow_main" symbolet større.
Til slutt, med skyggen valgt, går du til Farge på Egenskapsinspektøren og endrer den til en alfa-verdi på 30%.
Tweening er prosessen hvor Flash automatisk genererer alle stadiene mellom en gjenstand eller former to tilstander.
Vi skal mellom rammene mellom vår første ramme og halvveis langs animasjonen i ramme 10. Velg hvilken ramme som helst mellom 1 og 10 på begge lagene, og referer igjen til Egenskapsinspektøren. Velg Bevegelse fra Tween-valget, og du vil se at de resulterende rammene blir lilla.
Flytt skyveknappen frem og tilbake langs tidslinjen med musen, og du vil se ballen og skyggen pent animert. Hastigheten til denne bevegelsen er imidlertid helt ensartet. Vi trenger ballen til å decelerere da den når sin toppunkt, og vi kan gjøre dette med letthet (ha ha).
Igjen, med en ramme for hvert lag valgt (innenfor tweened-området), referer til Egenskapsinspektøren. Endre Tweening å lette ut med en verdi på 100. Dette vil bremse vår klatringskule.
Etter å ha animert oppgangen til ballen, må du gjenta tweening trinnene for rammer 11 - 20. Denne gangen gjør bevegelsen tween i -100, noe som får ballen til å akselerere når den nærmer seg bakken.
Trykk på Command + Enter for å se din animerte ball så langt. Det skal se ut som animasjonen vist nedenfor.
Forutsatt at vår ball er laget av noe litt mer fleksibel enn diamant, kommer det til å endres form litt etter påvirkning med bakken. La oss legge til en siste Keyframe hvor ballen flater øyeblikkelig.
Velg ramme 21 på begge lagene og trykk F6 for å slå dem inn i Keyframes. Bruk deretter Free Transform Tool til squash symbolet "ball" fra toppkanten (hold Alt som du gjør for å holde den nederste kanten der den er).
Vår hoppende bevegelse er fullført. Nå må vi legge til ytterligere detaljer og bevegelse til vår ball. Dobbeltklikk på "ball" -symbolet på noen av keyframes for å angi tidslinjen for det aktuelle symbolet. Du ser din nåværende plassering under tidslinjen - du burde være innenfor "Scene 1, mc_ball."
Klikk på Sett lag-ikonet for å lage et andre lag over den nåværende. Kopier og lim sirkelen på plass fra Lag 1 til Lag 2 (Kommando + C, Kommando + Skift + V). Nå heter det nederste laget "Ball Spinning" og den øverste "Shade". Til slutt låser du "Ball Spinning" -laget.
Tegn en stor sirkel et sted på scenen, og sørg for at den har en annen farge i den eksisterende sirkelen.
Plasser den større sirkelen slik at det som fremdeles kan ses av den gule sirkelen, handler om riktig form for skygge på ballen. Slett alle objekter.
Velg nå den større sirkelen igjen, og trykk på Slett. Ved å legge u-grupperte eller ikke-symboliserte skjemaer over hverandre, kombinerer du dem på samme måte som du gjør med piksler i malingsapplikasjoner. Ved å fjerne den større sirkelen, er du igjen med bare den lille halvmåne som vil bli skygge på ballen. Velg og fjern gjenværende slag og farg halvmåne # E2E0E5.
Da denne halvmåne virker som skyggelegging på vår ball, ville det være fint å gi den en mangfoldig opasitet. For å gjøre dette må vi konvertere det til et filmklippsymbol (du bør være vant til denne handlingen nå). Trykk på F8 og navnet "mc_ball_shading" (disse navnene blir dodgy). Se Egenskapsinspektøren og endre den Blend to Multiply. Perfekt!
Trykk på Command + Enter igjen for å se din animerte ball så langt. Det skal se ut som animasjonen nedenfor.
Etter å ha håndtert skyggen kan du nå låse laget "Shade" (kanskje til og med gjøre det usynlig å gjøre arbeidet enklere) og låse opp "Ball Spinning." Vi skal legge til et mønster for å gi vår sirkel for å gi den den som ser på stranden. Bruk det ovale verktøyet til å tegne en stor oval på scenen. Den trenger et slag på 1px og #FFFFFF, men ingen fyllfarge.
Legg streken som vist på bildet under og slipp ut. Velg nå den delen av streken som ligger utenfor ballen ved å bare klikke på den. Som med å gjøre skyggen halvmåne tidligere, har alle vektorene på dette laget fusjonert sammen, og danner separate områder. Slett den ytre delen av strekningen.
Tegn et par andre ovaler og legg dem på toppen av sirkelen slik at de kommer sammen øverst et sted. Deretter fjerner overskuddet utenfor sirkelen. Ovalene må ikke alle være like store eller proporsjoner, bare prøv å gjenskape noe litt som bildet nedenfor. Det du vil ha opprettet, er en serie segmenter som nå kan farges individuelt.
Farge alternative segmenter med # EA512D og slett alle biter av hvitt slag fra ballen. Trykk på Kommando + Enter for å se hva du har gjort så langt. Det skal se ut som animasjonen nedenfor.
La oss legge til en endelig dimensjon av bevegelse til animasjonen, vi får ballen til å sakte rotere når den hopper. For å gjøre dette trenger vi først ballen på lag "Ball Spinning" for å bli omgjort til et symbol. Klikk på den første keyframe av laget for å sikre at alt på det er valgt. Nå trykker du på F8 og heter dette filmklippsymbolet "mc_ball_base." Du ser at den er lagt til blant de andre symbolene i bibliotekspaletten (Vindu> Bibliotek).
Velg rammen 32 på tidslinjen på laget "Spinning Ball" og trykk F6 for å lage en ny Keyframe. Velg ramme 32 på tidslinjen på laget over og trykk F5. Dette vil skape en ny ramme, men da "Shade" -symbolet ikke endrer tilstand, trenger vi ikke å gjøre dette til en Keyframe. Vi trenger bare å sikre at når glidebryteren når dette punktet langs tidslinjen, er "Shade" -symbolet tilstede.
Hvorfor har vi valgt ramme 32? Vel, da skal vi gjøre at vår ball roterer en gang hver 32 rammer. Vår ball spretter hver 20. ramme og så denne uregelmessige timingen vil bety at ballen finner seg på kontinuerlig forskjellige rotasjonsfaser under studiet. Hvis dette ikke er klart, vil det snart bli ...
Velg en ramme et sted langs tidslinjen på lag "Ball Spinning" og referer til Egenskapsinspektøren. Velg Motion tween som du gjorde med hoppende bevegelsen. Denne gangen vil vi ikke ha noen Ease-verdi, vi trenger ballen til å rotere jevnt i samme hastighet. Velg CW (Clockwise) fra rullegardinmenyen Rotate and leave 1 som antall ganger ballen vil rotere i løpet av tweenen. Selvfølgelig er "Shade" -laget upåvirket, og skyggen vil derfor forbli i samme posisjon på ballens ansikt.
Så der har du det! Trykk på Command + Enter igjen, og kontroller at bevegelsen er som du vil. Skulle det måtte endres, kan du øke mengden rammer i tweens, bytte høyde på ballen, antall ganger det roterer osv. Denne opplæringen har gitt deg et innblikk i: Flash-tidslinjen og lagene, oppførselen til Flash vektor tegneverktøy, hierarkiet av Flash-symboler og objekter, og bevegelsestweening.
Jeg håper du likte det! Del 2 forfaller for offentliggjøring neste måned og vil utvide på disse teknikkene, for å øke prosessen med et snev av Illustrator ...
Abonner på VECTORTUTS RSS-feed for å holde deg oppdatert med de nyeste vektoropplæringene og artiklene.