Share
De la lansarea timpurie a Adobe Creative Suite, integrarea dintre produsele sale a fost una din caracteristicile cheie. După fuziunea Adobe cu Macromedia, integrarea Creative Suite sa extins pentru a include produse precum Flash, Dreamweaver și Fireworks. Acest tutorial demonstrează modul în care putem utiliza Flash, Photoshop, Illustrator și After Effects împreună pentru a construi un singur proiect.
Integrarea între produsele Adobe Creative Suite vă îmbunătățește fluxul de lucru prin intermediul acestor aplicații, oferindu-vă posibilitatea de a vă deplasa ușor și eficient între fiecare dintre ele. Acest lucru se limitează la compatibilitatea dintre acestea și capacitatea produselor CS de a citi formate și obiecte comune. Interfața unificată este o altă parte a integrării între produse; odată ce ați învățat cum să lucrați cu un singur produs, veți fi familiarizați cu restul familiei.
Integrarea are multe forme în Adobe Creative Suite. Abilitatea de a vă duce munca la dispozitive mobile și de a testa utilizând Adobe Device Central este o altă formă de integrare, deoarece puteți utiliza aceeași aplicație pe care o executați pe computere pe diferite tipuri de dispozitive. A treia formă de integrare este integrarea dintre designeri și dezvoltatori care lucrează în același mediu, familiarizați cu fluxul de lucru al celuilalt și cu instrumentele pe care le folosesc ambele.
Acest articol va acoperi integrarea dintre Flash și alte produse Adobe Creative Suite, cum ar fi Photoshop, Illustrator și After Effects, pentru a da o idee despre modul în care aceste produse se integrează eficient între ele. Vom simula un proiect pentru a crea un banner animat în Flash care utilizează resursele din Photoshop și Illustrator. De asemenea, vom folosi After Effects pentru a îmbunătăți animația Flash utilizând presetările After Effects.
În timp ce acest articol sare între aplicațiile Adobe Creative Suite 5, nu trebuie să aveți prea multă experiență cu aceste aplicații, deoarece vom acoperi doar modul de integrare a fluxului de lucru între fiecare dintre aceste aplicații prin exemplul nostru.
Să aruncăm o privire asupra rezultatului final pe care îl vom strădui:
Primul pas este crearea bazei de fișiere Flash bazer care va fi punctul central de integrare cu Flash și Photoshop, Illustrator și After Effects.
Să creați un document pentru banner cu 336px x 280px și viteză de 30 fps. Și setați culoarea de fundal la negru din caseta de dialog Setare document.
Această dimensiune a documentului va fi dimensiunea standard pentru toate documentele pe care le vom crea în Photoshop și After Effects, doar pentru a păstra lucrurile bine.
După crearea documentului flash, vom produce prima animație în banner utilizând instrumentul Deco. Înainte de a trece prin următorii pași, puteți examina un articol anterior care acoperă instrumentul Deco Utilizând instrumentul de desenare New Deco în Flash CS5. Acum, să vedem primii pași ai animației:
Selectați instrumentul Deco și din opțiunile instrumentului Deco din panoul Properties, alegeți Grid Fill.
În opțiunile Grilă, setați proprietățile sale după cum urmează:
Selectați primul cadru din panoul Cronologie și faceți clic cu mouse-ul pe scenă pentru a crea o rețea aleatorie. În cadrul cadrului 3, apăsați F7 pentru a crea un cadru gol și repetați pasul de mai sus pentru a crea o altă rețea aleatorie.
Repetați pasul de mai sus la fiecare două cadre pentru 20 de cadre pentru a crea o animație pentru animația grilă aleatorie.
În acest moment, ne vom muta în Photoshop pentru a pregăti resursele pe care le vom folosi în animația suplimentară a bannerelor.
În versiunile anterioare de Flash, a existat o singură metodă de a importa resurse bitmap în Flash, prin importarea formatelor de imagine, cum ar fi JPG pentru comprimarea optimă a imaginilor și PNG pentru imagini transparente. Cu toate acestea, importul de fișiere Photoshop mai multe straturi a durat mult timp pentru a salva fiecare strat ca o imagine separată și a le importa separat în Flash. Noul importator PSD din Flash vă permite să importați fișiere PSD direct în Flash cu o varietate de opțiuni, după cum vom vedea mai târziu.
În pasii următori, vom importa fișierul Photoshop Banner.psd în Flash utilizând caseta de dialog de import PSD Flash:
În meniul Fișier, selectați Import> Import în stadiu și selectați fișierul PSD. Vom folosi psd_banner.psd fișier din sursa de descărcare (link-ul din partea de sus a tutorialului).
Să aruncăm o privire asupra casetei de dialog de import PSD și a proprietăților sale disponibile. Caseta de dialog este alcătuită din următoarele părți:
În secțiunea straturi, puteți examina în această secțiune straturile PSD din document și bifați sau debifați straturile pe care doriți să le importați în Flash. De asemenea, oferă o previzualizare a tipului de strat. De exemplu, stratul de text editabil are o literă T pe strat pentru a identifica faptul că stratul poate fi editat.
Pe de altă parte, stratul bitmap include o pictogramă bitmap pentru a arăta că stratul nu poate fi editat. Și puteți îmbina între două straturi selectându-le folosind tasta Shift și apăsând butonul Merge layers.
Sub secțiunea de straturi, puteți converti straturile fie în straturi flash, fie în cadre cheie. Și puteți alege să plasați straturile în poziția inițială și să schimbați faza Flash pentru a fi la fel ca fișierul Photoshop.
În secțiunea din dreapta, puteți seta proprietățile fiecărui strat selectat în secțiunea straturilor. În zona de sus, puteți alege modul de importare a straturilor. De exemplu, în stratul de text, puteți alege să importați stratul ca text editat, căi vectoriale sau imagine bitmap aplatizată. În plus, puteți alege să importați straturile bitmap îmbinate cu stilurile sale sau separate de acestea.
Puteți să acoperiți stratul importat în clipul video și să îi dați un nume de instanță direct din caseta de dialog pentru importul PSD, fără a fi necesară conversia după importarea acestuia. La sfârșitul acestei secțiuni, puteți seta setările de publicare pentru stratul importat, cum ar fi tipul de compresie și calitatea.
Acum, să revenim la exemplul nostru și să setăm opțiunile de import.
Setați caseta de dialog Import PSD pentru a importa toate straturile PSD ca straturi Flash și pentru a converti straturile importate în clipuri video. Rețineți că straturile importate apar peste stratul flash pe care l-am creat anterior. Mutați stratul de fundal pentru a apărea la rândul 10 din caseta Cronologie, iar stratul omului să apară la cadrul 15
Extindeți toate straturile animației la cadrul 50, dați clic dreapta pe primul strat și alegeți Refacerea mișcării
Selectați imaginea de fundal din primul cadru al mișcării și setați alfa la 0%, apoi mergeți la cadrul 15 și setați alfa-ul de fundal la 100%. Repetați animația alfa de mai sus la clipul filmului pentru bărbați care să apară după apariția completă a fundalului.
În această etapă, am integrat resursele Photoshop cu un proiect Flash utilizând caseta de dialog Import PSD. În etapa următoare, vom importa resurse din Adobe Illustrator.
În timp ce Photoshop este mai specializat în editarea bitmap-urilor și a imaginilor, Adobe Illustrator este cea mai bună alegere pentru a construi resurse pentru vectori și ilustrații pentru proiectul dvs. În această parte, vom importa resurse vectoriale în Flash utilizând caseta de dialog de import AI care va importa conținutul fișierului Adobe Illustrator ca un strat vectorial editabil.
În timpul următorilor pași, vom importa fișierul Illustrator Flora.ai de la Illustrator la Flash și utilizați-l în animația banner.
Din meniul Fișier, selectați Import> Import în scenă și selectați Flora.ai fişier. Se afișează caseta de dialog AI de import. Deși este similar cu caseta de dialog pentru importul PSD, are câteva funcții suplimentare pentru a oferi mai multe opțiuni de lucru cu fișierele Illustrator, cum ar fi posibilitatea de a alege o anumită placă Artboard și alegerea de a importa simbolurile neutilizate sau de a importa straturile ca o singură imagine bitmap.
În caseta de dialog AI de import, asigurați-vă că ați selectat layerul AI și bifați caseta de validare pentru a crea un clip video bazat pe stratul importat.
Vectorul importat este plasat pe un strat nou, mutați noul strat în spatele stratului om.
Creați un nou strat de mască și setați stratul vectorial ca strat mascat. În stratul de mască, creați un mic clip video pentru un ciclu care va funcționa ca mască pentru vectorul floral și va fi animat pentru ao dezvălui.
Faceți clic dreapta pe stratul de mască și alegeți mișcarea de completare. În primul cadru al mișcării, reduceți clipul cinematografic din centrul floralului. În ultimul cadru redimensionați-o pentru a acoperi toate floralele și a le arăta sub masca.
Aici, am văzut cum se integrează ușor Flash cu Illustrator pentru a aduce resurse vectoriale în faza Flash. Am folosit caseta de dialog AI de import care oferă opțiuni personalizate bazate pe structura de fișier importată de Illustrator.
După această etapă, vom crea textul în Adobe After Effects și îl vom adăuga la banner ca ultima etapă a exemplului nostru de integrare.
În timp ce puteți crea animații text și efecte în Flash, Adobe After Effects oferă o capacitate extinsă de a crea mai multe efecte fie folosind presetările de efecte, fie creând efecte personalizate utilizând meniul de efecte. În acest exemplu, vom vedea cum să creați efecte de text ușor fără cunoașterea After Effect și să exportați aceste efecte în animația Flash banner.
Deschideți Adobe After Effects. Faceți clic dreapta pe panoul de proiect (dacă nu este acolo, îl puteți dezvălui din meniul ferestrei) și alegeți Compoziție nouă
Setați dimensiunea compoziției și fps-ul la fel ca dimensiunea inițială a Flash-ului creată la începutul acestui tutorial
Utilizați instrumentul Text pentru a scrie textul pe scenă și selectați-l utilizând instrumentul Săgeată. Alegeți panoul Efecte și presetări din dreapta, dacă nu există, îl puteți dezvălui din meniul ferestrei.
În panoul Efecte și presetări, navigați pentru Presetări de animație> Text> Text 3D și alegeți 3D Fall Back Scramble & Blur
Apăsați bara de spațiu pentru a previzualiza animația de pe cronologie. Puteți vizualiza detaliile de animație dând clic pe săgeata de lângă stratul de text din Cronologie. Puteți vizualiza și cadrele cheie pentru animație.
Înainte de a exporta animația în Flash, trebuie să decupăm zona care va fi exportată de cronologie pentru a avea doar animația textului. Pentru a decupa linia de timp a animației, glisați consola zonei de lucru în extrema dreaptă a cronologiei sub numerele de cadre și poziționați-o după terminarea animației.
Din meniul Fișier alegeți Export> Adobe Flash Player (SWF). În meniul de opțiuni, setați calitatea JPG la caracteristicile Maxim și Neacceptate pentru a Rasterize.
Animația After Effects nu se limitează la animația textului, așa cum o puteți utiliza pentru a crea alte efecte de animație și a le exporta pentru a fi utilizate în proiecte Flash.
După exportul After Effect ca SWF, etapa următoare este importul animației în Flash ca cadre animate. After Effects poate susține exportul de conținut ca vector, dar în unele cazuri nu poate citi informațiile vectoriale (cum ar fi importul de conținut 3D). Pentru a evita problemele, After Effects rasterizează conținutul exportat ca secvență bitmap. În pașii următori, vom importa animația After Effect în Flash.
În animația Flash, alegeți File (Fișier)> Import> Import to Stage (Import) și alegeți SWF animație text pe care am creat-o anterior în After Effects.
SWF este importat în Flash ca o secvență de imagini; mișcați imaginile secvențiale pentru a începe să apară după terminarea animației stratului de om.
Am văzut că puteți importa resursele After Effect în Flash, dar puteți, de asemenea import animația Flash pentru After Effects ca SWF și aplicarea directă a efectelor asupra animației Flash. Apoi, puteți să-l exportați ca un film SWF sau Flash FLV de la After Effects. În acest caz, puteți aplica efectele de animație After Effects pentru întreaga animație Flash SWF.
Scopul acestui tutorial este înțelegerea fluxului de lucru de integrare dintre Flash și alte produse Adobe Creative Suite, cum ar fi Photoshop, Illustrator și After Effects. Până la sfârșitul acestui tutorial, trebuie să fiți familiarizați cu fluxul de lucru încrucișat între aplicațiile din Adobe Creative Suite.
Sper că ți-a plăcut acest tutorial, mulțumesc pentru lectură!
Accentsconagua