Jak vytvářet animace pro ilustrátory a skřítky. Vytváření animací v aplikaci Illustrator

Ahoj všichni! Dnes se pokusím popsat schopnosti programu Adobe illustrator srovnáním se schopnostmi flush. Toto nebude globální analýza programu podle kostí, ale spíše popis některých zajímavých čipů, které jsem v tomto programu objevil. Shromažďoval jsem informace kousek po kousku, jak jsem je studoval, abych dal vše do jednoho příspěvku. Hned musím přiznat, že nejsem jen super zkušený ilustrátor posledních šest měsíců Používám to při kreslení (předtím jsem vše bleskově namaloval). Mnoho lidí si stěžuje, že ilustrátor je komplikovaný, ne vždy intuitivně jasný. Do jisté míry souhlasím, že po blesku je tento program obtížný. Ale hlavní věcí zde není přestat, ale pokračovat ve studiu. A po několika týdnech se objevila myšlenka, jak bych bez něj mohl být dříve!

Co se mi na ilustrátorovi líbilo a co jsem pro sebe našel, to ve Flashi není.
1. Začnu tím nejjednodušším, ale zároveň nezbytným. Zkuste bleskově uspořádat předměty do kruhu. Byl dříve Nástroj Deco, ale bylo odstraněno, zjevně považováno za zbytečné. Rozhodli jsme se, že bude zábavnější to udělat s pery. Illustrator má tuto funkci: Efekt - Zkreslení a transformace - Transformace.

Vše je rychlé a jednoduché, hodnoty (vzdálenost mezi objekty, počet kopií) si nastavujeme sami v nastavení.

2. Zig-zag

Ještě jednodušší, ale přesto užitečná věc. Zdálo by se to maličkost, ale bleskově musíte kreslit ručně, u ilustrátora jde o vteřiny.

3. Deformace předmětů (Warp)

Bleskově nic takového neexistuje. V níže uvedeném příkladu jsem ukázal pouze 2 způsoby, jak deformovat jednoduché tvary (Efekt - Warp - Arc / Fish). Ve skutečnosti jich je 15. Nejnovější verze programy.

4. Automatické zaoblení rohů (kulaté rohy)

Můžete to provést ručně: na grafickém objektu se při výběru v rohu (u všech očí) objeví bílý bod a symbol zaoblené čáry. Táhneme myší, přizpůsobíme vašemu vkusu.

Ale to platí pouze pro tvary, s tužkou trochu jinak - použijte efekt zaoblení ( Efekt - Stylizace - Kulaté rohy). Na výstupu dostaneme stejný výsledek.

5. Zdrsnění (hrubnutí)

Efekt se aplikuje na jednoduché formy (Efekt - zkreslení a transformace - zdrsnění). Na výstupu dostaneme něco, co připomíná 3D model low-poly. Podle mě cool :) A hlavně - velmi jednoduché.

6. Pucker & Bloat(Tahání a nadýmání)
Příklad na obrázku níže:

7. Rozšíření formuláře (Offset Path)

Flash má funkci Expand Fill; na rozdíl od ilustrátora nefunguje s tužkovými linkami vůbec.

8. Štětce (Art Brush, Pattern Brush, Scatter Brush)
Podívejte se na obrázek níže s příklady:

9. Kartáč na textury

Illustrator také obsahuje spoustu štětců na textury, o kterých jsem psal a jak se v nich objevily nová verze spláchnout -. Bylo zaznamenáno, že používání štětců v Adobe Animate je extrémně pomalé. A je to:(

10. Nejsem si jistý, jestli je to přímočarý trik, ale chci se zaměřit na štětec s vtipným názvem. KapkaŠtětec... Umístěný v sadě nástrojů, velmi pěkný štětec k použití. Má spoustu nastavení, líbí se mi víc než obvykle. Je těžké slovy vysvětlit jeho výhody, je lepší to jednou vyzkoušet.

10. Rozdělit na mřížku

Užitečná je také funkce Rozdělit na mřížku (Object-Path-Split to Grid), která vám umožňuje vyjmout tvar na stejné segmenty. Co nám to připomíná? Přesně tak - okna jsou ve výškové budově. Pokud jde o mě, skvělá věc pro kreslení, například městských scenérií;)

Ještě jeden užitečný nástroj představeno v Illustratoru, pravděpodobně od jeho prvního vydání. Lze s ním vytvářet například textury dřeva:

12. Přesunout (vpravo - Transformace - Přesunout)

Posunutí objektu o zadanou vzdálenost. Pokud je to žádoucí, můžete okamžitě vytvořit kopii, která bude umístěna v požadované vzdálenosti od vybraného objektu vodorovně / nebo svisle. Dřívější verze Flash měla plugin, který ano tuto funkci... Bohužel si nepamatuji jeho název.

V aplikaci Illustrator je velmi výhodné vytvářet bezproblémové vzory ( Object-Pattern-Make). Pamatuji si, jak jsem byl bleskově sofistikovaný v blesku s tvorbou. V ilustrátorské verzi CC 2015 je vše automatizované a spousta nastavení pomůže formovat vzor v desítkách variací, když máte po ruce jen několik grafických prvků. Ve více dřívější verze všechny programy musely být prováděny ručně, stejně jako dosud.

(Poznámka - ze vzoru lze vytvořit vektorově upravitelný objekt pomocí funkce analýzy ( Objekt - Rozbalit vzhled).

14. Objektová mozaika

Vytvoření palety barev na základě existujícího obrázku. Importujeme obrázek, který se nám líbí, do nemocného (Otevřít) Objekt - Vytvořte objektovou mozaiku... V nastavení určujeme četnost dělení na výšku a šířku.

A na výstupu dostaneme:

15. Blend

Používá se k vytváření přechodů. Můžete vytvářet přechody krok za krokem, jako například na obrázku. Neříkám, že ho používám často, ale někomu může přijít vhod. Myslím, že to lze použít k vytváření jednoduchých obrázků na pozadí.

Nástroj lze také použít ke klonování objektů. Umístěte dva objekty ve vzdálenosti od sebe a použijte Možnosti prolnutí, zvolte počet kroků (počet klonovaných objektů).

16. Nástroj pro vytváření tvaru nástroje. Velmi praktická věc pro práci s primitivy. Bleskově mi to přišlo méně pohodlné.

Podržením Alt a kliknutím na vybrané segmenty - segmenty odstraníte. Pokud přetáhneme myš přes několik vybraných oblastí - připojení.

Doplněk je nástroj, který pomáhá automaticky vyjmout, připojit se atd. zvýrazněné formy. Pokud jde o mě, není to příliš výhodné, používám to častěji StavětTvarNářadí.

(kreslicí plátna)

18. Vlastní panel nástrojů

Možnost vytvořit si vlastní panel nástrojů, zahodit nepotřebné a vybrat pouze ty, které používáte.

Ve Flashi, kreslicí plátna, jmenovitě scény ( Scéna 1,2,3 ..) jsou umístěny samostatně a je třeba mezi nimi přepínat (Shift + F2). V Illustratoru je můžete všechny postavit před oči. Je vhodné, když vytvoříte několik verzí stejného výkresu, takže všechny možnosti budete mít před očima pro srovnání.

19. Izometrie s grafickými styly

A poslední je vytvořit izometrii bez použití na 1 kliknutí (přesněji řečeno na 3 kliknutí, protože máme 3 strany;) pomocí grafických stylů ( Grafické styly). Jak se to dělá, příště podepíšu.

Bleskem ilustrátora u blesku je možnost uložit předmět na symbol a stejně snadno lze tento symbol přenést na blesk (otevřete soubor .ai ve formátu flash, Importovat - importovat do fáze).
Symbol v Illustratoru má stejné vlastnosti jako ve Flashi.
A nakonec napíšu, že v ilustrátoru je podle mého názoru horší než blesk. Ano, ano, a něco takového existuje. A toto je nástroj pro vyplňování ( Plechovka barvy). Bez ohledu na to, jak se snažím zvyknout si na to v nemoci, je to pohodlnější v blesku.
Pokud vám moje poznámky začaly být užitečné nebo chcete něco přidat sami od sebe - vítejte v komentářích! Hodně štěstí všem;)

V poslední době jsou různé druhy grafiky SVG (Scalable Vector Graphics) velmi populární na webových stránkách a v aplikacích. To je způsobeno skutečností, že všichni nejnovější prohlížeče již tento formát podporuje. Zde jsou informace o podpoře prohlížeče SVG.

Tento článek pojednává nejjednodušší příklad SVG animace vektor ve společnosti plicní pomoc Jquery plugin Lazy Line Painter.

Zdroj

K dokončení a úplnému pochopení tohoto úkolu je základní znalost HTML, CSS, Jquery žádoucí, ale není požadována, pokud chcete pouze animovat SVG) Začněme!

A tak kroky, které musíme dodržovat:

Vytvořte správnou strukturu souborů
Stáhněte si a připojte plugin
Nakreslete Cool Outline Art v Adobe Illustratoru
Převeďte náš obrázek na Lazy Line Converter
Výsledný kód vložte do souboru main.js
Přidejte nějaké CSS podle chuti

1. Vytvořte správnou strukturu souborů
S tím nám pomůže služba Initializr, kde je potřeba vybrat parametry jako na obrázku níže.

Classic H5BP (HTML5 Boiler Plate)
Žádná šablona
Jen HTML5 Shiv
Minifikované
Třídy IE
Chromový rám
Poté klikněte na Stáhnout!

2. Stáhněte a připojte plugin

Protože inicializátor přichází s nejnovější knihovnou jquery, z archivu, který potřebujeme stáhnout z úložiště projektu Lazy Line Painter, stačí do našeho projektu přenést 2 soubory. První z nich je „jquery.lazylinepainter-1.1.min.js“ (verze pluginu se může lišit) a nachází se v kořenovém adresáři výsledné složky. Druhým je příklad / js / vendor / raphael-min.js.

Tyto 2 soubory umístíme do složky js. A připojíme je k našemu index.html před main.js takto:

3. Nakreslete v Adobe Illustratoru skvělý obrysový obrázek

Nakreslete náš obrysový obrázek v Illustratoru (nejjednodušší způsob, jak toho dosáhnout, je nástroj Pen Tool)
Je nutné, aby se kontury naší kresby neuzavřely, protože pro náš efekt je nezbytný začátek a konec.
Nemělo by docházet k vyplňování
Maximální velikost souboru - 1 000 × 1 000 px, 40 kB
Oříznout na objekt> Kreslicí plátna> Přizpůsobit vazbám na kreslicí plátna
Uložit ve formátu SVG (postačí standardní nastavení ukládání)

Můžete například použít ikony v příloze.

4. Převeďte náš obrázek na Lazy Line Converter
Stačí přetáhnout ikonu do pole níže.
Tloušťku, barvu obrysu a rychlost animace lze změnit v samotném kódu, který se objeví po převodu!

5. Výsledný kód vložte do souboru main.js
Výsledný kód nyní vložíme do prázdného souboru main.js
Možnosti:
strokeWidth - tloušťka obrysu
strokeColor - barva obrysu
Rychlost kreslení každého vektoru můžete také změnit změnou hodnot parametru trvání (standardně 600)

6. Přidejte nějaké CSS podle chuti
Odstranit odstavec z index.html

Ahoj světe! Toto je HTML5 Boilerplate.

A místo něj vložíme blok, ve kterém bude probíhat naše animace.

pak přidejte nějaké CSS do souboru main.css pro hezčí vzhled:

Tělo (pozadí: # F3B71C;) # ikony (pozice: pevná; nahoře: 50%; vlevo: 50%; okraj: -300px 0 0 -400px;)

uložit všechny soubory.
Nyní stačí otevřít index.html v moderním prohlížeči a užít si efekt.

P.S. při spuštění na místním počítači může být spuštění animace odloženo o několik sekund.

Optimalizace webové grafiky

Grafické informace jsou přenášeny mnohem pomaleji než textové informace a doba načítání obrázků je úměrná velikosti jejich grafických souborů. Proto rychlé načítání Webové stránky předpokládají malou velikost vložené grafiky, čehož je dosaženo jejich optimalizací. Optimalizací obrazu se rozumí jeho transformace, která zajišťuje minimální velikost souboru při zachování požadovaného tento případ kvalitu obrazu, které je dosaženo především snížením počtu barev v grafických obrázcích, použitím komprimovaných a speciálních formátů souborů a optimalizací nastavení komprese pro jednotlivé fragmenty obrázků.

Illustrator má vestavěné nástroje pro optimalizaci obrázků, které díky různé metody náhled rychlé a efektivní implementace procesu optimalizace. Náhled poskytuje poměrně přesnou představu o tom, jak bude optimalizovaný obrázek vypadat v reálném čase, což pomáhá vyhodnotit výsledek optimalizace a úspěšně vybrat potřebná nastavení. A můžete optimalizovat jak obrázky vytvořené přímo v Illustratoru, tak i další, například fotografie, které mají být zveřejněny na webu.

Optimalizační parametry se nastavují v okně Ušetřete za Web(Save for Web) voláme stejnojmenným příkazem z nabídky Soubor(Soubor). Program nabízí použití jednoho ze čtyř režimů náhledu, ale k vyhodnocení kvality optimalizace nejlepší způsob dva vhodné:

2 nahoře(dvě možnosti) - současné prohlížení originálu a optimalizovaného obrazu v souladu se zadaným nastavením (obr. 1);
4 nahoře(čtyři možnosti) - v tomto režimu je zobrazovací oblast rozdělena do čtyř oken (obr. 2) pro zobrazení původního obrázku a tří verzí optimalizovaného: první verze je vytvořena na základě nastavených hodnot optimalizace a druhá dva jsou varianty aktuálního nastavení optimalizace.

Oba režimy mohou výrazně ušetřit čas při hledání lepší možnost optimalizaci, protože eliminují potřebu ukládání obrázků z různá nastavení optimalizace a jejich následné vizuální srovnání. Kromě toho je možné u různých možností připojení vyhodnotit nejen kvalitu optimalizovaného obrazu, ale také jeho velikost a dobu načítání. Pro srovnání je nejpohodlnější režim 4 nahoře (čtyři možnosti), který vám umožňuje vizuálně vyhodnotit vliv komprese nebo zmenšení palety na kvalitu obrázku a jeho velikost a nakonec určit nejlepší parametry optimalizace.

Illustrator vám umožňuje optimalizovat webovou grafiku ve formátech nejen GIF, JPG, PNG-8 a PNG-24, ale také v SWF a SVG. Indexované obrázky s malé množství barvy jsou uloženy ve formátu GIF. Chcete -li uložit plnobarevné obrázky a obrázky ve stupních šedi - fotografie a grafiku bohatou na barvy, jako jsou výplně s přechodem - použijte Formát JPG... Pro plnobarevné obrázky s průhlednými oblastmi použijte Formát PNG, což vám umožňuje ukládat indexované i plnobarevné obrázky, zatímco ve formátu PNG-8 je maximální možný počet barev optimalizovaného obrázku 256, zatímco ve formátu PNG-24 může mít obrázek miliony barev, a proto vypadá jako Formát JPEG... Rozdíl mezi PNG-24 a JPEG spočívá v tom, že metoda komprese použitá k optimalizaci obrázků PNG-24 nevede ke ztrátě kvality, ale zvyšuje velikost souboru. Formáty SVG a SWF kombinují grafické, textové a interaktivní komponenty a lze je také optimalizovat.

Podívejme se na konkrétní příklad optimalizace obrazu. Řekněme, že logo webu bylo vyvinuto v Illustratoru (obr. 3), původně uložené ve formátu AI. Pokus o okamžitou optimalizaci pro web nepovede k ničemu dobrému, protože v tomto případě bude obrázek automaticky oříznut, což nebude brát v úvahu skutečnou polohu písma získaného v důsledku deformace (obr. 5).

Zkusme tedy exportovat logo do Formát PSD tým Soubor => Exportovat(Soubor => Exportovat) - velikost vytvořeného obrázku bude 143 KB. Otevřete výsledný soubor PSD a použijte příkaz Soubor => Uložit pro web(Soubor => Uložit pro web). S přihlédnutím k omezenému počtu barev obsažených v obrázku je v tomto případě optimální formát GIF s konkrétním nastavením, o kterém se musíte rozhodnout. Experimentováním s nastavením se můžete ujistit, že nejlepší kvalita je dána výchozím algoritmem komprese vybraným programem. Selektivní(Selektivní). Pokud jde o vyhlazování, vzhledem k přítomnosti gradientové výplně je lepší zvolit algoritmus s generováním šumu - Hluk(obr. 6). Velikost výsledného optimalizačního souboru bude 6 729 KB (obr. 7), přičemž zůstane zachována průhlednost pozadí, což lze snadno ověřit uložením obrázku ve formátu GIF společně se souborem HTML (obr. 8). V důsledku toho byly v tomto příkladu soubory emblem.html a emblem.gif získány ve složce Primer1.

Tlačítka

Nepostradatelným specifickým prvkem designu jakékoli webové stránky jsou grafické ovládací prvky - tlačítka. Bez nich si stránku prostě nelze představit. Kreslení tlačítek se dnes stalo zvláštním žánrem a Illustrator vám umožňuje vytvářet ty nejsložitější možnosti. Například tlačítka navržená jako objekty mřížky a / nebo s překrývajícími se maskami vypadají mnohem působivěji než obvyklá.

Zvažme možnost vytvoření kulatého konvexního tlačítka v Illustratoru. Nakreslete kruhový vektorový objekt naplněný libovolnou barvou (obr. 9) a pomocí příkazu jej převeďte na síť Object => Vytvořit přechodovou síť(Object => Vytvořit přechodovou síť) zadáním čtyř řádků a čtyř sloupců a v seznamu Vzhled(Zobrazit) výběrem možnosti Do centra Zvýraznit(Podsvícení) rovnající se 60 (obr. 10). Vyberte nástroj Přímý výběr a klikněte vlevo horním rohu objekt se zvýrazněním bodů uzlů, které se tam nacházejí (obr. 11). Změňte barvu odpovídající buňky na bílou výběrem v paletě Vzorníky(obr.12).

Vezměte si nástroj Elipsa(Elipsa), umístěte značku myši do středu kruhu vytvořeného před tím a podržte klávesy Alt a Posun, natáhněte nový kruh přes starý tak, aby byl ze všech stran o 1–2 pixely větší než starý. Udělejte z ní černý okraj ( Mrtvice) Šířka 1–2 pixely a vyplnění radiálním přechodem od červené k bílé (obrázek 13). Přetáhněte vytvořený vektorový objekt o 1-2 pixely doprava a dolů, poté bez odebrání výběru na něj klikněte pravým tlačítkem a vyberte příkaz z kontextové nabídky Uspořádat => Odeslat zpět(Uspořádat => Odeslat zpět). V důsledku toho získáte prázdné tlačítko, znázorněné na obr. čtrnáct.

Na jakékoli webové stránce je zpravidla několik tlačítek stejného typu, které se liší například pouze ve směru šipek, které jsou na nich nakresleny, což naznačuje směr pohybu po webu. Zvažte nejjednodušší případ, kdy máte dvě tlačítka, z nichž jedno se šipkou dolů bude znamenat přesun na další strana, a tlačítko se šipkou nahoru na předchozí. Jako prázdnou šipku si vezměte obyčejný trojúhelník nakreslený nástrojem Polygon(Mnohoúhelník), vyplněný černou barvou a také zdobený jako síťovaný předmět pro větší efekt. Přesuňte šipku na tlačítko a pomocí příslušných tlačítek na paletě upravte polohu všech objektů vůči sobě navzájem Zarovnat(Zarovnání). První ze získaných tlačítek je znázorněno na obr. 15. Vytvořte kopii vrstvy tlačítek výběrem příkazu Duplicitní vrstva Vrstvy, - ve výsledku získáme dvě identické vrstvy. Poté na kopii vrstvy vyberte šipku a otočte ji o 180 ° výběrem příkazu Transformace => Otočit- Transformace => Otočení. Dostaneme stejné tlačítko jako na obr. 16. Upozorňujeme, že je mnohem pohodlnější ukládat všechna tlačítka stejného typu jednoho projektu do jednoho souboru na různých vrstvách, což je v tomto případě ukázáno.

Nyní musíte uložit optimalizované verze jednotlivých tlačítek. Nejprve zneviditelněte spodní vrstvu - v tomto případě se uloží tlačítko na horní vrstvě. Vyberte tým Soubor => Uložit pro web(Soubor => Uložit pro web), nakonfigurujte například možnosti optimalizace tlačítek, jak ukazuje obrázek 1-4. 17, klikněte na tlačítko Uložit(Uložit) a zadejte název souboru. Tlačítko uložené jako výsledek je znázorněno na obr. 18. Nyní vraťte viditelnost spodní vrstvy a udělejte horní neviditelnou a stejným způsobem uložte druhé tlačítko s jiným názvem. Výsledek je uveden na obr. 19.

Teď už jen zbývá zajistit, aby tlačítka vypadala na webové stránce dobře, a umístit je na vlastní stránku (obrázek 20). V důsledku toho v tomto příkladu soubor Primer2.html a dva grafické obrázky ve složce images (složka Základní nátěr 2).

Pokud je to žádoucí, během procesu optimalizace lze tlačítko snadno proměnit na plátek. V tomto případě po výběru příkazu Soubor => Uložit pro web(Soubor => Uložit pro web) a nastavením parametrů optimalizace vyberte nástroj z palety nástrojů Výběr řezu(Vyberte řez) a poklepejte na obrázek, který se nakonec automaticky změní na plátek s pořadovým číslem 1 (obr. 21). Opětovným dvojitým kliknutím myši se otevře okno Možnosti řezu(Možnosti řezu), ve kterém budete muset zadat odkaz a v případě potřeby změnit název řezu (obr. 22) a poté uložit optimalizovaný obrázek. Výsledkem v tomto případě bude Primer3.html (obr. 23) a Primer3.gif (složka Primer3).

Interaktivní prvky

Jedním ze způsobů, jak oživit stránku, je představit designové prvky, které mění jejich vzhled(nebo stav) v závislosti na chování myši nebo méně často v případě jiných situací: škálování, posouvání, načítání, chyby atd.

Mezi takové prvky patří nejznámější rollovery (z angličtiny roll over - to roll, turn over) - prvky, které pod vlivem myši mění svůj vzhled. Animovaná tlačítka jsou příklady typických rolloverů. Rollovery se často používají k vytvoření dalších navigačních prvků webu. Ve skutečnosti žádné převrácení není jeden, ale několik (až čtyř) obrázků, z nichž každý odpovídá konkrétní události. Za hlavní události jsou považovány následující: Normální - normální stav, Nad - přesunutí kurzoru myši nad prvek a Dolů - stisknutí levého tlačítka myši, když se kurzor pohybuje nad ním. Teoreticky mohou být zapojeny takové události jako Kliknutí - uvolnění levého tlačítka myši po stisknutí, Nahoru - po uvolnění tlačítka, Out - při opuštění aktivní zóny. V praxi se však častěji omezují na změnu prvku pouze pro první tři nebo dokonce dvě události.

Klasické převrácení

V klasickém smyslu je rollover série obrázků GIF a odpovídajícího HTML kódu, díky čemuž v závislosti na chování myši nahradí jeden obrázek jiný v okně prohlížeče.

Illustrator není určen k přímému vytváření rolloverů v klasickém smyslu, ale může vám pomoci navrhnout pro ně počáteční prvky. V tomto případě jde o to vytvořit vrstvu s obrázkem odpovídajícím první události. Poté vytvořte kopii vrstvy a transformujte obrázek tak, aby odpovídal druhé události atd. Výsledný vícevrstvý obrázek je exportován do souboru PSD se zachovanými vrstvami, na jejichž základě je v programu Image Ready vytvořeno převrácení. Výhodou používání Illustratoru, stejně jako v mnoha jiných případech, je řada jeho zajímavých funkcí, které v jiných nejsou k dispozici. softwarové nástroje ve spojení s pohodlím transformace vektorové grafiky.

Zkusme vytvořit rollover ve formě nápisu, který mění barvu v závislosti na chování myši. Otevřete Illustrator a vytvořte zaoblený, černě vyplněný obdélník (obrázek 24), vytvořte jeho kopii a umístěte jej do volné oblasti obrazovky. Převeďte první kopii obdélníku na objekt mřížky se zvýrazněním uprostřed (příkaz Object => Vytvořit přechodovou síť- Object => Vytvořit přechodovou síť) zadáním čtyř řádků a deseti sloupců (obrázek 25). Aktivujte druhou kopii obdélníku a upravte pro ni výplň přechodu přibližně podle obrázku. 26. Promíchejte objekt přechodu přes síť, snižte krytí objektu přechodu na přibližně 80% a jeho velikost přibližně o 1 pixel, aby se napodobil efekt nárazu. A poté vytiskněte text nad objekty. V původní podobě nechejte mít bílou barvu, která bude odpovídat normálnímu stavu (obr. 27), a poté, když se změní stav převrácení, barva titulku se změní například na zelenou - když se přesunete ukazatel myši nad ním (stav Over) a na modrou - při stisknutí tlačítka myši (stav Down).

Věnujte pozornost paletě Vrstvy- v této fázi je v něm pouze jedna jediná vrstva. Vytvořte dvě kopie této vrstvy pomocí příkazu Duplicitní vrstva(Duplicate Layer) z nabídky palety Vrstvy, - v paletě budou tři vrstvy (obr. 28). Poté v první kopii vrstvy změňte barvu titulku na zelenou a ve druhé na modrou (obr. 29). V důsledku toho získáte potřebné prázdné místo pro převrácení.

Pomocí příkazu exportujte vytvořený obrázek do formátu PSD se zachováním vrstev Soubor => Exportovat(Soubor => Export) a výběr barevného modelu RGB (obr. 30). Otevřete vytvořený soubor PSD v ImageReady (obr. 31 a 32). Vytvořte rámečky z vrstev výběrem příkazu Vytvářejte rámečky z vrstev(Vytvořit rámečky z vrstev) z nabídky palety Animace... Okno animace bude vypadat jako na obr. 33. Současně v paletě Převrácení zpočátku bude vytvořen jeden normální stav.

Pak v okně Animace v paletě vyberte rámeček odpovídající stavu vznášení Vrstvy vrstva se vybere automaticky Kopie vrstvy 1(obr. 34). Přejít na paletu Převrácení a klikněte na tlačítko Vytvořit stav převrácení(Vytvořit stav převrácení) - obr. 35, což povede ke vzniku stavu Přes stát v paletě Převrácení(obr. 36). Vytvořte stav stejným způsobem Dolní stav... Aktivujte stav Normální v paletě Převrácení a odstranit v paletě Animace všechny snímky, kromě jednoho, který by měl odpovídat stavu Normální... V důsledku toho pro každý stav převrácení v paletě Animace rámeček bude pouze jeden (obr. 37, 38 a 39).

Rýže. 38. Pohled na obrázek, okno Animace a palety Vrstvy a Převrácení pro stav Over State

Výsledek zkontrolujte kliknutím na tlačítko Náhled ve výchozím prohlížeči(Náhled prohlížeče) na panelu nástrojů a navigací do okna prohlížeče (Obrázek 40). Poté soubor uložte pomocí příkazu Soubor => Uložit optimalizováno(Soubor => Uložit optimalizováno) a určením možnosti HTML a obrázky (* .html)... V důsledku toho jsme v tomto příkladu dostali soubor Primer4.html a řadu grafických obrázků ve složce images.

Rýže. 40. Okno prohlížeče s prvkem Rollover

Převrácení SVG

Rostoucí popularita formátu SVG (Scalable Vector Graphics - scalable Vektorová grafika), vytvořený na základě standardu XML, vám také umožňuje přijímat různé interaktivní prvky, zejména rollovery, pouze v praxi je implementován zcela jiným způsobem. Stojí za zmínku, že vytváření interaktivních rolloverů SVG, na rozdíl od klasických, kdy je zcela automaticky generován odpovídající HTML kód, vyžaduje znalosti Jazyk JavaScript a pochopení základních principů objektově orientovaného programování.

Pro práci s objekty SVG existuje speciální paleta. Interaktivita SVG, které lze snadno otevřít pomocí příkazu Okno => Interaktivita SVG(Okno => interaktivita SVG) - obr. 41.

Zvažme tuto možnost pro vytvoření rolloveru na příkladu interaktivního tlačítka, barva popisku, na kterém se změní, z černé na modrou, když umístíte kurzor myši, a znovu se změní na černou, když myš opustí aktivní zónu.

Vytvořte obdélníkové tlačítko se zaoblenými hranami a vyberte pro něj například vhodnou přechodovou výplň, jak je znázorněno na obr. 42. Upravte průhlednost tlačítka v paletě Transparentnost(Transparency) - v tomto případě hodnota parametru Neprůhlednost(Neprůhlednost) nastaveno na 50%. Tlačítko duplikujte, vyplňte tmavě zelenou barvou (obr. 43) a poté jej příkazem převeďte na síťový objekt Object => Vytvořit přechodovou síť(Object => Vytvořit přechodovou síť) zadáním čtyř řádků a deseti sloupců a v seznamu Vzhled(Zobrazit) výběrem možnosti Do centra(Střed) a nastavení hodnoty Zvýraznit(Zvýraznění) se rovná 100. Snižte krytí vrstvy síťového objektu o přibližně 40% (obr. 44). Umístěte síťový předmět na horní část přechodu a tlačítko bude vypadat jako na obr. 45.

Rýže. 44. Proměna kopie tlačítka na síťový objekt

Doplňte tlačítko zamýšleným titulkem a upravte jeho polohu pomocí odpovídajících tlačítek na paletě Zarovnat(Zarovnání). Výsledný obrázek bude obsahovat jednu vrstvu se třemi superponovanými objekty (obrázek 46). Naplánované události budou odkazovat na textový objekt, takže pro zjednodušení změňte jeho název na Text dvojitým kliknutím na objekt a zadáním nového názvu. Stejným způsobem změňte název vrstvy z Vrstva 1 až vrstva(obr. 47).

Zpracování událostí předpokládá použití postupů JavaScriptu, takže musíte zahrnout soubor popisující tyto postupy. Jmenuje se Events.js a během instalace je uložen na disk ve složce Sample Files \ Sample Art \ SVG \ SVG Programy Adobe Ilustrátor. Chcete -li připojit soubor Events.js, použijte příkaz Soubory JavaScript Interaktivita SVG(obr. 48). Dále musíte stisknout tlačítko Přidat(Přidat) a najděte požadovaný soubor na pevném disku. Když se v poli objeví jeho jméno Url(obr. 49), klikněte na tlačítko Hotovo(Odhlásit se).

Rýže. 48. Volba příkazu JavaScript Files

Poté byste pro objekt měli definovat reakci na události myši. Text... Vyberte textový objekt v poli událost(Události) palety Interaktivita SVG vyberte událost přejetí myší elemColor (evt, "Text", "# 3333FF")- to bude znamenat, že když je myš nad objektem Text jeho barva se změní na modrou (obr. 50). Aby se barva textu po opuštění aktivní zóny změnila na černou, budete muset vytvořit další událost onmouseout- vyberte jej v poli událost(Události) palety Interaktivita SVG... Poté zadejte text do řádku akce elemColor (evt, "Text", "# 000000")- tím se vrátí černá barva (obr. 51).

Rýže. 51. Konečný pohled na paletu interaktivity SVG pro textový objekt

Vytvořený rollover uložte pomocí příkazu jako soubor SVG Soubor => Uložit jako(Soubor => Typ souboru formát SVG, a poté nakonfigurujte možnosti pro uložení souboru SVG, jak je znázorněno na obr. 52. Po uložení obdržíte pouze jeden jediný soubor s příponou SVG, a ne dva, jako v případě klasického rolloveru - v tomto případě byl získán soubor Primer5.svg (složka Primer5). Aby však rollover skutečně fungoval, musíte do složky se souborem SVG dodatečně zkopírovat soubor Events.js s popisem postupů JavaScriptu. Poté můžete zkontrolovat, zda funguje převrácení - výsledek bude vypadat jako na obrázku. 53.

SVG animace

Formát SVG lze také použít k přenosu animace. Zkusme vytvořit jednoduchý animační prvek (v tomto případě to budou informace o společnosti), který se objeví na obrazovce, když najedete myší na odpovídající grafický objekt, a zmizí, když myš odstraníte z interaktivního prvku.

Pojďme vytvořit sérii grafických a textových objektů, jako je ten, který je znázorněn na obr. 54. Přejmenujte pohodlně všechny vytvořené objekty postupným kliknutím na název dalšího objektu v paletě Vrstvy a zadání požadovaného jména (obr. 55). Upozorňujeme, že zvýrazněné na obr. 56 objektů - Text1, Text2, Text3 a Cesta 1- bude vždy viditelný a všechny ostatní - pouze když najedete myší na objekt Text 1.

Rýže. 54. Původní pohled na obrázek

Zahrňte soubor Events.js s popisem procedur JavaScriptu pomocí příkazu Soubory JavaScript(Soubory JavaScript) z palety Interaktivita SVG stisknutím tlačítka Přidat(Přidat) výběrem požadovaného souboru na pevném disku a kliknutím na tlačítko Hotovo(Odhlásit se).

Definujte reakci na události myši pro objekt Text 1... Vyberte objekt Text, v poli událost(Události) palety Interaktivita SVG vyberte událost přejetí myší a do řádku níže zadejte text elemShow (evt, "Text4"); elemShow (evt, "Path2")... Výsledkem je, že když je myš nad objektem Text 1 objekty budou viditelné Text 4 a Cesta 2... Vezměte prosím na vědomí, že pokud má být při události provedeno několik akcí, musí být zadány pomocí znaku „;“. Poté proveďte podobnou operaci s ohledem na událost onmouseout zadáním textu pro něj, což bude znamenat skrývání předmětů (obr. 57).

Výsledek uložte pomocí příkazu jako soubor SVG Soubor => Uložit jako(Soubor => Uložit jako) zadáním názvu souboru výběrem v poli Typ souboru Formátu SVG a poté nakonfigurováním možností pro uložení souboru SVG, jak ukazuje obr. 58. Po uložení získáte soubor Primer6.svg (složka Primer6). Nezapomeňte zkopírovat soubor Events.js do složky s tímto souborem. Pokud poté spustíte cos tento soubor, pak uvidíte výsledek zobrazený na obr. 59. To je téměř to, co potřebujete. Jediná věc, která nebyla zahrnuta v našich plánech, byla počáteční podoba objektů. Text 4 a Cesta 2 při spuštění. Chcete -li se této chyby zbavit, vyberte oba datové objekty najednou a vytvořte pro ně akci. elemHide (evt, "Text4"); elemHide (evt, "Path2") na akci zatížení(obr. 60). Uložte soubor znovu a ujistěte se, že objekty jsou nyní Text 4 a Cesta 2 viditelné pouze při najetí myší na objekt Text 1.

GIF animace

Jakákoli webová stránka je nemyslitelná bez webové animace, včetně animovaných gifů. Jednou z možností jejich vytváření je použití aplikace Adobe ImageReady, která mimo jiné umožňuje vytvářet animace z vrstev. Současně lze samotný vrstvený obrázek připravit v různých aplikacích, včetně Adobe Illustratoru.

Je velmi snadné vytvořit animaci na základě prvků z palety Symboly(Symboly) otevřený příkazem Okno => Symboly(Okno => Symboly) nebo z jedné z knihoven symbolů, které lze otevřít pomocí příkazu Okno => Knihovny symbolů(Okno => Knihovny symbolů).

Jako příklad se pokusíme zvětšit velikost jakéhokoli objektu symbolu; klíčové fáze procesu zvětšení objektu musí být nastaveny na samostatné vrstvy. Nejprve jednoduše umístěte objekty symbolů nad sebe a poté zvyšte velikost každého dalšího objektu, například jak je znázorněno na obr. 61. Výsledkem je, že v paletě Vrstvy vytvoří se jedna vrstva s mnoha objekty (obr. 62). Pokud tento obrázek přímo exportujete do formátu PSD, nic to neudělá, protože existuje pouze jedna vrstva a samozřejmě, když otevřete soubor PSD v programu ImageReady, bude existovat také pouze jedna vrstva. Proto musíte nejprve umístit objekty na různé vrstvy. To lze provést různé způsoby- nejsnadnějším způsobem je nejprve vybrat vrstvu Vrstva 1 v paletě Vrstvy a použijte příkaz Uvolněte do vrstvy(Uvolnění do vrstev). Výsledkem bude přesun každého z objektů do vlastní vrstvy, ale všechny budou ve vrstvě vnořené. Vrstva 1... Proto pak budete muset všechny vnořené vrstvy ručně přetáhnout do horní části palety Vrstvy, aby byly nad vrstvou. Vrstva 1 a pak prázdná vrstva Vrstva 1 stačí vyjmout (obr. 63). Exportujte obrázek do formátu PSD pomocí příkazu Soubor => Exportovat(Soubor => Exportovat) s nastavením jako na obr. 64.

Načtěte vytvořený soubor PSD do ImageReady (obrázky 65 a 66). Otevřete nabídku palety AnimaceVytvářejte rámečky z vrstev(Vytvářejte rámečky z vrstev). V důsledku toho bude vytvořeno pět rámců, z nichž každý bude odpovídat vlastní vrstvě a oknu palety Animace bude mít podobu jako na obr. 67.

Poté nastavte dobu trvání každého z vytvořených rámců - v tomto případě je doba trvání pro všechny snímky nastavena na 0,2 s. A poté optimalizovanou animaci uložte pomocí příkazu Soubor => Uložit optimalizováno(Soubor => Uložit optimalizováno). Získaný výsledek může připomínat Obr. 68.

Ještě pohodlnější je pomocí funkcí získat mezery, které se v ImageReady snadno změní na animaci Živé směsi Software Illustrator. Toto kombinované použití Illustratoru a ImageReady dramaticky urychluje proces vytváření animací GIF.

Nakreslete například dva libovolné vícebarevné objekty a poté je spojte s příslušnými parametry (obr. 69). Tento soubor nelze použít přímo k vytvoření animace, protože obrázek je na jedné vrstvě (obr. 70). Proto nejprve musíte umístit každý prvek objektu prolnutí do samostatné vrstvy. K tomu v okně Vrstvy zvýrazněte řádek , aktivujte nabídku palety kliknutím na černou šipku v pravém horním rohu a vyberte příkaz Uvolněte sekvenci vrstev(Postupně převádějte na vrstvy) (obr. 71). Podržení klávesy Posun, vyberte vytvořené vrstvy a umístěte je nad vrstvu Vrstva 1 a poté odstraňte samotnou vrstvu Vrstva 1 přesunutím do koše - v důsledku toho bude mít paleta vrstev stejnou podobu jako na obr. 72.

Rýže. 70. Počáteční stav okna Vrstvy

Exportujte vytvořený soubor do formátu PSD pomocí příkazu Soubor => Exportovat(Soubor => Exportovat). Otevřete vytvořený soubor PSD v programu ImageReady (obr. 73). Všechny vrstvy vytvořené v aplikaci Illustrator se objeví v okně vrstev (obr. 74) a v okně Animace rámeček bude zatím jen jeden.

Aktivujte nabídku palety Animace kliknutím na černou šipku v pravém horním rohu palety a zvolením příkazu Vytvářejte rámečky z vrstev(Vytvořit rámečky z vrstev) - ve výsledku bude v tomto případě vytvořeno pět rámců a okno palety Animace bude mít formu podle obr. 75. Podržte tlačítko a vyberte všechny snímky Posun, a nastavte příslušnou dobu trvání rámce - v tomto případě se pro každý z rámců použije stejný čas 0,2 s. Potom optimalizovaný soubor uložte pomocí příkazu Soubor => Uložit optimalizováno(Soubor => Uložit optimalizováno) nastavením v seznamu Typ souboru volba Pouze obrázky (* .gif)... Animace bude připomínat obr. 76.

Mnohem zajímavější není pohyb, ale plynulá změna velikosti prolnutých objektů. Můžete například použít již vytvořený přechod přechodu. V tomto případě po vytvoření samostatných vrstev pro každý prvek přechodu prolnutí umístěte všechny objekty na sebe pomocí tlačítek Střed horizontálního zarovnání(Horizontální zarovnání středu) a Střed vertikálního zarovnání Paleta (Vertikální zarovnání středu) Zarovnat(obr. 77).

Exportujte vytvořený soubor do formátu PSD ( Soubor => Exportovat- Soubor => Exportovat) a otevřete vytvořený soubor PSD v programu ImageReady (obr. 78). Vytvářejte rámce animací ( Vytvářejte rámečky z vrstev- Vytvořte rámečky z vrstev) a vyberte pro ně vhodné trvání (obr. 79). A pak, aby byla animace efektivnější, zkopírujte stávající rámce, ale v obrácené pořadí- aby se obraz nejprve zvětšoval a poté zmenšoval atd. v kruhu (obr. 80). Poté uložte optimalizovaný soubor ( Soubor => Uložit optimalizováno- Soubor => Uložit s optimalizací). Výsledná animace je znázorněna na obr. 81.

Rýže. 80. Stav okna Animace po duplikování rámců

Rýže. 81. Dokončená animace

Dnes nejsme úplně obyčejní Výukový program Adobe Ilustrátor. Protože tentokrát nebudeme dělat statický obrázek, ale skutečnou animaci. Představte si, že to dopadne s s Adobe Můžete také kreslit karikatury v Illustratoru :)

A k tomu nepotřebujeme vůbec nic. Kompetentní organizace vrstev a export finální práce ve formátu swf, kde je každá vrstva převedena do animačního rámce. V dnešním tutoriálu nakreslíme animaci odpočítávání ve stylu retro filmu. Výstupem by mělo být flash video s tímto odpočítáváním.

První věc, kterou musíte udělat, je nakreslit všechny potřebné prvky pro budoucí animaci. Za tímto účelem jsem v samostatném dokumentu vytvořil dvě polohy rámečku filmu, referenční kružnici, která byla rozříznuta na samostatné sektory, texturu a svislý škrábanec, který dodal efekt starověku, stejně jako všechna čísla a nápisy .

Když jsou všechny části naší karikatury připraveny, můžete začít vytvářet samotnou animaci. Pro pohodlí je nejlepší to provést v novém dokumentu. V tomto případě budou vrstvy hrát roli animačních rámců. A v úplně první vrstvě stačí zkopírovat rámeček filmového pásu. Umístěte jej doprostřed pracovní oblasti.

Nyní vytvořte druhou vrstvu a zkopírujte do ní pás filmu, ve kterém jsou otvory podél okrajů odsazeny. Je také třeba vycentrovat.

Z těchto dvou vrstev již můžete získat pohyblivou filmovou animaci. Později ale potřebujeme mnohem více vrstev. Vyberte tedy první dvě vrstvy, přejděte na možnosti panelu a vytvořte kopie vrstev.

Podobně potřebujeme nahromadit 12 vrstev filmu z filmu.

Nyní máme celou hromadu vrstev a všechny jsou viditelné. V tom smyslu, že horní vrstvy překrývají spodní, což není pro práci příliš výhodné. Některé vrstvy proto můžete vypnout kliknutím na ikonu okem nalevo od názvu vrstvy. Chcete -li vypnout nebo zapnout všechny vrstvy najednou, podržte klávesu Alt a klikněte na ikonu oka. Zapínáním a vypínáním vrstev můžete přesně vidět, co se nachází v určitém rámci naší budoucí animace. A teď, abychom přidali mírné chvění pohybu filmu, musíme výsledné snímky mírně přesunout do různých směrů. Chcete -li to provést, zahrňte pouze vrstvu, ve které budete pracovat tento moment a poté posuňte rámeček o několik pixelů na obě strany.

Když jste prošli všemi vrstvami a přidali mírný posun, můžete začít vytvářet animaci pohybujícího se kruhu. Chcete -li to provést, zkopírujte kruh skládající se ze sektorů z dokumentu s kreslenými částmi a umístěte jej na první vrstvu přes rám filmového pásu.

Pokud zrušíte výběr kruhu, bude vypadat jako jeden celek. Přesně to potřebujeme.

Protože se však skládá ze samostatných sektorů, můžete animaci vytvářet velmi rychle a snadno změnou jejich barvy. Chcete -li to provést, zkopírujte tento kruh do druhé vrstvy a zesvětlete první sektor. Pamatujte, že náš film se při pohybu třese, takže není vůbec nutné klást kruh přesně do středu rámečku. Umístěte jej přes oko.

Podobně musíte zkopírovat kruh do každé další vrstvy, zatímco malujete světlejší barvou o jeden sektor více než v minulosti. Těchto 12 vrstev dohromady tvoří filmové doplnění s vyplňujícím kruhem.

Dále musíme do našich vrstev přidat texturu. Zapněte první vrstvu a zkopírujte tam texturu z původního souboru s náhradními díly.

Poté postupně zapněte další vrstvy a zkopírujte tam stejnou texturu. Aby to na každém snímku vypadalo jinak, stačí to otočit o 90 stupňů. Jak jste asi uhodli, potřebujeme přidat texturu do všech 12 snímků.

Pokud vás kopírování už nebaví, pak vás mohu potěšit - zbývá velmi málo. To nejtěžší je u konce. Zbývá přidat svislé škrábance a téměř všechno. Chcete -li to provést, znovu zkopírujte původní škrábanec a umístěte jej na libovolné místo v několika vrstvách. V mém případě se škrábance objevují pouze ve dvou vrstvách.

Nyní, když je hlavní smyčka s animací filmu připravena, zbývá přidat čísla. Protože odpočítáváme od 3 do 1 plus slovo Go !!!, potřebujeme ještě více vrstev. Ne 12, ale celých 48. K tomu je potřeba udělat další tři kopie hotových vrstev s animací filmu.

A pak je vše jednoduché. Zapněte úplně první vrstvu a vložte tam číslo tři.

Poté musíte tento obrázek zkopírovat do dalších vrstev, dokud animace kruhu neskončí. Když se dostanete k další kopii vrstev, kde bude kruh znovu zcela vyplněn, musíte již zadat číslo dvě. Stejným způsobem zkopírujte jedničku do požadovaných vrstev. A až se dostanete k finálním vrstvám pro titulek Go !!!, stačí kruh zkopírovat před zkopírováním titulku do požadované vrstvy.

To je s animací vše. Tady jde hlavně o to, nenechat se zmást. Můžete vrstvám dát nějaké příhodné názvy, ale já jsem byl nějak moc líný :) A přesto, až práci dokončíte, nezapomeňte všechny vrstvy vrátit kliknutím na ikonu oka.

V okně s nastavením exportu nezapomeňte nastavit Exportovat jako: AI vrstvy do rámců SWF. Tato možnost mění vrstvy ilustrátorů na animační rámečky. Poté klikněte na tlačítko Upřesnit.

Otevře další nastavení... Zde je třeba nastavit obnovovací kmitočet snímků za sekundu. Mám 12 snímků za sekundu. Za smyčku animace odpovídá zaškrtávací políčko Smyčka. Díky ní se video bude přehrávat v kruhu. A volba Layer Order: Bottom Up reprodukuje vrstvy ilustrátora zdola nahoru v panelu. Přesně tak jsme vytvořili naši animaci.

Na výstupu dostaneme flash video s naší animací.

Nyní vidíte, že vytváření jednoduché animace v aplikaci Adobe Illustrator není tak obtížné, jak se na první pohled zdá.

Ale pro vytváření dlouhých videí nebo interaktivních aplikací je stále lepší použít Adobe flash nebo jiné flash editory. Tuto kočku jsem například vyrobil ve starém Macromedia Flash, který jsem vykopal při své práci.

V poslední době se k vytváření animací stále častěji používají HTML5 a CSS3. Tento kód je podporován moderní prohlížeče a nevyžaduje použití flash přehrávače.

Roman alias dacascas konkrétně pro blog

Přihlaste se k odběru našeho zpravodaje, aby vám nic nového neuteklo:

Dnes tu máme neobvyklý tutoriál k Adobe Illustratoru. Protože tentokrát nebudeme dělat statický obrázek, ale skutečnou animaci. Představte si, ukazuje se, že můžete kreslit karikatury také pomocí Adobe Illustratoru :)

Nyní vytvořte druhou vrstvu a zkopírujte do ní pás filmu, ve kterém jsou otvory podél okrajů odsazeny. Je také třeba vycentrovat.

Podobně potřebujeme nahromadit 12 vrstev filmu z filmu.

Nyní máme celou hromadu vrstev a všechny jsou viditelné. V tom smyslu, že horní vrstvy překrývají spodní, což není pro práci příliš vhodné. Některé vrstvy proto můžete vypnout kliknutím na ikonu okem nalevo od názvu vrstvy. Chcete -li vypnout nebo zapnout všechny vrstvy najednou, podržte klávesu Alt a klikněte na ikonu oka. Zapínáním a vypínáním vrstev můžete přesně vidět, co se nachází v určitém rámci naší budoucí animace. A nyní, abychom přidali mírné chvění pohybu filmu, musíme výsledné snímky mírně přesunout do různých směrů. Chcete -li to provést, zapněte pouze vrstvu, se kterou budete v tuto chvíli pracovat, a poté posuňte rámeček o několik pixelů v libovolném směru.

Pokud zrušíte výběr kruhu, bude vypadat jako jeden celek. Přesně to potřebujeme.

Dále musíme do našich vrstev přidat texturu. Zapněte první vrstvu a zkopírujte tam texturu z původního souboru s náhradními díly.

A pak je vše jednoduché. Zapněte úplně první vrstvu a vložte tam číslo tři.

Otevřou se další nastavení. Zde je třeba nastavit obnovovací kmitočet snímků za sekundu. Mám 12 snímků za sekundu. Za smyčku animace odpovídá zaškrtávací políčko Smyčka. Díky ní se video bude přehrávat v kruhu. A volba Layer Order: Bottom Up reprodukuje vrstvy ilustrátora zdola nahoru v panelu. Přesně tak jsme vytvořili naši animaci.

Na výstupu dostaneme flash video s naší animací.

Nyní vidíte, že vytváření jednoduché animace v aplikaci Adobe Illustrator není tak obtížné, jak se na první pohled zdá.

Ale pro vytváření dlouhých videí nebo interaktivních aplikací je stále lepší použít Adobe Flash nebo jiné flash editory. Tuto kočku jsem například vyrobil ve starém Macromedia Flash, který jsem vykopal při své práci.

V poslední době se k vytváření animací stále častěji používají HTML5 a CSS3. Tento kód je podporován moderními prohlížeči a nevyžaduje použití přehrávače Flash.

Roman alias dacascas speciálně pro blog Notes of a microstock illustrator