Kako stvoriti ilustrator animacije i sprite. Izrada animacija u ilustratoru

Zdravo svima! Danas ću pokušati dati opis značajki programa Adobe Illustrator, Upoređujući ga sa Flash Funkcijama. To neće biti globalno brtvljenje koštanog programa, već opis nekih zanimljivih čipsa koji sam otkrio za sebe u ovom programu. Informacije su prikupljene u komadima kao što je učenje izložilo sve u jednom postu. Odmah priznajem da nisam super iskusni korisnik ilustratora, samo zadnjih šest mjeseci koristim ga u crtanju (prije nego što je sve nacrtano u vašoj bljeskalici). Mnogi se uvjeravaju da je ilustrator složen, intuitivno nije uvijek razumljiv. Do neke mjere se slažem da je nakon bljeskalice ovaj program komplikovan. Ali tada glavna stvar nije prestati, već nastaviti učenje. I nakon nekoliko nedelja pojavljuje se misao, kako sam nekada radio bez njega!

Dakle, ono što mi se svidjelo u ilustratoru i da sam našao za sebe takve ono što nije u bljeskalici.
1. Počeću s najljepšim, ali u isto vrijeme vam treba. Pokušajte smjestiti predmete u krug. Ranije je bilo Deco alat. Ali, očigledno je uklonjeno, broje se nepotrebno. Odlučili su da ručke to rade zabavnije. U ilustratoru je ova značajka: Effect - Isključivanje i transformacija - transformacija.

Sve brzo i jednostavne, vrijednosti (udaljenost između objekata, broj primjeraka) sami odredite postavke.

2. cik-zag

Još jednostavnije, ali ipak korisna stvar. Činet bi se, ali u ispiranju morate se ručno izvući, u ilustratoru je ovo druga stvar.

3. Deformacija objekata (Warp)

U bliclu nema ništa slično. Na donjem primjeru pokazao sam samo 2 načina deformacije jednostavnih oblika (efekt - Warp - luk / riba). U stvari, njihovih 15 u najnoviju verziju Programi.

4. Automatsko zaokruživanje uglova (okrugli uglovi)

Možete ručno učiniti: na grafičkom objektu tokom izolacije u uglu (u svim žljljama) nalazi se bijela točka i savezni znak linije. Povučem miša, prilagodim se vašem ukusu.

Ali to se odnosi samo na oblike, s linijom olovkom malo drugačije - nanesite učinak zaokruživanja ( Efekat - stiliziranje - okrugli uglovi). Na izlazu dobivamo istu moć.

5. Gruboš (ulje)

Efekat se odnosi K. jednostavni oblici (Efekat - iskrivljavanje i transformacija - grubo). Na izlazu, dobivamo nešto što nalikuje nisko-polboralskim 3D modelima. Po mom mišljenju, cool :) i najvažnije - vrlo jednostavno.

6. Pucker & Bloat (Povlačenje i naduvanje)
Primjer na slici ispod:

7. Obrazac za proširenje (offset put)

U Flash-u postoji funkcija proširenja punjenja (proširujući punjenje), sa olovkama ne radi uopće, za razliku od ilustratora.

8. Četke (umjetnička četka, četkica za uzorak, četkica za rasipanje)
Izgledamo ni u nastavku sa primjerima:

9.Texture četkica (teksturna četkica)

Također u ilustratoru postoji puno teksturiranih četkica, o čemu sam napisao i kako su se pojavili nova verzija Flash. Primjećeno je da upotreba četkica u Adobe Animiteu je zastrašujuće inhibirane. To je to:(

10. Niste sigurni da je to ravni trik, ali želim ostati u tasselu s smiješnim imenom MrljaČetkica.. Smješten na alatnoj traci, vrlo ugodno koristiti četku. Ima gomilu postavki, sviđa mi se više nego inače. Riječima je teško objasniti svoje prednosti, bolje je pokušati jednom.

10.Split za rešetku.

Takođe korisna stvar - Split na mrežu (Split na mrežu (Split objekta na mrežu). Lokalci su rezali oblik na jednake segmente. Šta nas podseća? Tačno - prozori u visokoj zgradi. Što se mene tiče, hladan komad za crtanje, na primjer, urbani pejzaži;)

Posebno jedan koristan alat predstavljen u ilustratoru, verovatno od svog prvog izleta. S njom možete stvoriti, na primjer, drvena tekstura:

12. Pomaknite se (desno - transformacija - premještanje)

Ofset predmet na unaprijed određenoj udaljenosti. Ako želite, možete odmah stvoriti kopiju koja će biti postavljena na željenoj udaljenosti od odabranog horizontalnog objekta / ili vertikalnog objekta. U ranijoj verziji Flash-a bio je dodatak koji je izveden ova značajka. Nažalost, ne sjećam se njegovog imena.

U ilustratoru je vrlo prikladno stvoriti bešavne uzorke ( Objekt-uzorak - napravite). Sjećam se kako sam se frantično sofisticiran u bljeskali. U verziji ilušnja SS 2015, sve je automatizirano, puno postavki pomoći će slijepim uzorcima u desetinama varijacija, imajući samo nekoliko grafičkih elemenata pri ruci. U ranijim verzijama programa svi su morali raditi ručno, kao i u flush do sada.

(Napomena - obrazac može se izvesti vektorskim uređenim objektom koji koristi funkciju za rastavljanje ( Objekt - Proširite nastup).

14. Objekt mozaik (mozaik)

Stvaranje palete boja na osnovu dostupne slike. Uvezi svoju omiljenu sliku u bolesno (otvoreno), onda Objekt - Kreirajte objektni mozaik. U postavkama navedite frekvenciju fisije u visinu i širinu.

I stižemo na izlaz:

15.blend (miješanje)

Koristi se za stvaranje gradijenata. Možete stvoriti korake po korak prijelaze, kao što su na slici. Neću reći da ga često koristim, ali može doći nekome zgodno. Čini mi se da možete koristiti u stvaranju jednostavnih pozadinskih slika.

Takođe, alat se može koristiti za kloniranje objekata. Postavljamo dva objekta na daljinu jedni od drugih i primjenjujemo opcije mješavine, odaberite broj koraka (broj kloniranih objekata).

16. Alat alata za izradu izrade. Vrlo ugodno raditi sa primitivima. U bljesku, kako mi se činilo, manje zgodno.

Klikom na Alt i kliknite na posebne segmente - Izbrišite segmente. Ako jednostavno istegnete miš preko nekoliko namjenskih područja - povežite se.

Doplata - alat koji pomaže automatski prekinuti, povezati itd. Odabrani oblici. Što se mene tiče, nije baš zgodno, koristim češće IzgraditiOblikaAlat.

(Montažna područja)

18.Kustom panela za alate.

Mogućnost stvaranja vlastitog alatne trake, bacanje nepotrebnog i odaberite samo one koje koristite.

U ispiranju, montažnim prostorima, naime scene ( SCENA 1,2,3 ..) Smješten odvojeno i između njih morate prebaciti (Shift + F2). U ilustratoru se mogu postaviti pred njihovim očima. Povoljno, kada napravite nekoliko opcija za istu sliku tako da su sve mogućnosti prije naših očiju za usporedbu.

19. Izometrično sa grafičkim stilovima

A potonje je stvaranje izometrijske bez upotrebe u 1 kliku (i tačnije, u 3 klika, jer imamo 3 strane;) sa grafičkim stilovima ( Grafički stilovi.). Kako se radi, napisat ću sljedeći put.

Sveukupno sa bljeskalicom iz ilustratora - mogućnost spremanja objekta u simbol (simbol), a takođe, bez ikakvih problema može se prenijeti na bljeskalicu (otvoriti u Flash.ii datoteci Uvoz - uvoz u pozornicu).
Lik u ilustratoru ima ista svojstva kao i u bljeskalici.
I na kraju ću to napisati u ilustratoru, po mom mišljenju, inferiorno je bljesak. Da, da, i to jeste. A ovo je alat za punjenje ( Kantica.). Kako se ne pokušavam naviknuti na nju u Illeu, u spornu je prikladnije.
Ako su moje beleške postale korisne za vas ili šta želite od sebe do nadopune - Velkov u komentarima! Sretno svima;)

Nedavno, SVG animacija (skalabilna vektorska grafika) grafika na web lokacijama i aplikacijama postala je vrlo popularna. To je zbog činjenice da sve novi pretraživači Već podržavaju ovaj format. Evo podataka za podršku SVG pretraživačima.

Ovaj član govori o tome najjednostavniji primjer animacija SVG. vektori svjetlosna pomoć JQuery dodatak Lazy Line slikar.

Izvorni kod

Da biste ispunili i potpuno razumeli ovaj zadatak, osnovno znanje HTML-a, CSS-a, jquery, ali ne nužno ako samo želite animirati SVG) Idemo gore!

I tako korake koje moramo da nastupimo:

Kreirajte desnu strukturu datoteka
Preuzmite i povežite dodatak
Nacrtajte cool contur sliku u Adobe Illustratoru
Pretvorite našu sliku u lijen linijski pretvarač
Umetnite rezultirajuće kod u main.js
Dodajte neke CSS u ukus

1. Napravite ispravnu strukturu datoteke
S tim će to pomoći inicijalizR usluzi u kojoj trebate odabrati parametre kao na slici ispod.

Klasična H5BP (HTML5 kotlovnica)
Nema predloška.
Samo html5 shiv.
Miniran
Tj. CASSE.
Kromirani okvir.
Zatim kliknite Preuzmi!

2. Preuzmite i povežite dodatak

Budući da inicijalizR dolazi s najnovijom jQuery bibliotekom, iz arhive koju trebamo preuzeti iz laznog reprezentacije LINE slikarskog projekta, morate prenijeti samo 2 datoteke u naš projekt. Prvi je 'jquery.lazylinepainter-1.1.min.js' (Plug-in verzija može se razlikovati) u korijenu je rezultirajuće mape. Drugi je primjer / JS / dobavljač / rafael-min.js.

Ove 2 datoteke su postavljene u LS mapi. I povežite ih s našim index.html ispred Main.JS na sljedeći način:

3. Nacrtajte sliku strme konture u Adobe Illustratoru

Nacrtamo svoju konturu na ilustratoru (najlakši način za napraviti sa olovkom)
Potrebno je da konture našeg crteža ne zatvaraju TC za naš učinak. Početak i kraj
Ne bi trebalo biti puna
Maksimalna veličina datoteke - 1000 × 1000 px, 40kb
Obreži objekt objekta\u003e Artboards\u003e Fit na Artboards Granice
Spremi u SVG formatu (standardne Spremi postavke su prikladne)

Na primjer, možete koristiti ikone u prilogu.

4. Pretvorite našu sliku u prefinjenju Line
Samo povucite svoju ikonu u prozoru koji na donjoj slici.
Debela, boja kruga i brzina animacije mogu se mijenjati u samu kodu koji će se pojaviti nakon konverzije!

5. Umetnite rezultirajuće kod u main.js
Sada jednostavno umetnite primljeni kod u praznoj main.js datoteci
Parametri:
StrokeWidth - Debljina konture
Strokecolor - Konturna boja
Možete i promijeniti brzinu crtanja svakog vektora promjenom vrijednosti parametra trajanja (zadano 600)

6. Dodajte neke CSS u ukus
Uklonite iz index.html odlomak

Zdravo svijete! Ovo je HTML5 kotlovnica.

I umesto da ubaci blok u koji će se pojaviti naša animacija

zatim dodajte neke CSS u main.css datoteku za ugodniji dizajn:

Tijelo (pozadina: # f3b71c;) #icons (položaj: fiksno; vrh: 50%; lijevo: 50%; margina: -300px 0 0 -400px;)

spremite sve datoteke.
Sada jednostavno otvorite index.html u modernom pretraživaču i uživajte u efektu.

P.S. Kada se započinje na lokalnoj mašini, početak animacije počinje nekoliko sekundi.

Optimizacija web grafike

Grafičke informacije se prenose mnogo sporije od teksta, a vrijeme za učitavanje slike proporcionalno je veličini njihovih grafičkih datoteka. stoga brzo preuzimanje Web stranice uključuju malu veličinu grafičkih slika ugrađenih u njih, što se postiže njihovom optimizacijom. Pod optimizacijom slike shvaćena je njenom konverzijom koja pruža minimalnu veličinu datoteke uz održavanje potrebnih ovaj slučaj Kvaliteta slike, koja se postiže prvenstveno smanjenjem broja boja u grafičkim slikama, upotreba komprimiranih i posebnih formata datoteka i optimiziranje kompresijskih parametara za pojedinačne fragmente slika.

Illustrator ima ugrađene alate za optimizaciju slika, pružajući različite metode pregleda brzo i efikasno provođenje procesa optimizacije. Pregled Daje prilično precizan prikaz na način na koji će izgledati optimizirana slika u stvarnom vremenu, što pomaže u proceni rezultata optimizacije i uspješno odabir željenih postavki. I možete optimizirati obje slike kreirane direktno u programu ilustratora i druge, poput fotografija koje bi trebale biti postavljene na web mjestu.

Opcije optimizacije postavljene su u prozoru Sačuvati za Web. (Ušteda za web) uzrokovanu naredbom na meni Dosije (Datoteka). Program predlaže korištenje jednog od četiri načina pregleda, ali za procjenu kvalitete optimizacije najbolji način Dvoje su pogodne:

2-gore. (dvije mogućnosti) - istovremeno gledanje izvorne i optimizirane slike u skladu s navedenim postavkama (Sl. 1);
4-gore. (Četiri opcije) - u ovom režimu prikaz je podijeljen u četiri prozora (Sl. 2) za prikaz izvorne slike i tri verzije optimiziranog: Prva verzija je stvorena na osnovu instaliranih optimizacijskih vrijednosti, a druga dva su Opcije za trenutnu postavke optimizacije.

Oba načina omogućavaju vam da značajno uštedite vrijeme na pronalaženju bolje optimizacije, dok spremate iz potrebe za spremanjem slike iz različite postavke Optimizacija i njihova naknadna vizuelna usporedba. Pored toga, moguće je procijeniti ne samo kvalitetu optimizirane slike, već i njegove veličine i vrijeme pokretanja s različitim opcijama povezivanja. Za usporedbu, 4-up mod je najprikladniji (četiri opcije), omogućavajući vam vizualno procijenite učinak kompresije ili smanjite paletu na kvalitetu slike i njegovu veličinu i na kraju odredite najbolje parametre optimizacije.

Illustrator vam omogućava da optimizirate web grafiku u formatu ne samo GIF, JPG, PNG-8 i PNG-24, već i u SWF i SVG. Indeksirane slike koje imaju mala količina Boje se spremaju u GIF format. Za očuvanje slika u punoj boji i polutona - fotografije i grafikone zasićene boje, poput gradijentnih puna, koristi se jPG format. Za pune slike u boji primijenjene su prozirne stranice pNG formatšto vam omogućava da sačuvate i indeksirane i pune boje slike, dok je u PNG-8 formatu maksimalni mogući broj boja optimizirane slike 256, a u PNG-24 formatu slika može imati milione boja i Stoga izgleda jPEG format. Razlika između PNG-24 iz JPEG-a je da se metoda kompresije koristi za optimizaciju slika u PNG-24 formatu ne dovode do gubitka kvalitete, ali kao rezultat, veličina datoteke se povećava. SVG i SWF formati kombiniraju grafičke podatke, tekstualne i interaktivne komponente i mogu se optimizirati.

Razmotrite poseban primjer optimizacije slike. Pretpostavimo da je program ilustratora razvio amblem web stranice (Sl. 3), prvobitno spremljenog u AI formatu. Pokušaj da ga odmah optimizira za web neće dovesti do nečeg dobra, jer će u ovom slučaju biti automatsko obrezivanje slike u kojoj se istinski položaj dobiven kao rezultat deformacije natpisa neće uzeti u obzir ( Sl. 4 i 5).

Dakle, pokušajmo izvesti amblem u pSD format Timu Datoteka \u003d\u003e Izvoz (File \u003d\u003e Izvoz) - Veličina stvorene slike bit će 143 Kb. Otvorite nastalu PSD datoteku i koristite naredbu Datoteka \u003d\u003e Sačuvaj za Web (Datoteka \u003d\u003e Spremanje za Web). Uzimajući u obzir ograničen broj boja uključenih u sliku u ovom slučaju, GIF format je optimalan, sa specifičnim postavkama koje i morate odlučiti. Eksperimentira sa postavkama, možete osigurati da najbolji kvalitet daje odabrani algoritam kompresije odabranim po zadanom programu Selektivan (Selektivno). Što se tiče izglađivanja, s obzirom na prisustvo gradijenta, bolje je odabrati algoritam sa proizvodnjom buke - Buka. (Sl. 6). Veličina rezultirajuće optimizacije datoteke bit će 6,729 KB (Sl. 7), dok će se uštedjeti pozadinska transparentnost, što je lako sačuvati sliku u GIF formatu, zajedno sa HTML datotekom (Sl. 8). Kao rezultat toga, u ovom primjeru, datoteke Emblem.html i Emblem.gif primljeni su u mapi PRIMER1.

Gumbe

Neophodni specifični dizajnerski element bilo koje web stranice su grafičke kontrole - tipke. Jednostavno je nemoguće zamisliti stranicu bez njih. Tasteri za crtanje danas su postali poseban žanr, a Illustrator vam omogućuje stvaranje najmitičarnijih opcija. Na primjer, gumbi su ukrašeni kao mrežni objekti i (ili) s nametanjem maski, izgledaju mnogo efikasnije obične.

Razmotrite mogućnost kreiranja kružnog konveksnog gumba u programu ilustratora. Nacrtajte vektorski objekt u obliku kruga s proizvoljnim bojama (Sl. 9) i pretvorite je u rešetku Objekt \u003d\u003e Kreirajte gradijentnu mrežu (Objekt \u003d\u003e Kreirajte gradijentnu mrežu), navodeći četiri retka i četiri stupca, a na popisu Izgled (Pogled) odabirom opcije Do centra. Istaći (Pozadinsko osvetljenje) jednako 60 (Sl. 10). Odaberite alat Direktan izbor I kliknite gornji lijevi ugao objekta odabirom nodalnih tačaka (Sl. 11). Promijenite boju odgovarajuće ćelije na bijelo odabirom u paleti Swatchevi. (Sl. 12).

Uzmi alat Elipse (Ellipse), postavite oznaku miša u sredinu stvorenog prije ovog kruga i držeći tipke Alt. i Smjena., Ispružite novi krug na vrhu stare kako bi se ispostavilo da bude stara na 1-2 piksela sa svih strana. Uradi njenu crnu granicu ( Hod.) 1-2 Širina piksela i sipajte radijalni gradijent prema crvenoj do bijeli (Sl. 13). Povucite stvoreni vektorski objekt na 1-2 piksela udesno i dolje, a zatim, bez uklanjanja odabira, kliknite na njega desnom tipkom miša i odaberite naredbu iz kontekstnog izbornika. Rasporedite \u003d\u003e Pošalji nazad (Poredaj \u003d\u003e Pošalji natrag). Kao rezultat toga, ispada prazno za gumb prikazan na slici. četrnaest.

U pravilu postoji nekoliko sličnih tipki na bilo kojoj web stranici koja se razlikuju, na primjer, samo smjer strelica na koji se navodi, što znači smjer kretanja uz web mjesto. Razmotrite najlakši slučaj prisutnosti dva dugmeta, od kojih je jedna, sa strelicom prema dolje, znači da će se kretati dalje sljedeća stranica, A tipka sa strelicom gore je na prethodnoj. Kao strijela za berbu, uzimamo konvencionalni trokut koji je izvukao alat Poligon. (Poligon), oslikan u crnoj boji i za veći efekat uređen je i kao mrežni objekt. Pomaknite strelicu na gumb i prilagodite položaj svih objekata jedan drugom u odnosu na odgovarajuće tipke za paletu. Poravnajte. (Poravnanje). Prvi tasteri dobiveni prikazan je na slici. 15. Kopirat ćemo sloj sa gumbom odabirom naredbe Duplikatni sloj. Slojevi.- Kao rezultat toga, dobivamo dva identična sloja. Zatim, na kopiji sloja odaberite strelicu i okrenite ga 180 ° odabirom naredbe iz kontekstnog izbornika Transform \u003d\u003e Rotiranje - Transformacija \u003d\u003e Rotiranje. Dobijamo isto dugme kao što je prikazano na Sl. 16. Imajte na umu da je mnogo prikladnije za pohranjivanje svih istih tipki za projekt za pohranu u jednoj datoteci na različitim slojevima, što se u ovom slučaju pokazuje.

Sada morate sačuvati optimizirane opcije za svaki od gumba. Isprva napravite nevidljivi donji sloj - u ovom slučaju će se spremiti tipka na gornjem sloju. Odaberite tim Datoteka \u003d\u003e Sačuvaj za Web (Datoteka \u003d\u003e Sačuvaj za Web), Konfigurišite opcije optimizacije gumba, na primjer, kao što je prikazano na Sl. 17 Kliknite na gumb Spremi. (Spremi) i unesite ime datoteke. Dugme spremljeno na kraju prikazano je na slici. 18. Sada vratite vidljivost donjim slojem, a gornja će biti nevidljiva i na isti način, sačuvajte drugo dugme, navedite drugo ime za to. Rezultat je predstavljen na slici. Devetnaest.

Sada ostaje da se pobrine da su gumbi sasvim prihvatljivi pogled na web stranicu i smjestite ih na proizvoljnu stranicu (Sl. 20). Kao rezultat toga, u ovom primjeru, datoteke PRIMER2.HTML dobivene su u dvije grafičke slike u mapi Slike. PRIMER2.).

Po želji, u procesu optimizacije, gumb se lako pretvori u krišku. U ovom slučaju, nakon odabira naredbe Datoteka \u003d\u003e Sačuvaj za Web (Datoteka \u003d\u003e Spremi za web) i postavljanje opcija optimizacije treba odabrati iz palete alata za alat Slice Select.(Raspodjela kriške) i dvaput kliknite na sliku, koja će se na kraju automatski pretvoriti u klizanje s nizom 1 (Sl. 21). Dvaput kliknite mišem dovesti do otvaranja prozora Opcije za kriške. (Opcije proreza), u kojem će biti potrebno odrediti vezu i po želji, promijeniti naziv klizača (Sl. 22), a zatim spremite optimizirani sliku. Rezultat u ovom slučaju bit će PRIMER3.HTML datoteke (Sl. 23) i PRIMER3.GIF (PRIMER3 mapa).

Interaktivni elementi

Jedan od načina za revitalizaciju stranice je uvođenje dizajnerskih elemenata koji mijenjaju svoje izgled (ili stanje) ovisno o ponašanju miša ili, manje vjerovatno, u slučaju bilo koje druge situacije: skaliranje, pomicanje, utovar, pojavu greške itd.

Među takvim elementima Rollovers su dobili najveću slavu (s engleskog. Prekoračite se - prevrnite se) - elementi mijenjaju izgled pod utjecajem miša. Primjeri tipičnih rolovoja su animirani tasteri. Rollovers se često koriste i prilikom stvaranja drugih navigacijskih elemenata stranice. U stvari, bilo koji prelazak nije jedan, već nekoliko (do četiri) slike, od kojih svaka odgovara određenom događaju. Glavni događaji su uobičajeni: Normalno - normalno stanje, preko - lebdeći kursor miša u element i dolje - pritiskom na lijevu tipku miša kada se pokažite pokazivač. Teoretski, događaji mogu biti uključeni kao klik - otpustite lijevu tipku miša nakon pritiska, gore - nakon puštanja gumba, van - prilikom izlaska na aktivnu zonu. Međutim, u praksi se češće ograničava na promjene u elementu samo na prva tri ili čak dva događaja.

Klasični rolver

U klasičnom razumijevanju, prevrtanje je niz grafičkih slika u GIF formatu i odgovarajući HTML kod, zbog kojeg se, ovisno o ponašanju miša, jedna slika zamjenjuje druga u prozoru pregledača.

Ilustratorski program nije namijenjen izravno stvaranju Roloversa u svom klasičnom razumijevanju, ali može pomoći prilikom razvijanja početnih elemenata za njih. Ideja u ovom slučaju je da trebate stvoriti sloj sa slikom koja odgovara prvom događaju. Zatim napravite kopiju sloja i pretvorite sliku tako da odgovara drugom događaju itd. Rezultirajuća višeslojna slika izvozi se u PSD datoteku sa očuvanjem slojeva, na osnovu kojeg se rolover kreira u programu spremne slike. Plus upotreba ilustratorskog programa, kao u mnogim drugim slučajevima, brojne zanimljive mogućnosti nepristupačne u drugim softver, u kombinaciji sa praktičnošću vektorske grafike transformacije.

Pokušajmo stvoriti prevrtanje u obliku promjene natpisa, ovisno o ponašanju miša. Otvorite ilustrator i stvorite oblik u obliku zaobljenog i crnog pravokutnika (Sl. 24), napravite kopiju i stavite ga u slobodan dio ekrana. Pretvorite prvu kopiju pravokutnika u mrežni objekt sa osvjetljenjem u sredini (tim) Objekt \u003d\u003e Kreirajte gradijentnu mrežu - Objekt \u003d\u003e Kreirajte gradijentnu mrežu), navodeći četiri retka i deset stupaca (Sl. 25). Aktivirajte drugu kopiju pravokutnika i podesite gradijent ispunite ga kako slijedi kao što je prikazano na Sl. 26. Provjerite gradijentski objekt na vrhu mreže, smanjite neprozirnost gradijentnog objekta na oko 80%, a veličina je oko 1 piksela tako da na kraju silomizira učinak izbočenja. A zatim ispisati natpis na vrhu predmeta. U originalnom obliku, neka ima bijelu boju koja će odgovarati stanju normalne (Sl. 27), a zatim prilikom promjene stanja prevrtanja, boja natpisa će se mijenjati, na primjer, na zelenu - kada Zadržite pokazivač miša na njemu (preko države) i plavom - kada pritisnete tipku miša (stanje dolje).

Obratite pažnju na paletu Slojevi. - U ovoj fazi postoji samo jedan sloj u njemu. Napravite dvije kopije ovog sloja primjenom naredbe. Duplikatni sloj. (Duplikat sloja) iz menija palete Slojevi.- Tri sloja postat će u paleti (Sl. 28). Zatim u prvoj kopiji sloja promijenite boju natpisa na zelenu, a u drugom - na plavoj (Sl. 29). Kao rezultat toga, dobit će se potreban radni komad za prelazak.

Izvezite stvorenu sliku u PSD format sa očuvanjem slojeva pomoću naredbe Datoteka \u003d\u003e Izvoz (Datoteka \u003d\u003e Izvoz) i odabir modela RGB boja (Sl. 30). Otvorite kreiranu PSD datoteku u programu imageeried (slika 31 i 32). Stvorite okvire na osnovu slojeva odabirom naredbe Napravite okvire od slojeva (Napravite okvire sa slojeva) iz menija Paleta Animacija.. Prozor za animaciju će pogledati na slici. 33. u isto vrijeme u paleti Rollovers U početku će se stvoriti jedno jedino stanje normalne.

Onda u prozoru Animacija.odaberite okvir koji odgovara induciranom stanju, dok je u paleti Slojevi. Automatski ističu sloj Sloj 1 kopiju (Sl. 34). Idi do palete Rolloversi kliknite na gumb Kreirajte rollover stanje (Napravite prebacivanje) - Sl. 35, što će dovesti do pojave države Preko državeu paleti Rollovers(Sl. 36). Slično tome, stvorite stanje Dolje stanje. Aktivirajte stanje Normalan U paleti Rollovers I uklonite u paleti Animacija. Svi okviri, pored toga, koji moraju odgovarati državi Normalan. Kao rezultat, za svako stanje RoloVover u paleti Animacija.bit će samo jedan okvir (Sl. 37, 38 i 39).

Sl. 38. Pogledajte sliku, animaciju prozore i slojeve i prekrivene palete za nad državnom statusu

Provjerite rezultat klikom na gumb Pregled u zadanom pretraživaču (Pregled u pretraživaču) na alatnoj traci i pretvoriti u prozor preglednika (Sl. 40). Nakon toga sačuvajte datoteku primjenom naredbe. Datoteka \u003d\u003e Spremi optimizirano (Datoteka \u003d\u003e Spremi sa optimizacijom) i određivanje opcije HTML i slike (* .html). Kao rezultat, u ovom primjeru dobijene su Primer4.html datoteka i niz grafičkih slika u mapi slika.

Sl. 40. Prozor preglednika sa prevrtanjem elementa

SVG Rolovier

Popularni SVG format (skalabilna vektorska grafika - skalabilan vektorska grafika), kreirano na temelju XML standarda, također vam omogućuje da dobijete različite interaktivne elemente, posebno u Roloversu, samo u praksi, to se provodi potpuno drugačije. Vrijedi napomenuti da stvaranje interaktivnih SVG-rolača, za razliku od klasičnog, kada se odgovarajući HTML kôd automatski generira u potpunosti, zahtijeva znanje javaScript jezik i razumijevanje osnovnih principa objektno orijentiranog programiranja.

Specijalna paleta dizajnirana je za rad sa SVG objektima. SVG interaktivnostšto se lako otvara uz pomoć tima Prozor \u003d\u003e SVG interaktivnost (Prozor \u003d\u003e SVG interaktivnost) - Sl. 41.

Razmotrite ovu opciju za kreiranje prevrtanja na primer interaktivnog dugmeta, boja natpisa će se promijeniti iz crne u plavu kada lebdite mišem i ponovo pretvorite u crno kada mišem ne izlazi iz aktivne zone.

Stvorite pravokutni gumb sa zaobljenim ivicama i pokupite odgovarajući gradijent ispunite ga, na primjer, kao što je prikazano na Sl. 42. Prilagodite transparentnost gumba u paleti Prozirnost (Transparentnost) - u ovom primjeru, vrijednost parametra Neprozirnost (Neprozirnost) postavljeno na 50%. Napravite kopiju gumba, napunite ga tamnozelenom (Sl. 43), a zatim je pretvorite u naredbu Grid objekt Objekt \u003d\u003e Kreirajte gradijentnu mrežu(Objekt \u003d\u003e Kreirajte gradijentnu mrežu), navodeći četiri retka i deset stupaca, a na popisu Izgled(Pogled) odabirom opcije Do centra. (Do centra) i postavljanje vrijednosti Istaći (Pozadinsko osvetljenje) jednako 100. Smanjite neprozirnost sloja sa mrežnim predmetom o DA 40% (Sl. 44). Stavite mrežni objekt preko gradijenta, a tipka će se podsjetiti na Sl. 45.

Sl. 44. Pretvaranje kopije gumba na mrežni objekt

Ispunite dugme predloženog natpisa i podesite svoj položaj pomoću odgovarajućih tastera za paletu. Poravnajte. (Poravnanje). Rezultirajuća slika sadrži jedan sloj s tri objekta koji su jedna na drugu (Sl. 46). Planirani događaji odnosit će se na tekstualni objekt, tako i za praktičnost, promijenite njegovo ime Tekst.Dvostrukim klikom na objekt i ulazak u novo ime. Slično promijenite naziv sloja sa Sloj 1 na sloju (Sl. 47).

Obrada događaja uključuje korištenje JavaScript postupka, tako da trebate povezati datoteku s opisom ovih postupaka. Naziva se događajima. I sačuvane na disku u uzorku datoteka \\ uzorak Art \\ SVG \\ SVG mape prilikom instaliranja adobe programi Ilustrator. Da biste povezali datoteku događaja.js, koristite naredbu JavaScript datoteke. SVG interaktivnost (Sl. 48). Dalje morate kliknuti Dodati. (Dodaj) i pronađite željenu datoteku na tvrdom disku. Kad se pojavi njegovo ime na terenu Url (Sl. 49), kliknite na dugme Gotov (Izači).

Sl. 48. Odabir tima za JavaScript datoteke

Nakon toga odredite reakciju na mišje događaje za objekt Tekst.. Odaberite tekstualni objekt na polju Događaj (Događaj) palete SVG interaktivnost Odaberite događaj onmouseover elemcolor (Evt, "Tekst", "# 3333ff") - To će značiti da kada nađete miš preko objekta Tekst.boja će se mijenjati u plavu (Sl. 50). Da bi se tekst teksta učinili nakon unosa aktivne zone, boja teksta promijenila se na crno, bit će potrebno stvoriti drugi događaj. onmouseout.- Odaberite ga na terenu Događaj (Događaj) palete SVG interaktivnost. Zatim unesite tekst u red elemcolor (Evt, "Tekst", "# 000000")- To će dovesti do povratka crnih boja (Sl. 51).

Sl. 51. Konačni prikaz SVG palete interaktivnosti za tekst objekta

Spremite kreirani prebacivanje kao naredbu SVG datoteke File \u003d\u003e sačuvaj kao (Datoteka \u003d\u003e Vrsta datoteke format SVG.A zatim konfiguriranje opcije SVG datoteke kao što je prikazano na Sl. 52. Nakon uštede primit će se samo jedna pojedina datoteka s proširenjem SVG, a ne dva, kao u slučaju klasičnog prevrtanja, - u ovom slučaju prisposobljena je Primer5.svg datoteka (PRIMER5 mapa). Međutim, kako bi se prevrtanje zaista radilo, potrebno je kopirati datoteku događaja.js s opisom JavaScript u mapi sa SVG datotekom. Nakon toga možete provjeriti izvedbu prevrtanja - rezultat će izgledati prikazan na slici. 53.

SVG Animacija

SVG format može se koristiti za prenos animacije. Pokušajmo stvoriti najjednostavniji animacijski element (u ovom slučaju bit će informacije o kompaniji), što će se pojaviti na ekranu kada pokažete miša do odgovarajućeg grafičkog objekta i nestane prilikom uklanjanja miša iz interaktivnog elementa.

Napravite otprilike takvu seriju grafičkih i tekstualnih objekata, kao što je prikazano na Sl. 54. Preimenovali ćemo sve stvorene objekte koji dosljedno klikuju na ime sljedećeg objekta u paleti. Slojevi. i uvođenje željenog imena (Sl. 55). Imajte na umu da je istaknuto na slici. 56 objekata - Text1, Text2, Text3 i Staza1 - uvek će biti vidljivo, a svi ostali - samo kad lebdite mišem Text1.

Sl. 54. Originalna vrsta slike

Povežite datoteku događaja.js s opisom JavaScript postupka primjenom naredbe. JavaScript datoteke. (JavaScript datoteke) iz palete SVG interaktivnostPritiskom na dugme Dodati.(Dodaj) specificiranjem željene datoteke na tvrdom disku i klikom na gumb Gotov (Izači).

Odredite reakciju na miševine za objekt Text1. Odaberite objekt Tekst., u polju Događaj (Događaj) palete SVG interaktivnostodaberite događaj onmouseover a u donjem retku unesite tekst elemshow (Evt, "Text4"); Elemshow (Evt, "Path2"). Kao rezultat, prilikom pronalaska miša preko objekta Text1 postat će vidljivi predmeti Text4. i Staza2. Imajte na umu da ako ako se dogodi događaj, potrebno je izvršiti nekoliko radnji, tada moraju biti navedene putem znaka ";". Tada slična operacija, smatrajte događaj. onmouseout.Unošenjem teksta za njega, koji će značiti skrivanje objekata (Sl. 57).

Spremite rezultat kao naredba SVG datoteke File \u003d\u003e sačuvaj kao (Datoteka \u003d\u003e Spremi kao) određivanjem naziva datoteke odabirom u polju Vrsta datoteke SVG format, a zatim konfiguriranje opcije Svjesne uštede datoteke prema Sl. 58. Nakon spremanja, primljenik se primio Primer6.SVG datoteka (PRIMER6 mapa). Ne zaboravite kopirati datoteku događaja.js u mapu s ovom datotekom. Ako onda pokrenete popove ova datotekaVidjet ćete rezultat predstavljen na Sl. 59. To je skoro ono što trebate. Jedino što nije uključeno u naše planove je početni izgled predmeta. Tekst.4 I. Put.2 Priložite se. Da biste se riješili ovog nedostatka, odaberite oba objektna podataka odjednom i stvorite akciju za njih. elemhide (Evt, "Text4"); Elemhide (Evt, "Path2") na događaju on. (Sl. 60). Spremite datoteku ponovo i pobrinite se da sada predmeti Text4. i Staza2 vidljivo samo pri lebdenjem miša na objektu Text1.

Gif animacija

Svaka web stranica je nezamisliva bez web animacije, uključujući bez animacije Gif'ov. Jedna od mogućnosti za njihovo kreaciju je primijeniti aplikaciju Adobe Imagereath koji vam omogućuje stvaranje animacije od slojeva. Istovremeno, sama višeslojna slika može se pripremiti u različitim aplikacijama, uključujući Adobe Illustrator.

Vrlo lako stvoriti animaciju na osnovu elemenata iz palete Simboli. (Simboli) otvori naredba Prozor \u003d\u003e Simboli (Prozor \u003d\u003e znakovi) ili iz jedne od biblioteka simbola koje se mogu otvoriti primjenom naredbe Prozor \u003d\u003e Biblioteke simbola (Prozor \u003d\u003e Biblioteke simbola).

Na primjer, pokušat ćemo povećati veličinu bilo kojeg objekta simbola, ključni koraci objekta za povećanje objekta moraju se postaviti na odvojene slojeve. U početku jednostavno postavite simbole objekta jedan preko drugog, a zatim povećajte veličinu svakog sljedećeg objekta, na primjer, kao što je prikazano na Sl. 61. Kao rezultat, u paleti Slojevi. Stvorit će se jedan sloj s raznim objektima (Sl. 62). Ako direktno izvezete ovu sliku u PSD format, neće ništa dati, jer je sloj jedan, i naravno, prilikom otvaranja PSD datoteke u programu imageed, postoji i samo jedan sloj. Stoga je preliminarno potrebno za postavljanje objekata na različite slojeve. To se može učiniti različiti putevi - najlakši način prvo je istaknuti sloj Sloj 1. U paleti slojeva i koristite tim Puštanje na sloj. (Puštanje u slojeve). Rezultat će biti pokret svakog od predmeta na vašem sloju, ali svi će biti ugniježđeni u sloju Sloj 1.. Stoga ćete morati ručno povući sve uloge u gornji dio palete slojeva tako da su iznad sloja Sloj 1.a zatim postao prazan sloj Sloj 1. Samo uklonite (Sl. 63). Izvezite sliku u PSD format primjenom naredbe Datoteka \u003d\u003e Izvoz (Datoteka \u003d\u003e Izvoz) s instalacijama kao na slici. 64.

Pošaljite kreiranu PSD datoteku u programu imageeried (Sl. 65 i 66). Otvorite meni palete Animacija. Napravite okvire od slojeva (Napravite okvire sa slojeva). Kao rezultat toga, stvorit će se pet okvira, od kojih će svaka odgovarati svom sloju i prozoru palete Animacija. pogledat će kao na slici. 67.

Nakon toga postavite trajanje svakog od razreda okvira - u ovom slučaju je ugrađeno trajanje 0,2 s za sve okvire. A zatim sačuvajte animaciju s optimizacijom pomoću naredbe. Datoteka \u003d\u003e Spremi optimizirano (Datoteka \u003d\u003e Spremi sa optimizacijom). Dobiveni rezultat može ličiti na Sl. 68.

Još prikladniji za dobivanje gredica koje se lako pretvore u animaciju u slikama, koristeći funkcije Žive mješavine. Ilustratorski programi. Takva kombinovana primjena ilustratora i imaginasiona programa značajno ubrzava proces stvaranja GIF animacija.

Na primjer, nacrtajte dva proizvoljna višebojna predmeta, a zatim vežite njihovu blusnu obveznicu s odgovarajućim parametrima (Sl. 69). Nemoguće je direktno koristiti ovu datoteku za kreiranje animacije, jer je slika na jednom sloju (Sl. 70). Stoga će joj biti potrebna svaki element objekta mješavine koji će se postaviti na zaseban sloj. Da to učinim u prozoru Slojevi. Označite niz , aktivirajte meni palete klikom na crnu strelicu u gornjem desnom uglu i odaberite naredbu Otpuštanje na redoslijed slojeva (Pretvorite u slojeve uzastopno) (Sl. 71). Držati se Smjena., istaknite stvorene slojeve i stavite ih iznad sloja. Sloj 1.a zatim uklonite sloj Sloj 1., premještajući ga u korpu - kao rezultat toga, paleta slojeva će uzeti isti izgled kao na slici. 72.

Sl. 70. Početno stanje prozora slojeva

Izvozna datoteka stvorena u PSD Command format Datoteka \u003d\u003e Izvoz (Datoteka \u003d\u003e Izvoz). Otvorite kreiranu PSD datoteku u programu imageeried (Sl. 73). Imajte na umu da će se u prozoru slojeva pojaviti svi slojevi stvoreni u programu (Sl. 74), te u prozoru Animacija. Bit će samo jedan okvir.

Aktivirajte meni palete Animacija.Klikom na crnu strelicu u gornjem desnom uglu palete i odaberite naredbu Napravite okvire od slojeva (Napravite okvire od slojeva) - kao rezultat, u ovom će se primjeru stvoriti pet okvira, a prozor palete će se stvoriti. Animacija. uzima pogled u skladu sa Sl. 75. Označite sve okvire dok držite tipku. Smjena., a postavite odgovarajuće trajanje okvira - u ovom primjeru, za svaki okviri koji su poduzete u isto vrijeme na 0,2 s. Zatim sačuvajte datoteku sa optimizacijom naredbe. Datoteka \u003d\u003e Spremi optimizirano(Datoteka \u003d\u003e Spremi sa optimizacijom) instaliranjem na listi Vrsta datoteke Opcija Samo slike (* .gif). Animacija će ličiti na rižu. 76.

Ne izgleda mnogo zanimljivije za pomicanje, već glatka promjena veličine mješavine objekata. Na primjer, možete koristiti već kreiranje mješavine prijelaza. U ovom slučaju nakon stvaranja odvojenih slojeva za svaki mješav prijelazni element, stavite sve predmete jedno na drugo, pomoću tipki Vodoravni centar za poravnanje(Poravnavanje u odnosu na središnji vodoravni) i Vertikalni poravnati centar. (Poravnanje u odnosu na središnju vertikalnoj) paleti Poravnajte. (Sl. 77).

Izvezite stvorenu datoteku u PSD format ( Datoteka \u003d\u003e Izvoz- Datoteka \u003d\u003e Izvezi) i otvorite stvorena PSD datoteka u programu imageeri (Sl. 78). Stvoriti na osnovu slojeva okvira animacije ( Napravite okvire od slojeva - Stvorite okvire iz slojeva) i odaberite odgovarajuće trajanje za njih (Sl. 79). A onda, da animacija učini spektakularnijom, kopiraj postojeći okviri, ali u obrnutom redoslijedu tako da se slika prvo povećava, a zatim se smanjila, a tako u krugu (Sl. 80). Zatim sačuvajte datoteku optimizacije ( Datoteka \u003d\u003e Spremi optimizirano- Datoteka \u003d\u003e Spremi sa optimizacijom). Rezultirajuća animacija prikazana je na slici. 81.

Sl. 80. Status prozora animacije nakon dupliranja okvira

Sl. 81. Završena animacija

Danas ne radimo baš obični lekcija Adobe. Ilustrator. Jer ovaj put nećemo raditi statičku sliku, već najpouzdaniju animaciju. Zamislite, ispostavilo se da bude koristeći Adobe. Illustrator možete izvući crtane filmove :)

I za to nam neće ništa trebati. Nadležna organizacija slojeva i izvoz završnog rada u SWF formatu, gdje se svaki sloj pretvara u okvir animacije. U današnjoj lekciji nacrtamo animaciju odbrojavanja u retro stilu. Na izlazu, Flash Film s tim je samo odbrojavanje.

Prvo što treba učiniti je da izvučete sve potrebne stavke za buduću animaciju. Da biste to učinili, u zasebnom dokumentu napravio je dva položaja filma filma, krug za referencu, koji se preseče u zasebne sektore, teksturu i vertikalnu ogrebotine za dodavanje učinka antike, kao i svih brojeva i natpisa.

Kad su svi dijelovi našeg crtanog filma spremni, možete početi kreirati samu animacije. Radi praktičnosti, bolje je učiniti u novom dokumentu. Istovremeno, slojevi će igrati ulogu okvira za animaciju. A u prvom sloju samo treba kopirati okvir filma. Stavite ga u sredinu radnog prostora.

Sada kreirajte drugi sloj i kopirajte okvir snimanja filma u nju u kojem se rupe oko ivica naprave s pomenom. Takođe treba biti smješten u centru.

Od ova dva sloja već možete dobiti animaciju pokretnog filma. Ali kasnije će nam trebati puno više slojeva. Stoga istaknite prva dva sloja, idite na opcije panela i napravite kopiju sloja.

Slično tome, moramo akumulirati 12 slojeva sa okvirima filma, pitajući njen pokret.

Sada imamo čitavu gomilu slojeva i svi su vidljivi. U smislu da su gornji slojevi blokirani donji, što nije sasvim pogodno za posao. Stoga možete isključiti nekoliko slojeva klikom na ikonu sa pogledom na lijevo od naziva sloja. Da biste isključili ili omogućili sve slojeve odjednom, držite tipku Alt pritisnutog kada kliknete na ikonu Glazik. Uključujući i isključivanje slojeva, možete tačno vidjeti šta se nalazi u određenom okviru naše buduće animacije. A sada, da dodam lagano pokretanje u filmu koji se kreće, morate malo staviti primljene okvire u različite smjerove. Da biste to učinili, uključite samo sloj sa kojim ćete raditi ovaj trenutakA zatim prebacite okvir na par piksela u bilo kojem smjeru.

Kad ste prešli na sve slojeve i dodali malu smjenu, možete početi kreirati animaciju pokretnog kruga. Da biste to učinili, kopirajte krug koji se sastoji od sektora, iz dokumenta sa crtanim rezervnim dijelovima i stavite ga na prvi sloj preko okvira filma.

Ako uklonite odabir iz kruga, izgledat će kao jedan cijeli broj. To je ono što nam treba.

Ali jer se sastoji od zasebnih sektora, možete, mijenjati njihovu boju, vrlo brzo i lako stvoriti animaciju. Da biste to učinili, kopirajte ovaj krug u drugi sloj i učinite prvi sektor lakši. Sjećate se da film drhti za vrijeme vožnje, tako da nije potrebno staviti krug točno u sredinu okvira. Stavite ga na oči.

Slično tome, trebate kopirati krug u svaki sljedeći sloj, dok se četkanje boji u jedan sektor više nego prethodni put. Svi zajedno, ovi 12 slojeva tvore animaciju kretanja filma sa krugom punjenja.

Dalje, morate dodati teksturu u naše slojeve. Uključite prvi sloj i kopirajte teksturu iz izvorne datoteke sa rezervnim dijelovima.

Zatim, zauzvrat uključite sljedeće slojeve i kopirajte istu teksturu. Tako da je izgledala drugačije na svakom okviru, jednostavno ga okrene u kut od 90 stepeni. Kao što ste već pretpostavljali, moramo dodati teksturu na svih 12 okvira.

Ako ste već umorili od suočavanja, onda vam mogu dostaviti - ostaje vrlo malo. Najteže već iza sebe. Ostaje da dodaju vertikalne ogrebotine i gotovo sve. Da biste to učinili, ponovo kopirajte originalnu ogrebotine i stavite ga na proizvoljno mjesto u nekoliko slojeva. U mom slučaju ogrebotine se pojavljuju samo u dva sloja.

Sada je to spremno glavni ciklus s animacijom filma, ostaje za dodavanje brojeva. Budući da dolazi od 3 do 1 plus druga riječ Go !!!, onda nam je potreban još više slojeva. Ne 12, ali čak 48. Za to morate napraviti još tri kopije gotovih slojeva s animacijom filma.

A onda je sve jednostavno. Uključujemo prvi sloj i tamo stavljamo tri broja.

Tada trebate kopirati ovu figuru u sljedeće slojeve dok se animacija kruga ne završi. Kada dođete do sljedeće kopije sloja, gdje će se krug biti potpuno napunjen u potpunosti, morate staviti dva broja dva. Slično tome, kopirajte broj jedan na željene slojeve. A kad dođete do krajnjih slojeva, dizajniran da uvedete Go !!!, samo uklonite krug prije kopiranja natpisa u željenom sloju.

Na ovome sa animacijom sve. Glavna stvar ovdje se ne može zbuniti. Možete dati slojeve nekih zgodnih imena, ali nekako sam bio lijen :) pa čak i kada završite s radom, obavezno okrenite sve slojeve klikom na ikonu zastakljenja.

U prozoru s izvoznim postavkama, obavezno instalirajte izvoz kao: AI slojevi na SWF okvire. To je ova opcija koja prikazuje slojeve ilustratora u okvire animacije. Zatim kliknite na dugme Advanced.

Napredne postavke će se otvoriti. Ovdje trebate postaviti brzinu kadrova okvira. Imam 12 sličica u sekundi. Prokleta lažnica je odgovorna za cikličku animaciju. Zahvaljujući njoj, video će se igrati u krugu. A opcija narudžbe sloja: odozdo reprodukuje slojeve ilustratora odozdo prema gore na ploči. Samo što smo izgradili našu animaciju.

Na izlazu dobivamo flash film sa našom animacijom.

Sada vidite da jednostavna animacija za napraviti u Adobe Illustratoru nije tako teško kao što se čini na prvi pogled.

Ali da biste stvorili duge valjke ili interaktivne aplikacije, još je bolje koristiti Adobe Flash. Bilo koji drugi urednici bljeskalice. Na primjer, ova mačka koju sam učinio u starom Macromedia Flash-u, koji je iskopan na poslu.

Prošli put kada se HTML5 i CSS3 koristi sve češće za stvaranje animacije. Ovaj kod je podržan moderni preglednici I ne zahtijeva upotrebu flash playera.

Roman Aka Dacascas. Posebno za blog

Pretplatite se na naš newsletter tako da ne propustite ništa novo:

Danas nemamo baš uobičajenu lekciju ilustratora Adobe. Jer ovaj put nećemo raditi statičku sliku, već najpouzdaniju animaciju. Zamislite, ispada da možete izvući i crtane filmove sa Adobe Illustratorom :)

Sada kreirajte drugi sloj i kopirajte okvir snimanja filma u nju u kojem se rupe oko ivica naprave s pomenom. Takođe treba biti smješten u centru.

Od ova dva sloja već možete dobiti animaciju pokretnog filma. Ali kasnije će nam trebati puno više slojeva. Stoga istaknite prva dva sloja, idite na opcije panela i napravite kopiju sloja.

Slično tome, moramo akumulirati 12 slojeva sa okvirima filma, pitajući njen pokret.

Sada imamo čitavu gomilu slojeva i svi su vidljivi. U smislu da su gornji slojevi blokirani donji, što nije sasvim pogodno za posao. Stoga možete isključiti nekoliko slojeva klikom na ikonu sa pogledom na lijevo od naziva sloja. Da biste isključili ili omogućili sve slojeve odjednom, držite tipku Alt pritisnutog kada kliknete na ikonu Glazik. Uključujući i isključivanje slojeva, možete tačno vidjeti šta se nalazi u određenom okviru naše buduće animacije. A sada, da dodam lagano pokretanje u filmu koji se kreće, morate malo staviti primljene okvire u različite smjerove. Da biste to učinili, uključite samo sloj s kojim ćete trenutno raditi, a zatim prebaciti okvir na par piksela na bilo koju stranu.

Ako uklonite odabir iz kruga, izgledat će kao jedan cijeli broj. To je ono što nam treba.

Dalje, morate dodati teksturu u naše slojeve. Uključite prvi sloj i kopirajte teksturu iz izvorne datoteke sa rezervnim dijelovima.

A onda je sve jednostavno. Uključujemo prvi sloj i tamo stavljamo tri broja.

U prozoru s izvoznim postavkama, obavezno instalirajte izvoz kao: AI slojevi na SWF okvire. To je ova opcija koja prikazuje slojeve ilustratora u okvire animacije. Zatim kliknite na dugme Advanced.

Na izlazu dobivamo flash film sa našom animacijom.

Sada vidite da jednostavna animacija za napraviti u Adobe Illustratoru nije tako teško kao što se čini na prvi pogled.

Ali za stvaranje dugih valjka ili interaktivnih aplikacija, još je bolje koristiti Adobe Flash ili druge bljeskalice. Na primjer, ova mačka koju sam učinio u starom Macromedia Flash-u, koji je iskopan na poslu.

Prošli put kada se HTML5 i CSS3 koristi sve češće za stvaranje animacije. Ovaj kôd podržavaju moderni pretraživači i ne zahtijeva upotrebu flash playera.

Roman Aka Dacascas. Posebno za blog note ilustrator ilustratora mikrotrama