Teraz si úlohu trochu skomplikujeme – urobme si animovaný Flash banner. Samozrejme, v tomto prípade nie je potrebné hovoriť o plnohodnotnej Flash animácii - na to existujú špecializované balíčky. Na vytvorenie jednoduchého amatérskeho videa však môžete použiť aj Illustrator.

V Adobe Illustrator nie sú žiadne špeciálne nástroje a nástroje rozhrania, ako napríklad časová os, ktoré sú typické pre programy na vývoj animácií. Ale je tu jedna jemnosť - vrstvy môžu byť použité ako rámy.

Vytvorte banner iba s textom.

1. Zoskupte symboly pomocou príkazu Objekt › Skupina(Objekt › Skupina).
2. Ďalšou úlohou je vytvoriť obrysové objekty zo znakov písma, inak nebude fungovať správne vytváranie vrstiev. Ak to chcete urobiť, vyberte skupinu a vyberte Typ › Vytváranie obrysov(Písmo › Trasa).
3. Potom otvorte ponuku palety Vrstvy(Vrstvy) kliknutím na tlačidlo v tvare šípky na palete (obr. 8.11).

Ryža. 8.11. Ponuka palety vrstiev

Nás zaujíma príkaz v tomto menu Uvoľnenie do vrstvy (sekvencia)(Convert to Layers (Sequentally)), ktorá prevedie každý jednotlivý objekt do novej vrstvy. Upozorňujeme, že pri použití príkazu je potrebné vybrať skupinu skupina, nie vrstva Vrstva 1.

Ako by mala paletka vyzerať Vrstvy(Vrstvy) po vykonaní Uvoľnenie do vrstvy (sekvencia)(Previesť na vrstvy (Sekvenčne)), znázornené na obr. 8.12.

Ryža. 8.12. Paleta vrstiev po uvoľnení do vrstvy (sekvencia)

Tým je príprava hotová, môžete ušetriť na používaní Uložiť pre web(Uložiť pre web) do SWF. SWF je hlavný grafický formát založený na technológiách Flash. Presnejšie by bolo povedať, že ide o formát Flash (obr. 8.13).

Pravdepodobne dnes všetci používatelia viac či menej poznajú Flash. V súčasnosti je to najbežnejší animačný formát na internete a používa sa na vytvorenie veľkej väčšiny multimediálnych webových stránok.

Samozrejme, ani desatina možností Flashu nie je implementovaná v Adobe Illustrator, pretože program na to nie je určený. V ňom však môžete urobiť buď statický obrázok, alebo jednoduchú animáciu.

Ryža. 8.13. Nastavenia optimalizácie pre formát SWF

Existujú nasledujúce nastavenia.

• Iba na čítanie(Len čítanie). Ak zaškrtnete políčko, súbor sa zapíše tak, že ho už nebude možné otvoriť na úpravu v žiadnom programe. To na jednej strane znižuje veľkosť súborov a na druhej strane chráni vaše autorské práva.
• Nastavenie označené 1. Parameter určujúci typ ukladania - obrázok alebo animácia.
• Ak zvolíte možnosť Súbor AI do súboru SWF(súbor Illustrator do súboru SWF), obrázok sa uloží ako statický obrázok presne taký, aký vidíte na obrazovke pri práci v aplikácii Illustrator.
• Vrstvy do rámov SWF(Vrstvy do snímok SWF) vám umožňuje animovať existujúce vrstvy, ktoré sa vykreslia ako snímky. Musíme zvoliť túto možnosť.
• Kvalita krivky(Kvalita kriviek). Presnosť kriviek opakujúcich súbor kriviek pôvodného obrázka. Znížením tohto nastavenia sa výrazne zníži kvalita, najmä v oblasti malých detailov, ale zníži sa veľkosť súboru. Pre náš prípad je optimálna hodnota „7“.
• snímok za sekundu(Oneskorenie snímky). Snímková frekvencia a v dôsledku toho rýchlosť animácie. Aby bol efekt správny, nenastavujte viac ako 4 snímky za sekundu.
• slučka(Opakujte). Prehrajte animáciu viackrát. Vhodné pre animácie, kde je dôležitá opakujúca sa slučka. Banner patrí k tomuto typu.

Adobe Illustrator a After Effects
Import a jednoduchá animácia

Ahoj. Dnes skúmame jednoduchú animáciu v After Effects.

Zdroje: Adobe Illustrator CC
Adobe After Effects CC

Začnime kreslením v Illustratore.

Kreslíme
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, dostaneme oblúk;
- nakreslite priamku, zatvorte spodnú časť oblúka a získame polkruh

Obrázok 2 - 1) nakresliť kruh; 2) gradient; 3) vymazať bod

3) Nakreslite obdĺžnik a vytvorte jeho kópiu
- jeden šedý obdĺžnik;
- ďalší tmavosivý obdĺžnik
4) Nakreslite trojuholník z hviezdičky nastavením počtu lúčov - 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 najviac HLAVNÉ moment
Rozdeľme obrázky do vrstiev (čo bude animované - na samostatnú vrstvu) takto:

Obrázok 5 - všetky obrázky (červená značka dôležitých vrstiev)

Všetko, teraz šetríme.
Pozrime sa na nastavenia ukladania

Obrázok 6 - Uložiť

A teraz ďalšia fáza. ZavrieťAdobe Illustrator a otvorte After Effects.

Importovať do After Effects
Súbor - Import - Súbor - vyberte náš uložený súbor Ilustrátor.
Vyberme si import vrstiev z Illustratora, ak vložíme zábery, dostaneme obrázok so zlúčenými vrstvami, ale toto nepotrebujeme.

Obrázok 7 - Importovať ako kompozíciu

Všetko dovezené.
Teraz sa pozrime, čo máme. Dvakrát kliknite na kompozíciu , čo by sa otvorilo a videli by sme vrstvy (ak bolo všetko urobené správne, vrstiev bude niekoľko). Chápeme to, pozri obrázok

Obrázok 8 - Otvorená kompozícia

A teraz to, na čo sme tu dnes - Animácia.

Animácia v po účinkoch
Nastavte otočný bod na šípku v jeho hornej časti pomocou nástroja Pan Behind Tool (skratka - Y). Stačí vziať bod a presunúť ho tam, kam chcete. 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.
Potrebujeme vrstvu Arrow a Head_cat.
Začnime šípkou.
Rozbaľte zoznam, nájdite hodiny a kliknite na ne. Takže dáme prvý bod na nula sekundy. Celkovo bude animácia trvať 2 sekundy.
Toto sú nastavenia, ktoré musíte vykonať (spolu dáme 3 body)

Po druhé	0	1	2
	+66	- 70	+66

Takto to bude vyzerať:

Obrázok 10 - Šípka otáčania

Teraz poďme animovať hlavu mačky.
Rozbaľte head_cat a nájdite pozícia.
Budú 4 body.
Zmení iba poslednú súradnicu bez toho, aby sa dotkol zvyšku.

Po druhé	0.1	0.17	1.12	2.0
pozícia	689.3	729.3	729.3	689.3

Pozrime sa na obrázok.

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 do seba, 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ý výrobok.
Prejdite do ponuky - Pridať do frontu na vykreslenie
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 (nezabudnite zadať cestu).
To je všetko.

Formát súboru Flash (SWF) je založený na vektorovej grafike a je určený pre škálovateľnú kompaktnú grafiku pre web. Keďže tento formát súboru je založený na vektorovej grafike, objekt si zachováva kvalitu obrazu pri akomkoľvek rozlíšení a je ideálny na vytváranie snímok animácií. V Illustratore môžete vytvárať jednotlivé snímky animácie vo vrstvách a potom exportovať vrstvy obrázkov ako samostatné snímky na použitie na webovej lokalite. Môžete tiež definovať symbolov v súbore aplikácie Illustrator, aby sa zmenšila veľkosť animácie. Pri exporte je každý symbol definovaný v súbore SWF iba raz.

Exportovať príkaz (SWF)

Poskytuje najväčšiu kontrolu nad animáciou a bitovou kompresiou.

Poskytuje väčšiu kontrolu nad zmesou SWF a bitmapových formátov vo fragmentovanom rozložení. Tento príkaz ponúka menej možností obrázka ako príkaz Export (SWF), ale používa naposledy použité možnosti príkazu Export (pozri ).

Pri príprave objektu na uloženie vo formáte SWF majte na pamäti nasledujúce pokyny.

Pomocou aplikácie Device Central môžete vidieť, ako budú kresby aplikácie Illustrator vyzerať v prehrávači Flash Player na rôznych vreckových zariadeniach.

Vloženie grafiky z aplikácie Illustrator

Grafický objekt vytvorený v aplikácii Illustrator je možné rýchlo, jednoducho a jednoducho skopírovať a vložiť do aplikácie Flash.

Keď prilepíte grafiku Illustratora do aplikácie Flash, zachovajú sa nasledujúce atribúty.

Obrysy a tvary

• Hrúbka ťahu

  Definície gradientov

  Text (vrátane fontov OpenType)

  Súvisiace obrázky

• Režimy miešania

Okrem toho aplikácie Illustrator a Flash podporujú nasledujúce funkcie pri vkladaní grafiky.

Výberom celých vrstiev najvyššej úrovne v kresbe aplikácie Illustrator a ich vložením do programu Flash sa zachovajú vrstvy a ich vlastnosti (viditeľnosť a blokovanie).

Farebné formáty aplikácie Illustrator iné ako RGB (CMYK, odtiene sivej a vlastné formáty) sú konvertované pomocou Flash na RGB. Farby RGB sa vkladajú bežným spôsobom.

Keď importujete alebo prilepíte kresbu aplikácie Illustrator, môžete použiť rôzne možnosti na uloženie určitých efektov (napríklad tieňa textu) ako filtrov Flash.

Flash uloží masky aplikácie Illustrator.

Exportujte súbory SWF z aplikácie Illustrator

Súbory SWF exportované z aplikácie Illustrator majú rovnakú kvalitu a kompresiu ako súbory SWF exportované z programu Flash.

Pri exporte si môžete vybrať z množstva preddefinovaných štýlov pre optimálny výstup a určiť, ako chcete použiť viaceré kresliace plátna, ako sa prevedú symboly, vrstvy, text a masky. Môžete sa napríklad rozhodnúť exportovať symboly Illustratora ako filmy alebo grafiku alebo vytvoriť symboly SWF z vrstiev Illustratora.

Importovanie súborov aplikácie Illustrator do aplikácie Flash

Ak chcete vytvoriť kompletné rozloženie v aplikácii Illustrator a potom ho v jednom kroku importovať do programu Flash, môžete svoju kresbu uložiť v natívnom formáte (AI) aplikácie Illustrator a importovať ju s vysokou presnosťou do programu Flash pomocou príkazov Súbor > Importovať do pracovného priestoru. oblasť“ alebo „ Súbor“ > „Importovať do knižnice“.

Ak súbor aplikácie Illustrator obsahuje viaceré kresliace plátna, v dialógovom okne Flash Import vyberte kresliace plátno, ktoré chcete importovať, a zadajte nastavenia pre každú vrstvu v tomto kresliacom plátne. Všetky objekty vo vybratom kresliacom plátne sa importujú do programu Flash ako jedna vrstva. Keď importujete ďalšie umelecké plátno z rovnakého súboru AI, objekty z tohto umeleckého plátna sa importujú do programu Flash ako nová vrstva.

Keď importujete kresbu Illustratora ako súbory AI, EPS alebo PDF, Flash si zachová rovnaké atribúty, ako keď prilepíte kresbu Illustratora. Ak importovaný súbor aplikácie Illustrator obsahuje vrstvy, môžete ich importovať jedným z nasledujúcich spôsobov.

Preveďte vrstvy Illustratora na vrstvy Flash.

Preveďte vrstvy aplikácie Illustrator na snímky Flash.

Preveďte všetky vrstvy aplikácie Illustrator na jednu vrstvu Flash.

Máte jednu alebo dve ikony, ktoré by ste chceli oživiť animáciou. kde by ste začali? Povedzme, že máte súbory SVG, Illustrator CC a After Effects CC, ale riešenie vám uniká.

V tomto článku vám ukážem, ako jednoducho animovať súbor SVG, vrátane prípravy súboru SVG v aplikácii Illustrator a jeho importovania do After Effects CC. Vysvetlím tiež, ako ho môžete previesť na vrstvy tvaru a pridať pohyb. A nakoniec si povedzme niečo o exportovaní a vykresľovaní.

Konečný výsledok práce.

Teraz prejdime k najzaujímavejšej časti – naučte sa animovať obrázky.

Príprava súboru SVG v aplikácii Illustrator

Začnime otvorením súboru SVG v aplikácii Adobe Illustrator CC. Budem animovať malú ikonu auta, ktorá je k dispozícii zadarmo na Week Of Icons.

Po otvorení súboru musíme rozčleniť a rozdeliť všetky objekty do vrstiev. Môžete to urobiť ručne alebo použiť Uvoľnenie do vrstiev (sekvencia) na urýchlenie procesu. Pred importovaním súboru do After Effects ho musíme uložiť vo formáte súboru Illustrator.

Objekty môžeme rozčleniť pomocou uvoľnenia do vrstiev (sekvencie), aby sme nestrácali drahocenný čas.

Importovanie a usporiadanie súboru v After Effects CC

Teraz ste pripravení na import do After Effects CC. Použime klávesovú skratku Ctrl+I (Windows) alebo Príkaz + I (Mac) na načítanie dialógového okna importovať súbor alebo prejdite na Súbor > Importovať > Súbor… Na tom istom mieste vyberte súbor Illustrator CC, ktorý sme pripravili, a kliknite importovať. Malo by sa zobraziť malé dialógové okno s názvom vybraného súboru. Vyberte zloženie z rozbaľovacieho zoznamu tzv Druh dovozu.

Rýchlejším spôsobom importovania súboru je dvojité kliknutie na umiestnenie stĺpca na paneli projektu.

Na paneli časovej osi uvidíme novú kompozíciu. Dvakrát naň klikneme. Teraz by sme mali vidieť vrstvy Illustrator CC s oranžovými ikonami naľavo od ich názvov.

Než sa pustíme do práce, musíme previesť všetky tieto vrstvy na tvarové vrstvy. Musíme ich všetky vybrať pomocou Ctrl+A/Command+A alebo manuálne pomocou Shift + ľavá myš. Potom kliknite pravým tlačidlom myši na vrstvu a vyberte ju Vytvoriť > Vytvoriť tvary z vektorovej vrstvy.

Teraz, keď sú vybraté nové vrstvy, presuňte ich do hornej časti panela nad vrstvami Illustratora CC a potom odstráňte vrstvy Illustratora CC, aby vám neprekážali.

Konverzia vrstiev Illustrator CC na vrstvy Shape v After Effects CC

Aj keď to nie je potrebné, je dôležité, aby sme každej vrstve dali vhodný názov a/alebo farbu. To nám umožní pracovať efektívnejšie, keď sa zameriame na kľúčové snímky. V nižšie uvedenom príklade sa farby štítkov viac-menej zhodujú s výplňami príslušných vrstiev.

Označovanie vrstiev tvaru vhodnými názvami, farbami, štítkami a polohami je veľmi praktické.

Na konfiguráciu nastavení použite klávesovú skratku Ctrl+K/Command+K alebo Kompozícia > Nastavenia kompozície… V nastaveniach kompozície musíme vybrať Šírka, Výška, Snímková frekvencia a Trvanie pre Šírka, Výška, Snímková frekvencia a Trvanie. Pre tento projekt som zvolil 60 fps, aby bola animácia plynulá.

V tejto chvíli sa zdá, že je všetko pripravené, no je tu ešte jedna vec, ktorú treba urobiť. Musíme zoskupiť určité vrstvy tak, aby ich pohyby boli synchronizované s hlavnou vrstvou, ktorú môžeme ovládať. Táto metóda sa nazýva rodičovstvo.

Pomocou Pick Whip priraďte rodičovskú vrstvu viacerým vrstvám.

V našom príklade som priradil menej významné vrstvy (detské vrstvy) ako čelné sklo, časti tela, drevo a laná k primárnej vrstve tela (nadradenej vrstve). To mi umožnilo ovládať polohu a otáčanie celého auta (okrem kolies) pomocou nadradenej vrstvy.

Tvorba animácií

Chcel som, aby auto narazilo na kameň a chvíľu viselo vo vzduchu. Tiež som chcel, aby sa strom pohyboval hore a dole a otvoril kmeň. Začal som stavbou kameňa, auta a kolies. Potom nastal čas prekonať najväčšiu prekážku – dať akciu na strom. Keď to bolo hotové, začal som pracovať na malých detailoch, ako je stojan a laná.

Náčrt popisujúci animáciu

Prvým krokom bolo vytvorenie skalného prvku alebo vrstvy, ale namiesto toho, aby som sa vrátil do aplikácie Illustrator CC a pridal ďalšiu vrstvu, použil som len nástroj Pen v After Effects CC. To mi umožnilo rýchlo navrhnúť malý kameň.

Oh, mocný nástroj pero!

Kufor bola pomerne jednoduchá úloha. Nainštaloval som ho na zadnú časť auta a urobil som kotviaci bod v ľavom dolnom vrchole. Pomocou Pick Whip som ho priradil k rodičovskej vrstve tela. Predposledným krokom bolo poskytnutie efektu rotácie, čím sa odrazový moment auta stal realistickejším Bodymovin v kombinácii s mobilnou knižnicou Lottie.

P.S. môžete nájsť moje súbory Illustrator CC a After Effects CC.

Sada ikon je k dispozícii na bezplatné stiahnutie na adrese .

Transparentný GIF v aplikácii Adobe Illustrator sa robí nasledovne. Prejdite do ponuky Súbor > Uložiť pre web a zariadenia (Alt+Ctrl+Shift+S). V okne, ktoré sa otvorí, v poli Optimalizovaný formát súboru musíte najskôr prejsť na kartu veľkosť obrázku(veľkosť obrázku). Faktom je, že celá stránka sa štandardne dostane do okna optimalizácie a zvyčajne to nie je potrebné. Preto na karte Veľkosť obrázka zrušte začiarknutie políčka Klip na Artboard(Orezať podľa veľkosti strany) a kliknite na tlačidlo Použiť.

Potom v zozname na výber formátu vyberte GIF 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é v záložke farebná tabuľka(Farebná tabuľka) a sú zobrazené ako farebné štvorce. Vyberte nástroj z panela nástrojov na ľavej strane okna kvapkadlo(pipeta).

Farby môžu byť definované dvoma spôsobmi. Najjednoduchšie je určiť farbu kvapkadlom priamo na obrázku - potom sa farba na tabuľke farieb zvýrazní tmavým ťahom. Ak presne viete, ktorá farba by mala byť priehľadná, môžete ju vybrať priamo v tabuľke farieb kliknutím na príslušné farebné pole. A v prvom a 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 Mapuje vybrané farby na priehľadné(Pridajte vybrané farby k priehľadnosti). Na obrázku je toto tlačidlo zakrúžkované a červená farba je nastavená na priehľadnú. Na obrázku sa objaví priehľadná oblasť a štvorec na tabuľke farieb zmení svoj vzhľad - z časti sa stane biely trojuholník. 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. Zodpovedá za to rozbaľovacia ponuka. Zadajte algoritmus rozkladu priehľadnosti, v ruštine - Algoritmus simulácie transparentnosti (obr. nižšie). Existujú štyri možnosti: Bez priehľadného rozkladu – žiadny algoritmus, Difúzny priehľadný rozklad – difúzny algoritmus, Rozklad priehľadnosti vzoru – algoritmus založený na vzore a Rozklad priehľadnosti šumu – algoritmus založený na šume. V režime difúzneho algoritmu sa posúvač aktivuje Suma(Množstvo), ktoré vám umožňuje zmeniť hodnotu difúzie. Čo aplikovať v praxi? V závislosti od účelu a obrazu. Túto možnosť nepoužívam a vždy nechávam predvolenú hodnotu – Bez priehľadnosti.

Stlačte 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é pre staršiu verziu CS3 (v.13).