Kuinka luoda gif-animaatiota kuvittajassa. Kuinka tehdä animaatioita Adobe Illustratorissa. Vie SWF-tiedostoja Illustratorista
Tänään meillä on jotain epätavallista Adobe oppitunti Kuvittaja. Koska tällä kertaa emme tee staattista kuvaa, vaan todellista animaatiota. Kuvittele, se käy ilmi Adoben avulla Illustrator osaa myös piirtää sarjakuvia :)
Ja tähän emme tarvitse juuri mitään. Tasojen oikea organisointi ja lopullisen työn vienti swf-muotoon, jossa jokainen kerros muunnetaan animaatiokehykseksi. Tämän päivän opetusohjelmassa piirretään retro-elokuvan tyylinen lähtölaskenta-animaatio. Tulosteen tulee olla flash-video, jossa on sama lähtölaskenta.
Ensimmäinen asia, joka sinun on tehtävä, on piirtää kaikki tarvittavat elementit tulevaa animaatiota varten. Tätä varten tein erillisessä asiakirjassa elokuvakehyksen kaksi asentoa, ympyrän viitteeksi, joka on leikattu erillisiin sektoreihin, tekstuurin ja pystynaarmun antiikin vaikutuksen lisäämiseksi sekä kaikki numerot ja kirjoituksia.
Kun sarjakuvamme kaikki osat ovat valmiita, voimme aloittaa itse animaation luomisen. Mukavuuden vuoksi on parempi tehdä tämä uudessa asiakirjassa. Tässä tapauksessa kerroksemme toimivat animaatiokehyksinä. Ja aivan ensimmäisessä kerroksessa sinun tarvitsee vain kopioida filmikehys. Aseta se keskelle työaluettasi.
Luo nyt toinen kerros ja kopioi siihen filmikehys, johon reunoille on tehty offsetilla reiät. Se on myös asetettava keskelle.
Näistä kahdesta kerroksesta saat jo animaatiota liikkuvasta elokuvasta. Mutta myöhemmin tarvitsemme paljon lisää kerroksia. Valitse siis kaksi ensimmäistä kerrosta, siirry paneelivaihtoehtoihin ja tee kopio tasoista.
Samalla tavalla meidän on kerättävä 12 kerrosta filmikehyksiä, jotka määrittelevät sen liikkeen.
Nyt meillä on koko joukko kerroksia ja ne ovat kaikki näkyvissä. Siinä mielessä, että ylemmät kerrokset estävät alemmat, mikä ei ole täysin kätevää työhön. Siksi voit kytkeä jotkin tasot pois päältä napsauttamalla tason nimen vasemmalla puolella olevaa kuvaketta. Kytke kaikki tasot pois päältä tai päälle kerralla pitämällä Alt-näppäintä painettuna samalla, kun napsautat silmäkuvaketta. Kytkemällä tasot päälle ja pois, näet tarkalleen, mitä tulevan animaatiomme tietyssä kehyksessä sijaitsee. Ja nyt, jotta voimme lisätä hieman värinää elokuvan liikkeeseen, meidän on siirrettävä saatuja kehyksiä hieman eri suuntiin. Voit tehdä tämän ottamalla käyttöön vain sen kerroksen, jonka kanssa aiot työskennellä. Tämä hetki, ja siirrä sitten kehystä pari pikseliä mihin tahansa suuntaan.
Kun olet käynyt läpi kaikki tasot ja lisännyt hieman siirtymää, voit aloittaa liikkuvan ympyrän animaation luomisen. Kopioi tätä varten sektoreista koostuva ympyrä asiakirjasta sarjakuvaosien kanssa ja aseta se ensimmäiselle kerrokselle filmikehyksen päälle.
Jos poistat ympyrän valinnan, se näyttää yhdeltä kokonaiselta. Tämä on juuri sitä mitä tarvitsemme.
Mutta koska se koostuu yksittäisistä sektoreista, voit luoda animaatioita erittäin nopeasti ja helposti muuttamalla niiden väriä. Kopioi tämä ympyrä toiselle kerrokselle ja tee ensimmäisestä sektorista vaaleampi. Muistathan, että elokuvamme tärisee liikkuessaan, joten ympyrää ei ole ollenkaan tarpeen sijoittaa tarkalleen ruudun keskelle. Aseta se silmällä.
Samalla tavalla sinun on kopioitava ympyrä jokaiseen seuraavaan kerrokseen samalla kun maalataan yksi sektori enemmän vaaleammalla värillä kuin edellisellä kerralla. Yhdessä nämä 12 kerrosta muodostavat animaation elokuvasta, joka liikkuu täyteympyrällä.
Seuraavaksi meidän on lisättävä kerroksiimme tekstuuria. Kytke ensimmäinen kerros päälle ja kopioi tekstuuri alkuperäisestä tiedostosta varaosineen.
Kytke sitten seuraavat kerrokset päälle yksitellen ja kopioi sama tekstuuri sinne. Jotta se näyttää erilaiselta jokaisessa kehyksessä, käännä sitä 90 astetta. Kuten ehkä arvasit, meidän on lisättävä tekstuuria kaikkiin 12 kehykseen.
Jos olet jo melko kyllästynyt kopioimiseen, voin miellyttää sinua - jäljellä on hyvin vähän. Vaikein osa on ohi. Jäljelle jää vain pystysuorien naarmujen lisääminen ja siinä on melkein kaikki. Tätä varten kopioimme jälleen alkuperäisen naarmun ja asetamme sen mielivaltaiseen paikkaan useissa kerroksissa. Minun tapauksessani naarmut näkyvät vain kahdessa kerroksessa.
Nyt kun elokuvaanimaatioiden pääjakso on valmis, ei tarvitse kuin lisätä numerot. Koska lähtölaskentamme menee 3:sta yhteen plus sana Go!!!, tarvitsemme vielä enemmän tasoja. Ei 12, vaan peräti 48. Tätä varten sinun on tehtävä vielä kolme kopiota valmiista kerroksista elokuvaanimaatiolla.
Ja sitten kaikki on yksinkertaista. Kytke ensimmäinen kerros päälle ja laita siihen numero kolme.
Sitten sinun on kopioitava tämä kuva seuraaville tasoille, kunnes ympyräanimaatio päättyy. Kun saavutat kerrosten seuraavan kopion, jossa ympyrä täytetään jälleen kokonaan, sinun on asetettava numero kaksi. Kopioi samalla tavalla numero yksi halutuille tasoille. Ja kun pääset Go!!!-merkinnän viimeisille kerroksille, poista ympyrä ennen kuin kopioit merkinnän halutulle tasolle.
Siinä kaikki animaatiolle. Tärkeintä tässä on, ettei sekaannu. Kerroksille voi antaa käteviä nimiä, mutta olin aika laiska :) Ja myös, kun saat työsi valmiiksi, muista laittaa kaikki kerrokset takaisin päälle klikkaamalla silmäkuvaketta.
Muista asettaa vientiasetusikkunassa Vie nimellä: AI Layers -asetukseksi SWF-kehykset. Tämä vaihtoehto muuttaa Illustrator-tasot animaatiokehyksiksi. Napsauta seuraavaksi Lisäasetukset-painiketta.
Aukeaa Lisäasetukset. Tässä sinun on asetettava kuvataajuus. Minulla on 12 kuvaa sekunnissa. Silmukka-valintaruutu vastaa syklisestä animaatiosta. Sen ansiosta video toistetaan ympyrässä. Ja Layer Order: Bottom Up -vaihtoehto toistaa kuvittajatasot alhaalta ylöspäin paneelissa. Juuri tällä tavalla rakensimme animaatiomme.
Tulos on flash-video animaatiollamme.
Nyt näet, mitä yksinkertainen animaatio voi tehdä Adobe Illustrator ei niin vaikeaa kuin miltä ensi silmäyksellä näyttää.
Mutta pitkien videoiden luomiseen tai interaktiivisia sovelluksia silti parempi käyttää Adobe Flash tai muut flash-editorit. Esimerkiksi tein tämän kissan vanhassa Macromedia Flash, jonka kaivoin työssäni.
Lisäksi viime aikoina HTML5:tä ja CSS3:a käytetään yhä enemmän animaatioiden luomiseen. Nykyaikaiset selaimet tukevat tätä koodia, eikä se vaadi flash-soittimen käyttöä.
Roman aka dacascas erityisesti blogia varten
Tilaa uutiskirjeemme, jotta et menetä mitään uutta:
Viime aikoina erilaiset SVG-grafiikan (Scalable Vector Graphics) animaatiot verkkosivustoilla ja sovelluksissa ovat tulleet erittäin suosituiksi. Tämä johtuu siitä, että kaikki uusimmat selaimet tukee jo tätä muotoa. Tässä on tietoa SVG-selaimen tuesta.
Tässä artikkelissa käsitellään yksinkertaisinta esimerkkiä SVG-vektorianimaatiosta, jossa käytetään kevyttä Jquery-laajennusta Lazy Line Painter.
LähdeTämän tehtävän suorittamiseksi ja täydelliseksi ymmärtämiseksi HTML:n, CSS:n ja Jqueryn perustiedot ovat toivottavia, mutta niitä ei vaadita, jos haluat vain animoida SVG:tä.) Aloitetaan!
Ja nämä ovat vaiheet, jotka meidän on noudatettava:
1. Luo oikea tiedostorakenne
Tässä auttaa meitä Initializr-palvelu, jossa meidän on valittava parametrit alla olevan kuvan mukaisesti.
- Classic H5BP (HTML5 Boiler Plate)
- Ei mallia
- Vain HTML5 Shiv
- Pienennetty
- IE luokat
- Chrome-kehys
- Napsauta sitten Lataa se!
2. Lataa ja liitä laajennus
Koska initializr sisältää uusimman Jquery-kirjaston, joka on ladattava arkistosta Lazy Line Painter -projektin arkistosta, meidän tarvitsee siirtää vain 2 tiedostoa projektiimme. Ensimmäinen on "jquery.lazylinepainter-1.1.min.js" (laajennuksen versio voi vaihdella), ja se sijaitsee tuloksena olevan kansion juuressa. Toinen on esimerkki/js/vendor/raphael-min.js.
Sijoitamme nämä 2 tiedostoa js-kansioon. Ja yhdistämme ne index.html-tiedostoomme ennen main.js:ää seuraavasti:
3. Piirrä viileä ääriviivakuva Adobe Illustratorissa
Voit esimerkiksi käyttää liitteen kuvakkeita.
4. Muunna kuvamme Lazy Line Converteriksi
Vedä kuvakkeesi alla olevan kuvan ikkunaan.
Paksuutta, ääriviivan väriä ja animaation nopeutta voidaan muuttaa itse koodissa, joka tulee näkyviin muuntamisen jälkeen!
5. Liitä tuloksena oleva koodi main.js-tiedostoon
Nyt yksinkertaisesti liitämme tuloksena olevan koodin tyhjään main.js-tiedostoon
Vaihtoehdot:
strokeWidth — ääriviivan paksuus
strokeColor — ääriviivan väri
Voit myös muuttaa kunkin vektorin piirtonopeutta muuttamalla kestoparametrin arvoja (oletus 600)
6. Lisää CSS:ää maun mukaan
Kappaleen poistaminen index.html-tiedostosta
Hei maailma! Tämä on HTML5 Boilerplate.
Ja sen sijaan lisäämme lohkon, jossa animaatiomme tapahtuu
sitten lisäämme main.css-tiedostoon CSS:ää, jotta se näyttää kauniimmalta:
Runko ( tausta: #F3B71C; ) #kuvakkeet ( sijainti: kiinteä; ylhäällä: 50 %; vasen: 50 %; marginaali: -300px 0 0 -400px; )
tallenna kaikki tiedostot.
Avaa nyt vain index.html nykyaikaisella selaimella ja nauti tehosteesta.
P.S. käynnistyessään paikallinen kone Animaation alkamisessa voi olla useita sekunteja viive.
Verkkografiikan optimointi
Graafiset tiedot lähetetään paljon hitaammin kuin teksti, ja kuvien latausaika on verrannollinen niiden kokoon graafiset tiedostot. Siksi Web-sivujen nopea lataaminen vaatii pienen upotetun koon graafisia kuvia, joka saavutetaan niiden optimoinnilla. Kuvan optimointi tarkoittaa sen muuntamista, vähimmäistiedoston koon varmistamista säilyttäen tässä tapauksessa vaaditun kuvanlaadun, mikä saavutetaan ensisijaisesti vähentämällä graafisten kuvien värien määrää, käyttämällä pakattuja ja erityisiä tiedostomuotoja sekä optimoimalla pakkausparametrit yksittäisille kuville. fragmentteja.
Illustratorissa on sisäänrakennetut kuvanoptimointityökalut, jotka tekevät optimointiprosessista nopeaa ja tehokasta useilla esikatselumenetelmillä. Esikatselu antaa melko tarkan kuvan siitä, miltä optimoitu kuva tulee näyttämään reaaliajassa, mikä auttaa sinua arvioimaan optimoinnin tuloksen ja valitsemaan oikeat asetukset. Ja voit optimoida sekä suoraan Illustratorissa luodut kuvat että muut, esimerkiksi valokuvat, jotka on tarkoitus sijoittaa Web-sivustoon.
Optimointiparametrit asetetaan Tallenna verkkoon -ikkunassa, jota kutsutaan samannimisellä komennolla Tiedosto-valikosta. Ohjelma tarjoaa sinulle mahdollisuuden käyttää yhtä neljästä esikatselutilasta, mutta kaksi soveltuu parhaiten optimoinnin laadun arvioimiseen:
- 2-Up (kaksi vaihtoehtoa) alkuperäisen ja optimoidun kuvan samanaikainen katselu määritettyjen asetusten mukaisesti (kuva 1);
- 4-Up (neljä vaihtoehtoa) Tässä tilassa näkymä on jaettu neljään ikkunaan (kuva 2) näyttämään alkuperäinen kuva ja kolme versiota optimoidusta: ensimmäinen versio luodaan asetettujen optimointiarvojen perusteella, ja kaksi muuta ovat muunnelmia nykyisistä optimointiasetuksista.
Molempien tilojen avulla voit säästää huomattavasti aikaa parhaan optimointivaihtoehdon löytämisessä, koska ne poistavat tarpeen tallentaa kuvia erilaisilla optimointiasetuksilla ja niiden myöhempää visuaalista vertailua. Lisäksi on mahdollista arvioida optimoidun kuvan laadun lisäksi sen kokoa ja latausaikaa eri liitäntävaihtoehdoilla. Vertailun vuoksi kätevin tila on 4-Up (neljä vaihtoehtoa), jonka avulla voit visuaalisesti arvioida pakkaamisen tai paletin pienentämisen vaikutusta kuvan laatuun ja sen kokoon ja lopulta määrittää parhaat optimointiparametrit.
Illustratorin avulla voit optimoida verkkografiikkaa GIF-, JPG-, PNG-8- ja PNG-24-muotojen lisäksi myös SWF- ja SVG-muodoissa. Indeksoidut kuvat, joissa on pieni määrä värejä, tallennetaan GIF-muodossa. JPG-muotoa käytetään täysväristen ja harmaasävyisten kuvien, valokuvien ja värikkäiden grafiikoiden, kuten liukuvärityytteiden, tallentamiseen. Täysvärikuvissa, joissa on läpinäkyviä alueita, käytetään PNG-muotoa, jonka avulla voit tallentaa sekä indeksoituja että täysvärikuvia, kun taas PNG-8-muodossa optimoidun kuvan värien enimmäismäärä on 256, ja PNG-24-muodossa kuvassa voi olla miljoonia värejä, ja siksi se näyttää JPEG-muodossa. Ero PNG-24:n ja JPEG:n välillä on se, että PNG-24-muotoisten kuvien optimointiin käytetty pakkausmenetelmä ei johda laadun heikkenemiseen, vaan sen seurauksena tiedostokoko kasvaa. SVG- ja SWF-muodot yhdistävät grafiikan, tekstin ja interaktiiviset komponentit, ja ne voidaan myös optimoida.
Harkitsemme konkreettinen esimerkki kuvan optimointi. Oletetaan, että verkkosivuston logo kehitettiin Illustratorissa (kuva 3), joka on alun perin tallennettu AI-muodossa. Yritys optimoida se välittömästi verkkoa varten ei johda mihinkään hyvään, koska tässä tapauksessa kuva rajataan automaattisesti, mikä ei ota huomioon tuloksena olevan kirjoituksen todellista sijaintia muodonmuutoksen seurauksena (kuva 4 ja 5).
Yritetään siis viedä logo PSD-muotoon komennolla File=>Export (File=>Export) luodun kuvan koko on 143 KB. Avaa tuloksena oleva PSD-tiedosto ja käytä File=>Save for Web -komentoa. Kun otetaan huomioon kuvan rajoitettu määrä värejä, GIF-muoto on tässä tapauksessa optimaalinen, jonka erityiset asetukset on päätettävä. Kokeilemalla asetuksia voit varmistaa sen paras laatu antaa ohjelman oletuspakkausalgoritmin, Selective. Mitä tulee tasoitukseen, gradienttitäytön läsnäolon vuoksi on parempi valita algoritmi, jossa on kohinan synnyttämiskohina (kuva 6). Tuloksena olevan optimointitiedoston koko on 6,729 KB (kuva 7), mutta taustan läpinäkyvyys säilyy, mikä on helppo varmistaa tallentamalla kuva GIF-muotoon HTML-tiedoston mukana (kuva 8). Tämän seurauksena tässä esimerkissä tiedostot emblem.html ja emblem.gif hankittiin Primer1-kansioon.
Välttämätön erityinen elementti minkä tahansa Web-sivun suunnittelussa ovat graafiset ohjauspainikkeet. On yksinkertaisesti mahdotonta kuvitella sivua ilman niitä. Painikkeiden piirtämisestä on tullut nykyään erityinen genre, ja Illustratorin avulla voit luoda monimutkaisimpia vaihtoehtoja. Esimerkiksi painikkeet, jotka on suunniteltu verkkoobjekteiksi ja/tai peittomaskeilla, näyttävät paljon vaikuttavammilta kuin tavalliset.
Harkitse vaihtoehtoa luoda pyöreä, kupera painike Illustratorissa. Piirrä vektoriobjekti mielivaltaisella värillä täytettynä ympyrän muotoon (kuva 9) ja muunna se verkkoon komennolla Object => Create Gradient Mesh (Object => Create a gradient mesh) määrittämällä neljä riviä ja neljä sarakkeita ja valitsemalla Ulkoasu-luettelosta vaihtoehdon To Center Highlight, joka vastaa 60 (kuva 10). Valitse Direct Selection -työkalu ja napsauta objektin vasenta yläkulmaa valitsemalla siellä sijaitsevat ankkuripisteet (kuva 11). Muuta vastaavan solun väri valkoiseksi valitsemalla se Swatches-paletista (kuva 12).
Ota Ellipsi-työkalu, aseta hiirimerkki aiemmin luodun ympyrän keskelle ja pidä Alt- ja Shift-näppäimiä painettuna ja venytä uusi ympyrä vanhan päälle niin, että se on 1-2 pikseliä suurempi kuin vanha. sivut. Anna sille 1-2 pikseliä leveä musta reunus (Stroke) ja täytä se säteittäisellä gradientilla punaisesta valkoiseen suuntaan (kuva 13). Vedä luotua vektoriobjektia 1-2 pikseliä oikealle ja alas, sitten poistamatta valintaa, napsauta sitä hiiren kakkospainikkeella ja ulos kontekstivalikko valitse Järjestä=>Lähetä takaisin. Tuloksena on tyhjä painike, joka näkyy kuvassa. 14.
Pääsääntöisesti millä tahansa Web-sivulla on useita samantyyppisiä painikkeita, jotka eroavat esimerkiksi vain niihin piirrettyjen nuolien suunnasta, jotka osoittavat liikkeen suunnan sivustolla. Tarkastellaan yksinkertaisinta tapausta, jossa on kaksi painiketta, joista toinen alanuoli tarkoittaa siirtymistä seuraavalle sivulle ja painike, jossa on nuoli ylös, tarkoittaa siirtymistä edelliselle. Otetaan nuolimalliksi säännöllinen kolmio, joka on piirretty Polygon-työkalulla, maalattu mustaksi ja tehokkaamman vaikutuksen vuoksi suunniteltu myös verkkoobjektiksi. Siirrä nuoli painikkeen kohdalle ja säädä kaikkien objektien sijainti suhteessa toisiinsa käyttämällä vastaavia painikkeita Tasaa-paletissa. Ensimmäinen tuloksena olevista painikkeista on esitetty kuvassa. 15. Tehdään tasosta kopio painikkeella valitsemalla komento Duplicate Layer Layers, tuloksena saadaan kaksi identtistä kerrosta. Valitse sitten tason kopiossa oleva nuoli ja käännä sitä 180° valitsemalla pikavalikosta komennon Transform=>Rotate Transformation=>Rotate. Saamme saman painikkeen kuin kuvassa. 16. Huomaa, että on paljon kätevämpää tallentaa kaikki samantyyppiset painikkeet yhdelle projektille samaan tiedostoon eri tasoille, mikä näkyy tässä tapauksessa.
Nyt sinun on tallennettava kunkin painikkeen optimoidut versiot. Tee ensin alimmasta kerroksesta näkymätön, tässä tapauksessa yläkerroksen painike säilyy. Valitse File=>Save for Web -komento, määritä painikkeen optimointiparametrit esimerkiksi kuvan 1 mukaisesti. 17, napsauta Tallenna-painiketta ja anna tiedostonimi. Lopulta tallennettu painike näkyy kuvassa. 18. Palauta nyt näkyvyys alimmalle tasolle, tee ylätasosta näkymätön ja tallenna toinen painike samalla tavalla antamalla sille eri nimi. Tulos näkyy kuvassa. 19.
Nyt ei jää muuta kuin varmistaa, että painikkeet näyttävät melko hyväksyttäviltä verkkosivulla ja sijoittaa ne mukautetulle sivulle (kuva 20). Tämän seurauksena tässä esimerkissä tiedosto Primer2.html ja kaksi graafista kuvaa saatiin kuvakansioon (Primer2-kansio).
Haluttaessa painike on helppo muuttaa siivuksi optimointiprosessin aikana. Tässä tapauksessa, kun olet valinnut komennon File=>Save for Web (File=>Save for Web) ja asettanut optimointiparametrit, sinun tulee valita työkalupaletista Slice Select -työkalu ja kaksoisnapsauttaa kuvaa, joka lopulta muuttuvat automaattisesti viipaleeksi, jonka sarjanumero on 1 (kuva 21). Kaksoisnapsauttaminen uudelleen avaa Slice Options -ikkunan, jossa sinun on määritettävä linkki ja valinnaisesti muutettava osion nimi (Kuva 22) ja sitten tallennettava optimoitu kuva. Tuloksena on tässä tapauksessa tiedostot Primer3.html (kuva 23) ja Primer3.gif (Primer3-kansio).
Yksi tapa herättää sivu eloon on esitellä suunnitteluelementtejä, jotka muuttavat sivua ulkomuoto(tai tila) riippuen hiiren käyttäytymisestä tai harvemmin muissa tilanteissa: skaalaus, vieritys, lataus, virheet jne.
Tällaisista elementeistä tunnetuimpia ovat rollover-elementit (englannin kielestä roll over roll over, turn over) elementit, jotka muuttavat ulkonäköä hiiren vaikutuksesta. Esimerkkejä tyypillisistä rollovereista ovat animoidut painikkeet. Rolloveria käytetään usein luotaessa muita verkkosivuston navigointielementtejä. Todellisuudessa mikä tahansa rollover ei ole yksi, vaan useita (enintään neljä) kuvaa, joista jokainen vastaa tiettyä tapahtumaa. Tärkeimmät tapahtumat katsotaan seuraaviksi: Normaalit normaali tila, Hiiren osoittimen siirtäminen elementin päälle ja hiiren vasemman painikkeen painaminen alas, kun osoitin viedään sen päälle. Teoriassa mukana voivat olla tapahtumat, kuten hiiren vasemman painikkeen vapauttaminen napsautuksen jälkeen, ylös painikkeen vapauttamisen jälkeen, ulos poistuttaessa aktiiviselta alueelta. Käytännössä ne kuitenkin usein rajoittuvat elementin vaihtamiseen vain kolmen tai jopa kahden ensimmäisen tapahtuman osalta.
Klassiset rolloveritKlassisessa mielessä rollover on sarja graafisia kuvia GIF-muodossa ja vastaava HTML-koodi, jonka ansiosta selainikkunassa hiiren käyttäytymisestä riippuen yksi kuva korvaa toisen.
Illustratoria ei ole tarkoitettu suoraan luomaan rollovereita perinteisessä mielessä, mutta se voi auttaa niiden alkuelementtien kehittämisessä. Ajatuksena tässä tapauksessa on luoda kerros, jossa on ensimmäistä tapahtumaa vastaava kuva. Tee sitten kopio tasosta ja muunna kuva vastaamaan toista tapahtumaa ja niin edelleen. Tuloksena oleva monikerroksinen kuva viedään PSD-tiedostoon kerrokset säilyneinä, joiden perusteella Image Ready -ohjelmassa luodaan rollover. Illustrator-ohjelman käytön etuna, kuten monissa muissa tapauksissa, on useita sen mielenkiintoisia ominaisuuksia, joita ei ole saatavilla muissa ohjelmisto yhdistettynä vektorigrafiikan muuntamisen mukavuuteen.
Yritetään luoda rollover merkinnän muodossa, joka muuttaa väriä hiiren käyttäytymisen mukaan. Avaa Illustrator ja luo kuvio pyöreän suorakulmion muodossa, joka on täytetty mustalla (kuva 24), tee siitä kopio ja aseta se näytön vapaaseen osaan. Muunna suorakulmion ensimmäinen kopio mesh-objektiksi, jonka keskellä on korostus (komento Object=>Create Gradient Mesh Object=>Create Gradient Mesh), määrittämällä neljä riviä ja kymmenen saraketta (kuva 25). Aktivoi suorakulmion toinen kopio ja aseta se gradienttitäyttöön suunnilleen kuvan 1 mukaisesti. 26. Aseta gradienttiobjekti mesh-objektin päälle, pienennä gradienttiobjektin peittävyyttä noin 80 %:iin ja kokoa noin 1 pikselillä simuloidaksesi lopulta kolauksen vaikutusta. Ja tulosta sitten kirjoitus esineiden päälle. Olkoon sen alkuperäisessä muodossaan valkoinen väri, joka vastaa normaalitilaa (kuva 27), ja sitten kun rollover-tila muuttuu, merkinnän väri muuttuu esimerkiksi vihreäksi, kun hiiren merkki on sen päällä (Over state) ja muuttuu siniseksi, kun hiiren painiketta painetaan (alastila).
Kiinnitä huomiota Layers-palettiin, tässä vaiheessa siinä on vain yksi kerros. Tee tästä tasosta kaksi kopiota Tasot-palettivalikon Kopioi taso -komennolla; paletissa on kolme tasoa (kuva 28). Muuta sitten kerroksen ensimmäisessä kopiossa tekstin väri vihreäksi ja toisessa kopiossa siniseksi (kuva 29). Tämän seurauksena saadaan kaatumiseen tarvittava aihio.
Vie luotu kuva PSD-muotoon säilyttäen tasot käyttämällä File=>Export-komentoa ja valitsemalla RGB-värimallin (kuva 30). Avaa luotu PSD-tiedosto ImageReady-ohjelmassa (kuvat 31 ja 32). Luo tasoihin perustuvia kehyksiä valitsemalla Animaatiopaletin valikosta Tee kehyksiä tasoista -komennon. Animaatio-ikkuna näyttää samalta kuin kuvassa. 33. Tässä tapauksessa Rollovers-palettiin luodaan aluksi yksi normaalitila.
Valitse sitten Animaatio-ikkunassa indusoitua tilaa vastaava kehys, jolloin Layer 1 Copy -taso valitaan automaattisesti Tasot-paletissa (kuva 34). Siirry Rollovers-palettiin ja napsauta Create Rollover State -painiketta (Create a rollover state) kuva. 35, mikä aiheuttaa Over State -tilan ilmestymisen Rollovers-palettiin (kuva 36). Luo Down State samalla tavalla. Aktivoi Normaali-tila Rollovers-paletissa ja poista kaikki kehykset Animaatio-paletista paitsi se, jonka pitäisi vastata normaalitilaa. Tämän seurauksena animaatiopaletissa on vain yksi kehys jokaista kierrätystilaa kohden (kuvat 37, 38 ja 39).
Riisi. 38. Näkymä kuvasta, Animaatio-ikkunasta ja Tasot- ja Rollovers-paleteista Over State -tilassa
Tarkista tulos napsauttamalla työkalupalkin Esikatselu oletusselaimessa -painiketta ja siirtymällä selainikkunaan (Kuva 40). Tallenna sen jälkeen tiedosto komennolla File=>Save Optimized ja määritä HTML ja kuvat (*.html) -vaihtoehto. Tuloksena tässä esimerkissä tiedosto Primer4.html ja sarja graafisia kuvia saatiin kuvakansioon.
Riisi. 40. Selainikkuna Rollover-elementillä
SVG-kierrätyksetYhä suositumpi SVG (Scalable Vector Graphics) -muoto Vektorigrafiikka), joka on luotu XML-standardin perusteella, mahdollistaa myös monenlaisten interaktiivisten elementtien vastaanottamisen, erityisesti rolloverin, mutta käytännössä tämä toteutetaan täysin eri tavalla. On syytä huomata, että vuorovaikutteisten SVG-rullausten luominen, toisin kuin perinteiset, kun vastaava HTML-koodi generoidaan täysin automaattisesti, vaatii JavaScript-kielen tuntemusta ja olioohjelmoinnin perusperiaatteiden ymmärtämistä.
SVG-objektien kanssa työskentelyä varten on olemassa erityinen paletti SVG Interactivity, joka voidaan avata helposti komennolla Window => SVG Interactivity (Ikkuna => SVG-vuorovaikutus) kuva. 41.
Harkitse tätä vaihtoehtoa käännöksen luomiseksi käyttämällä esimerkkiä interaktiivisesta painikkeesta, jonka merkinnän väri muuttuu mustasta siniseksi, kun viet hiiren osoitinta, ja muuttuu jälleen mustaksi, kun hiiri poistuu aktiiviselta alueelta.
Luo suorakaiteen muotoinen painike pyöristetyillä reunoilla ja valitse sille sopiva gradienttitäyttö, esimerkiksi kuvan 1 mukaisesti. 42. Säädä painikkeen läpinäkyvyyttä Transparence-paletissa. Tässä esimerkissä Opacity-arvoksi on asetettu 50 %. Tee painikkeesta kopio, täytä se tummanvihreällä (Kuva 43) ja muunna se mesh-objektiksi komennolla Object => Create Gradient Mesh, määrittämällä neljä riviä ja kymmenen saraketta, ja Ulkoasu-luettelossa (View) valitsemalla To Center -vaihtoehdon ja asettamalla Highlight-arvoksi 100. Vähennä verkkoobjektin sisältävän kerroksen peittävyyttä noin 40 %:iin (kuva 44). Aseta verkkoobjekti gradientin päälle, jolloin painike muistuttaa kuvassa 1 esitettyä. 45.
Riisi. 44. Muuta painikkeen kopio verkkoobjektiksi
Täydennä painike tarkoitetulla tekstillä ja säädä sen asentoa vastaavilla Align-paletin painikkeilla. Tuloksena oleva kuva sisältää yhden kerroksen, jossa on kolme objektia päällekkäin (kuva 46). Ajoitetut tapahtumat ovat suhteessa tekstiobjektiin, joten vaihda sen nimeksi Teksti kaksoisnapsauttamalla objektia ja kirjoittamalla uusi nimi. Samoin muuta tason nimi Tasosta 1 Tasoksi (Kuva 47).
Tapahtumien käsittelyyn kuuluu JavaScript-toimintojen käyttö, joten sinun on liitettävä tiedosto, joka kuvaa näitä toimenpiteitä. Sitä kutsutaan nimellä Events.js ja se tallennetaan levylle Sample Files\Sample Art\SVG\SVG-kansioon asennuksen yhteydessä. Adoben ohjelmat Kuvittaja. Yhdistä Events.js-tiedosto JavaScript Files SVG Interactivity -komennolla (kuva 48). Seuraavaksi sinun on napsautettava Lisää-painiketta ja löydettävä haluamasi tiedosto kiintolevyltäsi. Kun hänen nimensä näkyy URL-kentässä (Kuva 49), napsauta Valmis-painiketta.
Riisi. 48. JavaScript Files -komennon valitseminen
Seuraavaksi sinun on määritettävä teksti-objektille vastaus hiiren tapahtumiin. Valitse Teksti-objekti, SVG-vuorovaikutteisuuspaletin Tapahtuma-kentässä, valitse tapahtuma hiiren päällä elementColor(evt, "Teksti", "#3333FF") tämä tarkoittaa, että kun hiiri on Teksti-objektin päällä, sen väri muuttuu sininen (kuva 50). Jotta tekstin väri muuttuisi mustaksi hiiren poistuttua aktiiviselta alueelta, sinun on luotava toinen onmouseout-tapahtuma ja valittava se SVG-vuorovaikutteisuuspaletin Tapahtuma-kentässä. Kirjoita sitten toimintoriville teksti elemColor(evt, "Teksti", "#000000") tämä palauttaa värin mustaksi (Kuva 51).
Riisi. 51. Teksti-objektin SVG-vuorovaikutteisuuspaletin lopullinen ulkoasu
Tallenna luotu rollover SVG-tiedostona komennolla File=>Save as (Tiedosto=>Tiedostotyyppi SVG-muoto, ja aseta sitten SVG-tiedoston tallennusasetukset kuvan 52 mukaisesti. Tallennuksen jälkeen saat vain yhden yksi tiedosto, jonka tunniste on SVG, eikä kaksi, kuten perinteisen rolloverin tapauksessa, tässä tapauksessa vastaanotettiin tiedosto Primer5.svg (Primer5-kansio), mutta jotta rollover todella toimisi, sinun on lisäksi kopioitava Events.js-tiedosto JavaScript-toimintojen kuvauksesta. Tämän jälkeen voit tarkistaa rullan toimivuuden, jolloin tulos näyttää kuvan 53 mukaiselta.
SVG-muotoa voidaan käyttää myös animaation välittämiseen. Yritetään luoda yksinkertainen animoitu elementti (tässä tapauksessa se on tietoa yrityksestä), joka ilmestyy näytölle kun viet hiiren vastaavan graafisen objektin päälle ja katoaa, kun poistat hiiren interaktiivisesta elementistä.
Luodaan suunnilleen seuraava sarja graafisia ja tekstiobjekteja, kuten kuvassa 10 näkyy. 54. Nimetään kaikki luodut objektit uudelleen kätevällä tavalla napsauttamalla peräkkäin seuraavan objektin nimeä Tasot-paletissa ja kirjoittamalla toivottu nimi(Kuva 55). Huomaa, että ne, jotka on korostettu kuvassa. 56 objektia Teksti1, Teksti2, Teksti3 ja Polku1 ovat aina näkyvissä ja kaikki muut vain, kun viet hiiren osoittimen Teksti1-objektin päälle.
Riisi. 54. Kuvan alkuperäinen näkymä
Sisällytä JavaScript-toimenpiteitä kuvaava Events.js-tiedosto käyttämällä JavaScript-tiedostot-komentoa SVG-vuorovaikutteisuuspaletista, napsauttamalla Lisää-painiketta, osoittamalla haluamaasi tiedostoa kiintolevylläsi ja napsauttamalla Valmis-painiketta.
Määritä teksti1-objektin vastaus hiiren tapahtumiin. Valitse Teksti-objekti, valitse SVG-vuorovaikutteisuuspaletin Tapahtuma-kentässä onmouseover-tapahtuma ja kirjoita alla olevalle riville teksti elemShow(evt, "Teksti4"); elemShow(evt, "Polku2") . Tämän seurauksena, kun hiiri on Text1-objektin päällä, Text4- ja Path2-objektit tulevat näkyviin. Huomaa, että jos tapahtuman sattuessa on suoritettava useita toimintoja, ne on määritettävä ";"-merkillä. Suorita sitten samanlainen toimenpide onmouseout-tapahtumalle syöttämällä sen teksti, mikä tarkoittaa objektien piilottamista (kuva 57).
Tallenna tulos SVG-tiedostona komennolla File=>Save as, määrittämällä tiedoston nimi, valitsemalla Tiedostotyyppi-kentästä SVG-muodon ja määrittämällä sitten SVG-tiedoston tallennusasetukset kuvan 1 mukaisesti. 58. Tallennuksen jälkeen Primer6.svg-tiedosto vastaanotetaan (Primer6-kansio). Muista kopioida Events.js-tiedosto kansioon, jossa tämä tiedosto on. Jos tämän jälkeen juoksee coz Tämä tiedosto, niin näet kuvassa näkyvän tuloksen. 59. Tämä on melkein mitä tarvitset. Ainoa asia, joka ei sisältynyt suunnitelmiimme, oli Teksti 4 ja Polku 2 -objektien ensimmäinen ulkoasu latauksen yhteydessä. Päästäksesi eroon tästä puutteesta, valitse molemmat objektitiedot kerralla ja luo niille toiminto elemHide(evt, "Teksti4"); elemHide(evt, "Path2") lataustapahtumassa (kuva 60). Tallenna tiedosto uudelleen ja varmista, että Text4- ja Path2-objektit ovat nyt näkyvissä vain, kun viet hiiren osoittimen Text1-objektin päälle.
Mitään Web-sivua ei voida ajatella ilman verkkoanimaatiota, mukaan lukien animoidut gifit. Yksi vaihtoehto niiden luomiseen on käyttää Adobe ImageReady -sovellusta, joka mahdollistaa muun muassa animaation luomisen tasoista. Tässä tapauksessa itse monikerroksinen kuva voidaan valmistaa eri sovelluksissa, mukaan lukien Adobe Illustrator.
Animaatio on erittäin helppoa luoda elementtien perusteella Symbolit-paletista, joka avataan Window=>Symbols-komennolla, tai jostakin symbolikirjastosta, joka voidaan avata komennolla Window=>Symbol Libraries. ).
Yritämme esimerkiksi kasvattaa minkä tahansa symboliobjektin kokoa; objektin kasvattamisprosessin avainvaiheet on asetettava erillisille tasoille. Ensin yksinkertaisesti aseta symboliobjektit päällekkäin ja lisää sitten jokaisen seuraavan objektin kokoa, esimerkiksi kuvan 1 mukaisesti. 61. Tämän seurauksena Tasot-palettiin luodaan yksi kerros, jossa on useita objekteja (kuva 62). Jos viet tämän kuvan suoraan PSD-muotoon, se ei anna mitään, koska kerroksia on vain yksi, ja luonnollisesti, kun avaat PSD-tiedoston ImageReady-ohjelmassa, siinä on myös vain yksi kerros. Siksi sinun on ensin asetettava esineitä eri tasoille. Tämä voidaan tehdä eri tavoilla Helpoin tapa on valita ensin Layer 1 Layers-paletista ja käyttää Release to Layer -komentoa. Tuloksena on, että jokainen objekteista siirretään omalle tasolleen, mutta ne kaikki ovat sisäkkäisiä tasossa 1. Siksi sinun on sitten vedettävä manuaalisesti kaikki sisäkkäiset tasot Tasot-paletin yläosaan niin, että ne ovat Layer 1 -tason yläpuolella, ja sitten yksinkertaisesti poistettava nyt tyhjä Taso 1 -taso (kuva 63). Vie kuva PSD-muotoon File=>Export-komennolla kuvan 1 mukaisilla asetuksilla. 64.
Lataa luotu PSD-tiedosto ImageReady-ohjelmaan (kuvat 65 ja 66). Avaa Animaatio Make Frames From Layers -palettivalikko. Tämän seurauksena luodaan viisi kehystä, joista jokainen vastaa omaa kerrostansa, ja Animaatiopaletti-ikkuna näyttää samalta kuin kuvassa 1. 67.
Aseta tämän jälkeen jokaisen luodun kehyksen kesto, tässä tapauksessa kaikkien kehysten kesto on 0,2 s. Ja sitten tallenna animaatio optimoinnin kanssa komennolla File=>Save Optimized (Tiedosto=>Tallenna optimoinnin kanssa). Tuloksena oleva tulos saattaa muistuttaa kuviota. 68.
On vielä kätevämpää hankkia aihioita, jotka voidaan sitten helposti muuntaa animaatioiksi ImageReadyssä käyttääksesi Illustratorin Live Blends -toimintoja. Tämä Illustratorin ja ImageReadyn yhdistetty käyttö nopeuttaa merkittävästi GIF-animaatioiden luomista.
Piirrä esimerkiksi kaksi mielivaltaista moniväristä objektia ja yhdistä ne sitten sekoituslinkillä sopivilla parametreilla (kuva 69). Tätä tiedostoa ei voi käyttää suoraan animaation luomiseen, koska kuva on yhdellä kerroksella (kuva 70). Siksi sinun on ensin asetettava sekoitusobjektin jokainen elementti erilliselle tasolle. Tee tämä valitsemalla Layers-ikkunassa rivi, aktivoimalla palettivalikko napsauttamalla sen oikeassa yläkulmassa olevaa mustaa nuolta ja valitsemalla Release to Layers Sequence -komento (kuva 71). Pidä Shift-näppäintä painettuna, valitse luodut tasot ja aseta ne Layer 1 -kerroksen yläpuolelle ja poista sitten itse Layer 1 -taso siirtämällä se roskakoriin, jolloin tasopaletti saa saman muodon kuin kuvassa 1. 72.
Riisi. 70. Alkutila Tasot ikkunat
Vie luotu tiedosto PSD-muotoon File=>Export-komennolla. Avaa luotu PSD-tiedosto ImageReady-ohjelmassa (kuva 73). Huomaa, että kaikki Illustratorissa luodut tasot näkyvät Tasot-ikkunassa (kuva 74), ja Animaatio-ikkunassa on toistaiseksi vain yksi kehys.
Aktivoi Animaatio-palettivalikko napsauttamalla paletin oikeassa yläkulmassa olevaa mustaa nuolta ja valitsemalla Tee kehyksiä tasoista -komento. Tämän seurauksena tässä esimerkissä luodaan viisi kehystä ja Animaatiopaletti-ikkuna ottaa kuvion mukainen muoto. 75. Valitse kaikki kehykset pitämällä Shift-näppäintä painettuna ja aseta sopiva kehyksen kesto tässä esimerkissä. Sama aika 0,2 s otetaan jokaisesta kehyksestä. Tallenna sitten tiedosto optimoituna komennolla Tiedosto=>Tallenna optimoitu (Tiedosto=>Tallenna optimoinnin kanssa) asettamalla Tiedostotyyppi-luettelosta vaihtoehdoksi Vain kuvat (*.gif). Animaatio muistuttaa kuvaa. 76.
Paljon mielenkiintoisemmalta ei näytä liike, vaan sekoitusobjektien tasainen koon muuttaminen. Voit esimerkiksi käyttää jo luotua sekoitussiirtymää. Tässä tapauksessa, kun olet luonut erilliset tasot kullekin sekoitussiirtymäelementille, aseta kaikki objektit päällekkäin Tasaa-paletin Horisontal Align Center- ja Vertical Align Center -painikkeilla (kuva 77).
Vie luotu tiedosto PSD-muotoon (File=>Export File=>Export) ja avaa luotu PSD-tiedosto ImageReady-ohjelmassa (kuva 78). Luo tasoihin perustuvia animaatiokehyksiä (Make Frames From Layers Create frames from layers) ja valitse niille sopiva kesto (kuva 79). Ja sitten animaation tehostamiseksi kopioi olemassa olevat kehykset, mutta päinvastaisessa järjestyksessä niin, että kuva ensin kasvaa ja sitten pienenee ja niin edelleen ympyrässä (kuva 80). Tallenna sitten optimointitiedosto (Tiedosto=>Tallenna optimoitu tiedosto=>Tallenna optimoinnin kanssa). Tuloksena oleva animaatio on esitetty kuvassa. 81.
Riisi. 80. Animaatio-ikkunan tila kehysten kopioinnin jälkeen
Riisi. 81. Animaatio valmis
Adobe Illustratorissa läpinäkyvä GIF tehdään seuraavasti. Valitse valikosta Tiedosto > Tallenna verkkoon ja laitteisiin (Alt+Ctrl+Shift+S). Avautuvassa ikkunassa Optimoitu tiedostomuoto -kentässä sinun on ensin siirryttävä Kuvan koko -välilehteen. Tosiasia on, että oletusarvoisesti koko sivu sisältyy optimointiikkunaan, eikä tämä yleensä ole välttämätöntä. Poista siksi Kuvan koko -välilehden Leikkaa taidetauluun -valintaruudun valinta ja napsauta Käytä-painiketta.
Valitse sitten muotovalintaluettelosta GIF ja valitse Läpinäkyvyys-valintaruutu.
Tämän jälkeen päätämme, mitkä värit ovat läpinäkyviä. Kaikki kuvan värit sisältyvät Väritaulukko-välilehteen ja näkyvät värillisinä neliöinä. Valitse Pipetti-työkalu ikkunan vasemmalla puolella olevasta työkalupalkista.
On kaksi tapaa määrittää värit. Helpoin tapa on määrittää väri pipetillä suoraan kuvaan - tämän jälkeen väri korostuu väritaulukossa tummalla vedolla. No, jos tiedät tarkalleen, minkä värin tulee olla läpinäkyvä, voit valita sen suoraan väritaulukosta napsauttamalla vastaavaa värillistä neliötä. Sekä ensimmäisessä että toisessa tapauksessa, jos sinun on valittava useita värejä, sinun on painettava Shift-näppäintä (tai Ctrl-näppäintä). Kun olet valinnut värin, sinun on ohjeistettava ohjelmaa tekemään siitä läpinäkyvä. Voit tehdä tämän napsauttamalla Yhdistä valitut värit läpinäkyväksi -kuvaketta. Kuvassa tämä painike on ympyröity ja punainen väri on asetettu läpinäkyväksi. Kuvaan tulee läpinäkyvä alue, ja väritaulukon neliö muuttaa ulkonäköään - osasta tulee valkoinen kolmio. Jos haluat peruuttaa valitun värin, sinun on valittava se väritaulukosta ja napsauta sitten Yhdistä valitut värit läpinäkyväksi -kuvaketta uudelleen.
Muutama sana läpinäkyvyyden asettamismenetelmästä. Se vastaa pudotusvalikosta Määritä läpinäkyvyys Dither Algorithm, venäjäksi - Algorithm simulointi läpinäkyvyyttä (kuva alla). Vaihtoehtoja on neljä: No Transparency Dither, Diffusio Transparency Dither, Pattern Transparency Dither ja Noise Transparency Dither. Diffuusialgoritmitilassa Määrä-liukusäädin aktivoituu, jolloin voit muuttaa diffuusioarvoa. Mitä soveltaa käytännössä? Riippuen tarkoituksesta ja kuvasta. En käytä tätä vaihtoehtoa ja jätän sen aina oletusarvoon - No Transparency Dither.
Napsauta Tallenna - läpinäkyvä GIF on valmis. Työ tehtiin Adobe Illustrator -versiossa CS4 (v.14), mutta kaikki toiminnot ja pikanäppäimet koskevat myös aikaisempaa versiota CS3 (v. 13).
Tuo ja yksinkertainen animaatio Hei. Tänään tarkastelemme yksinkertaista animaatiota After Effectsissä.
Resurssit: Adobe Illustrator CC
Adobe After Effects CC
Aloitetaan oppiminen piirtämällä Illustratorissa.
Piirretään
1) Piirrä keltainen suorakulmio taustaksi
Kuva 1 - Suorakaide
2) Piirrä ympyrä ja täytä se gradientilla
Työstetään vähän ympyrää:
- poista ääriviivan alapiste, saamme kaaren;
- piirrä suora viiva sulkemalla kaaren alaosan, saamme puoliympyrän
Kuva 2 - 1) piirrä ympyrä; 2) gradientti; 3) poista piste
3) Piirrä suorakulmio ja tee siitä kopio
- yksi harmaa suorakulmio;
- toinen suorakulmio on tummanharmaa
4) Piirrä kolmio tähdestä asettamalla säteiden lukumääräksi 3
kuva 3 - 1) suora valo; 2) suora tumma; 3) kolmio
5) Piirrä kissa kynällä ja yksinkertaisilla kuvioilla 
kuvio 4 - 1) pää; 2) kaula; 3) runko; 4) jalka; 5) häntä
Ja nyt TÄRKEIN hetki
Jaetaan kuvat kerroksiin (mikä animoidaan on erillisellä tasolla) näin: 
Kuva 5 - kaikki kuvat (punainen merkitse tärkeät tasot)
Siinä se, nyt säästetään.
Katsotaanpa tallennusasetuksia
Kuva 6 - Tallenna
Ja nyt seuraava vaihe. Sulje Adobe Illustrator ja avaa After Effects.
Tuo After Effectsiin
Tiedosto - Tuo - Tiedosto - valitse tallennettu Illustrator-tiedosto.
Valitaan tasojen tuonti Illustratorista; jos laitamme materiaalia, saamme kuvan yhdistetyillä tasoilla, mutta emme tarvitse sitä.
Kuva 7 - Tuo kokoonpanona
Siinä se, tuotu.
Katsotaan nyt mitä meillä on. Kaksoisnapsauta koostumusta, jotta se avautuu ja näemme kerrokset (jos kaikki on tehty oikein, kerroksia on useita). Ymmärrämme tämän, katso kuva
Kuva 8 - Avoin kokoonpano
Ja nyt olemme täällä tänään animaatiota varten.
Animaatio After Effectsissä
Aseta pyörimispiste nuolen yläosassa Pan Behind Tool -työkalulla (pikakuvake - Y). Otamme vain pisteen ja siirrämme sen tarvittaessa. Tuloksena se näyttää tältä.. 
Kuva 9 - Panorointityökalu ja tasot
Siinä kaikki, siirrytään nyt animaation tasoihin.
Tarvitsemme Arrow- ja Head_cat-kerroksen.
Aloitetaan nuolella.
Laajenna luetteloa, etsi se ja napsauta kelloa. Joten asetamme ensimmäisen pisteen nollaan sekuntiin. Animaatio kestää yhteensä 2 sekuntia.
Joten, nämä ovat asetukset, jotka sinun on tehtävä (annamme yhteensä 3 pistettä):
| Toinen | 0 | 1 | 2 |
| +66 | - 70 | +66 |
Kuva 10 - Pyörimisnuoli
Nyt animoidaan kissan pää.
Laajenna head_cat ja etsi sijainti .
Tässä tulee olemaan 4 pistettä.
Vain viimeinen koordinaatti muutetaan vaikuttamatta muihin.
| Toinen | 0.1 | 0.17 | 1.12 | 2.0 |
| asema | 689.3 | 729.3 | 729.3 | 689.3 |
Kuva 11 - Aseta pää
Eli animaation periaate oli tällainen. Nuoli heiluu puolelta toiselle, heti kun se lähestyy kissanpentua, se vetää päänsä sisään, viipyy tässä asennossa jonkin aikaa ja palauttaa sen sitten paikoilleen.
Viimeinen vaihe
Tuotanto
Sinun on luotava työstäsi valmis tuote.
Siirry valikkoon - Lisää renderöintijonoon
Render-paneeli avautuu ja Output Module (kahdella napsautuksella) valitse tulostusmuoto. Otin *.mov
Kuva 12 - Renderöi
Napsauta RENDER-painiketta ja saat tuloksen (älä unohda määrittää polkua).
Siinä kaikki.
