Cum se creează o animație gif în Illustrator. Cum să faci animație în Adobe Illustrator. Importarea fișierelor Illustrator într-o aplicație Flash

Formatul de fișier Flash (SWF) se bazează pe grafica vectorialași este proiectat pentru grafică scalabilă, compactă pentru Internet. Deoarece acest format de fișier se bazează pe grafică vectorială, obiectul menține calitatea imaginii la orice rezoluție și este ideal pentru crearea cadrelor de animație. În Illustrator, puteți crea cadre de animație individuale pe straturi și apoi puteți exporta straturile de imagine ca cadre individuale pentru a fi utilizate pe site-ul dvs. web. De asemenea, puteți defini simboluriîn fișierul Illustrator pentru a reduce dimensiunea animației. La export, fiecare simbol este definit o singură dată în fișierul SWF.

Comanda de export (SWF)

Oferă cel mai mare control asupra animației și compresiei de biți.

Oferă mai mult control asupra combinației de formate SWF și bitmap într-un aspect fragmentat. Această comandă oferă mai puține opțiuni de imagine decât comanda Export (SWF), dar folosește ultimele opțiuni de comandă Export utilizate (vezi ).

Când pregătiți un obiect pentru salvare în format SWF, țineți cont de următoarele instrucțiuni.

Folosind aplicația Device Central, puteți vedea cum va arăta o grafică Illustrator în aplicație Flash Player pe diverse dispozitive portabile.

Inserarea unei grafice Illustrator

O grafică creată în Illustrator poate fi copiată și lipită rapid, ușor și ușor în Flash.

Când inserați o imagine Illustrator într-o aplicație Flash, următoarele atribute sunt păstrate.

Contururi și forme

• Grosimea cursei

  Definițiile gradients

  Text (inclusiv fonturi OpenType)

  Imagini înrudite

• Moduri de amestecare

În plus, Illustrator și Flash acceptă următoarele opțiuni atunci când inserați o imagine.

Când este selectat în obiect grafic Straturi de ilustrator nivel superiorîn întregime și lipindu-le într-o aplicație Flash, straturile și proprietățile lor (vizibilitate și blocare) sunt păstrate.

Formatele de culoare Illustrator, altele decât RGB (CMYK, tonuri de gri și formate personalizate) sunt convertite de Flash în format RGB. Culori RGB introdus în mod obișnuit.

Când importați sau inserați o imagine Illustrator, puteți utiliza diferite opțiuni pentru a salva anumite efecte (cum ar fi umbrele textului) ca filtre Flash.

Flash păstrează măștile Illustrator.

Exportați fișiere SWF din Illustrator

Fișierele SWF exportate din Illustrator se potrivesc cu calitatea și raportul de compresie ale fișierelor SWF exportate din Flash.

Când exportați, puteți alege dintr-o varietate de stiluri predefinite pentru rezultate optime și puteți specifica modul în care doriți să utilizați mai multe planșe și cum doriți să transformați simboluri, straturi, text și măști. De exemplu, puteți alege să exportați simbolurile Illustrator ca filme sau imagini graficeși crearea simbolurilor SWF din straturi Illustrator.

Importarea fișierelor Illustrator într-o aplicație Flash

Pentru a crea un aspect complet în Illustrator și apoi a-l importa în Flash într-un singur pas, puteți salva ilustrația în formatul nativ (AI) al Illustrator și o puteți importa cu precizie în Flash folosind comenzile Fișier > Import în Workbench" sau "Fișier". " > "Import în bibliotecă".

Dacă fișierul dvs. Illustrator conține mai multe planșe, selectați planșa de importat în caseta de dialog Import Flash și specificați setările pentru fiecare strat din acel plan de desen. Toate obiectele din tabloul de desen selectat sunt importate în Program flash ca un singur strat. Când importați o altă planșă din același fișier AI, obiectele din acea planșă sunt importate în programul Flash ca strat nou.

Când importați ilustrații Illustrator ca AI, EPS sau aplicație PDF Flash păstrează aceleași atribute ca atunci când este lipit obiecte grafice Ilustrator. În plus, dacă fișierul Illustrator pe care îl importați conține straturi, le puteți importa folosind una dintre următoarele metode.

Convertiți straturile Illustrator în straturi Flash.

Convertiți straturile Illustrator în cadre Flash.

Convertiți toate straturile Illustrator într-un singur strat Flash.

ÎN în ultima vreme Diverse tipuri de animații de grafică SVG (Scalable Vector Graphics) pe site-uri web și aplicații au devenit foarte populare. Acest lucru se datorează faptului că totul cele mai recente browsere acceptă deja acest format. Iată informații despre compatibilitatea browserului pentru SVG.

Acest articol discută cel mai simplu exemplu Animați vectori SVG folosind ușor Plugin Jquery Lazy Line Painter.

Pentru a finaliza și a înțelege pe deplin această sarcină, cunoștințele de bază despre HTML, CSS, Jquery sunt de dorit, dar nu sunt necesare dacă doriți doar să animați SVG) Să începem!

Și aceștia sunt pașii pe care trebuie să-i urmăm:

1. Creați structura corectă a fișierelor
Serviciul Initializr ne va ajuta în acest sens, unde trebuie să selectăm parametrii ca în imaginea de mai jos.

• Clasic H5BP (HTML5 Boiler Plate)
• Fără șablon
• Doar HTML5 Shiv
• Minimizat
• Clasele IE
• Cadrul Chrome
• Apoi faceți clic pe Descărcați-l!

2. Descărcați și conectați pluginul

Deoarece initializr vine cu cea mai recentă bibliotecă Jquery, din arhiva pe care trebuie să o descărcam din depozitul proiectului Lazy Line Painter, trebuie să transferăm doar 2 fișiere în proiectul nostru. Primul este „jquery.lazylinepainter-1.1.min.js” (versiunea pluginului poate diferi) este situat în rădăcina folderului rezultat. Al doilea este example/js/vendor/raphael-min.js.

Aceste 2 fișiere sunt plasate în folderul js. Și le conectăm la index.html înainte de main.js după cum urmează:

3. Desenați o imagine de contur cool în Adobe Illustrator

De exemplu, puteți utiliza pictogramele din atașament.

4. Convertiți imaginea noastră în Lazy Line Converter
Doar trageți pictograma în fereastra din imaginea de mai jos.
Grosimea, culoarea conturului și viteza de animație pot fi modificate în codul propriu-zis, care va apărea după conversie!

5. Lipiți codul rezultat în main.js
Acum doar lipiți codul rezultat în dosar gol main.js
Parametri:
strokeWidth — grosimea conturului
strokeColor — culoarea conturului
De asemenea, puteți modifica viteza de desenare a fiecărui vector prin modificarea valorilor parametrului durată (implicit 600)

6. Adăugați niște CSS după gust
Eliminarea unui paragraf din index.html

Salut Lume! Acesta este HTML5 Boilerplate.

Și în loc de acesta inserăm un bloc în care va avea loc animația noastră

apoi adăugați niște CSS la fișierul main.css pentru a-l face să arate mai frumos:

Corp ( fundal:#F3B71C; ) #pictograme (poziție: fix; sus:50%; stânga:50%; margine: -300px 0 0 -400px; )

salvați toate fișierele.
Acum deschideți index.html într-un browser modern și bucurați-vă de efect.

P.S. Când rulați pe o mașină locală, începerea animației poate fi întârziată cu câteva secunde.

Acum să complicăm puțin sarcina - să creăm un banner animat Flash. Desigur, nu este nevoie să vorbim despre animație Flash cu drepturi depline în acest caz - există pachete specializate pentru aceasta. Dar pentru a crea un videoclip simplu, amator, puteți folosi și Illustrator.

Nu există instrumente speciale sau caracteristici de interfață, cum ar fi o cronologie, care sunt tipice pentru programele de dezvoltare a animației din Adobe Illustrator. Dar există o subtilitate - puteți folosi straturi ca rame.

Creați un banner cu doar text.

Orez. 8.11. Meniul paletei Straturi

În acest meniu, ne interesează comanda Release to Layer (Secvență), care transferă fiecare obiect individual într-un nou strat. Vă rugăm să rețineți că atunci când aplicați comanda, grupul Grup este cel care trebuie selectat, și nu stratul Layer 1.

În Fig. 8.12.

Orez. 8.12. Paleta Straturi după executarea Eliberării în strat (secvență)

În acest moment, pregătirea este completă, puteți salva folosind Salvare pentru Web în SWF. SWF este principalul format grafic bazat pe tehnologiile Flash. Ar fi mai corect să spunem că acesta este formatul Flash (Fig. 8.13).

Probabil, astăzi toți utilizatorii sunt deja familiarizați cu Flash într-o măsură sau alta. În prezent, acesta este cel mai comun format de animație de pe Internet, cu ajutorul căruia sunt construite marea majoritate a paginilor de Internet multimedia.

Desigur, Adobe Illustrator nu implementează nici măcar o zecime din capabilitățile Flash, pentru că nu pentru asta este conceput programul. Cu toate acestea, în ea puteți realiza fie o imagine statică, fie o simplă animație.

Orez. 8.13. Setări de optimizare pentru formatul SWF

Sunt disponibile următoarele setări.

• Numai citire. Dacă bifați această casetă, fișierul va fi scris în așa fel încât să nu mai poată fi deschis pentru editare în niciun program. Acest lucru, pe de o parte, reduce dimensiunea fișierului și, pe de altă parte, vă protejează drepturile de autor.
• Setarea indicată de 1. Parametrul care specifică tipul de salvare - imagine sau animație.
• Dacă selectați opțiunea Fișier AI în fișier SWF fișier SWF), imaginea va fi salvată ca imagine statică, replicând complet ceea ce vedeți pe ecran când lucrați în Illustrator.
• Straturi în cadre SWF vă permite să creați animații bazate pe straturi existente, care vor fi reprezentate ca cadre. Trebuie să alegem această opțiune.
• Calitatea curbei. Precizia curbelor care repetă fișierul cu curbe al imaginii originale. Reducerea acestui parametru reduce semnificativ calitatea, mai ales în zona detaliilor mici, dar reduce și dimensiunea fișierului. Pentru cazul nostru, valoarea optimă este „7”.
• Frame Rate. Frecvența cadrelor și, ca rezultat, viteza animației. Pentru ca efectul să fie corect, setați-l la cel mult 4 cadre pe secundă.
• Buclă (Repetare). Redați animația în mod repetat. Potrivit pentru animații în care o buclă care se repetă este importantă. Bannerul aparține acestui tip.

Un GIF transparent în Adobe Illustrator este realizat după cum urmează. Accesați meniul Fișier > Salvare pentru web și dispozitive (Alt+Ctrl+Shift+S).

În fereastra care se deschide, în câmpul Format de fișier optimizat, trebuie mai întâi să accesați fila Dimensiune imagine. Faptul este că în mod implicit întreaga pagină este inclusă în fereastra de optimizare, iar acest lucru nu este de obicei necesar.

Prin urmare, în fila Dimensiune imagine, debifați caseta de selectare Clip to Artboard și faceți clic pe butonul Aplicați.

Apoi selectați GIF din lista de selecție a formatului și bifați caseta de selectare Transparență. După aceasta, vom determina ce culori vor fi transparente. Toate culorile prezente în imagine sunt conținute în fila Tabel de culori și sunt afișate ca pătrate colorate. Selectați instrumentul Eyedropper din bara de instrumente din partea stângă a ferestrei.(sau Ctrl). După ce ați ales o culoare, trebuie să instruiți programul să o facă transparentă. Pentru a face acest lucru, faceți clic pe pictograma Hărți culorile selectate la Transparent. În imagine, acest buton este încercuit, iar culoarea roșie este setată la transparent. O zonă transparentă va apărea în imagine, iar pătratul de pe tabelul de culori își va schimba aspectul - o parte din acesta va deveni un triunghi alb. Pentru a anula culoarea selectată, trebuie să o selectați în Tabelul de culori, apoi să faceți clic din nou pe pictograma Maps selected colors to Transparent.

Câteva cuvinte despre metoda de stabilire a transparenței. Este responsabil pentru meniul derulant Specificați transparența Dither Algorithm, în rusă - Algoritm pentru simularea transparenței (Fig. de mai jos). Există patru opțiuni: Nu Transparency Dither, Diffusion Transparency Dither, Pattern Transparency Dither și Noise Transparency Dither. În modul algoritm difuz, glisorul Cantitate devine activ, permițându-vă să modificați valoarea difuziei. Ce să aplici în practică? În funcție de scop și imagine. Nu folosesc această opțiune și o las întotdeauna la valoarea implicită - No Transparency Dither.

Faceți clic pe Salvare - GIF transparent gata. Lucrarea a fost efectuată în Adobe Illustrator versiunea CS4 (v.14), dar toate acțiunile și comenzile rapide de la tastatură sunt relevante și pentru versiunea anterioară CS3 (v. 13).

Salutare tuturor! Astăzi voi încerca să descriu posibilitățile programe Adobe Illustrator, comparându-l cu capacitățile Flash. Aceasta nu va fi o analiză globală a programului, ci mai degrabă o descriere a unor caracteristici interesante pe care le-am descoperit în acest program. Am adunat informații bucată cu bucată pe măsură ce le-am studiat pentru a posta totul într-o singură postare. Recunosc imediat că nu sunt un utilizator super-experimentat al Illustrator, l-am folosit doar pentru desen în ultimele șase luni (înainte de asta am desenat totul în Flash). Mulți oameni se plâng că ilustratorul este complex și nu întotdeauna intuitiv. Într-o oarecare măsură, sunt de acord că, după spălare, acest program este complex. Dar principalul lucru aici nu este să renunți, ci să continui să studiezi. Și după câteva săptămâni a apărut gândul, cum m-am descurcat fără el înainte!

Deci, ce mi-a plăcut la ilustrator și ce am găsit că nu era în flash?
1. Voi începe cu cel mai simplu, dar în același timp necesar. Încercați să aranjați obiectele într-un cerc în Flash. Anterior a existat un instrument Deco, dar a fost eliminat, aparent considerat inutil. Am decis că ar fi mai distractiv să o facem cu mâinile. Illustrator are această funcție: Effect – Distort&Transform – Transform.

Totul este rapid și simplu setăm noi înșine în setări valorile (distanța dintre obiecte, numărul de copii).

2. Zig-zag

Un lucru și mai simplu, dar totuși util. S-ar părea un lucru mic, dar în Flash trebuie să desenezi de mână, în Illustrator este o chestiune de secunde.

3. Deformarea obiectelor (Warp)

Nu există așa ceva în Flash. În exemplul de mai jos, am arătat doar 2 moduri de a deforma forme simple (Efect – Warp – Arc/Fish). De fapt, sunt 15 dintre ei ultima versiune programe.

4. Rotunjirea automată a colțurilor (Round Corners)

O poți face manual: pe un obiect grafic, atunci când este selectat, în colț (în toate colțurile) apar un punct alb și un semn de linie rotunjită. Tragem cu mouse-ul si il ajustam dupa gustul tau.

Dar acest lucru se aplică doar formelor, cu o linie de creion o facem puțin diferit - aplicăm un efect de rotunjire (Efect – Stilizare – Colțuri rotunjite). La ieșire obținem același rezultat.

5. Aspru

Efectul se aplică formelor simple (Efect – Distort&Transform – Roughen). Ieșirea este ceva asemănător modelelor 3D low-poli. Cred că este grozav :) Și, cel mai important, este foarte simplu.

6. Pucker&Bloat (Tragere și balonare)
Exemplu din imaginea de mai jos:

7. Extindere formular (Cale offset)

Flash are o funcție Expand Fill, nu funcționează deloc cu linii de creion, spre deosebire de Illustrator.

8. Pensule (Brush Art, Pattern Brush, Scatter Brush)
Privește imaginea de mai jos cu exemple:

9.Brush de textura

Illustrator are, de asemenea, multe pensule pentru textura, despre care am scris și cum au apărut noua versiune flash - . S-a observat că utilizarea periilor în Adobe Animate Se incetineste teribil. Iata cum merge :(

10. Nu sunt sigur dacă acesta este un truc adevărat, dar vreau să mă concentrez pe o pensulă cu numele amuzant Blob Brush. Situată în bara de instrumente, aceasta este o perie foarte plăcută de utilizat. Are o grămadă de setări, îmi place mai mult decât cea obișnuită. Este greu de explicat beneficiile sale în cuvinte, este mai bine să îl încerci o dată.

10.Split to Grid

Un alt lucru util este funcția Split to Grid (Object-Path-Split to Grid) Vă permite să tăiați forma în segmente egale. De ce ne amintește asta? Așa este - ferestre într-o clădire mare. Cred că este un lucru grozav să desenezi, de exemplu, peisaje de oraș;)

Un alt instrument util prezentat în Illustrator, probabil încă de la prima sa lansare. Cu ajutorul acestuia puteți crea, de exemplu, texturi de lemn:

12. Mutare (dreapta – Transformare – Mutare)

Deplasează un obiect cu o distanță specificată. Dacă doriți, puteți crea imediat o copie care va fi plasată la distanța dorită de obiectul selectat pe orizontală/sau verticală. O versiune anterioară de Flash avea un plugin care a făcut-o această funcție. Din păcate, nu-i amintesc numele.

Illustrator este foarte convenabil pentru a crea modele fără sudură (Object-Pattern-Make). Îmi amintesc cât de furioasă am dezvoltat rafinamentul în flash odată cu crearea lui . În versiunea SS 2015 a Illustrator, totul este automatizat, o grămadă de setări vă vor ajuta să creați un model în zeci de variații, având doar câteva la îndemână elemente grafice. În mai mult versiuni anterioare Toate programele trebuiau făcute manual, la fel ca în Flash până acum.

(Notă – modelul poate fi transformat într-un obiect editabil vectorial folosind funcția Object – Expand Appearance.

14. Mozaic obiect

Creare paleta de culori pe baza imaginii existente. Importați imaginea care vă place în ilustrație (Open), apoi Object – Create Object Mosaic. În setări specificăm frecvența de împărțire în înălțime și lățime.

Și la ieșire obținem:

15.Amestec

Folosit pentru a crea degrade. Puteți crea tranziții pas cu pas, cum ar fi în imagine. Nu voi spune că îl folosesc des, dar poate fi util cuiva. Mi se pare că poate fi folosit pentru a crea imagini de fundal simple.

Instrumentul poate fi folosit și pentru a clona obiecte. Așezați două obiecte la distanță unul de celălalt și aplicați Opțiuni de amestecare, selectați numărul de pași (numărul de obiecte clonate).

16. Build Shape Tool.

Un lucru foarte convenabil pentru lucrul cu primitivi. În flash, mi s-a părut, era mai puțin convenabil.

Țineți apăsat Alt și faceți clic pe segmentele selectate pentru a șterge segmentele. Dacă pur și simplu tragem mouse-ul peste mai multe zone selectate - conexiuni.

Add-on este un instrument care ajută la tăierea, conectarea automată etc. forme evidenţiate. În ceea ce mă privește, nu este foarte convenabil, folosesc adesea instrumentul Build Shape.

(planșe de artă)

18.Custom Tool Panel

În Flash, planurile de artă, și anume scenele (Scena 1,2,3..) sunt situate separat și trebuie să comutați între ele (Shift+F2). În Illustrator, toate pot fi plasate în fața ochilor tăi. Este convenabil când faci mai multe versiuni ale aceluiași desen, astfel încât toate opțiunile să fie în fața ochilor tăi pentru comparație.

19.Izometrici folosind Stiluri grafice

Iar ultimul lucru este crearea izometriei fără a o folosi într-un clic (sau mai exact, în 3 clicuri, pentru că avem 3 fețe;) folosind stiluri grafice (Graphic Styles). Voi descrie cum se face asta data viitoare.

Ceea ce ilustratorul are în comun cu flash este capacitatea de a salva un obiect într-un simbol și, la fel de ușor, acest simbol poate fi transferat în flash (deschideți fișierul în flash.ai folosind Import – Import to stage).
Simbolul din Illustrator are aceleași proprietăți ca și în Flash.
Și în concluzie, voi scrie că în Illustrator, după părerea mea, este inferior flash-ului. Da, da, există așa ceva. Și acesta este instrumentul de umplere (Paint Bucket). Indiferent cât de mult încerc să mă obișnuiesc în Illa, este mai convenabil în Flash.
Dacă notele mele ți-au devenit utile sau dacă vrei să adaugi ceva propriu, bine ai venit în comentarii! Succes tuturor ;)