Cum se creează o animație gif în Illustrator. Cum să faci animație în Adobe Illustrator. Exportați fișiere SWF din Illustrator
Astăzi avem ceva neobișnuit Lecția Adobe Ilustrator. Pentru că de data aceasta nu vom face o imagine statică, ci o animație reală. Imaginează-ți, se dovedește cu folosind Adobe Ilustratorul poate desena și desene animate :)
Și pentru asta nu avem nevoie de nimic. Organizarea corectă a straturilor și exportul lucrării finale în format swf, unde fiecare strat este convertit într-un cadru de animație. În tutorialul de astăzi vom desena o animație cu numărătoare inversă în stilul unui film retro. Ieșirea ar trebui să fie un videoclip flash cu aceeași numărătoare inversă.
Primul lucru pe care trebuie să-l faceți este să desenați toate elementele necesare pentru animația viitoare. Pentru a face acest lucru, într-un document separat, am făcut două poziții ale unui cadru de film, un cerc pentru referință, care este tăiat în sectoare separate, o textură și o zgârietură verticală pentru a adăuga efectul antichității, precum și toate numerele și inscriptii.
Când toate părțile desenului nostru sunt gata, putem începe să creăm animația în sine. Pentru comoditate, este mai bine să faceți acest lucru într-un document nou. În acest caz, straturile noastre vor juca rolul de cadre de animație. Și în primul strat trebuie doar să copiați un cadru de film. Așezați-l în mijlocul zonei de lucru.
Acum creați un al doilea strat și copiați un cadru de film în el, în care găurile de-a lungul marginilor sunt făcute cu un offset. De asemenea, trebuie plasat în centru.
Din aceste două straturi puteți obține deja animație de film în mișcare. Dar mai târziu vom avea nevoie de mai multe straturi. Așadar, selectați primele două straturi, mergeți la opțiunile panoului și faceți o copie a straturilor.
Într-un mod similar, trebuie să acumulăm 12 straturi de cadre de film care definesc mișcarea acestuia.
Acum avem o grămadă de straturi și toate sunt vizibile. În sensul că straturile superioare le blochează pe cele inferioare, ceea ce nu este în întregime convenabil pentru lucru. Prin urmare, puteți dezactiva unele straturi făcând clic pe pictograma cu un ochi din stânga numelui stratului. Pentru a dezactiva sau a activa toate straturile simultan, țineți apăsată tasta Alt în timp ce faceți clic pe pictograma ochiului. Prin activarea și dezactivarea straturilor, puteți vedea exact ce se află într-un cadru specific al animației noastre viitoare. Și acum, pentru a adăuga o ușoară agitație la mișcarea filmului, trebuie să mișcăm cadrele rezultate ușor în direcții diferite. Pentru a face acest lucru, activați numai stratul cu care veți lucra. acest moment, apoi mutați cadrul cu câțiva pixeli în orice direcție.
După ce ați trecut prin toate straturile și ați adăugat o mică schimbare, puteți începe să creați animația cercului în mișcare. Pentru a face acest lucru, copiați cercul format din sectoare din document cu părțile de desene animate și plasați-l pe primul strat deasupra cadrului filmului.
Dacă deselectați cercul, acesta va arăta ca un singur întreg. Este exact ceea ce avem nevoie.
Dar, deoarece este format din sectoare individuale, puteți crea animații foarte rapid și ușor, schimbându-le culoarea. Pentru a face acest lucru, copiați acest cerc în al doilea strat și faceți primul sector mai ușor. Vă amintiți că filmul nostru se scutură pe măsură ce se mișcă, așa că nu este deloc necesar să plasați cercul exact în centrul cadrului. Poziționați-l după ochi.
Într-un mod similar, trebuie să copiați cercul în fiecare strat următor, în timp ce pictați un sector mai mult cu o culoare mai deschisă decât data anterioară. Împreună, aceste 12 straturi formează o animație a filmului care se mișcă cu un cerc de umplere.
Apoi, trebuie să adăugăm textură straturilor noastre. Porniți primul strat și copiați textura din fișierul original cu piesele de schimb acolo.
Apoi porniți straturile următoare unul câte unul și copiați aceeași textură acolo. Pentru a-l face să arate diferit în fiecare cadru, pur și simplu rotiți-l la 90 de grade. După cum probabil ați ghicit, trebuie să adăugăm textură tuturor celor 12 cadre.
Dacă v-ați săturat deja să copiați, atunci vă pot mulțumi - a mai rămas foarte puțin. Partea cea mai grea s-a terminat. Mai rămâne doar să adaugi zgârieturi verticale și cam atât. Pentru a face acest lucru, copiem din nou zgârietura originală și o plasăm într-un loc arbitrar în mai multe straturi. În cazul meu, zgârieturile apar doar în două straturi.
Acum că ciclul principal cu animație de film este gata, nu mai rămâne decât să adunăm numerele. Deoarece numărătoarea inversă merge de la 3 la 1 plus cuvântul Go!!!, avem nevoie de și mai multe straturi. Nu 12, ci până la 48. Pentru a face acest lucru, trebuie să faceți încă trei copii ale straturilor gata făcute cu animație de film.
Și apoi totul este simplu. Porniți primul strat și puneți numărul trei acolo.
Apoi trebuie să copiați această figură în straturile următoare până când animația cercului se termină. Când ajungeți la următoarea copie a straturilor, unde cercul va fi din nou complet completat, trebuie să puneți numărul doi. În același mod, copiați numărul unu în straturile dorite. Și când ajungeți la straturile finale pentru inscripția Go!!!, pur și simplu ștergeți cercul înainte de a copia inscripția în stratul dorit.
Asta e tot pentru animație. Principalul lucru aici este să nu fii confuz. Puteți da straturilor niște nume convenabile, dar am fost cam leneș :) Și, de asemenea, când vă terminați munca, asigurați-vă că reactivați toate straturile făcând clic pe pictograma ochiului.
În fereastra de setări de export, asigurați-vă că setați Export ca: straturi AI la cadre SWF. Această opțiune este cea care transformă straturile Illustrator în cadre de animație. Apoi, faceți clic pe butonul Avansat.
Se va deschide setari aditionale. Aici trebuie să setați Frame Rate. Am 12 cadre pe secundă. Caseta de selectare Looping este responsabilă pentru animația ciclică. Datorită acestuia, videoclipul va fi redat în cerc. Iar opțiunea Layer Order: De jos în sus reproduce straturi de ilustrator de jos în sus în panou. Exact așa ne-am construit animația.
Ieșirea este un video flash cu animația noastră.
Acum vedeți ce poate face o animație simplă Adobe Illustrator nu atât de dificil pe cât pare la prima vedere.
Dar pentru a crea videoclipuri lungi sau aplicații interactiveîncă mai bine de folosit Adobe Flash sau alte editori flash. De exemplu, am făcut această pisică într-un vechi Macromedia Flash, pe care l-am dezgropat la munca mea.
De asemenea, recent HTML5 și CSS3 sunt din ce în ce mai folosite pentru a crea animații. Acest cod este acceptat de browserele moderne și nu necesită utilizarea unui player flash.
Roman aka dacascas special pentru blog
Abonează-te la newsletter-ul nostru pentru a nu pierde nimic nou:
Recent, diferite 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 de animație vectorială SVG folosind pluginul ușor Jquery Lazy Line Painter.
Sursă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 de proiect 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.
Am plasat aceste 2 fișiere î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 folosi 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 pur și simplu lipim codul rezultat într-un fișier main.js gol
Opțiuni:
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ăugăm 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. la pornire mașină locală Este posibil să existe o întârziere la începutul animației pentru câteva secunde.
Optimizare grafică web
Informații grafice este transmis mult mai lent decât textul, iar timpul de încărcare a imaginilor este proporțional cu dimensiunea acestora fisiere grafice. Prin urmare, încărcarea rapidă a paginilor Web necesită o dimensiune mică de încorporat imagini grafice, care se realizează prin optimizarea lor. Optimizarea imaginii este înțeleasă ca conversia acesteia, asigurând o dimensiune minimă a fișierului, menținând în același timp calitatea imaginii cerută în acest caz, ceea ce se realizează în primul rând prin reducerea numărului de culori din imaginile grafice, folosind formate de fișiere comprimate și speciale și optimizarea parametrilor de compresie pentru fiecare persoană. fragmente de imagine.
Illustrator are încorporate instrumente de optimizare a imaginii care fac procesul de optimizare rapid și eficient cu o varietate de metode de previzualizare. Previzualizarea oferă o idee destul de precisă despre cum va arăta imaginea optimizată în timp real, ceea ce vă ajută să evaluați rezultatul optimizării și să selectați cu succes setările potrivite. Și puteți optimiza atât imaginile create direct în Illustrator, cât și altele, de exemplu, fotografiile care ar trebui să fie plasate pe un site Web.
Parametrii de optimizare sunt setați în fereastra Salvare pentru Web, apelată prin comanda cu același nume din meniul Fișier. Programul vă oferă să utilizați unul dintre cele patru moduri de previzualizare, dar două sunt cele mai potrivite pentru a evalua calitatea optimizării:
- 2-Up (două opțiuni) vizualizare simultană a imaginii originale și optimizate în conformitate cu setările specificate (Fig. 1);
- 4-Up (patru opțiuni) În acest mod, fereastra este împărțită în patru ferestre (Fig. 2) pentru a afișa imaginea originală și trei versiuni ale celei optimizate: prima versiune este creată pe baza valorilor de optimizare setate, iar celelalte două sunt variații ale setărilor actuale de optimizare.
Ambele moduri vă permit să economisiți timp semnificativ în găsirea celei mai bune opțiuni de optimizare, deoarece elimină necesitatea de a salva imagini cu setări de optimizare diferite și compararea vizuală ulterioară a acestora. În plus, este posibil să se evalueze nu numai calitatea imaginii optimizate, ci și dimensiunea și timpul de încărcare a acesteia sub diferite opțiuni de conectare. Pentru comparație, cel mai convenabil mod este 4-Up (patru opțiuni), care vă permite să evaluați vizual efectul compresiei sau al reducerii paletei asupra calității imaginii și a dimensiunii acesteia și, în cele din urmă, să determinați cei mai buni parametri de optimizare.
Illustrator vă permite să optimizați grafica Web nu numai în formatele GIF, JPG, PNG-8 și PNG-24, ci și SWF și SVG. Imaginile indexate care au un număr mic de culori sunt salvate în format GIF. Formatul JPG este folosit pentru a salva imagini, fotografii și elemente grafice bogate în culori, cum ar fi umplerile cu degrade. Pentru imaginile full color cu zone transparente se folosește formatul PNG, care vă permite să salvați atât imagini indexate, cât și full color, în timp ce în format PNG-8 numărul maxim posibil de culori al imaginii optimizate este de 256, iar în formatul PNG-24 imaginea poate avea milioane de culori și de aceea arată format JPEG. Diferența dintre PNG-24 și JPEG este că metoda de compresie folosită pentru optimizarea imaginilor în format PNG-24 nu duce la pierderea calității, dar ca urmare dimensiunea fișierului crește. Formatele SVG și SWF combină elemente grafice, text și componente interactive și pot fi, de asemenea, optimizate.
Sa luam in considerare exemplu concret optimizarea imaginii. Să presupunem că un logo al site-ului web a fost dezvoltat în Illustrator (Fig. 3), salvat inițial în format AI. O încercare de a-l optimiza imediat pentru Web nu va duce la nimic bun, deoarece în acest caz imaginea va fi tăiată automat, ceea ce nu va ține cont de poziția adevărată a inscripției rezultate ca urmare a deformării (Fig. 4 și 5).
Prin urmare, să încercăm să exportăm sigla în format PSD cu comanda File=>Export (File=>Export) dimensiunea imaginii create va fi de 143 KB. Deschideți fișierul PSD rezultat și utilizați comanda File => Save for Web. Ținând cont de numărul limitat de culori implicate în imagine, în acest caz formatul GIF este optim, ale cărui setări specifice trebuie decise. Experimentând setările, vă puteți asigura că cea mai buna calitate oferă algoritmul de compresie implicit al programului, selectiv. În ceea ce privește netezirea, având în vedere prezența unui gradient de umplere, este mai bine să alegeți un algoritm cu generare de zgomot Zgomot (Fig. 6). Dimensiunea fișierului de optimizare rezultat va fi de 6.729 KB (Fig. 7), în timp ce se va păstra transparența fundalului, ceea ce este ușor de verificat prin salvarea imaginii în format GIF împreună cu fișierul HTML (Fig. 8). Ca rezultat, în acest exemplu, fișierele emblem.html și emblem.gif au fost obținute în folderul Primer1.
Un element specific indispensabil al designului oricăror pagini Web sunt butoanele de control grafic. Este pur și simplu imposibil să-ți imaginezi o pagină fără ele. Desenul cu butoane a devenit astăzi un gen special, iar Illustrator vă permite să creați cele mai complicate opțiuni. De exemplu, butoanele concepute ca obiecte de plasă și/sau cu măști suprapuse arată mult mai impresionant decât cele obișnuite.
Luați în considerare opțiunea de a crea un buton rotund, convex în Illustrator. Desenați un obiect vectorial sub forma unui cerc umplut cu o culoare arbitrară (Fig. 9) și convertiți-l într-o plasă cu comanda Object => Create Gradient Mesh (Object => Create a gradient mesh), specificând patru rânduri și patru coloane, iar în lista Aspect, selectând opțiunea To Center Highlight egal cu 60 (Fig. 10). Selectați instrumentul Direct Selection și faceți clic în colțul din stânga sus al obiectului, selectând punctele de ancorare situate acolo (Fig. 11). Schimbați culoarea celulei corespunzătoare în alb selectând-o în paleta Swatches (Fig. 12).
Luați instrumentul Elipse, plasați marcatorul mouse-ului în centrul cercului creat anterior și, ținând apăsate tastele Alt și Shift, întindeți noul cerc peste cel vechi, astfel încât să fie cu 1-2 pixeli mai mare decât cel vechi pe toate laturi. Dați-i un chenar negru (Stroke) de 1-2 pixeli lățime și umpleți-l cu un gradient radial în direcția de la roșu la alb (Fig. 13). Trageți obiectul vectorial creat cu 1-2 pixeli la dreapta și în jos, apoi, fără a elimina selecția, faceți clic dreapta pe el și afară meniul contextual selectați Aranjare => Trimiteți înapoi. Rezultatul va fi un gol pentru butonul, prezentat în Fig. 14.
De regulă, pe orice pagină Web există mai multe butoane de același tip, care diferă, de exemplu, doar în direcția săgeților desenate pe ele, indicând direcția de mișcare în jurul site-ului. Să luăm în considerare cel mai simplu caz de a avea două butoane, dintre care unul, cu săgeată în jos, va însemna trecerea la pagina următoare, iar un buton cu săgeata sus va însemna trecerea la cea anterioară. Ca șablon de săgeată, să luăm un triunghi obișnuit, desenat cu instrumentul Poligon, vopsit în negru și, pentru un efect mai mare, proiectat și ca obiect de plasă. Mutați săgeata pe buton și ajustați poziția tuturor obiectelor unul față de celălalt folosind butoanele corespunzătoare din paleta Aliniere. Primul dintre butoanele rezultate este prezentat în Fig. 15. Să facem o copie a layer-ului cu butonul selectând comanda Duplicate Layer Layers, ca urmare vom obține două straturi identice. Apoi selectați săgeata de pe copia stratului și rotiți-o cu 180° selectând comanda Transformare=>Rotire Transformare=>Rotire din meniul contextual. Vom obține același buton ca în fig. 16. Vă rugăm să rețineți că este mult mai convenabil să stocați același tip de butoane pentru un proiect într-un fișier pe straturi diferite, ceea ce este demonstrat în acest caz.
Acum trebuie să salvați versiunile optimizate ale fiecărui buton. Mai întâi faceți stratul inferior invizibil, în acest caz, butonul de pe stratul superior va fi păstrat. Selectați comanda Fișier => Salvare pentru Web, configurați parametrii de optimizare a butoanelor, de exemplu, așa cum se arată în Fig. 17, faceți clic pe butonul Salvare și introduceți un nume de fișier. Butonul salvat în cele din urmă este prezentat în Fig. 18. Acum întoarceți vizibilitatea la stratul de jos, faceți stratul superior invizibil și salvați al doilea buton în același mod, dându-i un alt nume. Rezultatul este prezentat în Fig. 19.
Acum tot ce rămâne este să vă asigurați că butoanele arată destul de acceptabil pe pagina Web și să le plasați pe o pagină personalizată (Fig. 20). Ca urmare, în acest exemplu, fișierul Primer2.html și două imagini grafice au fost obținute în folderul imagini (dosarul Primer2).
Dacă doriți, este ușor să transformați un buton într-o felie în timpul procesului de optimizare. În acest caz, după selectarea comenzii File=>Save for Web (File=>Save for Web) și setarea parametrilor de optimizare, ar trebui să selectați instrumentul Slice Select din paleta de instrumente și să faceți dublu clic pe imagine, care în cele din urmă va se transformă automat într-o felie cu numărul de serie 1 (Fig. 21). Făcând dublu clic din nou, se va deschide fereastra Slice Options, în care va trebui să specificați un link și, opțional, să schimbați numele feliei (Figura 22), apoi să salvați imaginea optimizată. Rezultatul în acest caz va fi fișierele Primer3.html (Fig. 23) și Primer3.gif (dosarul Primer3).
O modalitate de a aduce o pagină la viață este introducerea elementelor de design care o schimbă aspect(sau stare) în funcție de comportamentul mouse-ului sau, mai rar, în eventualitatea oricăror alte situații: scalare, derulare, încărcare, erori etc.
Dintre astfel de elemente, cele mai cunoscute sunt rollover-urile (din engleza roll over roll over, turn over) elemente care isi schimba aspectul sub influenta mouse-ului. Exemple de rulări tipice sunt butoanele animate. Rollover-urile sunt adesea folosite la crearea altor elemente de navigare pe site. În realitate, orice rulare nu este una, ci mai multe (până la patru) imagini, fiecare dintre acestea corespunzând unui anumit eveniment. Principalele evenimente sunt considerate a fi următoarele: Normal stare normală, treceți cursorul mouse-ului peste un element și apăsați în jos butonul stâng al mouse-ului când treceți cursorul peste acesta. Teoretic, pot fi implicate evenimente precum Click, eliberarea butonului stâng al mouse-ului după clic, Sus după eliberarea butonului, Out când părăsești zona activă. Cu toate acestea, în practică, ele sunt adesea limitate la schimbarea elementului doar pentru primele trei sau chiar două evenimente.
Rollovers clasiceÎn sensul clasic, un rollover este o serie de imagini grafice în format GIF și codul HTML corespunzător, datorită căruia, în funcție de comportamentul mouse-ului, o imagine o înlocuiește pe alta în fereastra browserului.
Illustrator nu este destinat să creeze direct rulouri în sensul clasic, dar poate ajuta la dezvoltarea elementelor inițiale pentru acestea. Ideea în acest caz este de a crea un strat cu imaginea corespunzătoare primului eveniment. Apoi faceți o copie a stratului și transformați imaginea pentru a se potrivi cu al doilea eveniment și așa mai departe. Imaginea multistrat rezultată este exportată într-un fișier PSD cu straturile păstrate, pe baza căruia se creează un rollover în programul Image Ready. Avantajul utilizării programului Illustrator, ca în multe alte cazuri, este o serie de caracteristici interesante care nu sunt disponibile în alte software, combinat cu comoditatea transformării graficelor vectoriale.
Să încercăm să creăm un rollover sub forma unei inscripții care își schimbă culoarea în funcție de comportamentul mouse-ului. Deschideți Illustrator și creați o formă sub forma unui dreptunghi rotunjit umplut cu negru (Fig. 24), faceți o copie a acesteia și plasați-o într-o parte liberă a ecranului. Convertiți prima copie a dreptunghiului într-un obiect mesh cu o evidențiere în centru (comanda Object=>Create Gradient Mesh Object=>Create Gradient Mesh), specificând patru rânduri și zece coloane (Fig. 25). Activați a doua copie a dreptunghiului și setați-o la o umplere cu gradient aproximativ așa cum se arată în Fig. 26. Suprapuneți obiectul gradient deasupra celui din plasă, reduceți opacitatea obiectului gradient la aproximativ 80% și dimensiunea cu aproximativ 1 pixel pentru a simula în cele din urmă efectul unei denivelări. Și apoi imprimați inscripția deasupra obiectelor. În forma sa originală, lăsați-l să aibă o culoare albă, care va corespunde stării Normale (Fig. 27), iar apoi, când starea de rulare se schimbă, culoarea inscripției se va schimba, de exemplu, în verde când marcatorul mouse-ului este plasat peste el (starea Peste) și devine albastru când butonul mouse-ului este apăsat (starea Jos).
Acordați atenție paletei Straturi, în această etapă, există un singur strat în ea. Faceți două copii ale acestui strat folosind comanda Duplicare strat din meniul paletei Straturi, vor fi trei straturi în paletă (Fig. 28). Apoi, în prima copie a stratului schimbați culoarea inscripției în verde, iar în a doua copie în albastru (Fig. 29). Ca urmare, se va obține spațiul liber necesar pentru răsturnare.
Exportați imaginea creată în format PSD, păstrând straturile, folosind comanda File=>Export și selectând modelul de culoare RGB (Fig. 30). Deschideți fișierul PSD creat în programul ImageReady (Fig. 31 și 32). Creați cadre bazate pe straturi selectând comanda Creați cadre din straturi din meniul paletei Animație. Fereastra Animație va arăta ca în Fig. 33. În acest caz, o singură stare Normală va fi creată inițial în paleta Rollovers.
Apoi, în fereastra Animație, selectați cadrul corespunzător stării induse, iar stratul Layer 1 Copy va fi selectat automat în paleta Straturi (Fig. 34). Accesați paleta Rollovers și faceți clic pe butonul Create Rollover State (Creare Rollover State) fig. 35, ceea ce va face ca starea Over State să apară în paleta Rollovers (Fig. 36). Creați o stare Down în același mod. Activați starea Normală în paleta Rollovers și ștergeți toate cadrele din paleta Animație, cu excepția celui care ar trebui să corespundă stării Normale. Ca rezultat, pentru fiecare stare de rulare va exista un singur cadru în paleta Animație (Fig. 37, 38 și 39).
Orez. 38. Vizualizarea imaginii, fereastra Animație și paletele Straturi și Rollovers pentru starea Over State
Verificați rezultatul făcând clic pe butonul Previzualizare în browser implicit din bara de instrumente și accesând fereastra browserului (Figura 40). După aceea, salvați fișierul folosind comanda File => Save Optimized și specificând opțiunea HTML și Imagini (*.html). Ca urmare, în acest exemplu, fișierul Primer4.html și o serie de imagini grafice au fost obținute în folderul imagini.
Orez. 40. Fereastra browser cu element Rollover
Rollovers SVGFormatul SVG (Scalable Vector Graphics) din ce în ce mai popular Grafică vectorială), creat pe baza standardului XML, vă permite, de asemenea, să primiți o varietate de elemente interactive, în special rollovers, dar în practică acest lucru este implementat complet diferit. Este de remarcat faptul că crearea rollover-urilor SVG interactive, spre deosebire de cele clasice, când codul HTML corespunzător este generat complet automat, necesită cunoașterea limbajului JavaScript și înțelegerea principiilor de bază ale programării orientate pe obiecte.
Pentru a lucra cu obiecte SVG există o paletă specială SVG Interactivity, care poate fi deschisă cu ușurință folosind comanda Window => SVG Interactivity (Window => SVG interactivitat) fig. 41.
Să luăm în considerare această opțiune pentru a crea o rulare folosind exemplul unui buton interactiv, culoarea inscripției pe care se va schimba de la negru la albastru atunci când treceți mouse-ul și din nou se va transforma în negru când mouse-ul iese din zona activă.
Creați un buton dreptunghiular cu margini rotunjite și selectați o umplere cu gradient adecvată pentru acesta, de exemplu, așa cum se arată în Fig. 42. Reglați transparența butonului din paleta Transparență.În acest exemplu, valoarea Opacității este setată la 50%. Faceți o copie a butonului, umpleți-l cu verde închis (Figura 43), apoi convertiți-l într-un obiect mesh cu comanda Object => Create Gradient Mesh, specificând patru rânduri și zece coloane, iar în lista Aspect (View) selectând opțiunea To Center și setând valoarea Highlight la 100. Reduceți opacitatea stratului cu obiectul plasă la aproximativ 40% (Fig. 44). Așezați un obiect plasă peste unul cu gradient, iar butonul va fi asemănător cu cel prezentat în Fig. 45.
Orez. 44. Transformă o copie a unui buton într-un obiect plasă
Completați butonul cu inscripția dorită și ajustați-i poziția folosind butoanele corespunzătoare din paleta Aliniere. Imaginea rezultată va conține un strat cu trei obiecte suprapuse unul peste altul (Fig. 46). Evenimentele programate vor fi legate de un obiect text, așa că, pentru comoditate, schimbați numele acestuia în Text făcând dublu clic pe obiect și introducând un nou nume. În mod similar, schimbați numele stratului din Stratul 1 în Strat (Fig. 47).
Procesarea evenimentelor implică utilizarea procedurilor JavaScript, deci trebuie să includeți un fișier care să descrie aceste proceduri. Se numește Events.js și este salvat pe disc în folderul Sample Files\Sample Art\SVG\SVG la instalare programe Adobe Ilustrator. Pentru a conecta fișierul Events.js, utilizați comanda JavaScript Files SVG Interactivity (Fig. 48). Apoi, trebuie să faceți clic pe butonul Adăugare și să găsiți fișierul dorit pe hard disk. Când numele său apare în câmpul URL (Figura 49), faceți clic pe butonul Efectuat.
Orez. 48. Selectarea comenzii JavaScript Files
Apoi, trebuie să definiți un răspuns la evenimentele mouse-ului pentru obiectul Text. Selectați obiectul Text, în câmpul Eveniment al paletei de interactivitate SVG, selectați evenimentul onmouseover elemColor(evt, "Text", "#3333FF"), aceasta va însemna că atunci când mouse-ul este peste obiectul Text, culoarea acestuia se va schimba în albastru (Fig. 50). Pentru ca culoarea textului să se schimbe în negru după ce mouse-ul părăsește zona activă, va trebui să creați un alt eveniment onmouseout, selectați-l în câmpul Eveniment al paletei de interactivitate SVG. Apoi, în linia de acțiune introduceți textul elemColor(evt, "Text", "#000000"), aceasta va reveni la culoarea neagră (Figura 51).
Orez. 51. Aspectul final al paletei de interactivitate SVG pentru obiectul Text
Salvați rularea creată ca fișier SVG cu comanda File=>Save as (File=>File type format SVG, apoi setați opțiunile de salvare a fișierului SVG așa cum se arată în Fig. 52. După salvare, veți primi doar unul un singur fișier cu extensia SVG, și nu două, ca în cazul unui rollover clasic, în acest caz a fost primit fișierul Primer5.svg (dosarul Primer5).Totuși, pentru ca rollover-ul să funcționeze cu adevărat, trebuie să copiați suplimentar. fișierul Events.js din descrierea procedurilor JavaScript. După aceasta, puteți verifica funcționalitatea rollover-ului, rezultatul va arăta ca în Fig. 53.
Formatul SVG poate fi folosit și pentru a transmite animație. Să încercăm să creăm un element animat simplu (în acest caz va fi informații despre companie), care va apărea pe ecran atunci când treceți mouse-ul peste obiectul grafic corespunzător și va dispărea când scoateți mouse-ul din elementul interactiv.
Să creăm aproximativ următoarea serie de obiecte grafice și text, așa cum se arată în Fig. 54. Să redenumim toate obiectele create într-un mod convenabil făcând clic secvenţial pe numele următorului obiect din paleta Straturi şi introducând nume dorit(Fig. 55). Vă rugăm să rețineți că cele evidențiate în Fig. 56 de obiecte Text1, Text2, Text3 și Path1 vor fi întotdeauna vizibile, iar toate celelalte numai când treceți mouse-ul peste obiectul Text1.
Orez. 54. Vedere originală a imaginii
Includeți fișierul Events.js care descrie procedurile JavaScript utilizând comanda Fișiere JavaScript din paleta de interactivitate SVG, făcând clic pe butonul Adăugare, arătând spre fișierul dorit de pe hard disk și făcând clic pe butonul Efectuat.
Definiți un răspuns la evenimentele mouse-ului pentru obiectul Text1. Selectați obiectul Text, în câmpul Eveniment al paletei SVG Interactivity, selectați evenimentul onmouseover și în linia de mai jos introduceți textul elemShow(evt, "Text4"); elemShow(evt, „Calea2”) . Ca rezultat, când mouse-ul este peste obiectul Text1, obiectele Text4 și Path2 vor deveni vizibile. Vă rugăm să rețineți că, dacă trebuie efectuate mai multe acțiuni atunci când are loc un eveniment, acestea trebuie specificate folosind semnul „;”. Apoi efectuați o operație similară pentru evenimentul onmouseout, introducând textul pentru acesta, ceea ce va însemna ascunderea obiectelor (Fig. 57).
Salvați rezultatul ca fișier SVG utilizând comanda Fișier => Salvare ca, specificând numele fișierului, selectând formatul SVG în câmpul Tip fișier și apoi setând opțiunile pentru salvarea fișierului SVG în conformitate cu Fig. 58. După salvare, va fi primit fișierul Primer6.svg (dosarul Primer6). Nu uitați să copiați fișierul Events.js în folderul cu acest fișier. Dacă după aceasta alergi coz acest fișier, apoi veți vedea rezultatul prezentat în Fig. 59. Acesta este aproape ceea ce ai nevoie. Singurul lucru care nu a fost inclus în planurile noastre a fost aspectul inițial al obiectelor Text 4 și Path 2 la încărcare. Pentru a scăpa de acest neajuns, selectați ambele date obiect simultan și creați o acțiune pentru ele elemHide(evt, "Text4"); elemHide(evt, "Path2") la evenimentul onload (Fig. 60). Salvați din nou fișierul și asigurați-vă că obiectele Text4 și Path2 sunt acum vizibile numai atunci când treceți cu mouse-ul peste obiectul Text1.
Orice pagină Web este de neconceput fără animație Web, inclusiv gif-uri animate. Una dintre opțiunile de creare a acestora este utilizarea aplicației Adobe ImageReady, care permite, printre altele, crearea de animație din straturi. În acest caz, imaginea multistrat în sine poate fi pregătită în diferite aplicații, inclusiv Adobe Illustrator.
Este foarte ușor să creezi o animație bazată pe elemente din paleta Simboluri, deschisă cu comanda Window=>Simboluri, sau dintr-una dintre bibliotecile de simboluri care pot fi deschise folosind comanda Window=>Symbol Libraries. ).
De exemplu, vom încerca să creștem dimensiunea oricărui obiect simbol; etapele cheie ale procesului de creștere a obiectului trebuie stabilite pe straturi separate. Mai întâi, așezați pur și simplu obiectele simbol unul deasupra celuilalt și apoi creșteți dimensiunea fiecărui obiect ulterior, de exemplu așa cum se arată în Fig. 61. Ca rezultat, un strat cu multe obiecte va fi creat în paleta Straturi (Fig. 62). Dacă exportați direct această imagine în format PSD, nu va da nimic, deoarece există un singur strat și, desigur, atunci când deschideți fișierul PSD în programul ImageReady, va exista și un singur strat. Prin urmare, mai întâi trebuie să plasați obiecte pe diferite straturi. Acest lucru se poate face căi diferite Cel mai simplu mod este să selectați mai întâi Stratul 1 din paleta Straturi și să utilizați comanda Eliberare la strat. Rezultatul va fi că fiecare dintre obiecte va fi mutat în propriul strat, dar toate vor fi imbricate în Layer 1. Prin urmare, va trebui apoi să trageți manual toate straturile imbricate în partea de sus a paletei Straturi, astfel încât acestea să fie deasupra stratului Layer 1, apoi pur și simplu ștergeți stratul Layer 1 acum gol (Fig. 63). Exportați imaginea în format PSD folosind comanda File => Export cu setări ca în Fig. 64.
Încărcați fișierul PSD creat în programul ImageReady (Fig. 65 și 66). Deschideți meniul paletei Animație Creați cadre din straturi. Ca urmare, vor fi create cinci cadre, fiecare dintre ele va corespunde propriului strat, iar fereastra paletei Animație va arăta ca în Fig. 67.
După aceasta, setați durata fiecăruia dintre cadrele create în acest caz, durata pentru toate cadrele este setată la 0,2 s. Și apoi salvați animația cu optimizare folosind comanda File=>Save Optimized (File=>Save with optimization). Rezultatul rezultat poate să semene cu Fig. 68.
Este și mai convenabil să obțineți spații libere care pot fi apoi convertite cu ușurință în animație în ImageReady pentru a utiliza funcțiile Live Blends din Illustrator. Această utilizare combinată a Illustrator și ImageReady accelerează semnificativ procesul de creare a animațiilor GIF.
De exemplu, desenați două obiecte multicolore arbitrare și apoi conectați-le cu o legătură de amestec cu parametrii corespunzători (Fig. 69). Este imposibil să utilizați acest fișier direct pentru a crea animație, deoarece imaginea este pe un singur strat (Fig. 70). Prin urmare, va trebui mai întâi să plasați fiecare element al obiectului amestec pe un strat separat. Pentru a face acest lucru, în fereastra Straturi, selectați linia, activați meniul paletei făcând clic pe săgeata neagră din colțul din dreapta sus și selectați comanda Release to Layers Sequence (Fig. 71). Țineți apăsată tasta Shift, selectați straturile create și plasați-le deasupra stratului Layer 1, apoi ștergeți stratul Layer 1 în sine, mutându-l în coșul de gunoi, ca rezultat, paleta de straturi va lua aceeași formă ca în Fig. 72.
Orez. 70. Stare initiala Straturi ferestre
Exportați fișierul creat în format PSD folosind comanda File => Export. Deschideți fișierul PSD creat în programul ImageReady (Fig. 73). Vă rugăm să rețineți că toate straturile create în Illustrator vor apărea în fereastra straturi (Fig. 74), iar în fereastra Animație va exista un singur cadru deocamdată.
Activați meniul paletei Animație făcând clic pe săgeata neagră din colțul din dreapta sus al paletei și selectați comanda Creați cadre din straturi. Ca rezultat, în acest exemplu, vor fi create cinci cadre, iar fereastra paletei Animație va prelua forma conform fig. 75. Selectați toate cadrele în timp ce țineți apăsată tasta Shift și setați durata corespunzătoare a cadrului în acest exemplu, se ia același timp de 0,2 s pentru fiecare cadru. Salvați apoi fișierul cu optimizare folosind comanda File=>Save Optimized (File=>Save with optimization), setând opțiunea Numai imagini (*.gif) în lista Tip fișier. Animația va semăna cu Fig. 76.
Ceea ce pare mult mai interesant nu este mișcarea, ci redimensionarea lină a obiectelor amestecate. De exemplu, puteți utiliza tranziția de amestec deja creată. În acest caz, după ce ați creat straturi separate pentru fiecare element de tranziție de amestec, plasați toate obiectele unul peste altul folosind butoanele Centru de aliniere orizontală și Centru de aliniere verticală ale paletei Aliniere (Fig. 77) .
Exportați fișierul creat în format PSD (File=>Export File=>Export) și deschideți fișierul PSD creat în programul ImageReady (Fig. 78). Creați cadre de animație bazate pe straturi (Make Frames From Layers Create frames from layers) și selectați o durată potrivită pentru acestea (Fig. 79). Și apoi, pentru a face animația mai eficientă, copiați cadrele existente, dar în ordine inversă, astfel încât imaginea să crească mai întâi și apoi să descrească și așa mai departe într-un cerc (Fig. 80). Apoi salvați fișierul de optimizare (File=>Save Optimized File=>Salvați cu optimizare). Animația rezultată este prezentată în Fig. 81.
Orez. 80. Starea ferestrei Animație după duplicarea cadrelor
Orez. 81. Animație terminată
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.
Există două moduri de a defini culorile. Cea mai ușoară modalitate este de a specifica o culoare cu o picătură direct pe imagine - după aceasta, culoarea va fi evidențiată pe tabelul de culori cu o contur întunecat. Ei bine, dacă știți exact ce culoare ar trebui să fie transparentă, o puteți selecta direct pe tabelul de culori făcând clic pe pătratul colorat corespunzător. Atât în primul cât și în al doilea caz, dacă trebuie să selectați mai multe culori, trebuie să lucrați cu tasta Shift (sau Ctrl) apăsată. 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: Fără transparență 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-ul transparent este 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).
Import și animație simplă Buna ziua. Astăzi ne uităm la animația simplă în After Effects.
Resurse: Adobe Illustrator CC
Adobe After Effects CC
Să începem să învățăm desenând în Illustrator.
Hai sa desenam
1) Desenați un dreptunghi galben ca fundal
Figura 1 - Dreptunghi
2) Desenați un cerc și umpleți-l cu un gradient
Să lucrăm puțin la cerc:
- ștergeți punctul de jos de pe contur, obținem un arc;
- trageți o linie dreaptă, închizând partea de jos a arcului, obținem un semicerc
Figura 2 - 1) desenați cerc; 2) gradient; 3) ștergeți punctul
3) Desenați un dreptunghi și faceți o copie a acestuia
- un dreptunghi gri;
- un alt dreptunghi este gri închis
4) Desenați un triunghi dintr-un asterisc setând numărul de raze la 3
Figura 3 - 1) lumina recta; 2) rect întuneric; 3) triunghi
5) Desenați o pisică folosind Pen și forme simple 
Figura 4 - 1) cap; 2) gât; 3) corp; 4) picior; 5) coada
Și acum cel mai IMPORTANT moment
Să distribuim imaginile în straturi (ceea ce va fi animat este pe un strat separat) astfel: 
Figura 5 - toate pozele (marcaj roșu straturi importante)
Gata, acum hai sa economisim.
Să ne uităm la setările de salvare
Figura 6 - Salvare
Și acum următoarea etapă. Închideți Adobe Illustrator și deschideți After Effects.
Importați în After Effects
Fișier - Import - Fișier - selectați fișierul nostru Illustrator salvat.
Să alegem să importam straturi din Illustrator; dacă punem filmări, vom obține o imagine cu straturi îmbinate, dar nu avem nevoie de asta.
Figura 7 - Import ca compoziție
Asta e, importat.
Acum să vedem ce avem. Faceți dublu clic pe compoziție astfel încât să se deschidă și să vedem straturile (dacă totul este făcut corect, vor fi mai multe straturi). Primim asta, vezi figura
Figura 8 - Compoziție deschisă
Și acum ceea ce suntem aici pentru astăzi este animație.
Animație în After Effects
Setați punctul de rotație în partea de sus a săgeții folosind instrumentul Pan Behind (comandă rapidă - Y). Luăm doar un punct și îl mutăm acolo unde este nevoie. Ca rezultat va arata asa... 
Figura 9 - Instrumentul Pan și Straturi
Gata, acum să trecem la straturile pentru animație.
Vom avea nevoie de un strat Arrow și Head_cat.
Să începem cu săgeata.
Să extindem lista, să o găsim și să facem clic pe ceas. Deci am stabilit primul punct la zero secundă. Animația va dura 2 secunde în total.
Deci, acestea sunt setările pe care trebuie să le faceți (vom pune 3 puncte în total):
| Al doilea | 0 | 1 | 2 |
| +66 | - 70 | +66 |
Figura 10 - Săgeată de rotație
Acum haideți să animam capul pisicii.
Să extindem head_cat și să găsim Position .
Vor fi 4 puncte aici.
Doar ultima coordonată va fi modificată fără a le afecta pe celelalte.
| Al doilea | 0.1 | 0.17 | 1.12 | 2.0 |
| Poziţie | 689.3 | 729.3 | 729.3 | 689.3 |
Figura 11 - Poziționați capul
Deci, principiul animației a fost așa. Săgeata se leagănă dintr-o parte în alta, de îndată ce se apropie de pisoi, își trage capul înăuntru, stă în această poziție pentru un timp, apoi îl readuce la locul său.
Etapa finală
Productie
Trebuie să creați un produs finit din munca dvs.
Accesați meniul - Adăugați la coada de randare
Se va deschide panoul Render și în Modulul de ieșire (două clicuri) selectați formatul de ieșire. am luat *.mov
Figura 12 - Redare
Faceți clic pe butonul RENDER și obțineți rezultatul (nu uitați să specificați calea).
Asta e tot.
