Hogyan lehet létrehozni egy animáció Illustrator és Sprite. Animációk létrehozása az Illustrator-ban

Üdv mindenkinek! Ma megpróbálok leírni a program jellemzőit Adobe Illustrator, Összehasonlítva flash funkciókkal. Nem lesz globális tömítés a csontprogram, hanem egy olyan érdekes zseton leírása, amelyet én magam felfedeztem magam ebben a programban. Az információt olyan darabokban gyűjtötték össze, mint a tanulás, hogy mindent egy hozzászólásba helyezzük. Azonnal bevallom, hogy nem vagyok szuper tapasztalt Illustrator felhasználó, csak az utolsó hat hónapban használom a rajzot (mielőtt mindent rajzolunk a vaku). Sokan győződjön meg róla, hogy az illusztrátor összetett, intuitív módon nem mindig érthető. Bizonyos mértékig egyetértek azzal, hogy flash után ez a program bonyolult. De akkor a legfontosabb dolog, hogy ne hagyja abba, hanem a tanulás folytatása. És pár hét múlva megjelenik egy gondolat, hogyan szoktam csinálni nélkül!

Tehát mit szerettem egy illusztrátorban, és hogy magamnak találtam magam, hogy mi nem a vakuban.
1. A legegyszerűbb, de ugyanakkor szükséged lesz. Próbáljon tárgyakat helyezni egy körbe. Korábban volt DECO eszköz. De nyilvánvalóan eltávolították, szükségtelenn számoltak. Úgy döntöttek, hogy a fogantyúk szórakoztatóbbak. Egy illusztrátorban ez a funkció: Hatás - torzítás és átalakítás - átalakítás.

Minden gyorsan és egyszerű, az értékek (az objektumok közötti távolság, a másolatok száma) Adja meg a beállításokat.

2. Zig-zag

Még mindig egyszerűbb, de mégis hasznos dolog. Úgy tűnik, kicsit, de a flush-ban manuálisan kell rajzolnia, egy illusztrátorban ez egy második dolog.

3. Az objektumok deformációja (WARP)

Semmi sem hasonlít a vakuban. Az alábbi példában csak 2 módot mutatott az egyszerű formák deformációjára (hatás - Warp - Arc / Hal). Tény, hogy a 15-ös legújabb verzió programok.

4. A sarkok automatikus kerekítése (kerek sarok)

Manuálisan is: a grafikus objektumon a sarokban lévő elszigeteltség alatt (az összes mirigyben) van egy fehér pont és egy szövetségi vonal jel. Húzom az egeret, állítsa be az ízét.

De ez csak az űrlapokra vonatkozik, egy kicsit más, egy kicsit másképp - alkalmazza a kerekítés hatását ( Hatás - stilizál - kerek sarkok). A kimeneten ugyanazt a hatalmat kapjuk.

5. durva (olaj)

A hatás K. egyszerű formák (Hatás - torzítás és átalakítás - durva). A kimeneten kapunk valamit, ami hasonlít az alacsony polírozott 3D modellekre. Véleményem szerint hűvös :) és a legfontosabb - nagyon egyszerű.

6. Pucker & Bloat (Húzás és felfújás)
Példa az alábbi képen:

7. formanyomtatvány (offset pálya)

A vakuban van egy kibővítésű kitöltési funkció (a kitöltés bővítése), a ceruza vonalak nem működnek egyáltalán, ellentétben az Illustratornal.

8. Kefék (művész kefe, minta kefe, szóráskefe)
NEM SZÜKSÉGES KÉRDÉSEK NEM TARTALMAZHATÓ:

9.Texture ecset (texturális ecsetek)

Az Illustratorban is sok texturált kefe van, amit írtam, és hogyan jelentek meg új verzió Vaku. Megfigyelték, hogy az Adobe Animálás ecsetek használata ijesztő gátló. Ez az:(

10. Nem biztos benne, hogy ez egy egyenes trükk, de szeretnék maradni a tassel egy vicces névvel FOLTKefe.. Az eszköztáron található, nagyon kellemes az ecset használatához. Van egy csomó beállítása, szeretem több mint szokásos. Szavakban nehéz megmagyarázni az előnyeit, jobb, ha egyszer próbálkozunk.

10.Split a rácshoz.

Szintén hasznos dolog - az osztott rács funkcióra (objektum-path-split a rácsra). A helyiek az egyenlő szegmensekre vágják az alakot. Mit emlékeztet minket? Jobb - Windows egy magas emelkedésű épületben. Ami engem illet, egy hűvös darab rajzoláshoz, például városi tájakhoz;)

Különösen egy hasznos eszköz egy illusztrátorban, valószínűleg az első kiadás óta. Ezzel létrehozhat például a fa textúráját:

12. Mozgás (jobb - átalakítás - mozgás)

Offset objektum előre meghatározott távolságban. Ha szeretné, azonnal létrehozhat egy másolatot, amelyet a kívánt távolságra helyezünk a kiválasztott vízszintes objektum / vagy függőleges objektumtól. A flash korábbi verziójában az elvégzett plugin volt ez a funkció. Sajnos nem emlékszem a nevére.

Egy illusztrátorban nagyon kényelmes zökkenőmentes minták létrehozása ( Tárgymintás). Emlékszem, hogy hányan kifinomultam a Flash-ben a teremtéssel. Az SS 2015-ös verziójában az Automatikus, hogy minden automatizált, sok beállítás segít a vakok több tucat variációban, amely csak néhány grafikus elemet tartalmaz. A program korábbi verzióiban mindenkinek manuálisan kellett tenned, mint eddig flush.

(Megjegyzés - A mintát egy vektoros szerkeszthető objektum segítségével lehet elvégezni a szétszereléshez ( Objektum - bővíthető megjelenés).

14. objektum mozaik (mozaik)

Színpaletta létrehozása a rendelkezésre álló kép alapján. Importálja kedvenc képét rosszul (nyitva), akkor Objektum - objektum mozaik létrehozása. A beállításokban adja meg a magasság és a szélesség hasadási frekvenciáját.

És a kijáratnál kapunk:

15.Blend (keverés)

Gradiensek létrehozására használják. Létrehozhatsz lépésenkénti átmeneteket, például a képen. Nem fogom azt mondani, hogy gyakran használom, de hasznos lehet valakinek. Úgy tűnik számomra, hogy használhatod az egyszerű háttérképek létrehozásában.

A szerszám is használható az objektumok klónozására. Két objektumot helyezünk el egymástól, és alkalmazzuk a keverék opciókat, válassza ki a lépések számát (a klónozott objektumok számát).

16. A Build Shape Tool eszköz. Nagyon kényelmes dolgozni a primitívekkel. A Flash-ben, ahogy nekem tűnt nekem, kevésbé kényelmes.

Az Alt-ra kattint, és kattintson a Dedikált szegmensekre - Szegmensek törlése. Ha egyszerűen húzza az egeret több elkötelezett területen - csatlakozni.

Kiegészítés - olyan eszköz, amely segít automatikusan levágni, csatlakozni, stb. Kiválasztott formák. Ami engem illet, ez nem túl kényelmes, gyakrabban használom ÉpítAlakEszköz.

(Szerelési területek)

18.Custom szerszámpanel.

A saját eszköztár létrehozása, felesleges dobása, és csak azokat válasszon.

Flush, szerelési területek, nevezetesen jelenetek ( Jelenet 1,2,3 ..) Külön és közöttük kell kapcsolódnia (Shift + F2). Az illusztrátorban szemük előtt helyezhetők el. Kényelmesen, amikor több opciót készít ugyanazon a képen, hogy az összes lehetőség az összehasonlítás előtti szemünk előtt legyen.

19. Izometrikus grafikus stílusokkal

És az utóbbi az izometrikus létrehozása 1 kattintással (és pontosabban, 3 kattintással, mert 3 oldalunk van, grafikus stílusokkal ( Grafikus stílusok.). Hogyan történik, legközelebb fogok írni.

Összességében a vakuból az Illustrator - az objektum mentésének képessége a szimbólumba (szimbólum), és bármilyen probléma nélkül is átvihető a vakuba (nyitva a flash.ai fájlban Importálás - behozatal a színpadra).
Az Illusztrátor karaktere ugyanolyan tulajdonságokkal rendelkezik, mint a vaku.
És a végén meg fogom írni, hogy az Illustratorban, véleményem szerint alacsonyabb a vaku. Igen, igen, és ez. És ez a kitöltő eszköz ( Festékes vödör.). Ahogy nem próbálok hozzászokni illle-nek, egy életben kényelmesebb.
Ha a jegyzeteim hasznosak lettek az Ön számára, vagy mit akarsz magadtól, hogy kiegészítse - Velkov a megjegyzésekben! Sok szerencsét mindenkinek;)

A közelmúltban az SVG animáció (skálázható vektoros grafika) grafikák a webhelyeken és alkalmazásokon nagyon népszerűvé váltak. Ez annak köszönhető, hogy mindenki Új böngészők Már támogatja ezt a formátumot. Itt van információ az SVG böngészők támogatására.

Ez a cikk tárgyalja a legegyszerűbb példa animáció SVG. Vektorok könnyű segítségnyújtás Jquery plugin Lazy vonal festő.

Forráskód

Ennek a feladatnak a teljesítése és teljes megértése, a HTML, a CSS, a jquery alapvető ismerete, de nem feltétlenül, ha csak az SVG animálására szolgál) menjünk fel!

És így a lépéseket, amelyeket végre kell hajtanunk:

Hozzon létre megfelelő fájlstruktúrát
Letöltés és csatlakoztatás plugin
Rajzoljon hűvös kontúrképet az Adobe Illustrator-ban
Konvertáljuk képünket Lazy Line Converterben
Helyezze be a kapott kódot a Main.js-ben
Adjon hozzá néhány CSS-t az ízléshez

1. Hozza létre a megfelelő fájlstruktúrát
Ezzel ez segít az inicializr szolgáltatásban, ahol ki kell választania a paramétereket, mint az alábbi képen.

Klasszikus H5BP (HTML5 kazánlemez)
Nincs sablon.
Csak html5 shiv.
Kicsikedett
Azaz casses.
Chrome keret.
Ezután kattintson a Töltse le!

2. Töltse le és csatlakoztassa a plugint

Mivel az inicializr a legújabb JQuery könyvtárral rendelkezik, az archívumtól, hogy le kell töltenünk a lusta vonalfestő projekt tárolóból, csak 2 fájlt kell átadnia projektünkre. Az első a "jQuery.lazylinePainter-1.1.min.js" (a plug-in verzió eltérhet) a kapott mappa gyökerében. A második példa / JS / Vendor / Raphael-min.js.

Ezek a 2 fájl a JS mappába kerül. És csatlakoztassa őket az indexünkhöz .html-hez a main.js előtt a következőképpen:

3. Rajzoljon egy meredek kontúrképet az Adobe Illustrator-ban

A kontúrképet illusztrátoron (a toll eszközzel való legegyszerűbb módja) rajzoljuk
Szükséges, hogy rajzunk kontúrjaink ne zárják be a TC-t a hatásunkhoz
Nem kell tölteni
Maximális fájlméret - 1000 × 1000 px, 40kb
Vágás az objektum objektumhoz\u003e Artboards\u003e illeszkedése a műalkotásokhoz
Mentés SVG formátumban (szabványos mentési beállítások megfelelőek)

Például használhatja az ikonokat a mellékletben.

4. Konvertáljuk képünket Lazy Line Converter-ben
Csak húzza az ikont az ablakban, amely az alábbi ábrán látható.
Vastag, az áramkör színe és az animációs sebesség megváltoztatható a kódban, amely a konverzió után jelenik meg!

5. Helyezze be a kapott kódot a Main.js-ben
Most egyszerűen illessze be a kapott kódot az üres main.js fájlba
Paraméterek:
Strokewidth - kontúr vastagság
Strokecolor - kontúr színe
Az egyes vektorok rajzsebességét megváltoztathatja az időtartamparaméter értékeinek módosításával (alapértelmezett 600)

6. Adjon hozzá néhány CSS-t
Távolítsa el az index.html bekezdést

Helló Világ! Ez HTML5 kazán.

És ahelyett, hogy beilleszti a blokkot, amelyben animációnk történik

ezután adjunk hozzá néhány CSS-t a Main.css fájlhoz az élvezetesebb tervezéshez:

Test (háttér: # F3B71C;) #Icons (pozíció: fix, felső: 50%, bal: 50%, margó: -300px 0 0 -400px;)

mentse az összes fájlt.
Most egyszerűen megnyitja az index.html-t egy modern böngészőben, és élvezze a hatást.

P.S. A helyi gép indításakor az animáció kezdete néhány másodpercig kezdődik.

Webes grafika optimalizálás

A grafikus információk sokkal lassabbak, mint a szöveg, és a kép betöltési ideje arányos a grafikus fájlok méretével. ebből kifolyólag gyors letöltés A weboldalak egy kis méretű grafikus képeket tartalmaznak be, amelyek az optimalizálással érhetők el. A kép optimalizálása alatt azt a konverzióval értjük, amely a minimális fájlméretet biztosítja, miközben fenntartja a szükséges ez az eset A képminőség, amelyet elsősorban a grafikus képek színek számának csökkentésével, a tömörített és speciális fájlformátumok használatával és az egyes képfragmentumok tömörítési paramétereinek optimalizálásával.

Az Illustrator beépített képoptimalizálási eszközökkel rendelkezik, amely különböző előnézeti módszereket biztosít az optimalizálási folyamat gyors és hatékony végrehajtása érdekében. Előnézet Meglehetősen pontos képet ad arra, hogy az optimalizált kép valós időben fog kinézni, ami segít megbecsülni az optimalizálási eredményt, és sikeresen kiválaszthatja a kívánt beállításokat. És optimalizálhatja mindkét képet közvetlenül az Illustrator programban és más, például olyan fotók, amelyeket a webhelyen kell elhelyezni.

Az optimalizálási beállítások az ablakban vannak beállítva Kivéve Web. (A parancs által okozott webes mentés a menübe Fájl (Fájl). A program azt javasolja, hogy az egyik négy előnézeti módot használja, hanem az optimalizálás minőségének értékelésére a legjobb mód Két alkalmas:

2-Up. (két lehetőség) - az eredeti és az optimalizált kép egyidejű megtekintése a megadott beállítások szerint (1. ábra);
4-up. (Négy lehetőség) - Ebben az üzemmódban a nézetablak négy ablakra van osztva (2. ábra) az eredeti kép megjelenítéséhez és az optimalizált három változathoz: az első verzió a telepített optimalizálási értékek alapján jön létre, a másik kettő pedig Az aktuális optimalizálási beállítások lehetőségeit.

Mindkét mód lehetővé teszi, hogy jelentős időt takarítson meg a jobb optimalizálási opció megtalálásához, ahogy mentse el a képek mentésének szükségességét különböző beállítások Optimalizálás és későbbi vizuális összehasonlításuk. Ezenkívül nemcsak az optimalizált kép minőségét, hanem méretét és rendszerindítási idejét is értékelni lehet különböző kapcsolódási lehetőségekkel. Összehasonlításképpen, a 4-UP mód a legkényelmesebb (négy lehetőség), amely lehetővé teszi, hogy vizuálisan hatásának megállapítása préseléssel vagy csökkenti a paletta a képminőség és a méretét és végső soron meghatározzák a legjobb optimalizálási paramétereket.

Az Illustrator lehetővé teszi, hogy optimalizálja a webes grafikákat a formátumokban, nem csak GIF, JPG, PNG-8 és PNG-24, hanem SWF és SVG. Indexelt képek kis mennyiségű A színeket GIF formátumban tárolják. A teljes színű és féltónusú képek megőrzése - fotók és színes telített grafikonok, például gradiens kitöltések, jPG formátum. A teljes színes képekhez átlátszó helyszínekkel png formátumamely lehetővé teszi, hogy mentse el az indexelt és a teljes színű képeket, míg a PNG-8 formátumban az optimalizált kép maximális száma 256, és a PNG-24 formátumban a kép több millió színekkel rendelkezhet, és ezért úgy néz ki jPEG formátum. A JPEG PNG-24 közötti különbség az, hogy a tömörítési módszert a PNG-24 formátumú képek optimalizálására használják, nem vezet a minőségveszteséghez, de ennek eredményeképpen a fájl mérete növekszik. SVG és SWF formátumok kombinálják a grafikus adatokat, szöveget és interaktív alkatrészeket, és optimalizálhatók.

Fontolja meg a képoptimalizálás konkrét példáját. Tegyük fel, hogy az Illustrator program kifejlesztett egy weboldal emblémát (3. ábra), eredetileg az AI formátumban mentett. Egy kísérlet, hogy azonnal optimalizálja azt az interneten, nem vezet bármi jó, hiszen ebben az esetben lesz az automatikus körülmetélés, amelyben a felirat deformációjának eredményeként kapott igazi pozíció nem veszi figyelembe ( 4. és 5. ábra).

Tehát próbáljuk exportálni az emblémát pSD formátum Csapat Fájl \u003d\u003e Export (File \u003d\u003e Export) - A létrehozott kép mérete 143 kb lesz. Nyissa meg a kapott PSD fájlt, és használja a parancsot Fájl \u003d\u003e Mentés az interneten (File \u003d\u003e Webes mentés). Figyelembe véve a korlátozott számú színt vesz részt a kép ebben az esetben a GIF formátum optimális, az egyedi beállításokat, amelyek és el kell dönteni. A beállítások kísérletezésével győződjön meg róla, hogy a legjobb minőség az alapértelmezett program által kiválasztott tömörítési algoritmust adja meg Szelektív (Szelektív). Ami a simításokat illeti, figyelembe véve a gradiens kitöltés jelenlétét, jobb választani egy algoritmust zajtermeléssel - Zaj. (6. ábra). A méret a keletkező fájl optimalizálás lesz 6729 KB (7.), Míg a háttér átlátszósága mentésre kerül, amely könnyen, hogy megbizonyosodjon arról, hogy mentse el a képet a GIF formátum mellett a HTML fájlban (8.). Ennek eredményeként ebben a példában az emblem.html és az embléma.gif fájlokat a Primer1 mappában fogadták.

Gombok

A weboldalak nélkülözhetetlen specifikus eleme grafikus vezérlők - gombok. Egyszerűen lehetetlen elképzelni egy oldalt nélkülük. A rajz gombok ma különleges műfajává váltak, és az Illusztrátor lehetővé teszi a legbonyolultabb lehetőségek létrehozását. Például a gridobjektumként díszített gombok és (vagy) a maszkok kivetésével sokkal hatékonyabban tűnnek.

Fontolja meg az Illustrator program körkörös konvex gombjának létrehozását. Rajzolja a vektor objektumot egy tetszőleges színű kör formájában (9. ábra), és konvertálja azt egy rácsparancsra Object \u003d\u003e Gradiens háló létrehozása (Object \u003d\u003e Gradiens rács létrehozása), négy vonal és négy oszlop, és a listában Megjelenés (Nézet) az opció kiválasztásával Középre. Kiemel (Háttérvilágítás) 60-nal (10. ábra). Válasszon ki egy eszközt Közvetlen kiválasztás és kattintson az objektum bal felső sarkában a csomópontok kiválasztásával (11. ábra). Módosítsa a megfelelő cella színét fehéren, ha kiválasztja azt a palettán Swatches. (12. ábra).

Vegye fel az eszközt Ellipszis (Ellipszis), állítsa be az egér jelölőt a kör előtt létrehozott központba, és tartsa lenyomva a kulcsokat Alt. és Váltás., Nyúljon egy új kört a régi tetején, hogy kiderüljön, hogy több öreg 1-2 képpont minden oldalról. Csinálja a fekete határát ( Stroke.) 1-2 pixelszélesség, és öntsük a sugárirányú gradiátot a pirosra fehérre (13. Húzza a létrehozott vektoros objektumot 1-2 képpontra jobbra és lefelé, majd a kiválasztás eltávolítása nélkül kattintson rá a jobb egérgombbal, és válassza ki a parancsot a helyi menüből. Gondoskodik \u003d\u003e Küldés vissza (Rendezés \u003d\u003e Küldés vissza). Ennek eredményeképpen egy üres az ábrán látható gombra. tizennégy.

Általában számos hasonló gomb van bármely olyan weboldalon, amely különbözik például a rájuk húzott nyilak irányát, azaz a helyszín irányát a helyszínen. Tekintsük a két gomb jelenlétének legegyszerűbb esetét, amelyek közül az egyik, a lefelé mutató nyíllal következő oldal, És a felfelé mutató nyíl gomb az előzőben van. Betakarító nyíl, egy hagyományos háromszöget készítünk egy eszközzel Poligon. (Polygon), fekete színben és nagyobb hatással is díszített rácsobjektumként is díszítve. Mozgassa a nyílra a gombot, és állítsa be az összes objektum pozícióját egymáshoz viszonyítva a megfelelő paletta gombokkal. Igazítsa. (Igazítás). A kapott gombok első része az 1. ábrán látható. 15. Másolunk egy réteget egy gombnyomással a parancs kiválasztásával Duplikált réteg. Rétegek.- Ennek eredményeképpen két azonos réteget kapunk. Ezután a réteg másolatánál válassza ki a nyílot, és 180 ° -kal kapcsolja be a parancsot a helyi menüből Transzformáció \u003d\u003e forgatás - Transzformáció \u003d\u003e Forgatás. Ugyanezt a gombot kapjuk, amint az az 1. ábrán látható. 16. Ne feledje, hogy sokkal kényelmesebb az ugyanazon projektgombok tárolására, amelyek egy fájlban tárolhatók különböző rétegeken, ami ebben az esetben bizonyítható.

Most meg kell mentenie az egyes gombok optimalizált beállításait. Először láthatatlan alsó réteget készítsen - ebben az esetben a felső rétegen lévő gomb mentésre kerül. Válassz csapatot Fájl \u003d\u003e Mentés az interneten (Fájl \u003d\u003e Mentés a Webhelyhez), konfigurálja a gomboptimalizálási beállításokat, például az 1. ábrán látható módon. 17 Kattintson a gombra Mentés. (Mentés), és írja be a fájl nevét. A végén megmentett gomb az 1. ábrán látható. 18. Most visszaküldje az alsó réteg láthatóságát, és a felső lesz láthatatlan, és ugyanúgy mentse el a második gombot, és adja meg egy másik nevet. Az eredményt az 1. ábrán mutatjuk be. tizenkilenc.

Most már meg kell őriznie, hogy a gombok meglehetősen elfogadható pillantást találjanak a weboldalra, és helyezze őket tetszőleges oldalra (20. ábra). Ennek eredményeként ebben a példában a Primer2.html fájlokat két grafikus képben kaptuk a kép mappában. Primer2.).

Kívánt esetben az optimalizálás folyamatában a gomb könnyen illeszthető szeletbe. Ebben az esetben a parancs kiválasztása után Fájl \u003d\u003e Mentés az interneten (FILE \u003d\u003e Mentés weboldalra) és a beállítási optimalizálási beállításokat a szerszám eszközpaletta közül választhatja ki SLICE SELECT.(Slice Allocation) és kattintson duplán a képre, amely végül automatikusan lecsúszik az 1-es szekvenciával (21. ábra). Kattintson duplán az egér megnyitásához az ablak megnyitásához vezet Szeleti beállítások. (Slaje opciók), amelyben meg kell adni a linket, és ha szükséges, módosítsa a szeletelő nevét (22 ábra), majd mentse az optimalizált képet. Az eredmény ebben az esetben lesz a primer3.html fájlok (23. ábra) és a primer3.gif (Primer3 mappa).

Interaktív elemek

Az oldal újjáélesztésének egyik módja az a tervezési elemek bevezetése, amelyek megváltoztatják megjelenés (vagy állapot) az egér viselkedésétől függően, vagy kevésbé valószínű, bármilyen más helyzet esetén: méretezés, görgetés, betöltés, hiba előfordulás stb.

Az ilyen elemek közül a Hengerek a legnagyobb hírnevet kapták (az angolul. Roll Over - Roll Over) - Elemek megváltoztatják a megjelenést az egér hatása alatt. A tipikus rolovers példái animált gombok. A tekercseket gyakran használják, és a webhely más navigációs elemeinek létrehozásakor. Tény, hogy bármilyen rollover nem egy, de több (legfeljebb négy) kép, amelyek mindegyike megfelel egy adott eseménynek. A főbb események a következők szerint szokásosak: normál - normál állapot, az egérmutató lebegése az elemre és lefelé - a bal egérgomb megnyomásával, amikor a kurzort lebegíti. Elméletileg az események részt vehetnek, amikor kattintsák - engedje el a bal egérgombot, miután megnyomja a gombot - a gomb felszabadulása után - az aktív zónából kilépve. A gyakorlatban azonban gyakrabban korlátozódik az elem változása csak az első három vagy akár két eseményen.

Klasszikus rolver

A klasszikus megértése, a Gördülő egy sor grafikai képeket GIF formátumban, és a megfelelő HTML kódot, ami miatt, attól függően, hogy az egér viselkedését, egy képet helyébe másik böngészőablakban.

Az Illustrator program nem célja, hogy közvetlenül hozzon létre rolovers a klasszikus megértésükben, de segíthet a kezdeti elemek fejlesztésében. Az ötlet ebben az esetben az, hogy létre kell hoznia egy réteget, amely az első eseménynek megfelelő képet tartalmaz. Ezután készítsen egy példányt a rétegről, és konvertálja a képet úgy, hogy megfeleljen a második eseménynek, stb. A kapott többrétegű képet a PSD fájlba exportálják a rétegek megőrzésével, amely alapján a Rolover a képkész programban jön létre. Valamint az Illustrator program használatát, mint sok más esetet, számos érdekes lehetőség nem érhető el más módon szoftver, összefüggésben az átalakítási vektor grafika kényelmével.

Próbálunk megsemlíteni egy feloldás formájában egy feliratváltó színét az egér viselkedésétől függően. Nyissa ki az illusztrátort, és hozzon létre egy alakot kerek és fekete téglalap formájában (24. Ábra), hogy másolatot készítsen, és helyezze a képernyő szabad részébe. Konvertálja a téglalap első példányát egy rácsobjektumhoz a központban lévő megvilágítással (csapat) Object \u003d\u003e Gradiens háló létrehozása - objektum \u003d\u003e Gradiens rács létrehozása), négy vonal és tíz oszlop (25. ábra). Aktiválja a téglalap második példányát, és állítsa be a gradiens kitöltését az alábbiak szerint az alábbiak szerint. 26. Ellenőrizze a gradiens objektum tetején a rács, csökkenti az átlátszóságát a gradiens objektum körülbelül 80%, és a mérete körülbelül 1 pixel úgy, hogy a végén, hogy symotize hatását dudor. Majd nyomtassa ki a feliratot az objektumok tetején. Az eredeti formában, hogy van olyan fehér színű, amely megfelel a normál állapotnak (27. ábra), majd az átkelés szabályozásának megváltoztatásakor a felirat színe megváltozik, például zölden - amikor Ön Vigye az egérjelzőt (az állapot felett) és a kéken - Amikor megnyomja az egérgombot (állítsa le).

Figyeljen a palettára Rétegek. - Ebben a szakaszban csak egy réteg van benne. A parancs alkalmazásával két példányt készíthet a rétegről. Duplikált réteg. (Duplikált réteg) a paletta menüből Rétegek.- Három réteg lesz a palettán (28. ábra). Ezután a réteg első példányában változtassa meg a zöld felirat színét, és a második - a kéken (29. ábra). Ennek eredményeképpen a felosztási munkadarabot kapja meg.

Exportálja a létrehozott képet PSD formátumba a rétegek megőrzésével a parancs segítségével Fájl \u003d\u003e Export (File \u003d\u003e Export), és válassza ki az RGB színmodellt (30. ábra). Nyissa meg a létrehozott PSD fájlt az ImageSEADY programban (31. és 32. ábra). Hozzon létre keretek a rétegek alapján a parancs kiválasztásával Készítsen keretet a rétegekből (Keretek létrehozása a rétegekből) a paletta menüből Élénkség.. Az animációs ablak megjelenik, mint az 1. ábrán látható. 33. Ugyanakkor a palettán Hengerek Kezdetben egy egyedülálló normál állapot jön létre.

Ezután az ablakban Élénkség.válassza ki az indukált állapotnak megfelelő keretet, míg a palettán Rétegek. Automatikusan kiemeli a réteget 1. réteg másolat (34. ábra). Menj a palettába Hengerekés kattintson a gombra Hozzon létre rollover állapotot (Hozzon létre egy rollover-állapotot) - ábra. 35, ami az állam megjelenéséhez vezet Államia palettán Hengerek(36. ábra). Hasonlóképpen hozzon létre egy államot Állapotban. Aktiválja az állapotot Normál A palettán Hengerek És távolítsa el a palettát Élénkség. Minden képkocka mellett, amely megfelel az államnak Normál. Ennek eredményeként a palettán a Rolovover minden állapotára Élénkség.csak egy keret lesz (37., 38. és 39. ábra).

Ábra. 38. A kép megtekintése, animációs ablakok és rétegek és rázatok paletták az állami állapotra

Ellenőrizze az eredményt a gombra kattintva Előnézet alapértelmezett böngészőben (Előnézet a böngészőben) az eszköztáron, és forduljon a böngészőablakba (40. ábra). Ezt követően mentse el a fájlt a parancs alkalmazásával. Fájl \u003d\u003e Mentés optimalizált (Fájl \u003d\u003e Mentés az optimalizálással) és az opció megadása HTML és képek (* .html). Ennek eredményeként ebben a példában a Primer4.html fájl és a képek mappában lévő grafikus képek sorozatát kaptuk.

Ábra. 40. Böngészőablak rollover elemekkel

Svg rolovier

Népszerű SVG formátum (skálázható vektoros grafika - skálázható vektoros grafika) Alapján létrehozott XML szabvány lehetővé teszi azt is, hogy a különböző interaktív elemek, különösen Rolovers, csak a gyakorlatban megvalósították teljesen másképp. Érdemes megjegyezni, hogy az interaktív SVG-tekercsek létrehozása, ellentétben a klasszikushoz, amikor a megfelelő HTML-kódot teljesen automatikusan generálják, ismereteket igényelnek javaScript nyelv és az objektumorientált programozás alapelveinek megértése.

A különleges paletta SVG objektumokkal dolgozik. Svg interaktivitásamely könnyen nyitható a csapat segítségével Ablak \u003d\u003e svg interaktivitás (Ablak \u003d\u003e SVG interaktivitás) - ábra. 41.

Érdemes ezt a lehetőséget teremt Gördülő egy példát egy interaktív gombot, a színe a felirat változik feketéről kékre, ha lebeg az egér és újra átalakulhat fekete, amikor az egér ki az aktív zóna.

Hozzon létre egy téglalap alakú gombot lekerekített élekkel, és vegye fel a megfelelő gradiens kitöltését, például az 1. ábrán látható módon. 42. Állítsa be a gomb átláthatóságát a palettán Átlátszóság (Átláthatóság) - Ebben a példában a paraméter értéke Átlátszatlanság (Opacity) 50% -ra áll. Készítsen egy másolatot a gombok, töltse ki sötétzöld (43. ábra), majd konvertálja azt a rácsobjektum parancsra Object \u003d\u003e Gradiens háló létrehozása(Object \u003d\u003e Gradiens rács létrehozása), négy vonal és tíz oszlop megadása, valamint a listában Megjelenés(Nézet) az opció kiválasztásával Középre. (A központhoz) és az érték beállítása Kiemel (Háttérvilágítás) 100-nak felel meg. Csökkentse a réteg opacitását egy rácsos objektummal, körülbelül 40% -kal (44. Helyezze a rács objektumot a gradiensre, és a gombot az 1. ábrán emlékeztetni fogja. 45.

Ábra. 44. A gomb másolatának megfordítása a rácsobjektumhoz

Töltse ki a javasolt felirat gombját, és állítsa be pozícióját a megfelelő paletta gombokkal. Igazítsa. (Igazítás). Az így kapott kép egy réteget tartalmaz, három tárgyat egymással (46. ábra). Az ütemezett események a szövegobjektumhoz kapcsolódnak, így a kényelem érdekében változtassa meg a nevét SZÖVEG.Az objektumra kattintva és új név megadása. Hasonlóképpen változtassa meg a réteg nevét 1. réteg rétegen (47. ábra).

Az eseményfeldolgozás magában foglalja a JavaScript eljárások használatát, így egy fájlt kell csatlakoztatnia az eljárások leírásával. Ezt nevezik események.js és a telepítés során a Minta Fils fájlban tárolják a lemezen adobe programok Illusztrátor. Az események csatlakoztatásához.js fájl, használja a parancsot JavaScript fájlok. Svg interaktivitás (48. ábra). Ezután kattintson Add. (Add), és keresse meg a kívánt fájlt a merevlemezen. Amikor a neve megjelenik a mezőben Url (49. ábra), kattintson a gombra Kész (Eljár szórakozni).

Ábra. 48. A JavaScript fájlok csapata kiválasztása

Ezt követően meghatározza a reakciót az objektum egér eseményeire SZÖVEG.. Válassza ki a szöveges objektumot a mezőben Esemény (Esemény) paletták Svg interaktivitás Válassza az Esemény lehetőséget onmouseover elemcolor (Evt, "Text", "# 3333FF") - Ez azt jelenti, hogy ha egy egeret talál az objektum felett SZÖVEG.színe kékre vált (50. ábra). Annak érdekében, hogy a szöveg szövegét az aktív zónába való belépés után, a szövegszín fekete színnel változott, szükség lesz egy másik esemény létrehozására. onmouseout.- Válassza ki a mezőbe Esemény (Esemény) paletták Svg interaktivitás. Ezután írja be a szöveget a sorban elemcolor (Evt, "Text", "# 000000")- Ez a fekete színek visszatéréséhez vezet (51. ábra).

Ábra. 51. Az SVG interaktivitási paletta végleges nézete az objektumszöveghez

Mentse el a létrehozott Rollover SVG fájl parancsként Fájl \u003d\u003e mentése (Fájl \u003d\u003e Fájltípus formátum SVG.Majd konfigurálja az SVG fájl mentési opciót az 1. ábrán látható módon. 52. A mentés után csak egyetlen kiterjesztésű fájl SVG megkapja, és nem két, mint abban az esetben egy klasszikus borulás, - ebben az esetben a primer5.svg fájlt kapunk (PRIMER5 mappa). Azonban annak érdekében, hogy a Rollover valóban működjön, az események.js fájlt a JavaScript leírásával kell másolni az SVG fájl mappájában lévő JavaScript leírásával. Ezután ellenőrizheti a Rollover teljesítményét - az eredmény megjelenik az 1. ábrán látható. 53.

Svg animáció

SVG formátum használható az animáció továbbítására. Próbáljunk létrehozni a legegyszerűbb animáció elem (ebben az esetben ez lesz tájékoztatás a társaság), amely akkor jelenik meg a képernyőn, ha lebeg az egeret a megfelelő grafikus objektumot, és eltűnnek, amikor eltávolítja az egeret az interaktív elemet.

Hozzon létre egy ilyen grafikus és szöveges objektumokat, amint az az 1. ábrán látható. 54. Átnevezzük az összes létrehozott objektumot, amelyek következetesen kattintanak a paletta következő objektumának nevére. Rétegek. és bevezeti a kívánt nevet (55. ábra). Kérjük, vegye figyelembe, hogy az 1. ábrán látható. 56 tárgy - TEXT1, TEXT2, TEXT3 és Utat1 - mindig látható lesz, és a többiek csak akkor, ha az egeret lebegíted Szöveg1.

Ábra. 54. Eredeti képtípus

Csatlakoztassa az eseményeket.js fájl a JavaScript-eljárások leírásával a parancs alkalmazásával. JavaScript fájlok. (JavaScript fájlok) a palettáról Svg interaktivitásA gomb megnyomásával Add.(Hozzáadás) a kívánt fájl megadásával a merevlemezen, és kattintson a gombra Kész (Eljár szórakozni).

Határozza meg a reakciót az objektum egér eseményeire Szöveg1. Válasszon objektumot SZÖVEG.területen Esemény (Esemény) paletták Svg interaktivitásválassza az Esemény lehetőséget onmouseover és az alábbi sorban írja be a szöveget elemshow (Evt, "Text4"); Elemshow (Evt, "Path2"). Ennek eredményeként, amikor az egeret az objektum felett találja Szöveg1 látható tárgyak lesznek TEXT4. és Path2.. Ne feledje, hogy ha egy esemény bekövetkezik, számos műveletet kell végrehajtani, akkor azokat a jelzéssel kell feltüntetni. Ezután hasonló művelet, az esemény. onmouseout.A szöveg megadásával, amely az objektumokat elrejti (57. ábra).

Mentse az eredményt SVG fájlparancsként Fájl \u003d\u003e mentése (File \u003d\u003e Mentés AS) a fájl nevének megadásával a mező kiválasztásával Fájltípus SVG formátum, majd konfigurálja az SVG fájlmegtakarítási opciót az 1. ábra szerint. 58. A mentés után a Primer6.svg fájl fogadja (primer6 mappa). Ne felejtse el másolni az eseményeket.js fájlra a fájl mappájába. Ha akkor fut a pops ez a fájlLátni fogja az 1. ábrán bemutatott eredményt. 59. Ez majdnem az, amire szüksége van. Az egyetlen dolog, ami nem szerepel a tervünkben, az objektumok kezdeti megjelenése. SZÖVEG.4 I. Pálya.2 betöltéskor. Annak érdekében, hogy megszabaduljon ehhez a hiányosságtól, válassza ki egyszerre mindkét objektumadatot, és hozzon létre egy műveletet. elemhide (Evt, "Text4"); Elemhide (Evt, "Path2") egy eseményen feltöltés alatt. (60. ábra). Mentse újra a fájlt, és győződjön meg róla, hogy most az objektumok TEXT4. és Path2. csak akkor látható, ha az egér lebegése az objektumon Szöveg1.

GIF animáció

Bármely weboldal elképzelhetetlen a webes animáció nélkül, beleértve animáció nélkül Gif'ov. A létrehozásuk egyik lehetősége az Adobe ImageReady alkalmazás alkalmazása, amely lehetővé teszi az animáció létrehozását a rétegekből. Ugyanakkor a többrétegű kép önmagában is előállítható különböző alkalmazásokban, beleértve az Adobe Illustrator szolgáltatást.

Nagyon könnyű létrehozni egy animációt a paletta elemei alapján Szimbólumok. (Szimbólumok) megnyílt a parancs Ablak \u003d\u003e szimbólumok (Ablak \u003d\u003e karakterek) vagy az egyik szimbólumkönyvtárból, amely megnyitható a parancs alkalmazásával Ablak \u003d\u003e Symbol könyvtárak (Ablak \u003d\u003e Symbol könyvtárak).

Például megpróbáljuk növelni a szimbólumobjektum méretét, az objektum legfontosabb lépéseit az objektum növeléséhez külön rétegekre kell állítani. Először egyszerűen helyezze el az objektumszimbólumokat az egyikre a másikra, majd növelje mindkét alábbi objektum méretét, például az 1. ábrán látható módon. 61. Ennek eredményeként a palettán Rétegek. Egy réteg különböző objektumokkal jön létre (62. ábra). Ha közvetlenül exportálja ezt a képet a PSD formátumba, akkor nem ad semmit, mivel a réteg egy, és természetesen, amikor megnyitja a PSD-fájlt az imageready programban is, akkor csak egy réteg lesz. Ezért előzetesen szükséges, hogy tárgyakat helyezzen különböző rétegekre. Ez megtörténhet különböző utak - A legegyszerűbb módja a réteg kiemelésére 1. réteg. A rétegek palettán és a csapat használata Kiadás a rétegre. (Felszabadul a rétegekbe). Az eredmény lesz az egyes tárgyak mozgása a rétegen, de mindannyian beágyaznak a rétegben 1. réteg.. Ezért manuálisan meg kell húznia az összes befektetett rétegeket a rétegek palettájának felső részébe, hogy azok a réteg felett vannak 1. réteg.majd üres réteg lett 1. réteg. Csak távolítsa el (63. ábra). A parancs alkalmazásával exportálja a képet a PSD formátumba Fájl \u003d\u003e Export (Fájl \u003d\u003e Export) a 2. ábrán látható berendezésekkel. 64.

Töltse fel a létrehozott PSD fájlt az ImageSEADY programba (65. és 66. ábra). Nyissa meg a paletta menüt Élénkség. Készítsen keretet a rétegekből (Hozzon létre keretet a rétegekből). Ennek eredményeképpen öt képkockát hoznak létre, amelyek mindegyike illeszkedik a rétegükbe, és a paletta ablakba Élénkség. Úgy néz ki, mint az 1. ábrán látható. 67.

Ezt követően állítsa be a létrehozott keretek időtartamát - ebben az esetben a 0,2 s időtartama minden keretre telepítve van. Majd mentse az animációt az optimalizálással a parancs segítségével. Fájl \u003d\u003e Mentés optimalizált (Fájl \u003d\u003e Mentés optimalizálással). A kapott eredmény hasonlíthat. 68.

Még kényelmesebb, hogy olyan billeteket szerezzenek, amelyek könnyen kezelhetők az animációhoz képzeletben, használati funkciókat használnak Élő keverékek. Illusztrátorprogramok. Az Illustrator és az imageready programok ilyen kombinált alkalmazása jelentősen felgyorsítja a GIF animációk létrehozásának folyamatát.

Például húzzon két önkényes többszínű tárgyat, majd rögzítse a keveréket megfelelő paraméterekkel (69. ábra). Lehetetlen közvetlenül használni ezt a fájlt egy animáció létrehozásához, mivel a kép egyetlen rétegen van (70. Ezért előzetesen szükség lesz a keverékobjektum minden elemére, amelyet külön rétegre kell helyezni. Ehhez az ablakban Rétegek. Jelölje ki a karakterláncot , aktiválja a palettát a jobb felső sarokban lévő fekete nyílra kattintva, és válassza ki a parancsot A rétegek szekvenciájának felengedése (Szekvenciálisan átalakítva) (71. ábra). Lefog Váltás., Jelölje ki a létrehozott rétegeket, és helyezze el őket a réteg felett. 1. réteg.majd távolítsa el a réteget 1. réteg., Mozgassa a kosárba - ennek eredményeképpen a rétegek palettája ugyanolyan megjelenést fog tenni, mint az 1. ábrán. 72.

Ábra. 70. A rétegek kezdeti állapota

Exportált fájl exportálása PSD parancsformátumra Fájl \u003d\u003e Export (Fájl \u003d\u003e Export). Nyissa meg a létrehozott PSD fájlt az ImageSEADY programban (73. ábra). Ne feledje, hogy a rétegek ablakában megjelenik a programban létrehozott rétegek (74. ábra) és az ablakban Élénkség. Egy csak egyetlen keret lesz.

Aktiválja a palettát Élénkség.A paletta jobb felső sarkában található fekete nyílra kattintva, és válassza ki a parancsot Készítsen keretet a rétegekből (Keretek létrehozása a rétegekből) - Ennek eredményeképpen öt képkockát hoznak létre ebben a példában, és a paletta ablak létrejön. Élénkség. nézetet tart az 1. ábrával összhangban. 75. Jelölje ki az összes képkockát a gomb lenyomva tartása közben. Váltás., és állítsa be a megfelelő keret megfelelő időtartamát - ebben a példában, minden olyan keret esetében, amelyet ugyanabban az időben tartottak 0,2 s-on. Ezután mentse el a fájlt a parancsoptimalizálással. Fájl \u003d\u003e Mentés optimalizált(Fájl \u003d\u003e Mentés az optimalizálással) a listában telepítve Fájltípus választási lehetőség Képek csak (* .gif). Az animáció hasonlít a rizsre. 76.

Nem sokkal érdekesebb, hogy mozogjon, hanem sima változás a keverék tárgyak méretében. Például használhatja a már létrehozott keverék átmenetet. Ebben az esetben, miután külön rétegeket hoztak létre minden egyes keverék átmeneti elemhez, helyezze az összes tárgyat egymásra, a gombokkal Vízszintes igazító központ(Összehangolás a központhoz képest vízszintes) és Függőleges Align Center. (Összehangolás a középpont függőleges) paletta Igazítsa. (77. ábra).

Exportálja a létrehozott fájlt PSD formátumba ( Fájl \u003d\u003e Export- File \u003d\u003e Export), és nyissa meg a létrehozott PSD fájlt az ImageSeady programban (78. ábra). Az animációs keretek rétegei alapján ( Készítsen keretet a rétegekből - Keretek létrehozása a rétegekből), és válassza ki a megfelelő időtartamot (79. ábra). És akkor, hogy az animáció több látványos, másolja a meglévő kereteket, de fordított sorrendben, hogy a kép először nő, majd csökken, és így egy kört (ábra. 80). Ezután mentse az optimalizálási fájlt ( Fájl \u003d\u003e Mentés optimalizált- File \u003d\u003e Mentés az optimalizálással). A kapott animációt az 1. ábrán mutatjuk be. 81.

Ábra. 80. Az animációs ablak állapota a keretek megkettőzése után

Ábra. 81. Kész animáció

Ma nem vagyunk elég rendesek az Adobe lecke. Illusztrátor. Mert ezúttal nem fogunk statikus képet csinálni, de a legszívesebb animáció. Képzeld el, kiderül, hogy van az Adobe használatával. Illusztrátor is rajzfilmeket rajzolhat :)

És szükségünk lesz erre. A rétegek illetékes szervezése és a végső munka exportja az SWF formátumban, ahol minden egyes réteg az animáció keretébe kerül. A mai leckében a visszaszámlálás animációját retro stílusban rajzoljuk. A kimeneten egy flash film ezzel a visszaszámlálás.

Az első dolog, amit meg kell tenni, hogy felhívja az összes szükséges elemet a jövőbeli animációra. Ehhez egy külön dokumentumban tett két pozíció a filmben, a kör referencia, amely vágva külön ágazat, a textúra és a függőleges karcolás hozzá a hatását az ókor, valamint az összes számot és a feliratokat.

Amikor a rajzfilmünk minden része készen áll, elkezdheti létrehozni az animációt. A kényelem érdekében jobb egy új dokumentumban. Ugyanakkor a rétegek szerepet játszanak az animációs keretekben. És az első rétegben csak kell másolnia a film kereteit. Helyezze a munkaterület közepére.

Most hozzon létre egy második réteget, és másoljon egy film képkeretét, amelyben a szélek körüli lyukak eltolódnak. Ezenkívül a központban kell lennie.

E két rétegből már megkaphatja a mozgó film animációját. De később sok rétegre lesz szükségünk. Ezért jelölje ki az első két réteget, menjen a panelbeállításokhoz, és készítsen egy példányt a rétegről.

Hasonlóképpen 12 réteget kell felhalmoznunk a film keretével, és megkérdezik a mozgalmát.

Most van egy csomó réteg van, és mindegyik látható. Abban az értelemben, hogy a felső rétegeket az alsó blokkolja, ami nem teljesen kényelmes a munkához. Ezért kikapcsolhat néhány réteget az ikonra kattintva a réteg név bal oldalán. Ha egyszerre kapcsolja ki vagy engedélyezheti az összes réteget, tartsa lenyomva az ALT gombot, amikor a Glazik ikonra kattint. A rétegek kikapcsolása és kikapcsolása, pontosan azt láthatja, hogy mi található a jövőbeli animáció egy bizonyos keretében. És most, hogy könnyű jitteret adjunk hozzá a film mozgatásához, a fogadott kereteket kissé különböző irányba kell helyezni. Ehhez kapcsolja be csak a réteget, amellyel dolgozni fogsz ebben a pillanatbanMajd mozgassa a keretet egy pár pixelre bármilyen irányba.

Amikor átment az összes rétegben, és hozzáadott egy kis váltást, elkezdheti létrehozni a mozgó kör animációját. Ehhez másolja az ágazatokból álló köret, egy rajzfilm pótalkatrészekkel, és tegye az első rétegre a film kereténél.

Ha eltávolítja a választást a körből, akkor úgy néz ki, mint egy egész szám. Ez az, amire szükségünk van.

De mivel külön ágazatokból áll, akkor megváltoztathatja a színüket, nagyon gyorsan és könnyen létrehozhat animációt. Ehhez másolja ezt a köret a második rétegbe, és tegye az első szektor könnyebbé. Emlékszel arra, hogy a film vezetés közben remeg, így nem szükséges pontosan a kör közepén helyezni. Helyezze a szemre.

Hasonlóképpen, meg kell másolni a kör minden következő réteg, míg festeni a fogmosás vonal egy szektor több, mint az előző alkalommal. Mindez együtt, ezek a 12 réteg a film mozgásának animációját képezik töltővel.

Ezután hozzá kell adnod a textúrát a rétegekbe. Kapcsolja be az első réteget, és másolja a textúrát a forrásfájlból pótalkatrészekkel.

Ezután kapcsolja be a következő rétegeket, és másolja meg ugyanazt a textúrát. Annak érdekében, hogy minden kereten másképp nézhessen, egyszerűen 90 fokos szögre fordítsa. Mint már kitaláltad, hozzá kell adnunk a textúrát mind a 12 képkockához.

Ha már elfáradt a küzdelem, akkor tudsz szállítani - nagyon kevés. A legnehezebb már mögött. Továbbra is hozzá kell adnia függőleges karcolást, és szinte mindent. Ehhez ismét másolja az eredeti karcolását, és tetszőleges helyre helyezze több rétegben. Az én esetemben a karcolások csak két rétegben jelennek meg.

Most, hogy készen áll a fő ciklus a film animációjával, továbbra is hozzáad számokat. Mivel 3-ról 1-re és egy másik szóra megy !!!, akkor még több rétegre van szükségünk. Nem 12, hanem annyi, mint 48. Ehhez meg kell, hogy három példányban kész rétegek az animációs film.

És akkor minden egyszerű. Az első réteg bekapcsoljuk, és három számot helyezünk.

Ezután meg kell másolnia ezt az ábrát a következő rétegekbe, amíg a kör animációja befejeződik. Ha eléri a réteg következő példányát, ahol a kört teljesen teljesen feltölti, két számot kell tenned. Hasonlóképpen másolja az első számot a kívánt rétegekre. És amikor eljutsz a végső rétegekhez, úgy tervezték, hogy feliratkozzunk!

Ezzel az animációval mindent. A legfontosabb dolog, hogy ne legyen zavaros. Lehet, hogy a rétegek kényelmes neveket adhatsz, de valahogy lusta voltam :) és még akkor is, ha befejezte a munkát, győződjön meg róla, hogy visszaállítja az összes réteget az üvegezés ikonra kattintva.

Az exportálási beállítások ablakban feltétlenül telepítse az exportot: AI rétegek swf keretekre. Ez az opció, amely az illusztráló rétegeket az animációs keretbe fordítja. Ezután kattintson a Speciális gombra.

A Speciális beállítások megnyílnak. Itt be kell állítania a képsebességet. 12 képkocka van másodpercenként. A ciklikus animációért a csekk-karjelölés felelős. Neki köszönhetően a videót egy körben fogják játszani. És a réteg megrendelési opció: Az alsó felfelé játszik az Illustrator rétegek alulról felfelé a panelben. Csak az animációnkat építettük.

A kimeneten egy flash filmet kapunk az animációnkkal.

Most látod, hogy az Adobe Illustrator-i egyszerű animáció nem olyan nehéz, mint az első pillantásra.

De hosszú hengerek vagy interaktív alkalmazások létrehozása, még mindig jobb használni Adobe Flash. vagy más flash szerkesztők. Például ez a macska a régi Macromedia flash-ben tettem, aki a munkahelyen ásott.

Utolsó alkalom, a HTML5 és a CSS3-t gyakrabban használják az animáció létrehozásához. Ez a kód támogatott modern böngészők És nem igényel egy flash-lejátszó használatát.

Római aka Dacascas. Különösen a bloghoz

Iratkozzon fel hírlevelünkre, hogy ne hagyjon ki semmit új:

Ma nem a szokásos Adobe Illustrator lecke. Mert ezúttal nem fogunk statikus képet csinálni, de a legszívesebb animáció. Képzeld el, kiderül, hogy rajzfilmeket is rajzolhat az Adobe Illustrator :)

Most hozzon létre egy második réteget, és másoljon egy film képkeretét, amelyben a szélek körüli lyukak eltolódnak. Ezenkívül a központban kell lennie.

Hasonlóképpen 12 réteget kell felhalmoznunk a film keretével, és megkérdezik a mozgalmát.

Most van egy csomó réteg van, és mindegyik látható. Abban az értelemben, hogy a felső rétegeket az alsó blokkolja, ami nem teljesen kényelmes a munkához. Ezért kikapcsolhat néhány réteget az ikonra kattintva a réteg név bal oldalán. Ha egyszerre kapcsolja ki vagy engedélyezheti az összes réteget, tartsa lenyomva az ALT gombot, amikor a Glazik ikonra kattint. A rétegek kikapcsolása és kikapcsolása, pontosan azt láthatja, hogy mi található a jövőbeli animáció egy bizonyos keretében. És most, hogy adjunk fényt jitter a film mozgó, meg kell tenni a fogadott keretek egy kicsit más irányba. Ehhez csak a réteget, amellyel jelenleg dolgozni fog, majd a képet egy pár pixelre vágja bármely oldalra.

Ha eltávolítja a választást a körből, akkor úgy néz ki, mint egy egész szám. Ez az, amire szükségünk van.

Ezután hozzá kell adnod a textúrát a rétegekbe. Kapcsolja be az első réteget, és másolja a textúrát a forrásfájlból pótalkatrészekkel.

És akkor minden egyszerű. Az első réteg bekapcsoljuk, és három számot helyezünk.

A kimeneten egy flash filmet kapunk az animációnkkal.

Most látod, hogy az Adobe Illustrator-i egyszerű animáció nem olyan nehéz, mint az első pillantásra.

Hosszú görgők vagy interaktív alkalmazások létrehozása, még mindig jobb az Adobe Flash vagy más flash szerkesztők használata. Például ez a macska a régi Macromedia flash-ben tettem, aki a munkahelyen ásott.

Utolsó alkalom, a HTML5 és a CSS3-t gyakrabban használják az animáció létrehozásához. Ezt a kódot a modern böngészők támogatják, és nem igényelnek flash-lejátszó használatát.

Római aka Dacascas. Különösen a Blog Microsstrum Illustrator