Illustrate og animere en sprettende ball: Del 2 - Adobe Illustrator + Flash
Denne opplæringen utdyper teknikker som dekkes i del 1 av illustrere og animere en Bouncing Ball-serien. Vi skal bruke Illustrator 3D-verktøy for å forbedre Flash er spinnende bevegelse av sprettende ball og tar en titt på arbeids mellom de to programmene. Trinnene involvert kan også følges uavhengig av Del 1.
Final Bilde Forhåndsvisning
Nedenfor er den endelige animasjonen vi skal jobbe mot. Ønsker tilgang til de fulle Vector kildefiler og nedlastbare kopier av hver tutorial, inkludert denne? Bli VECTORTUTS PLUS for bare 9 /måned
.. og la oss bare minne oss selv på subtilt enklere animasjonen vi opprettet under del 1 av denne tut ..
Trinn 1:. Handlingsplan
Hands up, som fulgte den første delen av denne tut illustrere og animere en sprettende ball: Del 1 - Adobe Flash? Vel de av dere som gjorde vil ha en Flash-fil for å legge til - de som ikke gjorde det, ikke bekymre deg. Denne andre delen kan også følges som en individuell tut, noe som gir en like tilfredsstillende sluttresultat.
Slik starter, vi kommer til å lage en 3D-ball i Illustrator. Dernest vil vi animere det innenfor Illustrator og deretter til slutt vil vi ta det over til Flash for den siste finpussen. La oss begynne med å åpne opp et nytt dokument i Illustrator. Ballen vi brukte for den første delen av denne tut målt 90px x 90px så definere din Artboard som å ha samme dimensjoner
Trinn 2:. Pattern
Før vi skaper vår 3D-objekt, la oss legge et mønster til Symboler paletten som vi vil bruke til å kartlegge den ferdige ballen. Hvis du husker fra den første delen av tut, vår ball hadde seks vekselvis fargede striper -. Dekorere vår 3D-versjonen på samme måte vil være grei
Opprett seks vertikale, like store og fordelte rektangler. Farge dem vekselvis med rød # DF3F22 og gul # E3CB0E. Gruppere dem sammen hvis du ønsker det og dra det hele mye inn i Symboler paletten (Vindu > symboler). Tildele denne nye symbol et navn som "ball_pattern", ikke at vi gjør noen andre symboler som du trenger for å skille det ..
Trinn 3: The Ball
Vi er kommer til å bruke 3D Revolve verktøyet for å lage en ball. Begynn med Ellipse verktøyet og lage en sirkel med samme størrelse som (og justert med) Artboard. Bruk segmentmarkøren til å fjerne venstre ankerpunkt. Avslutt med å sørge for at den har et fyll (selv om fargen er irrelevant som vi skal kartlegge "ball_pattern" til det), men ingen slag
Med dette objektet valgt gå til Effects >.; 3D > Revolve ... Sjekk Preview og standardvalgene skal gi deg følgende resultat
Trinn 4:. Kartlegging
Nå gir ballen det er oppskriften ved å trykke Kart kunst fra i 3D Options dialog. En sfære vil bare ha en overflate for å kartlegge; fin og enkel. Velg "ball_pattern" fra Symbol drop-down og sjekk Tilpass.
The Shade Artwork alternativet er særlig relevant her. Hvis du sjekke det, vil du få en stor effekt på ballens overflate (se bildet nedenfor). Men de resulterende vektorer blitt så komplisert at Flash finner det meget vanskelig å gjengi dem i animasjon. Dette betyr ikke at skyggelegging ballen din er ikke et alternativ - hvis du velger å gjøre det, er det mulig å bruke bildene i Flash ved først rastrering dem. Flash har ikke noe problem å håndtere bitmaps dette skaper, men du selvfølgelig mister fleksibiliteten til å jobbe med stier.
Jeg skal demonstrere dette senere, men for nå bare ta mitt ord for det, og la Shade Artwork ukontrollert ! Klikk OK for å gå tilbake til 3D Options dialog og sørge for at Surface alternativet her er også satt til Ingen Shading
Trinn 5:. Posisjon
For å fullføre 3D prosessen (for nå) posisjonere ball til en passende vinkel og klikk på OK. Husk at vi skal animere det kretser rundt den sentrale aksen som vist nedenfor
Trinn 6:. Copy & Lim
Kopier og lim inn 3D ball på plass (Command + C, Command + F). De to objekter vil være synlig som separate baner hvis du utvider laget
Trinn 7:. Talkin '' bout en revolusjon
Med den dupliserte ball valgt, refererer til utseendet paletten (Vindu > Utseende). Dobbeltklikk på 3D-effekten for å redigere det.
Når du er tilbake i 3D Options dialog må du utføre bare én oppgave, og klikk deretter på OK. Vi trenger å dreie seg ballen rundt 120-graders;. Dette vil slå ballen til det første punkt hvor den ser nøyaktig det samme som startpunktet; det er lite vits i rullerende det en full 360-graders når det ser identisk ved tre anledninger i løpet av én omdreining ..
Dette vil kreve litt av øye-arbeid. Klikk og dra en av de grønne kanter på stillingen kuben å dreie ballen rundt midtaksen. Hold øye med forhåndsvisning av ball og slutter å dra når du ser at ballen har dreid nok. Wireframe av ballen matcher pent til vårt mønster; hver farget segment av vår ball består av to langsgående segmenter av trådnett. Dette gjør det enkelt nok til å bedømme nøyaktig hvor du slutter å dra
Trinn 8: The Perfect Blend
Etter å ha fullført de to 3D-objekter går til Objekt >. Blend > Blend alternativer. Her vil du angi animasjons trinn mellom kule to stater. Velg Spesifiserte Steps og skriv 18 (dette er vilkårlig, jo flere skritt du velger, jo mer gradvise animasjonen være)
Trinn 9:. Animer
Velg to objekter og gå til Object > Blend > Lage. Resultatet vil være helt umerkelig: alle dine blandede trinnene er én oppå hverandre ..
For å animere dem i Flash, må vi dele trinnene og plassere dem på separate lag. Utvid lag holder din blanding og sørg for at du har den blanding valgt (som vist nedenfor). Nå åpner paletten menyen i lagpaletten og velg Slipp til Layers (sekvens).
Med det gjort, velger du alle de resulterende lag og dra dem ut av det første laget de sitter i. Vi trenger dem være helt uavhengige. Deretter slette den opprinnelige "Layer 1;" det er nå tom etter alt. Du vil sitte igjen med en rekke lag, hver og en som inneholder en 3D-ball på grad graders rotasjon. Den siste og den første som er nøyaktig det samme selvfølgelig (de var de to opprinnelige statene som ble blandet), slik at du kan fjerne en av disse to lagene så vel
Trinn 10:. Lagre og lukk
Vel, det er det. Jeg har nettopp forklart hva de skal gjøre i tittelen på dette trinnet; Lagre og lukk dokumentet. Det er ferdig
Trinn 11: Flash! Aa-aaaaaaah! Frelser
Universe!
Helt siden Adobe tok på Macromedia imperium arbeider mellom sine søknader har blitt enklere og enklere. Import og eksport mellom Illustrator og Flash har vært mulig for noen tid, men resultatene kan noen ganger være litt uforutsigbar. Eksportere Illustrator lag som SWF-filmsekvenser, eller som individuelle SWF-filer ga ganske god kompatibilitet mellom programmene. Så kom CS3. Siden det øyeblikket har vi vært i stand til å importere AI-filer direkte og håndtere prosessen helt fra innsiden Flash selv.
La oss ta en titt på de muligheter vi har og bruke dem på denne tut. Hvis du har en Flash-fil fra del 1 av denne tut, eller hvis du arbeider med kildefiler, åpne opp "source_1.fla;" vår opprinnelige animerte ball. . Ellers bare åpne opp et nytt dokument i Flash
Gå til Flash > Preferanser .. og velge AI File importør. Alternativene er alle rimelig selvforklarende; vi trenger for å sikre at innholdet i vår AI fil importeres som baner (ikke punktgrafikk, men som jeg nevnte tidligere dette er et alternativ hvis banene er for komplisert). Satt opp som under, vil våre importerte stier være redigerbar, vil innholdet av hvert lag bli konvertert til individuelle filmklipp og noe liggende utenfor Artboard vil bli ignorert (vi har bare objekter innenfor Artboard slik at dette ikke egentlig påvirker oss )
Trinn 12:. Target
OK, la oss importere vår AI kildefilen. Igjen, bør du være arbeider med en ny Flash-fil, bare ignorere mine referanser til del 1 av denne tut.
I "source_1.fla" (eller din egen fullført FLA fil fra del 1) åpne Library ( Command + L) og dobbeltklikk på "mc_ball_base." Dette var vår ball i det mest grunnleggende tilstand; Dette filmklippet var hva vi spenner og deretter i sin tur spratt. Alt vi gjør på denne filmen vil derfor bli skilt og spratt også. Låse "Layer 1" og lage en ny en som heter
Trinn 13 "importert ball.": Import
Med den første keyframe av "importerte ball" laget valgt gå til Fil > Import > Import Stage ..
Velg AI-fil fra systemet og klikk på OK. Du vil bli presentert med Import * fil * til Library Først vil du legge merke til at hver av Illustrator lagene har en bane objekt i den. Hver bane har et varselsymbol som angir at det er et problem. Faktisk vil klikke på uforlikelighet Rapporter bekrefte at disse objektene er ikke kompatible med Flash på grunn av 3D dreie Effect Dette er våre gjengitt 3D baller og Flash kan ikke endre disse i sin nåværende tilstand.; vi ville ha hatt å ha utvidet 3D-effekter for dem å være redigerbar. Dette er ikke et problem i vårt tilfelle. Vi ønsker ikke å redigere dem, men vi kan være lurt å skalere dem. Ignorere muligheten til å importere dem som punktgrafikk; de vil importere greit så skalerbare stier Alle andre standardinnstillinger her er greit for våre behov.; bare sørg for at lagene vil bli konvertert til nøkkelbilder. Klikk OK Etter å ha importert AI-fil, vil du se en sekvens av nøkkelbilder på din "importert ball" lag. Flytte glidebryteren opp og ned tidslinjen vil vise hvordan disse rammer gi deg din roterende ball. Perfekt! Nå full effekten ved å plassere "Layer 1" over "importert ball" og slette alt fra dette laget bortsett fra hjerneslag. Klikk deretter på rammen ovenfor den siste keyframe i sekvensen (i mitt tilfelle ramme 19) og klikk F5 for å spre rammene langs lengden av animasjonen. Dette vil ha plassert originalen slag over ballen Command + Enter vil forhåndsvise animasjonen!. I mitt tilfelle, har jeg også valgt å senke den opprinnelige spinnende effekt ved å forlenge motion tween i "mc_ball filmen." Du vil se ballen spinner 360-graders med klokken og også 360-graders rundt den sentrale akse; en effekt umulig (uten massiv konsentrasjon og et par måneder tegning) gjennom å bruke bare Flash Er du nysgjerrig på å vite hvordan det ville ha så hadde vi gått for det skraverte ball? Gjenta de forrige trinnene har valgt å skyggelegge 3D ball i Illustrator: Du vil merke at jeg har valgt å ikke importere nøkkelbildene inn i dreiebevegelsen!; ballen ikke lenger spinner med klokken. Hvis jeg hadde gjort dette, ville belysningen også være spinne (og som ville ødelegge effekten). Det er et ganske godt resultat synes du ikke? Igjen skjønt, er problemet med bitmaps at de ikke skalere eller rotere godt i Flash. Som du kanskje har sett, det punktet hvor ballen flater når den treffer bakken er gjengitt noe kornete - et problem vektorer ikke opplever Her slutter den andre delen av. Dette 2 del tut! Disse siste trinnene har forhåpentligvis gitt deg et innblikk i: skille Illustrator blander inn lag, importerer AI filer til Flash, og evner og begrensninger vedrørende vektorer og punktgrafikk. Som alltid, jeg håper du likte denne! Abonner på VECTORTUTS RSS-feed for å holde deg oppdatert med de nyeste vektor tutorials og artikler.
dialog, her hvor du fullimport alternativer vedrørende din AI-fil, og dette kan gjøres på et lag-på-lag, objekt-by-objekt nivå.
Trinn 14:. Stroke
Trinn 15:. Sjekk det
Trinn 16:. Importere punktgrafikk
Kopier og lim på plass
Definer en blanding med uansett hvor mange skritt du ønsker
Blend de to objektene
Pakk bare de lagene du trenger
Lagre
Åpne Flash, gå til Flash > Preferanser .. og velge AI Fil Importør
Opt å importere lag som punktgrafikk
Velg en keyframe som å starte sekvensen
Gå til Fil > Import > Import Stage ..
Sjekk det
Konklusjon