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 animačných snímok. V aplikácii Illustrator 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 formátov SWF a bitmap 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.
Hrúbka ťahu
Definície gradientov
Text (vrátane fontov OpenType)
Súvisiace obrázky
Režimy miešania
Obrysy a tvary
Illustrator a Flash navyše 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ňov vrhaných textom) 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 sa použijú viaceré kresliace plátna, ako sa prevedú znaky, vrstvy, text a masky. Môžete sa napríklad rozhodnúť exportovať symboly aplikácie Illustrator ako filmy alebo grafiku alebo vytvoriť symboly SWF z vrstiev aplikácie Illustrator.
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. Súbor“ > „Importovať do knižnice“.
Ak Súbor Illustrator obsahuje viaceré kresliace plátna, v dialógovom okne Import programu Flash 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 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 aplikácie Illustrator 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.
Adobe Illustrator a po účinkoch
Import a jednoduchá animácia
Ahoj. Dnes si pozrieme 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 etapa. 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.
Takže toto sú nastavenia, ktoré musíte vykonať (spolu dáme 3 body)
| Po druhé | 0 | 1 | 2 |
| +66 | - 70 | +66 |
Obrázok 10 - Šípka otáčania
Teraz poďme animovať hlavu mačky.
Rozbaľ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 |
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ý produkt.
Prejdite do ponuky - Pridať do fronty 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.
Optimalizácia webovej grafiky
Grafické informácie sa prenáša oveľa pomalšie ako text a čas načítania obrázkov je úmerný ich veľkosti grafické súbory. Preto rýchle načítanie Webové stránky vyžadujú malú veľkosť grafických obrázkov vložených do nich, čo sa dosahuje ich optimalizáciou. Optimalizáciou obrazu sa rozumie jeho transformácia, ktorá poskytuje minimálnu veľkosť súboru pri zachovaní v tomto prípade požadovanej kvality obrazu, čo sa dosahuje predovšetkým znížením počtu farieb v grafických obrázkoch, použitím komprimovaných a špeciálnych formátov súborov a optimalizáciou nastavení kompresie pre jednotlivé fragmenty obrazu.
Illustrator má vstavané nástroje na optimalizáciu obrázkov, ktoré poskytujú rôzne metódy ukážte rýchly a efektívny proces optimalizácie. Náhľad poskytuje pomerne presnú predstavu o tom, ako bude optimalizovaný obrázok vyzerať v reálnom čase, čo pomáha vyhodnotiť výsledok optimalizácie a zvoliť správne nastavenia. Môžete optimalizovať obrázky vytvorené priamo v aplikácii Illustrator a ďalšie, napríklad fotografie, ktoré chcete umiestniť na webovú lokalitu.
V okne sa nastavujú parametre optimalizácie Uložiť pre Web(Save for Web), vyvolané rovnomenným príkazom z ponuky Súbor(Súbor). Program ponúka použitie jedného zo štyroch režimov náhľadu, ale dva sú najlepšie na vyhodnotenie kvality optimalizácie:
- 2-Up(dve možnosti) súčasné prezeranie originálu a optimalizovaného obrazu v súlade so špecifikovanými nastaveniami (obr. 1);
- 4-up(štyri možnosti) V tomto režime je oblasť zobrazenia rozdelená na štyri okná (obr. 2) na zobrazenie pôvodného obrázka a troch verzií optimalizovaného: prvá verzia sa vytvorí na základe nastavených hodnôt optimalizácie a ďalšie dve sú možnosti pre aktuálne nastavenia optimalizácie.
Oba režimy vám umožňujú výrazne ušetriť čas pri hľadaní. najlepšia možnosť optimalizácia, pretože eliminujú potrebu ukladať obrázky rôzne nastavenia optimalizácia a ich následné vizuálne porovnanie. Okrem toho je možné hodnotiť nielen kvalitu optimalizovaného obrazu, ale aj jeho veľkosť a čas sťahovania pre rôzne možnosti pripojenia. Pre porovnanie je najpohodlnejší režim 4-Up (štyri možnosti), ktorý umožňuje vizuálne vyhodnotiť vplyv kompresie alebo zmenšenia palety na kvalitu a veľkosť obrazu a v konečnom dôsledku určiť najlepšie parametre optimalizácie.
Illustrator vám umožňuje optimalizovať webovú grafiku nielen vo formátoch GIF, JPG, PNG-8 a PNG-24, ale aj vo formátoch SWF a SVG. Indexované obrázky s malým počtom farieb sa uložia vo formáte GIF. Ak chcete uložiť plnofarebné obrázky a obrázky v odtieňoch sivej, použite fotografie a farebne bohatú grafiku, ako sú prechodové výplne formát JPG. Pre plnofarebné obrázky s priehľadnými oblasťami použite formát PNG, ktorý umožňuje ukladať indexované aj plnofarebné obrázky, pričom v PNG-8 je maximálny možný počet farieb optimalizovaného obrázku 256 a v PNG-24 môže mať obrázok milióny farieb, a preto vyzerá ako formát jpeg. Rozdiel medzi PNG-24 a JPEG je v tom, že metóda kompresie použitá na optimalizáciu obrázkov PNG-24 nevedie k strate kvality, ale zvyšuje veľkosť súboru. Formáty SVG a SWF kombinujú grafiku, text a interaktívne komponenty a možno ich tiež optimalizovať.
Zvážte konkrétny príklad optimalizácia obrazu. Povedzme, že v programe Illustrator bol vyvinutý emblém stránky (obr. 3), pôvodne uložený vo formáte AI. Pokus o okamžitú optimalizáciu pre web nepovedie k ničomu dobrému, pretože v tomto prípade sa to stane automatické rezanie obrázok, ktorý nebude brať do úvahy skutočnú polohu nápisu získanú v dôsledku deformácie (obr. 4 a 5).
Skúsme preto pomocou príkazu exportovať emblém do formátu PSD Súbor=>Exportovať(Súbor=>Exportovať) Veľkosť vygenerovaného obrázka bude 143 KB. Otvorte výsledný súbor PSD a použite príkaz Súbor=>Uložiť pre web(Súbor=>Uložiť pre web). Vzhľadom na obmedzený počet farieb zahrnutých v obrázku je v tomto prípade optimálny formát GIF, s ktorého konkrétnymi nastaveniami sa musíte rozhodnúť. Experimentovaním s nastaveniami to môžete vidieť najlepšia kvalita poskytuje predvolený kompresný algoritmus programu selektívne(Selektívne). Pokiaľ ide o vyhladzovanie, potom je vzhľadom na prítomnosť gradientovej výplne lepšie zvoliť algoritmus s generovaním šumu hluk(obr. 6). Veľkosť výsledného optimalizačného súboru bude 6,729 KB (obr. 7), pričom zostane zachovaná priehľadnosť pozadia, čo si ľahko overíte uložením obrázka GIF spolu s HTML súborom (obr. 8). Výsledkom je, že v tomto príklade boli súbory emblem.html a emblem.gif získané v priečinku Primer1.
Tlačidlá
Nevyhnutným špecifickým dizajnovým prvkom každej webovej stránky sú grafické ovládacie tlačidlá. Je jednoducho nemožné si predstaviť stránku bez nich. Tlačidlá na kreslenie sa dnes stali špeciálnym žánrom a Illustrator vám umožňuje vytvárať tie najzložitejšie možnosti. Napríklad tlačidlá navrhnuté ako objekty mriežky a (alebo) s maskami vyzerajú oveľa efektívnejšie ako zvyčajne.
Zvážte možnosť vytvorenia okrúhleho vyvýšeného tlačidla v aplikácii Illustrator. Nakreslite vektorový objekt vyplnený ľubovoľnou farbou v tvare kruhu (obr. 9) a pomocou príkazu ho preveďte na mriežku Object=>Vytvoriť sieť prechodov(Object=>Create Gradient Mesh) zadaním štyroch riadkov a štyroch stĺpcov a v zozname Vzhľad(Zobraziť) výberom možnosti Do centra Zlatý klinec(Podsvietenie) na 60 (Obrázok 10). Vyberte si nástroj Priamy výber a kliknite do ľavého horného rohu objektu a vyberte tam umiestnené kotviace body (obr. 11). Zmeňte farbu zodpovedajúcej bunky na bielu tak, že ju vyberiete v palete Vzorkovníky(obr. 12).
Vezmite si nástroj Elipsa(Elipsa), nastavte značku myši do stredu kruhu vytvoreného predtým a držte stlačené klávesy alt A Shift, natiahnite nový kruh na starý kruh tak, aby bol väčší ako starý o 1-2 pixely na všetkých stranách. Urobte z neho čierny okraj Mŕtvica) 1-2 px na šírku a vyplňte ho radiálnym prechodom od červenej k bielej (obrázok 13). Potiahnite vytvorený vektorový objekt o 1-2 pixely doprava a nadol, potom bez odstránenia výberu kliknite naň pravým tlačidlom myši a z obsahové menu vyberte tím Usporiadať=>Odoslať späť(Usporiadať => Odoslať späť). V dôsledku toho dostaneme polotovar pre tlačidlo znázornené na obr. 14.
Na každej webovej stránke je spravidla niekoľko tlačidiel rovnakého typu, ktoré sa líšia napríklad iba smerom šípok na nich nakreslených, ktoré označujú smer pohybu po stránke. Zvážte najjednoduchší prípad dvoch tlačidiel, z ktorých jedno so šípkou nadol znamená prechod na ďalšiu stránku a tlačidlo so šípkou nahor na predchádzajúcu. Ako polotovar pre šípku si vezmime pravidelný trojuholník nakreslený nástrojom Polygón(Polygón) vyplnený čiernou farbou a tiež v štýle sieťovaného objektu pre väčší efekt. Presuňte šípku na tlačidlo a upravte polohu všetkých objektov voči sebe pomocou príslušných tlačidiel na palete Zarovnať(Zarovnanie). Prvé z prijatých tlačidiel je znázornené na obr. 15. Vytvorte kópiu vrstvy pomocou tlačidla výberom príkazu Duplicitná vrstva Vrstvy v dôsledku toho získame dve identické vrstvy. Potom vyberte šípku na kópii vrstvy a otočte ju o 180° výberom príkazu z kontextovej ponuky Transformácia=>Otočiť Transformácia=>Otočiť. Dostaneme rovnaké tlačidlo ako na obr. 16. Upozorňujeme, že je oveľa pohodlnejšie uložiť všetky tlačidlá rovnakého typu jedného projektu do jedného súboru na rôznych vrstvách, čo je demonštrované v tomto prípade.
Teraz musíte uložiť optimalizované možnosti pre každé z tlačidiel. Najprv urobte spodnú vrstvu neviditeľnou, v tomto prípade tlačidlo na hornej vrstve zostane zachované. Vyberte si tím Súbor=>Uložiť pre web(Súbor=>Uložiť pre web), nakonfigurujte parametre optimalizácie tlačidiel, napríklad ako je znázornené na obr. 17, kliknite na tlačidlo Uložiť(Uložiť) a zadajte názov súboru. Tlačidlo uložené ako výsledok je znázornené na obr. 18. Teraz urobte spodnú vrstvu viditeľnou, vrchnú vrstvu urobte neviditeľnou a rovnakým spôsobom uložte druhé tlačidlo s iným názvom. Výsledok je znázornený na obr. 19.
Teraz už zostáva len uistiť sa, že tlačidlá vyzerajú na webovej stránke dobre a umiestniť ich na vlastnú stránku (obrázok 20). Výsledkom je, že v tomto príklade sa súbor Primer2.html a dva grafické obrázky získali v priečinku obrázky (priečinok Primer2).
Ak je to potrebné, počas procesu optimalizácie možno tlačidlo ľahko zmeniť na plátok. V tomto prípade po výbere príkazu Súbor=>Uložiť pre web(Súbor => Uložiť pre web) a nastavenia optimalizácie by sa mali vybrať z nástroja palety nástrojov Slice Select(Výber plátku) a dvakrát kliknite na obrázok, ktorý sa automaticky zmení na plátok s poradovým číslom 1 (obr. 21). Opätovným dvojitým kliknutím sa okno otvorí Možnosti rezu(Možnosti výrezu), v ktorom budete musieť zadať prepojenie a v prípade potreby zmeniť názov výrezu (obr. 22) a potom uložiť optimalizovaný obrázok. Výsledkom budú v tomto prípade súbory Primer3.html (obr. 23) a Primer3.gif (priečinok Primer3).
Interaktívne prvky
Jedným zo spôsobov, ako okoreniť stránku, je predstaviť dizajnové prvky, ktoré ich menia vzhľad(alebo stavu) v závislosti od správania myši alebo zriedkavejšie v prípade akýchkoľvek iných situácií: približovanie, posúvanie, načítanie, chyby atď.
Spomedzi týchto prvkov sú najznámejšie rollovery (z anglického roll over to roll, roll over) prvky, ktoré vplyvom myši menia svoj vzhľad. Animované tlačidlá sú príklady typických prevrátení. Prechody sa často používajú pri vytváraní iných prvkov navigácie na lokalite. V skutočnosti každý rollover nie je jeden, ale niekoľko (až štyri) obrázkov, z ktorých každý zodpovedá konkrétnej udalosti. Za hlavné udalosti sa považujú tieto: Normálny normálny stav, Presunutie kurzora myši nad prvok a stlačenie ľavého tlačidla myši, keď nad ním prejdete. Teoreticky môžu ísť o udalosti ako Kliknutie uvoľnenie ľavého tlačidla myši po kliknutí, Hore po uvoľnení tlačidla, Out pri opustení aktívnej zóny. V praxi sa však častejšie obmedzuje na zmenu prvku len pre prvé tri alebo dokonca dve udalosti.
Klasické rollovery
Rollover je v klasickom ponímaní séria grafických obrázkov vo formáte GIF a ich zodpovedajúceho HTML kódu, vďaka čomu v závislosti od správania myši jeden obrázok nahrádza druhý v okne prehliadača.
Illustrator nie je navrhnutý tak, aby priamo vytváral rollovery v klasickom zmysle slova, ale môže pomôcť s vývojom počiatočných prvkov pre ne. Myšlienkou v tomto prípade je vytvoriť vrstvu s obrázkom zodpovedajúcim prvej udalosti. Potom vytvorte kópiu vrstvy a transformujte obrázok tak, aby zodpovedal druhej udalosti atď. Výsledný vrstvený obrázok sa exportuje do PSD súboru so zachovanými vrstvami, na základe čoho sa vytvorí rollover v Obrazový program Pripravený. Výhodou používania Illustratoru, ako v mnohých iných prípadoch, je množstvo jeho zaujímavých funkcií, ktoré v iných nie sú dostupné. softvérové nástroje, spolu s pohodlím transformácie vektorovej grafiky.
Skúsme vytvoriť rollover vo forme nápisu, ktorý mení farbu v závislosti od správania myši. Otvorte Illustrator a vytvorte tvar v podobe zaobleného a vyplneného čiernym obdĺžnikom (obr. 24), vytvorte jeho kópiu a umiestnite do voľnej časti obrazovky. Skonvertujte prvú kópiu obdĺžnika na objekt mriežky so zvýraznením v strede (príkaz Object=>Vytvoriť sieť prechodov Object=>Create Gradient Mesh) s uvedením štyroch riadkov a desiatich stĺpcov (obr. 25). Aktivujte druhú kópiu obdĺžnika a nastavte pre ňu prechodovú výplň, podobnú tej, ktorá je znázornená na obr. 26. Prekryte objekt s prechodom cez sieť, znížte nepriehľadnosť objektu s prechodom na približne 80 % a veľkosť objektu s prechodom na približne 1 pixel, aby ste na konci simulovali efekt vydutia. A potom cez predmety vytlačte nápis. V pôvodnej podobe nech má biela farba, ktorý bude zodpovedať stavu Normálny (obr. 27) a následne pri zmene stavu rolloveru sa farba nápisu zmení napríklad na zelenú, keď nad ním umiestnite kurzor myši (stav Over) a na modrú. pri stlačení tlačidla myši (stav nadol) .
Venujte pozornosť palete Vrstvy na tejto fáze má len jednu vrstvu. Vytvorte dve kópie tejto vrstvy pomocou príkazu Duplicitná vrstva(Duplicate Layer) z ponuky palety Vrstvy, v palete budú tri vrstvy (obr. 28). Potom v prvej kópii vrstvy zmeňte farbu nápisu na zelenú a v druhej na modrú (obr. 29). V dôsledku toho sa získa potrebný polotovar na prevrátenie.
Exportujte vytvorený obrázok do formátu PSD so zachovanými vrstvami pomocou príkazu Súbor=>Exportovať(Súbor=>Exportovať) a výber farebného modelu RGB (obr. 30). Otvorte vygenerovaný súbor PSD v ImageReady (obrázky 31 a 32). Vytvorte rámy založené na vrstvách výberom príkazu Vytvárajte rámy z vrstiev(Create Frames from Layers) z ponuky palety animácie. Okno Animácie bude vyzerať ako na obr. 33. Zároveň v palete Prevrátenia Na začiatku sa vytvorí jeden normálny stav.
Potom v okne animácie vyberte v palete rám zodpovedajúci stavu, v ktorom ste sa vznášali Vrstvy vrstva sa vyberie automaticky Kópia vrstvy 1(obr. 34). Prejdite na paletu Prevrátenia a kliknite na tlačidlo Vytvorte stav prevrátenia(Vytvoriť stav prevrátenia) obr. 35, čo spôsobí, že sa objaví stav Nad štátom v palete Prevrátenia(obr. 36). Rovnakým spôsobom vytvorte štát Dolný štát. Aktivovať stav Normálne v palete Prevrátenia a vymazať v palete animácie všetky snímky okrem toho, ktorý by mal zodpovedať stavu Normálne. Výsledkom je, že pre každý stav rolovania v palete animácie bude len jeden rám (obr. 37, 38 a 39).
Ryža. 38. Pohľad na obrázok, okno Animácia a palety Vrstvy a Rollovery pre Stav prekrytia
Výsledok skontrolujte kliknutím na tlačidlo Ukážka v predvolenom prehliadači(Ukážka prehliadača) na paneli s nástrojmi a prechodom do okna prehliadača (Obrázok 40). Potom súbor uložte pomocou príkazu Súbor=>Uložiť optimalizované(Súbor=>Uložiť s optimalizáciou) a špecifikovaním možnosti HTML a obrázky (*.html). V dôsledku toho sa v tomto príklade získal súbor Primer4.html a séria grafických obrázkov v priečinku obrázkov.
Ryža. 40. Okno prehliadača s prvkom Rollover
SVG rollovery
Čoraz populárnejší formát SVG (Scalable Vector Graphics škálovateľný Vektorová grafika), vytvorený na základe štandardu XML, vám tiež umožňuje získať rôzne interaktívne prvky, najmä rollovery, len v praxi je to implementované úplne iným spôsobom. Stojí za zmienku, že vytváranie interaktívnych rolloverov SVG na rozdiel od klasických, kedy sa zodpovedajúci HTML kód generuje úplne automaticky, vyžaduje znalosť jazyka JavaScript a pochopenie základných princípov objektovo orientovaného programovania.
Na prácu s objektmi SVG je navrhnutá špeciálna paleta. Interaktivita SVG, ktorý sa dá jednoducho otvoriť pomocou príkazu Okno=>Interaktivita SVG(Okno=>interaktivita SVG) obr. 41.
Uvažujme o tomto variante vytvorenia rolloveru na príklade interaktívneho tlačidla, ktorého farba štítku sa zmení z čiernej na modrú, keď myšou prejdete myšou a zmení sa späť na čiernu, keď myš opustí aktívnu zónu.
Vytvorte obdĺžnikové tlačidlo so zaoblenými okrajmi a vyberte preň vhodnú prechodovú výplň, napríklad ako je znázornené na obr. 42. Upravte priehľadnosť tlačidla v palete Transparentnosť(Transparentnosť) v tomto príklade hodnota parametra Nepriehľadnosť(Nepriehľadnosť) je nastavená na 50 %. Vytvorte kópiu tlačidla, vyplňte ho tmavozelenou farbou (obr. 43) a potom ho preveďte na sieťový objekt príkazom Object=>Vytvoriť sieť prechodov(Object=>Create Gradient Mesh) zadaním štyroch riadkov a desiatich stĺpcov a v zozname Vzhľad(Zobraziť) výberom možnosti Do centra(Smerom do stredu) a nastavenie hodnoty Zlatý klinec(Zvýrazniť) na 100. Znížte nepriehľadnosť vrstvy sieťového objektu na približne 40 % (Obrázok 44). Umiestnite sieťový objekt na objekt s prechodom a tlačidlo bude vyzerať ako to, ktoré je znázornené na obr. 45.
Ryža. 44. Premena kópie tlačidla na objekt mriežky
Doplňte tlačidlo zamýšľaným nápisom a upravte jeho polohu pomocou príslušných tlačidiel na palete Zarovnať(Zarovnanie). Výsledný obrázok bude obsahovať jednu vrstvu s tromi objektmi nad sebou (obr. 46). Naplánované udalosti budú odkazovať na textový objekt, takže pre pohodlie zmeňte jeho názov na Text dvojitým kliknutím na objekt a zadaním nového názvu. Podobne zmeňte názov vrstvy z Vrstva 1 až vrstva(obr. 47).
Spracovanie udalostí zahŕňa použitie procedúr JavaScriptu, takže musíte zahrnúť súbor s popisom týchto procedúr. Volá sa Events.js a po inštalácii sa uloží na disk do priečinka Sample Files\Sample Art\SVG\SVG softvér Adobe Ilustrátor. Ak chcete zahrnúť súbor Events.js, použite príkaz Súbory JavaScript Interaktivita SVG(obr. 48). Ďalej musíte stlačiť tlačidlo Pridať(Pridať) a nájdite požadovaný súbor na pevnom disku. Keď sa v poli objaví jeho meno URL(obr. 49), kliknite na tlačidlo hotový(Choď von).
Ryža. 48. Výber príkazu Súbory JavaScript
Potom by ste mali definovať reakciu objektu na udalosti myši Text. V poli vyberte objekt Text udalosť(Udalosti) palety Interaktivita SVG vyberte udalosť onmouseover elemColor(evt, "Text", "#3333FF") to bude znamenať, že keď je myš nad objektom Text jeho farba sa zmení na modrú (obr. 50). Aby sa farba textu po opustení aktívnej zóny zmenila na čiernu, musíte vytvoriť ešte jednu udalosť onmouseout vyberte ho v poli udalosť(Udalosti) palety Interaktivita SVG. Potom do akčného riadku zadajte text elemColor(evt, "Text", "#000000") tým sa vráti čierna (obr. 51).
Ryža. 51. Konečný vzhľad palety SVG Interaktivita pre objekt Text
Uložte vygenerovaný rollover ako súbor SVG pomocou príkazu Súbor=>Uložiť ako(Súbor=> Typ súboru formát SVG a potom nastavenie možností pre uloženie súboru SVG, ako je znázornené na obr. 52. Po uložení sa získa iba jeden jediný súbor s príponou SVG a nie dva, ako v prípade klasického rolloveru, v tomto prípade sa získal súbor Primer5.svg (priečinok Primer5). Aby však rollover naozaj fungoval, musíte dodatočne skopírovať súbor Events.js s popisom JavaScript procedúr do priečinka so súborom SVG. Potom môžete skontrolovať výkon prevrátenia a výsledok bude vyzerať ako na obr. 53.
SVG animácia
Formát SVG možno použiť aj na sprostredkovanie animácie. Skúsme si vytvoriť jednoduchý animačný prvok (v tomto prípade to budú informácie o firme), ktorý sa na obrazovke objaví po prejdení myšou nad príslušný grafický objekt a zmizne po vybratí myši z interaktívneho prvku.
Vytvorme približne takú sériu grafických a textových objektov, ako je znázornené na obr. 54. Premenujte všetky vytvorené objekty pohodlným spôsobom postupným kliknutím na názov ďalšieho objektu v palete Vrstvy a zadaním požadovaného názvu (obr. 55). Všimnite si, že zvýraznené na obr. 56 položiek Text1, Text2, Text3 A Cesta1 budú vždy viditeľné a všetky ostatné iba vtedy, keď podržíte kurzor nad objektom Text1.
Ryža. 54. Pôvodný pohľad na obrázok
Pomocou príkazu zahrňte súbor Events.js s popisom procedúr JavaScriptu Súbory JavaScript(súbory JavaScript) z palety Interaktivita SVG stlačením tlačidla Pridať(Pridať) výberom požadovaného súboru na pevnom disku a kliknutím na tlačidlo hotový(Choď von).
Definujte odozvu udalosti myši pre objekt Text1. Vyberte objekt Text, v teréne udalosť(Udalosti) palety Interaktivita SVG vyberte udalosť onmouseover a do riadku nižšie zadajte text elemShow(evt, "Text4"); elemShow(evt, "Cesta2"). V dôsledku toho, keď je myš nad objektom Text1 objekty budú viditeľné Text4 A Cesta2. Upozorňujeme, že ak je potrebné vykonať niekoľko akcií, keď nastane udalosť, musia byť špecifikované pomocou znaku „;“. Potom urobte to isté pre udalosť onmouseout, zadáte k nemu text, ktorý bude znamenať skrytie predmetov (obr. 57).
Uložte výsledok ako súbor SVG pomocou príkazu Súbor=>Uložiť ako(Súbor=>Uložiť ako), zadanie názvu súboru a výber v poli Typ súboru formát SVG a následne nastavenie možností pre uloženie súboru SVG v súlade s obr. 58. Po uložení sa získa súbor Primer6.svg (priečinok Primer6). Nezabudnite skopírovať súbor Events.js do priečinka s týmto súborom. Ak potom spustíte coz daný súbor, uvidíte výsledok znázornený na obr. 59. Toto je takmer to, čo potrebujete. Jediné, čo nebolo zahrnuté v našich plánoch, bol prvotný vzhľad objektov Text 4 a Cesta 2 pri nakladaní. Aby ste sa zbavili tohto nedostatku, vyberte oba tieto objekty naraz a vytvorte pre ne akciu elemHide(evt, "Text4"); elemHide(evt, "Cesta2") na podujatí načítať(obr. 60). Uložte súbor znova a uistite sa, že objekty sú teraz Text4 A Cesta2 viditeľné iba pri prejdení myšou nad objekt Text1.
GIF animácia
Akákoľvek webová stránka je nemysliteľná bez webovej animácie, vrátane animovaných gifov. Jedným zo spôsobov ich vytvorenia je použitie aplikácie Adobe ImageReady, ktorá okrem iného umožňuje vytvárať animácie z vrstiev. V tomto prípade je možné pripraviť samotný viacvrstvový obrázok rôzne aplikácie vrátane aplikácie Adobe Illustrator.
Je veľmi jednoduché vytvoriť animáciu založenú na prvkoch z palety Symboly(Symboly) otvorené príkazom Okno=>Symboly(Window=>Symbols) alebo z jednej z knižníc symbolov, ktoré je možné otvoriť pomocou príkazu Window=>Knižnice symbolov(Okno=>Knižnice symbolov).
Skúsme napríklad zväčšiť veľkosť ľubovoľného objektu-symbolu, kľúčové fázy procesu zväčšovania objektu musia byť nastavené na samostatné vrstvy. Najprv jednoducho umiestnite objekty symbolov jeden nad druhý a potom zväčšite veľkosť každého nasledujúceho objektu, napríklad, ako je znázornené na obr. 61. V dôsledku toho v palete Vrstvy vytvorí sa jedna vrstva s mnohými objektmi (obr. 62). Ak tento obrázok exportujete priamo do formátu PSD, nebude to fungovať, pretože existuje iba jedna vrstva a prirodzene, keď otvoríte súbor PSD v ImageReady, bude tam tiež iba jedna vrstva. Preto musíte najprv umiestniť objekty do rôznych vrstiev. Dá sa to urobiť rôzne cesty najjednoduchší spôsob je najprv vybrať vrstvu Vrstva 1 v palete Vrstvy a použite príkaz Uvoľnite do vrstvy(Uvoľňovanie vo vrstvách). Výsledkom bude presunutie každého z objektov do vlastnej vrstvy, ale všetky budú vnorené do vrstvy Vrstva 1. Preto budete musieť ručne pretiahnuť všetky vnorené vrstvy do hornej časti palety Vrstvy tak, aby boli nad vrstvou Vrstva 1 a potom sa stal prázdna vrstva Vrstva 1ľahko odstrániteľné (obr. 63). Exportujte obrázok do formátu PSD pomocou príkazu Súbor=>Exportovať(Súbor=>Exportovať) s nastaveniami ako na obr. 64.
Načítajte vytvorený súbor PSD v programe ImageReady (obr. 65 a 66). Otvorte ponuku palety animácieVytvárajte rámy z vrstiev(Vytvorte rámy z vrstiev). V dôsledku toho sa vytvorí päť snímok, z ktorých každý bude zodpovedať svojej vrstve a oknu palety animácie bude vyzerať ako na obr. 67.
Potom nastavte trvanie každého z vytvorených rámcov, v tomto prípade trvanie všetkých rámcov je nastavené na 0,2 s. A potom uložte optimalizovanú animáciu príkazom Súbor=>Uložiť optimalizované(Súbor=>Uložiť s optimalizáciou). Získaný výsledok sa môže podobať obr. 68.
Ešte pohodlnejšie je používanie funkcií Živé zmesi Softvér Illustrator. Toto kombinované použitie Illustratora a ImageReady výrazne urýchľuje proces vytvárania GIF animácií.
Napríklad nakreslite dva ľubovoľné viacfarebné objekty a potom ich zmiešajte s príslušnými parametrami (obr. 69). Tento súbor nie je možné použiť priamo na vytvorenie animácie, keďže obrázok je umiestnený v jednej vrstve (obr. 70). Preto budete musieť najskôr umiestniť každý prvok zmiešaného objektu na samostatnú vrstvu. Ak to chcete urobiť, v okne Vrstvy zvýraznite čiaru
Ryža. 70. Počiatočný stav okna Vrstvy
Exportujte vytvorený súbor do formátu PSD pomocou príkazu Súbor=>Exportovať(Súbor=>Exportovať). Otvorte vytvorený súbor PSD v ImageReady (obr. 73). Upozorňujeme, že všetky vrstvy vytvorené v programe Illustrator sa zobrazia v okne vrstiev (obr. 74) a v okne animácie bude len jeden rám.
Aktivujte ponuku palety animácie, kliknutím na čiernu šípku v pravom hornom rohu palety a vyberte príkaz Vytvárajte rámy z vrstiev(Vytvoriť snímky z vrstiev) nakoniec sa v tomto príklade vytvorí päť snímok a okno palety animácie bude mať formu podľa obr. 75. Podržaním klávesu vyberte všetky snímky Shift a nastavte vhodné trvanie snímky v tomto príklade, pre každú snímku sa použije rovnaký čas 0,2 s. Potom súbor uložte pomocou príkazu na optimalizáciu Súbor=>Uložiť optimalizované(Súbor=>Uložiť s optimalizáciou) nastavenie v zozname Typ súboru možnosť Iba obrázky (*.gif). Animácia bude pripomínať Obr. 76.
Oveľa zaujímavejší nie je pohyb, ale plynulá zmena veľkosti prelínaných objektov. Môžete napríklad použiť už vytvorený prechod prelínania. V tomto prípade po vytvorení samostatných vrstiev pre každý prvok prechodu prelínania umiestnite všetky objekty na seba pomocou tlačidiel Horizontálne zarovnanie na stred(Zarovnanie vzhľadom na vodorovný stred) a Vertikálne zarovnanie na stred(Vertikálne zarovnanie na stred) palety Zarovnať(obr. 77).
Exportujte vytvorený súbor do formátu PSD ( Súbor=>Exportovať Súbor=>Exportovať) a vytvorený PSD súbor otvoríme v programe ImageReady (obr. 78). Vytvárajte snímky animácie založené na vrstvách ( Vytvárajte rámy z vrstiev Vytvorte snímky z vrstiev) a zvoľte pre ne vhodnú dobu trvania (obr. 79). A potom, aby bola animácia efektívnejšia, skopírujte existujúce snímky, ale v opačnom poradí, aby sa obraz najprv zväčšil a potom zmenšil atď. do kruhu (obr. 80). Potom uložte súbor optimalizácie ( Súbor=>Uložiť optimalizované Súbor=>Uložiť s optimalizáciou). Výsledná animácia je znázornená na obr. 81.
Ryža. 80. Stav okna Animácia po duplikovaní snímok
Ryža. 81. Hotová animácia
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ť obrazu(veľkosť obrazu). 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é políčko. 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).
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 si 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šetko potrebné prvky pre budúcu animáciu. Aby som to urobil, v samostatnom dokumente som vytvoril dve polohy filmového rámčeka, kruh pre referenciu, ktorý je rozrezaný na samostatné sektory, textúru a zvislý škrabanec na pridanie efektu staroveku, ako aj všetky čísla a nápisy.
Keď sú všetky časti našej karikatúry pripravené, môž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 potrebujeme nazhromaždiť 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 mierne otrasy, 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 o častiach karikatúry a umiestnite ho na prvú vrstvu v hornej časti rámčeka 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. Ak to chcete urobiť, skopírujte tento kruh do druhej vrstvy a urobte ľahší prvý sektor. Pamätáte si, že film 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. Týchto 12 vrstiev spolu 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 odtiaľ textúru. zdrojový súbor 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, tak vás môžem potešiť - zostáva už 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. K tomu je potrebné urobiť ešte tri kópie pripravených vrstiev s filmovou animáciou.
A potom je všetko jednoduché. Zapnite úplne prvú vrstvu a vložte tam číslo tri.
Potom musíte tento obrázok skopírovať do ďalších vrstiev, kým sa animácia kruhu neskončí. Keď sa dostanete 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 jednoducho odstráňte kruh.
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ť zmení vrstvy Illustratoru na snímky animácie. Ďalej kliknite na tlačidlo Rozšírené.
Otvorí dodatočné nastavenia. Tu musíte nastaviť Frame Rate. Mám 12 snímok za sekundu. Zaš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 aplikácii 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í. Daný kód podporované moderné prehliadače a nevyžaduje použitie flash prehrávača.
Roman alias dacascasšpeciálne pre blog Poznámky mikrostockového ilustrátora
Prihláste sa na odber noviniek, aby vám nič nové neuniklo:
Načítava...