Share
Denne opplæringen utvider seg på teknikker som er dekket i del 1 i Illustrate og animere en hoppende ball-serie. Vi bruker Illustrators 3D-verktøy for å forbedre Flash-spinnbevegelsen til hoppekulen og se på å jobbe mellom de to programmene. De involverte trinnene kan også følges uavhengig av del 1.
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.
... og la oss bare minne oss om den subtilt enklere animasjonen vi opprettet i del 1 av denne tut ...
Hendene opp, som fulgte den første delen av denne tut Illustrere og animere en hoppende ball: Del 1 - Adobe Flash? Vel, de som gjorde det, 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 et like tilfredsstillende sluttresultat.
For å starte, skal vi lage en 3D-ball i Illustrator. For det andre vil vi animere det innen Illustrator, og til slutt vil vi ta det over til Flash for sluttbehandling. La oss begynne med å åpne et nytt dokument i Illustrator. Kulen vi brukte for første del av denne tuten målt 90px x 90px så definer Artboard din som å ha de samme dimensjonene.
Før vi lager vårt 3D-objekt, la vi legge til et mønster i paletten Symboler som vi skal bruke til å kartlegge til den ferdige ballen. Hvis du husker fra den første delen av tutten, hadde vår ball seks alternativt farget striper - dekorere vår 3D-versjon på samme måte vil være rett frem.
Lag seks vertikale, like store og mellomrom rektangler. Farge dem alternativt med rødt # DF3F22 og gul # E3CB0E. Grupper dem sammen hvis du ønsker og dra mye inn i paletten Symboler (Vindu> Symboler). Tilordne dette nye symbolet et navn som "ball_pattern", ikke at vi lager noen andre symboler som du trenger å skille mellom det ...
Vi skal bruke 3D Revolve-verktøyet for å lage en ball. Begynn med Ellipseverktøyet og lag en sirkel på samme størrelse som (og Alignned med) Artboard. Bruk Direct Selection-verktøyet til å fjerne venstre ankerpunkt. Avslutt ved å sørge for at det har en fylling (selv om fargen er irrelevant da vi skal kartlegge "ball_pattern" til den), men ingen slag.
Når dette objektet er valgt, går du til Effekter> 3D> Revolve ... Sjekk forhåndsvisning, og standardalternativene skal gi deg følgende resultat.
Gi nå ballen det er mønster ved å klikke på Kartkunst i dialogboksen 3D-alternativer. En sfære vil bare ha en overflate for å kartlegge; fint og enkelt. Velg "ball_pattern" fra Symbol-rullegardinmenyen, og kontroller Skala til passform.
Alternativet Shade Artwork er spesielt relevant her. Hvis du sjekker det, får du stor effekt på ballens overflate (se bildet nedenfor). Imidlertid blir de resulterende vektorene så komplekse at Flash finner det veldig vanskelig å gjengi dem i animasjon. Dette betyr ikke at skyggelegging din ball ikke er et alternativ - bør du velge å gjøre det, er det mulig å bruke bildene i Flash ved først å rasterisere dem. Flash har ikke noe problem med å håndtere bitmapsene dette skaper, men selvfølgelig mister du fleksibiliteten til å jobbe med stier.
Jeg skal demonstrere dette senere, men for nå bare ta mitt ord for det og la Shade Artwork være ukontrollert! Klikk på OK for å gå tilbake til dialogboksen 3D-alternativer og sørg for at Surface-alternativet her også er satt til No Shading.
For å fullføre 3D-prosessen (for nå) plasser ballen til en passende vinkel og klikk OK. Husk at vi vil animere den som dreier seg rundt den sentrale akse som vist nedenfor.
Kopier og lim inn 3D-ballen på plass (Command + C, Command + F). De to objektene vil bli synlige som separate baner hvis du utvider laget.
Når du har valgt den dupliserte ballen, henviser du til Paletten Utseende (Vindu> Utseende). Dobbeltklikk 3D-effekten for å redigere den.
En gang tilbake i dialogboksen 3D-alternativer må du utføre bare én oppgave, og deretter klikke OK. Vi må dreie ballen rundt 120 °. Dette vil slå ballen til det første punktet hvor det ser ut akkurat det samme som utgangspunktet; det er lite poeng i å dreie det hele 360 ° når det ser ut identisk ved tre anledninger under en revolusjon ...
Dette vil kreve litt øyearbeid. Klikk og dra en av de grønne kanter på stillingen kube for å dreie ballen rundt sentralaksen. Hold øye med forhåndsvisning av ballen og hold drak når du ser at ballen har spilt seg nok. Ballens wireframe samsvarer pent med vårt mønster; hvert fargede segment av vår ball består av to langsgående segmenter av wireframe. Dette bør gjøre det enkelt nok til å dømme nøyaktig hvor du skal slutte å dra.
Etter å ha fullført de to 3D-objektene, gå til Objekt> Blend> Blandingsalternativer. Her angir du animasjonsstrinnene mellom ballens to tilstander. Velg spesifiserte trinn og skriv inn 18 (dette er vilkårlig, jo flere trinn du velger, jo mer gradvis animasjonen vil bli).
Velg de to objektene dine og gå til Objekt> Blend> Lag. Resultatet blir helt unnoticeable: alle dine blandede trinn er en topp av hverandre ...
For å animere dem i Flash, må vi dele trinnene og plassere dem på separate lag. Utvid laget som holder blandingen, og kontroller at du har valgt blandingen (som vist nedenfor). Åpne palettmenyen i paletten Lag og velg Utgiv til lag (sekvens).
Med det gjort, velg alle de resulterende lagene og dra dem ut av det første laget de sitter i. Vi trenger at de skal være helt uavhengige. Deretter slett du den opprinnelige "Layer 1;" det er nå tomt tross alt. Du vil bli igjen med en serie lag, hver med en 3D-ball i gradvis rotasjonsgrader. De siste og de første er nøyaktig det samme selvfølgelig (de var de to opprinnelige tilstandene som ble blandet), slik at du også kan fjerne et av disse to lagene.
Vel, det er det. Jeg har nettopp forklart hva jeg skal gjøre i tittelen på dette trinnet; Lagre og lukk dokumentet ditt. Det er ferdig!
Helt siden Adobe tok Macromedias imperium i bruk mellom deres applikasjoner, har det blitt enklere og enklere. Importer og eksporter mellom Illustrator og Flash har vært mulig i noen tid, men resultatene kan noen ganger være litt uforutsigbare. Eksportere Illustrator-lag som SWF-filmsekvenser, eller som enkelte SWF-filer ga ganske god kompatibilitet mellom programmer. Så kom CS3. Siden det øyeblikket har vi vært i stand til å importere AI-filer direkte og håndtere prosessen helt fra Flash selv.
La oss ta en titt på alternativene vi har og bruke dem på denne tut. Hvis du har en Flash-fil fra del 1 av denne tut, eller hvis du jobber med kildefilene, åpner du "source_1.fla;" vår originale animerte ball. Ellers bare åpne et nytt dokument i Flash.
Gå til Flash> Preferences ... og velg AI File Importer. Alternativene er alle rimelig selvforklarende; Vi må sørge for at innholdet i vår AI-fil importeres som stier (ikke bitmaps, men som tidligere nevnt er dette et alternativ hvis stiene er for komplekse). Sett opp som nedenfor, vil våre importerte baner bli redigert, innholdet i hvert lag vil bli konvertert til individuelle filmklipp, og alt som ligger utenfor Artboard vil bli ignorert (vi har bare gjenstander innenfor Artboard, slik at dette ikke påvirker oss egentlig ).
OK, la oss importere vår AI kildefil. Igjen, bør du jobbe med en ny flash-fil, bare ignorere mine referanser til del 1 av denne tut.
I "source_1.fla" (eller din egen fullførte FLA-fil fra del 1) åpner du biblioteket (Command + L) og dobbeltklikker på "mc_ball_base." Dette var vår ball i den mest grunnleggende tilstanden; dette filmklippet var det vi spenner over, og så sprang det igjen. Alt vi gjør på denne filmen, vil derfor bli spunnet og spurt også. Lås "Layer 1" og lag en ny kalt "importert ball".
Med den første keyframe av "importert ball" laget valgt, gå til File> Import> Import to Stage ...
Velg AI-filen fra systemet ditt og klikk OK. Du blir presentert med Importer * fil * til biblioteket dialog, her er du ferdig med importalternativer angående din AI-fil, og dette kan gjøres på et lag for lag, objekt for objekt-nivå.
Først vil du legge merke til at hvert av Illustrator-lagene har et Path-objekt i det. Hver vei har et advarselssymbol som indikerer at det er et problem. Faktisk, ved å klikke på inkompatibilitetsrapport, bekrefter du at disse objektene ikke er kompatible med Flash på grunn av 3D-revolveringseffekten.
Dette er våre gjengitte 3D-baller, og Flash kan ikke redigere disse i deres nåværende tilstand. vi måtte ha utvidet 3D-effektene for at de kunne redigeres. Dette er ikke et problem i vårt tilfelle. Vi ønsker ikke å redigere dem, men vi vil kanskje skalere dem. Ignorer muligheten til å importere dem som bitmaps; de vil importere fine som skalerbare baner.
Alle andre standardinnstillinger her er fine for våre behov; bare vær sikker på at lagene blir konvertert til Keyframes. Klikk på OK.
Etter at du har importert din AI-fil, ser du en sekvens av Keyframes på ditt "importerte ball" -lag. Hvis du flytter skyveknappen opp og ned på tidslinjen, vil du vise hvordan disse rammene gir deg din roterende ball. Perfekt!
Nå fullfør effekten ved å plassere "Layer 1" over "importert ball" og slette alt fra dette laget unntatt slaget. Klikk deretter på rammen over den siste keyframe i sekvensen (i min ramme 19) og klikk F5 for å spre rammene langs lengden på animasjonen. Dette vil ha plassert det opprinnelige slaget over ballen din.
Kommando + Enter vil forhåndsvise animasjonen din. I mitt tilfelle har jeg også valgt å senke den opprinnelige spinnende effekten ved å forlenge bevegelsestweenen i "mc_ball-filmen." Du ser at ballen spinner 360 ° med klokken og også 360 ° rundt sentralaksen; en effekt umulig (uten massiv konsentrasjon og et par måneder tegning) ved å bruke bare Flash.
Er du nysgjerrig på å vite hvordan det ville ha sett hvis vi hadde gått for den skyggefulle ballen? Gjenta de forrige trinnene som har valgt å skygge 3D-ballen i Illustrator:
Du vil merke at jeg valgte ikke å importere keyframes i spinnbevegelsen; ballen spinner ikke lenger med klokken. Hvis jeg hadde gjort dette, ville belysningen også spinne (og det ville ødelegge effekten). Det er et ganske godt resultat tror du ikke? Igjen, men problemet med bitmaps er at de ikke skalere eller rotere godt i Flash. Som du kanskje har sett, er det punktet hvor ballen flater når den treffer bakken, gjort noe pixelert - et problemvektorer opplever ikke.
Her slutter den andre delen av denne 2 del tut! Disse siste trinnene har forhåpentligvis gitt deg et innblikk i: å separere Illustrator blander seg i lag, importerer AI-filer til Flash, og evner og begrensninger angående vektorer og bitmaps. Som noen gang håper jeg at du likte denne!
Abonner på VECTORTUTS RSS-feed for å holde deg oppdatert med de nyeste vektoropplæringene og artiklene.
Accentsconagua