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álja az SVG vektorokat egyszerűen jquery bővítmény Lusta vonalfestő.

forrás

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

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

1. Hozza létre a megfelelő fájlstruktúrát
2. Töltse le és csatlakoztassa a bővítményt
3. Rajzoljon egy klassz vonalrajzot az Adobe Illustratorban
4. Alakítsa át képünket Lazy Line Converterre
5. Illessze be a kapott kódot a main.js fájlba
6. 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újabb Jquery könyvtárral érkezik, az archívumból, amelyet 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

1. Rajzolja meg a vázlatos képünket az Illustratorban (ez a legegyszerűbb módja a toll eszközzel)
2. Szükséges, hogy rajzunk kontúrjai ne zárjanak össze, mert hatásunkhoz kell egy kezdet és egy vég
3. Nem szabad kitölteni
4. A maximális fájlméret 1000×1000 px, 40 kb
5. Vágjuk át az Objektum > Rajztáblák > Illesztés a rajztáblákhoz határokhoz objektum határaira
6. 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 egy üres main.js fájlba
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.

Sziasztok! Ma megpróbálom leírni a program funkcióit Adobe Illustrator, összehasonlítva az öblítés képességeivel. Ez nem a program csontok szerinti globális elemzése lesz, hanem néhány leírása érdekes chips amit 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 Deco eszköz, de eltávolították, láthatóan szükségtelennek 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 megtehető: egy grafikus objektumon egy sarokban (minden sarokban) kijelölve egy fehér pont és egy lekerekített vonaljel jelenik meg. Húzza az egeret, igazítsa ízlése szerint.

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íteni

A hatást a egyszerű formák (Hatás-torzítás és átalakítás-nagyítás). Ennek eredményeként valami alacsony poliszintű 3D modellekre emlékeztetőt kapunk. Szerintem klassz :) És ami a legfontosabb - nagyon egyszerű.

6 Pucker&Bloat(Húzza be és fújja fel)
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 egy vicces nevű ecsettel szeretnék foglalkozni foltKefe. 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;)

Egy másik hasznos eszköz, amelyet az Illusztrátorban vezettek be, valószínűleg az első kiadása óta. Ezzel például fa textúrákat hozhat létre:

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

Eltolja az objektumot egy adott távolsággal. 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 ( Objektum-Minta-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. A program korábbi verzióiban mindent manuálisan kellett elvégezni, mint eddig a flashben.

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

14. Tárgymozaik (mozaik)

Hozzon létre egy színpalettát egy meglévő kép alapján. Ezután importálja a kívánt képet az illusztrációba (Megnyitás). Objektum – Objektummozaik létrehozása. 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 engem illet, nem túl kényelmes, gyakrabban használom Építalakeszköz.

(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.

Vakuban, rajztáblákon, nevezetesen jeleneteken ( 1,2,3 jelenet...) külön találhatók, é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. Izometrikus grafikai stílusokkal

És az utolsó dolog az izometria létrehozása 1 kattintás (vagy inkább 3 kattintás, mert 3 oldalunk van;) használata nélkül grafikus stílusok segítségével ( Grafikai stílusok). Hogy ez hogyan történik, azt legközelebb megírom.

Az illusztrátor közös a flash-ben, hogy egy objektumot szimbólummá (szimbólummá) menthet, és ez a szimbólum probléma nélkül átvihető flash-re is (.ai fájl megnyitása flash-ben, Import – Importálás a színpadra).
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. És ez a kitöltő eszköz ( festékes vödör). 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;)

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 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.

Illustrator grafika beszúrása

Az Illustratorban létrehozott grafikus objektumok gyorsan, egyszerűen és egyszerűen átmásolhatók és beilleszthetők 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.

Amikor rétegeket választ ki egy Illustrator-grafikában felső szint A rétegek és azok tulajdonságai (láthatósága és blokkolása) megmaradnak egészben és Flash-alkalmazásba illesztve.

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. Az RGB színek beillesztése a szokásos módon történik.

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 filmként exportálja grafikus képek, valamint SWF szimbólumok létrehozása az Illustrator rétegekből.

Importálás Illustrator fájlok a Flash alkalmazáshoz

Ha teljes elrendezést szeretne létrehozni az Illustratorban, majd egy lépésben importálni a Flash-be, mentheti a grafikát Illustrator natív (AI) formátumban, és nagy pontossággal importálhatja azt a Flash-be a Fájl > Importálás a munkaterületre parancsok segítségével. terület" vagy " Fájl" > "Importálás a könyvtárba".

Ha az 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édpanelen, és adja meg a beállításokat a rajztáblán lévő minden egyes réteghez. A kiválasztott rajztáblán lévő összes objektum egyetlen rétegként importálódik a Flash-be. 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 egy Flash-réteggé.

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

Helló. Ma egy egyszerű animációt tekintünk át az After Effectsben.

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

Kezdjük az Illustratorban való rajzolással.

Rajzolunk
1) Rajzolj egy sárga téglalapot 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 sötétszürke téglalap
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 tollal és egyszerű formákkal

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

És most a legtöbbet FŐ 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 jön a következő szakasz. 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 történő importálását, ha felvételt teszünk fel, akkor összevont rétegekkel rendelkező képet kapunk, de erre nincs szükségünk.

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

Mind importált.
Most pedig lássuk, mi van. Kattintson duplán a kompozícióra , ami megnyílna és látnánk a rétegeket (ha mindent jól csináltunk akkor több réteg lesz). Ezt kapjuk, lásd a képet

8. ábra - Nyitott kompozíció

És most, amiért itt vagyunk - Animáció.

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

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

Ennyi, most térjünk át az animáció rétegeire.
Szükségünk van egy Arrow rétegre és egy Head_catre.
Kezdjük a nyíllal.
Bontsa ki a listát, keresse meg az órát, és kattintson rá. Tehát az első pontot nulla másodpercre tesszük. Az animáció összesen 2 másodpercig tart.
Tehát ezeket a beállításokat kell elvégezned (összesen 3 pontot adunk)

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.
Bontsa ki a head_cat elemet, és keresse 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

Né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, egy 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

Kattintson a RENDER gombra, és megkapja az eredményt (ne felejtse el megadni az elérési utat).
Ez minden.

Ma nem egészen a megszokott Adobe lecke Illusztrátor. Mert ezúttal nem statikus képet készítünk, hanem igazi animációt. Képzeld, kiderül segítség az Adobe-tól Az Illustrator rajzfilmeket is tud 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 mindent le kell rajzolni szükséges elemeket 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 ki onnan a textúrát. forrás fájl pótalkatré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.

Megnyílik további beállítások. 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é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. Adott 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: