Share
Acest tutorial se extinde pe tehnicile acoperite în Partea 1 din seria Illustrate și Animate a Ball Bouncing. Vom folosi instrumentele 3D ale Illustrator pentru a îmbunătăți mișcarea de mișcare a fulgerului și a arunca o privire la lucrul dintre cele două aplicații. Etapele implicate pot fi urmate, de asemenea, independent de partea 1.
Mai jos este animația finală la care vom lucra. Doriți acces la fișierele vectoriale Source și copiile descărcate ale fiecărui tutorial, inclusiv acesta? Alăturați-vă VECTORTUTS PLUS doar pentru 9 / lună.
... și să ne amintim doar de animația subtilă mai simplă pe care am creat-o în prima parte a acestui tut ...
Hands Up, care a urmat prima parte a acestui tut Il ilustra si anima o bouncing Ball: Partea 1 - Adobe Flash? Ei bine, cei care ați făcut vor avea un fișier Flash pe care să-l adăugați - cei care nu au făcut-o, nu vă faceți griji. Această a doua parte poate fi, de asemenea, urmată ca un tutut individual, oferind un rezultat final la fel de satisfăcător.
Pentru a începe, vom crea o minge 3D în Illustrator. În al doilea rând, îl vom anima în Illustrator și, în sfârșit, vom trece la Flash pentru atingerea finală. Să începem prin deschiderea unui nou document în Illustrator. Mingea pe care am folosit-o pentru prima parte a acestui tutut mãsuratã 90px x 90px, astfel încât sã definiþi artboard-ul dvs. ca având aceleaºi dimensiuni.
Înainte de a crea obiectul 3D, să adăugăm un model în paleta Simboluri pe care o vom folosi pentru a marca balonul finit. Dacă vă reamintiți din prima parte a tutunului, mingea noastră a avut șase dungi colorate alternativ - decorarea versiunii noastre 3D în același mod va fi simplă.
Creați șase dreptunghiuri verticale, de dimensiuni egale și distanțate. Colorați-le alternativ cu roșu # DF3F22 și galben # E3CB0E. Grupați-le împreună dacă doriți și trageți întregul lot în paleta Simboluri (Fereastră> Simboluri). Atribuiți acestui nou simbol un nume precum "ball_pattern", nu că facem alte simboluri din care trebuie să îl diferențiați ...
Vom folosi instrumentul 3D Revolve pentru a face o minge. Începeți cu instrumentul Ellipse și faceți un cerc de aceeași dimensiune cu (și aliniat) cu Artboard. Utilizați instrumentul Selecție directă pentru a elimina punctul de ancorare din stânga. Finalizați-vă că aveți o umplutură (deși culoarea este irelevantă pe măsură ce vom cartografia balonul_pattern), dar nu are un accident vascular cerebral.
Cu acest obiect selectat mergeți la Efecte> 3D> Revolve ... Verificați previzualizarea și opțiunile implicite ar trebui să vă dea următorul rezultat.
Acum, dați mingea modelul făcând clic pe Map Art din dialogul Opțiuni 3D. O sferă va avea doar o suprafață de cartografiat; frumos și simplu. Selectați "ball_pattern" din meniul drop-down Symbol și verificați Scale to Fit.
Opțiunea "Shade Artwork" are o relevanță deosebită aici. Dacă o verificați, veți avea un efect deosebit asupra suprafeței mingii (a se vedea imaginea de mai jos). Cu toate acestea, vectorii care rezultă devin atât de complexi încât Flash îi consideră foarte dificil să le facă în animație. Acest lucru nu înseamnă că umbrirea mingii nu este o opțiune - dacă alegeți să faceți acest lucru, este posibil să utilizați imaginile din Flash rasterizându-le mai întâi. Flash nu are nici o problemă în ceea ce privește manipularea bitmap-urilor create, dar, desigur, pierdeți flexibilitatea de a lucra cu căi.
Voi demonstra acest lucru mai târziu, dar pentru moment, luați cuvântul meu și lăsați Shade Artwork necontrolat! Faceți clic pe OK pentru a reveni la dialogul Opțiuni 3D și asigurați-vă că opțiunea Suprafață aici este, de asemenea, setată pe No Shading.
Pentru a finaliza procesul 3D (pentru moment) poziționați mingea într-un unghi adecvat și faceți clic pe OK. Rețineți că o vom anima în jurul axei centrale, după cum se arată mai jos.
Copiați și inserați mingea 3D în poziția (Command + C, Command + F). Cele două obiecte vor fi vizibile ca căi separate dacă extindeți stratul.
Cu bila duplicat selectată, consultați paleta Aspect (fereastră> Aspect). Faceți dublu clic pe efectul 3D pentru al edita.
Odată ce ați revenit în dialogul Opțiuni 3D, va trebui să efectuați o singură sarcină și apoi să faceți clic pe OK. Trebuie să rotim mingea în jurul a 120 °. Aceasta va transforma mingea în primul punct în care pare exact același cu punctul de plecare; nu are nici un rost să-l rotăm cu un 360 ° complet atunci când se pare identic de trei ori în timpul unei revoluții ...
Acest lucru va necesita un pic de ochi-muncă. Faceți clic și trageți una dintre marginile verzi de pe cubul de poziție pentru a roti mingea în jurul axei centrale. Păstrați-vă ochii asupra previzualizării mingii și opriți tragerea atunci când vedeți că mingea sa răsucit suficient. Cadrul de sârmă al mingii se potrivește perfect cu modelul nostru; fiecare segment colorat al mingii noastre este alcătuit din două segmente longitudinale ale sârmei. Acest lucru ar trebui să fie suficient de ușor pentru a judeca exact unde să oprească tragerea.
După ce ați terminat cele două obiecte 3D, mergeți la Object> Blend> Blend Options. Aici veți specifica pașii de animație dintre cele două stări ale mingii. Alegeți pașii specificați și introduceți 18 (acest lucru este arbitrar, cu cât mai mulți pași pe care îl alegeți, cu atât mai mult va fi animația).
Selectați cele două obiecte și mergeți la Object> Blend> Make. Rezultatul va fi total neobservat: toți pașii dvs. amestecați sunt unul deasupra celuilalt ...
Pentru a le anima în Flash, trebuie să împărțim pașii și să le plasăm pe straturi separate. Extindeți stratul care ține amestecul și asigurați-vă că ați selectat amestecul (după cum se arată mai jos). Deschideți acum meniul paletei din paleta Straturi și alegeți Release to Layers (Sequence).
Cu asta, selectați toate straturile rezultate și trageți-le din primul strat în care stau. Trebuie să fie complet independente. Apoi, ștergeți versiunea originală "Layer 1;" acum este gol, la urma urmei. Veți fi lăsat cu o serie de straturi, fiecare conținând o minge 3D la grade graduale de rotație. Ultimul și primul sunt exact aceleași, desigur (acestea erau cele două stări originale care au devenit amestecate), astfel încât să puteți elimina și unul dintre aceste două straturi.
Ei bine, asta-i tot. Tocmai am explicat ce să fac în titlul acestui pas; Salvați și închideți documentul. S-a terminat!
De când Adobe a preluat imperiul Macromedia, lucrul între aplicațiile lor a devenit mai ușor și mai ușor. Importul și exportul între Illustrator și Flash a fost posibil de ceva timp, deși rezultatele ar putea fi uneori puțin imprevizibile. Exportarea straturilor Illustrator ca secvențe de filme SWF sau ca fișiere SWF individuale au oferit o compatibilitate destul de bună între programe. Apoi a venit CS3. Din acel moment am reușit să importăm direct fișiere AI și să rezolvăm acest proces în întregime din Flash chiar.
Să aruncăm o privire la opțiunile pe care le avem și să le aplicăm acestui tut. Dacă aveți un fișier Flash din partea 1 a acestui tut, sau dacă lucrați cu fișierele sursă, deschideți "source_1.fla;" bilele noastre animate originale. În caz contrar, deschideți un nou document în Flash.
Accesați Flash> Preferences ... și alegeți importatorul de fișiere AI. Opțiunile sunt toate în mod rezonabil explicite; trebuie să ne asigurăm că conținutul fișierului nostru AI sunt importate ca căi (nu bitmap, deși așa cum am menționat mai devreme, aceasta este o opțiune dacă căile sunt prea complexe). Configurați ca mai jos, căile noastre importate vor fi editate, conținutul fiecărui strat va fi convertit în clipuri individuale de film și orice lucru care se află în afara Artboard va fi ignorat (avem doar obiecte în Artboard, astfel încât acest lucru nu ne afectează cu adevărat ).
OK, să importăm fișierul sursă AI. Din nou, dacă lucrați la un nou fișier flash, ignorați referințele mele la Partea 1 din acest tut.
În "source_1.fla" (sau propriul fișier FLA completat din partea 1) deschideți Biblioteca (Command + L) și faceți dublu clic pe "mc_ball_base". Aceasta a fost mingea noastră în starea cea mai de bază; acest clip de film a fost ceea ce am petrecut și apoi, la rândul său, refăcut. Orice vom face la acest film va fi, prin urmare, rotit și refăcut prea. Blocați "Stratul 1" și creați unul nou numit "minge importată".
Cu primul cadru cheie din stratul "importat minge" selectat mergeți la File> Import> Import to Stage ...
Selectați fișierul AI din sistem și faceți clic pe OK. Veți fi prezentat cu Import * fișier * la Bibliotecă dialogul, aici finalizați opțiunile de import referitoare la fișierul dvs. AI și acest lucru se poate realiza pe un nivel de tip layer-by-layer, obiect-cu-obiect.
În primul rând, veți observa că fiecare dintre straturile Illustrator are un obiect Path în interiorul acestuia. Fiecare Cale are un simbol de avertizare care indică faptul că există o problemă. Într-adevăr, făcând clic pe Raportul de compatibilitate va confirma faptul că aceste obiecte nu sunt compatibile cu Flash datorită efectului 3D de revolve.
Acestea sunt bilele noastre rendered 3D și Flash nu le pot edita în starea lor actuală; ar fi trebuit să extindem efectele 3D pentru ca acestea să poată fi editate. Aceasta nu este o problemă în cazul nostru. Nu vrem să le editați, dar ar putea să le diminuăm. Ignorați opțiunea de a le importa ca fișiere bitmaps; ei vor importa amendă pe căi scalabile.
Toate celelalte setări implicite aici sunt bine pentru nevoile noastre; asigurați-vă că straturile vor fi convertite în Keyframe. Faceți clic pe OK.
După ce ați importat fișierul AI, veți vedea o succesiune de cadre cheie pe stratul "importat de mingi". Deplasând cursorul în sus și în jos, cronologia va arăta modul în care aceste cadre vă dau mingea de rotație. Perfect!
Completați efectul plasând "Nivelul 1" deasupra "mingii importate" și ștergând totul de la acest strat, cu excepția cursei. Faceți clic pe rama de deasupra ultimei cadre cheie din secvența dvs. (în cazul casetei 19) și faceți clic pe F5 pentru a răspândi cadrele de-a lungul lungimii animației. Aceasta va fi plasat lovitura originală asupra mingii.
Command + Enter va previzualiza animația. În cazul meu, am optat, de asemenea, să încetinesc efectul inițial de filare prin prelungirea mișcării tween în filmul "mc_ball". Veți vedea mingea rotit 360 ° în sensul acelor de ceasornic și 360 ° în jurul axei centrale; un efect imposibil (fără concentrare masivă și desen de câteva luni) prin utilizarea doar a Flash.
Ești curios să știi cum ar fi arătat dacă am fi plecat pentru balonul umbrit? Repetați pașii anteriori care au ales să vă umbrească mingea 3D în Illustrator:
Veți observa că am optat să nu importesc cadrele cheie în mișcarea de rotire; mingea nu se mai rotește în sensul acelor de ceasornic. Dacă aș fi făcut acest lucru, iluminarea ar fi de asemenea să se rotească (și asta ar ruina efectul). Este un rezultat destul de bun, nu crezi? Din nou, însă, problema cu bitmap-urile este că nu se măresc sau se rotesc bine în Flash. Așa cum ați văzut, punctul în care mingea se aplatizează atunci când atinge pământul este redată într-o oarecare măsură pixelată - un vector de problemă nu are experiență.
Aici se termină a doua parte a acestui 2 părți tut! Acești pași finali vă oferă o perspectivă asupra următoarelor aspecte: separarea amestecurilor Illustrator în straturi, importul fișierelor AI în Flash și capabilități și limite privind vectorii și bitmap-urile. Ca întotdeauna, sper că ți-a plăcut asta!
Abonați-vă la fluxul RSS al VECTORTUTS pentru a rămâne la curent cu ultimele tutoriale vectoriale și articole.
Accentsconagua