Kuinka tehdä animaatiota kuvittajassa. Vinkkejä ja temppuja Adobe illustratorissa: Vinkkejä illustratorissa. Mahdollisuus luoda grafiikkaa Illustratorissa (verrattuna Adobe Flashiin). SVG-tiedoston valmistelu Illustratorissa
Verkkografiikan optimointi
Graafiset tiedot välittyy paljon hitaammin kuin teksti, ja kuvien latausaika on verrannollinen niiden kokoon graafiset tiedostot. Siksi nopeasti latautuvat Web-sivut vaativat niille upotetun pienen koon. graafisia kuvia, joka saavutetaan optimoimalla niitä. Kuvan optimointi ymmärretään sen muunnoksena, joka tarjoaa vähimmäistiedoston koon 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 pakkausasetukset yksittäisille kuville. kuvan fragmentit.
Illustratorissa on sisäänrakennetut kuvanoptimointityökalut, jotka tarjoavat nopean ja tehokkaan optimointiprosessin useiden esikatselumenetelmien avulla. Esikatselu antaa melko tarkan kuvan siitä, miltä optimoitu kuva näyttää reaaliajassa, mikä auttaa arvioimaan optimoinnin tulosta ja valitsemaan oikeat asetukset. Voit myös optimoida sekä suoraan Illustratorissa luotuja kuvia että muita kuvia, kuten kuvia, jotka aiot laittaa Web-sivustoon.
Optimointiparametrit asetetaan ikkunassa Tallenna Webille(Tallenna verkkoon), kutsutaan valikosta samannimisellä komennolla tiedosto(Tiedosto). Ohjelma tarjoaa yhden neljästä esikatselutilasta, mutta kaksi on parasta optimoinnin laadun arvioimiseen:
- 2-Ylös(kaksi vaihtoehtoa) alkuperäisen ja optimoidun kuvan samanaikainen katselu määritettyjen asetusten mukaisesti (kuva 1);
- 4-Ylös(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 vaihtoehtoja nykyisille optimointiasetuksille.
Molempien tilojen avulla voit säästää huomattavasti aikaa parhaan optimointivaihtoehdon löytämisessä, koska niiden avulla ei tarvitse tallentaa kuvia erilaisilla optimointiasetuksilla ja verrata niitä sitten visuaalisesti. Lisäksi on mahdollista arvioida optimoidun kuvan laadun lisäksi sen kokoa ja latausaikaa eri yhteysvaihtoehdoille. Vertailun vuoksi kätevin tila on 4-Up (neljä vaihtoehtoa), jonka avulla voit visuaalisesti arvioida pakkaamisen tai paletin pienentämisen vaikutusta kuvan laatuun ja 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. Täysväristen ja harmaasävykuvien tallentamiseen käytetään valokuvia ja värikkäitä grafiikoita, kuten liukuväritäytteitä, JPG-muotoa. 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:ssa optimoidun kuvan värien enimmäismäärä on 256 ja PNG-muodossa. 24 kuvassa voi olla miljoonia värejä, ja siksi se näyttää siltä jpeg-muodossa. Ero PNG-24:n ja JPEG:n välillä on, että PNG-24-kuvien optimointiin käytetty pakkausmenetelmä ei aiheuta laadun heikkenemistä, mutta se kasvattaa tiedostokokoa. SVG- ja SWF-muodot yhdistävät grafiikan, tekstin ja interaktiiviset komponentit, ja ne voidaan myös optimoida.
Harkitse konkreettinen esimerkki kuvan optimointi. Oletetaan, että Illustrator-ohjelmassa kehitettiin sivuston tunnus (kuva 3), joka on alun perin tallennettu AI-muotoon. 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 muodonmuutoksen seurauksena saadun kirjoituksen todellista sijaintia (kuva 4 ja 5).
Siksi yritetään viedä tunnus PSD-muotoon komennolla Tiedosto=>Vie(Tiedosto=>Vie) Luodun kuvan koko on 143 kt. Avaa tuloksena oleva PSD-tiedosto ja käytä komentoa File=>Tallenna verkkoon(Tiedosto=>Tallenna verkkoon). Koska kuvassa on rajoitettu määrä värejä, GIF-muoto on tässä tapauksessa optimaalinen, ja sinun on päätettävä tietyistä asetuksista. Kokeilemalla asetuksia näet sen paras laatu antaa ohjelman oletuspakkausalgoritmin valikoiva(Valikoiva). Mitä tulee tasoitukseen, niin gradienttitäytön vuoksi on parempi valita algoritmi, joka tuottaa kohinan melua(Kuva 6). Tuloksena olevan optimointitiedoston koko on 6,729 KB (kuva 7), mutta taustan läpinäkyvyys säilyy, mikä on helppo tarkistaa tallentamalla GIF-kuva HTML-tiedoston mukana (kuva 8). Tämän seurauksena tässä esimerkissä emblem.html- ja emblem.gif-tiedostot hankittiin Primer1-kansioon.
Painikkeet
Kaikkien Web-sivujen välttämätön erityinen suunnitteluelementti ovat graafiset ohjauspainikkeet. On yksinkertaisesti mahdotonta kuvitella sivua ilman niitä. Painikkeiden piirtämisestä on nykyään tullut erityinen tyylilaji, ja Illustratorin avulla voit luoda monimutkaisimpia vaihtoehtoja. Esimerkiksi ruudukkoobjekteiksi suunnitellut ja (tai) maskeilla varustetut painikkeet näyttävät paljon tehokkaammilta kuin tavalliset.
Harkitse vaihtoehtoa luoda pyöreä korotettu painike Illustratorissa. Piirrä mielivaltaisella värillä täytetty vektoriobjekti ympyrän muotoon (kuva 9) ja muunna se ruudukoksi komennolla Object=>Luo gradienttiverkko(Object=>Create Gradient Mesh) määrittämällä neljä riviä ja neljä saraketta ja luettelossa Ulkomuoto(Näytä) valitsemalla vaihtoehdon Keskustaan kohokohta(Taustavalo) 60:een (Kuva 10). Valitse työkalu Suora valinta ja napsauta kohteen vasenta yläkulmaa valitsemalla siellä sijaitsevat ankkuripisteet (kuva 11). Muuta vastaavan solun väri valkoiseksi valitsemalla se paletista Swatchit(Kuva 12).
Ota työkalu Ellipsi(Ellipsi), aseta hiiren merkki ennen luodun ympyrän keskelle ja pidä samalla näppäimiä painettuna alt Ja Siirtää, venytä uusi ympyrä vanhan päälle niin, että se on joka puolelta 1-2 pikseliä suurempi kuin vanha. Tee siitä musta reunus Aivohalvaus) 1-2 px leveä ja täytä se säteittäisellä gradientilla punaisesta valkoiseen (kuva 13). Vedä luotua vektoriobjektia 1-2 pikseliä oikealle ja alas, sitten poistamatta valintaa, napsauta sitä hiiren oikealla painikkeella ja kontekstivalikko valitse joukkue Järjestä => Lähetä takaisin(Järjestä=>Lähetä takaisin). Tämän seurauksena saamme tyhjän kuvan painikkeelle. 14.
Pääsääntöisesti millä tahansa verkkosivulla on useita samantyyppisiä painikkeita, jotka eroavat esimerkiksi vain niihin piirrettyjen nuolien suunnasta, jotka osoittavat liikkumissuunnan sivustolla. Harkitse yksinkertaisinta tapausta, jossa on kaksi painiketta, joista toinen alanuoli tarkoittaa siirtymistä seuraavalle sivulle ja painike, jossa on nuoli ylös edelliselle. Otetaan nuolen aihioksi työkalulla piirretty tavallinen kolmio Monikulmio(Monikulmio) täytetty mustalla ja muotoiltu myös verkkoobjektiksi paremman vaikutuksen saavuttamiseksi. Siirrä nuoli painikkeen kohdalle ja säädä kaikkien objektien sijainti suhteessa toisiinsa vastaavilla palettipainikkeilla Kohdistaa(Kohdistus). Ensimmäinen vastaanotetuista painikkeista on esitetty kuvassa. 15. Tee kopio tasosta -painikkeella valitsemalla komennon Kopioi kerros Kerrokset, tuloksena saadaan kaksi identtistä kerrosta. Valitse sitten tason kopiossa oleva nuoli ja käännä sitä 180° valitsemalla komento pikavalikosta Transform=>Kierrä Transformation=>Kierrä. Saamme saman painikkeen kuin kuvassa. 16. Huomaa, että on paljon kätevämpää tallentaa yhden projektin kaikki samantyyppiset painikkeet samaan tiedostoon eri tasoille, mikä näkyy tässä tapauksessa.
Nyt sinun on tallennettava kunkin painikkeen optimoidut asetukset. Tee alimmasta kerroksesta ensin näkymätön, tässä tapauksessa yläkerroksen painike säilyy. Valitse joukkue File=>Tallenna verkkoon(File=>Save for Web), määritä painikkeen optimointiparametrit esimerkiksi kuvan 1 mukaisesti. 17, napsauta painiketta Tallentaa(Tallenna) ja anna tiedostonimi. Tuloksena tallennettu painike näkyy kuvassa. 18. Tee nyt alimmasta kerroksesta näkyvä, tee ylätasosta näkymätön ja tallenna toinen painike samalla tavalla antamalla sille eri nimi. Tulos on esitetty kuvassa. 19.
Nyt ei ole enää jäljellä kuin varmistaa, että painikkeet näyttävät hyvältä Web-sivulla, ja sijoittaa ne mukautetulle sivulle (kuva 20). Tuloksena tässä esimerkissä kuvakansioon (kansioon) saatiin Primer2.html-tiedosto ja kaksi graafista kuvaa Pohja 2).
Haluttaessa painike voidaan helposti muuttaa siivuksi optimoinnin aikana. Tässä tapauksessa komennon valinnan jälkeen File=>Tallenna verkkoon(Tiedosto => Tallenna verkkoon) ja optimointiasetukset tulee valita työkalupalettityökalusta Valitse siivu(Siivuvalinta) ja kaksoisnapsauta kuvaa, joka muuttuu automaattisesti viipaleeksi, jonka sarjanumero on 1 (kuva 21). Kaksoisnapsauttaminen uudelleen avaa ikkunan Slice Options(Slice Options), jossa sinun on määritettävä linkki ja haluttaessa muutettava viipaleen nimi (kuva 22) ja sitten tallennettava optimoitu kuva. Tuloksena on tässä tapauksessa tiedostot Primer3.html (kuva 23) ja Primer3.gif (Primer3-kansio).
Interaktiiviset elementit
Yksi tapa piristää sivua on esitellä sisustuselementtejä, jotka muuttavat sitä ulkomuoto(tai tila) riippuen hiiren käyttäytymisestä tai harvemmin muissa tilanteissa: zoomaus, vieritys, lataus, virheet jne.
Näistä elementeistä tunnetuimpia ovat rollover-elementit (englanninkielisestä roll over to roll, roll over) elementit, jotka muuttavat ulkonäköään hiiren vaikutuksesta. Animoidut painikkeet ovat esimerkkejä tyypillisistä kaatumisista. Rolloveria käytetään usein luotaessa muita sivuston navigointielementtejä. Itse asiassa 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, Siirrä hiiren osoitin elementin päälle ja paina hiiren vasenta painiketta alas, kun siirrät hiiren 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ä se kuitenkin rajoittuu useammin elementin vaihtamiseen vain kolmen tai jopa kahden ensimmäisen tapahtuman osalta.
Klassiset rolloverit
Klassisessa mielessä rollover on sarja graafisia kuvia GIF-muodossa ja niitä vastaava HTML-koodi, jonka ansiosta selainikkunassa hiiren käyttäytymisestä riippuen yksi kuva korvaa toisen.
Illustratoria ei ole suunniteltu suoraan luomaan rollovereita perinteisessä mielessä, mutta se voi auttaa niiden alkuelementtien kehittämisessä. Ajatuksena tässä tapauksessa on luoda kerros ensimmäistä tapahtumaa vastaavalla kuvalla. Tee sitten kopio tasosta ja muunna kuva vastaamaan toista tapahtumaa ja niin edelleen. Tuloksena oleva kerroskuva viedään PSD-tiedostoon, jossa kerrokset säilyvät, minkä perusteella Image Ready -ohjelmassa luodaan rollover. Illustratorin käytön etuna, kuten monissa muissakin tapauksissa, on useita sen mielenkiintoisia ominaisuuksia, jotka eivät ole käytettävissä muissa. ohjelmistotyökalut, yhdessä vektorigrafiikkamuunnosten mukavuuden kanssa.
Yritetään luoda rollover merkinnän muodossa, joka muuttaa väriä hiiren käytöksen mukaan. Avaa Illustrator ja luo pyöristetyn ja mustalla täytetyn suorakulmion muotoinen muoto (kuva 24), tee siitä kopio ja aseta se näytön vapaaseen osaan. Muunna suorakulmion ensimmäinen kopio ruudukkoobjektiksi, jonka keskellä on korostus (komento Object=>Luo gradienttiverkko Object=>Create Gradient Mesh), joka määrittää neljä riviä ja kymmenen saraketta (Kuva 25). Aktivoi suorakulmion toinen kopio ja aseta sille gradienttitäyttö, joka on samanlainen kuin kuvassa 1. 26. Aseta gradienttiobjekti verkon päälle, pienennä gradienttiobjektin läpinäkyvyys noin 80 prosenttiin ja gradienttiobjektin koko noin 1 pikseliin simuloidaksesi pullistumavaikutuksen. Ja sitten esineiden päälle paina kirjoitus. 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 siirretään sen päälle (Over state) ja siniseksi, kun hiiren painiketta painetaan (alastila).
Kiinnitä huomiota palettiin Kerrokset tässä vaiheessa siinä on vain yksi kerros. Tee tästä tasosta kaksi kopiota komennolla Kopioi kerros(Duplicate Layer) palettivalikosta Kerrokset, paletissa on kolme kerrosta (kuva 28). Muuta sitten kerroksen ensimmäisessä kopiossa tekstin väri vihreäksi ja toisessa siniseksi (kuva 29). Tämän seurauksena saadaan kaatumiseen tarvittava aihio.
Vie luotu kuva PSD-muotoon, jossa kerrokset säilytetään komennolla Tiedosto=>Vie(Tiedosto=>Vie) ja RGB-värimallin valinta (kuva 30). Avaa luotu PSD-tiedosto ImageReadyssä (kuvat 31 ja 32). Luo kehyksiä tasojen perusteella valitsemalla komennon Tee kehyksiä kerroksista(Create Frames from Layers) palettivalikosta animaatio. Animaatio-ikkuna näyttää samalta kuin kuvassa. 33. Samaan aikaan paletissa Kierrokset Aluksi luodaan yksi normaalitila.
Sitten ikkunaan animaatio valitse kehys, joka vastaa leijuttua tilaa paletissa Kerrokset kerros valitaan automaattisesti Tason 1 kopio(Kuva 34). Siirry palettiin Kierrokset ja napsauta painiketta Luo Rollover State(Luo rollover-tila) kuva. 35, mikä saa valtion ilmestymään Yli osavaltion paletissa Kierrokset(Kuva 36). Luo tila samalla tavalla Down State. Aktivoi tila Normaali paletissa Kierrokset ja poista paletista animaatio kaikki kehykset paitsi se, jonka tulee vastata tilaa Normaali. Tämän seurauksena jokaiselle paletin kiertymistilalle animaatio tulee vain yksi kehys (kuvat 37, 38 ja 39).
Riisi. 38. Näkymä kuvasta, Animaatio-ikkunasta ja Tasot- ja Rollover-paletteista Over State
Tarkista tulos napsauttamalla painiketta Esikatselu oletusselaimessa(Browser Preview) työkalupalkissa ja siirtymällä selainikkunaan (Kuva 40). Tämän jälkeen tallenna tiedosto komennolla File=>Tallenna optimoitu(Tiedosto=>Tallenna optimoinnin kanssa) ja vaihtoehdon määrittäminen HTML ja kuvat (*.html). Tuloksena tässä esimerkissä saatiin Primer4.html-tiedosto ja sarja graafisia kuvia kuvakansiossa.
Riisi. 40. Selainikkuna Rollover-elementillä
SVG-kierrätykset
Yhä suositumpi SVG-muoto (Scalable Vector Graphics skaalautuva Vektorigrafiikka), joka on luotu XML-standardin perusteella, mahdollistaa myös monenlaisten interaktiivisten elementtien, erityisesti rolloverien, saamisen, vain käytännössä tämä toteutetaan täysin eri tavalla. On syytä huomata, että vuorovaikutteisten SVG-rullausten luominen, toisin kuin klassisten, kun vastaava HTML-koodi luodaan täysin automaattisesti, vaatii JavaScript-kielen tuntemusta ja olioohjelmoinnin perusperiaatteiden ymmärtämistä.
Erityinen paletti on suunniteltu toimimaan SVG-objektien kanssa. SVG-vuorovaikutus, joka on helppo avata komennolla Window=>SVG-vuorovaikutus(Ikkuna=>SVG-vuorovaikutus) kuva. 41.
Tarkastellaan tätä vaihtoehtoa, jossa voidaan luoda rollover interaktiivisen painikkeen esimerkkiä käyttäen, jonka etiketin väri muuttuu mustasta siniseksi, kun hiiri viedään päälle, ja muuttuu takaisin 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ä paletin painikkeen läpinäkyvyyttä Läpinäkyvyys(Läpinäkyvyys) tässä esimerkissä parametrin arvo Peittävyys(Opacity) on asetettu arvoon 50 %. Tee kopio painikkeesta, täytä se tummanvihreällä (kuva 43) ja muunna se verkkoobjektiksi komennolla Object=>Luo gradienttiverkko(Object=>Create Gradient Mesh) määrittämällä neljä riviä ja kymmenen saraketta ja luettelossa Ulkomuoto(Näytä) valitsemalla vaihtoehdon Keskustaan(Keskikohtaa kohti) ja arvon asettaminen kohokohta(Korosta) arvoon 100. Vähennä verkkoobjektikerroksen peittävyyttä noin 40 %:iin (Kuva 44). Aseta verkkoobjekti gradienttiobjektin päälle, jolloin painike näyttää kuvan 1 mukaiselta. 45.
Riisi. 44. Painikkeen kopion muuttaminen ruudukkoobjektiksi
Täydennä painike tarkoitetulla merkinnällä ja säädä sen asentoa vastaavilla palettipainikkeilla Kohdistaa(Kohdistus). Tuloksena oleva kuva sisältää yhden kerroksen, jossa on kolme objektia päällekkäin (kuva 46). Ajoitetut tapahtumat viittaavat tekstiobjektiin, joten vaihda sen nimeksi mukavuuden vuoksi Teksti kaksoisnapsauttamalla objektia ja kirjoittamalla uusi nimi. Muuta vastaavasti kerroksen nimi Tasosta 1 kerrokseen(Kuva 47).
Tapahtuman käsittelyyn liittyy JavaScript-toimintojen käyttö, joten sinun on liitettävä tiedosto, jossa on kuvaus näistä toimenpiteistä. Sitä kutsutaan nimellä Events.js ja se tallennetaan levylle Sample Files\Sample Art\SVG\SVG-kansioon asennettuna. Adobe ohjelmisto Kuvittaja. Jos haluat sisällyttää Events.js-tiedoston, käytä komentoa JavaScript-tiedostot SVG-vuorovaikutus(Kuva 48). Seuraavaksi sinun on painettava painiketta Lisätä(Lisää) ja etsi haluamasi tiedosto kiintolevyltäsi. Kun hänen nimensä näkyy kentässä URL-osoite(kuva 49), napsauta painiketta Tehty(Mene ulos).
Riisi. 48. JavaScript Files -komennon valitseminen
Tämän jälkeen sinun tulee määrittää objektin reaktio hiiren tapahtumiin Teksti. Valitse Teksti-objekti kentästä tapahtuma(Tapahtuma) paletit SVG-vuorovaikutus valitse tapahtuma hiiren päällä elemColor(evt, "teksti", "#3333FF") tämä tarkoittaa, että kun hiiri on kohteen päällä Teksti sen väri muuttuu siniseksi (kuva 50). Jotta tekstin väri muuttuisi mustaksi hiiren poistuttua aktiiviselta alueelta, sinun on luotava vielä yksi tapahtuma on hiiri ulos valitse se kentältä tapahtuma(Tapahtuma) paletit SVG-vuorovaikutus. Kirjoita sitten teksti toimintoriville elemColor(evt, "teksti", "#000000") tämä palaa mustana (kuva 51).
Riisi. 51. Teksti-objektin SVG-vuorovaikutteisuuspaletin lopullinen ulkoasu
Tallenna luotu rollover SVG-tiedostona komennolla File=>Tallenna nimellä(Tiedosto=> Tiedostotyyppi muoto SVG ja määritä sitten SVG-tiedoston tallennusasetukset kuvan 1 mukaisesti. 52. Tallennuksen jälkeen saadaan vain yksi tiedosto SVG-tunnisteella, eikä kahta, kuten perinteisen rolloverin tapauksessa, tässä tapauksessa hankittiin Primer5.svg-tiedosto (Primer5-kansio). Kuitenkin, jotta rollover todella toimisi, sinun on lisäksi kopioitava Events.js-tiedosto JavaScript-toimintojen kuvauksella kansioon, jossa on SVG-tiedosto. Sen jälkeen voit tarkistaa kaatumisen suorituskyvyn, tulos näyttää kuvan 2 mukaiselta. 53.
SVG-animaatio
SVG-muotoa voidaan käyttää myös animaation välittämiseen. Yritetään luoda yksinkertainen animaatioelementti (tässä tapauksessa se on tietoa yrityksestä), joka ilmestyy näytölle, kun hiiri viedään vastaavan graafisen objektin päälle, ja katoaa, kun hiiri poistetaan interaktiivisesta elementistä.
Luodaan suunnilleen tällainen sarja graafisia ja tekstiobjekteja, kuten kuvassa 10 näkyy. 54. Nimeä kaikki luodut objektit uudelleen kätevällä tavalla napsauttamalla peräkkäin paletin seuraavan objektin nimeä Kerrokset ja esittelyssä toivottu nimi(Kuva 55). Huomaa, että se on korostettu kuvassa. 56 kohdetta Teksti1, Teksti2, Teksti3 Ja Polku1 on aina näkyvissä, ja kaikki muut vain, kun viet hiiren kohteen päälle Teksti1.
Riisi. 54. Kuvan alkuperäinen näkymä
Sisällytä Events.js-tiedosto JavaScript-toimintojen kuvaukseen käyttämällä komentoa JavaScript-tiedostot(JavaScript-tiedostot) paletista SVG-vuorovaikutus painamalla painiketta Lisätä(Lisää) valitsemalla haluamasi tiedosto kiintolevyltä ja napsauttamalla -painiketta Tehty(Mene ulos).
Määritä hiiren tapahtumavaste objektille Teksti1. Valitse objekti Teksti, kentällä tapahtuma(Tapahtuma) paletit SVG-vuorovaikutus valitse tapahtuma hiiren päällä ja kirjoita teksti alla olevalle riville elemShow(evt, "teksti4"); elemShow(evt, "Polku2"). Tämän seurauksena, kun hiiri on kohteen päällä Teksti1 esineet tulevat näkyviin Teksti 4 Ja Polku2. Huomaa, että jos tapahtuman sattuessa on suoritettava useita toimintoja, ne on määritettävä ";"-merkillä. Tee sitten sama tapahtumalle on hiiri ulos, kirjoittamalla sen tekstin, mikä tarkoittaa objektien piilottamista (kuva 57).
Tallenna tulos SVG-tiedostona komennolla File=>Tallenna nimellä(Tiedosto=>Tallenna nimellä), määrittämällä tiedoston nimen ja valitsemalla kentästä Tiedostotyyppi SVG-muodossa ja määritä sitten SVG-tiedoston tallennusasetukset kuvan 1 mukaisesti. 58. Tallennuksen jälkeen hankitaan Primer6.svg-tiedosto (Primer6-kansio). Älä unohda kopioida Events.js-tiedostoa kansioon, jossa tämä tiedosto on. Jos sen jälkeen juoksee coz annettu tiedosto, näet kuvassa näkyvän tuloksen. 59. Tämä on melkein mitä tarvitset. Ainoa asia, joka ei sisältynyt suunnitelmiimme, oli esineiden alkuperäinen ulkonäkö Teksti 4 ja Polku 2 ladattaessa. Päästäksesi eroon tästä puutteesta, valitse molemmat objektit kerralla ja luo niille toiminto elemPiilota(evt, "teksti4"); elemHide(evt, "Polku2") tapahtumassa lastina(Kuva 60). Tallenna tiedosto uudelleen ja varmista, että objektit ovat nyt Teksti 4 Ja Polku2 näkyy vain, kun hiirtä viedään kohteen päälle Teksti1.
GIF-animaatio
Mitään Web-sivua ei voida ajatella ilman verkkoanimaatiota, mukaan lukien animoidut gifit. Yksi tapa luoda niitä on käyttää Adobe ImageReady -sovellusta, jonka avulla voit muun muassa luoda animaatioita tasoista. Samanaikaisesti itse monikerroksinen kuva voidaan valmistaa erilaisissa sovelluksissa, mm Adobe Illustrator.
Animaatio on erittäin helppoa luoda paletin elementtien perusteella Symbolit(Symbolit) avataan komennolla Ikkuna=>Symbolit(Window=>Symbols) tai jostain symbolikirjastosta, joka voidaan avata komennolla Window=>Symbolikirjastot(Ikkuna=>Symbolikirjastot).
Yritetään esimerkiksi suurentaa minkä tahansa objekti-symbolin kokoa, objektin kasvattamisprosessin avainvaiheet on asetettava erillisille tasoille. Ensin yksinkertaisesti aseta symboliobjektit päällekkäin ja lisää sitten jokaisen seuraavan kohteen kokoa esimerkiksi kuvan 1 mukaisesti. 61. Tämän seurauksena paletissa Kerrokset luodaan yksi kerros, jossa on useita objekteja (kuva 62). Jos viet tämän kuvan suoraan PSD-muotoon, tämä ei toimi, koska siinä on vain yksi kerros, ja luonnollisesti, kun avaat PSD-tiedoston ImageReadyssä, 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 kerros Kerros 1 Tasot-paletissa ja käytä komentoa Vapauta tasolle(Vapauta kerroksittain). Tuloksena jokainen objekti siirretään omalle tasolleen, mutta ne kaikki ovat sisäkkäisiä tasossa Kerros 1. Siksi sinun on sitten vedettävä manuaalisesti kaikki sisäkkäiset tasot Tasot-paletin yläosaan niin, että ne ovat tason yläpuolella. Kerros 1 ja sitten tyhjä kerros Kerros 1 helppo irrottaa (kuva 63). Vie kuva PSD-muotoon komennolla Tiedosto=>Vie(File=>Export) asetuksilla kuten kuvassa. 64.
Lataa luotu PSD-tiedosto ImageReady-ohjelmaan (kuvat 65 ja 66). Avaa palettivalikko animaatioTee kehyksiä kerroksista(Luo kehyksiä tasoista). Tämän seurauksena luodaan viisi kehystä, joista jokainen vastaa sen kerrosta ja palettiikkunaa animaatio näyttää samalta kuin kuvassa. 67.
Aseta sen jälkeen kunkin luodun kehyksen kesto, tässä tapauksessa kaikkien kehysten kesto on 0,2 s. Tallenna sitten optimoitu animaatio komennolla File=>Tallenna optimoitu(Tiedosto=>Tallenna optimoinnin kanssa). Saatu tulos saattaa muistuttaa kuviota. 68.
Toimintoja on vielä kätevämpi käyttää Live-sekoituksia Illustrator ohjelmisto. 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 sopivilla parametreilla (kuva 69). Tätä tiedostoa ei voi käyttää suoraan animaation luomiseen, koska kuva sijaitsee yhdellä kerroksella (kuva 70). Siksi sinun on ensin asetettava sekoitusobjektin jokainen elementti erilliselle tasolle. Voit tehdä tämän ikkunassa Kerrokset korosta viiva
Riisi. 70. Alkutila Tasot ikkunat
Vie luotu tiedosto PSD-muotoon komennolla Tiedosto=>Vie(Tiedosto=>Vie). Avaa luotu PSD-tiedosto ImageReadyssä (kuva 73). Huomaa, että kaikki Illustrator-ohjelmassa luodut tasot näkyvät tasot-ikkunassa (kuva 74) ja ikkunassa. animaatio tulee vain yksi kehys.
Aktivoi palettivalikko animaatio, napsauta paletin oikeassa yläkulmassa olevaa mustaa nuolta ja valitse komento Tee kehyksiä kerroksista(Luo kehyksiä tasoista) tässä esimerkissä luodaan lopulta viisi kehystä ja palettiikkuna animaatio ottaa kuvan 1 mukaisen muodon. 75. Valitse kaikki kehykset pitämällä näppäintä painettuna Siirtää, ja aseta sopiva kehyksen kesto tässä esimerkissä, sama aika 0,2 s otetaan jokaisesta kehyksestä. Tallenna sitten tiedosto optimointikomennolla File=>Tallenna optimoitu(Tiedosto=>Tallenna optimoinnin kanssa) -asetus luettelossa Tiedostotyyppi vaihtoehto Vain kuvat (*.gif). Animaatio muistuttaa kuvaa. 76.
Paljon mielenkiintoisempaa ei ole liike, vaan sekoitusobjektien tasainen koon muuttaminen. Voit esimerkiksi käyttää jo luotua sekoitussiirtymää. Tässä tapauksessa, kun olet luonut erilliset tasot kullekin sekoitussiirtymän elementille, aseta kaikki objektit päällekkäin painikkeilla Vaakasuora kohdistuskeskus(Kohdistus suhteessa vaakasuoraan keskustaan) ja Vertical Align Center(Pystysuuntainen keskikohdistus) -paletteja Kohdistaa(Kuva 77).
Vie luotu tiedosto PSD-muotoon ( Tiedosto=>Vie File=>Export) ja avaa luotu PSD-tiedosto ImageReady-ohjelmassa (kuva 78). Luo animaatiokehyksiä tasojen perusteella ( Tee kehyksiä kerroksista Luo kehyksiä tasoista) 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 ( File=>Tallenna optimoitu File=>Tallenna optimoinnin kanssa). Tuloksena oleva animaatio on esitetty kuvassa. 81.
Riisi. 80. Animaatio-ikkunan tila kehysten kopioinnin jälkeen
Riisi. 81. Animaatio valmis
Hei kaikki! Tänään yritän tehdä kuvauksen ohjelman ominaisuuksista Adobe Illustrator, vertaamalla sitä huuhtelun ominaisuuksiin. Tämä ei ole luuohjelman globaali analyysi, vaan pikemminkin kuvaus joistakin mielenkiintoisista siruista, jotka löysin tästä ohjelmasta. Keräsin tietoa pala palalta sitä opiskellessani, jotta voisin laittaa kaiken yhteen postaukseen. Täytyy heti myöntää, että en ole mikään superkokenut kuvittajakäyttäjä, vain viimeiset puoli vuotta olen käyttänyt sitä piirtämisessä (ennen sitä piirsin kaiken salamalla). Monet valittavat, että kuvittaja on monimutkainen, ei aina intuitiivinen. Olen jossain määrin samaa mieltä siitä, että salaman jälkeen tämä ohjelma on vaikea. Mutta tärkeintä tässä ei ole lopettaa, vaan jatkaa opiskelua. Ja parin viikon kuluttua herää ajatus, että miten minä ennen pärjäsin ilman sitä!
Joten mistä pidin kuvittajassa ja mitä löysin itselleni, mikä ei ole salama.
1. Aloitan yksinkertaisimmasta, mutta samalla välttämättömästä. Yritä järjestää esineitä ympyrään salaman aikana. Aikaisemmin oli Deco työkalu, mutta se poistettiin ilmeisesti tarpeettomana. Päätimme, että olisi hauskempaa tehdä se käsin. Illustratorissa on tämä ominaisuus: Tehoste - Vääristää&Transform - Muunna.
Kaikki on nopeaa ja yksinkertaista, asetamme arvot (objektien välinen etäisyys, kopioiden määrä) itse asetuksissa.
2. Siksak
Vielä yksinkertaisempi, mutta silti hyödyllinen asia. Se tuntuisi pikkuhiljaa, mutta salamassa on piirrettävä käsin, kuvittajassa tämä on sekuntien kysymys.
3. Esineiden muodonmuutos (Warp)
Flashissa ei ole mitään tällaista. Alla olevassa esimerkissä näytin vain 2 tapaa muuttaa yksinkertaisia muotoja (Effect - Warp - Arc / Fish). Itse asiassa niitä on 15. uusin versio ohjelmia.
4. Kulmien automaattinen pyöristys (pyöreät kulmat)
Se voidaan tehdä manuaalisesti: graafisessa objektissa, kun se valitaan kulmaan (kaikkiin kulmiin), näkyviin tulee valkoinen piste ja pyöristetty viivamerkki. Vedä hiirtä, säädä makusi mukaan.
Mutta tämä koskee vain muotoja, kynäviivalla hieman eri tavalla - käytä pyöristystehostetta ( Tehoste - Tyyli - Pyöreät kulmat). Ulostulossa saamme saman tuloksen.
5. Karhenna
Tehostetta sovelletaan yksinkertaisiin muotoihin ( Tehoste-vääristymä ja muunnos-karhenna). Tuloksena saamme jotain vähän poly-3D-malleja muistuttavaa. Minusta se on siistiä :) Ja mikä tärkeintä - hyvin yksinkertaista.
6 Pucker&Bloat(Vedä sisään ja täytä)
Esimerkki alla olevassa kuvassa:
7. Lomakkeen laajennus (siirretty polku)
Salamassa on toiminto Expand Fill (täyttölaajennus), se ei toimi lyijykynällä ollenkaan, toisin kuin illustrator.
8. Harjat (Art Brush, Pattern Brush, Scatter Brush)
Katso esimerkkejä alla olevasta kuvasta:
9. Tekstuurisivellin (tekstuurisiveltimet)
Illustratorissa on myös monia tekstuurisiveltimiä, joista kirjoitin ja miten ne ilmestyivät uusi versio salama - . On huomattu, että siveltimien käyttö Adobe Animatessa on hirvittävän hidasta. Se siitä:(
10. En ole varma, onko tämä temppu, mutta haluan keskittyä siveltimeen, jolla on hauska nimi möykkyHarjata. Sijaitsee työkalupalkissa, erittäin mukava sivellin käyttää. Siinä on paljon asetuksia, pidän siitä enemmän kuin tavallisesti. Sen etuja on vaikea selittää sanoin, on parempi kokeilla sitä kerran.
10.Jaa ruudukkoon
Toinen hyödyllinen ominaisuus on Split to Grid (Object-Path-Split to Grid) -toiminto, jonka avulla voit leikata lomakkeen yhtä suureksi osaksi. Mitä tämä muistuttaa meitä? Aivan oikein - ikkunat kerrostalossa. Minusta siisti juttu esimerkiksi kaupunkimaisemien piirtämiseen;)
Toinen hyödyllinen työkalu, esitetty Illustratorissa, luultavasti ensimmäisestä julkaisustaan lähtien. Sen avulla voit luoda esimerkiksi puutekstuureja:
12. Siirrä (oikea - Muunna - Siirrä)
Siirrä kohde tietyllä etäisyydellä. Halutessasi voit luoda välittömästi kopion, joka sijoitetaan halutulle etäisyydelle valitusta kohteesta vaakasuunnassa / pystysuunnassa. Flashin aikaisemmassa versiossa oli liitännäinen tämä toiminto. Valitettavasti en muista sen nimeä.
Illustratorissa on erittäin kätevää luoda saumattomia kuvioita ( Objekti-Kuvio-Make). Muistan kuinka onnistuin kiihkeästi flashissa luomalla . CC 2015:n kuvittajaversiossa kaikki on automatisoitua, joukko asetuksia auttaa luomaan kuvion kymmenissä muunnelmissa, vain muutamalla graafisella elementillä käsillä. Ohjelman aiemmissa versioissa kaikki piti tehdä manuaalisesti, kuten flashissä tähänkin asti.
(Huomaa - kuviosta voidaan tehdä vektorimuotoinen objekti käyttämällä jäsennystoimintoa ( Objektin laajennus ulkoasu).
14. Objektimosaiikki (mosaiikki)
Luo väripaletti olemassa olevan kuvan perusteella. Tuo sitten haluamasi kuva kuvaan (Avaa). Objekti - Luo objektimosaiikki. Asetuksissa määritämme jakotaajuuden korkeuteen ja leveyteen.
Ja ulostulossa saamme:
15. Sekoita (sekoitus)
Käytetään gradienttien luomiseen. Voit luoda vaiheittaisia siirtymiä, kuten esimerkiksi kuvassa. En voi sanoa käyttäväni sitä usein, mutta jollekin siitä saattaa olla hyötyä. Minusta tuntuu, että sitä voidaan käyttää yksinkertaisten taustakuvien luomiseen.
Työkalua voidaan käyttää myös objektien kloonaamiseen. Asetamme kaksi objektia etäisyydelle toisistaan ja käytämme sekoitusasetuksia, valitsemme vaiheiden lukumäärän (kloonattujen objektien lukumäärä).
16. Rakenna muototyökalu. Erittäin kätevä asia primitiivien kanssa työskentelemiseen. Hetkessä, kuten minusta näytti, se on vähemmän kätevää.
Pidä Alt painettuna ja napsauta valittuja segmenttejä - poista segmentit. Jos yksinkertaisesti vedämme hiirtä useiden valittujen alueiden päälle - yhteydet.
Lisäys - työkalu, joka auttaa automaattisesti leikkaamaan, yhdistämään jne. valitut lomakkeet. Minulle se ei ole kovin kätevää, käytän sitä useammin Rakentaamuototyökalu.
(taidetaulut)
18.Mukautettu työkalupaneeli
Mahdollisuus luoda oma työkalurivi, hylätä tarpeettomat ja valita vain ne, joita käytät.
Salamassa, taulut, nimittäin kohtaukset ( Kohtaus 1, 2, 3.) sijaitsevat erikseen ja sinun on vaihdettava niiden välillä (Vaihto + F2). Illustratorissa ne kaikki voidaan sijoittaa silmiesi eteen. Se on kätevää, kun teet useita versioita samasta piirroksesta, jotta kaikki vaihtoehdot ovat silmiesi edessä vertailua varten.
19. Isometrinen graafisilla tyyleillä
Ja viimeinen asia on isometrian luominen ilman yhtä napsautusta (tai pikemminkin kolmea napsautusta, koska meillä on 3 puolta;) käyttämällä graafisia tyylejä ( Graafiset tyylit). Miten tämä tehdään, kirjoitan ensi kerralla.
Illustratorilla flashin kanssa yhteistä on kyky tallentaa esine symboliksi (symboliksi) ja tämä symboli voidaan myös siirtää flashiin ilman ongelmia (avaa .ai-tiedosto flashissä, Tuo - Tuo lavalle).
Illustratorin symbolilla on samat ominaisuudet kuin flashissa.
Ja lopuksi kirjoitan, mikä kuvittajassa on mielestäni huonompaa kuin flash. Kyllä, kyllä, ja on. Ja tämä on täyttötyökalu ( maaliämpäri). Vaikka kuinka yritän tottua siihen illassa, se on kätevämpää flashissa.
Jos muistiinpanoistani on ollut sinulle hyötyä tai haluat lisätä jotain itse - tervetuloa kommentteihin! Onnea kaikille;)
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 kuvataan yksinkertaisin esimerkki SVG-vektorin animoinnista kevyellä Jquery-laajennuksella 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 siis vaiheet, jotka meidän on noudatettava:
- Luo oikea tiedostorakenne
- Lataa ja liitä laajennus
- Piirrä upea viivapiirros Adobe Illustratorissa
- Muunna kuvamme Lazy Line Converteriksi
- Liitä tuloksena oleva koodi main.js-tiedostoon
- Lisää CSS:ää maun mukaan
1. Luo oikea tiedostorakenne
Tässä auttaa meitä Initializr-palvelu, jossa sinun tulee valita parametrit alla olevan kuvan mukaisesti.
- Classic H5BP (HTML5 Boiler Plate)
- Ei mallia
- Vain HTML5 Shiv
- minimoitu
- .IE-luokat
- Kromi 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, vain 2 tiedostoa tarvitsee siirtää 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.
Nämä 2 tiedostoa sijoitetaan js-kansioon. Ja sisällytämme ne index.html-tiedostoomme ennen main.js:ää seuraavasti:
3. Piirrä viileä ääriviivakuva Adobe Illustratorissa
- Piirrä ääriviivakuvamme Illustratorissa (helpein tapa tehdä tämä on kynätyökalulla)
- On välttämätöntä, että piirustuksemme ääriviivat eivät sulkeudu, koska vaikutuksellemme tarvitsemme alun ja lopun
- Ei pitäisi olla täyttöjä
- Tiedoston enimmäiskoko on 1000×1000 px, 40 kt
- Rajataan objektin Object>Artboards>Fit To Artboards Bounds reunoihin
- Tallenna SVG-muodossa (tavalliset tallennusasetukset ovat kunnossa)
Voit esimerkiksi käyttää liitteen kuvakkeita.
4. Muunna kuvamme Lazy Line Converteriksi
Vedä ja pudota kuvake alla olevaan laatikkoon.
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
Liitä nyt saatu koodi tyhjään main.js-tiedostoon
Vaihtoehdot:
strokeWidth — ääriviivan paksuus
strokeColor - ääriviivan väri
Voit myös muuttaa kunkin vektorin piirtonopeutta muuttamalla kestoparametrin arvoa (oletus 600)
6. Lisää CSS:ää maun mukaan
Poista kappale index.html:stä
Hei maailma! Tämä on HTML5 Boilerplate.
Ja sen sijaan lisäämme lohkon, jossa animaatiomme tapahtuu
lisää sitten main.css-tiedostoon CSS-syötettä saadaksesi paremman ulkoasun:
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. juokseessaan paikallinen kone animaation alkamista voidaan viivyttää muutamalla sekunnilla.
Tänään meillä ei ole aivan tavallista Adobe oppitunti Kuvittaja. Koska tällä kertaa emme tee staattista kuvaa, vaan todellista animaatiota. Kuvittele, että se käy ilmi apua Adobelta Illustrator osaa myös piirtää sarjakuvia :)
Ja tähän emme tarvitse mitään. Tasojen pätevä organisointi ja lopputyön vienti swf-muotoon, jossa jokainen kerros muunnetaan animaatiokehykseksi. Tämän päivän opetusohjelmassa piirretään retro-elokuvatyylinen lähtölaskenta-animaatio. Tuloksena pitäisi olla flash-elokuva, jossa on sama lähtölaskenta.
Ensimmäinen asia on piirtää kaikki tarvittavat elementit tulevaa animaatiota varten. Tätä varten tein erilliseen dokumenttiin kaksi filmikehyskohtaa, viitteeksi ympyrän, joka on leikattu erillisiin sektoreihin, tekstuurin ja pystynaarmun antiikin vaikutuksen lisäämiseksi sekä kaikki numerot ja kirjoitukset.
Kun sarjakuvamme kaikki osat ovat valmiita, voit aloittaa itse animaation luomisen. Mukavuuden vuoksi tämä on parasta tehdä uudessa asiakirjassa. Tässä tapauksessa kerrokset toimivat animaatiokehyksinä. Ja aivan ensimmäisessä kerroksessa sinun tarvitsee vain kopioida elokuvan kehys. Aseta se keskelle työaluetta.
Luo nyt toinen kerros ja kopioi siihen filmikehys, johon reunoille tehdään reiät siirrolla. Se on myös keskitettävä.
Näistä kahdesta kerroksesta saat jo liikkuvan elokuvan animaation. Mutta myöhemmin tarvitsemme paljon enemmän kerroksia. Valitse siis kaksi ensimmäistä kerrosta, siirry paneelivaihtoehtoihin ja tee kopio tasoista.
Samalla tavalla meidän on kerättävä 12 kerrosta filmikehyksillä, 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 kovin kätevää työhön. Siksi voit sammuttaa jotkin tasot napsauttamalla tason nimen vasemmalla puolella olevaa silmä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ä tasoja päälle ja pois, näet tarkalleen, mitä tulevan animaatiomme tietyssä kehyksessä sijaitsee. Ja nyt, jotta voimme lisätä hieman tärinää elokuvan liikkeeseen, meidän on siirrettävä vastaanotettuja 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ä kummallekin puolelle.
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ä sarjakuvan osa-asiakirjasta ja aseta se ensimmäiselle kerrokselle filmikehyksen päälle.
Jos poistat valinnan ympyrästä, se näyttää yhdeltä kokonaisuudelta. Tämä on juuri sitä mitä tarvitsemme.
Mutta koska se koostuu erillisistä sektoreista, on mahdollista niiden väriä vaihtamalla luoda animaatiota erittäin nopeasti ja helposti. Kopioi tämä ympyrä toiselle kerrokselle ja tee ensimmäisestä sektorista vaaleampi. Muistathan, että filmi tärisee liikkeen aikana, joten ympyrää ei tarvitse laittaa tarkasti kehyksen keskelle. Aseta se silmään.
Samoin sinun on kopioitava ympyrä jokaiselle seuraavalle tasolle maalattaessa samalla vaaleammalla värillä yksi sektori enemmän kuin edellisellä kerralla. Yhdessä nämä 12 kerrosta muodostavat animaation elokuvan liikkeestä täyteympyrällä.
Seuraavaksi meidän on lisättävä kerroksiimme tekstuuria. Kytke ensimmäinen kerros päälle ja kopioi tekstuuri lähdetiedostosta varaosineen.
Kytke sitten päälle seuraavat kerrokset vuorotellen 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äljellä on pystysuorien naarmujen lisääminen ja melkein kaikki. Tee tämä uudelleen kopioimalla alkuperäinen naarmu ja laita se mielivaltaiseen paikkaan useissa kerroksissa. Minun tapauksessani naarmut näkyvät vain kahdessa kerroksessa.
Nyt kun elokuvaanimaatioiden pääjakso on valmis, on jäljellä numeroiden lisääminen. Koska laskemme 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än animaatio päättyy. Kun pääset kerrosten seuraavaan kopioon, jossa ympyrä täyttyy jälleen kokonaan, sinun on asetettava numero kaksi. Kopioi samalla tavalla numero yksi haluttuihin kerroksiin. Ja kun pääset Go!!!
Siinä kaikki animaation kanssa. Tärkeintä tässä ei ole hämmentyä. Kerroksille voi antaa käteviä nimiä, mutta olin jotenkin liian laiska :) Ja kuitenkin, kun olet valmis, 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.
Lisäasetukset avautuvat. Tässä sinun on asetettava kuvataajuus. Minulla on 12 kuvaa sekunnissa. Looping-valintaruutu vastaa animaation pyörittämisestä. Hänen ansiostaan video toistetaan ympyrässä. Ja vaihtoehto Layer Order: Bottom Up hahmontaa kuvittajatasot paneelissa alhaalta ylöspäin. Juuri tällä tavalla rakensimme animaatiomme.
Tuloksena saamme flash-elokuvan animaatiollamme.
Nyt huomaat, että yksinkertaisen animaation tekeminen Adobe Illustratorissa ei ole niin vaikeaa kuin miltä ensi silmäyksellä näyttää.
Mutta pitkien videoiden luomiseen tai interaktiivisia sovelluksia on parempi käyttää Adobe Flash tai muut flash-editorit. Esimerkiksi tein tämän kissan vanhassa Macromedia Flash jonka kaivoin töissä.
Myös 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 eli dacascas varsinkin blogiin
Tilaa uutiskirjeemme, jotta et menetä mitään uutta:
