Jak vytvořit gif animaci v illustratoru. Tipy a triky v aplikaci Adobe illustrator: triky aplikace Illustrator

Průhledný GIF v aplikaci Adobe Illustrator se provádí následovně. Přejděte do nabídky Soubor> Uložit pro Web a zařízení (Alt + Ctrl + Shift + S). V okně, které se otevře, musíte v poli Optimalizovaný formát souboru nejprve přejít na kartu Velikost obrázku(Velikost obrázku). Faktem je, že standardně celá stránka spadá do okna optimalizace, a to většinou není nutné. Proto na kartě Velikost obrázku zrušte zaškrtnutí políčka Klip na Artboard(Oříznout na velikost stránky) a klepněte na tlačítko Použít.

Poté v seznamu pro výběr formátu vyberte GIF a zaškrtněte políčko Průhlednost.

Poté určíme, které barvy budou průhledné. Všechny barvy na obrázku jsou obsaženy v záložce Tabulka barev(Tabulka barev) a jsou zobrazeny jako barevné čtverečky. Vyberte nástroj na panelu nástrojů na levé straně okna Kapátko(pipeta).

Barvy lze definovat dvěma způsoby. Nejjednodušší je určit barvu kapátkem přímo na obrázku - poté se barva v tabulce barev zvýrazní tmavým tahem. Pokud přesně víte, jaká barva by měla být průhledná, můžete ji vybrat přímo v tabulce barev kliknutím na odpovídající barevný čtverec. A v prvním a druhém případě, pokud potřebujete vybrat několik barev, musíte pracovat se stisknutou klávesou Shift (nebo Ctrl). Po výběru barvy je potřeba dát programu pokyn, aby byla průhledná. Chcete-li to provést, musíte kliknout na ikonu Mapuje vybrané barvy na průhledné(Přidat vybrané barvy k průhlednosti). Na obrázku je toto tlačítko zakroužkované a červené je vybráno jako průhledné. Na obrázku se objeví průhledná oblast a čtverec na tabulce barev změní svůj vzhled - část se stane bílým trojúhelníkem. Chcete-li vybranou barvu zrušit, musíte ji vybrat v tabulce barev a poté znovu kliknout na ikonu Mapovat vybrané barvy na průhlednou.

Pár slov o způsobu nastavení průhlednosti. Může za to rozbalovací nabídka. Zadejte algoritmus rozkladu průhlednosti, v ruštině - Algoritmus pro simulaci průhlednosti (obr. níže). Lze vybrat ze čtyř možností: No Transparency Dither – žádný algoritmus, Diffusion Transparency Dither – difúzní algoritmus, Pattern Transparency Dither – algoritmus založený na vzoru a Noise Transparency Dither – algoritmus založený na šumu. V režimu difuzního algoritmu se posuvník aktivuje Množství(Množství), které umožňuje změnit hodnotu difuze. Co uvést do praxe? Podle účelu a image. Tuto možnost nepoužívám a vždy ji nechávám na výchozí - No Transparency Dither.

Klikněte na Uložit - průhledný gif připraveno. Práce byla provedena v aplikaci Adobe Illustrator verze CS4 (v. 14), ale všechny akce a klávesové zkratky jsou relevantní pro starší verzi CS3 (v. 13).

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

A nepotřebujeme k tomu vůbec nic. Kompetentní organizace vrstev a export výsledné práce ve formátu swf, kde je každá vrstva převedena na rámeček animace. 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 právě 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 filmového rámečku, referenční kruh, který byl rozřezán na samostatné sektory, texturu a vertikální škrábanec pro přidání efektu 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 usnadnění je to nejlépe provést v novém dokumentu. V tomto případě budou vrstvy hrát roli animačních snímků. A hned v první vrstvě stačí zkopírovat rámeček filmového pásu. Umístěte jej doprostřed pracovní plochy.


Nyní vytvořte druhou vrstvu a zkopírujte do ní filmový pás, ve kterém jsou otvory po okrajích odsazeny. Také je potřeba ho 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 do možností panelu a vytvořte kopii vrstev.


Stejně tak potřebujeme nashromáždit 12 vrstev filmů filmu.


Nyní máme spoustu vrstev a všechny jsou viditelné. V tom smyslu, že horní vrstvy překážejí spodním, což není pro práci příliš vhodné. Některé vrstvy tedy můžete vypnout kliknutím na ikonu s okem vlevo od názvu vrstvy. Chcete-li vypnout nebo zapnout všechny vrstvy najednou, podržte při kliknutí na ikonu oka klávesu Alt. Zapnutím a vypnutím vrstev můžete přesně vidět, co se nachází v určitém snímku naší budoucí animace. A nyní, abychom do pohybu filmu přidali mírné chvění, musíme výsledné snímky mírně posunout v různých směrech. Chcete-li to provést, zahrňte pouze vrstvu, se kterou budete pracovat tento moment a poté posuňte rámeček o několik pixelů na obě strany.


Když projdete všechny vrstvy a přidáte mírný posun, můžete začít vytvářet animaci pohybujícího se kruhu. Chcete-li to provést, zkopírujte kruh sestávající ze sektorů z dokumentu s kreslenými díly a umístěte jej na první vrstvu přes rám filmového pásu.


Pokud kruh zrušíte, bude vypadat jako jeden celek. To je přesně to, co potřebujeme.


Ale protože se skládá z oddělených sektorů, můžete vytvořit animaci 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. Pamatujete si, že se náš film při pohybu třese, takže není vůbec nutné dávat kruh přesně do středu snímku. Umístěte jej přes oko.


Podobně je potřeba zkopírovat kruh do každé další vrstvy, zatímco malujete světlejší barvou o jeden sektor více než minule. Těchto 12 vrstev dohromady tvoří filmové doplnění s plnicím kruhem.


Dále musíme přidat texturu do našich vrstev. 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čí jej otočit o 90 stupňů. Jak jste možná uhodli, musíme přidat texturu do všech 12 snímků.


Pokud vás už kopírování nebaví, tak vás mohu potěšit - zbývá už velmi málo. Nejtěžší část je za námi. Zbývá přidat vertikální škrábance a téměř vše. 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 hotová, zbývá doplnit čísla. Protože odpočítáváme od 3 do 1 plus slovo Go!!!, potřebujeme ještě více vrstev. Ne 12, ale až 48. K tomu je potřeba udělat další tři kopie připravený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 toto číslo zkopírovat do dalších vrstev, dokud animace kruhu neskončí. Když se dostanete k další kopii vrstev, kde bude kruh opět zcela přemalován, musíte již umístit číslo dvě. Stejným způsobem zkopírujte jedničku do požadovaných vrstev. A když se dostanete k finálním vrstvám pro titulek Go!!!, stačí před zkopírováním titulku do požadované vrstvy odstranit kruh.


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


V okně s nastavením exportu nezapomeňte nastavit Export As: AI Layers na SWF Frames. Je to tato možnost, která změní vrstvy ilustrátoru na snímky animace. Poté klikněte na tlačítko Upřesnit.


Otevře další nastavení... Zde je třeba nastavit snímkovou frekvenci Frame Rate. Mám 12 snímků za sekundu. Zaškrtávací políčko Looping je zodpovědné za opakování animace. Díky ní se bude video přehrávat v kruhu. A možnost Pořadí vrstev: Zespodu nahoru reprodukuje vrstvy ilustrátora na panelu zdola nahoru. Přesně tak jsme postavili naši animaci.


Na výstupu získáme flash video s naší animací.

Nyní můžete vidět, že vytvořit jednoduchou animaci v Adobe Illustratoru 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žívat 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í flash přehrávače.

Roman aka dacascas konkrétně pro blog Notes of a microstock ilustrátor


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

Ahoj všichni! Dnes se pokusím popsat možnosti programu Adobe ilustrátor porovnáním se schopnostmi splachování. 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. Sbíral jsem informace kousek po kousku, když jsem je studoval, abych vše vložil do jednoho příspěvku. Hned se musím přiznat, že nejsem žádný superzkušený uživatel ilustrátoru, jen posledního půl roku ho používám v kresbě (předtím jsem vše maloval flash). Mnoho lidí si stěžuje, že ilustrátor je složitý, ne vždy intuitivně jasný. Do jisté míry souhlasím s tím, že po spláchnutí je tento program obtížný. Tady ale nejde hlavně o to skončit, ale pokračovat ve studiu. A po několika týdnech se objevila myšlenka, jak jsem se bez něj mohl obejít!

Takže to, co se mi na ilustrátoru líbilo a co jsem pro sebe zjistil, není ve Flashi.
1. Začnu tím nejjednodušším, ale zároveň nezbytným. Zkuste bleskově uspořádat předměty do kruhu. Byl dříve Deco nástroj, ale byl odstraněn, zřejmě považován za nepotřebný. Rozhodli jsme se, že bude zábavnější to udělat s pery. Illustrator má tuto funkci: Efekt – Deformace a transformace – Transformace.


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

2. Cik-cak

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

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

Ve flashi nic takového není. V příkladu níže jsem ukázal pouze 2 způsoby deformace jednoduchých tvarů (Efekt - Warp - Arc / Fish). Ve skutečnosti jich je v poslední verzi programu 15.

4. Automatické zaoblení rohů (Round Corners)

Můžete to udělat ručně: na grafickém objektu se po výběru objeví v rohu (u všech očí) bílý bod a symbol zaoblené čáry. Táhneme myší, upravíme dle chuti.

Ale to platí jen pro tvary, s linkou tužkou trochu jinak - aplikujte efekt zaoblení ( Efekt - Stylizace - Zaoblené rohy). Na výstupu dostaneme stejný výsledek.

5. Zdrsnit (zhrubnout)

Efekt se aplikuje na jednoduché formy (Efekt – Deformace a transformace – Zdrsnění). Na výstupu dostaneme něco, co připomíná low-poly 3D model. Podle mě pohoda :) 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átoru vůbec nepracuje s linkami tužkou.


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

9. Štětec na texturu

Illustrator také obsahuje spoustu texturových štětců, o kterých jsem psal a jak se v nich objevily nová verze spláchnout -. Bylo zjiště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... Nachází se v panelu nástrojů, velmi pěkný kartáč k použití. Má spoustu nastavení, líbí se mi to 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 Split to Grid (Object-Path-Split to Grid), která umožňuje rozřezat tvar na stejné segmenty. Co nám to připomíná? Je to tak - okna jsou ve výškové budově. Pokud jde o mě, super věc na kreslení například měst;)


Ještě jeden užitečný nástroj prezentováno v illustratoru, pravděpodobně od jeho prvního vydání. Může být použit k vytvoření například textur dřeva:

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

Posunutí objektu o zadanou vzdálenost. V případě potřeby 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.

Je velmi pohodlné vytvářet bezešvé vzory v Illustratoru ( Object-Pattern-Make). Pamatuji si, jak jsem byl bleskově zběsilý s tvorbou. V ilustrátorské verzi CC 2015 je vše zautomatizováno, hromada nastavení pomůže vytvarovat vzor v desítkách variací a mít po ruce jen pár grafických prvků. Ve více dřívější verze všechny programy se musely dělat ručně, jako dosud ve flashi.

(Poznámka – ze vzoru lze vytvořit vektorový upravitelný objekt pomocí funkce parse ( Objekt - rozbalte položku Vzhled).

14. Objektová mozaika

Vytvoření barevné palety na základě existujícího obrázku. Poté importujeme obrázek, který se vám líbí, do ill (Open). Objekt – Vytvořte mozaiku objektů... V nastavení určíme frekvenci dělení na výšku a šířku.

A na výstupu dostaneme:

15. Smíchejte

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

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

16. Nástroj Build Shape Tool. Velmi šikovná věc pro práci s primitivy. Bleskově se mi to zdálo méně pohodlné.

Podržením Alt a kliknutím na vybrané segmenty - segmenty smažte. Stačí táhnout myší přes několik vybraných oblastí - spojů.


Add-on je nástroj, který pomáhá automaticky stříhat, spojovat atd. zvýrazněné formuláře. Pokud jde o mě, není to příliš pohodlné, používám to častěji StavětTvarNářadí.

(kreslicí plátna)

18. Panel uživatelských nástrojů

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

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

19. Použití izometrie Grafické styly

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

Illustrator má s flashem společnou - možnost uložit objekt do symbolu a stejně snadno lze tento symbol přenést do flashe (otevřít .ai soubor ve flashi, např. Import – import do fáze).
Symbol v Illustratoru má stejné vlastnosti jako ve Flashi.
A na závěr napíšu, že v ilustrátoru je to podle mě podřadné než blesk. Ano, ano, a něco takového existuje. A toto je nástroj pro vyplnění ( Plechovka barvy). Bez ohledu na to, jak se snažím na to zvyknout v nemocné, je to pohodlnější ve flashi.
Pokud se vám mé poznámky staly užitečnými nebo pokud chcete přidat něco od sebe - vítejte v komentářích! Hodně štěstí všem;)

Optimalizace webové grafiky

Grafické informace se přenášejí 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á zajistí minimální velikost souboru při zachování požadované tento případ kvalita 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 optimalizačního procesu. Náhled dává 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 další, například fotografie, které mají být umístěny na web.

V okně se nastavují parametry optimalizace Uložit pro web(Save for Web) vyvolané stejnojmenným příkazem z nabídky Soubor(Soubor). Program nabízí použití jednoho ze čtyř režimů náhledu, ale pro hodnocení kvality optimalizace jsou nejvhodnější dva:

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

Oba režimy mohou výrazně ušetřit čas při hledání lepší varianta optimalizace, protože eliminují potřebu ukládat obrázky různá nastavení optimalizace a jejich následné vizuální porovnání. Navíc je možné hodnotit nejen kvalitu optimalizovaného obrazu, ale také jeho velikost a dobu načítání pro různé možnosti připojení. Pro srovnání je nejpohodlnější režim 4-Up (čtyři možnosti), který 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 umožňuje optimalizovat webovou grafiku nejen ve formátech GIF, JPG, PNG-8 a PNG-24, ale také ve formátech SWF a SVG. Indexované obrázky mající 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 barevně bohatou grafiku, jako jsou přechodové výplně – použijte formát JPG... Pro plnobarevné obrázky s průhlednými oblastmi použijte formát PNG který umožňuje ukládat indexované i plně barevné 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 je podobný 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í grafiku, text a interaktivní komponenty a lze je také optimalizovat.

Podívejme se na konkrétní příklad optimalizace obrazu. Řekněme, že logo webové stránky 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, jelikož v tomto případě dojde k automatickému oříznutí obrázku, který nebude zohledňovat skutečnou polohu výsledné deformace nápisu (obr. 4 a 5) .

Proto zkusme exportovat logo do formát PSD tým Soubor => Export(Soubor => Export) - 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). Vzhledem k omezenému počtu barev zapojených do obrázku je v tomto případě optimální formát GIF, s jehož konkrétním nastavením se musíte rozhodnout. Experimentováním s nastavením se můžete ujistit nejlepší kvalita poskytuje výchozí kompresní algoritmus programu Selektivní(Selektivní). Pokud jde o vyhlazování, vzhledem k přítomnosti přechodové 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ž průhlednost pozadí zůstane zachována, což lze snadno ověřit uložením obrázku ve formátu GIF spolu s HTML souborem (obr. 8). Výsledkem je, že v tomto příkladu byly soubory emblem.html a emblem.gif získány ve složce Primer1.

Tlačítka

Nepostradatelným specifickým prvkem designu každé webové stránky jsou grafické ovládací prvky - tlačítka. Bez nich si stránku prostě nelze představit. Tlačítka kreslení se dnes stala 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 mřížkové objekty a / nebo s překrývajícími maskami vypadají mnohem působivěji než obvykle.

Zvažme možnost vytvoření kulatého konvexního tlačítka v Illustratoru. Nakreslete vektorový objekt ve tvaru kruhu vyplněný libovolnou barvou (obr. 9) a pomocí příkazu jej převeďte na síť Objekt => Vytvořit síť přechodů(Object => Create Gradient Mesh) zadáním čtyř řádků a čtyř sloupců a v seznamu Vzhled(Zobrazit) výběrem možnosti Do centra Zvýraznit(Podsvícení) rovné 60 (obr. 10). Vyberte nástroj Přímý výběr a klikněte doleva horním rohu objekt se zvýrazněním tam umístěných uzlových bodů (obr. 11). Změňte barvu odpovídající buňky na bílou jejím 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ímto 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 jí černý okraj ( Mrtvice) 1-2 pixely na šířku a vyplňte 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é na něj bez odstranění výběru klikněte pravým tlačítkem a kontextová nabídka vybrat tým Uspořádat => Odeslat zpět(Uspořádat => Odeslat zpět). V důsledku toho získáte zářez pro tlačítko, jak je znázorněno na obr. čtrnáct.

Na každé webové stránce je zpravidla několik tlačítek stejného typu, lišících se například pouze směrem šipek na nich nakreslených, které označují směr pohybu po stránce. Zvažte nejjednodušší případ dvou tlačítek, z nichž jedno se šipkou dolů bude znamenat přesun na další strana a tlačítkem se šipkou nahoru přejděte na předchozí. Jako prázdnou šipku vezměte obyčejný trojúhelník nakreslený nástrojem Polygon(Polygon), vyplněný černou barvou a také zdobený jako síťovaný objekt pro větší efekt. Přesuňte šipku na tlačítko a pomocí odpovídajících tlačítek na paletě upravte polohu všech objektů vůči sobě Zarovnat(Zarovnání). První ze získaných tlačítek je znázorněno na Obr. 15. Vytvořte kopii vrstvy tlačítka výběrem příkazu Duplikovat vrstvu Vrstvy, - v důsledku toho získáme dvě stejné vrstvy. Poté na kopii vrstvy vyberte šipku a otočte ji o 180 ° výběrem příkazu Transformovat => Otočit- Transformace => Rotace. Získáme stejné tlačítko jako na obr. 16. Vezměte prosím na vědomí, že je mnohem pohodlnější uložit všechna tlačítka stejného typu jednoho projektu do jednoho souboru na různých vrstvách, což je ukázáno v tomto případě.

Nyní je třeba uložit optimalizované verze každého z 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 možnosti optimalizace tlačítka, například jak je znázorněno na obrázku 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 zviditelněte horní a stejným způsobem uložte druhé tlačítko a dejte mu jiný název. Výsledek je znázorněn na Obr. 19.

Nyní zbývá pouze zajistit, aby tlačítka na webové stránce vypadala dobře a umístit je na vlastní stránku (obrázek 20). Výsledkem je v tomto příkladu soubor Primer2.html a dva grafické obrázky ve složce images (složka Základní nátěr2).

Pokud je to žádoucí, během procesu optimalizace lze tlačítko snadno změnit na řez. V tomto případě po zvolení 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 plátků(Vyberte řez) a dvakrát klikněte na obrázek, který se nakonec automaticky změní na řez s pořadovým číslem 1 (obr. 21). Opětovným poklepáním myší se okno otevře Možnosti plátků(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 přivést stránku k životu, je představit prvky návrhu, které ji změní vzhled(nebo stavu) v závislosti na chování myši nebo méně často v případě jakýchkoli jiných situací: škálování, rolování, načítání, chyby atd.

Mezi takovými prvky jsou nejznámější rollovery (z anglického roll over - převalit se, převrátit se) - 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ý rollover není jeden, ale několik (až čtyři) obrázky, z nichž každý odpovídá určité události. Za hlavní události jsou považovány následující: Normální – normální stav, Přes – najetí kurzorem myši na prvek a Dolů – stisknutí levého tlačítka myši, když se nad ním kurzor nachází. Teoreticky se může jednat o události jako Click - uvolnění levého tlačítka myši po stisknutí, Up - po uvolnění tlačítka, Out - při opuštění aktivní zóny. V praxi se však často omezují na změnu prvku pouze pro první tři nebo dokonce dvě události.

Klasické rollovery

V klasickém smyslu je rollover série grafických obrázků ve formátu GIF a odpovídající HTML kód, díky kterému v závislosti na chování myši jeden obrázek nahrazuje jiný v okně prohlížeče.

Illustrator není určen k přímému vytváření klasických rolloverů, ale může vám pomoci navrhnout pro ně počáteční prvky. Cílem v tomto případě je 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 se exportuje do PSD souboru se zachovanými vrstvami, na jehož základě se v programu Image Ready vytvoří rollover. Výhodou použití Illustratoru, stejně jako v mnoha jiných případech, je řada jeho zajímavých funkcí, které v jiných nejsou dostupné. softwarové nástroje, ve spojení s pohodlím transformace vektorové grafiky.

Zkusme vytvořit rollover v podobě 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íkový tvar (obrázek 24), vytvořte jeho kopii a umístěte jej na volnou plochu obrazovky. Převeďte první kopii obdélníku na objekt mřížky se zvýrazněním uprostřed (příkaz Objekt => Vytvořit síť přechodů- Object => Create Gradient Mesh) zadáním čtyř řádků a deseti sloupců (obrázek 25). Aktivujte druhou kopii obdélníku a upravte pro ni přechodovou výplň přibližně tak, jak je znázorněno na Obr. 26. Promíchejte objekt s přechodem přes síť, snižte krytí objektu s přechodem na přibližně 80 % a jeho velikost na přibližně 1 pixel, abyste napodobili efekt hrbolků. A pak vytisknout přes objekty. V původní podobě nechejte mít bílou barvu, která bude odpovídat stavu Normální (obr. 27) a poté, když se změní stav rolloveru, barva titulku se změní např. na zelenou - při najetí myší přes něj ukazatelem myši (stav Over) a na modrou - při stisku tlačítka myši (stav Dolů).

Věnujte pozornost paletě Vrstvy- v této fázi je v něm pouze jedna jediná vrstva. Pomocí příkazu vytvořte dvě kopie této vrstvy Duplikovat vrstvu(Duplicate Layer) z nabídky palety Vrstvy, - v paletě budou tři vrstvy (obr. 28). Pak 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ý polotovar pro převrácení.

Pomocí příkazu exportujte vytvořený obrázek do formátu PSD se zachováním vrstev Soubor => Export(Soubor => Export) a výběr barevného modelu RGB (obr. 30). Vytvořený soubor PSD otevřete v ImageReady (obr. 31 a 32). Vytvořte snímky z vrstev výběrem příkazu Vytvářejte snímky z vrstev(Create Frames From Layers) z nabídky palety Animace... Okno Animace bude vypadat jako na obr. 33. Zároveň v paletě Převrácení zpočátku se vytvoří jeden normální stav.

Pak v okně Animace vyberte v paletě snímek odpovídající stavu visení Vrstvy vrstva se vybere automaticky Kopie vrstvy 1(obr. 34). Přejděte na paletu Převrácení a klikněte na tlačítko Vytvořit stav Rollover(Vytvořit stav převrácení) - obr. 35, což povede ke vzniku stavu Přes stát v paletě Převrácení(obr. 36). Stejným způsobem vytvořte stát Stav dole... Aktivujte stav Normální v paletě Převrácení a smazat v paletě Animace všechny rámečky kromě toho, který by měl odpovídat stavu Normální... Výsledkem je, že pro každý stav rolloveru v paletě Animace bude pouze jeden snímek (obr. 37, 38 a 39).

Rýže. 38. Pohled na obrázek, okno Animace a palety Vrstvy a Rollovery 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 přejděte do okna prohlížeče (Obrázek 40). Poté soubor uložte pomocí příkazu Soubor => Uložit optimalizovaný(Soubor => Uložit optimalizované) a zadáním volby HTML a obrázky (* .html)... Výsledkem je, že v tomto příkladu jsme získali soubor Primer4.html a sérii grafických obrázků ve složce images.

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

Převrácení SVG

Rostoucí obliba formátu SVG (Scalable Vector Graphics - škálovatelná vektorová grafika), vytvořeného na základě standardu XML, také umožňuje přijímat různé interaktivní prvky, zejména rollovery, jen v praxi je implementován zcela jinak. Za zmínku stojí, že tvorba interaktivních SVG rolloverů na rozdíl od těch klasických, kdy se odpovídající HTML kód generuje zcela automaticky, vyžaduje znalost jazyka 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.

Zvážit tato možnost vytvoření rolloveru pomocí příkladu interaktivního tlačítka, jehož barva titulku se změní z černé na modrou, když na něj myš najede, 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 vhodnou přechodovou výplň, například jak je znázorněno na Obr. 42. Upravte průhlednost tlačítka v paletě Průhlednost(Transparency) – v tomto příkladu hodnota parametru Neprůhlednost(Neprůhlednost) nastavena na 50 %. Vytvořte kopii tlačítka, vyplňte jej tmavě zelenou barvou (obr. 43) a poté jej převeďte na síťový objekt příkazem Objekt => Vytvořit síť přechodů(Object => Create Gradient Mesh) 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(Highlight) rovná 100. Snižte neprůhlednost vrstvy síťového objektu asi o 40 % (obr. 44). Umístěte síťový objekt na vrchol přechodu a tlačítko se bude podobat tomu, které je znázorněno na obr. 45.

Rýže. 44. Přeměna kopie tlačítka na objekt sítě

Doplňte tlačítko zamýšleným popiskem 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 překrývajícími se objekty (obrázek 46). Naplánované události budou odkazovat na textový objekt, takže pro usnadnění změňte jeho název na Text dvojitým kliknutím na objekt a zadáním nového názvu. Změňte název vrstvy stejným způsobem z Vrstva 1 do vrstvy(obr. 47).

Zpracování událostí předpokládá použití procedur JavaScriptu, takže musíte zahrnout soubor popisující tyto procedury. Jmenuje se Events.js a během instalace se uloží na disk do složky Sample Files \ Sample Art \ SVG \ SVG programy Adobe Ilustrátor. K připojení souboru Events.js použijte příkaz Soubory JavaScript Interaktivita SVG(obr. 48). Dále musíte stisknout tlačítko Přidat(Přidat) a najít požadovaný soubor na vašem pevném disku. Když se v poli objeví jeho jméno URL(obr. 49), klepněte na tlačítko Hotovo(Odhlásit se).

Rýže. 48. Výběr příkazu Soubory JavaScriptu

Poté byste měli definovat reakci na události myši pro objekt. Text... V poli vyberte objekt Text událost(událostní) palety Interaktivita SVG vyberte událost onmouseover elemColor (evt, "Text", "# 3333FF")- to znamená, ž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álostní) palety Interaktivita SVG... Poté do akčního řádku zadejte text elemColor (evt, "Text", "# 000000")- obnoví se černá (obr. 51).

Rýže. 51. Konečný pohled na paletu Interaktivita SVG pro objekt Text

Uložte vytvořený přechod jako soubor SVG pomocí příkazu Soubor => Uložit jako(Soubor => Typ souboru formát SVG a poté konfiguraci možností 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, nikoli 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 dodatečně zkopírovat soubor Events.js s popisem procedur JavaScriptu do složky se souborem SVG. Poté můžete zkontrolovat, zda převrácení funguje - výsledek bude vypadat jako na obr. 53.

SVG animace

Formát SVG lze také použít k přenosu animace. Zkusme si vytvořit jednoduchý animační prvek (v tomto případě to budou informace o firmě), který se na obrazovce objeví po najetí myší na příslušný grafický objekt a zmizí po sejmutí myši z interaktivního prvku.

Vytvořme řadu grafických a textových objektů, jako je ten na obr. 54. Přejmenovat pohodlný způsob všechny vytvořené objekty postupným kliknutím na název dalšího objektu v paletě Vrstvy a zadáním požadovaného jména (obr. 55). Vezměte prosím na vědomí, že zvýrazněný na Obr. 56 objektů - Text1, Text2, Text3 a Cesta1- bude vždy viditelné a všechny ostatní - pouze když najedete myší na objekt Text1.

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

Pomocí příkazu zahrňte soubor Events.js s popisem procedur JavaScriptu 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 Text1... Vyberte objekt Text, v terénu událost(událostní) palety Interaktivita SVG vyberte událost onmouseover a do řádku níže zadejte text elemShow (evt, "Text4"); elemShow (evt, "Cesta2")... V důsledku toho, když je myš nad objektem Text1 objekty budou viditelné Text4 a Cesta2... Vezměte prosím na vědomí, že pokud se má při výskytu události provést několik akcí, musí být specifikovány pomocí znaku ";". Potom proveďte podobnou operaci na události onmouseout zadáním textu pro něj, což bude znamenat skrytí objektů (obr. 57).

Uložte výsledek jako soubor SVG pomocí příkazu Soubor => Uložit jako(Soubor => Uložit jako) zadáním názvu souboru výběrem v poli Typ souboru formát SVG a poté konfiguraci možností pro uložení souboru SVG, jak je znázorněno na 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 znázorněný na obr. 59. To je téměř to, co potřebujete. Jediné, co nebylo v našich plánech zahrnuto, byl prvotní vzhled objektů. Text 4 a Cesta 2 při startu. Chcete-li se této chyby zbavit, vyberte oba datové objekty najednou a vytvořte pro ně akci. elemHide (evt, "Text4"); elemHide (evt, "Cesta2") na akci načíst(obr. 60). Uložte soubor znovu a ujistěte se, že objekty jsou nyní Text4 a Cesta2 viditelné pouze při najetí myší na objekt Text1.

GIF animace

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

Je velmi snadné vytvořit animaci založenou na prvcích 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 libovolného objektu symbolu, klíčové fáze procesu zvětšování objektu musí být nastaveny na samostatné vrstvy. Nejprve jednoduše umístěte objekty symbolů jeden nad druhý a poté zvětšete velikost každého dalšího objektu, například, jak je znázorněno na Obr. 61. V důsledku toho v paletě Vrstvy vznikne jedna vrstva s mnoha objekty (obr. 62). Pokud tento obrázek přímo vyexportujete do formátu PSD, neudělá to nic, protože vrstva je pouze jedna a samozřejmě, když otevřete soubor PSD v programu ImageReady, bude zde také pouze jedna vrstva. Proto musíte nejprve umístit objekty do různých vrstev. To lze provést různými způsoby – nejjednodušší 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 vnořeny do vrstvy. Vrstva 1... Proto budete muset ručně přetáhnout všechny vnořené vrstvy do horní části palety Vrstvy tak, aby byly nad vrstvou. Vrstva 1 a pak prázdnou vrstvu Vrstva 1 stačí vyjmout (obr. 63). Exportujte obrázek do formátu PSD pomocí příkazu Soubor => Export(Soubor => Export) 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 snímky z vrstev(Vytvářejte snímky z vrstev). V důsledku toho bude vytvořeno pět snímků, z nichž každý bude odpovídat své vlastní vrstvě a oknu palety Animace bude mít tvar jako na obr. 67.

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

Ještě pohodlnější je získat polotovary, které lze v ImageReady snadno proměnit v animaci, použijte funkce Živé směsi Software Illustrator. Toto kombinované použití Illustratoru a ImageReady výrazně urychluje proces vytváření animací GIF.

Nakreslete například dva libovolné vícebarevné objekty a poté je promíchejte s příslušnými parametry (obr. 69). Tento soubor nelze přímo použít k vytvoření animace, protože obrázek je v jedné vrstvě (obr. 70). Proto budete muset nejprve umístit každý prvek prolnutého objektu do samostatné vrstvy. K tomu v okně Vrstvy zvýraznit čáru , aktivujte nabídku palety kliknutím na černou šipku v jejím pravém horním rohu a vyberte příkaz Uvolněte do sekvence vrstev(Převést na vrstvy postupně) (obr. 71). Přidržením 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řesunem do košíku - ve výsledku 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 => Export(Soubor => Exportovat). Otevřete vytvořený soubor PSD v programu ImageReady (obr. 73). Upozorňujeme, že všechny vrstvy vytvořené v Illustratoru se objeví v okně vrstev (obr. 74) a v okně Animace zatím bude pouze jeden rám.

Aktivujte nabídku palety Animace kliknutím na černou šipku v pravém horním rohu palety a výběrem příkazu Vytvářejte snímky z vrstev(Vytvořit snímky z vrstev) – výsledkem bude v tomto příkladu pět snímků a okno palety Animace bude mít podobu podle obr. 75. Podržte stisknuté tlačítko a vyberte všechny snímky Posun a nastavte příslušnou dobu trvání snímku – v tomto příkladu se pro každý snímek bere stejná doba 0,2 s. Poté uložte optimalizovaný soubor pomocí příkazu Soubor => Uložit optimalizovaný(Soubor => Uložit optimalizované) 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 prolnutí. V tomto případě po vytvoření samostatných vrstev pro každý přechodový prvek přechodu umístěte všechny objekty na sebe pomocí tlačítek Vodorovné zarovnání na střed(horizontální zarovnání na střed) a Vertikální zarovnání na střed(Svislé zarovnání na střed). Zarovnat(obr. 77).

Exportujte vytvořený soubor do formátu PSD ( Soubor => Export- Soubor => Export) a otevřete vytvořený soubor PSD v programu ImageReady (obr. 78). Vytvářejte snímky animace založené na vrstvách ( Vytvářejte snímky z vrstev- Vytvořte snímky z vrstev) a vyberte pro ně vhodnou dobu trvání (obr. 79). A pak, aby byla animace efektivnější, zkopírujte existující snímky, ale v obrácené pořadí- aby se obraz nejprve zvětšoval a pak zmenšoval a tak dále v kruhu (obr. 80). Poté uložte optimalizovaný soubor ( Soubor => Uložit optimalizovaný- Soubor => Uložit s optimalizací). Výsledná animace je znázorněna na Obr. 81.

Rýže. 80. Stav okna Animace po duplikování snímků

Rýže. 81. Hotová animace

Flash File Format (SWF) je založen na vektorová grafika a je navržen pro škálovatelnou, kompaktní grafiku pro web. Vzhledem k tomu, že tento formát souboru je založen na vektorové grafice, objekt si zachovává kvalitu obrazu při jakémkoli rozlišení a je ideální pro vytváření snímků animace. V Illustratoru můžete vytvořit samostatné snímky animace na vrstvách a poté exportovat vrstvy obrazu jako samostatné snímky pro použití na vašem webu. Můžete také definovat symboly v souboru Illustratoru, abyste zmenšili velikost animace. Při exportu je každý symbol definován v souboru SWF pouze jednou.

Export příkazu (SWF)

Poskytuje největší kontrolu nad animací a bitovou kompresí.

Poskytuje větší kontrolu nad kombinací formátů SWF a bitmap ve fragmentovaném rozvržení. Tento příkaz nabízí méně možností obrázku než příkaz Export (SWF), ale používá poslední použitá nastavení pro příkaz Export (viz).

Při přípravě objektu pro uložení ve formátu SWF mějte na paměti následující pokyny.

Pomocí Device Central můžete vidět, jak bude kresba aplikace Illustrator vypadat v aplikaci. Flash Player na různých ručních zařízeních.

Vkládání kresby aplikace Illustrator

Kresbu vytvořenou v Illustratoru lze rychle, snadno a snadno zkopírovat a vložit do Flash.

Při vkládání grafiky z Illustratoru do Flash se zachovají následující atributy.

    Obrysy a tvary

  • Tloušťka čáry

    Definice gradientů

    Text (včetně písem OpenType)

    Související obrázky

  • Režimy míchání

Illustrator a Flash navíc při vkládání kresby podporují následující.

    Při výběru vrstev v kresbě Illustratoru nejvyšší úroveň a jejich vložení do Flash zachová vrstvy a jejich vlastnosti (viditelnost a blokování).

    Formáty barev Illustratoru bez RGB (CMYK, stupně šedi a vlastní formáty) jsou pomocí Flash převedeny na RGB. Barvy RGB se vkládají obvyklým způsobem.

    Při importu nebo vkládání kresby Illustratoru můžete použít různé volby k zachování určitých efektů (jako je stín vržený textem) jako filtry Flash.

    Flash ukládá masky aplikace Illustrator.

Export souborů SWF z aplikace Illustrator

Soubory SWF exportované z Illustratoru odpovídají kvalitě a kompresnímu poměru souborů SWF exportovaných z Flash.

Při exportu si můžete vybrat z řady předdefinovaných stylů pro optimální výstup a určit, jak se používá více kreslicích pláten, jak se převádějí symboly, vrstvy, text a masky. Symboly Illustratoru můžete například exportovat jako filmy nebo grafiku a vytvářet symboly SWF z vrstev Illustratoru.

Import souborů aplikace Illustrator do Flash

Chcete-li vytvořit kompletní rozvržení v Illustratoru a poté jej importovat do Flash v jednom kroku, můžete kresbu uložit v nativním formátu Illustratoru (AI) a importovat ji s vysokou věrností do Flash pomocí příkazů Soubor > Importovat do plochy nebo Soubor. > Importovat do knihovny.

Pokud váš soubor Illustratoru obsahuje více kreslicích pláten, vyberte kreslicí plátno k importu v dialogovém okně Import Flash a určete nastavení pro každou vrstvu v tomto kreslicím plátně. Všechny objekty na vybraném kreslicím plátně se importují do Flash program jako jedna vrstva. Když importujete jiné kreslicí plátno ze stejného souboru AI, objekty z tohoto kreslicího plátna se importují do Flash jako nová vrstva.

Při importu kresby Illustratoru jako AI, EPS nebo PDF příloha Flash zachovává stejné atributy jako při vkládání kresby Illustratoru. Pokud navíc importovaný soubor aplikace Illustrator obsahuje vrstvy, můžete je importovat jedním z následujících způsobů.

    Převeďte vrstvy Illustratoru na vrstvy Flash.

    Převeďte vrstvy Illustratoru na snímky Flash.

    Převeďte všechny vrstvy aplikace Illustrator do jedné vrstvy Flash.