Vytvorenie obrázka GIF s priehľadným pozadím v aplikácii Illustrator. Sprievodca: ako vytvoriť animáciu SVG s After Effects CC Ako vytvoriť animáciu v aplikácii illustrator

Formát súboru Flash (SWF) je založený na vektorová grafika a je navrhnutý 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é voľby 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 uvidíte, ako bude vyzerať grafika aplikácie Illustrator v aplikácii Flash Player na rôznych ručný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.

    Pri výbere vrstiev v kresbe aplikácie Illustrator špičková úroveň Vrstvy a ich vlastnosti (viditeľnosť a blokovanie) sú zachované po ich vložení do Flash aplikácie.

    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 svoje umelecké dielo uložiť v natívnom formáte aplikácie Illustrator (AI) a importovať ho s vysokou presnosťou do programu Flash pomocou položky Súbor > Importovať do pracovnom priestore 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 na vybranom kresliacom plátne sa importujú do Flash program 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.

Pri importovaní umeleckých diel Illustratora ako AI, EPS alebo PDF žiadosť Flash si zachová rovnaké atribúty ako pri vložení grafické objekty Ilustrátor. 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.

Teraz si úlohu trochu skomplikujeme – urobme si animovaný Flash banner. Hovorte o plnohodnotnej animácii Flash, v tento prípad, samozrejme, nie je to potrebné - existujú na to š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 aplikácie Illustrator v súbor SWF), obrázok sa uloží ako statický obrázok presne taký istý, 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 po účinkoch
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 v hornej časti šípky pomocou nástroja Pan Behind Tool ( klávesová 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íciu.
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íciu 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.

Ahoj! Dnes sa pokúsim urobiť popis funkcií programu Adobe Illustrator, v porovnaní so schopnosťami splachovania. Toto nebude globálna analýza programu kostí, ale skôr popis niektorých zaujímavých funkcií, ktoré som v tomto programe objavil. Zbieral som informácie kúsok po kúsku, keď som ich študoval, aby som to všetko dal do jedného príspevku. Hneď sa musím priznať, že nie som len super-skúsený ilustrátor posledných šesť mesiacov Používam ho pri kreslení (predtým som všetko kreslil flash). Mnohí sa sťažujú, že ilustrátor je zložitý, nie vždy intuitívny. Do istej miery súhlasím s tým, že po flashi je tento program ťažký. Ale tu nie je hlavné skončiť, ale pokračovať v štúdiu. A po pár týždňoch sa vynorí myšlienka, ako som to bez neho predtým dokázal!

Takže to, čo sa mi na ilustrátorovi páčilo a čo som pre seba našiel, nie je vo flashi.
1. Začnem tým najjednoduchším, no zároveň potrebným. Skúste bleskovo usporiadať objekty do kruhu. Predtým bol Deco nástroj, ale bol odstránený, zjavne považovaný za nepotrebný. Rozhodli sme sa, že bude zábavnejšie robiť to ručne. Illustrator má túto funkciu: Efekt – Deformácia & Transformácia – Transformácia.


Všetko je rýchle a jednoduché, hodnoty (vzdialenosť medzi objektmi, počet kópií) si nastavujeme sami v nastaveniach.

2. Cikcak

Ešte jednoduchšia, no predsa užitočná vec. Zdalo by sa to ako maličkosť, ale vo flashi musíte kresliť ručne, v ilustrátore je to otázka niekoľkých sekúnd.

3. Deformácia predmetov (Warp)

Vo Flashi nič také nie je. V príklade nižšie som ukázal len 2 spôsoby deformácie jednoduchých tvarov (Efekt - Warp - Oblúk / Ryba). V skutočnosti ich je 15. Najnovšia verzia programy.

4. Automatické zaoblenie rohov (Round Corners)

Dá sa to urobiť ručne: na grafickom objekte sa pri výbere v rohu (vo všetkých rohoch) zobrazí biela bodka a znak so zaoblenou čiarou. Ťahajte myšou, upravte podľa svojho vkusu.

Ale to platí len pre tvary, s linkou ceruzkou trochu inak - použite efekt zaoblenia ( Efekt - Štylizácia - Zaoblené rohy). Na výstupe dostaneme rovnaký výsledok.

5. Zdrsniť

Efekt sa aplikuje na jednoduché formy (Effect-Distor & Transform-Roughen). Výsledkom je niečo, čo sa podobá low-poly 3D modelom. Podľa mňa je to cool :) A hlavne - veľmi jednoduché.


6 Pucker&Bloat(Zatiahnite a nafúknite)
Príklad na obrázku nižšie:


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

V blesku je funkcia Expand Fill (rozšírenie výplne), tá na rozdiel od illustratoru vôbec nefunguje s čiarami ceruzkou.


8. Štetce (Art Brush, Pattern Brush, Scatter Brush)
Príklady nájdete na obrázku nižšie:

9. Štetec na textúry (Štetce na textúry)

V Ilustrátore je tiež veľa textúrových štetcov, o ktorých som písal a ako sa v nich objavili Nová verzia blesk - . Všimli sme si, že používanie štetcov v Adobe Animate je strašne pomalé. To je ono :(

10. Nie som si istý, či je to trik, ale chcem sa zamerať na štetec s vtipným názvom kvapkaKefa. Nachádza sa na paneli nástrojov, veľmi pekná kefa na použitie. Má veľa nastavení, páči sa mi to viac ako zvyčajne. Je ťažké vysvetliť jeho výhody slovami, je lepšie to raz vyskúšať.

10. Rozdeliť na mriežku

Ďalšou užitočnou funkciou je funkcia Split to Grid (Object-Path-Split to Grid), ktorá umožňuje rozrezať formulár na rovnaké segmenty. Čo nám to pripomína? Je to tak - okná vo výškovej budove. Pokiaľ ide o mňa, skvelá vec na kreslenie napríklad mestskej krajiny;)


Ďalší užitočný nástroj, prezentované v illustratoru, pravdepodobne od jeho prvého vydania. S ním môžete vytvárať napríklad textúry dreva:

12. Presun (vpravo - Transformácia - Presunúť)

Odsadenie objektu o danú vzdialenosť. V prípade potreby môžete okamžite vytvoriť kópiu, ktorá bude umiestnená v požadovanej vzdialenosti od vybraného objektu horizontálne / alebo vertikálne. Staršia verzia flashu mala doplnok, ktorý to umožňoval túto funkciu. Bohužiaľ si nepamätám jeho názov.

Je veľmi výhodné vytvárať bezšvové vzory v aplikácii illustrator ( Object-Pattern-Make). Pamätám si, ako som šialene exceloval vo flashi s tvorbou . V ilustrátore verzie CC 2015 je všetko zautomatizované, kopa nastavení vám pomôže vytvoriť vzor v desiatkach variácií len s niekoľkými grafickými prvkami po ruke. Vo viac skoré verzie programy sa museli robiť ručne, ako doteraz vo flashi.

(Poznámka – zo vzoru možno urobiť vektorový upraviteľný objekt pomocou funkcie analýzy ( Rozšírenie objektu).

14. Objektová mozaika (Mosaic)

Vytvorte paletu farieb na základe existujúceho obrázka. Potom importujte obrázok, ktorý sa vám páči, do ilustrácie (Otvoriť). Objekt - Vytvorenie mozaiky objektov. V nastaveniach určíme frekvenciu delenia na výšku a šírku.

A na výstupe dostaneme:

15. Miešanie (miešanie)

Používa sa na vytváranie prechodov. Môžete vytvárať prechody krok za krokom, ako napríklad na obrázku. Nemôžem povedať, že by som ho používal často, ale niekomu sa môže hodiť. Zdá sa mi, že sa dá použiť pri vytváraní jednoduchých obrázkov na pozadí.

Nástroj je možné použiť aj na klonovanie objektov. Umiestnime dva objekty do určitej vzdialenosti od seba a aplikujeme Možnosti prelínania, zvolíme počet krokov (počet klonovaných objektov).

16. Nástroj na vytvorenie tvaru. Veľmi šikovná vecička na prácu s primitívmi. Bleskovo, ako sa mi zdalo, je to menej pohodlné.

Podržte Alt a kliknite na vybrané segmenty - odstráňte segmenty. Ak jednoducho potiahneme myšou cez niekoľko vybraných oblastí – spojov.


Prídavok - nástroj, ktorý pomáha automaticky rezať, spájať atď. vybrané formuláre. Pokiaľ ide o mňa, nie je to veľmi pohodlné, používam to častejšie Stavaťtvarnástroj.

(artboardy)

18. Panel vlastných nástrojov

Možnosť vytvoriť si vlastný panel nástrojov, vyhodiť nepotrebné a vybrať len tie, ktoré používate.

Vo flash, umelecké plátna, menovite scény ( Scéna 1,2,3..) sú umiestnené samostatne a je potrebné medzi nimi prepínať (Shift + F2). V aplikácii Illustrator ich možno všetky umiestniť pred vašimi očami. Je vhodné, keď vytvoríte niekoľko verzií toho istého výkresu, takže všetky možnosti sú pred vašimi očami na porovnanie.

19.Izometria s Grafickýštýlov

A posledná vec je vytvorenie izometrie bez použitia 1 kliknutia (alebo skôr 3 kliknutí, pretože máme 3 strany;) pomocou grafických štýlov ( Grafické štýly). Ako sa to robí, napíšem nabudúce.

Ilustrátor má spoločné s flashom možnosť uložiť objekt do symbolu (symbolu) a tento symbol je možné bez problémov preniesť aj do flashu (otvorte súbor .ai vo flashi, napr. Import – import do fázy).
Symbol v ilustrátore má rovnaké vlastnosti ako vo flashi.
A nakoniec napíšem, čo je podľa môjho názoru v ilustrátore horšie ako flash. Áno, áno, a existuje. A toto je nástroj na vyplnenie ( plechovka farby). Bez ohľadu na to, ako veľmi sa snažím zvyknúť si na to v illa, je to pohodlnejšie vo flashi.
Ak sa pre vás moje poznámky stali užitočnými alebo ak chcete pridať niečo vlastné - vitajte v komentároch! Veľa šťastia všetkým ;)

Dnes to nemáme celkom obvyklé lekcia Adobe Ilustrátor. Pretože tentokrát neurobíme statický obrázok, ale skutočnú animáciu. Predstavte si, že to dopadne pomoc od Adobe Ilustrátor vie kresliť aj karikatúry :)

A na to nepotrebujeme nič. Kompetentná organizácia vrstiev a export výslednej práce do formátu swf, kde je každá vrstva prevedená na rámček animácie. V dnešnom návode nakreslíme animáciu odpočítavania v štýle retro filmu. Výstupom by mal byť flash film s rovnakým odpočítavaním.

Prvá vec, ktorú musíte urobiť, je nakresliť všetky potrebné prvky pre budúcu animáciu. Aby som to urobil, v samostatnom dokumente som vytvoril dve pozície filmového rámčeka, kruh pre referenciu, ktorý je rozrezaný na samostatné sektory, textúru a zvislý škrabanec na pridanie efektu staroveku, ako aj všetky čísla a nápisy.

Keď sú všetky časti našej karikatúry pripravené, môžete začať vytvárať samotnú animáciu. Pre pohodlie je to najlepšie urobiť v novom dokumente. V tomto prípade budú vrstvy hrať úlohu animačných snímok. A hneď v prvej vrstve stačí skopírovať rámik filmu. Umiestnite ho do stredu pracovnej oblasti.


Teraz vytvorte druhú vrstvu a skopírujte do nej rámik filmu, v ktorom sú otvory na okrajoch vytvorené s posunom. Treba to aj vycentrovať.


Z týchto dvoch vrstiev už môžete získať animáciu pohyblivého filmu. Neskôr však budeme potrebovať oveľa viac vrstiev. Vyberte teda prvé dve vrstvy, prejdite na možnosti panela a vytvorte kópiu vrstiev.


Podobným spôsobom musíme nahromadiť 12 vrstiev s filmovými políčkami, ktoré definujú jeho pohyb.


Teraz máme veľa vrstiev a všetky sú viditeľné. V tom zmysle, že horné vrstvy blokujú spodné, čo nie je príliš vhodné na prácu. Preto môžete niektoré vrstvy vypnúť kliknutím na ikonu oka naľavo od názvu vrstvy. Ak chcete vypnúť alebo zapnúť všetky vrstvy naraz, podržte stlačený kláves Alt a súčasne kliknite na ikonu oka. Zapínaním a vypínaním vrstiev môžete presne vidieť, čo sa nachádza v určitom rámci našej budúcej animácie. A teraz, aby sme k pohybu filmu pridali mierny otras, musíme prijaté snímky mierne posunúť v rôznych smeroch. Ak to chcete urobiť, zapnite iba vrstvu, s ktorou budete pracovať tento moment a potom posuňte rám o niekoľko pixelov na obe strany.


Keď prejdete všetkými vrstvami a pridáte malý posun, môžete začať vytvárať animáciu pohybujúceho sa kruhu. Ak to chcete urobiť, skopírujte kruh pozostávajúci zo sektorov z dokumentu s časťami karikatúry a umiestnite ho na prvú vrstvu v hornej časti rámika filmu.


Ak odstránite výber z kruhu, bude vyzerať ako jeden celok. Presne toto potrebujeme.


Ale keďže pozostáva zo samostatných sektorov, je možné zmenou ich farby vytvoriť animáciu veľmi rýchlo a jednoducho. Za týmto účelom skopírujte tento kruh do druhej vrstvy a urobte ľahší prvý sektor. Pamätáte si, že fólia sa pri pohybe trasie, takže nie je potrebné dávať kruh presne do stredu rámu. Priložte ho na oko.


Podobne je potrebné skopírovať kruh do každej ďalšej vrstvy, pričom maľovať svetlejšou farbou o jeden sektor viac ako predtým. Spolu týchto 12 vrstiev tvorí animáciu pohybu filmu s výplňovým kruhom.


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


Potom postupne zapnite ďalšie vrstvy a skopírujte tam rovnakú textúru. Aby to vyzeralo na každom ráme inak, stačí ho otočiť o 90 stupňov. Ako ste možno uhádli, do všetkých 12 snímok musíme pridať textúru.


Ak ste už dosť unavení z kopírovania, môžem vás potešiť - zostáva toho veľmi málo. Najťažšia časť je za nami. Zostáva pridať vertikálne škrabance a takmer všetko. Ak to chcete urobiť, znova skopírujte pôvodný škrabanec a vložte ho na ľubovoľné miesto v niekoľkých vrstvách. V mojom prípade sa škrabance objavia už v dvoch vrstvách.


Teraz, keď je hotový hlavný cyklus s filmovou animáciou, zostáva doplniť čísla. Keďže počítame od 3 do 1 plus slovo Go!!!, potrebujeme ešte viac vrstiev. Nie 12, ale až 48. Na to je potrebné urobiť ešte tri kópie pripravených vrstiev s filmovou animáciou.


A potom je všetko jednoduché. Zapnite úplne prvú vrstvu a vložte tam číslo tri.


Potom musíte tento obrázok skopírovať do ďalších vrstiev, kým sa animácia kruhu neskončí. Keď sa dostanete k ďalšej kópii vrstiev, kde bude kruh opäť úplne vyplnený, musíte zadať číslo dva. Rovnakým spôsobom skopírujte číslo jeden do požadovaných vrstiev. A keď sa dostanete ku konečným vrstvám pre štítok Go!!!, pred skopírovaním štítku na požadovanú vrstvu kruh jednoducho odstráňte.


To je všetko s animáciou. Tu hlavnou vecou nie je zmiasť sa. Môžete dať vrstvám nejaké vhodné názvy, ale bola som akosi príliš lenivá :) A predsa, keď budete hotoví, nezabudnite všetky vrstvy znova zapnúť kliknutím na ikonu oka.


V okne nastavení exportu nezabudnite nastaviť Exportovať ako: Vrstvy AI na Rámce SWF. Práve táto možnosť premení vrstvy aplikácie Illustrator na snímky animácie. Ďalej kliknite na tlačidlo Rozšírené.


Otvorí dodatočné nastavenia. Tu musíte nastaviť Frame Rate. Mám 12 snímok za sekundu. Zaškrtávacie políčko Looping je zodpovedné za cyklovanie animácie. Vďaka nej sa bude video prehrávať v kruhu. A možnosť Layer Order: Bottom Up vykreslí vrstvy ilustrátora zdola nahor na paneli. Presne takto sme postavili našu animáciu.


Výsledkom je flashový film s našou animáciou.

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

Ale na vytváranie dlhých videí alebo interaktívnych aplikácií je stále lepšie použiť Adobe Flash alebo iné flash editory. Napríklad túto mačku som vyrobil v starom Macromedia Flash, ktorý som vykopal v práci.

V poslednej dobe sa HTML5 a CSS3 čoraz častejšie používajú na vytváranie animácií. Tento kód je podporovaný moderné prehliadače a nevyžaduje použitie flash prehrávača.

Roman alias dacascas hlavne pre blog


Prihláste sa na odber noviniek, aby vám nič nové neuniklo: