Cum de a crea un ilustrator de animație și sprite. Crearea de animații în Illustrator

Salutare tuturor! Astăzi voi încerca să fac o descriere a caracteristicilor programului Adobe Illustrator., comparând-o cu caracteristici flash. Nu va fi o etanșare globală a programului osos, ci mai degrabă o descriere a unor jetoane interesante pe care le-am descoperit pentru mine în acest program. Informațiile au fost colectate în bucăți ca învățând să stabilească totul într-un singur post. Imediat mă mărturisesc că nu sunt un utilizator ilustrator super-experimentat, doar în ultimele șase luni îl folosesc în desen (înainte ca totul să fie desenat în blițul dvs.). Mulți asigură că ilustratorul este complex, intuitiv nu întotdeauna ușor de înțeles. Într-o oarecare măsură, sunt de acord că după un bliț, acest program este complicat. Dar atunci principalul lucru nu este de a renunța, ci pentru a continua învățarea. Și după câteva săptămâni, apare un gând, cum am făcut-o fără ea!

Deci, ceea ce mi-a plăcut într-un ilustrator și că am găsit-o pentru mine, ceea ce nu este în bliț.
1. Voi începe cu cele mai simple, dar în același timp aveți nevoie. Încercați să plasați obiecte într-un cerc. Mai devreme a fost Deco instrument. Dar a fost eliminat, aparent, numit inutil. Ei au decis că mânerele o fac mai distractivă. Într-un ilustrat, această caracteristică este: Efect - Distorsion & Transform - Transformare.

Toate rapid și simplu, valorile (distanța dintre obiecte, numărul de copii) Specificați singuri setările.

2. Zig-zag

Încă mai simplu, dar totuși un lucru util. Ar părea un pic, dar în același timp trebuie să trageți manual, într-un ilustrat acesta este un al doilea lucru.

3. Deformarea obiectelor (warp)

Nu există nimic de genul ăsta în bliț. Pe exemplul de mai jos am arătat doar două moduri de deformare a formelor simple (efect - warp - arc / pește). De fapt, 15 lor în ultima versiune Programe.

4. rotunjirea automată a colțurilor (colțuri rotunde)

Puteți face manual: pe obiectul grafic în timpul izolării în colț (în toată glanda) există un punct alb și un semn de linie federală. Am tras mouse-ul, ajusta la gustul tău.

Dar acest lucru se referă numai la forme, cu o linie de creion puțin diferit - aplicați efectul rotunjirii ( Efect - stiliza - colțuri rotunde). La ieșire obținem aceeași putere.

5. Croughen (ulei)

Efectul se aplică K. forme simple (Efect - Distorsion & Transform - Roughen). La priza, obținem ceva asemănător modelelor 3D cu nivel scăzut. În opinia mea, rece :) și cel mai important - foarte simplu.

6. PUCKER & BLOAT (Tragerea și umflarea)
Un exemplu în imaginea de mai jos:

7. Formularul de expansiune (traseul offset)

În bliț există o funcție de umplere Expand (Extinderea umplerii), cu linii creionului nu funcționează deloc, spre deosebire de Illustrator.

8. Perii (perie de artă, perie de model, perie de împrăștiere)
Nu arătăm nici o imagine de mai jos cu exemple:

9.Pentru (pensule textural)

De asemenea, în ilustrator există o mulțime de perii texturate, pe care am scris-o și cum au apărut versiune noua Flash. Sa observat că utilizarea perii în Adobe Animate este inhibită înfricoșătoare. Asta este:(

10. Nu sunteți sigur că este un truc drept, dar vreau să rămân la ciucuri cu un nume amuzant Blob.Perie.. Situat pe bara de instrumente, foarte plăcut să utilizați peria. Are o grămadă de setări, îmi place mai mult decât de obicei. În cuvinte, este greu de explicat despre avantajele sale, este mai bine să încerci o dată.

10.Split la grilă.

De asemenea, un lucru util - caracteristica divizată în rețea (împărțirea obiectului-împărțită în rețea). Localnicii tăie forma pe segmente egale. Ce ne reamintesc acest lucru? Dreapta - ferestre într-o clădire în creștere. În ceea ce mă privește, o piesă rece pentru desen, de exemplu, peisaje urbane;)

Mai ales un instrument util prezentat într-un ilustrator, probabil de la prima sa eliberare. Cu aceasta, puteți crea, de exemplu, textura lemnului:

12. Mutare (dreapta - transformare - mișcare)

Obiect offset la o distanță predeterminată. Dacă doriți, puteți crea imediat o copie care va fi plasată la distanța dorită de obiectul orizontal sau obiect vertical selectat. În versiunea anterioară a blițului a fost pluginul care a fost efectuat această caracteristică. Din păcate, nu-mi amintesc numele.

Într-un ilustrator, este foarte convenabil să se creeze modele fără sudură ( Obiect-model-make). Îmi amintesc cum am sofisticat frenetic într-un bliț cu creația. În versiunea SS 2015 Ilusr, totul este automatizat, o mulțime de setări vor ajuta la modele orb în zeci de variații, având doar mai multe elemente grafice la îndemână. În versiunile anterioare ale programului, toată lumea a trebuit să facă manual, ca în același timp până acum.

(Nota - modelul poate fi realizat de un obiect vector editabil folosind o funcție de dezasamblare ( Obiect - Extindeți apariția).

14. Obiect mozaic (mozaic)

Crearea unei palete de culori bazată pe imaginea disponibilă. Importați fotografia dvs. preferată în bolnav (deschis), apoi Obiect - Creați obiecte mozaic. În setări, specificați frecvența de fisiune în înălțime și lățime.

Și ajungem la ieșire:

15.blend (amestecare)

Folosit pentru a crea gradienți. Puteți crea tranziții pas cu pas, cum ar fi în imagine. Nu voi spune că o folosesc adesea, dar poate veni la îndemână cuiva. Mi se pare că puteți folosi în crearea de imagini de fundal simple.

De asemenea, instrumentul poate fi utilizat pentru a clona obiecte. Plasați două obiecte la o distanță una de cealaltă și aplicați opțiunile de amestecare, selectați numărul de pași (numărul obiectelor clonate).

16. Instrumentul de instrument de construire a formei. Lucru foarte confortabil de a lucra cu primitivi. În bliț, așa cum mi se părea, mai puțin convenabil.

Dacă faceți clic pe Alt și faceți clic pe segmente dedicate - Ștergeți segmentele. Dacă pur și simplu întindeți mouse-ul pe mai multe zone dedicate - Conectați-vă.

Supliment - un instrument care ajută automat la întreruperea, conectarea etc. Forme selectate. În ceea ce mă privește, nu este foarte convenabil, folosesc mai des ConstruiFormăInstrument.

(zone de montare)

18. Panou de unelteCustom.

Abilitatea de a vă crea propria bară de instrumente, aruncând inutile și alegeți numai cele pe care le utilizați.

În zonele de montare, și anume scene ( Scena 1,2,3 ..) Situat separat și între ele trebuie să comutați (Shift + F2). În ilustrator, ele pot fi plasate în fața ochilor lor. În mod convenabil, când faceți mai multe opțiuni pentru aceeași imagine, astfel încât toate opțiunile să fie în fața ochilor noștri pentru comparație.

19. Isometric cu stiluri grafice

Iar acesta din urmă este crearea de izometrică fără utilizare în 1 clic (și mai precis, în 3 clicuri, deoarece avem 3 laturi;) cu stiluri grafice ( Stiluri grafice.). Cum se face, voi scrie data viitoare.

În general, cu un bliț de la ilustrator - capacitatea de a salva un obiect în simbol (simbol) și, de asemenea, fără probleme, poate fi transferat la bliț (deschis în fișierul flash.ai Import - Import în etapă).
Caracterul din ilustrator are aceleași proprietăți ca și în bliț.
Și la sfârșit voi scrie că în ilustrator, în opinia mea, este inferior pentru clipă. Da, da, și asta este. Și acesta este instrumentul de umplere ( Galeata de vopsea.). Deoarece nu încerc să mă obișnuiesc cu ea în Ille, într-o furitate este mai convenabilă.
Dacă notele mele au devenit utile pentru dvs. sau pentru ceea ce doriți de la dvs. pentru a completa - Velkov în comentarii! Noroc tuturor;)

Recent, grafica SVG animație (grafică vectorială scalabilă) pe site-uri și aplicații a devenit foarte populară. Acest lucru se datorează faptului că totul noi browsere Susțineți deja acest format. Aici sunt informații pentru susținerea browserelor SVG.

Acest articol discută cel mai simplu exemplu animație svg. vectori asistență ușoară Plugin jquery. Pictor de linie leneș.

Cod sursa

Pentru a îndeplini și înțelege înțelegerea acestei sarcini, cunoașterea de bază a HTML, CSS, jQuery, dar nu neapărat dacă doriți doar să animați SVG) Să mergem în sus!

Și astfel pașii pe care trebuie să le îndeplinim:

Creați structura corectă a fișierelor
Descărcați și conectați pluginul
Desenați o imagine de contur rece în Adobe Illustrator
Conversia fotografiei noastre în convertorul leneșului
Introduceți codul rezultat în principal.js
Adăugați unele css la gust

1. Creați structura corectă a fișierelor
Cu aceasta, acest lucru va ajuta serviciul inițializator unde trebuie să selectați parametrii ca în imaginea de mai jos.

Classic H5BP (placa cazanului HTML5)
Nici un șablon.
Doar shiv html5.
Minificat
Adică carses.
Cadru cromat.
Apoi faceți clic pe Descărcați-l!

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

Deoarece inițializatorul vine cu cea mai recentă bibliotecă JQuery, de la arhiva pe care trebuie să o descărcați din depozitul de proiect Lazy Line Painter, trebuie să transferați doar 2 fișiere în proiectul nostru. Primul este "jQuery.LazyLelPainter-1.1.Min.js" (versiunea plug-in poate diferi) este în rădăcina dosarului rezultat. Al doilea este exemplul / JS / Vendor / Raphael-Min.js.

Aceste 2 fișiere sunt plasate în dosarul JS. Și conectați-le la index.html în fața principală.js după cum urmează:

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

Ne tragem imaginea de contur în ilustrator (cea mai ușoară cale de a face cu instrumentul Pen)
Este necesar ca conturul desenului nostru să nu închidă TC pentru efectul nostru. Începutul și sfârșitul
Nu ar trebui să existe o umplere
Dimensiune maximă a fișierului - 1000 × 1000 px, 40kb
Decuparea pentru obiectul obiectului\u003e Articole de artă\u003e Fit la limitele de artă
Salvați în format SVG (setările standard de salvare sunt potrivite)

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

4. Conversia fotografiei noastre în convertorul leneșului
Doar glisați pictograma în fereastră care în figura de mai jos.
Grosime, culoarea circuitului și viteza de animație pot fi modificate în codul în sine, care va apărea după conversie!

5. Introduceți codul rezultat în principal.js
Acum introduceți pur și simplu codul primit în fișierul principal principal.js
Parametrii:
Strikewidth - Grosimea conturului
StrokeColor - Color contur
De asemenea, puteți schimba viteza de desenare a fiecărui vector prin schimbarea valorilor parametrului de durată (implicit 600)

6. Adăugați unele css la gust
Eliminați din paragraful index.html

Salut Lume! Acesta este un boiler html5.

Și în loc de ea introduceți blocul în care va apărea animația noastră

apoi adăugați unele CSS în fișierul principal.css pentru un design mai plăcut:

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

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

P.S. Când porniți pe mașina locală, începerea animației începe pentru câteva secunde este posibilă.

Optimizarea grafică web

Informațiile grafice sunt transmise mult mai lent decât textul, iar timpul de încărcare a imaginii este proporțional cu dimensiunea fișierelor lor grafice. prin urmare descarcare rapida Paginile web implică o dimensiune mică de imagini grafice încorporate în ele, care se realizează prin optimizarea lor. Sub optimizarea imaginii, este înțeleasă prin convertirea sa care asigură dimensiunea minimă a fișierului, menținând în același timp cerințele necesare acest caz Calitatea imaginii, care se realizează în primul rând prin reducerea numărului de culori în imagini grafice, utilizarea formatelor de fișiere comprimate și speciale și optimizarea parametrilor de compresie pentru fragmente individuale de imagine.

Illustrator are instrumente de optimizare a imaginilor încorporate, oferind diverse metode de previzualizare o implementare rapidă și eficientă a procesului de optimizare. previzualizare Oferă o viziune destul de precisă a modului în care imaginea optimizată va arăta în timp real, ceea ce ajută la estimarea rezultatului de optimizare și selectați cu succes setările dorite. Și puteți optimiza ambele imagini create direct în programul Illustrator și altele, cum ar fi fotografiile care ar trebui să fie plasate pe site-ul web.

Opțiunile de optimizare sunt setate în fereastră Salvați-vă Web. (Salvarea pentru Web) cauzată de comenzi la meniu Fişier (Fişier). Programul propune utilizarea uneia dintre cele patru moduri de previzualizare, dar pentru a evalua calitatea optimizării cel mai bun mod Două sunt potrivite:

2-sus. (două opțiuni) - vizualizarea simultană a imaginii originale și optimizate în conformitate cu setările specificate (figura 1);
4-up. (Patru opțiuni) - În acest mod, fereastra de vizualizare este împărțită în patru ferestre (figura 2) pentru a afișa imaginea originală și trei versiuni ale optimizat: prima versiune este creată pe baza valorilor de optimizare instalate, iar celelalte două sunt Opțiuni pentru setările actuale de optimizare.

Ambele moduri vă permit să economisiți în mod semnificativ timp pentru a găsi o opțiune de optimizare mai bună, pe măsură ce salvați de la nevoia de a salva imaginile de la setări diferite Optimizarea și compararea lor vizuală ulterioară. În plus, este posibil să se evalueze nu numai calitatea imaginii optimizate, ci și de dimensiunea și timpul de încărcare cu diferite opțiuni de conectivitate. Pentru comparație, modul 4-Up este cel mai convenabil (patru opțiuni), permițându-vă să evaluați vizual efectul de comprimare sau să reduceți paleta pe calitatea imaginii și dimensiunea acestuia și să determinați în cele din urmă cei mai buni parametri de optimizare.

Illustrator vă permite să optimizați graficele web în formatele nu numai GIF, JPG, PNG-8 și PNG-24, ci și în SWF și SVG. Imaginile indexate având. o cantitate mică de Culorile sunt salvate în format GIF. Pentru a păstra imaginile cu culori pline și pe jumătate - fotografii și grafice culori, cum ar fi umpluturile de gradient, sunt utilizate formatul JPG.. Pentru imagini color complete cu site-uri transparente aplicate format PNG.care vă permite să salvați imagini indexate și color complete, în timp ce în formatul PNG-8, numărul maxim posibil de culori ale imaginii optimizate este de 256 și în formatul PNG-24, imaginea poate avea milioane de culori și Prin urmare, se pare că formatul JPEG.. Diferența dintre PNG-24 de la JPEG este că metoda de compresie este utilizată pentru optimizarea imaginilor în format PNG-24 nu duce la pierderea calității, dar, ca rezultat, dimensiunea fișierului este în creștere. Formatele SVG și SWF combină datele grafice, textul și componentele interactive și pot fi, de asemenea, optimizate.

Luați în considerare un exemplu specific de optimizare a imaginii. Să presupunem că programul Illustrator a dezvoltat un emblem de site (fig.3), salvat inițial în format AI. O încercare de ao optimiza imediat pentru web nu va duce la nimic bun, deoarece în acest caz va exista circumcizie automată a imaginii în care poziția reală obținută ca urmare a deformării inscripției nu va fi luată în considerare ( Figurile 4 și 5).

Deci, să încercăm să exportăm emblema în formatul PSD. Echipă Fișier \u003d\u003e Export (File \u003d\u003e Export) - Dimensiunea imaginii create va fi de 143 Kb. Deschideți fișierul PSD rezultat și utilizați comanda Fișier \u003d\u003e Salvare pentru web (File \u003d\u003e Salvare pentru Web). Având în vedere numărul limitat de culori implicate în imaginea în acest caz, formatul GIF este optim, cu setările specifice ale căror și de care trebuie să decideți. Experimentarea cu setările, vă puteți asigura că cea mai bună calitate oferă algoritmul de compresie selectat selectat de programul implicit Selectiv (Selectiv). În ceea ce privește netezirea, având în vedere prezența gradientului umple, este mai bine să alegeți un algoritm cu generarea de zgomot - Zgomot. (Figura 6). Dimensiunea optimizării fișierelor rezultate va fi de 6.729 kb (fig.7), în timp ce transparența de fond va fi salvată, care este ușor să se asigure că salvați imaginea în formatul GIF împreună cu fișierul HTML (fig.8). Ca rezultat, în acest exemplu, fișierele Emblem.html și Emblem.gif au fost primite în dosarul Primer1.

Butoane

Un element de design specific indispensabil al oricărei pagini web sunt controale grafice - butoane. Este pur și simplu imposibil să vă imaginați o pagină fără ei. Butoanele de desen astăzi a devenit un gen special, iar Illustrator vă permite să creați cele mai complicate opțiuni. De exemplu, butoanele decorate ca obiecte de rețea și (sau) cu impunerea măștilor, arată mult mai eficient obișnuit.

Luați în considerare opțiunea de a crea un buton convex circular în programul Illustrator. Desenați obiectul vectorial sub forma unui cerc cu o culoare arbitrară (figura 9) și convertiți-o la o comandă de grilă Obiect \u003d\u003e Creați o plasă de gradient (Obiect \u003d\u003e creați o grilă de gradient), specificând patru linii și patru coloane și în listă Aspect (View) prin alegerea opțiunii La centru. Pune in evidenta (Lumina de fundal) egală cu 60 (figura 10). Selectați un instrument Selecție directă și faceți clic în colțul din stânga sus al obiectului selectând punctele nodale acolo (figura 11). Schimbați culoarea celulei corespunzătoare pe alb, alegându-l în paletă Swatches. (Figura 12).

Luați instrumentul Elipsă (Ellipse), setați marcajul mouse-ului la centrul creat înainte de acest cerc și menținând cheile Alt. și Schimb., Întindeți un nou cerc pe partea de sus a vechiului astfel încât să se dovedească a fi mai vechi pe 1-2 pixeli din toate părțile. Face granița ei neagră ( Accident vascular cerebral.) Lățimea de 1-2 pixeli și turnați gradientul radial spre roșu la alb (figura 13). Trageți obiectul vectorial creat pe 1-2 pixeli spre dreapta și în jos, apoi, fără a scoate selecția, faceți clic pe acesta cu butonul din dreapta al mouse-ului și selectați comanda din meniul contextual. Aranja \u003d\u003e Trimiteți înapoi (Sort \u003d\u003e Trimiteți înapoi). Ca rezultat, se oprește un necompletat pentru butonul prezentat în fig. paisprezece.

De regulă, există mai multe butoane similare pe orice pagină web care diferă, de exemplu, numai direcția săgeților trasă pe ele, adică direcția mișcării de-a lungul site-ului. Luați în considerare cel mai simplu caz de prezență a două butoane, dintre care una, cu săgeata în jos, va însemna să se deplaseze pagina următoare, Și butonul săgeată sus este pe cea anterioară. Ca săgeată de recoltare, luăm un triunghi convențional tras de un instrument Poligon. (Poligon), vopsit în negru și pentru un efect mai mare, decorat ca obiect de grilă. Deplasați săgeata de pe buton și ajustați poziția tuturor obiectelor unul față de celălalt reciproc utilizând butoanele de palete corespunzătoare. Alinia. (Aliniere). Primul dintre butoanele obținute este prezentat în fig. 15. Vom copia un strat cu un buton selectând comanda Strat duplicat. Straturi.- Ca rezultat, primim două straturi identice. Apoi, pe copiile stratului, selectați săgeata și rotiți-o de 180 ° selectând comanda din meniul contextual Transformare \u003d\u003e rotiți - Transformare \u003d\u003e Rotire. Obținem același buton așa cum se arată în fig. 16. Rețineți că este mult mai convenabil să stocați toate aceleași butoane de proiect pentru a stoca într-un singur fișier pe diferite straturi, care sunt demonstrate în acest caz.

Acum trebuie să salvați opțiunile optimizate pentru fiecare dintre butoane. La început, faceți un strat de fund invizibil - în acest caz, butonul de pe stratul superior va fi salvat. Alege echipa Fișier \u003d\u003e Salvare pentru web (File \u003d\u003e Salvare pentru Web), configurați opțiunile de optimizare a butonului, de exemplu, așa cum se arată în fig. 17 Faceți clic pe buton Salvați. (Salvați) și introduceți numele fișierului. Butonul salvat în cele din urmă este prezentat în fig. 18. Acum returnați vizibilitatea cu stratul inferior, iar partea superioară va fi invizibilă și în același mod, salvați al doilea buton, specificând un alt nume pentru aceasta. Rezultatul este prezentat în fig. nouăsprezece.

Acum rămâne să vă asigurați că butoanele sunt destul de acceptabile, vă uitați la pagina web și plasați-le pe o pagină arbitrară (figura 20). Ca rezultat, în acest exemplu, fișierele Primer2.html au fost obținute în două imagini grafice din dosarul Imagini. Primer2.).

Dacă se dorește, în procesul de optimizare, butonul este ușor de transformat într-o felie. În acest caz, după selectarea comenzii Fișier \u003d\u003e Salvare pentru web (File \u003d\u003e Salvare pentru Web) și setarea opțiunilor de optimizare trebuie selectate din paleta Tool Tool Slice Selectați.(Alocarea felie) și faceți dublu clic pe imagine, care va deveni automat automat într-un diapozitiv cu un număr de secvență 1 (figura 21). Faceți dublu clic pe mouse-ul va duce la deschiderea ferestrei Slice Opțiuni. (Opțiuni de la Slace), în care va fi necesară specificarea legăturii și, dacă doriți, modificați numele slicerului (figura 22), apoi salvați imaginea optimizată. Rezultatul în acest caz va fi fișierele de primer33.html (figura 23) și primer3.gif (dosarul Primer3).

Elemente interactive

Una dintre modalitățile de revitalizare a paginii este introducerea elementelor de design care își schimbă aspect (sau condiție) în funcție de comportamentul mouse-ului sau, mai puțin probabil, în cazul oricăror alte situații: scalare, derulare, încărcare, apariție de eroare etc.

Printre astfel de elemente, Rollovers au primit cea mai mare faimă (de la limba engleză. Rulați peste) - elemente care schimbă aspectul sub influența mouse-ului. Exemple de roluri tipice sunt butoane animate. Rollovers sunt adesea folosite și atunci când creează alte elemente de navigație ale site-ului. De fapt, orice rollover nu este unul, ci mai multe (până la patru) imagini, fiecare din care corespunde unui anumit eveniment. Evenimentele principale sunt obișnuite după cum urmează: Normal - stare normală, depășind cursorul mouse-ului la element și în jos - apăsând butonul stâng al mouse-ului atunci când plutiți cursorul. Teoretic, evenimentele pot fi implicate ca clic - Eliberați butonul stâng al mouse-ului după apăsarea, sus - după eliberarea butonului, out - când ieșiți din zona activă. Cu toate acestea, în practică, este mai des limitat la modificările elementului numai pe primele trei sau chiar două evenimente.

Clasic Rolver.

În înțelegerea clasică, rolloverul este o serie de imagini grafice în format GIF și codul HTML corespunzător, datorită cărora, în funcție de comportamentul mouse-ului, o imagine este înlocuită de un altul în fereastra browserului.

Programul Illustrator nu este destinat să creeze direct roluri în înțelegerea lor clasică, dar poate ajuta la dezvoltarea elementelor inițiale pentru ele. Ideea în acest caz este că trebuie să creați un strat cu o imagine corespunzătoare primului eveniment. Apoi faceți o copie a stratului și transformați imaginea astfel încât să corespundă celui de-al doilea eveniment etc. Imaginea multistrat rezultată este exportată în fișierul PSD cu conservarea straturilor, pe baza cărora rula este creată în programul de imagine gata. Plus utilizarea programului Illustrator, ca și în multe alte cazuri, este o serie de oportunități interesante inaccesibile în altele software., în colaborare cu confortul grafică vectorială de transformare.

Să încercăm să creăm o răsturnare sub forma unei inscripții care schimbă culoarea în funcție de comportamentul mouse-ului. Deschideți ilustratorul și creați o formă sub forma unui dreptunghi rotunjit și negru (figura 24), faceți o copie și plasați-o în partea liberă a ecranului. Conversia primei copie a dreptunghiului la un obiect de rețea cu iluminare în centru (echipa Obiect \u003d\u003e Creați o plasă de gradient - Obiect \u003d\u003e Creați o grilă de gradient), specificând patru linii și zece coloane (figura 25). Activați a doua copie a dreptunghiului și ajustați umplerea gradientului după cum urmează după cum se arată în fig. 26. Verificați obiectul de gradient deasupra grilajului, reduceți opacitatea obiectului de gradient la aproximativ 80%, iar dimensiunea este de aproximativ 1 pixel, astfel încât în \u200b\u200bcele din urmă să se sinteografice efectul bulgii. Și apoi imprimați inscripția deasupra obiectelor. În forma originală, lăsați-o să aibă o culoare albă care să corespundă stării normale (fig.27), iar apoi la schimbarea statutului de răsturnare, culoarea inscripției se va schimba, de exemplu, pe verde - când tu Plasați marcatorul de mouse pe el (peste stat) și pe albastru - când apăsați butonul mouse-ului (starea în jos).

Acordați atenție paletei Straturi. - În această etapă există doar un singur strat în el. Faceți două exemplare ale acestui strat prin aplicarea comenzii. Strat duplicat. (Strat duplicat) din meniul paletei Straturi.- Trei straturi vor deveni în paletă (figura 28). Apoi, în prima copie a stratului, schimbați culoarea inscripției pe verde și în al doilea - pe albastru (figura 29). Ca rezultat, va fi obținută piesa de prelucrat necesară pentru rollover.

Exportați imaginea creată în format PSD cu conservarea straturilor utilizând comanda Fișier \u003d\u003e Export (File \u003d\u003e Export) și selectarea modelului de culoare RGB (figura 30). Deschideți fișierul PSD creat în programul ImageReady (Figura 31 și 32). Creați cadre bazate pe straturi selectând comanda Face cadre din straturi (Creați cadre din straturi) din meniul paletei Animaţie.. Fereastra de animație va arunca o privire ca în fig. 33. În același timp, în paletă Rollovers Inițial, va fi creată o singură stare de normal.

Apoi, în fereastră Animaţie.selectați cadrul corespunzător stării indus, în timp ce în paletă Straturi. Se evidențiază automat stratul Layer 1 Copie (Fig.34). Du-te la paletă Rolloversși faceți clic pe buton Creați starea de răsturnare (Creați o condiție de răsturnare) - Fig. 35, care va duce la apariția unui stat Peste statÎn paletă Rollovers(Fig.36). În mod similar, creați o stare În jos de stat. Activați starea Normal În paletă Rollovers Și eliminați în paletă Animaţie. Toate cadrele, în plus, care trebuie să corespundă statului Normal. Ca rezultat, pentru fiecare stat de Rolovover în paletă Animaţie.va exista doar un singur cadru (fig.37, 38 și 39).

Smochin. 38. Vizualizați imaginea, ferestrele de animație și straturile și paletele de răsturnare pentru starea de stare

Verificați rezultatul făcând clic pe buton Previzualizare în browserul implicit (Previzualizare în browser) pe bara de instrumente și transformarea în fereastra browserului (figura 40). După aceea, salvați fișierul prin aplicarea comenzii. Fișier \u003d\u003e Salvare optimizată (File \u003d\u003e Salvare cu optimizare) și specificarea opțiunii HTML și imagini (* .html). Ca rezultat, în acest exemplu, fișierul Primer4.html și o serie de imagini grafice din folderul Imagini au fost obținute.

Smochin. 40. Fereastra browserului cu elementul de răsturnare

SVG Rolovier.

Formatul popular SVG (grafică vectorială scalabilă - scalabilă grafică vectorială), create pe baza standardului XML, vă permite, de asemenea, să obțineți o varietate de elemente interactive, în special în practică, numai în practică este implementat complet diferit. Este demn de remarcat faptul că crearea de Rollovers interactive SVG, spre deosebire de clasic, când codul HTML corespunzător este generat complet automat, necesită cunoștințe limba JavaScript. și înțelegerea principiilor de bază ale programului orientat pe obiecte.

Paleta specială este concepută pentru a lucra cu obiecte SVG. SVG interactivitatecare este ușor de deschis cu ajutorul echipei Fereastră \u003d\u003e Interactivitate SVG (Fereastră \u003d\u003e Interactivitate SVG) - Fig. 41.

Luați în considerare această opțiune pentru crearea rolloverului pe un exemplu de buton interactiv, culoarea inscripției se va schimba de la negru la albastru atunci când deplasați mouse-ul și convertiți din nou în negru când mouse-ul este în afara zonei active.

Creați un buton dreptunghiular cu marginile rotunde și ridicați un gradient adecvat umpleți-l, de exemplu, așa cum se arată în fig. 42. Reglați transparența butonului din paletă Transparenţă (Transparență) - în acest exemplu, valoarea parametrului Opacitate (Opacitate) setat la 50%. Faceți o copie a butoanelor, umpleți-o cu verde închis (figura 43), apoi convertiți-o la comanda obiectului de grilă Obiect \u003d\u003e Creați o plasă de gradient(Obiect \u003d\u003e creați o grilă de gradient), specificând patru linii și zece coloane și în listă Aspect(View) prin alegerea opțiunii La centru. (La centru) și stabilirea valorii Pune in evidenta (Lumina de fundal) egală cu 100. Reduceți opacitatea stratului cu un obiect de rețea cu privire la 11% (fig.44). Așezați obiectul de grilă peste gradient, iar butonul va fi reamintit în fig. 45.

Smochin. 44. Întorcând o copie a butonului la obiectul grilă

Completați butonul inscripției propuse și ajustați poziția acestuia utilizând butoanele de palete corespunzătoare. Alinia. (Aliniere). Imaginea rezultată va conține un strat cu trei obiecte suprapuse reciproc (fig.46). Evenimentele programate se vor referi la obiectul de text, deci pentru comoditate, schimbați numele său TEXT.Făcând dublu clic pe obiect și introducerea unui nou nume. Schimbați în mod similar numele stratului cu Stratul 1 pe strat (Fig.47).

Procesarea evenimentelor implică utilizarea procedurilor JavaScript, deci trebuie să conectați un fișier cu o descriere a acestor proceduri. Se numește evenimente.js și salvat pe disc în dosarul de eșantionare \\ eșantion art \\ svg \\ svg la instalare programe Adobe. Ilustrator. Pentru a conecta fișierul evenimente.js, utilizați comanda Fișiere JavaScript. SVG interactivitate (Figura 48). În continuare trebuie să faceți clic pe Adăuga. (Adăugați) și găsiți fișierul dorit de pe hard disk. Când numele său apare în câmp URL. (Figura 49), faceți clic pe buton Terminat (Ieși).

Smochin. 48. Selectarea echipei de fișiere JavaScript

După aceasta, determinați reacția la evenimentele de șoarece pentru obiect TEXT.. Selectați obiectul de text din câmp Eveniment (Eveniment) palete SVG interactivitate Selectați evenimentul onmouseover. elemcolor (EVT, textul "," # 33333FF ") - Va însemna că atunci când găsiți un șoarece peste obiect TEXT.culoarea sa se va schimba la albastru (figura 50). Pentru a face textul textului după introducerea zonei active, culoarea textului sa schimbat pe negru, va fi necesar să creați un alt eveniment. onmouseut.- Selectați-l în câmp Eveniment (Eveniment) palete SVG interactivitate. Apoi introduceți textul în rând elemcolor (EVT, textul "," # 000000 ")- Aceasta va duce la întoarcerea culorilor negre (figura 51).

Smochin. 51. Vizualizarea finală a paletei de interactivitate SVG pentru textul obiectului

Salvați Rolloverul creat ca o comandă de fișier SVG Fișier \u003d\u003e Salvați ca (File \u003d\u003e Tip fișier format SVG.Și apoi configurarea opțiunii de salvare a fișierelor SVG așa cum se arată în fig. 52. După salvare, va fi primit un singur fișier cu extensia SVG și nu două, ca în cazul unui rollover clasic, - în acest caz, fișierul de primer5.svg a fost obținut (dosarul Primer5). Cu toate acestea, pentru ca răsturnarea să funcționeze într-adevăr, este necesar să copiați fișierul evenimentelor.js cu descrierea JavaScript în folderul cu fișierul SVG. După aceasta, puteți verifica performanța rolei - rezultatul va arăta ca arătat în fig. 53.

Animație svg.

Formatul SVG poate fi folosit pentru a transmite animație. Să încercăm să creăm cel mai simplu element de animație (în acest caz, vor fi informații despre companie), care va apărea pe ecran atunci când deplasați mouse-ul la obiectul grafic corespunzător și dispar la scoaterea mouse-ului de la elementul interactiv.

Creați o astfel de serie de obiecte grafice și text, așa cum se arată în fig. 54. Vom redenumi toate obiectele create care fac clic în mod consecvent pe numele obiectului următor din paletă. Straturi. și introducerea numelui dorit (figura 55). Rețineți că evidențiată în fig. 56 obiecte - Text1, Text2, Text3 și Path1. - Va fi întotdeauna vizibil și toți ceilalți - numai atunci când plutiți mouse-ul Text1.

Smochin. 54. Tipul original de imagine

Conectați fișierul evenimentelor.js cu descrierea procedurilor JavaScript prin aplicarea comenzii. Fișiere JavaScript. (Fișiere JavaScript) din paletă SVG interactivitateApăsând butonul Adăuga.(Adăugați) Prin specificarea fișierului dorit de pe hard disk și făcând clic pe buton Terminat (Ieși).

Determinați reacția la evenimentele de șoarece pentru obiect Text1. Selectați Obiect. TEXT., în câmp Eveniment (Eveniment) palete SVG interactivitateselectați evenimentul onmouseover. și în linia de mai jos introduceți textul elemshow (EVT, "text4"); Elemshow (EVT, "PATH2"). Ca rezultat, când găsiți un șoarece peste obiect Text1 va deveni obiecte vizibile Text4. și Path2.. Rețineți că, dacă apare un eveniment, trebuie executate mai multe acțiuni, atunci ele trebuie indicate prin semnul ";". Apoi o operație similară, considerați evenimentul. onmouseut.Introducând textul pentru aceasta, ceea ce va însemna ascunderea obiectelor (fig.57).

Salvați rezultatul ca o comandă de fișier SVG Fișier \u003d\u003e Salvați ca (File \u003d\u003e Salvare ca) Prin specificarea numelui fișierului selectând în câmp Tip fișier Formatul SVG, apoi configurarea opțiunii de salvare a fișierelor SVG conform fig. 58. După salvare, fișierul Primer6.Svg va fi recepționat (dosarul Primer6). Nu uitați să copiați fișierul evenimentelor.js în dosarul cu acest fișier. Dacă executați apoi POPS acest fișierVeți vedea rezultatul prezentat în fig. 59. Aceasta este aproape ceea ce aveți nevoie. Singurul lucru care nu a fost inclus în planurile noastre este aspectul inițial al obiectelor. TEXT.4 I. Cale.2 când se încarcă. Pentru a scăpa de acest neajuns, selectați ambele date obiect simultan și creați o acțiune pentru acestea. elemhide (EVT, "text4"); Elemhide (EVT, "PATH2") la un eveniment on-line. (Figura 60). Salvați din nou fișierul și asigurați-vă că acum obiectele Text4. și Path2. vizibil numai atunci când se deplasează mouse-ul pe obiect Text1.

GIF Animation.

Orice pagină web este de neconceput fără animație web, inclusiv fără animație Gif'ov. Una dintre opțiunile pentru creația lor este de a aplica aplicația Adobe ImageReady care vă permite să creați animație din straturi. În același timp, imaginea multistrat în sine poate fi pregătită în diferite aplicații, inclusiv Adobe Illustrator.

Foarte ușor de a crea o animație bazată pe elemente din paletă Simboluri. (Simboluri) deschise de comandă Fereastră \u003d\u003e simboluri (Fereastră \u003d\u003e caractere) sau dintr-una din bibliotecile de simboluri care pot fi deschise prin aplicarea comenzii Fereastră \u003d\u003e Biblioteci de simboluri (Fereastră \u003d\u003e biblioteci de simboluri).

De exemplu, vom încerca să creștem dimensiunea oricărui obiect de simbol, etapele cheie ale obiectului de creștere a obiectului trebuie să fie setate pe straturi separate. La început, pur și simplu plasați simbolurile obiectului unul peste celălalt și apoi măriți dimensiunea fiecărui obiect următor, de exemplu, așa cum se arată în fig. 61. Ca rezultat, în paletă Straturi. Un strat cu o varietate de obiecte va fi creat (figura 62). Dacă exportați direct această imagine în format PSD, acesta nu va da nimic, deoarece stratul este unul și, în mod natural, la deschiderea fișierului PSD în programul ImageReady, va exista, de asemenea, un singur strat. Prin urmare, este necesar preliminar să se plaseze obiecte pe straturi diferite. Acest lucru se poate face căi diferite - Cea mai ușoară cale este mai întâi să evidențieze stratul Stratul 1. În paleta straturilor și folosiți echipa Eliberați la strat. (Eliberați în straturi). Rezultatul va fi mișcarea fiecărui obiect de pe stratul dvs., dar toți vor fi imbricați în strat Stratul 1.. Prin urmare, va trebui să trageți manual toate straturile investite în partea superioară a paletei straturilor, astfel încât acestea să fie deasupra stratului Stratul 1.și apoi a devenit un strat gol Stratul 1. Doar scoateți (fig.63). Exportați imaginea în format PSD prin aplicarea comenzii Fișier \u003d\u003e Export (File \u003d\u003e Export) cu instalații ca în fig. 64.

Încărcați fișierul PSD creat în programul ImageReady (figura 65 și 66). Deschideți meniul paletei Animaţie. Face cadre din straturi (Creați cadre din straturi). Ca rezultat, vor fi creați cinci cadre, fiecare dintre ele se va potrivi stratului lor și fereastra paletei Animaţie. va arunca o privire ca în fig. 67.

După aceea, setați durata fiecărui cadru creat - în acest caz, durata de 0,2 s este instalată pentru toate cadrele. Și apoi salvați animația cu optimizarea utilizând comanda. Fișier \u003d\u003e Salvare optimizată (File \u003d\u003e Salvare cu optimizare). Rezultatul obținut poate fi asemănător cu FIG. 68.

Chiar mai convenabil pentru a obține pietrele care sunt ușor de transformat în animație în ImageReady, utilizați funcții Amestecuri live. Programe Illustrator. O astfel de aplicare combinată a programelor Illustrator și ImageReadready accelerează în mod semnificativ procesul de creare a animațiilor GIF.

De exemplu, trageți două obiecte arbitrare multi-colorate, apoi legați legătura cu parametrii adecvați (fig.69). Este imposibil să utilizați direct acest fișier pentru a crea o animație, deoarece imaginea se află pe un singur strat (fig.70). Prin urmare, acesta va fi necesar ca fiecare element al obiectului amestec să fie plasat pe un strat separat. Pentru a face acest lucru în fereastră Straturi. Evidențiați șirul , activați meniul paletei făcând clic pe săgeata neagră din colțul din dreapta sus și selectați comanda Eliberați la secvența straturilor (Transformați în straturi secvențial) (fig.71). Țineți apăsat Schimb., evidențiați straturile create și puneți-le deasupra stratului. Stratul 1.și apoi scoateți stratul Stratul 1., mutați-l în coș - ca rezultat, paleta straturilor va avea același aspect ca în fig. 72.

Smochin. 70. Starea inițială a ferestrei straturilor

Exportul a creat fișierul în format de comandă PSD Fișier \u003d\u003e Export (File \u003d\u003e Export). Deschideți fișierul PSD creat în programul ImageReady (fig.73). Rețineți că în fereastra straturilor toate straturile create în program vor apărea (fig.74) și în fereastră Animaţie. Va fi un singur cadru.

Activați meniul paletei Animaţie.Făcând clic pe o săgeată neagră în colțul din dreapta sus al paletei și selectați comanda Face cadre din straturi (Creați cadre din straturi) - Ca rezultat, în acest exemplu vor fi create cinci cadre, iar fereastra paletei va fi creată. Animaţie. are o vedere în conformitate cu fig. 75. Evidențiați toate cadrele în timp ce țineți apăsată tasta. Schimb.și setați durata corespunzătoare a cadrelor - în acest exemplu, pentru fiecare cadre luate în același timp la 0,2 s. Apoi salvați fișierul cu optimizarea comenzii. Fișier \u003d\u003e Salvare optimizată(File \u003d\u003e Salvați cu optimizare) Prin instalarea în listă Tip fișier Opțiune Numai imagini (* .gif). Animația se va asemăna cu orezul. 76.

Nu arată mult mai interesant să se miște, ci o schimbare netedă a dimensiunii obiectelor de amestec. De exemplu, puteți utiliza tranziția de amestec deja creată. În acest caz, după crearea straturilor separate pentru fiecare element de tranziție a amestecului, puneți toate obiectele unul pe celălalt, folosind butoanele Centrul alinign orizontal.(Alinierea față de orizontală centrală) și Centrul de aliniere verticală. (Alinierea față de paleta centrală verticală) Alinia. (Fig.77).

Exportați fișierul creat în format PSD ( Fișier \u003d\u003e Export- Fișier \u003d\u003e Export) și deschideți fișierul PSD creat în programul ImageReady (fig.78). Creați pe baza straturilor cadrelor de animație ( Face cadre din straturi - Creați cadre din straturi) și selectați o durată adecvată pentru acestea (fig.79). Apoi, pentru a face animația mai spectaculoasă, copiați cadrele existente, dar în ordinea inversă, astfel încât imaginea să crească mai întâi și apoi a scăzut și astfel într-un cerc (figura 80). Apoi salvați fișierul de optimizare ( Fișier \u003d\u003e Salvare optimizată- Fișier \u003d\u003e Salvare cu optimizare). Animația rezultată este prezentată în fig. 81.

Smochin. 80. Starea ferestrei de animație după dublarea cadrelor

Smochin. 81. Animație finalizată

Astăzi nu suntem destul de obișnuiți lecția Adobe. Ilustrator. Pentru că de data aceasta nu vom face o imagine statică, ci cea mai reală animație. Imaginați-vă, se dovedește a fi cu folosind Adobe. Illustrator puteți desena și desene animate :)

Și nu vom avea nevoie de nimic pentru asta. Organizarea competentă a straturilor și exportul de lucrări finale în formatul SWF, în care fiecare strat este transformat în cadrul animației. În lecția de astăzi, atragem o animație a numărătoarea inversă în stil retro. La ieșire, un film flash cu acesta este foarte numărătoarea inversă.

Primul lucru care trebuie făcut este să desenezi toate elementele necesare pentru animația viitoare. Pentru a face acest lucru, într-un document separat a făcut două poziții ale filmului de film, cercul de referință, care este tăiat în sectoare separate, texturi și zgârieturi verticale pentru a adăuga efectul antichității, precum și toate numerele și inscripțiile.

Când toate părțile din desene animate sunt gata, puteți începe să creați animația în sine. Pentru comoditate, este mai bine să faceți într-un document nou. În același timp, straturile vor juca rolul cadrelor de animație. Și în primul strat trebuie doar să copiați cadrul filmului. Puneți-o în mijlocul spațiului de lucru.

Acum creați un al doilea strat și copiați un cadru de imagini de film în ea, în care găurile din jurul marginilor sunt realizate cu o schimbare. De asemenea, trebuie să fie localizat în centru.

Dintre aceste două straturi, puteți obține deja animația filmului în mișcare. Dar mai târziu vom avea nevoie de mult mai multe straturi. Prin urmare, evidențiți primele două straturi, accesați opțiunile panoului și faceți o copie a stratului.

În mod similar, trebuie să acumulăm 12 straturi cu cadre ale filmului, întrebându-i mișcarea.

Acum avem o grămadă de straturi și toate sunt vizibile. În sensul că straturile superioare sunt blocate de partea inferioară, care nu este în întregime convenabilă pentru muncă. Prin urmare, puteți dezactiva unele straturi făcând clic pe pictograma cu ochiul spre stânga numelui stratului. Pentru a opri sau a activa toate straturile simultan, păstrați cheia ALT apăsă când faceți clic pe pictograma Glazik. Includerea și oprirea straturilor, puteți vedea exact ceea ce se află într-un anumit cadru al animației noastre viitoare. Și acum, pentru a adăuga un jitter ușor la filmul în mișcare, trebuie să puneți foarte puțin cadrele primite în direcții diferite. Pentru a face acest lucru, porniți numai stratul cu care veți lucra acest momentȘi apoi schimbați cadrul pe o pereche de pixeli în orice direcție.

Când ați trecut peste toate straturile și ați adăugat o schimbare mică, puteți începe să creați animația unui cerc în mișcare. Pentru a face acest lucru, copiați cercul constând din sectoare, dintr-un document cu piese de schimb de desene animate și puneți-l pe primul strat peste cadrul filmului.

Dacă eliminați selecția din cerc, acesta va arăta ca un singur întreg. De asta avem nevoie.

Dar, deoarece constă în sectoare separate, puteți, schimbându-le culoarea, foarte repede și ușor de creat animație. Pentru a face acest lucru, copiați acest cerc în cel de-al doilea strat și faceți mai devreme mai ușor. Vă amintiți că filmul este tremurând în timp ce conduceți, deci nu este necesar să puneți cercul exact în centrul cadrului. Puneți-o pe ochi.

În mod similar, trebuie să copiați cercul la fiecare strat următor, în timp ce vopsea linia de periere într-un sector mai mult decât timpul anterior. Toate împreună, aceste 12 straturi formează o animație a mișcării filmului cu un cerc de umplere.

Apoi, trebuie să adăugați textura în straturile noastre. Porniți primul strat și copiați textura acolo din fișierul sursă cu piese de schimb.

Apoi, la rândul său, porniți următoarele straturi și copiați aceeași textură acolo. Așa că părea diferită pe fiecare cadru, pur și simplu o rotiți pe un unghi de 90 de grade. După cum ați ghicit deja, trebuie să adăugăm textura la toate cele 12 cadre.

Dacă ați obosit deja de a face față, atunci vă pot elibera - rămâne foarte puțin. Cel mai dificil deja în urmă. Rămâne să adăugați zgârieturi verticale și aproape totul. Pentru a face acest lucru, copiați din nou zgârierea originală și puneți-o într-un loc arbitrar în mai multe straturi. În cazul meu, zgârieturile apar numai în două straturi.

Acum, care este pregătit ciclul principal cu animația filmului, rămâne să adăugați numere. Deoarece vine de la 3 la 1 plus un alt cuvânt Go !!!, atunci avem nevoie de mai multe straturi. Nu 12, ci la fel de mult ca 48. Pentru că trebuie să faceți încă trei copii ale straturilor gata făcute cu animația filmului.

Și apoi totul este simplu. Pornim primul strat și punem trei numere acolo.

Apoi, trebuie să copiați această figură în următoarele straturi până când animația cercului este finalizată. Când ajungeți la următoarea copie a stratului, unde cercul va fi umplut complet complet, trebuie să puneți două numere două. În mod similar, copiați numărul unu la straturile dorite. Și când ajungeți la straturile finale, concepute să inregisați Go !!!, scoateți cercul înainte de a copia inscripția în stratul dorit.

În acest sens cu animația totul. Principalul lucru aici nu este de confuz. Puteți da straturilor câteva nume convenabile, dar am fost oarecum leneș :) Și chiar și atunci când terminați lucrul, asigurați-vă că întoarceți toate straturile făcând clic pe pictograma geamurilor.

În fereastra cu setări de export, asigurați-vă că instalați Export ca: straturi AI în rame SWF. Este această opțiune care transformă straturile ilustratorului în cadrele de animație. Apoi, faceți clic pe butonul Avansat.

Setările avansate se vor deschide. Aici trebuie să setați rata de cadre a ratei cadrelor. Am 12 cadre pe secundă. O buclă de marcă de verificare este responsabilă pentru animația ciclică. Datorită ei, videoclipul va fi jucat într-un cerc. Iar opțiunea de comandă a stratului: partea de jos în sus redă straturile ilustratorului de jos în panou. Doar că am construit animația noastră.

La ieșire obținem un film flash cu animația noastră.

Acum vedeți că animația simplă de făcut în Adobe Illustrator nu este atât de dificilă, deoarece pare la prima vedere.

Dar pentru a crea role lungi sau aplicații interactive, este mai bine să utilizați Adobe Flash. fie alți editori flash. De exemplu, această pisică pe care am făcut-o în vechiul bliț Macromedia, care a săpat la locul de muncă.

Ultima dată, HTML5 și CSS3 sunt folosite din ce în ce mai des pentru a crea animație. Acest cod este acceptat browsere moderne Și nu necesită utilizarea unui player flash.

Roman AKA DACASCAS. Mai ales pentru blog.

Abonați-vă la newsletter-ul nostru, astfel încât să nu pierdeți nimic nou:

Astăzi nu avem exact o lecție obișnuită Adobe Illustrator. Pentru că de data aceasta nu vom face o imagine statică, ci cea mai reală animație. Imaginați-vă, se pare că puteți desena și desene animate cu Adobe Illustrator :)

În mod similar, trebuie să acumulăm 12 straturi cu cadre ale filmului, întrebându-i mișcarea.

Acum avem o grămadă de straturi și toate sunt vizibile. În sensul că straturile superioare sunt blocate de partea inferioară, care nu este în întregime convenabilă pentru muncă. Prin urmare, puteți dezactiva unele straturi făcând clic pe pictograma cu ochiul spre stânga numelui stratului. Pentru a opri sau a activa toate straturile simultan, păstrați cheia ALT apăsă când faceți clic pe pictograma Glazik. Includerea și oprirea straturilor, puteți vedea exact ceea ce se află într-un anumit cadru al animației noastre viitoare. Și acum, pentru a adăuga un jitter ușor la filmul în mișcare, trebuie să puneți foarte puțin cadrele primite în direcții diferite. Pentru a face acest lucru, porniți numai stratul cu care veți lucra în acest moment și apoi deplasați cadrul pe o pereche de pixeli în orice parte.

Dacă eliminați selecția din cerc, acesta va arăta ca un singur întreg. De asta avem nevoie.

Apoi, trebuie să adăugați textura în straturile noastre. Porniți primul strat și copiați textura acolo din fișierul sursă cu piese de schimb.

Și apoi totul este simplu. Pornim primul strat și punem trei numere acolo.

La ieșire obținem un film flash cu animația noastră.

Acum vedeți că animația simplă de făcut în Adobe Illustrator nu este atât de dificilă, deoarece pare la prima vedere.

Dar pentru a crea role lungi sau aplicații interactive, este încă mai bine să utilizați Adobe Flash sau alte editori Flash. De exemplu, această pisică pe care am făcut-o în vechiul bliț Macromedia, care a săpat la locul de muncă.

Ultima dată, HTML5 și CSS3 sunt folosite din ce în ce mai des pentru a crea animație. Acest cod este acceptat de browsere moderne și nu necesită utilizarea unui player Flash.

Roman AKA DACASCAS. Mai ales pentru blogul Notă Microstrum Illustrator