Nedavno su različite vrste animacije SVG (Scalable Vector Graphics) grafike na web stranicama i aplikacijama postale vrlo popularne. To je zbog činjenice da sve najnoviji pretraživači već podržavaju ovaj format. Evo informacija o podršci pretraživača za SVG.

Ovaj članak raspravlja najjednostavniji primjer Lako animirajte SVG vektore jquery plugin Lazy Line Painter.

izvor

Da biste dovršili i u potpunosti razumjeli ovaj zadatak, osnovno poznavanje HTML-a, CSS-a, Jqueryja je poželjno, ali nije potrebno ako samo želite da animirate SVG) Počnimo!

I tako koraci koje trebamo slijediti:

1. Kreirajte ispravnu strukturu datoteke
2. Preuzmite i povežite dodatak
3. Nacrtajte kul linijsku umjetnost u Adobe Illustratoru
4. Pretvorite našu sliku u Lazy Line Converter
5. Zalijepite rezultirajući kod u main.js
6. Dodajte malo CSS-a po ukusu

1. Kreirajte ispravnu strukturu datoteke
U tome će nam pomoći servis Initializr, gdje je potrebno odabrati parametre kao na slici ispod.

• Classic H5BP (HTML5 Boiler Plate)
• No Template
• Samo HTML5 Shiv
• minimiziran
• .IE Classes
• Kromirani okvir
• Zatim kliknite Preuzmi!

2. Preuzmite i povežite dodatak

Pošto inicijalizr dolazi sa najnovijom Jquery bibliotekom, iz arhive koju treba da preuzmemo iz repozitorija projekta Lazy Line Painter, samo 2 fajla treba da se prenesu u naš projekat. Prvi je ‘jquery.lazylinepainter-1.1.min.js’ (verzija dodatka može se razlikovati) nalazi se u korijenu rezultirajuće mape. Drugi je example/js/vendor/raphael-min.js.

Ove 2 datoteke su smještene u js folder. I mi ih uključujemo u naš index.html prije main.js ovako:

3. Nacrtajte sjajnu sliku u Adobe Illustratoru

1. Nacrtajte našu konturnu sliku u Illustratoru (najlakši način da to učinite je pomoću alata Pen Tool)
2. Potrebno je da se konture našeg crteža ne zatvaraju, jer za naš efekat trebamo početak i kraj
3. Ne bi trebalo imati punjenja
4. Maksimalna veličina datoteke je 1000×1000 px, 40 kb
5. Izrežemo na granice objekta Objekt>Umjetne ploče>Prilagodi granicama umjetničkih ploča
6. Sačuvaj kao SVG (standardne postavke spremanja su u redu)

Na primjer, možete koristiti ikone u prilogu.

4. Pretvorite našu sliku u Lazy Line Converter
Samo prevucite i ispustite svoju ikonu u okvir ispod.
Debljina, boja obrisa i brzina animacije mogu se promijeniti u samom kodu koji će se pojaviti nakon konverzije!

5. Zalijepite rezultirajući kod u main.js
Sada samo zalijepite rezultirajući kod u praznu datoteku main.js
Opcije:
strokeWidth — debljina obrisa
strokeColor - boja obrisa
Također možete promijeniti brzinu crtanja svakog vektora promjenom vrijednosti parametra trajanja (podrazumevano 600)

6. Dodajte malo CSS-a po ukusu
Ukloni pasus iz index.html

Zdravo svijete! Ovo je HTML5 Boilerplate.

I umjesto njega ubacujemo blok u kojem će se odvijati naša animacija

zatim dodajte malo CSS-a u main.css fajl za ljepši izgled:

Tijelo (pozadina:#F3B71C; ) #ikone (pozicija: fiksna; gore:50%; lijevo:50%; margina: -300px 0 0 -400px; )

sačuvajte sve datoteke.
Sada samo otvorite index.html u modernom pretraživaču i uživajte u efektu.

P.S. kada se radi na lokalnoj mašini, početak animacije može biti odgođen za nekoliko sekundi.

Zdravo svima! Danas ću pokušati da opišem karakteristike programa Adobe Illustrator, upoređujući ga sa mogućnostima ispiranja. Ovo neće biti globalna analiza programa po kostima, već opis nekih zanimljivi čips koje sam otkrio u ovom programu. Sakupljao sam informacije dio po dio dok sam ih proučavao kako bih sve stavio u jedan post. Moram odmah priznati da nisam superiskusan korisnik ilustratora, samo ga zadnjih šest mjeseci koristim u crtanju (prije toga sam sve crtao blic). Mnogi se žale da je ilustrator složen, ne uvijek intuitivan. Donekle se slažem da je ovaj program težak nakon blica. Ali glavna stvar ovdje nije odustati, već nastaviti učiti. I nakon par sedmica se nameće misao, kako sam se prije snašao bez toga!

Dakle, ono što mi se svidjelo kod ilustratora, a ono što sam pronašao za sebe nije u flashu.
1. Počeću s najjednostavnijim, ali u isto vrijeme neophodnim. Pokušajte bljeskati da rasporedite predmete u krug. Ranije je bio Deco Tool, ali je uklonjen, očigledno smatran nepotrebnim. Odlučili smo da bi bilo zabavnije to raditi ručno. Illustrator ima ovu funkciju: Efekat - Distort&Transform - Transform.

Sve je brzo i jednostavno, vrijednosti (udaljenost između objekata, broj kopija) sami postavljamo u postavkama.

2. Cik-cak

Još jednostavnija, ali ipak korisna stvar. Činilo bi se sitnica, ali u flashu morate crtati rukom, u ilustratoru je to pitanje sekundi.

3. Deformacija objekata (Warp)

Ne postoji ništa slično u Flashu. U primjeru ispod, pokazao sam samo 2 načina za deformaciju jednostavnih oblika (Efekat - Warp - Arc / Fish). U stvari, ima ih 15. najnoviju verziju programe.

4. Automatsko zaokruživanje uglova (Round Corners)

To se može uraditi ručno: na grafičkom objektu, kada se izabere u uglu (u svim uglovima), pojavljuje se bijela tačka i znak zaobljene linije. Prevucite mišem, prilagodite se svom ukusu.

Ali ovo se odnosi samo na oblike, s linijom olovke malo drugačije - primijenite efekat zaokruživanja ( Efekat - Stilizacija - Zaobljeni uglovi). Na izlazu dobijamo isti rezultat.

5. Roughen

Efekat se primenjuje na jednostavne forme (Effect-Distort&Transform-Roughen). Kao rezultat, dobijamo nešto što liči na low-poly 3D modele. Mislim da je cool :) I što je najvažnije - vrlo jednostavno.

6 Pucker&Bloat(Uvucite i naduvajte)
Primjer na slici ispod:

7. Ekstenzija obrasca (Offset Path)

U flash-u postoji funkcija Expand Fill (popuna ekstenzija), ona uopće ne radi s olovkom, za razliku od ilustratora.

8. Četke (umjetnički kist, kist za uzorke, kist za raspršivanje)
Pogledajte sliku ispod za primjere:

9. Četkica za teksturu (četke za teksturu)

U ilustratoru ima i mnogo četkica za teksturu o kojima sam pisao i kako su se pojavili nova verzija blic - . Primijećeno je da je upotreba četkica u Adobe Animateu užasno spora. To je to:(

10. Nisam siguran da li je ovo trik, ali želim da se fokusiram na četkicu sa smiješnim imenom mrljaČetka. Smješten na alatnoj traci, vrlo lijepa četka za korištenje. Ima gomilu podešavanja, sviđa mi se više nego inače. Teško je riječima opisati njegove prednosti, bolje je jednom probati.

10.Split to Grid

Još jedna korisna funkcija je Split to Grid (Object-Path-Split to Grid) funkcija koja vam omogućava da izrežete obrazac na jednake segmente. Na šta nas ovo podsjeća? Tako je - prozori u visokoj zgradi. Što se mene tiče, super stvar za crtanje, na primjer, urbanih pejzaža;)

Još jedan koristan alat uveden u ilustrator, vjerovatno od njegovog prvog izdanja. Pomoću njega možete kreirati, na primjer, drvene teksture:

12. Pomakni (desno - Transformiraj - Pomjeri)

Pomaknite objekt za datu udaljenost. Ako želite, možete odmah kreirati kopiju koja će biti postavljena na željenoj udaljenosti od odabranog objekta horizontalno/ili okomito. Ranija verzija flash-a imala je dodatak koji je imao ovu funkciju. Nažalost, ne sjećam se njegovog imena.

Vrlo je zgodno kreirati bešavne uzorke u ilustratoru ( Objekat-uzorak-napravi). Sjećam se kako sam mahnito briljirao u bljesku sa stvaranjem . U ilustratorskoj verziji CC 2015 sve je automatizirano, gomila postavki pomoći će vam da kreirate uzorak u desetinama varijacija, sa samo nekoliko grafičkih elemenata pri ruci. U ranijim verzijama programa sve se moralo raditi ručno, kao do sada u flashu.

(Napomena - uzorak se može učiniti vektorskim objektom koji se može uređivati ​​pomoću funkcije parse ( Object-Expand Appearance).

14. Objektni mozaik (Mozaik)

Kreirajte paletu boja na osnovu postojeće slike. Zatim uvezite sliku koja vam se sviđa u ilustraciju (Otvori). Objekt - Kreirajte objektni mozaik. U postavkama određujemo frekvenciju podjele po visini i širini.

I na izlazu dobijamo:

15.Blend (miksanje)

Koristi se za kreiranje gradijenata. Možete kreirati prelaze korak po korak, kao, na primjer, na slici. Ne mogu reći da ga često koristim, ali možda nekome dobro dođe. Čini mi se da se može koristiti za kreiranje jednostavnih pozadinskih slika.

Alat se također može koristiti za kloniranje objekata. Postavljamo dva objekta na udaljenosti jedan od drugog i primjenjujemo Blend Options, odabiremo broj koraka (broj kloniranih objekata).

16. Alat za izgradnju oblika. Veoma zgodna stvar za rad sa primitivcima. U trenu, kako mi se činilo, manje je zgodno.

Držeći Alt i klikom na odabrane segmente - izbrišite segmente. Ako jednostavno prevučemo miša preko nekoliko odabranih područja - veze.

Dodatak - alat koji pomaže u automatskom rezanju, povezivanju itd. odabrane forme. Što se mene tiče, nije baš zgodno, češće ga koristim Buildoblikalat.

(umjetničke ploče)

18.Custom Tool Panel

Mogućnost kreiranja vlastite alatne trake, odbacivanja nepotrebnih i odabira samo onih koje koristite.

U flashu, umjetničke ploče, odnosno scene ( Scena 1,2,3..) nalaze se odvojeno i potrebno je da prelazite između njih (Shift + F2). U illustratoru, sve se mogu postaviti pred vašim očima. Zgodno je kada napravite nekoliko verzija istog crteža, tako da vam sve opcije budu pred očima radi poređenja.

19. Izometrija sa grafičkim stilovima

I posljednja stvar je kreiranje izometrije bez korištenja 1 klika (ili bolje rečeno, 3 klika, jer imamo 3 strane;) korištenjem grafičkih stilova ( Grafički stilovi). Kako se to radi, pisaću sledeći put.

Ono što ilustrator ima zajedničko sa flash-om je mogućnost snimanja objekta u simbol (simbol) i ovaj simbol se takođe može bez problema prenijeti na flash (otvorite .ai fajl u flash-u, tako što ćete Uvoz - uvoz na pozornicu).
Simbol u ilustratoru ima ista svojstva kao u flashu.
I na kraju ću napisati šta je u ilustratoru, po mom mišljenju, inferiorno u odnosu na flash. Da, da, i postoji. A ovo je alat za punjenje ( kantica). Koliko god se trudio da se naviknem na illa-u, u flashu je zgodnije.
Ako su vam moje bilješke postale korisne ili želite nešto sami dodati - dobrodošli u komentare! Sretno svima ;)

Flash File Format (SWF) se zasniva na vektorska grafika i dizajniran je za skalabilnu, kompaktnu grafiku za web. Budući da je ovaj format datoteke zasnovan na vektorskoj grafici, objekt zadržava kvalitet slike u bilo kojoj rezoluciji i idealan je za kreiranje okvira animacije. U Illustratoru možete kreirati pojedinačne okvire animacije na slojevima, a zatim izvesti slojeve slike kao pojedinačne okvire za korištenje na web stranici. Također možete definirati simboli u Illustrator datoteci da smanjite veličinu animacije. Kada se izveze, svaki simbol je definiran samo jednom u SWF datoteci.

Naredba za izvoz (SWF)

Pruža najveću kontrolu nad animacijom i kompresijom bitova.

Pruža veću kontrolu nad mješavinom SWF i bitmap formata u fragmentiranom rasporedu. Ova komanda nudi manje opcija za sliku od naredbe Izvoz (SWF), ali koristi najskorije korištene opcije komande Izvoz (pogledajte ).

Imajte na umu sljedeće smjernice kada pripremate objekt za spremanje kao SWF.

Koristite aplikaciju Device Central da vidite kako će Illustrator grafika izgledati u aplikaciji Flash Player na raznim ručnim uređajima.

Umetanje Illustrator grafike

Grafički objekat kreiran u Illustratoru može se brzo, lako i lako kopirati i zalijepiti u Flash aplikaciju.

Kada zalijepite Illustrator grafiku u Flash aplikaciju, sljedeći atributi se čuvaju.

Konture i oblici

• Debljina poteza

  Definicije gradijenata

  Tekst (uključujući OpenType fontove)

  Povezane slike

• Blend Modes

Osim toga, Illustrator i Flash podržavaju sljedeće funkcije prilikom lijepljenja grafike.

Prilikom odabira slojeva u Illustrator umjetničkom djelu vrhunski nivo U cijelosti i lijepljenjem u Flash aplikaciju, slojevi i njihova svojstva (vidljivost i blokiranje) su sačuvani.

Illustrator formati boja koji nisu RGB (CMYK, sivi formati i prilagođeni formati) se pretvaraju pomoću Flasha u RGB. RGB boje se ubacuju na uobičajen način.

Kada uvezete ili zalijepite Illustrator ilustracije, možete koristiti različite opcije za spremanje određenih efekata (kao što je sjena koju baca tekst) kao Flash filtere.

Flash čuva Illustrator maske.

Izvezite SWF datoteke iz Illustrator-a

SWF datoteke izvezene iz Illustrator-a su istog kvaliteta i kompresije kao SWF datoteke izvezene iz Flash-a.

Prilikom izvoza, možete birati između različitih unaprijed definiranih stilova za optimalan izlaz i odrediti kako se koristi više grafičkih ploča, kako se konvertiraju likovi, slojevi, tekst i maske. Na primjer, možete odabrati izvoz Illustrator simbola kao filmove ili grafičke slike, kao i kreiranje SWF simbola iz Illustrator slojeva.

Uvoz Illustrator fajlovi u Flash aplikaciju

Da biste kreirali kompletan izgled u Illustratoru, a zatim ga uvezli u Flash u jednom koraku, možete sačuvati svoje umjetničko djelo u Illustrator izvornom (AI) formatu i uvesti ga s velikom vjernošću u Flash pomoću naredbi File > Import To Workspace. područje" ili " Datoteka" > "Uvezi u biblioteku".

Ako Illustrator datoteka sadrži više grafičkih ploča, u dijaloškom okviru Flash Import odaberite montažnu ploču za uvoz i odredite postavke za svaki sloj u toj montažnoj ploči. Svi objekti u odabranoj montažnoj ploči se uvoze u Flash kao jedan sloj. Kada uvezete drugu montažnu ploču iz iste AI datoteke, objekti sa te ploče se uvoze u Flash kao novi sloj.

Kada uvezete Illustrator ilustracije kao AI, EPS ili PDF datoteke, Flash zadržava iste atribute kao kada zalijepite Illustrator ilustracije. Također, ako Illustrator datoteka koju uvozite sadrži slojeve, možete ih uvesti na jedan od sljedećih metoda.

Pretvorite Illustrator slojeve u Flash slojeve.

Pretvorite Illustrator slojeve u Flash okvire.

Pretvorite sve Illustrator slojeve u jedan Flash sloj.

Adobe Illustrator i naknadni efekti
Uvoz i jednostavna animacija

Zdravo. Danas recenziramo jednostavnu animaciju u After Effects.

Resursi: Adobe Illustrator CC
Adobe After Effects CC

Počnimo crtanjem u Illustratoru.

Crtamo
1) Nacrtajte žuti pravougaonik kao pozadinu

Slika 1 - Pravougaonik

2) Nacrtajte krug i ispunite ga gradijentom
Poradimo malo na krugu:
- uklonite donju tačku na konturi, dobivamo luk;
- nacrtajte ravnu liniju, zatvarajući dno luka, dobijamo polukrug

Slika 2 - 1) nacrtati krug; 2) gradijent; 3) brisanje tačke

3) Nacrtajte pravougaonik i napravite njegovu kopiju
- jedan sivi pravougaonik;
- još jedan tamno sivi pravougaonik
4) Nacrtajte trougao od zvjezdice postavljanjem broja zraka - 3

Slika 3 - 1) pravo svetlo; 2) pravo tamno; 3) trougao

5) Nacrtajte mačku olovkom i jednostavnim oblicima

Slika 4 - 1) glava; 2) vrat; 3) tijelo; 4) noga; 5) rep

A sada najviše MAIN momenat
Podijelimo slike u slojeve (ono što će biti animirano - na posebnom sloju) ovako:

Slika 5 - sve slike (crvena oznaka važnih slojeva)

Sve, sada štedimo.
Pogledajmo postavke spremanja

Slika 6 – Sačuvaj

A sada sledeća faza. ZatvoriAdobe Illustrator i otvorite After Effects.

Uvezi u After Effects
Datoteka - Uvoz - Datoteka - odaberite naš sačuvani fajl Ilustrator.
Odaberimo da uvezemo slojeve iz Illustratora, ako stavimo snimak, dobićemo sliku sa spojenim slojevima, ali ovo nam ne treba.

Slika 7 - Uvezi kao sastav

Sve uvezeno.
Sada da vidimo šta imamo. Dvaput kliknite na kompoziciju , šta bi se otvorilo i vidjeli bismo slojeve (ako je sve urađeno kako treba, bit će nekoliko slojeva). Dobili smo ovo, pogledajte sliku

Slika 8 - Otvorena kompozicija

A sada ono zbog čega smo danas ovdje - Animacija.

Animacija u naknadni efekti
Postavite tačku okretanja na vrhu strelice pomoću alata Pan Behind ( prečica- Y). Samo uzmite tačku i pomjerite je gdje želite. Kao rezultat, to će izgledati ovako..

Slika 9 – Alat za pomicanje i slojevi

To je to, sada idemo na slojeve za animaciju.
Trebamo sloj sa strelicama i Head_cat.
Počnimo sa strelicom.
Proširite listu, pronađite i kliknite na sat. Dakle, prvu tačku stavljamo na nulu sekunde. Ukupno, animacija će trajati 2 sekunde.
Dakle, ovo su postavke koje trebate napraviti (ukupno ćemo staviti 3 boda)

Sekunda	0	1	2
	+66	- 70	+66

Ovako će to izgledati:

Slika 10 - Strelica za rotaciju

Sada animiramo glavu mačke.
Proširite head_cat i pronađite pozicija.
Bit će 4 boda.
Promijenit će samo posljednju koordinate bez dodirivanja ostatka.

Sekunda	0.1	0.17	1.12	2.0
pozicija	689.3	729.3	729.3	689.3

Pogledajmo sliku.

Slika 11 - Položaj glave

Dakle, princip animacije je bio ovakav. Strelica se njiše s jedne na drugu stranu, čim se približi mačiću, uvlači mu glavu u sebe, zadržava se malo u tom položaju, a zatim ga vraća na svoje mjesto.

Završna faza

Proizvodnja
Od svog rada morate stvoriti gotov proizvod.
Idite na meni - Dodaj u red za renderiranje
Otvara se panel Render i u izlaznom modulu (dva klika) odaberite izlazni format. Uzeo sam *.mov

Slika 12 - Render

Kliknite na dugme RENDER i dobijte rezultat (ne zaboravite navesti putanju).
To je sve.

Danas nemamo baš uobičajeno Adobe lekcija Ilustrator. Jer ovoga puta nećemo napraviti statičnu sliku, već pravu animaciju. Zamislite da ispadne pomoć od Adobe-a Ilustrator može crtati i crtane filmove :)

A za ovo nam ništa ne treba. Kompetentna organizacija slojeva i izvoz završnog rada u swf format, gdje se svaki sloj pretvara u okvir animacije. U današnjem tutorijalu nacrtat ćemo animaciju odbrojavanja u stilu retro filma. Izlaz bi trebao biti flash film sa istim odbrojavanjem.

Prvo što treba da uradite je da nacrtate sve neophodni elementi za buduću animaciju. Da bih to uradio, napravio sam dve pozicije filmskog okvira u zasebnom dokumentu, krug za referencu, koji je izrezan na zasebne sektore, teksturu i vertikalnu ogrebotinu da bih dodao efekat antike, kao i sve brojeve i natpise.

Kada su svi dijelovi našeg crtića spremni, možete početi kreirati samu animaciju. Radi praktičnosti, to je najbolje učiniti u novom dokumentu. U ovom slučaju, slojevi će igrati ulogu okvira animacije. I u prvom sloju, samo trebate kopirati kadar filma. Postavite ga na sredinu radnog područja.

Sada kreirajte drugi sloj i kopirajte okvir filma u njega, u kojem su rupe na rubovima napravljene s pomakom. Takođe treba da bude centriran.

Iz ova dva sloja već možete dobiti animaciju filma u pokretu. Ali kasnije će nam trebati mnogo više slojeva. Dakle, odaberite prva dva sloja, idite na opcije panela i napravite kopiju slojeva.

Na sličan način trebamo akumulirati 12 slojeva sa filmskim okvirima koji definiraju njegovo kretanje.

Sada imamo čitavu gomilu slojeva i svi su vidljivi. U smislu da gornji slojevi blokiraju donje, što nije baš zgodno za rad. Stoga možete isključiti neke slojeve klikom na ikonu oka lijevo od naziva sloja. Da biste isključili ili uključili sve slojeve odjednom, držite pritisnutu tipku Alt dok kliknete na ikonu oka. Uključujući i isključujući slojeve, možete vidjeti tačno šta se nalazi u određenom okviru naše buduće animacije. A sada, da bismo dodali lagano potresanje kretanju filma, moramo malo pomaknuti primljene kadrove u različitim smjerovima. Da biste to učinili, uključite samo sloj s kojim ćete raditi ovog trenutka, a zatim pomaknite okvir za nekoliko piksela na obje strane.

Kada prođete kroz sve slojeve i dodate malo pomaka, možete početi kreirati animaciju pokretnog kruga. Da biste to učinili, kopirajte krug koji se sastoji od sektora iz dokumenta o dijelovima crtića i stavite ga na prvi sloj na okvir filma.

Ako uklonite odabir iz kruga, tada će izgledati kao jedna cjelina. To je upravo ono što nam treba.

Ali kako se sastoji od zasebnih sektora, moguće je, promjenom njihove boje, vrlo brzo i jednostavno kreirati animaciju. Da biste to učinili, kopirajte ovaj krug u drugi sloj i učinite prvi sektor svjetlijim. Sjećate se da se film trese tokom kretanja, tako da nije potrebno staviti krug tačno u centar kadra. Stavite ga na oko.

Slično, morate kopirati krug u svaki sljedeći sloj, dok slikate svjetlijom bojom jedan sektor više nego prethodni put. Zajedno, ovih 12 slojeva čine animaciju kretanja filma s krugom punjenja.

Zatim moramo dodati teksturu našim slojevima. Uključite prvi sloj i kopirajte teksturu odatle. izvorni fajl sa rezervnim dijelovima.

Zatim uključite sljedeće slojeve redom i kopirajte istu teksturu tamo. Da bi izgledao drugačije na svakom kadru, samo ga zarotirajte za 90 stepeni. Kao što ste možda pretpostavili, moramo dodati teksturu na svih 12 okvira.

Ako ste već prilično umorni od kopiranja, onda vas mogu ugoditi - ostalo je jako malo. Najteži dio je gotov. Ostaje dodati vertikalne ogrebotine, i gotovo sve. Da biste to učinili, ponovo kopirajte originalnu ogrebotinu i stavite je na proizvoljno mjesto u nekoliko slojeva. U mom slučaju, ogrebotine se pojavljuju u samo dva sloja.

Sada kada je glavni ciklus sa filmskom animacijom spreman, ostaje da se dodaju brojevi. Pošto brojimo od 3 do 1 plus riječ Go!!!, potrebno nam je još više slojeva. Ne 12, već čak 48. Da biste to učinili, trebate napraviti još tri kopije gotovih slojeva s filmskom animacijom.

A onda je sve jednostavno. Uključite prvi sloj i tamo stavite broj tri.

Zatim morate kopirati ovu figuru u sljedeće slojeve dok se animacija kruga ne završi. Kada dođete do sljedeće kopije slojeva, gdje će krug ponovo biti potpuno ispunjen, morate staviti broj dva. Na isti način kopirajte broj jedan u željene slojeve. A kada dođete do završnih slojeva za oznaku Go!!!, jednostavno izbrišite krug prije nego što kopirate oznaku na željeni sloj.

To je sve sa animacijom. Ovdje je glavna stvar da se ne zbunite. Možete slojevima dati neka zgodna imena, ali ja sam nekako bio previše lijen :) Pa ipak, kada završite, obavezno ponovo uključite sve slojeve klikom na ikonu oka.

U prozoru postavki izvoza, obavezno postavite Izvezi kao: AI slojeve na SWF okvire. Upravo ova opcija pretvara Illustrator slojeve u okvire animacije. Zatim kliknite na dugme Napredno.

Otvoriće se dodatna podešavanja. Ovdje trebate podesiti Frame Rate. Imam 12 sličica u sekundi. Polje za potvrdu Looping je odgovorno za ciklus animacije. Zahvaljujući njoj, video će se puštati u krug. A opcija Layer Order: Bottom Up prikazuje slojeve ilustratora odozdo prema gore na panelu. Upravo tako smo izgradili našu animaciju.

Kao rezultat, dobijamo flash film sa našom animacijom.

Sada vidite da pravljenje jednostavne animacije u Adobe Illustratoru nije tako teško kao što se čini na prvi pogled.

Ali za kreiranje dugih videa ili interaktivnih aplikacija, ipak je bolje koristiti Adobe Flash ili druge flash uređivače. Na primjer, napravio sam ovu mačku u starom Macromedia Flashu koji sam iskopao na poslu.

Nedavno se HTML5 i CSS3 sve više koriste za kreiranje animacije. Dati kod podržano moderni pretraživači i ne zahtijeva korištenje flash playera.

Roman aka dacascas posebno za blog

Pretplatite se na naš newsletter kako ne biste propustili ništa novo: