Formátum Flash fájl Az (SWF) vektorgrafikán alapul, és méretezhető, kompakt internetes 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 a rétegeken, majd a képrétegeket egyedi keretekké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 az utoljára használt Exportálási parancsot használja (lásd ).

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

A Device Central alkalmazás segítségével megtekintheti, hogyan fog kinézni grafikus objektum Illusztrátor alkalmazásban Flash player különféle kézi eszközökön.

Illustrator grafika beszúrása

Létrehozva: Illustrator alkalmazás egy grafika 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.

Körvonalak é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ő beállításokat támogatja grafika beszúrásakor.

Ha teljes legfelső szintű rétegeket jelöl ki egy Illustrator-grafikában, és beilleszti őket egy Flash-alkalmazásba, a rétegek és tulajdonságaik (láthatóság és zárolás) megmaradnak.

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-grafika importálásakor vagy beszúrásakor különféle lehetőségeket használhat bizonyos effektusok (például szövegárnyékok) Flash-szűrőként való mentésére.

A Flash megtartja 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 meghatározott stílus közül választhat az optimális kimenet érdekében, és megadhatja, hogyan kíván több rajztáblát használni, és hogyan szeretné átalakítani a szimbólumokat, rétegeket, szöveget és maszkokat. Dönthet például úgy, hogy az Illustrator-szimbólumokat filmekként vagy grafikákként exportálja, vagy 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 pontosan importálja azt egy Flash-alkalmazásba a Fájl > Importálás munkaterületre vagy a Fájl > Importálás a könyvtárba parancs segítségével.

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édpaneljén, é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. Amikor egy másik rajztáblát importál ugyanabból az AI-fájlból, a rajztáblán lévő objektumok új rétegként importálódnak a Flash-be.

Amikor egy Illustrator-grafikát AI-, EPS- vagy PDF-fájlként importál, a Flash megőrzi ugyanazokat az attribútumokat, mint az Illustrator-grafika beszúrásakor. Ezenkívül, 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é.

Az Adobe Illustratorban az átlátszó GIF a következőképpen készül. Nyissa meg a Fájl menü Mentés webhez és eszközökhöz menüpontját (Alt+Ctrl+Shift+S). A megnyíló ablakban az Optimalizált fájlformátum mezőben először a fülre kell lépnie Képméret(Képméret). Az a helyzet, hogy alapértelmezés szerint a teljes oldal benne van az optimalizálási ablakban, és erre általában nincs szükség. Ezért a Képméret lapon törölje a jelölést a négyzetből Klip a rajztáblára(Vágás az oldal méretére), majd kattintson az Alkalmaz gombra.

Ezután válassza ki a GIF-et a formátumválasztó listából, és jelölje be az Átlátszóság jelölőnégyzetet.

Ezt követően határozzuk meg, hogy mely színek lesznek átlátszóak. A képen látható összes szín megtalálható a fülön Színes táblázat(Színtáblázat) és színes négyzetekként jelennek meg. Válassza ki az eszközt az ablak bal oldalán található eszköztáron Szemcseppentő(pipetta).

A színek meghatározásának két módja van. A legegyszerűbb, ha egy színt pipettával közvetlenül a képen adunk meg - ezután a szín egy sötét húzással kiemelésre kerül a színtáblázaton. Nos, ha pontosan tudja, hogy milyen színnek kell átlátszónak lennie, akkor a megfelelő színes négyzetre kattintva közvetlenül kiválaszthatja a színtáblázatban. Mind az első, mind a második esetben, ha több színt kell kiválasztani, akkor a Shift (vagy Ctrl) billentyű lenyomásával kell dolgoznia. A szín kiválasztása után utasítani kell a programot, hogy átlátszó legyen. Ehhez kattintson az ikonra Leképezi a kiválasztott színeket átlátszóra(Adja hozzá a kiválasztott színeket az átlátszósághoz). A képen ez a gomb be van karikázva, és a piros szín átlátszóra van állítva. Egy átlátszó terület jelenik meg a képen, és a színtáblázat négyzetének megjelenése megváltozik - egy része fehér háromszög lesz. A kiválasztott szín törléséhez ki kell jelölnie azt a Színtáblázatban, majd ismét kattintson a Kijelölt színek átlátszóvá tételére ikonra.

Néhány szó az átlátszóság beállításának módjáról. A legördülő menü felelős érte Adja meg a Transparency Dither algoritmust, oroszul - Algoritmus az átlátszóság szimulálására (ábra lent). Négy lehetőség közül választhat: Nincs átlátszó dither, Diffúziós átlátszó dither, Pattern Transparency Dither és Noise Transparency Dither. Diffúz algoritmus módban a csúszka aktívvá válik Összeg(Érték) lehetővé teszi a diffúziós érték módosítását. Mit kell alkalmazni a gyakorlatban? Céltól és képtől függően. Nem használom ezt az opciót, és mindig az alapértelmezetten hagyom – No Transparency Dither.

Kattintson a Mentés gombra – az átlátszó GIF készen áll. A munkát az Adobe Illustrator CS4 (v.14) verziójában végezték, de minden művelet és billentyűparancs több szempontból is releváns korai változat CS3 (13. v.).

Webes grafika optimalizálás

A grafikus információk átvitele sokkal lassabban történik, mint a szöveges információk, és a képek betöltési ideje arányos a grafikus fájlok méretével. Ezért a weboldalak gyors betöltéséhez a beléjük ágyazott grafikai képek kis méretűre van szükségük, amit azok optimalizálásával érnek el. A képoptimalizálás alatt annak konverzióját értjük, minimális fájlméretet biztosítva az ebben az esetben szükséges képminőség megőrzése mellett, ami elsősorban a grafikus képek színszámának csökkentésével, tömörített és speciális fájlformátumok használatával, valamint a tömörítési paraméterek egyéni optimalizálásával érhető el. képtöredékek.

Az Illustrator beépített képoptimalizáló eszközökkel rendelkezik, amelyek lehetővé teszik különféle módszerek Előnézet az optimalizálási folyamat gyors és hatékony végrehajtásához. Előnézet meglehetősen pontos képet ad arról, hogyan fog kinézni az optimalizált kép valós időben, ami segít kiértékelni az optimalizálási eredményt és sikeresen kiválasztani szükséges beállításokat. És optimalizálhatja mind a közvetlenül az Illustratorban létrehozott képeket, mind a többit, például azokat a fényképeket, amelyeket egy webhelyen kell elhelyezni.

Az optimalizálási paraméterek beállítása az ablakban történik Mentés webre(Mentés webre), amelyet a menü azonos nevű paranccsal hívnak meg Fájl(Fájl). A program a négy előnézeti mód valamelyikének használatát javasolja, de az optimalizálás minőségének értékelésére a legjobb mód kettő alkalmas:

• 2-Fel(két lehetőség) az eredeti és az optimalizált kép egyidejű megtekintése szerint meghatározott beállításokat(1. ábra);
• 4-Fel(négy lehetőség) Ebben a módban a nézetablak négy ablakra van osztva (2. ábra) az eredeti kép és az optimalizált három verziójának megjelenítéséhez: az első verzió a beállított 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 változatai.

Mindkét mód jelentősen megtakarítja a keresési időt legjobb lehetőség optimalizálás, mivel szükségtelenné teszik a képek mentését különböző beállításokat optimalizálás és ezek későbbi vizuális összehasonlítása. Ezen túlmenően nem csak az optimalizált kép minősége, hanem annak mérete és betöltési ideje is értékelhető különböző lehetőségeket kapcsolatokat. Összehasonlításképpen a legkényelmesebb mód a 4-Up (négy lehetőség), amely lehetővé teszi a tömörítés vagy a palettacsökkentés képminőségre és annak méretére gyakorolt ​​hatásának vizuális értékelését, és végső soron a legjobb optimalizálási paraméterek meghatározását.

Az Illustrator lehetővé teszi a webes grafika optimalizálását nem csak GIF, JPG, PNG-8 és PNG-24 formátumban, hanem SWF és SVG formátumban is. A rendszer elmenti az indexelt képeket, amelyek kevés színnel rendelkeznek GIF formátum. A JPG formátum a színes és szürkeárnyalatos képek, fényképek és színgazdag grafikák, például színátmenetes kitöltések mentésére szolgál. Színes, átlátszó területekkel rendelkező képekhez használja PNG formátum, amely lehetővé teszi az indexelt és a színes képek mentését is, míg a PNG-8 formátumban az optimalizált kép maximális lehetséges színszáma 256, a PNG-24 formátumban pedig a kép több millió színű, ill. ezért hasonló ahhoz JPEG formátum. A PNG-24 és a JPEG között az a különbség, hogy a PNG-24 formátumú képek optimalizálására használt tömörítési módszer nem vezet minőségromláshoz, hanem ennek eredményeként nő a fájlméret. Az SVG és SWF formátumok egyesítik a grafikát, a szöveget és az interaktív összetevőket, és optimalizálhatók is.

Nézzünk egy konkrét példát a képoptimalizálásra. Tegyük fel, hogy egy weboldal logóját az Illustratorban fejlesztették ki (3. ábra), amelyet kezdetben AI formátumban mentettek el. Az azonnali webre optimalizálási kísérlet nem vezet semmi jóra, mivel ebben az esetben a kép automatikusan levágásra kerül, ami nem veszi figyelembe a keletkező felirat valódi helyzetét a deformáció következtében (4. ábra ill. 5).

Ezért próbáljuk meg a logót PSD formátumba exportálni a paranccsal Fájl=>Exportálás(Fájl=>Exportálás) A létrehozott kép mérete 143 KB lesz. Nyissa meg a kapott PSD-fájlt, és használja a parancsot Fájl=>Mentés webre(Fájl=>Mentés webre). Figyelembe véve a képben szereplő színek korlátozott számát, ebben az esetben a GIF formátum az optimális, melynek konkrét beállításait kell eldönteni. A beállításokkal kísérletezve megbizonyosodhat arról legjobb minőség megadja a program alapértelmezett tömörítési algoritmusát Szelektív(Szelektív). Ami az élsimítást illeti, a gradiens kitöltése miatt jobb, ha zajkeltő algoritmust választ. Zaj(6. ábra). Az így létrejövő optimalizáló fájl mérete 6,729 KB lesz (7. ábra), miközben a háttér átlátszósága megmarad, amit a kép GIF formátumban történő elmentésével a HTML fájllal együtt könnyű ellenőrizni (8. ábra). Ennek eredményeként in ebben a példában Az emblem.html és az emblem.gif fájlok a Primer1 mappába érkeztek.

Gombok

Minden weboldal tervezésének nélkülözhetetlen eleme a grafikus vezérlőgombok. Egyszerűen lehetetlen elképzelni egy oldalt nélkülük. A gombos rajzolás mára különleges műfajná vált, és az Illustrator lehetővé teszi a legbonyolultabb lehetőségek létrehozását. Például a hálóobjektumként és/vagy fedőmaszkokkal ellátott gombok sokkal lenyűgözőbbek, mint a hagyományosak.

Fontolja meg a kerek, domború gomb létrehozásának lehetőségét az Illustratorban. Rajzoljon egy vektorobjektumot tetszőleges színnel kitöltött kör formájában (9. ábra), és alakítsa át hálóvá a paranccsal Object=>Gradiens háló létrehozása(Object=>Create Gradient Mesh) négy sor és négy oszlop megadásával és a listában Kinézet(Nézet) az opció kiválasztásával A központba Kiemel(Kiemelés) egyenlő 60-al (10. ábra). Válasszon ki egy eszközt Közvetlen kiválasztásés kattintson az objektum bal felső sarkában az ott található rögzítési pontok kiválasztásával (11. ábra). Módosítsa a megfelelő cella színét fehérre a palettán történő kijelöléssel Színminták(12. ábra).

Vedd a szerszámot Ellipszis(Ellipszis), helyezze az egérjelölőt az előzőleg létrehozott kör közepére, és miközben lenyomva tartja a billentyűket, AltÉs Váltás, feszítse ki az új kört a régi fölé úgy, hogy az minden oldalról 1-2 pixellel nagyobb legyen a réginél. Adj neki egy fekete szegélyt ( Stroke) 1-2 pixel széles, és töltse fel radiális színátmenettel a pirostól a fehérig (13. ábra). Húzza a létrehozott vektorobjektumot 1-2 pixel jobbra és lefelé, majd a kijelölés eltávolítása nélkül kattintson rá jobb gombbal és ki helyi menü Válassz csapatot Rendezés=>Visszaküldés(Elrendezés=>Visszaküldés). Az eredmény egy üres gomb lesz, az ábrán látható. 14.

Általános szabály, hogy bármely weboldalon több azonos típusú gomb található, amelyek például csak a rájuk rajzolt nyilak irányában különböznek, jelezve a webhely körüli mozgás irányát. Nézzük a legegyszerűbb esetet, amikor két gomb van, amelyek közül az egyik egy lefelé mutató nyíllal azt jelenti, hogy következő oldal, és a felfelé mutató nyíl gombot az előzőhöz. Nyíl üresnek vegyünk egy szerszámmal megrajzolt szabályos háromszöget Poligon(Sokszög) feketére árnyékolva, és hálós objektumnak is tervezték a nagyobb hatás érdekében. Mozgassa a nyilat a gombra, és állítsa be az összes objektum egymáshoz viszonyított helyzetét a megfelelő palettagombok segítségével Igazítsa(Igazítás). Az eredményül kapott gombok közül az első az ábrán látható. 15. A parancs kiválasztásával készítsünk másolatot a fóliáról a gombbal Második réteg Rétegek, ennek eredményeként két egyforma réteget kapunk. Ezután válassza ki a nyilat a réteg másolatán, és forgassa el 180°-kal a helyi menü parancsának kiválasztásával Transform=>Forgatás Transformation=>Forgatás. Ugyanazt a gombot kapjuk, mint az ábrán. 16. Kérjük, vegye figyelembe, hogy sokkal kényelmesebb, ha egy projekthez tartozó összes azonos típusú gombot egy fájlban, különböző rétegeken tárolja, ami ebben az esetben látható.

Most el kell mentenie az egyes gombok optimalizált verzióit. Először tegye láthatatlanná az alsó réteget, ebben az esetben a felső réteg gombja megmarad. Válasszon ki egy csapatot Fájl=>Mentés webre(File=>Save for Web), állítsa be például a gomb optimalizálási paramétereit, amint az az ábrán látható. 17, kattintson a gombra Megment(Mentés), és adjon meg egy fájlnevet. A végül elmentett gomb az ábrán látható. 18. Most állítsa vissza a láthatóságot az alsó rétegre, tegye láthatatlanná a felső réteget, és mentse el a második gombot is ugyanúgy, más nevet adva neki. Az eredmény az ábrán látható. 19.

Most már csak meg kell győződni arról, hogy a gombok teljesen elfogadhatónak tűnnek a weboldalon, és elhelyezzük őket egy egyedi oldalon (20. ábra). Ennek eredményeként ebben a példában a Primer2.html fájlt és két grafikus képet kaptunk a képek mappában (mappában Primer2).

Kívánt esetben az optimalizálás során könnyen szeletté alakítható a gomb. Ebben az esetben a parancs kiválasztása után Fájl=>Mentés webre(File=>Save for Web) és az optimalizálási paramétereket az eszközpalettáról kell kiválasztani Szelet kiválasztása(Slice selection) gombot, és kattintson duplán a képre, amely végül automatikusan 1-es sorozatszámú szeletté válik (21. ábra). Ha ismét duplán kattint, megnyílik az ablak. Szelet opciók(Slice Options), amelyben meg kell adnia egy hivatkozást, és szükség esetén módosítania kell a szelet nevét (22. ábra), majd mentenie kell az optimalizált képet. Az eredmény ebben az esetben a Primer3.html (23. ábra) és a Primer3.gif (Primer3 mappa) fájlok lesznek.

Interaktív elemek

Az oldal életre keltésének egyik módja az, ha olyan dizájnelemeket vezetünk be, amelyek megváltoztatják az oldalt kinézet(vagy állapot) az egér viselkedésétől függően, vagy ritkábban bármilyen egyéb helyzet esetén: méretezés, görgetés, betöltés, hibák stb.

Az ilyen elemek közül a leghíresebbek a rollover (az angol roll over roll over, turn over) elemek, amelyek az egér hatására megváltoztatják a megjelenést. A tipikus átgörgetés példái az animált gombok. Az átgörgetést gyakran használják más webhelynavigációs elemek létrehozásakor. A valóságban minden görgetés nem egy, hanem több (legfeljebb négy) kép, amelyek mindegyike egy adott eseménynek felel meg. A fő eseményeknek a következőket tekintjük: Normál normál állapot, az egérkurzornak egy elem fölé helyezése, és a bal egérgomb lenyomása, amikor a kurzort fölé viszi. Elméletileg olyan események is szerepet játszhatnak, mint a kattintás kattintás után a bal egérgomb felengedése, a gomb elengedése után felfelé, az aktív zónából való kilépéskor. A gyakorlatban azonban gyakran csak az első három vagy akár két esemény elemének megváltoztatására korlátozódnak.

Klasszikus borulások

Klasszikus értelemben a rollover egy GIF formátumú grafikus képsorozat és a hozzá tartozó HTML kód, aminek köszönhetően az egér viselkedésétől függően a böngészőablakban egy kép helyettesít egy másikat.

Az Illustrator nem a klasszikus értelemben vett átfordítások közvetlen létrehozására szolgál, de segíthet a kezdeti elemek kidolgozásában. Az ötlet ebben az esetben az, hogy létrehozunk egy réteget az első eseménynek megfelelő képpel. Ezután készítsen másolatot a rétegről, és alakítsa át a képet, hogy megfeleljen a második eseménynek, és így tovább. Az így létrejövő többrétegű kép egy PSD fájlba kerül exportálásra a megőrzött rétegekkel, amely alapján az Image Ready programban egy rollover jön létre. Az Illustrator program használatának előnye, mint sok más esetben, számos olyan érdekes funkcióban rejlik, amelyek máshol nem érhetők el. szoftver, kombinálva a vektorgrafika átalakításának kényelmével.

Próbáljunk meg létrehozni egy olyan feliratot, amely az egér viselkedésétől függően változtatja a színét. Nyissa meg az Illustratort, és hozzon létre egy feketével kitöltött, lekerekített téglalap alakú alakzatot (24. ábra), készítsen róla másolatot, és helyezze el a képernyő egy szabad részére. Alakítsa át a téglalap első példányát hálóobjektummá, középen egy kiemeléssel (parancs Object=>Gradiens háló létrehozása Object => Gradient mesh létrehozása, négy sort és tíz oszlopot megadva (25. ábra). Aktiválja a téglalap második példányát, és állítsa be hozzávetőlegesen színátmenetes kitöltésre, amint az az ábrán látható. 26. Fedje le a színátmenetes objektumot a háló tetejére, csökkentse a színátmenet objektum átlátszatlanságát körülbelül 80%-ra, a méretét pedig körülbelül 1 képponttal, hogy végül szimulálja az ütés hatását. Ezután nyomtassa ki a feliratot a tárgyak tetejére. Eredeti formájában hagyjuk fehér szín, ami a Normál állapotnak fog megfelelni (27. ábra), majd amikor a görgetési állapot megváltozik, a felirat színe például zöldre változik, ha fölé viszi az egér jelölőjét (Over state) és kékre. ha megnyomja az egérgombot (leállás) .

Ügyeljen a palettára Rétegek ebben a szakaszban csak egyetlen réteg van benne. A paranccsal készítsen két másolatot erről a rétegről Második réteg(Duplikált réteg) a paletta menüből Rétegek, a paletta három rétegű lesz (28. ábra). Ezután a réteg első példányán változtassa meg a felirat színét zöldre, a második példányban pedig kékre (29. ábra). Ennek eredményeként megkapjuk a boruláshoz szükséges üres felületet.

Exportálja a létrehozott képet PSD formátumba, miközben megőrzi a rétegeket a parancs segítségével Fájl=>Exportálás(Fájl=>Exportálás) és az RGB színmodell kiválasztása (30. ábra). Nyissa meg a létrehozott PSD fájlt az ImageReady programban (31. és 32. ábra). Hozzon létre kereteket rétegek alapján a parancs kiválasztásával Készítsen kereteket rétegekből(Keretek létrehozása rétegekből) a paletta menüből Élénkség. Az Animáció ablak úgy fog kinézni, mint az ábra. 33. Ugyanakkor a palettán Borulások Kezdetben egyetlen Normál állapot jön létre.

Aztán az ablakban Élénkség válassza ki az indukált állapotnak megfelelő keretet, miközben a palettán van Rétegek a réteg automatikusan kiválasztásra kerül 1. réteg másolata(34. ábra). Ugrás a palettára Borulásokés kattintson a gombra Átgörgetési állapot létrehozása(Átborulási állapot létrehozása) ábra. 35, ami a feltételt eredményezi Állam felett a palettán Borulások(36. ábra). Hasonló módon hozzon létre egy állapotot Down State. Állapot aktiválása Normál a palettán Borulásokés törölje a palettáról Élénkség minden képkocka, kivéve azt, amelynek meg kell egyeznie az állapottal Normál. Ennek eredményeként a palettán minden átgörgetési állapothoz Élénkség csak egy keret fog létezni (37., 38. és 39. ábra).

Rizs. 38. A kép nézete, az Animáció ablak, valamint a Rétegek és Rollovers paletták az Over State állapothoz

Ellenőrizze az eredményt a gombra kattintva Előnézet az alapértelmezett böngészőben(Böngésző előnézete) az eszköztáron, és lépjen a böngészőablakba (40. ábra). Ezt követően mentse a fájlt a paranccsal Fájl=>Optimalizált mentés(Fájl=>Mentés 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 egy sor grafikus kép került a képek mappába.

Rizs. 40. Böngésző ablak Rollover elemmel

SVG rollovers

Az egyre népszerűbb SVG (Scalable Vector Graphics) formátum vektoros grafika), amely az XML szabvány alapján készült, különféle interaktív elemek fogadását is lehetővé teszi, különösen a rollovereket, de a gyakorlatban ez teljesen másképpen valósul meg. Érdemes megjegyezni, hogy az interaktív SVG rolloverek létrehozásához a klasszikusokkal ellentétben, amikor a megfelelő HTML kód teljesen automatikusan generálódik, a JavaScript nyelv ismerete és az objektum-orientált programozás alapelveinek ismerete szükséges.

Egy speciális palettát terveztek az SVG objektumokkal való munkavégzéshez SVG interaktivitás, amely egyszerűen megnyitható a paranccsal Window=>SVG interaktivitás(Window=>SVG interaktivitás) ábra. 41.

Vegyük fontolóra ezt a lehetőséget az átgörgetés létrehozására egy interaktív gomb példájával, amelyen a felirat színe feketéről kékre változik, amikor az egeret ráhelyezi, és újra feketévé változik, amikor az egér elhagyja az aktív zónát.

Hozzon létre egy téglalap alakú, lekerekített élű gombot, és válasszon hozzá megfelelő színátmenetes kitöltést, például az ábra szerint. 42. Állítsa be a gomb átlátszóságát a palettán Átláthatóság(Átlátszóság) ebben a példában a paraméter értéke Átlátszatlanság(Átlátszatlanság) 50%-ra van állítva. Készítsen másolatot a gombról, töltse ki sötétzölddel (43. ábra), majd alakítsa át hálóobjektummá a paranccsal Object=>Gradiens háló létrehozása(Object=>Create Gradient Mesh) négy sor és tíz oszlop megadásával és a listában Kinézet(Nézet) az opció kiválasztásával A központba(Közép felé) és az érték beállítása Kiemel(Kiemelés) egyenlő: 100. Csökkentse a háló objektumú réteg átlátszatlanságát körülbelül 40%-ra (44. ábra). Helyezzen egy hálós tárgyat egy színátmenet tetejére, és a gomb hasonlít a 2. ábrán láthatóra. 45.

Rizs. 44. A gomb másolatát alakítsa át hálóobjektummá

Egészítse ki a gombot a kívánt felirattal, és állítsa be a pozícióját a megfelelő palettagombok segítségével Igazítsa(Igazítás). Az eredményül kapott kép egy réteget fog tartalmazni három egymásra helyezett objektummal (46. ábra). Az ütemezett események a szöveges objektumra fognak hivatkozni, ezért a kényelem kedvéért változtassa meg a nevét Szöveg duplán az objektumra kattintva és új név megadásával. Hasonlóképpen változtassa meg a réteg nevét 1-es rétegtől rétegig(47. ábra).

Az eseményfeldolgozás JavaScript eljárások használatát foglalja magában, ezért csatolnia kell egy fájlt, amely leírja ezeket az eljárásokat. Events.js-nek hívják, és telepítéskor a Sample Files\Sample Art\SVG\SVG mappába menti a lemezre. Adobe programok Illusztrátor. Az Events.js fájl felvételéhez használja a parancsot JavaScript fájlok SVG interaktivitás(48. ábra). Ezután a gombra kell kattintania Hozzáadás(Hozzáadás) és keresse meg szükséges fájl a merevlemezén. Amikor a neve megjelenik a mezőben URL(49. ábra), kattintson a gombra Kész(Eljár szórakozni).

Rizs. 48. Válassza ki a JavaScript Files parancsot

Ezt követően meg kell határoznia az objektum egéreseményeire adott reakciót Szöveg. Válassza ki a Szöveg objektumot a mezőben Esemény(Esemény) paletták SVG interaktivitás esemény kiválasztása az egér felett elemColor(evt, "Szöveg", "#3333FF") ez azt jelenti, hogy amikor az egeret egy objektum fölé viszi Szöveg színe kékre változik (50. ábra). Ahhoz, hogy a szöveg színe feketére változzon, miután az egér elhagyja az aktív területet, létre kell hoznia egy másik eseményt on mouseout válassza ki a mezőben Esemény(Esemény) paletták SVG interaktivitás. Ezután a műveletsorba írja be a szöveget elemColor(evt, "Szöveg", "#000000") ennek hatására a szín visszatér feketévé (51. ábra).

Rizs. 51. A Szöveg objektum SVG Interaktivitás paletta végső megjelenése

Mentse a létrehozott görgetést SVG-fájlként a paranccsal Fájl=>Mentés másként(Fájl=> Fájltípus formátum SVG, majd állítsa be az SVG fájl mentési beállításait az ábrán látható módon. 52. Mentés után csak egy SVG kiterjesztésű fájlt kap, és nem kettőt, mint a klasszikus rollover esetén, ebben az esetben a Primer5.svg fájl (Primer5 mappa) érkezett. Ahhoz azonban, hogy az átgörgetés valóban működjön, a JavaScript-eljárások leírását tartalmazó Events.js fájlt is át kell másolnia az SVG-fájlt tartalmazó mappába. Ezt követően ellenőrizheti az átfordítás működőképességét, az eredmény az ábrán látható módon fog kinézni. 53.

SVG animáció

Az SVG formátum animáció közvetítésére is használható. Próbáljunk meg létrehozni egy egyszerű animált elemet (jelen esetben a cégről szóló információ lesz), amely akkor jelenik meg a képernyőn, ha a megfelelő grafikus objektum fölé viszi az egeret, és eltűnik, ha eltávolítja az egeret az interaktív elemről.

Készítsük el hozzávetőlegesen a következő grafikus és szöveges objektumok sorozatát, amint az ábra mutatja. 54. Nevezze át az összes létrehozott objektumot kényelmes módon úgy, hogy egymás után a következő objektum nevére kattint a palettán Rétegekés beírjuk a kívánt nevet (55. ábra). Felhívjuk figyelmét, hogy az ábrán kiemeltek. 56 tárgy Szöveg1, Szöveg2, Szöveg3És Path1 mindig látható lesz, a többi pedig csak akkor, ha az egeret az objektum fölé viszi Szöveg1.

Rizs. 54. A kép eredeti nézete

A parancs használatával tartalmazza az Events.js fájlt a JavaScript-eljárások leírásával JavaScript fájlok (JavaScript fájlok) a palettáról SVG interaktivitás gomb megnyomásával Hozzáadás(Hozzáadás) adja meg a kívánt fájlt a merevlemezen, és kattintson a gombra Kész(Eljár szórakozni).

Adja meg az objektum egéreseményeire adott választ Szöveg1. Válasszon ki egy objektumot Szöveg, mezőben Esemény(Esemény) paletták SVG interaktivitás esemény kiválasztása az egér felettés az alábbi sorba írja be a szöveget elemShow(evt, "Szöveg4"); elemShow(evt, "Path2"). Ennek eredményeként, ha az egér egy tárgy felett van Szöveg1 tárgyak láthatóvá válnak Szöveg4És Path2. Kérjük, vegye figyelembe, hogy ha egy esemény bekövetkezésekor több műveletet kell végrehajtani, akkor ezeket a „;” jellel kell megadni. Ezután hajtson végre egy hasonló műveletet az eseményhez on mouseout, írja be a hozzá tartozó szöveget, ami tárgyak elrejtését jelenti (57. ábra).

Mentse az eredményt SVG-fájlként a paranccsal Fájl=>Mentés másként(Fájl=>Mentés másként), a fájlnév megadása, a mezőben való kijelölés Fájltípus SVG formátumban, majd állítsa be az SVG fájl mentési beállításait az ábra szerint. 58. Mentés után a Primer6.svg fájl érkezik (Primer6 mappa). Ne felejtse el átmásolni az Events.js fájlt a fájlt tartalmazó mappába. Ha ezek után futsz coz ez a fájl, akkor az ábrán látható eredményt fogja látni. 59. Szinte erre van szüksége. Az egyetlen dolog, ami nem szerepelt a terveinkben, az a tárgyak kezdeti megjelenése Szöveg 4 és Pálya 2 betöltéskor. Ennek a hiányosságnak a megszüntetéséhez válassza ki egyszerre mindkét objektumadatot, és hozzon létre egy műveletet elemHide(evt, "Szöveg4"); elemHide(evt, "Path2") eseményre Feltöltés alatt(60. ábra). Mentse újra a fájlt, és győződjön meg arról, hogy az objektumok most vannak Szöveg4És Path2 csak akkor látható, ha az egeret az objektum fölé viszi Szöveg1.

GIF animáció

Bármely weboldal elképzelhetetlen webanimáció nélkül, beleértve az animált gifeket is. Létrehozásukra az egyik lehetőség az Adobe ImageReady alkalmazás, amely lehetővé teszi többek között animáció létrehozását rétegekből. Ebben az esetben maga a többrétegű kép elkészíthető különböző alkalmazásokban, beleértve az Adobe Illustratort is.

Nagyon egyszerű animációt készíteni a paletta elemei alapján Szimbólumok(Szimbólumok) megnyitja a parancsot Ablak=>Szimbólumok(Window=>Symbols) vagy a paranccsal megnyitható szimbólumkönyvtárak valamelyikéből Window=>Szimbólumkönyvtárak(Window=>Szimbólumkönyvtárak).

Például megpróbáljuk megnövelni bármely szimbólum objektum méretét, az objektum növelésének folyamatának kulcsfontosságú szakaszait külön rétegeken kell beállítani. Először egyszerűen helyezze a szimbólum objektumokat egymás fölé, majd növelje meg az egyes következő objektumok méretét, például a 2. ábrán látható módon. 61. Végül a palettán Rétegek egy réteg sok objektummal jön létre (62. ábra). Ha ezt a képet közvetlenül PSD formátumba exportálja, az nem ad semmit, mivel csak egy réteg van, és természetesen, amikor megnyitja a PSD fájlt az ImageReady programban, akkor is csak egy réteg lesz. Ezért először el kell helyeznie az objektumokat különböző rétegekre. Ezt meg lehet tenni különböző utak a legegyszerűbb módja az, ha először kiválasztja a réteget 1. réteg a Rétegek palettán, és használja a parancsot Engedje el rétegre(Rétegekre eresztve). Az eredmény az lesz, hogy minden objektum átkerül a saját fóliájába, de mindegyik beágyazódik a rétegbe. 1. réteg. Ezért ezután manuálisan kell húznia az összes beágyazott réteget a Rétegek paletta tetejére, hogy azok a réteg felett legyenek. 1. réteg, majd az üressé vált réteg 1. réteg egyszerűen távolítsa el (63. ábra). Exportálja a képet PSD formátumba a paranccsal Fájl=>Exportálás(File=>Export) az ábrán látható beállításokkal. 64.

Töltse be a létrehozott PSD fájlt az ImageReady programba (65. és 66. ábra). Nyissa meg a paletta menüt ÉlénkségKészítsen kereteket rétegekből(Keretek létrehozása rétegekből). Ennek eredményeként öt keret jön létre, amelyek mindegyike a saját rétegének és a palettaablaknak felel meg Élénkségábrán látható módon fog kinézni. 67.

Ezután állítsa be az egyes létrehozott képkockák időtartamát ebben az esetben, az összes képkocka időtartama 0,2 s. Ezután mentse el az animációt optimalizálással a paranccsal Fájl=>Optimalizált mentés(Fájl=>Mentés optimalizálással). A kapott eredmény hasonlíthat az ábrához. 68.

A funkciók használatához még kényelmesebb nyersdarabokat beszerezni, amelyeket aztán könnyen animációvá alakíthatunk az ImageReadyben. Élő keverékek Illustrator programok. Az Illustrator és az ImageReady együttes használata jelentősen felgyorsítja a GIF-animációk létrehozásának folyamatát.

Például rajzoljon két tetszőleges többszínű objektumot, majd kösse össze őket egy keverési hivatkozással a megfelelő paraméterekkel (69. ábra). Ezt a fájlt nem lehet közvetlenül animáció készítésére használni, mivel a kép egyetlen rétegen van (70. ábra). Ezért először a keverési objektum minden elemét külön rétegre kell helyeznie. Ehhez az ablakban Rétegek jelölje ki a vonalat , aktiválja a paletta menüt a jobb felső sarokban lévő fekete nyílra kattintva, és válassza ki a parancsot Release to Layers Sequence(Alakítsa át rétegekké egymás után) (71. ábra). Miközben lenyomva tartja a gombot Váltás, válassza ki a létrehozott rétegeket, és helyezze a réteg fölé 1. réteg majd törölje magát a réteget 1. réteg, ha áthelyezi a kukába, a rétegek paletta ugyanolyan formát ölt, mint az ábrán. 72.

Rizs. 70. A Rétegek ablak kezdeti állapota

Exportálja a létrehozott fájlt PSD formátumba a paranccsal Fájl=>Exportálás(Fájl=>Exportálás). Nyissa meg a létrehozott PSD fájlt az ImageReady programban (73. ábra). Kérjük, vegye figyelembe, hogy az Illustratorban létrehozott összes fólia megjelenik a rétegablakban (74. ábra) és az ablakban. Élénkség Egyelőre csak egy keret lesz.

Aktiválja a paletta menüt Élénkség a paletta jobb felső sarkában lévő fekete nyílra kattintva és kiválasztva Készítsen kereteket rétegekből(Keretek létrehozása rétegekből) Ennek eredményeként ebben a példában öt keret jön létre, és a paletta ablak Élénkségábra szerinti formát vesz fel. 75. Válassza ki az összes keretet, miközben lenyomva tartja a gombot Váltás, és állítsa be a megfelelő képkocka-időtartamot ebben a példában, minden egyes képkocka esetében ugyanannyi, 0,2 s-os időt vesz igénybe. Ezután mentse el az optimalizáló fájlt a paranccsal Fájl=>Optimalizált mentés(Fájl=>Mentés optimalizálással), beállítás a listában Fájltípus választási lehetőség Csak képek (*.gif). Az animáció a 2. ábrához fog hasonlítani. 76.

Ami sokkal érdekesebbnek tűnik, az nem a mozgás, hanem a kevert objektumok egyenletes átméretezése. Használhatja például a már létrehozott keverési átmenetet. Ebben az esetben, miután minden egyes keverési átmeneti elemhez külön réteget készített, helyezze az összes objektumot egymásra a gombok segítségével Vízszintes igazítási központ(Igazítás a vízszintes középponthoz) és Függőleges igazítás középre(Igazítás a függőleges középhez képest) paletták Igazítsa(77. ábra).

Exportálja a létrehozott fájlt PSD formátumba ( Fájl=>Exportálás File => Export) és nyissa meg a létrehozott PSD fájlt az ImageReady programban (78. ábra). Animációs keretek létrehozása rétegek alapján ( Készítsen kereteket rétegekből Fóliákból hozzon létre kereteket), és válassza ki a megfelelő időtartamot (79. ábra). Aztán, hogy az animáció hatásosabb legyen, másold át a meglévő képkockákat, de be fordított sorrendbenúgy, hogy a kép először növekszik, majd csökken, és így tovább egy körben (80. ábra). Ezután mentse el az optimalizáló fájlt ( Fájl=>Optimalizált mentés Fájl=>Mentés optimalizálással). Az eredményül kapott animáció a ábrán látható. 81.

Rizs. 80. Az Animáció ablak állapota a képkockák sokszorosítása után

Rizs. 81. Kész animáció

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 vele Adobe segítségével Az Illustrator rajzfilmeket is tud rajzolni :)

És ehhez semmi szükségünk. A rétegek és az export megfelelő szervezése végső munka swf formátumba, ahol minden réteg animációs keretté alakul. A mai oktatóanyagban egy retrofilm stílusú visszaszámláló animációt rajzolunk. A kimenetnek egy flash videónak kell lennie, ugyanazzal a visszaszámlálással.

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

Amikor a rajzfilmünk minden része elkészült, elkezdhetjük magának az animációnak a készítését. A kényelem kedvéért jobb ezt egy új dokumentumban megtenni. Ebben az esetben a rétegeink az animációs képkockák szerepét töltik be. És a legelső rétegben csak egy filmkockát kell másolnia. Helyezze a munkaterület közepére.

Most hozzon létre egy második réteget, és másoljon bele egy filmkockát, amelyben a szélek mentén eltolt lyukak vannak kialakítva. Azt is középre kell helyezni.

Ebből a két rétegből már mozgófilm animációja is elérhető. De később még sok 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éteg filmkockát kell felhalmoznunk, 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 teljesen 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ű 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ó jövőbeli animációnk adott képkockájában. És most, hogy enyhe remegést adjunk a film mozgásához, a kapott képkockákat kissé el kell mozgatnunk 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 bármilyen irányba.

Miután végigment az összes rétegen, é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észekkel ellátott dokumentumból, és helyezze a filmkocka tetejére az első rétegre.

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 egyedi szektorokból áll, nagyon gyorsan és egyszerűen hozhat létre 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, ezért egyáltalán nem szükséges pontosan a képkocka közepére helyezni a kört. Helyezze el szemmel.

Hasonló módon be kell másolni a kört minden következő rétegbe, miközben egy szektorral többet kell festeni világosabb színnel, mint az előző alkalommal. Ez a 12 réteg együtt egy betöltőkörrel mozgó film animációját alkotja.

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

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

Ha már nagyon 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. Már csak függőleges karcolások maradnak hátra, és majdnem kész. Ehhez ismét lemásoljuk az eredeti karcolást, és több rétegben tetszőleges helyre helyezzük. Az én esetemben a karcolások csak két rétegben jelennek meg.

Most, hogy elkészült a filmanimáció fő ciklusa, már csak a számokat kell összeadni. Mivel a visszaszámlálásunk 3-tól 1-ig tart, plusz a Go!!! szó, 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 eléri a rétegek következő példányát, ahol a kör ismét teljesen ki lesz töltve, be kell írnia 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 átmásolja a feliratot a kívánt rétegre.

Az animációhoz ennyi. A lényeg itt az, hogy ne keveredj össze. Adhatsz néhány kényelmes elnevezést a rétegeknek, de lusta voltam :) És ha befejezted a munkát, 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 a ciklikus animációért. Ennek köszönhetően a videót körben játsszák le. A Rétegsorrend: Alulról felfelé opció pedig alulról felfelé reprodukálja az illusztrátor rétegeket a panelen. Pontosan így építettük fel az animációnkat.

A kimenet egy flash videó az animációnkkal.

Most már látja, hogy az Adobe Illustratorban egyszerű animáció készítése 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, amit a munkahelyemen á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. Ezt a kódot a modern böngészők támogatjá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:

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

Helló. Ma az After Effects egyszerű animációit nézzük.

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

Kezdjük a tanulást rajzolással az Illustratorban.

Rajzoljunk
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öröljük 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 háromszöget egy csillagból úgy, hogy a sugarak számát 3-ra állítja

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 FŐ pillanat
Osszuk el a képeket rétegekre (ami animált lesz, az egy külön rétegen van), így:

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

Ennyi, most spóroljunk.
Nézzük a mentési beállításokat

6. ábra - Mentés

És most jön a következő szakasz. ZáróAdobe 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 be, akkor összevont rétegekkel kapunk képet, de erre nincs szükségünk.

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

Ennyi, importált.
Most pedig lássuk, mi van. Kattintson duplán egy kompozícióra , hogy megnyíljon és lássuk a rétegeket (ha minden jól van, akkor több réteg lesz). Ezt é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 nyíl tetején a Pan Behind eszközzel ( gyorsbillentyű- Y). Csak veszünk egy pontot, és áthelyezzük a kívánt helyre. 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 lesz egy Arrow és Head_cat rétegre.
Kezdjük a nyíllal.
Bővítsük a listát, keressük meg és kattintsunk az órára. Tehát az első pontot nulla másodpercre állítottuk. Az animáció összesen 2 másodpercig fog tartani.
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.
Bővítsük ki a head_cat elemet, és keressük meg Pozíció.
Itt 4 pont lesz.
Csak az utolsó koordináta módosul a többi koordináta befolyásolása 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ílvessző egyik oldalról a másikra lendül, amint a cicához közeledik, behúzza a fejét, egy ideig 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 (csak ne felejtse el megadni az elérési utat).
Ez minden.