ako vytvoriť animáciu gif v aplikácii illustrator. Ako vytvoriť animáciu v aplikácii Adobe Illustrator. Exportujte súbory SWF z aplikácie Illustrator
Dnes tu máme niečo nezvyčajné lekcia Adobe Ilustrátor. Pretože tentokrát neurobíme statický obrázok, ale skutočnú animáciu. Predstavte si, že to dopadne s pomocou Adobe Ilustrátor vie kresliť aj karikatúry :)
A na to nepotrebujeme vôbec nič. Správna organizácia vrstiev a export výsledného diela do formátu swf, kde je každá vrstva prevedená na rámček animácie. V dnešnom návode si nakreslíme animáciu odpočítavania v štýle retro filmu. Výstupom by malo byť flash video s rovnakým odpočítavaním.
Prvá vec, ktorú musíte urobiť, je nakresliť všetky potrebné prvky pre budúcu animáciu. Aby som to urobil, v samostatnom dokumente som urobil dve polohy filmového rámčeka, kruh pre referenciu, ktorý je rozrezaný na samostatné sektory, textúru a zvislý škrabanec na pridanie efektu staroveku, ako aj všetky čísla a nápisy.
Keď sú všetky časti našej karikatúry pripravené, môžeme začať vytvárať samotnú animáciu. Pre pohodlie je lepšie to urobiť v novom dokumente. V tomto prípade budú naše vrstvy hrať úlohu animačných snímok. A v úplne prvej vrstve stačí skopírovať políčko filmu. Umiestnite ho do stredu pracovnej oblasti.
Teraz vytvorte druhú vrstvu a skopírujte do nej rám filmu, v ktorom sú otvory pozdĺž okrajov vytvorené s odsadením. Musí byť tiež umiestnený v strede.
Z týchto dvoch vrstiev už môžete získať animáciu pohyblivého filmu. Neskôr však budeme potrebovať oveľa viac vrstiev. Vyberte teda prvé dve vrstvy, prejdite na možnosti panela a vytvorte kópiu vrstiev.
Podobným spôsobom potrebujeme nazhromaždiť 12 vrstiev filmových políčok, ktoré definujú jeho pohyb.
Teraz máme veľa vrstiev a všetky sú viditeľné. V tom zmysle, že horné vrstvy blokujú spodné, čo nie je úplne vhodné na prácu. Niektoré vrstvy teda môžete vypnúť kliknutím na ikonu s okom naľavo od názvu vrstvy. Ak chcete vypnúť alebo zapnúť všetky vrstvy naraz, podržte stlačený kláves Alt a súčasne kliknite na ikonu oka. Zapnutím a vypnutím vrstiev môžete presne vidieť, čo sa nachádza v konkrétnom rámci našej budúcej animácie. A teraz, aby sme do pohybu filmu pridali mierne chvenie, musíme výsledné snímky mierne posunúť v rôznych smeroch. Ak to chcete urobiť, zapnite iba vrstvu, s ktorou budete pracovať. tento moment a potom posuňte rám o niekoľko pixelov v ľubovoľnom smere.
Keď prejdete všetkými vrstvami a pridáte malý posun, môžete začať vytvárať animáciu pohybujúceho sa kruhu. Za týmto účelom skopírujte kruh pozostávajúci zo sektorov z dokumentu s časťami karikatúry a umiestnite ho na prvú vrstvu na hornú časť filmového rámčeka.
Ak zrušíte výber kruhu, bude vyzerať ako jeden celok. Presne toto potrebujeme.
Ale keďže sa skladá z jednotlivých sektorov, animáciu vytvoríte veľmi rýchlo a jednoducho zmenou ich farby. Ak to chcete urobiť, skopírujte tento kruh do druhej vrstvy a urobte ľahší prvý sektor. Pamätáte si, že náš film sa pri pohybe trasie, takže nie je vôbec potrebné umiestniť kruh presne do stredu rámu. Umiestnite ho podľa oka.
Podobným spôsobom je potrebné skopírovať kruh do každej ďalšej vrstvy, pričom natriete o jeden sektor viac svetlejšou farbou ako predtým. Týchto 12 vrstiev spolu tvorí animáciu filmu pohybujúceho sa plniacim kruhom.
Ďalej musíme pridať textúru do našich vrstiev. Zapnite prvú vrstvu a skopírujte textúru z pôvodného súboru s náhradnými dielmi.
Potom postupne zapínajte ďalšie vrstvy a skopírujte tam rovnakú textúru. Aby to vyzeralo v každom ráme inak, jednoducho ho otočte o 90 stupňov. Ako ste možno uhádli, do všetkých 12 snímok musíme pridať textúru.
Ak ste už dosť unavení z kopírovania, tak vás môžem potešiť - zostáva už veľmi málo. Najťažšia časť je za nami. Ostáva už len pridať zvislé škrabance a je to takmer všetko. Aby sme to urobili, znova skopírujeme pôvodný škrabanec a umiestnime ho na ľubovoľné miesto v niekoľkých vrstvách. V mojom prípade sa škrabance objavujú len v dvoch vrstvách.
Teraz, keď je hotový hlavný cyklus s filmovou animáciou, ostáva už len doplniť čísla. Keďže naše odpočítavanie ide od 3 do 1 plus slovo Go!!!, potrebujeme ešte viac vrstiev. Nie 12, ale až 48. K tomu je potrebné urobiť ešte tri kópie pripravených vrstiev s filmovou animáciou.
A potom je všetko jednoduché. Zapnite úplne prvú vrstvu a vložte tam číslo tri.
Potom musíte tento obrázok skopírovať do ďalších vrstiev, kým sa animácia kruhu neskončí. Keď sa dostanete na ďalšiu kópiu vrstiev, kde bude kruh opäť úplne vyplnený, musíte zadať číslo dva. Rovnakým spôsobom skopírujte číslo jeden do požadovaných vrstiev. A keď sa dostanete k finálnym vrstvám pre nápis Go!!!, pred kopírovaním nápisu do požadovanej vrstvy kruh jednoducho vymažte.
To je k animácii všetko. Tu hlavnou vecou nie je zmiasť sa. Môžete dať vrstvám nejaké vhodné názvy, ale bola som lenivá :) A tiež, keď dokončíte prácu, nezabudnite všetky vrstvy znova zapnúť kliknutím na ikonu oka.
V okne nastavení exportu nezabudnite nastaviť Exportovať ako: Vrstvy AI na Rámce SWF. Práve táto možnosť zmení vrstvy Illustratoru na snímky animácie. Ďalej kliknite na tlačidlo Rozšírené.
Otvorí dodatočné nastavenia. Tu musíte nastaviť Frame Rate. Mám 12 snímok za sekundu. Za cyklickú animáciu je zodpovedné zaškrtávacie políčko Looping. Vďaka nej sa bude video prehrávať v kruhu. A možnosť Layer Order: Bottom Up reprodukuje vrstvy ilustrátora na paneli zdola nahor. Presne takto sme postavili našu animáciu.
Výstupom je flash video s našou animáciou.
Teraz vidíte, čo dokáže jednoduchá animácia Adobe Illustrator nie také ťažké, ako sa na prvý pohľad zdá.
Ale vytvárať dlhé videá resp interaktívne aplikácie ešte lepšie použiť Adobe Flash alebo iné flash editory. Napríklad túto mačku som vyrobil v starom Macromedia Flash, ktorý som vykopal pri svojej práci.
V poslednej dobe sa HTML5 a CSS3 čoraz viac používajú na vytváranie animácií. Tento kód je podporovaný modernými prehliadačmi a nevyžaduje použitie flash prehrávača.
Roman aka dacascas špeciálne pre blog
Prihláste sa na odber noviniek, aby vám nič nové neuniklo:
V poslednej dobe sú veľmi populárne rôzne druhy animácií grafiky SVG (Scalable Vector Graphics) na webových stránkach a aplikáciách. Je to spôsobené tým, že všetko najnovšie prehliadače už podporujú tento formát. Tu sú informácie o podpore prehliadača pre SVG.
Tento článok pojednáva o najjednoduchšom príklade vektorovej animácie SVG pomocou ľahkého doplnku Jquery Lazy Line Painter.
ZdrojNa dokončenie a úplné pochopenie tejto úlohy sú potrebné základné znalosti HTML, CSS, JQuery, ale nie sú potrebné, ak chcete iba animovať SVG) Začnime!
A toto sú kroky, ktoré musíme dodržať:
1. Vytvorte správnu štruktúru súborov
Pomôže nám s tým služba Initializr, kde potrebujeme zvoliť parametre ako na obrázku nižšie.
- Classic H5BP (HTML5 Boiler Plate)
- Žiadna šablóna
- Len HTML5 Shiv
- Minifikované
- IE triedy
- Chrome Frame
- Potom kliknite na Stiahnuť!
2. Stiahnite si a pripojte plugin
Keďže initializr prichádza s najnovšou knižnicou Jquery, z archívu, ktorý si musíme stiahnuť z repozitára projektu Lazy Line Painter, potrebujeme do nášho projektu preniesť len 2 súbory. Prvým je ‘jquery.lazylinepainter-1.1.min.js’ (verzia pluginu sa môže líšiť) nachádza sa v koreňovom adresári výsledného priečinka. Druhým je example/js/vendor/raphael-min.js.
Tieto 2 súbory sú umiestnené v priečinku js. A spojíme ich s naším index.html pred main.js takto:
3. Nakreslite skvelý obrysový obrázok v aplikácii Adobe Illustrator
Môžete napríklad použiť ikony v prílohe.
4. Preveďte náš obrázok na Lazy Line Converter
Stačí pretiahnuť svoju ikonu do okna na obrázku nižšie.
Hrúbku, farbu obrysu a rýchlosť animácie je možné zmeniť v samotnom kóde, ktorý sa objaví po konverzii!
5. Vložte výsledný kód do main.js
Teraz jednoducho vložíme výsledný kód do prázdneho súboru main.js
Možnosti:
strokeWidth — hrúbka obrysu
strokeColor — farba obrysu
Môžete tiež zmeniť rýchlosť kreslenia každého vektora zmenou hodnôt parametra trvania (predvolené 600)
6. Pridajte trochu CSS podľa chuti
Odstránenie odseku z index.html
Ahoj svet! Toto je HTML5 Boilerplate.
A namiesto neho vložíme blok, v ktorom bude prebiehať naša animácia
potom do súboru main.css pridáme nejaké CSS, aby to vyzeralo krajšie:
Text ( pozadie:#F3B71C; ) #ikony ( pozícia: pevná; hore: 50 %; vľavo: 50 %; okraj: -300px 0 0 -400px; )
uložiť všetky súbory.
Teraz stačí otvoriť index.html v modernom prehliadači a vychutnať si efekt.
P.S. pri štartovaní lokálny stroj Spustenie animácie môže byť oneskorené o niekoľko sekúnd.
Optimalizácia webovej grafiky
Grafické informácie sa prenáša oveľa pomalšie ako text a čas načítania obrázkov je úmerný ich veľkosti grafické súbory. Preto rýchle načítanie webových stránok vyžaduje malú veľkosť vložených grafické obrázky, čo sa dosiahne ich optimalizáciou. Optimalizáciou obrazu sa rozumie jeho transformácia, ktorá zabezpečuje minimálnu veľkosť súboru pri zachovaní v tomto prípade požadovanej kvality obrazu, čo sa dosahuje predovšetkým znížením počtu farieb v grafických obrázkoch, použitím komprimovaných a špeciálnych formátov súborov a optimalizáciou parametrov kompresie pre jednotlivé obrázky. úlomky.
Illustrator má vstavané nástroje na optimalizáciu obrázkov, vďaka ktorým je proces optimalizácie rýchly a efektívny pomocou rôznych metód náhľadu. Náhľad poskytuje pomerne presnú predstavu o tom, ako bude optimalizovaný obrázok vyzerať v reálnom čase, čo vám pomôže vyhodnotiť výsledok optimalizácie a úspešne vybrať správne nastavenia. A môžete optimalizovať ako obrázky vytvorené priamo v Illustratore, tak aj iné, napríklad fotografie, ktoré majú byť umiestnené na webe.
Parametre optimalizácie sa nastavujú v okne Uložiť pre web, ktoré sa vyvolá rovnomenným príkazom z ponuky Súbor. Program vám ponúka použitie jedného zo štyroch režimov náhľadu, ale dva sú najvhodnejšie na posúdenie kvality optimalizácie:
- 2-Up (dve možnosti) súčasné prezeranie pôvodného a optimalizovaného obrazu v súlade so špecifikovanými nastaveniami (obr. 1);
- 4-Up (štyri možnosti) V tomto režime je výrez rozdelený na štyri okná (obr. 2) na zobrazenie pôvodného obrázka a troch verzií optimalizovaného: prvá verzia sa vytvorí na základe nastavených hodnôt optimalizácie a ďalšie dve sú variáciami aktuálnych nastavení optimalizácie.
Oba režimy umožňujú výrazne ušetriť čas pri hľadaní najlepšej možnosti optimalizácie, keďže odpadá ukladanie obrázkov s rôznym nastavením optimalizácie a ich následné vizuálne porovnanie. Pri rôznych možnostiach pripojenia je navyše možné hodnotiť nielen kvalitu optimalizovaného obrazu, ale aj jeho veľkosť a čas načítania. Pre porovnanie je najpohodlnejší režim 4-Up (štyri možnosti), ktorý umožňuje vizuálne vyhodnotiť vplyv kompresie alebo zmenšenia palety na kvalitu obrazu a jeho veľkosť a v konečnom dôsledku určiť najlepšie parametre optimalizácie.
Illustrator vám umožňuje optimalizovať webovú grafiku nielen vo formátoch GIF, JPG, PNG-8 a PNG-24, ale aj vo formáte SWF a SVG. Indexované obrázky s malým počtom farieb sa uložia vo formáte GIF. Formát JPG sa používa na ukladanie plnofarebných obrázkov a obrázkov v odtieňoch sivej, fotografií a farebne bohatej grafiky, ako sú prechodové výplne. Pre plnofarebné obrázky s priehľadnými plochami sa používa formát PNG, ktorý umožňuje ukladať indexované aj plnofarebné obrázky, pričom vo formáte PNG-8 je maximálny možný počet farieb optimalizovaného obrázku 256 a v vo formáte PNG-24 môže mať obrázok milióny farieb, a preto vyzerá formát JPEG. Rozdiel medzi PNG-24 a JPEG je v tom, že metóda kompresie použitá na optimalizáciu obrázkov vo formáte PNG-24 nevedie k strate kvality, ale v dôsledku toho sa veľkosť súboru zväčšuje. Formáty SVG a SWF kombinujú grafiku, text a interaktívne komponenty a možno ich tiež optimalizovať.
Uvažujme konkrétny príklad optimalizácia obrazu. Povedzme, že logo webovej stránky bolo vyvinuté v aplikácii Illustrator (obr. 3), pôvodne uložené vo formáte AI. Pokus o okamžitú optimalizáciu pre web nepovedie k ničomu dobrému, keďže v tomto prípade dôjde k automatickému orezaniu obrázka, ktorý nebude brať do úvahy skutočnú polohu výsledného nápisu v dôsledku deformácie (obr. 4 a 5).
Skúsme preto logo exportovať do formátu PSD príkazom Súbor=>Exportovať (Súbor=>Exportovať) veľkosť vytvoreného obrázku bude 143 KB. Otvorte výsledný súbor PSD a použite príkaz Súbor=>Uložiť pre web. Vzhľadom na obmedzený počet farieb zahrnutých v obrázku je v tomto prípade optimálny formát GIF, ktorého konkrétne nastavenia je potrebné rozhodnúť. Experimentovaním s nastaveniami sa môžete uistiť najlepšia kvalita poskytuje predvolený algoritmus kompresie programu, selektívny. Čo sa týka vyhladzovania, vzhľadom na prítomnosť gradientovej výplne je lepšie zvoliť algoritmus s generovaním šumu Noise (obr. 6). Veľkosť výsledného optimalizačného súboru bude 6,729 KB (obr. 7), pričom zostane zachovaná priehľadnosť pozadia, čo si ľahko overíte uložením obrázka vo formáte GIF spolu s HTML súborom (obr. 8). Výsledkom je, že v tomto príklade boli súbory emblem.html a emblem.gif získané v priečinku Primer1.
Nevyhnutným špecifickým prvkom dizajnu akejkoľvek webovej stránky sú grafické ovládacie tlačidlá. Je jednoducho nemožné si predstaviť stránku bez nich. Kreslenie tlačidiel sa dnes stalo špeciálnym žánrom a Illustrator vám umožňuje vytvárať tie najzložitejšie možnosti. Napríklad tlačidlá navrhnuté ako sieťované objekty a/alebo s prekrývajúcimi sa maskami vyzerajú oveľa pôsobivejšie ako bežné.
Zvážte možnosť vytvorenia okrúhleho konvexného tlačidla v aplikácii Illustrator. Nakreslite vektorový objekt vo forme kruhu vyplneného ľubovoľnou farbou (obr. 9) a preveďte ho na sieť príkazom Object => Create Gradient Mesh (Object => Create a gradient mesh) s určením štyroch riadkov a štyroch a v zozname Vzhľad vyberte možnosť Do stredu zvýraznenia rovnú 60 (obr. 10). Vyberte nástroj Priamy výber a kliknite do ľavého horného rohu objektu, pričom vyberte kotviace body, ktoré sa tam nachádzajú (obr. 11). Zmeňte farbu príslušnej bunky na bielu jej výberom v palete Vzorkovníky (obr. 12).
Vezmite nástroj Elipsa, umiestnite značku myši do stredu predtým vytvoreného kruhu a podržte klávesy Alt a Shift natiahnite nový kruh cez starý tak, aby bol o 1-2 pixely väčší ako starý. strany. Dajte mu čierny okraj (Stroke) široký 1-2 pixely a vyplňte ho radiálnym gradientom v smere od červenej k bielej (obr. 13). Potiahnite vytvorený vektorový objekt o 1-2 pixely doprava a nadol, potom bez odstránenia výberu kliknite naň pravým tlačidlom myši a von obsahové menu vyberte Usporiadať=>Odoslať späť. Výsledkom bude prázdne miesto pre tlačidlo znázornené na obr. 14.
Spravidla sa na každej webovej stránke nachádza niekoľko tlačidiel rovnakého typu, ktoré sa líšia napríklad iba smerom šípok na nich nakreslených, ktoré označujú smer pohybu po stránke. Uvažujme o najjednoduchšom prípade dvoch tlačidiel, z ktorých jedno so šípkou nadol bude znamenať prechod na ďalšiu stránku a tlačidlo so šípkou nahor bude znamenať prechod na predchádzajúcu. Ako šablónu šípky si vezmime pravidelný trojuholník nakreslený nástrojom Polygon, natretý čiernou farbou a pre väčší efekt navrhnutý aj ako sieťový objekt. Presuňte šípku na tlačidlo a pomocou príslušných tlačidiel v palete Zarovnať upravte polohu všetkých objektov voči sebe navzájom. Prvé z výsledných tlačidiel je znázornené na obr. 15. Vytvorme kópiu vrstvy tlačidlom výberom príkazu Duplicate Layer Layers, vo výsledku dostaneme dve rovnaké vrstvy. Potom vyberte šípku na kópii vrstvy a otočte ju o 180° výberom príkazu Transform=>Rotate Transformation=>Rotate z kontextového menu. Dostaneme rovnaké tlačidlo ako na obr. 16. Upozorňujeme, že je oveľa pohodlnejšie uložiť všetky rovnaké typy tlačidiel pre jeden projekt do jedného súboru na rôznych vrstvách, čo je demonštrované v tomto prípade.
Teraz musíte uložiť optimalizované verzie každého tlačidla. Najprv zneviditeľnite spodnú vrstvu, v tomto prípade tlačidlo na hornej vrstve zostane zachované. Vyberte príkaz Súbor=>Uložiť pre web, nakonfigurujte parametre optimalizácie tlačidiel, napríklad ako je znázornené na obr. 17, kliknite na tlačidlo Uložiť a zadajte názov súboru. Nakoniec uložené tlačidlo je znázornené na obr. 18. Teraz vráťte viditeľnosť spodnej vrstve, vrchnú vrstvu urobte neviditeľnou a rovnakým spôsobom uložte druhé tlačidlo, ktoré mu dá iný názov. Výsledok je znázornený na obr. 19.
Teraz už len ostáva uistiť sa, že tlačidlá vyzerajú na webovej stránke celkom prijateľne a umiestniť ich na vlastnú stránku (obr. 20). Výsledkom je, že v tomto príklade sa v priečinku obrázkov (priečinok Primer2) získal súbor Primer2.html a dva grafické obrázky.
V prípade potreby je počas procesu optimalizácie jednoduché zmeniť tlačidlo na plátok. V tomto prípade by ste po výbere príkazu Súbor=>Uložiť pre web (Súbor=>Uložiť pre web) a nastavení parametrov optimalizácie mali z palety nástrojov vybrať nástroj Slice Select a dvakrát kliknúť na obrázok, čím sa nakoniec sa automaticky zmení na plátok s poradovým číslom 1 (obr. 21). Opätovným dvojitým kliknutím sa otvorí okno Možnosti rezu, v ktorom budete musieť zadať prepojenie a voliteľne zmeniť názov rezu (obrázok 22) a potom uložiť optimalizovaný obrázok. Výsledkom budú v tomto prípade súbory Primer3.html (obr. 23) a Primer3.gif (priečinok Primer3).
Jedným zo spôsobov, ako oživiť stránku, je zaviesť dizajnové prvky, ktoré ju menia vzhľad(alebo stavu) v závislosti od správania myši alebo menej často v prípade akýchkoľvek iných situácií: zmena mierky, posúvanie, načítanie, chyby atď.
Z takýchto prvkov sú najznámejšie rollovery (z anglického roll over roll over, turn over) prvky meniace vzhľad pod vplyvom myši. Príkladom typických rolloverov sú animované tlačidlá. Rollovery sa často používajú pri vytváraní iných prvkov navigácie na webe. V skutočnosti nie je žiadny rollover jeden, ale niekoľko (až štyri) obrázkov, z ktorých každý zodpovedá konkrétnej udalosti. Za hlavné udalosti sa považujú: Normálne normálny stav, Nad umiestnením kurzora myši na prvok a stlačením ľavého tlačidla myši nadol pri umiestnení kurzora na prvok. Teoreticky môžu ísť o udalosti ako Kliknutie uvoľnenie ľavého tlačidla myši po kliknutí, Hore po uvoľnení tlačidla, Out pri opustení aktívnej zóny. V praxi sa však často obmedzujú na zmenu prvku len pre prvé tri alebo dokonca dve udalosti.
Klasické rolloveryRollover je v klasickom zmysle séria grafických obrázkov vo formáte GIF a príslušného HTML kódu, vďaka čomu v závislosti od správania myši jeden obrázok nahrádza druhý v okne prehliadača.
Illustrator nie je určený na priame vytváranie rolloverov v klasickom zmysle, ale môže pomôcť pri vývoji počiatočných prvkov pre ne. V tomto prípade ide o vytvorenie vrstvy s obrázkom zodpovedajúcim prvej udalosti. Potom vytvorte kópiu vrstvy a transformujte obrázok tak, aby zodpovedal druhej udalosti atď. Výsledný viacvrstvový obrázok sa exportuje do PSD súboru so zachovanými vrstvami, na základe čoho sa v programe Image Ready vytvorí rollover. Výhodou používania programu Illustrator, ako v mnohých iných prípadoch, je množstvo jeho zaujímavých funkcií, ktoré nie sú dostupné v iných softvér v kombinácii s pohodlím transformácie vektorovej grafiky.
Skúsme vytvoriť rollover vo forme nápisu, ktorý mení farbu v závislosti od správania myši. Otvorte Illustrator a vytvorte tvar v podobe zaobleného obdĺžnika vyplneného čiernou farbou (obr. 24), vytvorte jeho kópiu a umiestnite do voľnej časti obrazovky. Skonvertujte prvú kópiu obdĺžnika na sieťový objekt so zvýraznením v strede (príkaz Object=>Create Gradient Mesh Object=>Create Gradient Mesh), pričom určte štyri riadky a desať stĺpcov (obr. 25). Aktivujte druhú kópiu obdĺžnika a nastavte ju na gradientovú výplň približne tak, ako je to znázornené na obr. 26. Prekryte objekt s prechodom na sieťový objekt, znížte nepriehľadnosť objektu s prechodom na približne 80 % a veľkosť približne o 1 pixel, aby ste prípadne simulovali efekt nárazu. A potom vytlačte nápis na vrch predmetov. V pôvodnej podobe nech má bielu farbu, ktorá bude zodpovedať Normálnemu stavu (obr. 27) a potom pri zmene stavu rolloveru sa farba nápisu zmení napríklad na zelenú, keď sa značka myšou sa podrží nad ním (stav Over) a po stlačení tlačidla myši zmodrie (stav nadol).
Venujte pozornosť palete Vrstvy, v tejto fáze je v nej iba jedna vrstva. Vytvorte dve kópie tejto vrstvy príkazom Duplikovať vrstvu z ponuky palety Vrstvy, v palete budú tri vrstvy (obr. 28). Potom v prvej kópii vrstvy zmeňte farbu nápisu na zelenú a v druhej kópii na modrú (obr. 29). V dôsledku toho sa získa potrebný polotovar na prevrátenie.
Vytvorený obrázok exportujte do formátu PSD so zachovaním vrstiev pomocou príkazu File=>Export a zvolením farebného modelu RGB (obr. 30). Otvorte vytvorený súbor PSD v programe ImageReady (obr. 31 a 32). Vytvorte snímky založené na vrstvách výberom príkazu Vytvoriť snímky z vrstiev z ponuky palety Animácia. Okno Animácie bude vyzerať ako na obr. 33. V tomto prípade sa v palete Rolloverov na začiatku vytvorí jeden Normálny stav.
Potom v okne Animation vyberte snímku zodpovedajúcu vyvolanému stavu a v palete Vrstvy sa automaticky vyberie vrstva Layer 1 Copy (obr. 34). Prejdite na paletu Rollovers a kliknite na tlačidlo Create Rollover state (Create a rollover state) obr. 35, čo spôsobí, že sa v palete Rollovers objaví stav Over State (obr. 36). Rovnakým spôsobom vytvorte stav Down. Aktivujte stav Normálny v palete Rollovers a odstráňte všetky snímky v palete Animácia okrem toho, ktorý by mal zodpovedať stavu Normálny. Výsledkom je, že pre každý stav rolovania bude v palete Animácia iba jedna snímka (obr. 37, 38 a 39).
Ryža. 38. Pohľad na obrázok, okno Animácia a palety Vrstvy a Rollovery pre stav Over State
Výsledok skontrolujte kliknutím na tlačidlo Náhľad v predvolenom prehliadači na paneli s nástrojmi a prechodom do okna prehliadača (Obrázok 40). Potom súbor uložte pomocou príkazu Súbor=>Uložiť optimalizované a špecifikujte možnosť HTML a obrázky (*.html). Výsledkom je, že v tomto príklade sa v priečinku obrázkov získal súbor Primer4.html a séria grafických obrázkov.
Ryža. 40. Okno prehliadača s prvkom Rollover
SVG rolloveryČoraz populárnejší formát SVG (Scalable Vector Graphics). Vektorová grafika), vytvorený na základe štandardu XML, vám tiež umožňuje prijímať rôzne interaktívne prvky, najmä rollovery, ale v praxi je to implementované úplne inak. Stojí za zmienku, že vytváranie interaktívnych rolloverov SVG na rozdiel od klasických, kedy sa zodpovedajúci HTML kód generuje úplne automaticky, vyžaduje znalosť jazyka JavaScript a pochopenie základných princípov objektovo orientovaného programovania.
Na prácu s objektmi SVG existuje špeciálna paleta SVG Interaktivita, ktorú je možné jednoducho otvoriť príkazom Okno => Interaktivita SVG (Window => Interaktivita SVG) obr. 41.
Zoberme si túto možnosť na vytvorenie rolloveru pomocou príkladu interaktívneho tlačidla, ktorého farba nápisu sa zmení z čiernej na modrú, keď podržíte myš, a znova sa zmení na čiernu, keď myš opustí aktívnu zónu.
Vytvorte obdĺžnikové tlačidlo so zaoblenými okrajmi a vyberte preň vhodnú prechodovú výplň, napríklad ako je znázornené na obr. 42. Upravte priehľadnosť tlačidla v palete Priehľadnosť.V tomto príklade je hodnota Opacity nastavená na 50%. Vytvorte kópiu tlačidla, vyplňte ho tmavozelenou farbou (obrázok 43) a potom ho konvertujte na sieťový objekt pomocou príkazu Object => Create Gradient Mesh s uvedením štyroch riadkov a desiatich stĺpcov a v zozname Appearance (Zobraziť) výberom možnosti To Center a nastavením hodnoty Highlight na 100. Znížte krytie vrstvy so sieťovým objektom na cca 40 % (obr. 44). Umiestnite sieťovaný objekt na vrchol s prechodom a tlačidlo sa bude podobať tomu, ktorý je znázornený na obr. 45.
Ryža. 44. Premeňte kópiu tlačidla na sieťový objekt
Doplňte tlačidlo zamýšľaným nápisom a upravte jeho polohu pomocou príslušných tlačidiel v palete Zarovnať. Výsledný obrázok bude obsahovať jednu vrstvu s tromi objektmi nad sebou (obr. 46). Naplánované udalosti sa budú vzťahovať na textový objekt, takže pre pohodlie zmeňte jeho názov na Text dvojitým kliknutím na objekt a zadaním nového názvu. Podobne zmeňte názov vrstvy z Layer 1 na Layer (obr. 47).
Spracovanie udalostí zahŕňa použitie procedúr JavaScriptu, takže musíte zahrnúť súbor popisujúci tieto procedúry. Volá sa Events.js a po inštalácii sa uloží na disk do priečinka Sample Files\Sample Art\SVG\SVG programy Adobe Ilustrátor. Na pripojenie súboru Events.js použite príkaz JavaScript Files SVG Interactivity (obr. 48). Ďalej musíte kliknúť na tlačidlo Pridať a nájsť požadovaný súbor na pevnom disku. Keď sa jeho meno objaví v poli URL (obrázok 49), kliknite na tlačidlo Hotovo.
Ryža. 48. Výber príkazu Súbory JavaScript
Ďalej je potrebné definovať odozvu na udalosti myši pre objekt Text. Vyberte objekt Text, v poli Udalosť palety Interaktivita SVG vyberte udalosť onmouseover elemColor(evt, "Text", "#3333FF"), čo znamená, že keď umiestnite kurzor myši na objekt Text, jeho farba sa zmení na modrá (obr. 50). Aby sa farba textu zmenila na čiernu, keď myš opustí aktívnu oblasť, budete musieť vytvoriť ďalšiu udalosť onmouseout a vyberte ju v poli Udalosť palety SVG Interaktivita. Potom do akčného riadku zadajte text elemColor(evt, "Text", "#000000"), čím sa farba vráti na čiernu (obrázok 51).
Ryža. 51. Konečný vzhľad palety SVG Interaktivita pre objekt Text
Vytvorený rollover uložte ako súbor SVG príkazom Súbor=>Uložiť ako (Súbor=>Typ súboru Formát SVG a následne nastavenie možností uloženia súboru SVG podľa obr. 52. Po uložení dostanete iba jeden jeden súbor s príponou SVG a nie dva, ako pri klasickom rollovere, v tomto prípade bol prijatý súbor Primer5.svg (priečinok Primer5), aby však rollover skutočne fungoval, musíte dodatočne skopírovať súbor Events.js z popisu procedúr JavaScriptu. Potom môžete skontrolovať funkčnosť rolloveru a výsledok bude vyzerať ako na obr.
Formát SVG možno použiť aj na sprostredkovanie animácie. Skúsme si vytvoriť jednoduchý animovaný prvok (v tomto prípade to budú informácie o firme), ktorý sa zobrazí na obrazovke po prejdení myšou nad príslušný grafický objekt a zmizne po odobratí myši z interaktívneho prvku.
Vytvorme približne nasledujúci rad grafických a textových objektov, ako je znázornené na obr. 54. Premenujme všetky vytvorené objekty pohodlným spôsobom postupným kliknutím na názov ďalšieho objektu v palete Vrstvy a zadaním požadované meno(obr. 55). Upozorňujeme, že tie, ktoré sú zvýraznené na obr. 56 objektov Text1, Text2, Text3 a Path1 budú vždy viditeľné a všetky ostatné iba vtedy, keď podržíte kurzor myši nad objektom Text1.
Ryža. 54. Pôvodný pohľad na obrázok
Zahrňte súbor Events.js popisujúci procedúry JavaScript pomocou príkazu Súbory JavaScriptu z palety Interaktivita SVG, kliknutím na tlačidlo Pridať, ukážkou na požadovaný súbor na pevnom disku a kliknutím na tlačidlo Hotovo.
Definujte odozvu na udalosti myši pre objekt Text1. Vyberte objekt Text, v poli Event palety SVG Interactivity vyberte udalosť onmouseover a do riadku nižšie zadajte text elemShow(evt, "Text4"); elemShow(evt, "Cesta2") . Výsledkom je, že keď je kurzor myši nad objektom Text1, objekty Text4 a Path2 sa stanú viditeľnými. Upozorňujeme, že ak je potrebné vykonať niekoľko akcií, keď nastane udalosť, musia byť špecifikované pomocou znaku „;“. Potom vykonajte podobnú operáciu pre udalosť onmouseout a zadajte jej text, ktorý bude znamenať skrytie objektov (obr. 57).
Výsledok uložte ako súbor SVG pomocou príkazu Súbor=>Uložiť ako, pričom zadajte názov súboru, v poli Typ súboru vyberte formát SVG a potom nastavte možnosti uloženia súboru SVG podľa obr. 58. Po uložení bude prijatý súbor Primer6.svg (priečinok Primer6). Nezabudnite skopírovať súbor Events.js do priečinka s týmto súborom. Ak po tomto spustíte coz tento súbor, potom uvidíte výsledok znázornený na obr. 59. Toto je takmer to, čo potrebujete. Jediná vec, ktorá nebola zahrnutá v našich plánoch, bol počiatočný vzhľad objektov Text 4 a Cesta 2 pri načítaní. Aby ste sa zbavili tohto nedostatku, vyberte obe dáta objektu naraz a vytvorte pre ne akciu elemHide(evt, "Text4"); elemHide(evt, "Cesta2") pri udalosti onload (obr. 60). Uložte súbor znova a uistite sa, že objekty Text4 a Path2 sú teraz viditeľné iba vtedy, keď umiestnite kurzor myši nad objekt Text1.
Akákoľvek webová stránka je nemysliteľná bez webovej animácie, vrátane animovaných gifov. Jednou z možností ich vytvorenia je použitie aplikácie Adobe ImageReady, ktorá umožňuje okrem iného vytvárať animácie z vrstiev. V tomto prípade môže byť samotný viacvrstvový obrázok pripravený v rôznych aplikáciách, vrátane Adobe Illustrator.
Je veľmi jednoduché vytvoriť animáciu založenú na prvkoch z palety Symboly, otvorenej príkazom Window=>Symbols, alebo z jednej z knižníc symbolov, ktoré je možné otvoriť pomocou príkazu Window=>Symbol Libraries. ).
Pokúsime sa napríklad zväčšiť veľkosť ľubovoľného objektu symbolu, kľúčové fázy procesu zväčšovania objektu je potrebné nastaviť na samostatné vrstvy. Najprv jednoducho umiestnite objekty symbolov jeden nad druhý a potom zväčšite veľkosť každého nasledujúceho objektu, napríklad ako je znázornené na obr. 61. V dôsledku toho sa v palete Vrstvy vytvorí jedna vrstva s mnohými objektmi (obr. 62). Ak tento obrázok exportujete priamo do formátu PSD, nedá to nič, keďže je tam len jedna vrstva a prirodzene, keď otvoríte súbor PSD v programe ImageReady, bude tam tiež len jedna vrstva. Preto musíte najprv umiestniť objekty do rôznych vrstiev. Dá sa to urobiť rôzne cesty Najjednoduchší spôsob je najprv vybrať vrstvu 1 v palete Vrstvy a použiť príkaz Uvoľniť do vrstvy. Výsledkom bude, že každý z objektov sa presunie do vlastnej vrstvy, ale všetky budú vnorené do vrstvy 1. Preto budete musieť všetky vnorené vrstvy ručne pretiahnuť do hornej časti palety Vrstvy tak, aby boli nad vrstvou Vrstva 1, a potom jednoducho odstrániť teraz prázdnu vrstvu Vrstva 1 (obr. 63). Exportujte obrázok do formátu PSD pomocou príkazu File=>Export s nastaveniami ako na obr. 64.
Načítajte vytvorený súbor PSD v programe ImageReady (obr. 65 a 66). Otvorte ponuku palety Animácia Vytvoriť snímky z vrstiev. V dôsledku toho sa vytvorí päť snímok, z ktorých každý bude zodpovedať vlastnej vrstve a okno palety Animácia bude vyzerať ako na obr. 67.
Potom nastavte trvanie každého vytvoreného rámca, v tomto prípade je trvanie pre všetky rámce nastavené na 0,2 s. A následne animáciu s optimalizáciou uložte pomocou príkazu Súbor=>Uložiť optimalizované (Súbor=>Uložiť s optimalizáciou). Výsledný výsledok môže pripomínať Obr. 68.
Je ešte pohodlnejšie získať prázdne miesta, ktoré sa potom dajú ľahko previesť na animáciu v ImageReady, aby ste mohli použiť funkcie Live Blends aplikácie Illustrator. Toto kombinované použitie Illustratora a ImageReady výrazne urýchľuje proces vytvárania GIF animácií.
Napríklad nakreslite dva ľubovoľné viacfarebné objekty a potom ich spojte pomocou prepojovacieho prepojenia s príslušnými parametrami (obr. 69). Tento súbor nie je možné použiť priamo na vytvorenie animácie, keďže obrázok je v jednej vrstve (obr. 70). Preto budete musieť najskôr umiestniť každý prvok zmiešaného objektu na samostatnú vrstvu. Za týmto účelom v okne Vrstvy označíme čiaru, kliknutím na čiernu šípku v jej pravom hornom rohu aktivujeme ponuku palety a zvolíme príkaz Uvoľniť postupnosť vrstiev (obr. 71). Podržte stlačený kláves Shift, vyberte vytvorené vrstvy a umiestnite ich nad vrstvu Vrstva 1 a potom odstráňte samotnú vrstvu Vrstva 1, čím ju presuniete do koša, paleta vrstiev bude mať rovnakú podobu ako na obr. 72.
Ryža. 70. Počiatočný stav Vrstvy okien
Exportujte vytvorený súbor do formátu PSD pomocou príkazu File=>Export. Otvorte vytvorený súbor PSD v programe ImageReady (obr. 73). Upozorňujeme, že všetky vrstvy vytvorené v Illustratore sa zobrazia v okne vrstiev (obr. 74) a v okne Animácia bude zatiaľ iba jeden rámec.
Aktivujte ponuku palety Animácia kliknutím na čiernu šípku v pravom hornom rohu palety a vyberte príkaz Make Frames From Layers. Výsledkom je, že v tomto príklade sa vytvorí päť snímok a okno palety Animation prevezme forme podľa obr. 75. Vyberte všetky snímky, pričom držte stlačený kláves Shift a nastavte príslušné trvanie snímky. V tomto príklade sa pre každú snímku použije rovnaký čas 0,2 s. Potom súbor s optimalizáciou uložte pomocou príkazu Súbor=>Uložiť optimalizované (Súbor=>Uložiť s optimalizáciou), pričom v zozname Typ súboru nastavte možnosť Iba obrázky (*.gif). Animácia bude pripomínať Obr. 76.
Čo vyzerá oveľa zaujímavejšie, nie je pohyb, ale plynulá zmena veľkosti prelínaných objektov. Môžete napríklad použiť už vytvorený prechod prelínania. V tomto prípade po vytvorení samostatných vrstiev pre každý prechodový prvok prelínania umiestnite všetky objekty na seba pomocou tlačidiel Horizontal Align Center a Vertical Align Center palety Align (obr. 77) .
Vyexportujte vytvorený súbor do formátu PSD (File=>Export File=>Export) a vytvorený PSD súbor otvorte v programe ImageReady (obr. 78). Vytvorte snímky animácie na základe vrstiev (Make Frames From Layers Create frames from layers) a vyberte pre ne vhodné trvanie (obr. 79). A potom, aby bola animácia efektívnejšia, skopírujte existujúce snímky, ale v opačnom poradí, aby sa obraz najprv zväčšil a potom zmenšil atď. do kruhu (obr. 80). Potom uložte optimalizačný súbor (Súbor=>Uložiť optimalizovaný súbor=>Uložiť s optimalizáciou). Výsledná animácia je znázornená na obr. 81.
Ryža. 80. Stav okna Animácia po duplikovaní snímok
Ryža. 81. Hotová animácia
Priehľadný GIF v aplikácii Adobe Illustrator sa vytvorí nasledovne. Prejdite do ponuky Súbor > Uložiť pre web a zariadenia (Alt+Ctrl+Shift+S). V okne, ktoré sa otvorí, musíte v poli Optimalizovaný formát súboru najskôr prejsť na kartu Veľkosť obrázka. Faktom je, že v predvolenom nastavení je celá stránka zahrnutá do okna optimalizácie a zvyčajne to nie je potrebné. Preto na karte Veľkosť obrázka zrušte začiarknutie políčka Clip to Artboard a kliknite na tlačidlo Použiť.
Potom vyberte GIF zo zoznamu výberu formátu a začiarknite políčko Priehľadnosť.
Potom určíme, ktoré farby budú priehľadné. Všetky farby prítomné na obrázku sú obsiahnuté na karte Tabuľka farieb a sú zobrazené ako farebné štvorce. Na paneli s nástrojmi na ľavej strane okna vyberte nástroj kvapkadlo.
Existujú dva spôsoby, ako definovať farby. Najjednoduchším spôsobom je určiť farbu kvapkadlom priamo na obrázku - potom sa farba na tabuľke farieb zvýrazní tmavým ťahom. Ak presne viete, aká farba by mala byť priehľadná, môžete ju vybrať priamo v tabuľke farieb kliknutím na príslušný farebný štvorec. V prvom aj druhom prípade, ak potrebujete vybrať niekoľko farieb, musíte pracovať so stlačeným klávesom Shift (alebo Ctrl). Po výbere farby je potrebné dať programu pokyn, aby bola priehľadná. Ak to chcete urobiť, kliknite na ikonu Mapovať vybrané farby na priehľadné. Na obrázku je toto tlačidlo zakrúžkované a červená farba je nastavená na transparentnú. Na obrázku sa objaví priehľadná oblasť a štvorec na tabuľke farieb zmení svoj vzhľad - časť sa stane bielym trojuholníkom. Ak chcete zrušiť vybratú farbu, musíte ju vybrať v tabuľke farieb a potom znova kliknúť na ikonu Mapovať vybrané farby na priehľadnú.
Niekoľko slov o spôsobe nastavenia transparentnosti. Je zodpovedný za rozbaľovaciu ponuku Zadať algoritmus rozkladu transparentnosti, v ruštine - Algoritmus na simuláciu priehľadnosti (obr. nižšie). K dispozícii sú štyri možnosti: rozklad bez priehľadnosti, rozklad priehľadnosti difúzie, rozklad priehľadnosti vzoru a rozklad priehľadnosti šumu. V režime difúzneho algoritmu sa aktivuje posuvník Množstvo, ktorý vám umožní zmeniť hodnotu difúzie. Čo aplikovať v praxi? V závislosti od účelu a obrazu. Túto možnosť nepoužívam a vždy ju nechávam na predvolenom nastavení – No Transparency Dither.
Kliknite na Uložiť - priehľadný GIF je pripravený. Práca bola vykonaná vo verzii Adobe Illustrator CS4 (v.14), ale všetky akcie a klávesové skratky sú relevantné aj pre staršiu verziu CS3 (v.13).
Importovať a jednoduchá animácia Ahoj. Dnes sa pozrieme na jednoduchú animáciu v After Effects.
Zdroje: Adobe Illustrator CC
Adobe After Effects CC
Začnime sa učiť kreslením v Illustratore.
Poďme kresliť
1) Nakreslite žltý obdĺžnik ako pozadie
Obrázok 1 - Obdĺžnik
2) Nakreslite kruh a vyplňte ho gradientom
Poďme trochu popracovať na kruhu:
- odstráňte spodný bod na obryse, získame oblúk;
- nakreslite priamku, zatvorte spodnú časť oblúka a získame polkruh
Obrázok 2 - 1) nakreslite kruh; 2) gradient; 3) vymazať bod
3) Nakreslite obdĺžnik a vytvorte jeho kópiu
- jeden šedý obdĺžnik;
- ďalší obdĺžnik je tmavosivý
4) Nakreslite trojuholník z hviezdičky nastavením počtu lúčov na 3
Obrázok 3 - 1) priame svetlo; 2) pravouhlé tmavé; 3) trojuholník
5) Nakreslite mačku pomocou pera a jednoduchých tvarov 
Obrázok 4 - 1) hlava; 2) krk; 3) telo; 4) noha; 5) chvost
A teraz ten najdôležitejší moment
Rozdeľme obrázky do vrstiev (čo bude animované, je na samostatnej vrstve) takto: 
Obrázok 5 - všetky obrázky (červená značka dôležitých vrstiev)
To je všetko, teraz ušetríme.
Pozrime sa na nastavenia ukladania
Obrázok 6 - Uložiť
A teraz ďalšia etapa. Zatvorte Adobe Illustrator a otvorte After Effects.
Importovať do After Effects
Súbor - Import - Súbor - vyberte náš uložený súbor Illustrator.
Vyberme si import vrstiev z Illustratora; ak vložíme zábery, dostaneme obrázok so zlúčenými vrstvami, ale nepotrebujeme to.
Obrázok 7 - Importovať ako kompozíciu
To je všetko, dovezené.
Teraz sa pozrime, čo máme. Dvakrát kliknite na kompozíciu, aby sa otvorila a videli sme vrstvy (ak je všetko urobené správne, bude niekoľko vrstiev). Chápeme to, pozri obrázok
Obrázok 8 - Otvorená kompozícia
A dnes sme tu pre animáciu.
Animácia v After Effects
Nastavte bod otáčania v hornej časti šípky pomocou nástroja Pan Behind Tool (skratka - Y). Len vezmeme bod a presunieme ho tam, kde je to potrebné. Vo výsledku to bude vyzerať takto.. 
Obrázok 9 - Nástroj Pan a Vrstvy
To je všetko, teraz prejdime k vrstvám pre animáciu.
Budeme potrebovať vrstvu Arrow a Head_cat.
Začnime šípkou.
Rozbalíme zoznam, nájdeme ho a klikneme na hodiny. Takže nastavíme prvý bod na nula sekundy. Animácia bude trvať celkovo 2 sekundy.
Toto sú nastavenia, ktoré musíte vykonať (spolu dáme 3 body):
| Po druhé | 0 | 1 | 2 |
| +66 | - 70 | +66 |
Obrázok 10 - Šípka otáčania
Teraz poďme animovať hlavu mačky.
Rozbaľme head_cat a nájdime Position .
Tu budú 4 bodky.
Zmení sa iba posledná súradnica bez ovplyvnenia ostatných.
| Po druhé | 0.1 | 0.17 | 1.12 | 2.0 |
| pozícia | 689.3 | 729.3 | 729.3 | 689.3 |
Obrázok 11 - Poloha hlavy
Takže princíp animácie bol takýto. Šípka sa kýva zo strany na stranu, akonáhle sa priblíži k mačiatku, vtiahne hlavu dovnútra, chvíľu zotrvá v tejto polohe a potom ju vráti na svoje miesto.
Záverečná fáza
Výroba
Z vašej práce musíte vytvoriť hotový produkt.
Prejdite do ponuky - Pridať do frontu vykreslenia
Otvorí sa panel Render a vo výstupnom module (dve kliknutia) vyberte výstupný formát. Vzal som *.mov
Obrázok 12 - Vykreslenie
Kliknite na tlačidlo RENDER a získajte výsledok (len nezabudnite zadať cestu).
To je všetko.
