Kako ustvariti gif animacijo v ilustratorju. Kako narediti animacijo v Adobe Illustratorju. Izvozite datoteke SWF iz Illustratorja
Danes imamo nekaj nenavadnega Adobe lekcija Ilustrator. Ker tokrat ne bomo naredili statične slike, ampak pravo animacijo. Predstavljajte si, izkaže se s z uporabo programa Adobe Ilustrator zna tudi risat risanke :)
In za to ne potrebujemo popolnoma ničesar. Pravilna organizacija slojev in izvoz končnega dela v swf format, kjer se vsak sloj pretvori v okvir animacije. V današnji vadnici bomo narisali animacijo z odštevanjem v slogu retro filma. Rezultat bi moral biti flash video z enakim odštevanjem.
Prva stvar, ki jo morate storiti, je narisati vse potrebne elemente za prihodnjo animacijo. Da bi to naredil, sem v ločenem dokumentu naredil dva položaja filmskega okvirja, krog za referenco, ki je razrezan na ločene sektorje, teksturo in navpično prasko, da dodam učinek antike, pa tudi vse številke in napisi.
Ko so vsi deli naše risanke pripravljeni, se lahko lotimo ustvarjanja same animacije. Zaradi udobja je bolje, da to storite v novem dokumentu. V tem primeru bodo naše plasti igrale vlogo okvirjev animacije. In v prvi plasti morate samo kopirati okvir filma. Postavite ga na sredino delovnega prostora.
Zdaj ustvarite drugo plast in vanj kopirajte okvir filma, v katerem so luknje vzdolž robov narejene z zamikom. Prav tako ga je treba postaviti v središče.
Iz teh dveh plasti že lahko dobite animacijo premikajočega se filma. Kasneje pa bomo potrebovali veliko več plasti. Torej izberite prvi dve plasti, pojdite na možnosti plošče in naredite kopijo plasti.
Na podoben način moramo zbrati 12 plasti filmskih okvirjev, ki določajo njegovo gibanje.
Zdaj imamo cel kup plasti in vsi so vidni. V smislu, da zgornje plasti blokirajo spodnje, kar ni povsem priročno za delo. Zato lahko nekatere plasti izklopite s klikom na ikono z očesom levo od imena plasti. Če želite hkrati izklopiti ali vklopiti vse plasti, držite tipko Alt in hkrati kliknite ikono očesa. Z vklopom in izklopom slojev lahko natančno vidite, kaj se nahaja v določenem okviru naše bodoče animacije. In zdaj, da bi gibanju filma dodali rahlo tresenje, moramo nastale okvirje nekoliko premakniti v različne smeri. Če želite to narediti, vklopite samo plast, s katero boste delali. ta trenutek in nato premaknite okvir za nekaj slikovnih pik v katero koli smer.
Ko pregledate vse plasti in dodate majhen premik, lahko začnete ustvarjati animacijo premikajočega se kroga. Če želite to narediti, kopirajte krog, sestavljen iz sektorjev, iz dokumenta z deli risanke in ga postavite na prvo plast na vrhu filmskega okvirja.
Če prekličete izbiro kroga, bo videti kot ena celota. Točno to potrebujemo.
Ker pa je sestavljen iz posameznih sektorjev, lahko zelo hitro in enostavno ustvarite animacijo s spreminjanjem njihove barve. Če želite to narediti, kopirajte ta krog na drugo plast in naredite prvi sektor svetlejši. Saj se spomnite, da se naš film med premikanjem trese, zato kroga sploh ni treba postaviti točno na sredino kadra. Postavite ga na oko.
Na podoben način morate kopirati krog v vsako naslednjo plast, pri tem pa pobarvati še en sektor s svetlejšo barvo kot prejšnjič. Skupaj teh 12 plasti tvori animacijo filma, ki se premika s polnilnim krogom.
Nato moramo našim slojem dodati teksturo. Vklopite prvo plast in kopirajte teksturo iz izvirne datoteke z rezervnimi deli tja.
Nato eno za drugo vklopite naslednje plasti in tja kopirajte isto teksturo. Če želite, da bo v vsakem okvirju videti drugače, ga preprosto obrnite za 90 stopinj. Kot ste morda uganili, moramo dodati teksturo vsem 12 okvirjem.
Če ste že precej utrujeni od kopiranja, potem vas lahko zadovoljim - ostalo je zelo malo. Najtežji del je mimo. Ostane le še navpične praske in to je skoraj to. Za to ponovno kopiramo originalno prasko in jo postavimo na poljubno mesto v več plasteh. Pri meni se praske pojavijo le v dveh slojih.
Zdaj, ko je glavni cikel s filmsko animacijo pripravljen, ostane le še seštevanje številk. Ker gre naše odštevanje od 3 do 1 in beseda Go!!!, potrebujemo še več plasti. Ne 12, ampak kar 48. Če želite to narediti, morate narediti še tri kopije že pripravljenih slojev s filmsko animacijo.
In potem je vse preprosto. Vklopite prvo plast in tam postavite številko tri.
Nato morate to sliko kopirati v naslednje plasti, dokler se animacija kroga ne konča. Ko pridete do naslednje kopije plasti, kjer bo krog spet popolnoma zapolnjen, morate postaviti številko dve. Na enak način kopirajte številko ena na želene plasti. In ko pridete do končnih plasti za napis Go!!!, preprosto izbrišite krog, preden kopirate napis na želeno plast.
To je vse za animacijo. Glavna stvar tukaj je, da se ne zmedete. Slojem lahko daste nekaj priročnih imen, vendar sem bil nekako len :) In tudi, ko končate z delom, ne pozabite ponovno vklopiti vseh slojev s klikom na ikono očesa.
V oknu z nastavitvami izvoza nastavite Izvozi kot: plasti AI v okvirje SWF. Ta možnost spremeni sloje Illustratorja v okvirje animacije. Nato kliknite gumb Napredno.
Odpre se dodatne nastavitve. Tukaj morate nastaviti Frame Rate. Imam 12 sličic na sekundo. Potrditveno polje Looping je odgovorno za ciklično animacijo. Zahvaljujoč temu se bo video predvajal v krogu. In možnost Vrstni red plasti: od spodaj navzgor reproducira plasti ilustratorja od spodaj navzgor na plošči. Točno tako smo zgradili našo animacijo.
Rezultat je flash video z našo animacijo.
Zdaj vidite, kaj lahko naredi preprosta animacija Adobe Illustrator ni tako težko, kot se zdi na prvi pogled.
Toda za ustvarjanje dolgih videov oz interaktivne aplikaciješe bolje za uporabo Adobe Flash ali drugi urejevalniki flash. Na primer, to mačko sem naredil v starem Macromedia Flash, ki sem si ga izkopal v službi.
Prav tako se v zadnjem času HTML5 in CSS3 vedno bolj uporabljata za ustvarjanje animacij. To kodo podpirajo sodobni brskalniki in ne zahteva uporabe predvajalnika flash.
Roman aka dacascas posebej za blog
Naročite se na naše novice, da ne zamudite ničesar novega:
V zadnjem času so postale zelo priljubljene različne vrste animacij SVG (Scalable Vector Graphics) grafike na spletnih mestih in v aplikacijah. To je posledica dejstva, da vse najnovejši brskalnikiže podpira ta format. Tukaj so informacije o podpori brskalnika za SVG.
Ta članek obravnava najpreprostejši primer vektorske animacije SVG z uporabo lahkega vtičnika Jquery Lazy Line Painter.
VirZa dokončanje in popolno razumevanje te naloge je zaželeno osnovno znanje HTML, CSS, Jquery, ni pa obvezno, če želite samo animirati SVG) Pa začnimo!
In to so koraki, ki jih moramo upoštevati:
1. Ustvarite pravilno strukturo datoteke
Pri tem nam bo pomagala storitev Initializr, kjer moramo izbrati parametre kot na spodnji sliki.
- Classic H5BP (HTML5 Boiler Plate)
- Brez predloge
- Samo HTML5 Shiv
- Pomanjšano
- Razredi IE
- Chrome okvir
- Nato kliknite Prenesi!
2. Prenesite in povežite vtičnik
Ker initializr prihaja z najnovejšo knjižnico Jquery, iz arhiva, ki ga moramo prenesti iz repozitorija projekta Lazy Line Painter, moramo v naš projekt prenesti samo 2 datoteki. Prvi je 'jquery.lazylinepainter-1.1.min.js' (različica vtičnika se lahko razlikuje) nahaja se v korenu nastale mape. Drugi je example/js/vendor/raphael-min.js.
Ti 2 datoteki sta v mapi js. In jih povežemo z našim index.html pred main.js, kot sledi:
3. V programu Adobe Illustrator narišite čudovit obris
Uporabite lahko na primer ikone v priponki.
4. Pretvorite našo sliko v Lazy Line Converter
Samo povlecite svojo ikono v okno na spodnji sliki.
Debelino, barvo obrisa in hitrost animacije lahko spremenite v sami kodi, ki se prikaže po konverziji!
5. Dobljeno kodo prilepite v main.js
Zdaj preprosto prilepimo nastalo kodo v prazno datoteko main.js
Opcije:
strokeWidth — debelina obrisa
strokeColor — barva obrisa
Hitrost risanja vsakega vektorja lahko spremenite tudi tako, da spremenite vrednosti parametra trajanja (privzeto 600)
6. Dodajte nekaj CSS po okusu
Odstranjevanje odstavka iz index.html
Pozdravljen, svet! To je HTML5 Boilerplate.
In namesto njega vstavimo blok, v katerem bo potekala naša animacija
nato dodamo nekaj CSS v datoteko main.css, da bo videti lepše:
Telo (ozadje:#F3B71C;) #ikone (položaj: fiksno; zgoraj:50%; levo:50%; rob: -300px 0 0 -400px;)
shrani vse datoteke.
Zdaj samo odprite index.html v sodobnem brskalniku in uživajte v učinku.
P.S. ob zagonu lokalni stroj Lahko pride do večsekundne zakasnitve začetka animacije.
Optimizacija spletne grafike
Grafične informacije se prenaša veliko počasneje kot besedilo, čas nalaganja slik pa je sorazmeren z njihovo velikostjo grafične datoteke. Zato hitro nalaganje spletnih strani zahteva majhno velikost vdelanega grafične podobe, kar dosežemo z njihovo optimizacijo. Optimizacijo slike razumemo kot njeno pretvorbo, ki zagotavlja minimalno velikost datoteke ob ohranjanju v tem primeru zahtevane kakovosti slike, kar dosežemo predvsem z zmanjšanjem števila barv v grafičnih slikah, uporabo stisnjenih in posebnih formatov datotek ter optimizacijo parametrov stiskanja za posamezne fragmenti slike.
Illustrator ima vgrajena orodja za optimizacijo slik, s katerimi je postopek optimizacije hiter in učinkovit z različnimi metodami predogleda. Predogled daje dokaj natančno predstavo o tem, kako bo optimizirana slika videti v realnem času, kar vam pomaga oceniti rezultat optimizacije in uspešno izbrati prave nastavitve. Optimizirate lahko tako slike, ustvarjene neposredno v Illustratorju, kot druge, na primer fotografije, ki naj bi bile postavljene na spletno mesto.
Optimizacijske parametre nastavimo v oknu Shrani za splet, ki ga prikličemo z istoimenskim ukazom iz menija Datoteka. Program predlaga uporabo enega od štirih načinov predogleda, vendar sta dva najbolj primerna za oceno kakovosti optimizacije:
- 2-Up (dve možnosti) hkratni ogled izvirne in optimizirane slike v skladu z določenimi nastavitvami (slika 1);
- 4-Up (štiri možnosti) V tem načinu je vidno okno razdeljeno na štiri okna (slika 2) za prikaz izvirne slike in treh različic optimizirane: prva različica je ustvarjena na podlagi nastavljenih vrednosti optimizacije, druga dva sta različici trenutnih nastavitev optimizacije.
Oba načina vam omogočata, da znatno prihranite čas pri iskanju najboljše možnosti optimizacije, saj odpravljata potrebo po shranjevanju slik z različnimi nastavitvami optimizacije in njihovi naknadni vizualni primerjavi. Poleg tega je mogoče oceniti ne samo kakovost optimizirane slike, temveč tudi njeno velikost in čas nalaganja pri različnih možnostih povezave. Za primerjavo, najprimernejši način je 4-Up (štiri možnosti), ki vam omogoča vizualno oceno učinka stiskanja ali zmanjšanja palete na kakovost slike in njeno velikost ter na koncu določite najboljše parametre optimizacije.
Illustrator vam omogoča optimizacijo spletne grafike ne samo v formatih GIF, JPG, PNG-8 in PNG-24, ampak tudi v formatih SWF in SVG. Indeksirane slike z majhnim številom barv so shranjene v formatu GIF. Format JPG se uporablja za shranjevanje barvnih in sivinskih slik, fotografij in barvno bogate grafike, kot so gradientna polnila. Za polnobarvne slike s prosojnimi območji se uporablja format PNG, ki omogoča shranjevanje tako indeksiranih kot polnobarvnih slik, medtem ko je v formatu PNG-8 največje možno število barv optimizirane slike 256, v v formatu PNG-24 ima lahko slika na milijone barv in zato izgleda format JPEG. Razlika med PNG-24 in JPEG je v tem, da metoda stiskanja, uporabljena za optimizacijo slik v formatu PNG-24, ne povzroči izgube kakovosti, ampak se posledično poveča velikost datoteke. Formata SVG in SWF združujeta grafiko, besedilo in interaktivne komponente in ju je mogoče tudi optimizirati.
Razmislimo konkreten primer optimizacija slike. Recimo, da je bil logotip spletnega mesta razvit v Illustratorju (slika 3), sprva shranjen v formatu AI. Poskus takojšnje optimizacije za splet ne bo vodil do nič dobrega, saj bo v tem primeru slika samodejno obrezana, kar ne bo upoštevalo pravega položaja nastalega napisa zaradi deformacije (sl. 4 in 5).
Zato poskusimo izvoziti logotip v format PSD z ukazom File=>Export (Datoteka=>Export) velikost ustvarjene slike bo 143 KB. Odprite nastalo datoteko PSD in uporabite ukaz Datoteka=>Shrani za splet. Glede na omejeno število barv, vključenih v sliko, je v tem primeru optimalen format GIF, katerega posebne nastavitve je treba določiti. Z eksperimentiranjem z nastavitvami se lahko prepričate o tem najboljša kakovost daje privzeti algoritem stiskanja programa, Selective. Kar zadeva glajenje, je glede na prisotnost gradientnega polnila bolje izbrati algoritem s hrupom, ki ustvarja hrup (slika 6). Velikost dobljene optimizacijske datoteke bo 6,729 KB (slika 7), ohranjena pa bo prosojnost ozadja, kar je enostavno preveriti tako, da skupaj s datoteko HTML shranite sliko v formatu GIF (slika 8). Posledično sta bili v tem primeru v mapi Primer1 pridobljeni datoteki emblem.html in emblem.gif.
Nepogrešljiv poseben element oblikovanja katere koli spletne strani so grafični kontrolni gumbi. Enostavno si je nemogoče predstavljati stran brez njih. Risanje gumbov je danes postalo poseben žanr, Illustrator pa vam omogoča ustvarjanje najbolj zapletenih možnosti. Gumbi, oblikovani kot mrežasti predmeti in/ali s prekrivnimi maskami, so na primer videti veliko bolj impresivni kot običajni.
Razmislimo o možnosti ustvarjanja okroglega, konveksnega gumba v Illustratorju. Narišite vektorski objekt v obliki kroga, zapolnjenega s poljubno barvo (slika 9) in ga pretvorite v mrežo z ukazom Object => Create Gradient Mesh (Object => Create a gradient mesh), pri čemer določite štiri vrstice in štiri in na seznamu Videz izberite možnost To Center Highlight enako 60 (slika 10). Izberite orodje za neposredno izbiro in kliknite v zgornji levi kot predmeta ter izberite sidrne točke, ki se nahajajo tam (slika 11). Spremenite barvo ustrezne celice v belo, tako da jo izberete v paleti Swatches (slika 12).
Vzemite orodje Ellipse, postavite oznako miške na sredino prej ustvarjenega kroga in, držite tipki Alt in Shift, raztegnite nov krog čez starega, tako da je 1-2 piksli večji od starega na vseh straneh. Dajte mu črno obrobo (Stroke) širine 1-2 slikovnih pik in jo napolnite z radialnim prelivom v smeri od rdeče proti beli (slika 13). Povlecite ustvarjeni vektorski predmet za 1-2 slikovnih piki v desno in navzdol, nato pa, ne da bi odstranili izbor, z desno miškino tipko kliknite nanj in ven kontekstni meni izberite Razporedi=>Pošlji nazaj. Rezultat bo prazen gumb, prikazan na sl. 14.
Praviloma je na kateri koli spletni strani več gumbov iste vrste, ki se razlikujejo na primer samo v smeri puščic, ki so narisane na njih, kar označuje smer gibanja po spletnem mestu. Oglejmo si najpreprostejši primer dveh gumbov, od katerih bo eden s puščico navzdol pomenil pomik na naslednjo stran, gumb s puščico navzgor pa pomik na prejšnjo stran. Kot predlogo puščice vzemimo navaden trikotnik, narisan z orodjem Polygon, pobarvan s črno barvo in za večji učinek zasnovan tudi kot mrežast objekt. Premaknite puščico na gumb in prilagodite položaj vseh predmetov relativno drug proti drugemu z uporabo ustreznih gumbov v paleti Poravnaj. Prvi od nastalih gumbov je prikazan na sl. 15. Naredimo kopijo plasti z gumbom z izbiro ukaza Duplicate Layer Layers, kot rezultat bomo dobili dve enaki plasti. Nato izberite puščico na kopiji sloja in jo zavrtite za 180° z izbiro ukaza Transform=>Rotate Transformation=>Rotate iz kontekstnega menija. Dobili bomo enak gumb, kot je prikazano na sl. 16. Upoštevajte, da je veliko bolj priročno shraniti vse gumbe iste vrste za en projekt v eno datoteko na različnih slojih, kar je prikazano v tem primeru.
Zdaj morate shraniti optimizirane različice vsakega gumba. Najprej naredite spodnjo plast nevidno; v tem primeru bo gumb na zgornji plasti ohranjen. Izberite ukaz File=>Shrani za splet, konfigurirajte parametre optimizacije gumba, na primer, kot je prikazano na sl. 17 kliknite gumb Shrani in vnesite ime datoteke. Končno shranjeni gumb je prikazan na sl. 18. Zdaj vrnite vidnost spodnji plasti, naredite zgornjo plast nevidno in na enak način shranite drugi gumb ter mu dajte drugo ime. Rezultat je prikazan na sl. 19.
Sedaj ostane le še, da se prepričamo, da so gumbi videti povsem sprejemljivo na spletni strani, in jih postavimo na stran po meri (slika 20). Posledično smo v tem primeru dobili datoteko Primer2.html in dve grafični podobi v mapi s slikami (mapa Primer2).
Po želji lahko gumb med procesom optimizacije preprosto spremenite v rezino. V tem primeru morate po izbiri ukaza Datoteka=>Shrani za splet (File=>Shrani za splet) in nastavitvi optimizacijskih parametrov v orodni paleti izbrati orodje Slice Select in dvoklikniti na sliko, ki bo na koncu samodejno spremeni v rezino z zaporedno številko 1 (slika 21). S ponovnim dvojnim klikom se odpre okno Možnosti rezine, v katerem morate določiti povezavo in po želji spremeniti ime rezine (slika 22), nato pa shraniti optimizirano sliko. Rezultat bosta v tem primeru datoteki Primer3.html (slika 23) in Primer3.gif (mapa Primer3).
Eden od načinov za oživitev strani je uvedba elementov oblikovanja, ki jo spremenijo videz(ali stanja) glede na obnašanje miške ali, redkeje, v primeru kakršnih koli drugih situacij: skaliranje, drsenje, nalaganje, napake itd.
Med takšnimi elementi so najbolj znani rolloverji (iz angleščine roll over prevračanje, obračanje) elementi, ki spreminjajo videz pod vplivom miške. Primeri tipičnih prevračanj so animirani gumbi. Premiki se pogosto uporabljajo pri ustvarjanju drugih navigacijskih elementov spletnega mesta. V resnici vsako prevračanje ni ena, ampak več (do štiri) slik, od katerih vsaka ustreza določenemu dogodku. Glavni dogodki so naslednji: Normalno normalno stanje, Nad premikanjem kazalca miške nad elementom in pritiskom na levi gumb miške navzdol, ko premikate kazalec nad njim. Teoretično so lahko vpleteni dogodki, kot so Klik, sprostitev levega gumba miške po kliku, Gor po sprostitvi gumba, Izhod, ko zapustite aktivno območje. Vendar se v praksi pogosto omejijo na spremembo elementa le za prve tri ali celo dva dogodka.
Klasična prevračanjaV klasičnem smislu je prevrnitev niz grafičnih slik v formatu GIF in pripadajoče kode HTML, zahvaljujoč kateri, odvisno od obnašanja miške, ena slika zamenja drugo v oknu brskalnika.
Illustrator ni namenjen neposrednemu ustvarjanju rolloverjev v klasičnem smislu, lahko pa pomaga pri razvoju začetnih elementov zanje. Ideja v tem primeru je ustvariti plast s sliko, ki ustreza prvemu dogodku. Nato naredite kopijo plasti in preoblikujte sliko, da bo ustrezala drugemu dogodku itd. Nastala večslojna slika se izvozi v PSD datoteko z ohranjenimi plastmi, na podlagi katerih se v programu Image Ready ustvari rollover. Prednost uporabe programa Illustrator, tako kot v mnogih drugih primerih, so številne njegove zanimive funkcije, ki niso na voljo v drugih programsko opremo, v kombinaciji s priročnostjo preoblikovanja vektorske grafike.
Poskusimo ustvariti prevračanje v obliki napisa, ki spreminja barvo glede na obnašanje miške. Odprite Illustrator in ustvarite obliko v obliki zaobljenega pravokotnika, zapolnjenega s črno (slika 24), naredite njeno kopijo in jo postavite na prosti del zaslona. Pretvorite prvo kopijo pravokotnika v mrežni objekt z osvetlitvijo v sredini (ukaz Object=>Create Gradient Mesh Object=>Create Gradient Mesh), pri čemer določite štiri vrstice in deset stolpcev (slika 25). Aktivirajte drugo kopijo pravokotnika in jo nastavite na gradientno polnjenje približno tako, kot je prikazano na sl. 26. Prekrijte gradientni objekt na mrežastem, zmanjšajte motnost gradientnega predmeta na približno 80 % in velikost za približno 1 piksel, da na koncu simulirate učinek izbokline. In nato natisnite napis na vrhu predmetov. V prvotni obliki naj ima belo barvo, ki bo ustrezala normalnemu stanju (slika 27), nato pa, ko se stanje prevračanja spremeni, se bo barva napisa spremenila, na primer v zeleno, ko miškin marker se premakne nadnjo (stanje nad) in postane modra, ko pritisnete gumb miške (stanje dol).
Bodite pozorni na paleto plasti, saj je na tej stopnji samo ena plast. Naredite dve kopiji te plasti z ukazom Duplicate Layer iz menija palete Layers; v paleti bodo tri plasti (slika 28). Nato v prvi kopiji sloja spremenite barvo napisa v zeleno, v drugi kopiji pa v modro (slika 29). Posledično bo pridobljena potrebna praznina za prevračanje.
Ustvarjeno sliko izvozite v format PSD, pri čemer ohranite plasti, z ukazom Datoteka=>Izvozi in izberite barvni model RGB (slika 30). Ustvarjeno datoteko PSD odprite v programu ImageReady (sliki 31 in 32). Ustvarite okvirje na podlagi plasti tako, da v meniju palete Animacija izberete ukaz Make Frames From Layers. Okno za animacijo bo videti kot na sl. 33. V tem primeru bo v paleti Rollovers sprva ustvarjeno eno samo normalno stanje.
Nato v oknu Animation izberite okvir, ki ustreza induciranemu stanju, in sloj Layer 1 Copy bo samodejno izbran v paleti Layers (slika 34). Pojdite na paleto Prevračanja in kliknite gumb Ustvari stanje prevračanja (Ustvari stanje prevračanja) sl. 35, zaradi česar se bo stanje Over State pojavilo v paleti Prevračanja (slika 36). Na enak način ustvarite Down State. Aktivirajte stanje Normal v paleti Rollovers in izbrišite vse okvirje v paleti Animation razen tistega, ki bi moral ustrezati stanju Normal. Posledično bo za vsako stanje prevračanja samo en okvir v paleti Animacija (sl. 37, 38 in 39).
riž. 38. Pogled na sliko, okno Animation in paleti Sloji in Prevračanja za stanje Over State
Preverite rezultat tako, da v orodni vrstici kliknete gumb Predogled v privzetem brskalniku in odprete okno brskalnika (slika 40). Po tem shranite datoteko z ukazom Datoteka=>Shrani optimizirano in določite možnost HTML in slike (*.html). Posledično je bila v tem primeru v mapi s slikami pridobljena datoteka Primer4.html in niz grafičnih slik.
riž. 40. Okno brskalnika z elementom Rollover
Prevračanje SVGVedno bolj priljubljen format SVG (Scalable Vector Graphics). Vektorska grafika), ustvarjen na podlagi standarda XML, omogoča tudi sprejem različnih interaktivnih elementov, zlasti prevračanja, vendar je v praksi to izvedeno povsem drugače. Omeniti velja, da ustvarjanje interaktivnih SVG rolloverjev, za razliko od klasičnih, ko se ustrezna koda HTML generira povsem samodejno, zahteva znanje jezika JavaScript in razumevanje osnovnih principov objektno orientiranega programiranja.
Za delo s predmeti SVG obstaja posebna paleta SVG Interactivity, ki jo je mogoče preprosto odpreti z ukazom Window => SVG Interactivity (Okno => SVG Interactivity) sl. 41.
Razmislimo o tej možnosti za ustvarjanje prevračanja na primeru interaktivnega gumba, katerega barva napisa se spremeni iz črne v modro, ko premaknete miško, in se ponovno spremeni v črno, ko miška zapusti aktivno območje.
Ustvarite pravokoten gumb z zaobljenimi robovi in izberite ustrezno gradientno polnilo zanj, na primer, kot je prikazano na sl. 42. Prilagodite prosojnost gumba v paleti Transparence. V tem primeru je vrednost Opacity nastavljena na 50 %. Naredite kopijo gumba, jo napolnite s temno zeleno (slika 43) in jo nato pretvorite v mrežni objekt z ukazom Object => Create Gradient Mesh, pri čemer določite štiri vrstice in deset stolpcev ter na seznamu Videz (Pogled) tako da izberete možnost To Center in nastavite vrednost Highlight na 100. Zmanjšajte motnost plasti z mrežnim objektom na približno 40% (slika 44). Postavite mrežasti predmet na prelivnega in gumb bo podoben tistemu, prikazanemu na sl. 45.
riž. 44. Spremenite kopijo gumba v mrežni objekt
Dopolnite gumb s predvidenim napisom in prilagodite njegov položaj z ustreznimi gumbi v paleti Poravnaj. Nastala slika bo vsebovala eno plast s tremi predmeti, postavljenimi drug na drugega (slika 46). Načrtovani dogodki bodo povezani z besedilnim predmetom, zato ga zaradi priročnosti spremenite v Besedilo, tako da dvokliknete predmet in vnesete novo ime. Podobno spremenite ime plasti iz Layer 1 v Layer (slika 47).
Obdelava dogodkov vključuje uporabo postopkov JavaScript, zato morate vključiti datoteko, ki opisuje te postopke. Imenuje se Events.js in se ob namestitvi shrani na disk v mapo Sample Files\Sample Art\SVG\SVG Adobe programi Ilustrator. Za povezavo datoteke Events.js uporabite ukaz JavaScript Files SVG Interactivity (slika 48). Nato morate klikniti gumb Dodaj in poiskati želeno datoteko na trdem disku. Ko se njegovo ime pojavi v polju URL (slika 49), kliknite gumb Končano.
riž. 48. Izbira ukaza za datoteke JavaScript
Nato morate za objekt Besedilo definirati odziv na dogodke miške. Izberite predmet Besedilo, v polju Dogodek na paleti Interaktivnost SVG izberite dogodek onmouseover elemColor(evt, "Besedilo", "#3333FF"), to bo pomenilo, da ko je miška nad predmetom Besedilo, se bo njegova barva spremenila v modra (slika 50). Če želite, da se barva besedila spremeni v črno, ko miška zapusti aktivno območje, boste morali ustvariti drug dogodek onmouseout, izberite ga v polju Dogodek na paleti Interaktivnost SVG. Nato v akcijsko vrstico vnesite besedilo elemColor(evt, "Text", "#000000"), s čimer bo barva povrnjena v črno (slika 51).
riž. 51. Končni videz palete SVG Interactivity za objekt Text
Ustvarjen rollover shranite kot datoteko SVG z ukazom Datoteka=>Shrani kot (Datoteka=>Vrsta datoteke SVG format, nato pa nastavite možnosti za shranjevanje datoteke SVG, kot je prikazano na sliki 52. Po shranjevanju prejmete samo eno ena datoteka s pripono SVG, in ne dve, kot v primeru klasičnega prevračanja; v tem primeru je bila prejeta datoteka Primer5.svg (mapa Primer5). kopirajte datoteko Events.js v datoteko SVG z opisom postopkov prevračanja, rezultat pa je prikazan na sliki 53.
Format SVG se lahko uporablja tudi za prenos animacije. Poskusimo ustvariti preprost animirani element (v tem primeru bo to informacija o podjetju), ki se bo prikazal na zaslonu, ko se z miško pomaknete nad ustrezen grafični objekt in izgine, ko miško umaknete z interaktivnega elementa.
Ustvarimo približno naslednjo serijo grafičnih in besedilnih objektov, kot je prikazano na sl. 54. Preimenujmo vse ustvarjene predmete na priročen način tako, da zaporedno kliknemo ime naslednjega predmeta v paleti plasti in vnesemo želeno ime(Slika 55). Upoštevajte, da so tisti, ki so označeni na sl. 56 objektov Text1, Text2, Text3 in Path1 bo vedno vidnih, vsi ostali pa le, ko se z miško pomaknete nad objekt Text1.
riž. 54. Izvirni pogled na sliko
Vključite datoteko Events.js, ki vsebuje rutine JavaScript, tako da uporabite ukaz Datoteke JavaScript iz palete Interaktivnost SVG, kliknete gumb Dodaj, pokažete na želeno datoteko na trdem disku in kliknete gumb Končano.
Definirajte odziv na dogodke miške za objekt Text1. Izberite objekt Text, v polju Event palete SVG Interactivity izberite dogodek onmouseover in v spodnjo vrstico vnesite besedilo elemShow(evt, "Text4"); elemShow(evt, "Pot2") . Posledično, ko je miška nad objektom Text1, postaneta vidna objekta Text4 in Path2. Upoštevajte, da če je treba ob dogodku izvesti več dejanj, jih morate določiti z znakom “;”. Nato izvedite podobno operacijo za dogodek onmouseout in vnesite besedilo zanj, kar bo pomenilo skrivanje predmetov (slika 57).
Rezultat shranite kot datoteko SVG z ukazom Datoteka=>Shrani kot, določite ime datoteke, izberite format SVG v polju Vrsta datoteke in nato nastavite možnosti za shranjevanje datoteke SVG v skladu s sl. 58. Po shranjevanju bo prejeta datoteka Primer6.svg (mapa Primer6). Ne pozabite kopirati datoteke Events.js v mapo s to datoteko. Če po tem zaženete coz to datoteko, potem boste videli rezultat, prikazan na sl. 59. To je skoraj tisto, kar potrebujete. Edina stvar, ki ni bila vključena v naše načrte, je bil začetni videz objektov Text 4 in Path 2 ob nalaganju. Če se želite znebiti te pomanjkljivosti, izberite oba podatka objekta hkrati in ustvarite dejanje zanju elemHide(evt, "Text4"); elemHide(evt, "Path2") pri dogodku onload (slika 60). Znova shranite datoteko in se prepričajte, da sta objekta Text4 in Path2 zdaj vidna le, ko miškin kazalec premaknete nad objekt Text1.
Vsaka spletna stran si je nepredstavljiva brez spletne animacije, vključno z animiranimi gifi. Ena od možnosti za njihovo izdelavo je uporaba aplikacije Adobe ImageReady, ki med drugim omogoča ustvarjanje animacije iz slojev. V tem primeru je večplastno sliko mogoče pripraviti v različnih aplikacijah, vključno z Adobe Illustratorjem.
Zelo enostavno je ustvariti animacijo na podlagi elementov iz palete Simboli, odprte z ukazom Window=>Symbols, ali iz ene od knjižnic simbolov, ki jih lahko odprete z ukazom Window=>Symbol Libraries ).
Na primer, poskušali bomo povečati velikost katerega koli simbolnega objekta; ključne faze procesa povečanja objekta morajo biti nastavljene na ločenih slojih. Najprej preprosto postavite simbole enega nad drugega in nato povečajte velikost vsakega naslednjega predmeta, na primer kot je prikazano na sl. 61. Posledično bo v paleti plasti ustvarjena ena plast z veliko predmeti (slika 62). Če to sliko neposredno izvozite v format PSD, ne bo dalo ničesar, saj je samo ena plast in seveda, ko odprete datoteko PSD v programu ImageReady, bo tudi samo ena plast. Zato morate najprej postaviti predmete na različne plasti. To se lahko naredi različne poti Najlažji način je, da najprej izberete Layer 1 v paleti Layers in uporabite ukaz Release to Layer. Rezultat bo, da bo vsak od predmetov premaknjen na svojo plast, vendar bodo vsi ugnezdeni v plast 1. Zato boste morali nato ročno povleči vse ugnezdene plasti na vrh palete plasti, tako da bodo nad plastjo 1. plasti, nato pa preprosto izbrisati zdaj prazno plast 1. plasti (slika 63). Izvozite sliko v format PSD z ukazom Datoteka=>Izvozi z nastavitvami kot na sl. 64.
Ustvarjeno datoteko PSD naložimo v program ImageReady (sliki 65 in 66). Odprite meni palete Animation Make Frames From Layers. Posledično bo ustvarjenih pet okvirjev, od katerih bo vsak ustrezal svoji plasti, okno palete animacije pa bo videti kot na sliki 2. 67.
Po tem nastavite trajanje vsakega od ustvarjenih okvirjev, v tem primeru je trajanje za vse okvirje nastavljeno na 0,2 s. In nato shranite animacijo z optimizacijo z ukazom Datoteka=>Shrani optimizirano (Datoteka=>Shrani z optimizacijo). Dobljeni rezultat je lahko podoben sl. 68.
Še bolj priročno je pridobiti praznine, ki jih je mogoče enostavno pretvoriti v animacijo v programu ImageReady za uporabo funkcij Live Blends v Illustratorju. Ta kombinirana uporaba Illustratorja in ImageReadyja znatno pospeši proces ustvarjanja animacij GIF.
Na primer, narišite dva poljubna večbarvna predmeta in ju nato povežite z mešalno povezavo z ustreznimi parametri (slika 69). Nemogoče je neposredno uporabiti to datoteko za ustvarjanje animacije, saj je slika na enem sloju (slika 70). Zato boste morali najprej postaviti vsak element predmeta mešanja na ločeno plast. To naredimo tako, da v oknu Sloji označimo vrstico, aktiviramo meni palete s klikom na črno puščico v njenem zgornjem desnem kotu in izberemo ukaz Sprosti v zaporedje plasti (slika 71). Držite tipko Shift, izberite ustvarjene plasti in jih postavite nad plast Layer 1, nato pa izbrišite samo plast Layer 1 in jo posledično premaknite v koš, paleta plasti bo imela enako obliko kot na sliki. 72.
riž. 70. Začetno stanje Sloji okna
Ustvarjeno datoteko izvozite v format PSD z ukazom File=>Export. Odprite ustvarjeno datoteko PSD v programu ImageReady (slika 73). Upoštevajte, da bodo vsi sloji, ustvarjeni v Illustratorju, prikazani v oknu slojev (slika 74), v oknu Animacija pa bo za zdaj samo en okvir.
Aktivirajte meni palete Animacija s klikom na črno puščico v zgornjem desnem kotu palete in izberite ukaz Make Frames From Layers. Posledično bo v tem primeru ustvarjenih pet okvirjev in okno palete Animacija bo prevzelo oblika v skladu s sl. 75. Izberite vse sličice, medtem ko držite tipko Shift in nastavite ustrezno trajanje sličice. V tem primeru je za vsako sličico vzet enak čas 0,2 s. Nato datoteko z optimizacijo shranite z ukazom Datoteka=>Shrani optimizirano (Datoteka=>Shrani z optimizacijo), na seznamu Vrsta datoteke nastavite možnost Samo slike (*.gif). Animacija bo podobna sl. 76.
Kar je videti veliko bolj zanimivo, ni gibanje, ampak gladko spreminjanje velikosti mešanih predmetov. Na primer, lahko uporabite že ustvarjen prehod mešanja. V tem primeru, potem ko ustvarite ločene plasti za vsak prehodni element mešanja, postavite vse predmete enega na drugega z uporabo gumbov Horizontal Align Center in Vertical Align Align Center na paleti Poravnaj (slika 77).
Ustvarjeno datoteko izvozimo v format PSD (File=>Export File=>Export) in odpremo izdelano PSD datoteko v programu ImageReady (slika 78). Ustvarite okvirje animacije na osnovi slojev (Make Frames From Layers Create frames from layers) in jim izberite primerno trajanje (slika 79). In nato, da bo animacija učinkovitejša, kopirajte obstoječe okvirje, vendar v obratnem vrstnem redu, tako da se slika najprej poveča in nato zmanjša in tako naprej v krogu (slika 80). Nato shranite optimizacijsko datoteko (File=>Save Optimized File=>Save with optimization). Nastala animacija je prikazana na sl. 81.
riž. 80. Stanje okna animacije po podvajanju sličic
riž. 81. Končana animacija
Pregleden GIF v Adobe Illustratorju je narejen na naslednji način. Pojdite v meni Datoteka > Shrani za splet in naprave (Alt+Ctrl+Shift+S). V oknu, ki se odpre, morate v polju Optimizirana oblika datoteke najprej iti na zavihek Velikost slike. Dejstvo je, da je privzeto celotna stran vključena v okno za optimizacijo in to običajno ni potrebno. Zato v zavihku Image Size počistite potrditveno polje Clip to Artboard in kliknite gumb Apply.
Nato na seznamu za izbiro oblike izberite GIF in potrdite potrditveno polje Prosojnost.
Po tem bomo določili, katere barve bodo prozorne. Vse barve, ki so prisotne na sliki, so na zavihku Color Table in so prikazane kot barvni kvadratki. V orodni vrstici na levi strani okna izberite orodje Eyedropper.
Obstajata dva načina za določitev barv. Najlažji način je določiti barvo s kapalko neposredno na sliki - potem bo barva na barvni tabeli označena s temno potezo. No, če natančno veste, katera barva naj bo prozorna, jo lahko izberete neposredno v barvni tabeli s klikom na ustrezen barvni kvadrat. V prvem in drugem primeru, če morate izbrati več barv, morate delati s pritisnjeno tipko Shift (ali Ctrl). Ko izberete barvo, morate programu naročiti, da postane pregledna. Če želite to narediti, kliknite ikono Preslikava izbranih barv v prosojno. Na sliki je ta gumb obkrožen in rdeča barva je nastavljena na prozorno. Na sliki se bo pojavilo prosojno območje, kvadrat na barvni tabeli pa bo spremenil svoj videz – njegov del bo postal bel trikotnik. Če želite preklicati izbrano barvo, jo morate izbrati v barvni tabeli in nato znova klikniti ikono Preslikava izbranih barv v prosojno.
Nekaj besed o načinu nastavitve prosojnosti. Odgovoren je za spustni meni Specify Transparency Dither Algorithm, v ruščini - Algoritem za simulacijo preglednosti (slika spodaj). Na voljo so štiri možnosti: brez prosojnosti, difuzije prosojnosti, prosojnosti vzorca in prosojnosti šuma. V načinu razpršenega algoritma postane drsnik Količina aktiven, kar vam omogoča spreminjanje vrednosti razpršenosti. Kaj uporabiti v praksi? Odvisno od namena in podobe. Te možnosti ne uporabljam in jo vedno pustim privzeto - Brez prosojnosti.
Kliknite Shrani - prosojni GIF je pripravljen. Delo je bilo izvedeno v Adobe Illustrator različici CS4 (v.14), vendar so vsa dejanja in bližnjice na tipkovnici pomembne tudi za prejšnjo različico CS3 (v. 13).
Uvoz in preprosta animacija Zdravo. Danes si ogledujemo preprosto animacijo v After Effects.
Viri: Adobe Illustrator CC
Adobe After Effects CC
Začnimo se učiti z risanjem v Illustratorju.
Narišimo
1) Narišite rumen pravokotnik kot ozadje
Slika 1 - Pravokotnik
2) Narišite krog in ga napolnite s prelivom
Delajmo malo na krogu:
- izbrišemo spodnjo točko na konturi, dobimo lok;
- narišite ravno črto, zaprite spodnji del loka, dobimo polkrog
Slika 2 - 1) narišite krog; 2) gradient; 3) izbriši točko
3) Narišite pravokotnik in ga kopirajte
- en siv pravokotnik;
- drug pravokotnik je temno siv
4) Narišite trikotnik iz zvezdice tako, da nastavite število žarkov na 3
Slika 3 - 1) pravokotna luč; 2) pravokotno temno; 3) trikotnik
5) Narišite mačko s peresom in preprostimi oblikami 
Slika 4 - 1) glava; 2) vrat; 3) telo; 4) noga; 5) rep
In zdaj najbolj POMEMBEN trenutek
Razdelimo slike v plasti (kar bo animirano, je na ločeni plasti), takole: 
Slika 5 - vse slike (rdeče oznake pomembne plasti)
To je to, zdaj pa shranimo.
Poglejmo nastavitve shranjevanja
Slika 6 - Shrani
In zdaj naslednja faza. Zaprite Adobe Illustrator in odprite After Effects.
Uvoz v After Effects
Datoteka – Uvozi – Datoteka – izberite našo shranjeno datoteko Illustrator.
Odločimo se za uvoz slojev iz Illustratorja; če vstavimo posnetek, bomo dobili sliko z združenimi sloji, vendar tega ne potrebujemo.
Slika 7 – Uvozi kot sestavo
To je to, uvoženo.
Zdaj pa poglejmo, kaj imamo. Dvakrat kliknite na kompozicijo, da se odpre in vidimo plasti (če je vse narejeno pravilno, bo več plasti). To dobimo, glej sliko
Slika 8 - Odprta sestava
In zdaj smo tukaj zaradi animacije.
Animacija v After Effects
Nastavite točko vrtenja na vrhu puščice z orodjem Pan Behind (bližnjica - Y). Samo vzamemo točko in jo premaknemo, kamor je potrebno. Posledično bo videti takole.. 
Slika 9 – Orodje za premikanje in plasti
To je to, zdaj pa preidimo na plasti za animacijo.
Potrebovali bomo plast Arrow in Head_cat.
Začnimo s puščico.
Razširimo seznam, ga poiščemo in kliknemo na uro. Zato smo prvo točko postavili na nič sekund. Animacija bo skupno trajala 2 sekundi.
Torej, to so nastavitve, ki jih morate narediti (skupaj bomo dali 3 točke):
| drugič | 0 | 1 | 2 |
| +66 | - 70 | +66 |
Slika 10 - Puščica vrtenja
Zdaj pa animirajmo mačjo glavo.
Razširimo head_cat in poiščimo Position.
Tukaj bodo 4 pike.
Spremenjena bo samo zadnja koordinata, ne da bi to vplivalo na ostale.
| drugič | 0.1 | 0.17 | 1.12 | 2.0 |
| Položaj | 689.3 | 729.3 | 729.3 | 689.3 |
Slika 11 - Položaj glave
Torej, princip animacije je bil takšen. Puščica niha z ene strani na drugo, takoj ko se približa mucki, potegne glavo noter, nekaj časa ostane v tem položaju in jo nato vrne na svoje mesto.
Končna faza
Proizvodnja
Iz svojega dela morate ustvariti končni izdelek.
Pojdite v meni - Dodaj v čakalno vrsto upodabljanja
Odpre se plošča Render in v Output Module (dva klika) izberite izhodni format. Vzel sem *.mov
Slika 12 - Render
Kliknite na gumb RENDER in dobite rezultat (samo ne pozabite določiti poti).
To je vse.
