Hogyan készítsünk átlátszó hátterű GIF-et az Illustratorban. Útmutató: SVG-animációk létrehozása After Effects CC-vel Hogyan animáljunk az Illustratorban

A Flash-fájlformátum (SWF) azon alapul vektoros grafikaés méretezhető, kompakt webes grafikákhoz készült. Mivel ez a fájlformátum vektorgrafikán alapul, az objektum bármilyen felbontásban megőrzi képminőségét, és ideális animációs keretek készítéséhez. Az Illustratorban külön animációs kereteket hozhat létre a rétegeken, majd a képrétegeket külön keretként exportálhatja a webhelyen való használatra. Meg is határozhatod szimbólumok az Illustrator fájlban, hogy csökkentse az animáció méretét. Exportáláskor minden szimbólum csak egyszer kerül meghatározásra az SWF-fájlban.

Exportálási parancs (SWF)

Biztosítja a legtöbb szabályozást az animáció és a bittömörítés felett.

Több szabályozást biztosít az SWF és bitmap formátumok keveréke felett egy töredezett elrendezésben. Ez a parancs kevesebb képbeállítást kínál, mint az Exportálás (SWF) parancs, de a legutóbb használt Export parancsbeállításokat használja (lásd).

Tartsa szem előtt a következő irányelveket, amikor előkészít egy objektumot SWF formátumban történő mentésre.

A Device Central segítségével megtekintheti, hogyan fog kinézni az Illustrator grafikája az alkalmazásban. Flash player különféle kézi eszközökön.

Illustrator grafika beszúrása

Az Illustratorban készített grafikák gyorsan, egyszerűen és egyszerűen másolhatók és illeszthetők be a Flash-be.

A következő attribútumok megmaradnak, amikor beilleszti az Illustrator grafikát a Flash-be.

    Kontúrok és formák

  • Vonalvastagság

    Gradiensek meghatározása

    Szöveg (beleértve az OpenType betűtípusokat is)

    Kapcsolódó képek

  • Keverési módok

Ezenkívül az Illustrator és a Flash a következőket támogatja grafikák beszúrásakor.

    Amikor rétegeket választ ki az Illustrator grafikában felső szint a Flash-be való beillesztés pedig megőrzi a rétegeket és tulajdonságaikat (láthatóság és blokkolás).

    Az Illustrator nem RGB színformátumait (CMYK, szürkeárnyalatos és egyéni formátumok) a Flash RGB-vé alakítja. Az RGB színek beillesztése a szokásos módon történik.

    Az Illustrator-grafikák importálásakor vagy beillesztésekor különféle beállításokat használhat bizonyos effektusok (például a szöveg által vetett árnyék) Flash-szűrőként való megőrzésére.

    A Flash elmenti az Illustrator maszkjait.

SWF-fájlok exportálása az Illustratorból

Az Illustratorból exportált SWF-fájlok megfelelnek a Flash-ből exportált SWF-fájlok minőségének és tömörítési arányának.

Exportáláskor számos előre definiált stílus közül választhat az optimális kimenet érdekében, és megadhatja, hogyan használjon több rajztáblát, hogyan konvertálja a szimbólumokat, a rétegeket, a szöveget és a maszkokat. Például exportálhatja az Illustrator szimbólumokat filmként vagy grafikaként, és létrehozhat SWF-szimbólumokat az Illustrator rétegekből.

Illustrator-fájlok importálása Flash-be

Ha egy teljes elrendezést szeretne létrehozni az Illustratorban, majd egy lépésben importálni a Flash-be, mentheti a grafikát Illustrator Native Format (AI) formátumba, és nagy pontossággal importálhatja azt a Flash-be a Fájl> Importálás ide menüponttal. munkaterület Vagy Fájl> Importálás a könyvtárba.

Ha az Illustrator-fájl több rajztáblát is tartalmaz, válassza ki az importálni kívánt rajztáblát a Flash-importálás párbeszédpanelen, és adja meg a beállításokat a rajztábla minden egyes rétegéhez. A kiválasztott rajztábla összes objektuma importálásra kerül Flash program egyetlen rétegként. Ha egy másik rajztáblát importál ugyanabból az AI-fájlból, az objektumok az adott rajztábláról új rétegként importálódnak a Flash-be.

Amikor az Illustrator grafikát AI, EPS vagy formátumban importálja PDF melléklet A Flash megőrzi ugyanazokat az attribútumokat, mint a beillesztésnél grafikai objektumok Illusztrátor. Ezenkívül, ha az importált Illustrator-fájl fóliákat tartalmaz, a következő módok egyikével importálhatja azokat.

    Konvertálja az Illustrator-rétegeket Flash-rétegekké.

    Konvertálja az Illustrator rétegeit Flash-keretekre.

    Konvertálja az összes Illustrator-réteget egyetlen Flash-réteggé.

Most bonyolítsuk egy kicsit a feladatot - készítünk egy animált Flash-bannert. Beszéljen a teljes értékű Flash-animációról ebben az esetben természetesen nem szükséges - erre speciális csomagok vannak. De az Illustrator segítségével egyszerű, amatőr videót is készíthet.

Az Adobe Illustratorban nincsenek speciális eszközök és interfész eszközök, mint például az animációs fejlesztő programokra jellemző idővonal. De van egy finomság - a rétegeket keretként használhatja.

Hozzon létre egy szalaghirdetést, amely csak szöveget tartalmaz.

  1. Csoportosítsa a karaktereket a paranccsal Objektum ›Csoport(Objektum ›Csoport).
  2. A következő feladat az, hogy a font karakterekből kontúrobjektumokat készítsünk, különben a rétegek helyes kialakítása nem működik. Ehhez válassza ki a csoportot, és válassza ki Írja be: ›Körvonalak létrehozása(Betűtípus ›Trace).
  3. Ezután nyissa meg a paletta menüt Rétegek(Rétegek) a palettán található nyílgombra kattintva (8.11. ábra).

Rizs. 8.11... Réteg paletta menü

Érdekel minket az ebben a menüben található parancs Feladás rétegre (sorozat)(Konvertálás rétegekké (szekvenciálisan)), amely minden egyes objektumot új fóliává fordít. Kérjük, vegye figyelembe, hogy a parancs használatakor a csoportot kell kiválasztani. Csoport, nem egy réteg 1. réteg.

Hogyan kell kinéznie a palettának Rétegek(Rétegek) a végrehajtás után Feladás rétegre (sorozat)ábrán látható (Konvertálás rétegekké (szekvenciális)). 8.12.


Rizs. 8.12... Réteg paletta a Release to Layer (Sequence) végrehajtása után

Ezzel az előkészítés befejeződött, ezzel spórolhatsz Kivéve Web(Mentés webre) SWF-ben. SWF a Flash-alapú grafika fő formátuma. Helyesebb lenne azt mondani, hogy ez a Flash formátum (8.13. ábra).

Valószínűleg ma már minden felhasználó többé-kevésbé ismeri a Flash-t. Jelenleg ez a legelterjedtebb animációs formátum az interneten, és a multimédiás internetes oldalak túlnyomó többségének elkészítésére használják.

Az Adobe Illustratorban persze még a Flash képességeinek a tizede sincs implementálva, mert a program nem erre való. Ennek ellenére statikus képet vagy egyszerű animációt készíthet benne.


Rizs. 8.13... Optimalizálási beállítások az SWF formátumhoz

A következő beállítások léteznek.

  • Csak olvasható(Csak olvasni). Ha bejelöli a jelölőnégyzetet, akkor a fájl úgy lesz megírva, hogy többé nem lehet megnyitni semmilyen programban szerkesztésre. Ez egyrészt csökkenti a fájlok méretét, másrészt védi a szerzői jogait.
  • Az 1-gyel jelzett beállítás. A mentés típusát meghatározó paraméter egy kép vagy animáció.
  • Ha a lehetőséget választja AI-fájlból SWF-fájlba(Az Illustrator fájl be SWF fájl), a kép statikus képként kerül mentésre, amely teljesen megismétli azt, amit az Illustratorban való munka során a képernyőn lát.
  • Rétegek SWF-keretekhez(Rétegek SWF-keretekre) lehetővé teszi a meglévő rétegek animálását keretként való megjelenítéshez. Ezt a konkrét lehetőséget kell választanunk.
  • Görbe minősége(Görbe minősége). A fájl görbéinek pontossága az eredeti kép görbéinek megismétléséhez. Ennek a paraméternek a csökkentése jelentősen rontja a minőséget, különösen az apró részletek területén, de a fájl mérete csökken. Esetünkben az optimális érték "7".
  • Filmkocka szám(Képek késleltetése). Képkockasebesség és ennek eredményeként az animáció sebessége. A megfelelő hatás érdekében állítsa legfeljebb 4 képkocka/másodperc értékre.
  • Hurok(Ismételni). Animáció lejátszása többször. Alkalmas animációhoz, ahol fontos az ismétlődő ciklus. A banner ilyen típusú.

Adobe Illustrator és Utóhatás
Import és egyszerű animáció

Szia. Ma az After Effects egyszerű animációit tekintjük át.

Erőforrások: Adobe Illustrator CC
Adobe After Effects CC

Kezdjük azzal, hogy megtanuljuk, hogyan kell rajzolni az Illustratorban.

Húz
1) Rajzoljunk egy sárga téglalapot a háttérnek

1. ábra - Téglalap

2) Rajzolj egy kört, és töltsd ki színátmenettel
Dolgozzunk egy kicsit a körön:
- távolítsa el az alsó pontot a kontúron, ívet kapunk;
- húzunk egy egyenest, lezárva az ív alját, félkört kapunk


2. ábra - 1) kört rajzolni; 2) gradiens; 3) pont törlése

3) Rajzolj egy téglalapot, és készíts róla egy másolatot
- egy szürke téglalap;
- egy másik téglalap sötétszürke
4) Rajzoljon egy háromszöget egy csillagból a sugarak számának 3-ra állításával


3. ábra - 1) egyenes fény; 2) egyenes sötét; 3) háromszög

5) Rajzolj egy macskát toll és egyszerű formák segítségével

4. ábra - 1) fej; 2) nyak; 3) test; 4) láb; 5) farok

És most a legtöbbet pillanat
Osszuk el a képeket rétegekre (ami animált lesz - külön rétegen) így:

5. ábra - minden kép (piros jelöli a fontos rétegeket)

Mindent, most mentünk.
Lássuk a mentési beállításokat


6. ábra - Mentés

És most a következő lépés. BezárásAdobe Illustrator és nyissa meg az After Effects alkalmazást.

Importálás az After Effectsbe
Fájl - Importálás - Fájl - válassza ki a mentett fájlunkat Illusztrátor.
Válasszuk a rétegek Illustratorból való importálását, ha felrakunk egy felvételt, akkor összevont rétegekkel kapunk képet, de erre nincs szükség.

7. ábra – Importálás összetételként

Mindent importáltak.
Most pedig lássuk, mi van. Kattintson duplán egy kompozícióra mi nyílna meg és látnánk a rétegeket (ha minden jól van, akkor több réteg lesz). Megértjük, lásd az ábrát


8. ábra - Nyitott kompozíció

És amiért ma itt vagyunk, az az animáció.

Animáció be Utóhatás
Állítsa be a forgáspontot a tetején lévő nyílnál a Pan Behind eszközzel ( gyorsbillentyű- Y). Csak vegyél egy pontot, és helyezd át ahova csak akarod. Ennek eredményeként ez így fog kinézni..

9. ábra – Pan eszköz és rétegek

Oké, most térjünk át az animációs rétegekre.
Szükségünk van egy Arrow rétegre és egy Head_cat rétegre.
Kezdjük a nyíllal.
Bővítsük ki a listát, keressük meg és kattintsunk az órára. Így tesszük az első pontot nulla másodpercre. Az animáció összesen 2 másodpercet vesz igénybe.
Tehát ezeket a beállításokat kell elvégezned (összesen 3 pontot adj)

Második 0 1 2
+66 - 70 +66
Így fog kinézni:


10. ábra - Forgatás nyíl

Most animáljuk meg a macska fejét.
Bővítsük ki a head_cat elemet, és keressük meg Pozíció.
4 pont lesz.
Csak az utolsó koordinátát változtatja meg a többi érintése nélkül.

Második 0.1 0.17 1.12 2.0
Pozíció 689.3 729.3 729.3 689.3
Megnézzük a képet.


11. ábra - Helyezze el a fejet

Tehát az animáció elve ilyen volt. A nyíl egyik oldalról a másikra lendül, amint közeledik a cicához, magába húzza a fejét, kicsit elidőzik ebben a helyzetben, majd visszateszi a helyére.

A végső szakasz

Termelés
A munkádból kész terméket kell létrehoznod.
Menjünk a menühöz - Hozzáadás a renderelési sorhoz
Megnyílik a Render panel, és az Output Module-ban (két kattintással) válassza ki a kimeneti formátumot. Vettem * .mov


12. ábra - Renderelés

Nyomja meg a RENDER gombot, és kapja meg az eredményt (csak ne felejtse el megadni az elérési utat).
Ez minden.

Üdv mindenkinek! Ma megpróbálom leírni a program képességeit Adobe Illustratorösszehasonlítva az öblítés képességeivel. Ez nem a program globális elemzése lesz, hanem néhány érdekes chip leírása, amelyeket ebben a programban fedeztem fel. A tanulmányozás során darabonként gyűjtöttem össze az információkat, hogy mindent egy posztba tegyek. Azonnal be kell vallanom, hogy nem vagyok túl gyakorlott illusztrátor felhasználó, csak elmúlt hat hónap Rajznál használom (előtte mindent vakuval festettem). Sokan panaszkodnak, hogy az illusztrátor bonyolult, nem mindig intuitíven egyértelmű. Bizonyos mértékig egyetértek azzal, hogy az öblítés után ez a program nehéz. De itt nem az a fő, hogy abbahagyjuk, hanem a tanulás folytatása. És pár hét múlva megjelenik a gondolat, hogy is tudtam volna nélküle!

Szóval, mi tetszett az illusztrátorban, és mit találtam magamnak, ami nincs benne a Flashben.
1. Kezdem a legegyszerűbbel, de ugyanakkor szükséges. Próbáld meg villámgyorsan körbe rendezni a tárgyakat. Korábban volt Deco eszköz, de eltávolították, láthatóan szükségtelennek tartották. Úgy döntöttünk, hogy szórakoztatóbb tollal csinálni. Az Illustrator a következő funkcióval rendelkezik: Hatás – Torzítás és átalakítás – Átalakítás.


Minden gyors és egyszerű, az értékeket (objektumok közötti távolság, példányszám) mi magunk állítjuk be a beállításokban.

2. Cikcakk

Még egyszerűbb, de mégis hasznos dolog. Apróságnak tűnik, de villámgyorsan kézzel kell rajzolni, illusztrátorban másodpercek kérdése.

3. Tárgyak deformációja (Warp)

Ilyen egy pillanat alatt nincs. Az alábbi példában csak 2 módot mutattam be az egyszerű formák deformálására (Effect - Warp - Arc / Fish). Valójában 15 van belőlük. legújabb verzió programokat.

4. A sarkok automatikus lekerekítése (Kerek sarkok)

Ezt manuálisan is megteheti: egy grafikus objektumon kiválasztásakor a sarokban (minden szemnél) egy fehér pont és egy lekerekített vonal szimbólum jelenik meg. Egérrel húzzuk, ízlés szerint igazítjuk.

De ez csak a formákra vonatkozik, ceruzavonallal kicsit másképp - alkalmazza a kerekítő hatást ( Hatás - Stilizálás - Lekerekített sarkok). A kimeneten ugyanazt az eredményt kapjuk.

5. Érdesítés (durvítás)

A hatást a egyszerű formák (Hatás – Torzítás és átalakítás – Érdesítés). A kimeneten olyasmit kapunk, ami egy alacsony poliszintű 3D modellre hasonlít. Véleményem szerint klassz :) És ami a legfontosabb - nagyon egyszerű.


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


7. Az űrlap kibővítése (Eltolási útvonal)

A Flash rendelkezik Expand Fill funkcióval; ceruzavonalakkal egyáltalán nem működik, ellentétben az illusztrátorral.


8. Ecsetek (Art Brush, Pattern Brush, Scatter Brush)
Lásd az alábbi képet példákkal:

9. Texture Brush

Az Illustrator számos textúra ecsetet is tartalmaz, amelyekről írtam, és hogyan jelentek meg új verzió flush -. Észrevettük, hogy az ecsetek használata az Adobe Animate programban rendkívül lassú. Ez az:(

10. Nem vagyok benne biztos, hogy ez egy egyszerű trükk, de szeretnék egy vicces nevű ecsettel foglalkozni. FoltKefe... A szerszámosládában található, nagyon szép ecset használható. Van egy csomó beállítás, jobban szeretem, mint általában. Nehéz szavakkal elmagyarázni előnyeit, jobb, ha egyszer kipróbálod.

10. Felosztás rácsra

Szintén hasznos a Split to Grid (Object-Path-Split to Grid) funkció, amely lehetővé teszi, hogy egy alakzatot egyenlő szegmensekre vágjon. Mire emlékeztet ez minket? Így van – az ablakok egy sokemeletes épületben vannak. Ami engem illet, remek dolog például városkép rajzolásához;)


Még egy hasznos eszköz Illustratorban mutatták be, valószínűleg az első kiadása óta. Használható például fa textúrák létrehozására:

12. Mozgatás (jobbra - Átalakítás - Mozgatás)

Egy tárgy elmozdulása meghatározott távolsággal. Kívánt esetben azonnal létrehozhat egy másolatot, amely vízszintesen / vagy függőlegesen a kívánt távolságra kerül a kiválasztott objektumtól. A Flash korábbi verziójában volt egy bővítmény, amely igen ezt a funkciót... Sajnos nem emlékszem a nevére.

Nagyon kényelmes zökkenőmentes minták létrehozása az Illustratorban ( Objektum-Minta-Make). Emlékszem, milyen eszeveszetten kifinomult voltam a villantásban az alkotással. A CC 2015 illusztrátor verziójában minden automatizált, egy csomó beállítás segít a minta több tucat változatban való formázásában, mindössze néhány grafikus elemmel. Többben korai változatai A programokat mind kézzel kellett végrehajtani, mint eddig a flashben.

(Megjegyzés - a minta vektorral szerkeszthető objektummá tehető a parse funkcióval ( Objektum – Megjelenés kibontása).

14. Tárgymozaik

Színpaletta készítése meglévő kép alapján. A nekünk tetsző képet a betegbe (Open), majd importáljuk Objektum – Objektummozaik létrehozása... A beállításokban megadjuk a magassági és szélességi osztás gyakoriságát.

A kimeneten pedig ezt kapjuk:

15.Blend

Színátmenetek létrehozására szolgál. Lépésről lépésre létrehozhat átmeneteket, mint például a képen. Nem mondom, hogy gyakran használom, de valakinek jól jöhet. Szerintem egyszerű háttérképeket lehet vele készíteni.

Az eszköz objektumok klónozására is használható. Helyezzen két objektumot egymástól távol, és alkalmazza a Keverési beállításokat, válassza ki a lépések számát (a klónozott objektumok számát).

16. Tool Build Shape Tool. Nagyon praktikus dolog a primitívekkel való munkához. Egy pillanat alatt kevésbé tűnt kényelmesnek.

Tartsa lenyomva az Alt billentyűt, és kattintson a kiválasztott szegmensekre - törölje a szegmenseket. Ha csak húzzuk az egeret több kijelölt terület fölé - kapcsolatok.


A kiegészítő egy olyan eszköz, amely segít automatikusan kivágni, összekapcsolni stb. kiemelt formák. Ami engem illet, nem túl kényelmes, gyakrabban használom ÉpítAlakEszköz.

(rajztáblák)

18.Egyéni eszközpanel

Lehetőség van saját eszköztár létrehozására, eldobva a feleslegeseket, és csak azokat válassza ki, amelyeket használ.

Flashben rajztáblák, nevezetesen jelenetek ( 1., 2., 3. jelenet...) külön találhatók, és váltani kell közöttük (Shift + F2). Az Illustratorban mindegyiket a szeme elé helyezheti. Kényelmes, ha ugyanabból a rajzból több változatot készít, így az összes lehetőség a szeme előtt van összehasonlítás céljából.

19 izometriával Graphic használatával Stílusok

Az utolsó pedig az, hogy 1 kattintással (pontosabban 3 kattintással, mert 3 oldalunk van;) készítsünk izometriát anélkül, hogy használnánk, grafikus stílusok segítségével ( Grafikai stílusok). Hogy ez hogyan történik, azt legközelebb aláírom.

Az Illustrator közös tulajdonsága a flash-el: képes egy objektumot szimbólummá menteni, és ez a szimbólum ugyanolyan könnyen átvihető flash-re (.ai fájl megnyitása flash-ben, Import – Importálás a színpadra).
A szimbólumok az Illustratorban ugyanazokkal a tulajdonságokkal rendelkeznek, mint a Flashben.
És a végén leírom, hogy az illusztrátorban szerintem rosszabb, mint a vaku. Igen, igen, és van ilyen. És ez a kitöltő eszköz ( Festékes vödör). Hiába próbálom betegen megszokni, vakuban kényelmesebb.
Ha a jegyzeteim hasznosak lettek számodra, vagy ha szeretnél valamit hozzátenni magadtól - üdvözöljük a megjegyzésekben! Sok szerencsét mindenkinek;)

Ma nem vagyunk egészen hétköznapiak Adobe oktatóanyag Illusztrátor. Mert ezúttal nem statikus képet készítünk, hanem igazi animációt. Képzeld, kiderül Adobe-val Rajzolhatsz rajzfilmeket az Illustratorban is :)

És ehhez semmi szükségünk. Rétegek kompetens szervezése és a végső munka exportálása swf formátumban, ahol minden réteg animációs keretté konvertálódik. A mai oktatóanyagban egy retro film stílusú visszaszámláló animációt rajzolunk. A kimenetnek egy flash videónak kell lennie ezzel a visszaszámlálással.

Az első dolog, hogy megrajzolja az összes szükséges elemet a jövőbeli animációhoz. Ehhez egy külön dokumentumban két pozíciót készítettem egy filmkockából, egy referenciakörből, amelyet külön szektorokra vágtam, egy textúrát és egy függőleges karcolást az ókor hatásának hozzáadására, valamint az összes számot és feliratot. .

Ha a rajzfilmünk minden része elkészült, elkezdheti magának az animációnak a készítését. A kényelem érdekében ezt a legjobb egy új dokumentumban megtenni. Ebben az esetben a rétegek az animációs keretek szerepét töltik be. A legelső rétegben pedig csak a filmszalag képkockáját kell másolnia. Helyezze a munkaterület közepére.


Most hozzon létre egy második réteget, és másolja bele a filmcsíkot, amelyben a szélek mentén lévő lyukak el vannak tolva. Azt is középre kell helyezni.


Ebből a két rétegből már egy mozgófilm animációja is beszerezhető. De később sokkal több rétegre lesz szükségünk. Tehát válassza ki az első két réteget, lépjen a panelbeállításokhoz, és készítsen másolatot a rétegekről.


Hasonlóképpen 12 rétegnyi mozgóképet kell felhalmoznunk a filmről.


Most egy csomó rétegünk van, és mindegyik látható. Abban az értelemben, hogy a felső rétegek akadályozzák az alsókat, ami nem túl kényelmes a munkához. Ezért néhány réteget kikapcsolhat, ha a réteg nevétől balra lévő ikonra kattint. Az összes réteg egyidejű kikapcsolásához vagy bekapcsolásához tartsa lenyomva az Alt billentyűt, miközben a szem ikonra kattint. A rétegek be- és kikapcsolásával pontosan láthatja, hogy a jövőbeli animációnk egy bizonyos képkockájában pontosan mi található. És most, hogy enyhe remegést adjunk a film mozgásához, kissé el kell mozgatnunk a kapott képkockákat különböző irányokba. Ehhez csak azt a réteget vegye fel, amellyel dolgozni fog Ebben a pillanatban majd tolja el a keretet néhány képponttal mindkét oldalra.


Ha végigjárta az összes réteget, és hozzáadott egy kis eltolást, elkezdheti létrehozni egy mozgó kör animációját. Ehhez másolja ki a szektorokból álló kört a rajzfilmrészekkel ellátott dokumentumból, és helyezze az első rétegre a filmszalag kerete fölé.


Ha megszünteti a kör kijelölését, az egyetlen egésznek fog kinézni. Pontosan erre van szükségünk.


De mivel külön szektorokból áll, nagyon gyorsan és egyszerűen készíthet animációt a színük megváltoztatásával. Ehhez másolja ezt a kört a második rétegre, és világítsa meg az első szektort. Emlékszel, hogy a filmünk mozgás közben remeg, így egyáltalán nem szükséges pontosan a képkocka közepére helyezni a kört. Helyezze a szemre.


Hasonlóképpen minden következő rétegre át kell másolni a kört, miközben világosabb színnel egy szektorral többet kell festeni, mint az előző alkalommal. Ez a 12 réteg együttvéve egy töltőkörrel ellátott fóliát alkot.


Ezután textúrát kell adnunk a rétegeinkhez. Kapcsolja be az első réteget, és másolja oda a textúrát az eredeti fájlból a tartalék alkatrészekkel.


Ezután kapcsolja be a következő rétegeket, és másolja oda ugyanazt a textúrát. Ahhoz, hogy minden kereten máshogy nézzen ki, csak forgassa el 90 fokkal. Ahogy azt már sejtette, mind a 12 képkockához textúrát kell adnunk.


Ha már unod a másolást, akkor a kedvedre tehetek - már nagyon kevés van hátra. A legnehezebb része véget ért. Marad a függőleges karcolások hozzáadása, és szinte minden. Ehhez ismét másolja le az eredeti karcolást, és helyezze el több rétegben tetszőleges helyre. Az én esetemben a karcolások csak két rétegben jelennek meg.


Most, hogy a fő hurok a film animációjával készen áll, hátra van a számok hozzáadása. Mivel 3-ról 1-re számolunk vissza, plusz a Go !!!, szó, még több rétegre van szükségünk. Nem 12, hanem 48. Ehhez még három másolatot kell készíteni a kész rétegekből a film animációjával.


És akkor minden egyszerű. Kapcsolja be a legelső réteget, és tegye oda a hármast.


Ezután át kell másolnia ezt a számot a következő rétegekbe, amíg a kör animációja véget nem ér. Amikor a rétegek következő példányához ér, ahol a kör ismét teljesen kitöltődik, máris be kell tenni a kettes számot. Ugyanígy másolja az egyes számút a kívánt rétegekre. És amikor a Go !!! felirat utolsó rétegeihez ér, egyszerűen törölje a kört, mielőtt a feliratot a kívánt rétegre másolja.


Az animációnál ennyi. A lényeg itt az, hogy ne keveredj össze. Adhatsz néhány kényelmes nevet a rétegeknek, de valahogy túl lusta voltam :) És mégis, ha végeztél, mindenképpen kapcsold vissza az összes réteget a szem ikonra kattintva.


Az exportálási beállításokat tartalmazó ablakban győződjön meg arról, hogy az Exportálás másként: AI Layers SWF Frames értékre van állítva. Ez az opció teszi az illusztrátor rétegeket animációs keretekké. Ezután kattintson a Speciális gombra.


Megnyílik további beállítások... Itt be kell állítani a képkockasebességet Frame Rate. 12 képkocka van másodpercenként. A Looping jelölőnégyzet felelős az animáció ismétlődéséért. Neki köszönhetően a videót körben játsszák le. A Layer Order: Bottom Up opció pedig az illusztrátor rétegeit alulról felfelé reprodukálja a panelen. Pontosan így építettük fel az animációnkat.


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

Most már láthatja, hogy egyszerű animációt készíteni az Adobe Illustratorban nem is olyan nehéz, mint amilyennek első pillantásra tűnik.

De hosszú videók vagy interaktív alkalmazások készítéséhez még mindig jobb használni Adobe Flash vagy más flash szerkesztők. Például ezt a macskát egy régi Macromedia Flash-ben készítettem, amit a munkám során ástam ki.

Ezenkívül az utóbbi időben a HTML5-öt és a CSS3-at egyre gyakrabban használják animációk készítésére. Ez a kód támogatott modern böngészőkés nem igényel flash lejátszót.

Roman aka dacascas főleg a blognak


Iratkozzon fel hírlevelünkre, hogy ne maradjon le semmi újdonságról: