Ako vytvoriť idobérujúci animáciu a sprites. Vytvorenie animácií v ilustrátore

Ahojte všetci! Dnes sa pokúsite urobiť popis funkcií programu Adobe Illustrator, v porovnaní s funkciami Flash. Nebude to globálne zapečatenie kostného programu, ale skôr popis niektorých zaujímavých žetónov, ktoré som objavil pre seba v tomto programe. Informácie boli zozbierané v kusoch ako naučiť sa vyložiť všetko v jednom príspevku. Okamžite vyznávam, že nie som super-skúsený užívateľ Illustrator, len posledných šesť mesiacov, ktoré som ho používal pri kreslení (predtým, ako je všetko nakreslené vo vašom blesku). Mnohí sa uistia, že ilustrátor je zložitý, intuitívne nie je vždy zrozumiteľný. Do určitej miery súhlasím s tým, že po blesku je tento program komplikovaný. Ale potom hlavná vec nie je ukončiť, ale pokračovať v učení. A po niekoľkých týždňoch sa objaví myšlienka, ako som robil bez nej!

Takže to, čo sa mi páčilo v ilustrátore, a že som našiel pre seba taký, čo nie je v blesku.
1. Začnem s najjednoduchším, ale zároveň potrebujete. Pokúste sa umiestniť objekty v kruhu. Skoršie bolo Nástroj Deco. Bolo však odstránené, zrejme, počítané zbytočné. Rozhodli sa, že rukoväte si to robia viac zábavy. V ilustrátore je táto funkcia: Effect - Distort & Transform - Transform.

Všetky rýchlo a jednoduché, hodnoty (vzdialenosť medzi objektmi, počet kópií) špecifikujú nastavenia sami.

2. Zig-Zag

Stále jednoduchšie, ale napriek tomu užitočná vec. Zdá sa, že mala byt, ale v flush, musíte čerpať manuálne, v ilustrácii je to druhá vec.

3. Deformácia objektov (warp)

V blesku nie je nič také. Na nižšie uvedenom príklade som ukázal len 2 spôsoby deformácie jednoduchých foriem (efekt - warp - oblúk / ryby). V skutočnosti, ich 15 najnovšia verzia programy.

4. Automatické zaokrúhľovanie rohov (okrúhle rohy)

Môžete manuálne urobiť: Na grafickom objekte počas izolácie v rohu (vo všetkých žľazach) je biely bod a znamenie federálnej linky. Vytiahnem myš, nastavujem sa na vašu chuť.

Týka sa to však len formy, s ceruzkou líniou trochu inak - aplikujte účinok zaokrúhľovania ( Effect - Stylize - Okrúhle rohy). Na výstupe dostaneme rovnakú moc.

5. Zrevené (olej)

Účinok platí K. jednoduché formuláre (Účinok - Distort & Transform - zdrsnenie). Na vývode získame niečo podobné nízkym polyborovým 3D modelom. Podľa môjho názoru, cool :) a čo je najdôležitejšie - veľmi jednoduché.

6. PUCKER & BLOAT (Ťahanie a nafukovanie)
Príklad na obrázku nižšie:

7. Rozšírenie formulára (cesta ofsetu)

V blesku sa nachádza funkcia Expand Fill (rozšírenie výplne), s ceruzkovými linkami nefunguje vôbec, na rozdiel od ilustrátora.

8. Kefy (umelecká kefa, štetec vzor, \u200b\u200bkefa
Nevyhľadávame žiadny obrázok nižšie s príkladmi:

9.Texture kefa (textové kefy)

Aj v ilustrátore je veľa textúrovaných kefiek, o ktorých som napísal a ako sa objavili nová verzia Blesk. Bolo pozorované, že použitie kefiek v Adobe Animate je desivé inhibálne. To je to: (

10. Nie ste si istí, že je to priamy trik, ale chcem zostať na straške s zábavným menom BlobKefa.. Na paneli s nástrojmi, veľmi príjemné na použitie kefy. Má veľa nastavení, mám rád viac ako obvykle. S slovami, je ťažké vysvetliť svoje výhody, je lepšie skúsiť raz.

10.Split na mriežku.

Tiež užitočná vec - rozdelenie na mriežku (objekt-path-thint na mriežku). Miestny strihajú tvar na rovnakých segmentoch. Čo nám to pripomína? Právo - Windows vo výškovej budove. Ako pre mňa, chladný kúsok na kreslenie, napríklad mestskej krajiny;)

Najmä jeden užitočný nástroj prezentovaný v ilustrátore, pravdepodobne od jeho prvej verzie. S ním môžete vytvoriť napríklad textúru dreva:

12. Pohyb (vpravo - Transform - Move)

Offsetovaný objekt vo vopred určenej vzdialenosti. Ak si želáte, môžete okamžite vytvoriť kópiu, ktorá bude umiestnená v požadovanej vzdialenosti od zvoleného horizontálneho objektu / alebo zvislého objektu. V skoršej verzii Flash bol plugin, ktorý bol vykonaný táto funkcia. Bohužiaľ, nepamätám si jeho meno.

V ilustrátore je veľmi výhodné vytvoriť bezšvové vzory ( Objekt-vzor). Pamätám si, ako sa zbláznil vo flash s stvorením. Vo verzii SS 2015 je všetko automatizované, veľa nastavení pomôže slepé vzory v desiatkach variantov, ktoré majú len niekoľko grafických prvkov. V predchádzajúcich verziách programu, každý musel robiť ručne, rovnako ako v flush.

(Poznámka - vzor môže byť vykonaný vektorovým upraviteľným objektom pomocou funkcie na demontáž ( Objekt - Rozšírenie).

14. Objekt Mozaika (MOSAIC)

Vytvorenie palety farieb na základe dostupného obrázka. Importovať svoj obľúbený obrázok v chorobe (otvorený), potom Objekt - vytvoriť objekt mozaika. V nastaveniach špecifikujte frekvenciu štiepnu výšku a šírku.

A dostaneme sa na výstupe:

15.blend (miešanie)

Používa na vytvorenie gradientov. Môžete vytvoriť krok za krokom prechody, napríklad na obrázku. Nebudem hovoriť, že ho často používam, ale môže sa prísť na niekoho. Zdá sa mi, že môžete použiť pri vytváraní jednoduchých obrázkov na pozadí.

Tiež nástroj môže byť použitý na klonovanie objektov. Umiestňujeme dva objekty vo vzdialenosti od seba a aplikujte možnosti Blend, vyberte počet krokov (počet klonovaných objektov).

16. Nástroj nástroja nástroja. Veľmi pohodlná vec pracovať s primitívnymi látkami. V blesku, ako sa mi to zdalo, menej pohodlné.

Kliknutím na položku Alt a kliknite na vyhradené segmenty - Odstrániť segmenty. Ak jednoducho natiahnete myš nad niekoľkými vyhradenými oblasťami - Connect.

Doplnok - nástroj, ktorý pomáha automaticky prerušiť, pripojiť atď. Vybrané tvary. Ako pre mňa, to nie je veľmi pohodlné, používam častejšie VybudovaťTvarNástroj.

(montážne plochy)

18. Zákazník panel nástrojov.

Schopnosť vytvoriť svoj vlastný panel nástrojov sám, hádzať zbytočné a vybrať len tie, ktoré používate.

V spláchni, montážne oblasti, menovite scény ( Scéna 1,2,3 ..) Nachádza sa samostatne a medzi nimi, musíte prepínať (SHIFT + F2). V ilustrátore môžu byť umiestnené pred ich očami. Pohodlne, keď urobíte niekoľko možností pre ten istý obraz, takže všetky možnosti sú pred našimi očami na porovnanie.

19. Izometrický s grafickými štýlmi

A druhý je vytvorenie izometrického bez použitia v 1 kliknutí (a presnejšie, v 3 kliknutiach, pretože máme 3 strany;) s grafickými štýlmi ( Grafické štýly.). Ako sa to robí, napíšem nabudúce.

Celkovo s bleskom z ilustrátora - možnosť uložiť objekt do symbolu (symbol) a tiež bez problémov je možné preniesť na blesk (otvorený v súbore Flash.ai Import - Import do fázy).
Znak v ilustrátore má rovnaké vlastnosti ako v blesku.
A na konci píšem, že v ilustrátore, podľa môjho názoru, je horší ako blikať. Áno, áno, a to je. A toto je nástroj výplne ( Plechovka farby.). Ako sa nesnažím sa na ňu zvyknúť v Ille, v chuti je pohodlnejšie.
Ak sa moje poznámky stali užitočnými pre vás alebo to, čo chcete od seba doplniť - Velkov v komentároch! Veľa šťastia všetkým;)

V poslednej dobe, Grafická grafika SVG animácie (škálovateľná vektorová grafika) na stránkach a aplikáciách sa stala veľmi populárnym. To je spôsobené tým, že všetko nové prehliadače Podporte tento formát. Tu je informácia pre podporu prehliadačov SVG.

Tento článok sa zaoberá najjednoduchší príklad animácia SVG. vektory pomocná pomoc Plugin JQuery Lazy Line Painter.

Zdrojový kód

Plnenie a úplné pochopenie tejto úlohy, základné znalosti HTML, CSS, JQuery, ale nie nevyhnutne, ak chcete Animovať SVG) Poďme hore!

A tak kroky, ktoré potrebujeme na vykonanie:

Vytvorte pravú štruktúru súborov
Stiahnite si a pripojte plugin
Nakreslite chladný obrys v aplikácii Adobe Illustrator
Previesť náš obrázok v lenive
Vložte výsledný kód v main.js
Pridajte nejaké CSS podľa chuti

1. Vytvorte správnu štruktúru súborov
Tým sa tým pomôže inicializačný servis, kde potrebujete vybrať parametre ako na obrázku nižšie.

Klasický H5BP (HTML5 Kotolová platňa)
Žiadna šablóna.
JUST HTML5 SHIV.
Rozbitý
Tj kasky.
Chrómový rám.
Potom kliknite na položku Stiahnite si!

2. Stiahnite si a pripojte plugin

Vzhľadom k tomu, inicializr prichádza s najnovšou knižnicou JQuery, z archívu, ktorú potrebujeme na stiahnutie z lenivej línie maliarskeho úložiska projektu, musíte preniesť iba 2 súbory do nášho projektu. Prvým je 'jquery.lazylineser-1.1.min.js' (plug-in verzia sa môže líšiť), je v koreňoch výsledného priečinka. Druhý je príklad / js / dodávateľ / raphael-min.js.

Tieto 2 súbory sú umiestnené v priečinku JS. A pripojiť ich k nášmu indexu.html pred Main.js takto:

3. Nakreslite strmý obrysový obrázok v aplikácii Adobe Illustrator

Na náš obrysový obrázok na ilustráciu (najjednoduchší spôsob, ako robiť s nástrojom Pen)
Je potrebné, aby obrysy našej výkresu nezatrvali TC pre náš vplyv. Začiatok a koniec
Nemali by byť žiadne vyplnenie
Maximálna veľkosť súboru - 1000 × 1000 px, 40kb
Plodina na objekt objektu\u003e ARTBOARDS\u003e FIT K ARTBOARDS HOREY
Uložiť vo formáte SVG (sú vhodné štandardné nastavenia uloženia)

Môžete napríklad použiť ikony v prílohe.

4. Prevod nášho obrázku v Lazy Line Converter
Stačí presunúť ikonu v okne, ktoré na obrázku nižšie.
Hrúbka, farba okruhu a rýchlosť animácie je možné zmeniť v samotnom kóde, ktorý sa zobrazí po konverzii!

5. Vložte výsledný kód v main.js
Teraz jednoducho vložte prijatý kód do súboru Prázdny Main.js
Parametre:
Zdvihové tlačidlo - hrúbka obrysu
Strokecolor - Contour Farba
Môžete tiež zmeniť rýchlosť výkresu každého vektora zmenou hodnôt parametra trvania (predvolené 600)

6. Pridajte CSS na chuť
Odstráňte odsek index.html

Ahoj svet! Toto je kotolová plocha HTML5.

A namiesto toho vložte blok, v ktorom sa vyskytne naša animácia

potom pridajte nejaké CSS do súboru Main.css pre príjemnejší dizajn:

Telo (pozadie: # f3b71c;) #icons (pozícia: pevná; top: 50%; vľavo: 50%; okraj: -300px 0 0 -400px;)

uložte všetky súbory.
Teraz jednoducho otvorte index.html v modernom prehliadači a vychutnajte si efekt.

P.S. Pri spustení na miestnom zariadení je možné začať začiatok animácie na niekoľko sekúnd.

Optimalizácia webovej grafiky

Grafické informácie sa prenášajú oveľa pomalšie ako text a čas načítania obrazu je úmerný veľkosti ich grafických súborov. teda rýchle načítanie Webové stránky zahŕňajú malú veľkosť grafických obrázkov v nich zabudovaných, čo sa dosahuje prostredníctvom ich optimalizácie. Pod optimalizáciou obrazu sa rozumie jeho konverzii, ktorá poskytuje minimálnu veľkosť súboru pri zachovaní požadovaného tento prípad Kvalita obrazu, ktorá sa dosahuje predovšetkým znížením počtu farieb v grafických obrazoch, používanie komprimovaných a špeciálnych formátov súborov a optimalizáciou kompresných parametrov pre jednotlivé obrazové fragmenty.

Ilustrátor má vstavané nástroje optimalizácie obrazu, ktoré poskytujú rôzne metódy náhľadu rýchlu a efektívnu implementáciu procesu optimalizácie. Náhľad Poskytuje pomerne presný pohľad na to, ako optimalizovaný obraz bude vyzerať v reálnom čase, čo pomáha odhadnúť výsledok optimalizácie a úspešne vybrať požadované nastavenia. A môžete optimalizovať oba obrázky vytvorené priamo v programe Illustrator a iné, ako sú napríklad fotografie, ktoré majú byť umiestnené na webovej stránke.

V okne sú nastavené možnosti optimalizácie Uložiť Web. (Uloženie webu) spôsobené príkazom do menu Spis (Súbor). Program navrhuje použiť jeden zo štyroch režimov náhľadu, ale na posúdenie kvality optimalizácie najlepšia cesta Dva sú vhodné:

2-up. (dve možnosti) - súčasné prezeranie pôvodného a optimalizovaného obrazu v súlade so zadanými nastaveniami (obr. 1);
4-up. (Štyri možnosti) - V tomto režime je výrez rozdelený do štyroch okien (obr. 2) zobraziť pôvodný obrázok a tri verzie optimalizovaného: prvá verzia je vytvorená na základe nainštalovaných hodnôt optimalizácie a ostatné dva Možnosti pre aktuálne nastavenia optimalizácie.

Oba režimy vám umožňujú výrazne ušetriť čas pri hľadaní lepšej možnosti optimalizácie, pretože ušetríte od potreby uložiť obrázky z rôzne nastavenia Optimalizácia a ich následné vizuálne porovnanie. Okrem toho je možné vyhodnotiť nielen kvalitu optimalizovaného obrazu, ale aj jeho veľkosť a čas zavádzania s rôznymi možnosťami pripojenia. Pre porovnanie je režim 4-up najvýhodnejší (štyri možnosti), čo vám umožní vizuálne posúdiť účinok kompresie alebo znížiť paletu na kvalitu obrazu a jeho veľkosť a nakoniec určiť najlepšie optimalizačné parametre.

Ilustrátor vám umožňuje optimalizovať webovú grafiku vo formátoch nielen GIF, JPG, PNG-8 a PNG-24, ale aj v SWF a SVG. Indexované obrázky malé množstvo Farby sú uložené vo formáte GIF. Na zachovanie plnofarebných a poltónových obrázkov - fotografie a farebné grafy, ako sú gradientové výplne, sa používajú formát JPG. Pre plné farebné obrázky s transparentnými miestami formát pngktorý vám umožňuje uložiť indexované a plnofarebné obrázky, zatiaľ čo vo formáte PNG-8 maximálny možný počet farieb optimalizovaného obrazu je 256 a vo formáte PNG-24, obraz môže mať milióny farieb a Preto to vyzerá formát JPEG. Rozdiel medzi PNG-24 z JPEG je, že metóda kompresie sa používa na optimalizáciu obrázkov vo formáte PNG-24 nevedie k strate kvality, ale v dôsledku toho sa veľkosť súboru zvyšuje. Formáty SVG a SWF kombinujú grafické údaje, textové a interaktívne komponenty a môžu byť optimalizované.

Zvážte konkrétny príklad optimalizácie obrazu. Predpokladajme, že program ilustrátor vyvinula znak webovej stránky (obr. 3), pôvodne uložený vo formáte AI. Pokus o okamžité optimalizáciu na webe nebude viesť k ničomu dobrého, pretože v tomto prípade bude automatická obriezka obrazu, v ktorej sa nebude brať do úvahy skutočná pozícia získaná v dôsledku deformácie nápisu ( Obr. 4 a 5).

Pokúsme sa teda vyvážať znak formát psD Tím FILE \u003d\u003e Export (FILE \u003d\u003e Export) - Veľkosť vytvoreného obrazu bude 143 kb. Otvorte výsledný súbor PSD a použite príkaz FILE \u003d\u003e Uložiť na webe (Súbor \u003d\u003e ukladanie pre web). Berúc do úvahy obmedzený počet farieb zapojených do obrazu v tomto prípade je formát GIF optimálny, s konkrétnymi nastaveniami, ktorého sa musíte rozhodnúť. Experimentovanie s nastaveniami sa môžete uistiť, že najlepšia kvalita poskytuje vybraný kompresný algoritmus vybraný predvoleným programom Selektívny (Selektívne). Čo sa týka vyhladzovania, vzhľadom na prítomnosť gradientovej výplne, je lepšie zvoliť algoritmus s generáciou hluku - Hluk. (Obr. 6). Veľkosť výslednej optimalizácie súboru bude 6 729 kB (obr. 7), zatiaľ čo transparentnosť pozadia bude uložená, ktorá sa dá ľahko uistiť, že uložíte obraz vo formáte GIF spolu s HTML súboru (obr. 8). V dôsledku toho boli v tomto príklade prijaté súbory Emblem.html a Emblem.gif v priečinku PriMER1.

Tlačidlá

Nevyhnutným špecifickým dizajnovým prvkom akýchkoľvek webových stránok sú grafické ovládacie prvky - tlačidlá. Je jednoducho nemožné si predstaviť stránku bez nich. Tlačidlá kreslenia dnes sa stali špeciálnym žánrom a ilustrátor vám umožňuje vytvoriť najkomplnejšie možnosti. Napríklad tlačidlá zdobené ako mriežkové objekty a (alebo) s uložením masiek, vyzerajú oveľa efektívnejšie obyčajné.

Zvážte možnosť vytvorenia kruhového konvexného tlačidla v programe Illustrator. Nakreslite vektorový predmet vo forme kruhu s ľubovoľným farbou (obr. 9) a previesť ho na príkaz mriežky Objekt \u003d\u003e Vytvoriť gradient mesh (Object \u003d\u003e Vytvorenie gradientovej mriežky), zadanie štyroch riadkov a štyroch stĺpcov a v zozname Vzhľad (Zobraziť) výberom možnosti Do centra. Zlatý klinec (Podsvietenie) rovné 60 (obr. 10). Vyberte nástroj Priamy výber A kliknite v ľavom hornom rohu objektu výberom nodálnych bodov (obr. 11). Zmeňte farbu zodpovedajúcej bunky na bielom výberom v palete Vzorkovníkov. (Obr. 12).

Náradie Elipsa (Elipsa), nastavte myši myši na stredisko vytvorené pred týmto kruhom a podržaním tlačidiel Alt. a Posunúť., Natiahnite nový kruh na vrchole starého, aby sa ukázalo, že je staršie na 1-2 pixelov zo všetkých strán. Robte jej čiernu hranicu ( Mŕtvica.) 1-2 šírka pixelov a nalejte radiálny gradient smerom k červenej na bielu na bielu (obr. 13). Presuňte vytvorený vektorový objekt na 1-2 pixelov do pravej a dole, potom bez odstránenia výberu, kliknite na tlačidlo pravé tlačidlo myši a vyberte príkaz z kontextového menu. Usporiadať \u003d\u003e Odoslať späť (Triedenie \u003d\u003e poslať späť). V dôsledku toho sa vypne prázdne tlačidlo pre tlačidlo zobrazené na obr. štrnásť.

Spravidla existuje niekoľko podobných tlačidiel na ktorejkoľvek webovej stránke, ktorá sa líši, napríklad len smer šípky na nich, čo znamená smer pohybu pozdĺž lokality. Zvážte najjednoduchší prípad prítomnosti dvoch tlačidiel, z ktorých jeden, so šípkou nadol, bude to prejsť Ďalšia stranaA tlačidlo šípky hore je na predchádzajúcom. Ako zber šípky, vezmeme konvenčný trojuholník, ktorý je nakreslený nástrojom Polygón. (Mnohouholník), natretý čierny a pre väčší účinok tiež zdobené ako mriežkový objekt. Presuňte šípku na tlačidlo a nastavte polohu všetkých predmetov navzájom navzájom pomocou príslušných tlačidiel palety. Zarovnať. (Zarovnanie). Prvá z získaných tlačidiel je znázornená na obr. 15. Vrstva skopírujeme pomocou tlačidla výberom príkazu Duplicitná vrstva. Vrstvy.- V dôsledku toho získame dve identické vrstvy. Potom na kópiách vrstvy vyberte šípku a otočte ho 180 ° výberom príkazu z kontextového menu Transform \u003d\u003e Otočiť - Transformácia \u003d\u003e Otočiť. Získame rovnaké tlačidlo, ako je znázornené na obr. 16. Všimnite si, že je oveľa vhodnejšie uložiť všetky tie isté tlačidlá projektu na ukladanie v jednom súbore na rôznych vrstvách, ktoré sú uvedené v tomto prípade.

Teraz musíte uložiť optimalizované možnosti pre každý z tlačidiel. Spočiatku urobte neviditeľnú spodnú vrstvu - v tomto prípade sa uloží tlačidlo na hornej vrstve. Vyberte tím FILE \u003d\u003e Uložiť na webe (FILE \u003d\u003e Uložiť pre web), nakonfigurujte možnosti optimalizácie tlačidiel, napríklad, ako je znázornené na obr. 17 Kliknite na tlačidlo Uložiť. (Uložiť) a zadajte názov súboru. Tlačidlo uložené na konci je uvedené na obr. 18. Teraz vrátite viditeľnosť spodnou vrstvou a horná časť bude neviditeľná a rovnakým spôsobom, uložte druhé tlačidlo, pričom zadajte iný názov. Výsledok je uvedený na obr. devätnásť.

Teraz zostáva, aby sa ubezpečil, že tlačidlá sú celkom prijateľné pohľad na webovú stránku a umiestnite ich na ľubovoľnú stránku (obr. 20). V dôsledku toho sa v tomto príklade získali súbory Primer2.html v dvoch grafických obrázkoch v priečinku obrázkov. Primer2.).

Ak je to žiaduce, v procese optimalizácie sa tlačidlo je ľahko premeniť na rez. V tomto prípade po výbere príkazu FILE \u003d\u003e Uložiť na webe (File \u003d\u003e Uložiť pre web) a možnosti optimalizácie optimalizácie by mali byť vybraté z palety nástrojov nástrojov Slice Select.(Alokácia rezu) a dvakrát kliknite na obrázok, ktorý sa nakoniec automaticky vypne na sklíčko s poradovým číslom 1 (obr. 21). Dvakrát kliknite na myš, povedie k otvoreniu okna Možnosti rezu. (Možnosti kontroly), v ktorom bude potrebné určiť odkaz a v prípade potreby zmeňte názov strakov (obr. 22) a potom uložte optimalizovaný obrázok. Výsledkom tohto puzdra bude primér3.html súbory (obr. 23) a PRIMER3.GIF (PRIMER3 FOLDER).

Interaktívne prvky

Jedným zo spôsobov, ako revitalizovať stránku, je zavedenie konštrukčných prvkov, ktoré menia svoje vzhľad (alebo stav) v závislosti od správania myši alebo menej pravdepodobné, v prípade iných situácií: škálovanie, rolovanie, načítanie, výskyt chýb atď.

Medzi takýmito prvkami, prevrátenia dostali najväčšiu slávu (z angličtiny. Roll Over - Roll Over) - Prvky meniace sa vzhľad pod vplyvom myši. Príklady typických roloverov sú animované tlačidlá. Rývody sa často používajú a pri vytváraní iných navigačných prvkov stránky. V skutočnosti, akékoľvek prevrátenie nie je jedno, ale niekoľko (až štyri) obrázky, z ktorých každý zodpovedá konkrétnej udalosti. Hlavné udalosti sú obvyklé nasledovne: Normálny - normálny stav, cez - vznáša sa kurzora myši k prvku a nadol - stlačením ľavého tlačidla myši, keď sa vznášate kurzor. Teoreticky môžu byť udalosti zapojené ako kliknutie - uvoľnite ľavé tlačidlo myši po stlačení, nahor - po uvoľnení tlačidla, von - pri ukončení aktívnej zóny. V praxi sa však častejšie obmedzuje na zmeny prvku len na prvé tri alebo dokonca dve udalosti.

Klasický rolver

V klasickom porozumení je prevrátenie séria grafických snímok v GIF formáte a zodpovedajúci HTML kód, kvôli ktorým, v závislosti na správaní myši, jeden obrázok je nahradený iným v okne prehliadača.

Program Illustrator nie je určený na priame vytváranie roloverov v ich klasickom porozumení, ale môže pomôcť pri vývoji počiatočných prvkov pre nich. Myšlienkou v tomto prípade je, že musíte vytvoriť vrstvu s obrázkom zodpovedajúcim prvej udalosti. Potom vytvorte kópiu vrstvy a preveďte obrázok tak, aby zodpovedala druhej udalosti atď. Výsledný viacvrstvový obraz je exportovaný do súboru PSD s uchovávaním vrstiev, na základe ktorých je Rolover vytvorený v programe Ready Image. Plus použitie ilustračného programu, ako v mnohých iných prípadoch, je niekoľko zaujímavých príležitostí neprístupných v iných softvérv spojení s pohodlím transformačnej vektorovej grafiky.

Pokúsme sa vytvoriť prevrátenie vo forme farby na zmenu nápisu v závislosti od správania myši. Otvorte ilustrátor a vytvorte tvar vo forme zaobleného a čierneho obdĺžnika (obr. 24), urobte ju kópiu a umiestnite ho do voľnej časti obrazovky. Premeniť prvú kópiu obdĺžnika na mriežkový objekt s osvetlením v centre (tím Objekt \u003d\u003e Vytvoriť gradient mesh - Object \u003d\u003e Vytvorenie gradientovej mriežky), zadanie štyroch riadkov a desať stĺpcov (obr. 25). Aktivujte druhú kópiu obdĺžnika a nastavte gradient, naplňte ho takto, ako je znázornené na obr. . A potom vytlačte nápis na vrchole objektov. V pôvodnom formulári, nech je to biela farba, ktorá bude zodpovedať stavu normálu (obr. 27), a potom pri zmene zavedenia prevrátenia sa farba nápisu zmení, napríklad na zelenom - keď vy Pomocou myšacej marker (cez stav) a na modrej farbe - keď stlačíte tlačidlo myši (stav nadol).

Venujte pozornosť palete Vrstvy. - V tomto štádiu je v ňom len jediná vrstva. Urobte dve kópie tejto vrstvy použitím príkazu. Duplicitná vrstva. (Duplicitná vrstva) z ponuky palety Vrstvy.- Tri vrstvy sa stanú v palete (obr. 28). Potom v prvej kópii vrstvy zmeníte farbu nápisu na zelenej a v druhom - na modrej (obr. 29). Výsledkom je, že potrebný obrobok pre prevrátenie.

Exportujte vytvorený obrázok do formátu PSD s uchovávaním vrstiev pomocou príkazu FILE \u003d\u003e Export (FILE \u003d\u003e Export) a výberom modelu RGB (obr. 30). Otvorte vytvorený súbor PSD v programe imageReady (obrázok 31 a 32). Vytvorte rámy na základe vrstiev výberom príkazu Urobte rámce z vrstiev (Vytvorte rámce z vrstiev) z ponuky Palette Animácie.. Animačné okno sa pozrie na obr. 33. Zároveň v palete Prevrátenie Spočiatku bude vytvorený jeden jediný stav normálu.

Potom v okne Animácie.vyberte rám zodpovedajúci vyvolanému stavu, zatiaľ čo v palete Vrstvy. Automaticky vyniknúť vrstvu Kópia vrstvy 1 (Obr. 34). Choďte do palety Prevráteniea kliknite na tlačidlo Vytvoriť stav prevrátenia (Vytvorte stav prevrátenia) - Obr. 35, čo povedie k vzniku štátu Nad stavv palete Prevrátenie(Obr. 36). Podobne vytvoriť štát Nadol. Aktivovať stav Normálny V palete Prevrátenie A odstráňte v palete Animácie. Všetky rámy, ktoré musia zodpovedať štátu Normálny. V dôsledku toho pre každý štát ROLOVOVER v palete Animácie.bude len jeden rám (obr. 37, 38 a 39).

Obr. 38. Zobraziť obrázok, animačné okná a vrstvy a Rollovers palety pre nad stav stavu

Skontrolujte výsledok kliknutím na tlačidlo Náhľad v predvolenom prehliadači (Náhľad v prehliadači) na paneli s nástrojmi a zapnutie do okna prehliadača (obr. 40). Po ňom uložte súbor použitím príkazu. File \u003d\u003e Optimalizované uloženie (Súbor \u003d\u003e uložiť s optimalizáciou) a zadanie možnosti HTML a obrázky (* .html). Výsledkom je, že v tomto príklade sa získal súbor primer4.html a séria grafických obrázkov v priečinku obrázkov.

Obr. 40. Okno prehliadača s prvkom prevrátenia

SVG ROLOVIER

Populárny formát SVG (Škálovacia vektorová grafika - škálovateľná vektorová grafika), Vytvorené na základe štandardu XML vám tiež umožňuje získať rôzne interaktívne prvky, najmä Rolovers, len v praxi sa implementuje úplne inak. Stojí za zmienku, že vytvorenie interaktívnych SVG-prevrátení, na rozdiel od klasiky, keď je zodpovedajúci HTML kód úplne automaticky vygenerovaný, vyžaduje znalosti javiskový jazyk JavaScriptu a pochopenie základných princípov objektovo orientovaného programovania.

Špeciálna paleta je určená na prácu s objektmi SVG. SVG Interaktivitaktoré sa ľahko otvárajú pomocou tímu Okno \u003d\u003e interaktivita SVG (Okno \u003d\u003e svg interaktivity) - obr. 41.

Zvážte túto možnosť pre vytvorenie prevrátenia v príklade interaktívneho tlačidla, farba nápisu sa zmení z čiernej k modrej, keď prejdete myšou a znova previesť na čiernu, keď je myš mimo aktívnej zóny.

Vytvorte pravouhlé tlačidlo so zaoblenými hranami a vyzdvihnite vhodnú gradientovú výplň, napríklad, ako je znázornené na obr. 42. Nastavte priehľadnosť tlačidla v palete Transparentnosť (Transparentnosť) - V tomto príklade hodnota parametra Nepriehľadnosť (Opacity) nastavená na 50%. Urobte si kópiu tlačidiel, vyplňte ho tmavozeleným (Obr. 43) a potom ho previesť na príkaz objektu GRID Objekt \u003d\u003e Vytvoriť gradient mesh(Object \u003d\u003e Vytvorenie gradientovej mriežky), zadanie štyroch riadkov a desať stĺpcov av zozname Vzhľad(Zobraziť) výberom možnosti Do centra. (Do centra) a nastavenie hodnoty Zlatý klinec (Podsvietenie) rovné 100. Znížte nepriehľadnosť vrstvy s mriežkovým predmetom o áno 40% (obr. 44). Umiestnite objekt mriežky cez gradient a tlačidlo sa pripomína na obr. 45.

Obr. 44. Zapnutie kópie tlačidla na objekt mriežky

Vyplňte tlačidlo navrhovaného nápisu a upravte svoju pozíciu pomocou príslušných tlačidiel palety. Zarovnať. (Zarovnanie). Výsledný obraz bude obsahovať jednu vrstvu s tromi objektmi, ktoré sú na sebe na sebe (obr. 46). Plánované udalosti sa budú vzťahovať na textový objekt, takže pre pohodlie zmeňte jeho meno Text.Dvojitým kliknutím na objekt a zadaním nového mena. Podobne zmeňte názov vrstvy Vrstva 1 na vrstve (Obr. 47).

Spracovanie udalostí zahŕňa použitie postupov JavaScriptu, takže musíte pripojiť súbor s popisom týchto postupov. Nazýva sa udalosti.js a uložený na disk v vzorových súboroch Sample Art SVG priečinok pri inštalácii adobe Programy Ilustrátor. Ak chcete pripojiť súbor Events.js, použite príkaz Súbory Javascript. SVG Interaktivita (Obr. 48). Ďalej musíte kliknúť Pridať. (Pridať) a nájdite požadovaný súbor na pevnom disku. Keď sa v poli objaví jeho meno Url (Obr. 49), kliknite na tlačidlo hotový (Choď von).

Obr. 48. VYBRANIE TEAMU PRIHLÁSENIA JavaScriptu

Potom určte reakciu na udalosti myši pre objekt Text.. Vyberte textový objekt v poli Udalosť (Udalosti) palety SVG Interaktivita Vyberte udalosť onmousever eLEMCOLOR (EVT, "TEXT", "# 3333FF") - To znamená, že keď nájdete myš nad objektom Text.jeho farba sa zmení na modrú (obr. 50). Aby sa text textu vykonali po zadaní aktívnej zóny, farba textu sa zmenila na čiernu, bude potrebné vytvoriť inú udalosť. onmouset.- Vyberte ju v poli Udalosť (Udalosti) palety SVG Interaktivita. Potom zadajte text do riadku eLEMCOLOR (EVT, "TEXT", "# 000000")- To povedie k návratu čiernych farieb (obr. 51).

Obr. 51. Konečný pohľad na paletu interaktivity SVG pre text objektu

Uložte vytvorené prevrátenie ako príkaz SVG Súbor \u003d\u003e uložiť ako (Súbor \u003d\u003e Typ súboru formát SVG.A potom konfigurácia možnosti ukladania súborov SVG, ako je znázornené na obr. 52. Po uložení bude prijatá iba jeden súbor s rozšírením SVG, a nie dva, ako v prípade klasického prevrátenia, - v tomto prípade bol získaný súbor Primer5.svg (PRIMER5 FOLDER). Avšak, aby sa prevrátenie skutočne fungoval, je potrebné skopírovať udalosti.js súbor s popisom Javascriptu v priečinku s súborom SVG. Potom môžete skontrolovať výkonnosť prevrátenia - výsledok bude vyzerať, ako je znázornené na obr. 53.

SVG Animácia

Formát SVG možno použiť na prenos animácie. Pokúsme sa vytvoriť najjednoduchší animačný prvok (v tomto prípade to bude informácie o spoločnosti), ktorá sa zobrazí na obrazovke, keď prejdete myšou na zodpovedajúci grafický objekt a zmizne pri odstraňovaní myši z interaktívneho prvku.

Vytvorte približne takú sériu grafických a textových objektov, ako je znázornené na obr. 54. Premenujeme všetky vytvorené objekty, ktoré sú dôsledne kliknutím na názov ďalšieho objektu v palete. Vrstvy. a zavedenie požadovaného mena (Obr. 55). Upozorňujeme, že na obr. 56 objektov - Text1, text2, text3 a Cesta1 - Vždy bude viditeľná a všetky ostatné - len vtedy, keď prejdete myšou Text1.

Obr. 54. Originálny typ obrázku

Pripojte súbory.js súbor s popisom Javascript postupov použitím príkazu. Súbory Javascript. (Súbory javascript) z palety SVG InteraktivitaStlačením tlačidla Pridať.(Pridať) zadaním požadovaného súboru na pevnom disku a kliknutím na tlačidlo hotový (Choď von).

Určite reakciu na udalosti myši pre objekt Text1. Vyberte objekt Text., v teréne Udalosť (Udalosti) palety SVG Interaktivitavyberte udalosť onmousever A v nižšie uvedenom riadku zadajte text elemshow (EVT, "text4"); ELEMSHOW (EVT, "PATH2"). Ako výsledok, keď nájdete myš nad objektom Text1 sa stane viditeľnými objektmi Text4. a PATH2.. Všimnite si, že ak nastane udalosť, musí sa vykonať niekoľko akcií, potom musia byť označené prostredníctvom označenia ";". Potom podobnú prevádzku, považuje udalosť. onmouset.Zadaním textu na to, čo bude znamenať skrývanie objektov (obr. 57).

Uložte výsledok ako príkaz SVG Súbor \u003d\u003e uložiť ako (Súbor \u003d\u003e Uložiť ako) zadaním názvu súboru výberom v poli Typ súboru SVG formát a potom konfigurujete možnosť ukladania súborov SVG podľa obr. 58. Po uložení bude súbor Primer6.svg prijatý (priečinok PRIMER6). Nezabudnite kopírovať udalosti .js súbor do priečinka s týmto súborom. Ak sa potom spustíte POPs tento súborVýsledok uvidíte na obr. 59. To je takmer to, čo potrebujete. Jediná vec, ktorá nebola zahrnutá v našich plánoch, je počiatočný vzhľad objektov. Text.4 I. Cesta.2 Pri načítaní. Ak sa chcete zbaviť tohto nedostatku, vyberte oba údaje o objekte naraz a vytvorte akciu pre nich. eLEMHIDE (EVT, "TEXT4"); Elemhide (EVT, "PATH2") na udalosti onload. (Obr. 60). Znova uložte súbor a uistite sa, že teraz objekty Text4. a PATH2. viditeľné len pri vznášaní myši na objekte Text1.

GIF Animácia

Každá webová stránka je nemysliteľná bez webovej animácie, vrátane bez animácie GIF'OV. Jednou z možností ich vytvorenia je aplikovať aplikáciu Adobe ImageReady, ktorá vám umožní vytvoriť animáciu z vrstiev. V rovnakej dobe, môže byť samotný viacvrstvový obraz pripravený v rôznych aplikáciách, vrátane aplikácie Adobe Illustrator.

Veľmi ľahko vytvoriť animáciu na základe prvkov z palety Symboly. (Symboly) otvorené príkazom Okno \u003d\u003e symboly (Okno \u003d\u003e znaky) alebo z jedného zo zoznamov symbolov, ktoré možno otvoriť použitím príkazu Okno \u003d\u003e Knižnice symbolov (Okno \u003d\u003e Knižnice symbolov).

Napríklad sa pokúsime zvýšiť veľkosť akéhokoľvek objektu symbolov, kľúčové kroky objektu na zvýšenie objektu musia byť nastavené na samostatné vrstvy. Najprv jednoducho umiestnite objektovo-symboly jeden po druhom, a potom zvýšiť veľkosť každého nasledujúceho objektu, napríklad, ako je znázornené na obr. 61. V dôsledku toho v palete Vrstvy. Vytvorí sa jedna vrstva s rôznymi objektmi (obr. 62). Ak priamo exportujete tento obrázok do formátu PSD, nedá sa nič, pretože vrstva je jedna, a prirodzene, pri otváraní súboru PSD v programe imageReady bude len jedna vrstva. Preto je predbežne potrebné umiestniť predmety na rôzne vrstvy. Toto môže byť vykonané rôzne cesty - Najjednoduchší spôsob, ako zvýrazniť vrstvu Vrstva 1. V palete vrstiev a používajú tím Uvoľnenie do vrstvy. (Uvoľnenie vrstiev). Výsledkom bude pohyb každého objektu na vašej vrstve, ale všetky budú vnorené vo vrstve Vrstva 1.. Preto budete musieť manuálne pretiahnuť všetky investované vrstvy do hornej časti palety vrstiev, takže sú nad vrstvou Vrstva 1.a potom sa stal prázdnou vrstvou Vrstva 1. Odstráňte (obr. 63). Exportujte obrázok do formátu PSD aplikáciou príkazu FILE \u003d\u003e Export (Súbor \u003d\u003e export) so zariadeniami ako na obr. 64.

Nahrajte vytvorený súbor PSD v programe imageReady (obr. 65 a 66). Otvorte ponuku palety Animácie. Urobte rámce z vrstiev (Vytvorte rámy z vrstiev). V dôsledku toho sa vytvorí päť snímok, z ktorých každý sa zmestí do svojej vrstvy a okno palety Animácie. Pozrite sa na obr. 67.

Potom nastavte dĺžku trvania každej z vytvorených rámov - v tomto prípade, trvanie 0,2 s je inštalované pre všetky rámy. A potom uložte animáciu optimalizáciou pomocou príkazu. File \u003d\u003e Optimalizované uloženie (Súbor \u003d\u003e uložiť s optimalizáciou). Získaný výsledok sa môže podobať obr. 68.

Ešte vhodnejšie získať predvalky, ktoré sa dajú ľahko obrátiť na animáciu v image, používať funkcie Živé zmesi. Ilustrátorové programy. Takáto kombinovaná aplikácia ilustrátora a programov imageReady výrazne urýchľuje proces vytvárania animácií GIF.

Napríklad nakreslite dva ľubovoľné multifarebné predmety a potom zviazajte ich miešanie s vhodnými parametrami (obr. 69). Je nemožné priamo používať tento súbor na vytvorenie animácie, pretože obraz je na jednej vrstve (obr. 70). Preto bude vopred potrebovať každý prvok objektu Blend, ktorý sa má umiestniť na samostatnú vrstvu. Urobiť to v okne Vrstvy. Zvýraznite reťazec , aktivujte ponuku palety kliknutím na čiernu šípku v pravom hornom rohu a vyberte príkaz Uvoľnenie do poradia vrstiev (Transformácia na vrstvy postupne) (Obr. 71). Držať dole Posunúť., Zvýraznite vytvorené vrstvy a umiestnite ich nad vrstvu. Vrstva 1.a potom odstráňte vrstvu Vrstva 1., Presunutie do košíka - Výsledkom je, že paleta vrstiev bude mať rovnaký vzhľad ako na obr. 72.

Obr. 70. Počiatočný stav okna vrstiev

Export vytvorený súbor na príkaz príkazu PSD FILE \u003d\u003e Export (Súbor \u003d\u003e export). Otvorte vytvorený súbor PSD v programe imageReady (obr. 73). Všimnite si, že v okne vrstiev sa zobrazia všetky vrstvy vytvorené v programe (Obr. 74) a v okne Animácie. Bude tam jeden jediný rám.

Aktivujte ponuku Palette Animácie.Kliknutím na čiernu šípku v pravom hornom rohu palety a vyberte príkaz Urobte rámce z vrstiev (Vytvorte rámy z vrstiev) - V dôsledku toho sa v tomto príklade vytvorí päť snímok a vytvorí sa okno palety. Animácie. zobrazí pohľad v súlade s obr. 75. Zvýraznite všetky rámy pri podržaní kľúča. Posunúť.a nastavte vhodnú dobu trvania rámov - v tomto príklade pre každé rámy prijaté v rovnakom čase pri 0,2 s. Potom uložte súbor s optimalizáciou príkazu. File \u003d\u003e Optimalizované uloženie(Súbor \u003d\u003e uložiť s optimalizáciou) inštaláciou do zoznamu Typ súboru Možnosť Iba obrázky (* .gif). Animácia sa bude podobať ryžom. 76.

Nevyzerá to oveľa zaujímavejšie pohybovať sa, ale hladká zmena veľkosti miešaných objektov. Môžete napríklad použiť prechod Blend Transition. V tomto prípade, po vytvorení samostatných vrstiev pre každý prechodový prvok, umiestnite všetky objekty na seba pomocou tlačidiel Horizontálne zarovnanie(Zarovnanie vzhľadom na stredové horizontálne) a Vertikálne stredové stredisko. (Zarovnanie vzhľadom na stredovú vertikálnu) paletu Zarovnať. (Obr. 77).

Exportujte vytvorený súbor na formát PSD ( FILE \u003d\u003e Export- FILE \u003d\u003e Export) a otvorte vytvorený súbor PSD v programe imageReady (Obr. 78). Vytvoriť na základe vrstiev animačných rámov ( Urobte rámce z vrstiev - Vytvorte rámy z vrstiev) a vyberte pre nich vhodné trvanie (obr. 79). A potom, aby sa animácia viac veľkolepá, skopírujte existujúce rámy, ale v opačnom poradí tak, že obraz sa prvýkrát zvýši, a potom sa znížil, a tak v kruhu (obr. 80). Potom uložte súbor optimalizácie ( File \u003d\u003e Optimalizované uloženie- súbor \u003d\u003e uložiť s optimalizáciou). Výsledná animácia je znázornená na obr. 81.

Obr. 80. Stav bodu animačného okna po duplikácii rámov

Obr. 81. Dokončená animácia

Dnes nie sme celkom obyčajné lekcia Adobe. Ilustrátor. Pretože tentoraz nebudeme robiť statický obraz, ale najviac skutočnú animáciu. Predstavte si, že sa ukáže použitie Adobe. Ilustrátor Môžete tiež kresliť karikatúry :)

A na to nebudeme potrebovať nič. Príslušná organizácia vrstiev a vývoz konečnej práce vo formáte SWF, kde sa každá vrstva prevedie na rám animácie. V dnešnej lekcii kreslíme animáciu odpočítavania v retro štýle. Na výstupe je film Flash s týmto odpočítavaním.

Prvá vec, ktorú treba urobiť, je nakresliť všetky potrebné položky pre budúcu animáciu. K tomu v samostatnom dokumente urobili dve pozície filmového filmu, kruh pre referenciu, ktorý je narezaný na samostatné sektory, textúry a vertikálne škrabanie na pridanie účinku staroveku, ako aj všetky čísla a nápisy.

Keď sú všetky časti našej karikatúry pripravení, môžete začať vytvoriť samotnú animáciu. Pre pohodlie je lepšie robiť v novom dokumente. Zároveň sa vrstvy zohrávajú úlohu animačných rámov. A v prvej vrstve stačí skopírovať rám filmu. Umiestnite ho uprostred pracovného priestoru.

Teraz vytvorte druhú vrstvu a skopírujte do neho rámec filmových obrázkov, v ktorom sú otvory okolo okrajov vykonané so zmenou. Musí byť tiež umiestnený v centre.

Z týchto dvoch vrstiev môžete už dostať animáciu pohybujúceho sa filmom. Ale neskôr budeme potrebovať oveľa viac vrstiev. Zvýraznite preto prvé dve vrstvy, prejdite na možnosti panelu a vytvorte kópiu vrstvy.

Podobne musíme hromadiť 12 vrstiev s rámami filmu, pýtať sa jej pohybu.

Teraz máme celú banda vrstiev a všetky z nich sú viditeľné. V tom zmysle, že horné vrstvy sú blokované nižšou, čo nie je úplne vhodné pre prácu. Preto môžete vypnúť niektoré vrstvy kliknutím na ikonu s okom vľavo od názvu vrstvy. Ak chcete vypnúť alebo povoliť všetky vrstvy naraz, udržujte kláves ALT stlačený, keď kliknete na ikonu Glazik. Vrátane a vypnutie vrstiev, môžete presne vidieť, čo sa nachádza v určitom ráme našej budúcej animácie. A teraz, pridať svetlo jitter na film, ktorý sa pohybuje, musíte dať prijaté rámy trochu v rôznych smeroch. Ak to chcete urobiť, zapnite len vrstvu, s ktorou budete pracovať tento momentA potom posuňte rám na pároch pixelov v ľubovoľnom smere.

Keď ste šli všetky vrstvy a pridali malú zmenu, môžete začať vytvoriť animáciu pohybujúceho kruhu. Ak to chcete urobiť, skopírujte kruh pozostávajúci z sektorov, z dokumentu s karikatúra náhradných dielov a položte ho na prvú vrstvu cez rám filmu.

Ak vyberiete výber z kruhu, bude to vyzerať ako jedno celé číslo. To je to, čo potrebujeme.

Ale pretože sa skladá zo samostatných sektorov, môžete, meniť ich farbu, veľmi rýchlo a ľahko vytvoriť animáciu. Ak to chcete urobiť, skopírujte tento kruh v druhej vrstve a urobte prvý sektor ľahší. Pamätáte si, že film sa triaje počas jazdy, takže nie je potrebné umiestniť kruh presne v strede rámu. Umiestnite ho na oko.

Podobne musíte skopírovať kruh na každú ďalšiu vrstvu, zatiaľ čo natieranie štetcom do jedného sektora viac ako predchádzajúci čas. Všetky tieto 12 vrstiev tvoria animáciu pohybu filmu s plniacim kruhom.

Ďalej musíte do našich vrstiev pridať textúru. Zapnite prvú vrstvu a skopírujte textúru zo zdrojového súboru s náhradnými dielmi.

Potom zase zapnite nasledujúce vrstvy a skopírujte tam rovnakú textúru. Takže sa pozrela na každom rámci, jednoducho ho zapnite na uhol 90 stupňov. Ako ste už uhádli, musíme pridať textúru do všetkých 12 snímok.

Ak ste už unavení z zvládania, potom vám môžem dodať - zostáva veľmi málo. Najťažšie už za sebou. Zostáva pridať vertikálne škrabance a takmer všetko. Ak to chcete urobiť, opäť skopírujte originálne poškriabanie a dajte ho do ľubovoľného miesta v niekoľkých vrstvách. V mojom prípade sa škrabance objavia len v dvoch vrstvách.

Teraz, keď je pripravený hlavný cyklus s animáciou filmu, zostáva pridať čísla. Vzhľadom k tomu, že pochádza z 3 na 1 plus ďalšie slovo ísť !!!, potom potrebujeme ešte viac vrstiev. Nie 12, ale až 48. Na to musíte urobiť tri ďalšie kópie hotových vrstiev s animáciou filmu.

A potom je všetko jednoduché. Zapneme prvú vrstvu a vložíme tam tri čísla.

Potom musíte toto číslo skopírovať v nasledujúcich vrstvách, kým nie je dokončená animácia kruhu. Keď sa dostanete na ďalšiu kópiu vrstvy, kde sa kruh úplne úplne vyplní, musíte dať dve čísla dva. Podobne skopírujte číslo jedna na požadované vrstvy. A keď sa dostanete na konečné vrstvy, navrhnuté tak, aby ste sa prihlásili go !!!, len vyberte kruh pred kopírovaním nápisu v požadovanej vrstve.

Na to s animáciou. Hlavná vec tu nie je zmätená. Môžete dať vrstvy niektoré pohodlné názvy, ale bol som nejako lenivý :) A aj keď dokončíte prácu, nezabudnite vrátiť všetky vrstvy kliknutím na ikonu zasklenia.

V okne s nastaveniami exportu nezabudnite inštalovať export ako: AI vrstvy na rámy SWF. Je to táto možnosť, ktorá zmení ilustrátorové vrstvy do animačných rámov. Ďalej kliknite na tlačidlo Rozšírené.

Rozšírené nastavenia sa otvoria. Tu musíte nastaviť frekvenciu rámovej frekvencie. Mám 12 rámov za sekundu. Za cyklickú animáciu je zodpovedná za cyklickú animáciu. Vďaka nej sa video bude hrať v kruhu. A možnosť objednania vrstvy: zdola nahor Prehrá ilustrátorové vrstvy zdola nahor v paneli. Len aby sme postavili našu animáciu.

Na výstupe dostaneme flash film s našou animáciou.

Teraz vidíte, že jednoduché animácie robiť v aplikácii Adobe Illustrator nie je tak ťažké, ako sa zdá na prvý pohľad.

Ak chcete vytvoriť dlhé valce alebo interaktívne aplikácie, je ešte lepšie použiť Adobe Flash. buď iní flash editory. Napríklad táto mačka som urobila v starej makromédii blesku, ktorý vykopal v práci.

Naposledy, HTML5 a CSS3 sa používa viac a častejšie na vytvorenie animácie. Tento kód je podporovaný moderné prehliadače A nevyžaduje použitie flash prehrávača.

Roman aka dacascas. Najmä pre blog

Prihlásiť sa k nášmu newsletteru tak, aby nenechali ujsť nič nové:

Dnes nemáme presne obvyklú lekciu Adobe Illustrator. Pretože tentoraz nebudeme robiť statický obraz, ale najviac skutočnú animáciu. Predstavte si, že sa ukázalo, že môžete tiež čerpať karikatúry s Adobe Illustrator :)

Teraz vytvorte druhú vrstvu a skopírujte do neho rámec filmových obrázkov, v ktorom sú otvory okolo okrajov vykonané so zmenou. Musí byť tiež umiestnený v centre.

Podobne musíme hromadiť 12 vrstiev s rámami filmu, pýtať sa jej pohybu.

Teraz máme celú banda vrstiev a všetky z nich sú viditeľné. V tom zmysle, že horné vrstvy sú blokované nižšou, čo nie je úplne vhodné pre prácu. Preto môžete vypnúť niektoré vrstvy kliknutím na ikonu s okom vľavo od názvu vrstvy. Ak chcete vypnúť alebo povoliť všetky vrstvy naraz, udržujte kláves ALT stlačený, keď kliknete na ikonu Glazik. Vrátane a vypnutie vrstiev, môžete presne vidieť, čo sa nachádza v určitom ráme našej budúcej animácie. A teraz, pridať svetlo jitter na film, ktorý sa pohybuje, musíte dať prijaté rámy trochu v rôznych smeroch. Ak to chcete urobiť, zapnite len vrstvu, s ktorou budete pracovať v súčasnosti, a potom posuňte rám na pár pixelov na ľubovoľnú stranu.

Ak vyberiete výber z kruhu, bude to vyzerať ako jedno celé číslo. To je to, čo potrebujeme.

Ďalej musíte do našich vrstiev pridať textúru. Zapnite prvú vrstvu a skopírujte textúru zo zdrojového súboru s náhradnými dielmi.

A potom je všetko jednoduché. Zapneme prvú vrstvu a vložíme tam tri čísla.

Na výstupe dostaneme flash film s našou animáciou.

Teraz vidíte, že jednoduché animácie robiť v aplikácii Adobe Illustrator nie je tak ťažké, ako sa zdá na prvý pohľad.

Ale na vytvorenie dlhých valcov alebo interaktívnych aplikácií je ešte lepšie používať Adobe Flash alebo iné flash editory. Napríklad táto mačka som urobila v starej makromédii blesku, ktorý vykopal v práci.

Naposledy, HTML5 a CSS3 sa používa viac a častejšie na vytvorenie animácie. Tento kód je podporovaný modernými prehliadačmi a nevyžaduje použitie flash prehrávača.

Roman aka dacascas. Najmä pre ilustrátor microM Blog