Sziasztok! Ma megpróbálom leírni a lehetőségeket Adobe szoftver Illustrator, összehasonlítva a Flash képességeivel. Ez nem a csontprogram globális elemzése lesz, hanem néhány érdekes chip leírása, amelyeket ebben a programban fedeztem fel. Az információkat darabonként gyűjtöttem, miközben tanulmányoztam, hogy mindezt egy bejegyzésbe foglalhassam. Azonnal be kell vallanom, hogy nem vagyok túltapasztalt illusztrátor felhasználó, csak az elmúlt fél évben használom rajzban (előtte mindent flash-ben rajzoltam). Sokan panaszkodnak, hogy az illusztrátor összetett, nem mindig intuitív. Bizonyos mértékig egyetértek azzal, hogy a flash után nehéz ez a program. De itt nem az a lényeg, hogy abbahagyjuk, hanem hogy tovább tanuljunk. Pár hét múlva pedig felvetődik a gondolat, hogy is bírtam korábban nélküle!

Szóval, mit szerettem az illusztrátorban, és mit találtam magamnak, ami nem villámgyors.
1. Kezdem a legegyszerűbbel, de ugyanakkor szükséges. Próbáld meg villogással körbe rendezni a tárgyakat. Korábban volt egy Deco Tool, de azt eltávolították, láthatóan feleslegesnek tartották. Úgy döntöttünk, sokkal szórakoztatóbb lesz kézzel 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) 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 flashben kézzel kell rajzolni, illusztrátorban ez másodpercek kérdése.

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

A Flashben nincs ilyen. 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)

Kézzel is elvégezhető: egy grafikus objektumon kiválasztva egy sarokban (minden sarokban) megjelenik fehér pontés egy lekerekített vonaljel. Húzza az egeret, igazítsa ízlése szerint.

De ez csak a formákra vonatkozik, ceruzavonallal kicsit másképp - alkalmazd a kerekítő hatást (Effect - Stilize - Round Corners). A kimeneten ugyanazt az eredményt kapjuk.

5. Érdesíteni

A hatást egyszerű alakzatokra alkalmazzák (Effect - Distort&Transform - Roughen). Ennek eredményeként valami alacsony poliszintű 3D modellekre emlékeztetőt kapunk. Szerintem klassz :) És ami a legfontosabb - nagyon egyszerű.

6. Pucker&Bloat (Pucker & Bloat)
Példa az alábbi képen:

7. Űrlapkiterjesztés (Eltolási útvonal)

A vakuban van egy Expand Fill (kitöltés kiterjesztése) funkció, ceruzavonalakkal egyáltalán nem működik, ellentétben az illusztrátorral.

8. Ecsetek (Art Brush, Pattern Brush, Scatter Brush)
Példákért lásd az alábbi képet:

9. Texture Brush (Texture Brush)

Az Illusztrátorban sok textúra ecset is található, amelyekről írtam, és hogyan jelentek meg új verzió flash - . Észrevették, hogy az Adobe Animate programban az ecsetek használata rettenetesen lassú. Ez az:(

10. Nem vagyok benne biztos, hogy ez trükk, de szeretnék egy vicces nevű ecsettel foglalkozni, Blob Brush. Az eszköztáron található, nagyon szép ecset. Van rajta egy csomó beállítás, nekem jobban tetszik, mint máskor. Nehéz szavakkal elmagyarázni előnyeit, jobb, ha egyszer kipróbálod.

10. Felosztás rácsra

Egy másik hasznos funkció a Split to Grid (Object-Path-Split to Grid) funkció, amellyel az űrlapot egyenlő szegmensekre vághatja. Mire emlékeztet ez minket? Így van - ablakok egy sokemeletes épületben. Ami engem illet, remek dolog például városi tájak rajzolásához;)

Másik hasznos eszköz, illusztrátorban bemutatva, valószínűleg az első megjelenése óta. Ezzel például fa textúrákat hozhat létre:

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

Objektum eltolása által távolság beállítása. Kívánt esetben azonnal létrehozhat egy másolatot, amely vízszintesen / függőlegesen a kiválasztott objektumtól a kívánt távolságra kerü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 Illusztrátorban (Object-Pattern-Make). Emlékszem, milyen eszeveszetten jeleskedtem flashben a létrehozásával. A CC 2015 illusztrátor verziójában minden automatizált, egy csomó beállítás segít létrehozni egy mintát több tucat változatban, mindössze néhány grafikus elemmel. Többben korai változatai a programokat manuálisan kellett végrehajtani, mint eddig a flashben.

(Megjegyzés - a minta vektorral szerkeszthető objektummá tehető az expand funkcióval ( Object - Expand Appeaence ).

14. Tárgymozaik (mozaik)

Teremtés szín paletta a meglévő kép alapján. Importálja a kívánt képet a betegbe (Open), majd Object - Create Object Mosaic. A beállításokban megadjuk az osztási gyakoriságot magasságban és szélességben.

És a kimeneten ezt kapjuk:

15. Keverés (keverés)

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 mondhatom, hogy gyakran használom, de valakinek jól jöhet. Számomra úgy tűnik, hogy egyszerű háttérképek készítésére használható.

Az eszköz objektumok klónozására is használható. Elhelyezünk két objektumot egymástól távol, és alkalmazzuk a Keverési beállításokat, kiválasztjuk a lépések számát (a klónozott objektumok számát).

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

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

Kiegészítés - olyan eszköz, amely segít automatikusan vágni, csatlakoztatni stb. kiválasztott formák. Ami nekem nem túl kényelmes, gyakrabban használom a Build Shape Tool-t.

(rajztáblák)

18.Egyéni eszközpanel

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

A vakuban a rajztáblák, nevezetesen a jelenetek (1., 2., 3. jelenet) külön vannak elhelyezve, és váltani kell közöttük (Shift + F2). Az Illusztrátorban mindegyik a szeme elé helyezhető. Kényelmes, ha ugyanabból a rajzból több változatot készít, így minden lehetőség a szeme előtt van összehasonlítás céljából.

19.Izometria -val Grafikus stílusok

És az utolsó - izometriák létrehozása 1 kattintás (vagy inkább 3 kattintás, mert három oldalunk van;) használata grafikus stílusok (Grafikus stílusok) használatával. Hogy ez hogyan történik, azt legközelebb megírom.

Ami az illusztrátorban közös a flashben, az az, hogy egy objektumot szimbólumba (szimbólumba) menthet, és ez a szimbólum probléma nélkül átvihető flash-re is (.ai fájl megnyitása flash-ben, az Import - Import to stage segítségével).
Az illusztrátorban a szimbólum ugyanazokkal a tulajdonságokkal rendelkezik, mint a flashben.
És a végén leírom, mi az, ami az Illusztrátorban szerintem rosszabb, mint a flash. Igen, igen, és van. Ez pedig a kitöltő eszköz ( Paint Bucket ). Hiába próbálom illaban megszokni, flashben kényelmesebb.
Ha a jegyzeteim hasznosak lettek számodra, vagy ha szeretnél valamit saját magad hozzáfűzni - üdv a megjegyzésekben! Sok szerencsét mindenkinek;)

Ma egy szokatlan Adobe Illustrator leckénk van. Mert ezúttal nem statikus képet készítünk, hanem igazi animációt. Képzeld, kiderül, hogy az Adobe Illustrator segítségével rajzfilmeket is tudsz rajzolni :)

És ehhez semmi szükségünk. A rétegek hozzáértő szervezése és exportálása végső munka swf formátumba, ahol minden réteg animációs keretté alakul. A mai oktatóanyagban retro filmstílusú visszaszámláló animációt fogunk rajzolni. A kimenetnek egy flash filmnek kell lennie, ugyanazzal a visszaszámlálással.

Az első dolog, hogy megrajzolja az összes szükséges elemet a jövőbeli animációhoz. Ehhez külön dokumentumban készítettem két filmkocka pozíciót, referenciaként egy kört, amely külön szektorokra van vágva, egy textúrát és egy függőleges karcolást, hogy hozzáadja az ókor hatását, valamint az összes számot és feliratot.

Ha a rajzfilmünk minden része készen van, elkezdheti magának az animációnak a létrehozá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 film képkockáját kell másolni. Helyezze a munkaterület közepére.

Most hozzon létre egy második réteget, és másolja bele a filmkockát, amelyben a széleken lévő lyukak eltolással készülnek. 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ó módon 12 réteget kell felhalmoznunk filmkockákkal, amelyek meghatározzák a mozgását.

Most egy csomó rétegünk van, és mindegyik látható. Abban az értelemben, hogy a felső rétegek blokkolják az alsókat, ami nem túl kényelmes a munkához. Ezért néhány réteget kikapcsolhat a réteg nevétől balra található szem ikonra kattintva. Az összes réteg egyidejű ki- és 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, mi található a jövőbeli animációnk egy bizonyos képkockájában. Most pedig ahhoz, hogy enyhén megrázzuk a film mozgását, kissé el kell mozgatnunk a kapott képkockákat különböző irányokba. Ehhez csak azt a réteget kapcsolja be, amellyel dolgozni fog Ebben a pillanatban, majd mozgassa 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 a mozgó kör animációját. Ehhez másolja ki a szektorokból álló kört a rajzfilmrészek dokumentumából, és helyezze a filmkocka tetején lévő első rétegre.

Ha eltávolítja a kijelölést a körből, akkor az egyetlen egésznek fog kinézni. Pontosan erre van szükségünk.

De mivel külön szektorokból áll, ezek színének megváltoztatásával nagyon gyorsan és egyszerűen lehet animációt készíteni. 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 mozgás közben remeg, ezért nem szükséges a kört pontosan a képkocka közepére helyezni. 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ütt a film mozgásának animációját alkotja egy kitöltő körrel.

Ezután textúrát kell adnunk a rétegeinkhez. Kapcsolja be az első réteget, és másolja a textúrát a forrásfá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ásképp 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 eléggé belefáradt a másolásba, akkor a kedvére 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 tegye tetszőleges helyre több rétegben. Az én esetemben a karcolások mindössze két rétegben jelennek meg.

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

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

Ezután át kell másolnia ezt az ábrát a következő rétegekre, amíg a kör animáció 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, a kettes számot kell megadnia. Ugyanígy másolja be az egyes számút a kívánt rétegekbe. És amikor a Go!!! címke utolsó rétegeihez ér, egyszerűen törölje a kört, mielőtt a címkét 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ások ablakban győződjön meg arról, hogy az Exportálás másként: AI Layers SWF-keretek értékre van állítva. Ez az opció teszi az Illustrator rétegeit animációs keretekké. Ezután kattintson a Speciális gombra.

További beállítások nyílnak meg. Itt kell beállítani a Frame Rate-t. 12 képkocka van másodpercenként. A Looping jelölőnégyzet felelős az animáció ciklusáért. Neki köszönhetően a videó körben fog lejátszani. A Rétegsorrend: Alulról felfelé opció pedig az illusztrátor rétegeit alulról felfelé jeleníti meg a panelen. Pontosan így építettük fel az animációnkat.

Ennek eredményeként egy flash filmet kapunk az animációnkkal.

Most már látja, hogy egy egyszerű animáció készítése az Adobe Illustratorban nem 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égiben készítettem Macromedia Flash hogy kiástam a munkahelyemen.

Az utóbbi időben a HTML5-öt és a CSS3-at is egyre gyakrabban használják animációk készítésére. Adott kód a modern böngészők támogatják, és nem igényel flash lejátszót.

Regény, más néven dacascas kifejezetten a Notes of a microstock illusztrátor blog számára

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

Az utóbbi időben nagyon népszerűvé váltak az SVG (Scalable Vector Graphics) grafikák különféle animációi webhelyeken és alkalmazásokban. Ez annak a ténynek köszönhető, hogy minden legújabb böngészők már támogatja ezt a formátumot. Itt találsz információkat az SVG böngésző támogatásáról.

Ez a cikk tárgyalja a legegyszerűbb példa Animáljon SVG-vektorokat a könnyű Jquery beépülő Lazy Line Painter segítségével.

forrás

A feladat elvégzéséhez és teljes megértéséhez alapvető HTML, CSS, Jquery ismeretek kívánatosak, de nem szükséges, ha csak SVG-t akarunk animálni) Kezdjük!

Tehát a lépéseket kell követnünk:

Hozza létre a megfelelő fájlstruktúrát

Töltse le és csatlakoztassa a bővítményt

Rajzoljon egy klassz vonalrajzot az Adobe Illustratorban

Alakítsa át képünket Lazy Line Converterre

Illessze be a kapott kódot a main.js fájlba

Adjon hozzá egy kis CSS-t ízlés szerint

1. Hozza létre a megfelelő fájlstruktúrát
Ebben segít nekünk az Initializr szolgáltatás, ahol az alábbi képen látható módon kell kiválasztani a paramétereket.

• Klasszikus H5BP (HTML5 Boiler Plate)
• Nincs sablon
• Csak HTML5 Shiv
• kicsinyített
• .IE osztályok
• Króm keret
• Ezután kattintson a Letöltés gombra!

2. Töltse le és csatlakoztassa a bővítményt

Mivel az inicializálás a legújabbal érkezik jquery könyvtár, az archívumból, amit a Lazy Line Painter projekttárból kell letöltenünk, mindössze 2 fájlt kell átvinni a projektünkbe. Az első a „jquery.lazylinepainter-1.1.min.js” (a beépülő modul verziója eltérhet), az eredményül kapott mappa gyökerében található. A második az example/js/vendor/raphael-min.js.

Ez a 2 fájl a js mappába kerül. És ezeket az index.html-ünkbe a main.js elé helyezzük, így:

3. Rajzoljon egy klassz körvonalképet az Adobe Illustratorban

Rajzolja meg a vázlatos képünket az Illustratorban (ez a legegyszerűbb módja a toll eszközzel)

Szükséges, hogy rajzunk kontúrjai ne zárjanak össze, mert hatásunkhoz kell egy kezdet és egy vég

Nem szabad kitölteni

A maximális fájlméret 1000×1000 px, 40 kb

Vágjuk át az Objektum > Rajztáblák > Illesztés a rajztáblákhoz határokhoz objektum határaira

Mentés SVG-ként (a normál mentési beállítások rendben vannak)

Használhatja például a mellékletben található ikonokat.

4. Alakítsa át képünket Lazy Line Converterre
Csak húzza az ikonját az alábbi mezőbe.
Az átalakítás után megjelenő kódban magában a kódban módosítható a körvonal vastagsága, színe és az animáció sebessége!

5. Illessze be a kapott kódot a main.js fájlba
Most csak illessze be a kapott kódot üres fájl main.js
Lehetőségek:
strokeWidth — körvonalvastagság
strokeColor - körvonal színe
Az időtartam paraméter értékének módosításával (alapértelmezett 600) az egyes vektorok rajzolási sebességét is módosíthatja.

6. Adjon hozzá némi CSS-t ízlés szerint
Bekezdés eltávolítása az index.html fájlból

Helló Világ! Ez a HTML5 Boilerplate.

Ehelyett pedig beszúrunk egy blokkot, amelyben az animációnk fog játszódni

majd adjon hozzá némi CSS-t a main.css fájlhoz a szebb megjelenés érdekében:

Törzs (háttér:#F3B71C; ) #ikonok (pozíció: rögzített; felső:50%; bal:50%; margó: -300px 0 0 -400px; )

mentse az összes fájlt.
Most nyissa meg az index.html oldalt egy modern böngészőben, és élvezze a hatást.

P.S. helyi gépen futtatva az animáció indítása néhány másodperccel késhet.

Formátum Flash fájl(SWF) alapján 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 a képminőséget, és ideális animációs keretek létrehozásához. Az Illustratorban egyedi animációs kereteket hozhat létre rétegeken, majd a képrétegeket egyedi keretekként exportálhatja a webhelyen való használatra. Meg is határozhatod szimbólumok 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-ként történő mentésre.

Használja a Device Central alkalmazást, hogy megtudja, hogyan fog kinézni az Illustrator-grafika az alkalmazásban Flash player különféle kézi eszközökön.

Beszúrás grafikus objektum Illusztrátor

Létrehozva: Illustrator alkalmazás Egy grafikus objektum gyorsan, egyszerűen és egyszerűen másolható és beilleszthető egy Flash alkalmazásba.

Amikor Illustrator grafikát illeszt be egy Flash-alkalmazásba, a következő attribútumok megmaradnak.

Kontúrok és formák

• A löket vastagsága

  A színátmenetek definíciói

  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ő funkciókat támogatja a grafika beillesztésekor.

Ha egy Illustrator-grafikában teljes legfelső szintű réteget választ ki, és beilleszti a Flash-be, megőrzi a rétegeket és tulajdonságaikat (láthatóság és blokkolás).

Az RGB-n kívüli Illustrator színformátumokat (CMYK, szürkeárnyalatos és egyéni formátumok) a Flash RGB-vé alakítja. RGB színek a szokásos módon helyezzük be.

Illustrator-grafikák importálásakor vagy beillesztésekor különféle lehetőségeket használhat bizonyos effektusok (például a szöveg által vetett árnyék) Flash-szűrőként való menté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 minősége és tömörítése ugyanolyan, mint a Flash-ből exportált SWF-fájlok.

Exportáláskor számos előre meghatározott 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 karaktereket, a rétegeket, a szöveget és a maszkokat. Dönthet például úgy, hogy az Illustrator-szimbólumokat filmként vagy grafikaként exportálja, és SWF-szimbólumokat hozhat létre az Illustrator-rétegekből.

Illustrator fájlok importálása Flash alkalmazásba

Ha egy teljes elrendezést szeretne létrehozni az Illustratorban, majd egy lépésben importálni a Flash-be, mentheti a grafikát saját formátum Illustrator (AI), és nagy pontossággal importálja azt a Flash-be a Fájl > Importálás a színpadra vagy a Fájl > Importálás a könyvtárba menüpontban.

Ha Illustrator fájl több rajztáblát tartalmaz, válassza ki az importálni kívánt rajztáblát a Flash Importálás párbeszédpaneljén, és adja meg az egyes rétegek beállításait a rajztáblán. A kiválasztott rajztábla összes objektuma importálásra kerül Flash program egyetlen rétegként. Amikor 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 AI-, EPS- vagy PDF-fájlként importálja az Illustrator-grafikát, a Flash megőrzi ugyanazokat az attribútumokat, mint az Illustrator-grafikák beillesztésekor. Továbbá, ha az importált Illustrator-fájl fóliákat tartalmaz, az alábbi módszerek 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é.

Ma egy szokatlan Adobe Illustrator leckénk van. Mert ezúttal nem statikus képet készítünk, hanem igazi animációt. Képzeld, kiderül, hogy az Adobe Illustrator segítségével rajzfilmeket is tudsz rajzolni :)

És ehhez semmi szükségünk. A rétegek kompetens szervezése és a végső munka exportálása swf formátumba, ahol minden réteg animációs keretté alakul. A mai oktatóanyagban retro filmstílusú visszaszámláló animációt fogunk rajzolni. A kimenetnek egy flash filmnek kell lennie, ugyanazzal a visszaszámlálással.

Az első dolog, hogy megrajzolja az összes szükséges elemet a jövőbeli animációhoz. Ehhez külön dokumentumban készítettem két filmkocka pozíciót, referenciaként egy kört, amely külön szektorokra van vágva, egy textúrát és egy függőleges karcolást, hogy hozzáadja az ókor hatását, valamint az összes számot és feliratot.

Ha a rajzfilmünk minden része készen van, elkezdheti magának az animációnak a létrehozá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 film képkockáját kell másolni. Helyezze a munkaterület közepére.

Most hozzon létre egy második réteget, és másolja bele a filmkockát, amelyben a széleken lévő lyukak eltolással készülnek. 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ó módon 12 réteget kell felhalmoznunk filmkockákkal, amelyek meghatározzák a mozgását.

Most egy csomó rétegünk van, és mindegyik látható. Abban az értelemben, hogy a felső rétegek blokkolják az alsókat, ami nem túl kényelmes a munkához. Ezért néhány réteget kikapcsolhat a réteg nevétől balra található szem ikonra kattintva. Az összes réteg egyidejű ki- és 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, mi található a jövőbeli animációnk egy bizonyos képkockájában. Most pedig ahhoz, hogy enyhén megrázzuk a film mozgását, kissé el kell mozgatnunk a kapott képkockákat különböző irányokba. Ehhez csak azt a réteget kapcsolja be, amellyel éppen dolgozni fog, majd tolja el a keretet néhány képponttal bármely irányba.

Ha végigjárta az összes réteget, és hozzáadott egy kis eltolást, elkezdheti létrehozni a mozgó kör animációját. Ehhez másolja ki a szektorokból álló kört a rajzfilmrészek dokumentumából, és helyezze a filmkocka tetején lévő első rétegre.

Ha eltávolítja a kijelölést a körből, akkor az egyetlen egésznek fog kinézni. Pontosan erre van szükségünk.

De mivel külön szektorokból áll, ezek színének megváltoztatásával nagyon gyorsan és egyszerűen lehet animációt készíteni. 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 mozgás közben remeg, ezért nem szükséges a kört pontosan a képkocka közepére helyezni. 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ütt a film mozgásának animációját alkotja egy kitöltő körrel.

Ezután textúrát kell adnunk a rétegeinkhez. Kapcsolja be az első réteget, és másolja a textúrát a forrásfá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ásképp 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 eléggé belefáradt a másolásba, akkor a kedvére 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 tegye tetszőleges helyre több rétegben. Az én esetemben a karcolások mindössze két rétegben jelennek meg.

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

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

Ezután át kell másolnia ezt az ábrát a következő rétegekre, amíg a kör animáció 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, a kettes számot kell megadnia. Ugyanígy másolja be az egyes számút a kívánt rétegekbe. És amikor a Go!!! címke utolsó rétegeihez ér, egyszerűen törölje a kört, mielőtt a címkét 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ások ablakban győződjön meg arról, hogy az Exportálás másként: AI Layers SWF-keretek értékre van állítva. Ez az opció teszi az Illustrator rétegeit animációs keretekké. Ezután kattintson a Speciális gombra.

További beállítások nyílnak meg. Itt kell beállítani a Frame Rate-t. 12 képkocka van másodpercenként. A Looping jelölőnégyzet felelős az animáció ciklusáért. Neki köszönhetően a videó körben fog lejátszani. A Rétegsorrend: Alulról felfelé opció pedig az illusztrátor rétegeit alulról felfelé jeleníti meg a panelen. Pontosan így építettük fel az animációnkat.

Ennek eredményeként egy flash filmet kapunk az animációnkkal.

Most már látja, hogy egy egyszerű animáció készítése az Adobe Illustratorban nem 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 az Adobe Flash vagy más flash szerkesztők használata. Például ezt a macskát egy régi Macromedia Flash-ben készítettem, amit a munkahelyemen ástam elő.

Az utóbbi időben a HTML5-öt és a CSS3-at is egyre gyakrabban használják animációk készítésére. Ezt a kódot a modern böngészők támogatják, és nem igényel flash lejátszót.

Roman aka dacascas kifejezetten a bloghoz

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