Perusminikurssin "Animation Fundamentals in Actionscript 3.0" ensimmäisellä oppitunnilla opit:

1. Mikä on animaatio
2. Kuinka saavuttaa liikkeen illuusio kehyksiä käyttämällä
3. Tietoa kehys ruudulta animaation mahdollisuuksista
4. Tietoja ohjelmistoanimaatioiden ominaisuuksista ja eduista

Adobe Flash on pohjimmiltaan eräänlainen animaatiokone. Jo ensimmäisissä versioissaan hän loi sen Tween-konseptilla. Se koostuu seuraavista:

• aikajanalle luodaan kaksi erisisältöistä avainkehystä (objektien sijainnit, niiden muoto, väri jne. muuttuvat);
• Flash luo kaikki väli (siirtymä) kehykset itsenäisesti (kuva 1).

Tältä se näyttää Adobe Flash CS6:ssa.

Mutta tämä oppitunti ja kurssi yleensä eivät koske vain Tweeniä, vaan tehokkaasta kielestä, joka on sisäänrakennettu Flashiin ja jota kutsutaan nimellä ActionScript. Opiskelemalla sitä opit paljon hyödyllistä ja käytännöllistä, erityisesti osioissa, kuten todellisen maailman fysikaalisten ilmiöiden jäljitelmä ja matemaattiset laskelmat. Ilmeisesti tällainen tieto antaa sinulle täydellisen hallinnan vuorovaikutteisten sovellusten luomisessa, mitä et koskaan pystyisi saavuttamaan yksin Tweenillä.

Mutta ennen kuin käsittelemme erityisiä tekniikoita, tekniikoita ja kaavoja, jotka auttavat sinua animoimaan objekteja ActionScriptin avulla, katsotaanpa tarkemmin animaation ideaa, joitain perustekniikoita, kuinka niitä käytetään ja miten se on mielenkiintoisempi, ja mikä tärkeintä, dynaaminen.

Mitä animaatio on?

Mitä animaatio sitten oikein on? Tämän käsitteen määritelmä löytyy monista sanakirjoista. Tässä on esimerkiksi yksi niistä, jonka Wikipedia antaa:

Käännetty arkikielelle animaatio tarkoittaa liikettä. Jos laajennamme tätä määritelmää jonkin verran, voimme sanoa sen animaatio on muutos ajassa. Tämä koskee erityisesti visuaalisia (näkyviä) muutoksia. Liikkeellä tarkoitetaan aseman muutosta ajassa. Yhdessä hetkessä esine oli yhdessä paikassa ja minuuttia myöhemmin toisessa. Teoriassa hän oli myös alun ja lopun välipisteissä ajan edetessä.

Mutta objektin ei tarvitse muuttaa sijaintiaan, jotta se katsottaisiin animoiduksi. Hän voi yksinkertaisesti muuttaa ulkomuotoaan. 1990-luvulla (pelottava sanoa, viime vuosisadalla!) tietokoneohjelmat, jotka tekivät muuntelun, olivat suosittuja.

Sinulla on esimerkiksi kaksi kuvaa: tyttö ja tiikeri. Ohjelma luo sujuvan siirtymän/animaation niiden välillä (morphing).

Tätä flash-videota luotaessa käytettiin Sqirlz Morph 2.1 -ohjelmaa

Morphoinnissa objekti voi myös muuttaa kokoaan tai sijaintiaan. Näin voit esimerkiksi luoda illuusion kasvavasta puusta, pyörivästä pallosta tai esineen värinmuutoksesta.

Animaatioiden yhdistäminen aikaan on tärkeä käsite.

Ilman näkyvää liikettä tai muutosta ei ole animaatiota, eikä siten katsojan ajantajua!

Olet varmaan nähnyt monta kertaa kameran, jossa ei ole liikettä, esimerkiksi tyhjän huoneen tai kaupunkikuvan.

Tällaisessa tilanteessa on vaikea sanoa, mikä on edessäsi: tavallinen valokuva tai videoleike. Katsoessasi huomaat yhtäkkiä pieniä muutoksia kuvassa: lievää liikettä, muutosta valon virtauksessa tai varjossa. Pienetkin muutokset kertovat selvästi, että aika kuluu ja että jos jatkat katsomista, jokin muu voi muuttua. Jos muutosta ei tapahdu seuraavan ajanjakson aikana, sinusta tuntuu taas siltä, ​​että katsot valokuvaa. Siksi ajan puuttuminen kehyksestä tarkoittaa, että kuva pysyy ennallaan.

Kaikki edellä oleva vie meidät erittäin tärkeään johtopäätökseen: animaatio, liike herättävät visuaalista mielenkiintoamme.

Kaikki muistavat Leonardo da Vincin maalauksen "Mona Lisa" - maalauksen mestariteoksen, yhden maailman taidehistorian kuuluisimmista maalauksista.

Voidaan suurella todennäköisyydellä olettaa, että tavallinen ihminen kyllästyy muutaman minuutin tarkastuksen jälkeen ja alkaa hyvin pian etsiä seuraavaa "tutkittavaa" kohdetta. Mutta ala näyttää hänelle uusinta Hollywood-menestysfilmiä, niin hän ei huomaa kuinka pari tuntia kuluu. Siinä on animaation voima!

Kuinka luoda illuusio liikkeestä stop-motion-animaatiossa

Palataan hetkeksi takaisin animaation määritelmään, jonka esittelimme edellä:

Animaatio on tekniikka, jolla luodaan illuusion liikkuvista kuvista (liikkeestä ja/tai kohteen muodon muuttamisesta - morfoinnista) käyttämällä sarjaa still-kuvia (kehyksiä), jotka korvaavat toisensa tietyllä taajuudella.

Tällaisten määritelmien kirjoittajat pakotetaan sisällyttämään niihin sana illuusio. Usein käy niin, että niissä taiteen tai median tyypeissä, joita kohtaamme elämässä, on olemassa vain liikkeen illuusio. Siksi nyt on aika ottaa käyttöön henkilöstökäsite.

Teoriassa käytetään kaikenlaisia ​​visuaalisia animaatioita kehykset - sarja kuvia tai valokuvia, jotka näytetään nopeasti katsojalle liikkeen tai muutoksen simuloimiseksi.

Se, mitä näet tietokoneen näytöllä, TV-ruudulla tai elokuvateatterissa, perustuu kehyksiin. Kaikki alkoi ensimmäisistä animaatiofilmeistä, joissa yksittäisiä kuvia piirrettiin läpinäkyville kalvoille, ja ensimmäisistä elokuvista, joissa samalla tekniikalla esitettiin valokuvasarja.

Konsepti on yksinkertainen: sinulle näytetään peräkkäin kuvasarja, jotka eroavat hieman toisistaan ​​ja aivosi yhdistävät ne yhdeksi liikkuvaksi kuvaksi.

Miksi sitten pitäisi kutsua sitä liikkeen illuusioksi?

Jos näet tytön kävelevän kadulla näyttöruudullasi, eikö se ole liikettä? Tietenkin tämä on vain kuva tytöstä, ei todellinen esine, mutta tämä ei ole tärkein syy, miksi pidämme tällaista liikettä illuusiona.

Muistatko, kun puhuin esineestä, joka jollain hetkellä on yhdessä paikassa ja minuuttia myöhemmin toisessa? Samalla sanoin, että se liikkuu todellisessa avaruudessa. Vain tällaista liikettä voimme kutsua todelliseksi. Objektit liikkuvat avaruudessa sujuvasti, eivätkä äkillisesti, kuten tapahtuu kaiken tyyppisissä kehys ruudulta -animaatioissa. Niissä esine ei liiku paikasta toiseen; hän katoaa ja ilmestyy sitten muualle seuraavassa laukauksessa. Mitä nopeammin hän liikkuu, sitä pidempiä tällaiset hyppyt ovat.

Jos näyttäisin sinulle kuvan tytöstä yhdessä paikassa ja muutaman sekunnin kuluttua toisen kuvan samasta tytöstä, mutta eri paikassa, sanoisit, että nämä olivat kaksi valokuvaa, eivät animaatio.

Jos näyttäisin sinulle muutaman valokuvan hänestä liikkeessä, sanoisit silti, että tämä on vain sarja valokuvia.

Jos näyttäisin sinulle useita valokuvia melko nopeasti, se ei muuttaisi sitä tosiasiaa, että ne ovat edelleen valokuvia, mutta alkaisit havaita ne eri tavalla.

Aivosi alkaisivat nähdä heidät liikkuvana tyttönä. Itse asiassa tällainen esitys ei eroa kahdesta ensimmäisestä valokuvasta, ts. niissä ei ole todellista liikettä, mutta tietyllä hetkellä aivot luovuttavat ja ostavat tämän illuusion. Luonnollisesti tätä vaikutusta on tutkittu erittäin hyvin elokuvateollisuudessa.

Tutkimuksen jälkeen todettiin, että näytön nopeudella 24 fps, katsoja näkee ne yhtenä liikkuvana kuvana. Jos näytät sen hitaammin, kuva alkaa "hyppäämään" ärsyttävästi ja liikkeen illuusio tuhoutuu. Jos kiihdytät 50 kuvaan sekunnissa, tämä ei lisää kuvaan realistisuutta (vaikka ohjelmistoanimaatiossa, kun katsoja on vuorovaikutuksessa kuvan kanssa, vaste on nopeampi ja kohteiden liikkuminen suurilla nopeuksilla on "tasaisempaa" ”).

Kehyskonsepti mahdollistaa kolme asiaa:

• varastointi
• tarttuminen
• ja näytä

Tietenkään et voi tallentaa, siirtää ja sitten näyttää oikeaa tyttöä kävelemässä kadulla, mutta voit tallentaa hänen kuvansa/valokuvansa tai sarjan niistä ja sitten siirtää ja näyttää ne. Tällä tavalla voit toistaa animaatioita melkein milloin tahansa ja missä tahansa, kunhan sinulla on pääsy tallennettuihin valokuviin ja mahdollisuus näyttää niitä.

On aika antaa yleisempi määritelmä kehyksestä. Tähän asti siitä puhuessamme tarkoitimme valokuvaa, kuvaa tai piirustusta. Lasketaan nyt näin: kehys on tallenne järjestelmästä tietyllä hetkellä.

Tämä järjestelmä voisi olla:

• maisemakuva, jonka otit omasta ikkunastasi;
• kokoelma virtuaalisia esineitä (tässä tapauksessa tietue olisi niiden muotoja, kokoja, värejä, paikkoja jne. tietyllä hetkellä. Näin elokuvasi muuttuisi kuvasarjasta sarjaksi tallenteita kuvien kuvaukset Pelkän kuvan näyttämisen sijaan tietokone ottaa sellaisen kuvauksen, luo siitä kuvan ja näyttää sen sitten).
• tiettyjä ohjelmia sisältävät kehykset.

Estä ohjelmointi

Koska tietokone osaa laskea lennossa, voit tehdä ilman pitkää kehyskuvausluetteloa. Voit yksinkertaistaa kaikkea kuvaamalla vain ensimmäistä kehystä ja määrittämällä säännöt kaikkien seuraavien kehysten luomiselle. Nyt tietokone ei vain luo kuvaa kuvauksesta, vaan:

• luo ensin kuvauksen,
• luo sitten kuvan tämän kuvauksen perusteella
• ja lopussa näyttää tämän kuvan.

Kuvittele kuinka paljon tilaa säästät tällä menetelmällä! Kuvat vievät aina kohtuullisen määrän levytilaa ja verkon kaistanleveyttä. Ja 24 kuvaa sekunnissa voi yksinkertaisesti tulla liikaa kestettäväksi. Jos voit tiivistää kaiken yhteen kuvaukseen ja sääntöjen määrittelyyn, sinulla on mahdollisuus pienentää tiedostokokoa satoja kertoja.

90 kertaa 100:sta jopa suurin ohjelma, jossa on säännöt siitä, kuinka objektien tulisi liikkua ja olla vuorovaikutuksessa, vie vähemmän tilaa kuin yksi keskikokoinen kuva. Siksi yksi ensimmäisistä tehosteista, joka huomattiin ohjelmistoanimaatiota tutkittaessa, on sen taloudellinen tiedostokoon suhteen.

Varmasti on vaihtokauppa. Jos järjestelmäsi alkaa kasvaa ja säännöt muuttuvat yhä monimutkaisemmiksi, tietokoneen on käytettävä yhä enemmän resursseja jokaisen seuraavan kohtauksen käsittelyyn ja myös huomattavan paljon aikaa niiden näyttämiseen näytöllä.

Jos yrität säilyttää tietyn kuvanopeuden, se ei joskus jätä prosessorille aikaa (millisekuntia) "sulattaa" kaikkea. Siksi, jos tietokone ei pysty renderöimään kohtausta ajoissa, toiston laatu (kuvataajuus) kärsii. Toisaalta tavallinen kuvapohjainen animaatio ei juurikaan välitä siitä, mitä kohtauksessa on ja kuinka monimutkainen kuva on. Se näyttää vain seuraavan kuvan ajoissa ja se on siinä.

Ohjelmistoanimoinnin edut

Seuraava ohjelmiston animaation etu kehyskohtaiseen animaatioon verrattuna, josta keskustelemme nyt, menee paljon pidemmälle kuin vain tiedostokoko. Se on jo vahvistettu tosiasia ohjelmistoanimaatiota käytetään useimmissa tapauksissa juuri dynaamisena.

Olet luultavasti katsonut elokuvan Terminator 2: Judgment Day. Elokuvan lopussa joka kerta, kun Terminaattori katoaa sulatusuuniin lauseella "I'll be back". Hän tekee sen elokuvateattereissa, televisiossa ja DVD:llä. Edes "Stop"- tai "Pause"-painikkeen painaminen ei voi pysäyttää sitä. Ja se johtuu siitä tavallinen elokuva ei ole muuta kuin kuvasarja. Tämän elokuvan lopussa he (kuvat) näyttävät Terminaattorin katoavan helvetilliseen, ja siinä kaikki he voivat tehdä.

Siirrytään nyt Terminatorista tavalliseen flash-sivustoon. 90-luvun lopulla, kun Flash nousi nopeasti suosioon, vain laiskot eivät halunneet käyttää sen ominaisuuksia verkkosivuillaan:

• liikkuvat, ilmestyvät ja katoavat muodot;
• säestettävä musiikki;
• äkillinen kutsu johonkin;
• esiin nouseva valo- tai varjopiste.

Tuolloin tällaiset asiat olivat uusia, joten halusin huudahtaa: "Col!" Ollakseni rehellinen, kaikki nämä sivustot eivät olleet todella siistejä. Kun katson tänään, mitä näin silloin, voin sanoa, että vain kaksi tai kolme niistä jää todella mieleeni.

Animaation kesto niillä oli enintään minuutti. Tämä riitti vain katsomaan ne kolme kertaa peräkkäin. Olivatko ne huonoja? Ei, vaan huomio heikkeni useiden katselukertojen jälkeen, koska ei ollut muuta katsottavaa, kuten Terminaattorista kertovassa elokuvassa. Ja tässä voimme puhua tietystä paradoksista - tämän tyyppisissä elokuvissa animaatio ei muutu, jokainen ruutu ensimmäisestä viimeiseen on ennalta määrätty.

Palataan ohjelmistoanimaatioon. Sen ei tarvitse olla dynaaminen. Voit luoda kohteen ja paikantaa sen näkymästä koodin avulla ja saada sen sitten liikkumaan sitä pitkin. Tällaisessa tilanteessa joka kerta kun tällainen leike suoritetaan, sama koodi suoritetaan, mikä aiheuttaa saman liikkeen. Ja ilmeisesti tässä ei ole dynamiikkaa.

Entä jos otat saman kohteen ja määrität koodin avulla satunnaisesti tämän kohteen sijainnin, sen liikesuunnan ja nopeuden? Tällaisessa tilanteessa videon käynnistämisen jälkeen joka kerta näemme jotain erilaista kuin edellinen.

Mutta on olemassa kolmaskin vaihtoehto. Määritetäänkö videon käynnistämisen jälkeen kellonaika, kuukausi ja vuosi ja näiden tietojen perusteella rakennetaan kohtaus, esimerkiksi talviaamu, kesäiltapäivä tai syyskuun ilta?

Ja tässä on neljäs. Voiko katsoja elokuvan aikana hiirellä tai näppäimistöllä muuttaa tiettyjä tekijöitä mielensä mukaan? Tämä antaisi hänelle mahdollisuuden olla vuorovaikutuksessa kohtauksen esineiden kanssa. Tällainen elokuva olisi kaukana siitä, mitä olemme tottuneet näkemään, eikö niin? Olisi jopa mahdollista pelastaa Terminator!

Virtuaalitodellisuus

Se on mahdollista Mielenkiintoisin puoli dynaamisessa animaatiossa on todellisen maailman matematiikan ja fysiikan lakien soveltaminen siinä luotuihin objekteihin. Sen lisäksi, että voit saada tällaisen kohteen liikkumaan satunnaiseen suuntaan, voit myös simuloida painovoiman vaikutusta siihen. Tämän seurauksena se alkaa pudota. Kun putoaminen päättyy, hän osuu maahan ja pomppaa, mutta korkeudelle, joka ei ole yhtä suuri kuin se, josta hän alkoi pudota. Lopulta hän lopettaa hyppäämisen ja jää makaamaan "maahan".

Tämän jälkeen voit antaa käyttäjän olla vuorovaikutuksessa sen kanssa:

• "napata" siihen hiirellä
• tai liikuta näppäimistön avulla.

Kun käyttäjä alkaa olla vuorovaikutuksessa sen kanssa tällä tavalla, hänellä on täydellinen tunne, että se on todellinen fyysinen esine.

Voit nähdä tämän itse pelaamalla alla olevalla punaisella pallolla.

Luomalla tällaisen animaation saat käyttäjän tuntemaan, että hän ei vain katso kehysten liikkumista, vaan hän on jossain sinun luomassasi tilassa. Kuinka kauan hän on siellä? Kyllä, niin kauan kuin hän on kiinnostunut. Mitä enemmän annat hänelle vuorovaikutusmahdollisuuksia, sitä kauemmin hän viipyy siellä ja palaa sitten monta kertaa.

Tulokset

Tässä johdantotunnissa keskustelimme:

• animaation perusteet;
• erot kehys ruudulta ja ohjelmaanimaatioiden välillä;
• dynaamisen animaation tärkeimmät edut.

Tämä on käsitteellistä perustietoa, jonka varaan kaikki myöhemmät materiaalit rakennetaan. ilmainen minikurssi "Animoinnin perusteet Actionscript 3.0:ssa"».

Seuraavilla tunneilla aion puhua joistakin työkaluista, joita voit käyttää työssäsi. Kaikkea tällä kurssilla käsiteltävän tiedon ilmeisin käyttötarkoitus on pelien luominen. On selvää, että ne vaativat eniten vuorovaikutusta käyttäjän kanssa, jossa häneltä vaaditaan tiettyjen ongelmien ratkaisemista ja asetettujen tavoitteiden saavuttamista.

Mutta tämän kurssin tietoja voidaan käyttää menestyksekkäästi ammatillisessa työssäsi web-suunnittelijana. Esimerkiksi mielenkiintoisen valikon luominen verkkosivustolle, bannerimainonta tai koulutusjärjestelmän sovelluksia (ohjelmia).

Millainen animaatio kiinnostaa sinua henkilökohtaisesti? Kirjoita siitä jättämällä kommentti alle. Lisäksi, jos sinulla on kysyttävää tämän oppitunnin opiskelun aikana, älä epäröi kysyä, vastaan ​​mielelläni.

Nähdään seuraavalla oppitunnilla!

Ota JavaScript käyttöön nähdäksesi kommentit.

Hei rakkaat lukijat. Hänen artikkelissaan Puhuin nopeuslinjojen käytöstä, joilla voidaan luoda illuusio kiihtyvällä vauhdilla liikkuvasta esineestä. Myös artikkelissa tekniikkaa esiteltiin käyttämällä tavallista liikeanimaatiota ja gradienttitäyttöä objektin ilmaantumisen aikana. Jos et muista tai et ole lukenut näitä artikkeleita, suosittelen lukemaan ne. Tänään haluan jatkaa Adobe Flashin liikeanimaatioiden aihetta ja näyttää ei objektien lineaarista liikettä, kuten aiemmin oli, vaan liikettä liikeradalla.

Ensin osoitan, kuinka tämä tekniikka toimii yksinkertaisella esimerkillä.

Luo uusi kokoinen asiakirja 600 x 200 pikseliä. Nimeä se First_animate. Taustaväri sininen tai mikä tahansa muu. Niille, jotka eivät muista, sinun on ensin luotava uusi Action Script 3.0 -asiakirja. (Tiedosto - Uusi Ctrl + N). Ja sitten ominaisuuspaneelissa (Ctrl + F3) aseta työikkunan koko ja taustaväri.

Nimeä ensimmäinen kerros uudelleen " Esine". Luo siihen soikea ( O). Poistamatta kohteen valintaa. paina näppäintä F8 ja määritä se symboliksi. Nimi objekti1.

Luo toinen kerros " Esine", nimeä se " Liikerata". Piirrä tälle kerrokselle pallon liikerata lyijykynällä.

Napsauta tasoa hiiren kakkospainikkeella " Liikerata" ja valitse" Opas". Vasemmalle ilmestyy vasarakuvake. Vedä nyt kerros "Esine" kerroksen alla" Liikerata", tällä tavalla yhdistät ne toisiinsa.

Nyt palataan työalueelle. Aseta esineemme polun alkuun. Luo tasolle avainkehykset "Esine" ja kerros "Rata" kehyksessä 30. Aseta pallo polun päähän. (Demoversio sisältää kerroksen rautalankanäkymän "Esine").

Napsauta nyt hiiren kakkospainikkeella kerroksen ensimmäistä kehystä " Esine" ja valitse" Luo klassinen liike-tween". Tämän jälkeen voimme testata animaatiotamme ( ctrl + Enter).

Katsotaan nyt, mitä voimme tehdä tällä tiedolla. Annan sinulle toisen yksinkertaisen esimerkin. Oletetaan. että meidän täytyy piirtää leija. joka lentää taivaalla.

Luodaan uusi kokoinen asiakirja 600 x 200 pikseliä. Täytä se kaltevuudella sinisestä keltaiseen. Tätä varten luodaan aivan alussa kerros, jota kutsumme " Tausta", piirrä koko työalueen kokoinen suorakulmio (eli 600 x 200 pikseliä) ja täytä se liukuvärillä. Kirjoitin jo artikkelissa, kuinka liukuvärien kanssa työskennellä.

Napsauta "Lisää - Luo symboli (ctrl + F8)". Aseta nimi leija. Piirrä leija. Tämä ei ole vaikea tehdä, se näyttää rombilta.

Jotta leijamme näyttäisi realistiselta. Määritellään sen liike itse symbolissa leija. Tämä on leija, joka heiluu ylös ja alas ja nauhat kehittyvät. Teemme heilutuksen kustannuksella, kehittämällä nauhoja kustannuksella. Käsitellään ensin nauhoja. Niiden animaatio on samanlainen kuin lomakkeen ääriviivaanimaatio (nauhat muuten piirretään työkalulla Harjata ja sopivat tähän manipulointiin), josta kirjoitin artikkelissa

Laboratoriotyö nro 2

Tiedot

Objektin animointi tarkoittaa, että se muuttaa sujuvasti ominaisuuksiaan. Esineen tilaa kuvaavat sen koko, väri, sijainti avaruudessa, muoto. Kun luot yksinkertaisen animaation objektista Flash-työkaluilla, nämä ominaisuudet muuttuvat. Salamalla voit piirtää litteitä, kaksiulotteisia esineitä.

Animaatiota luotaessa on otettava huomioon myös aika. Aika-asteikkoa käytetään ajan seuraamiseen . Jokainen asteikon solu vastaa yhtä abstraktia aikayksikköä. Tämä ei ole minuutti tai sekunti - nämä ovat kehyksiä. Tämä on ajankohta, joka vastaa tilannekuvaa objektien tilasta.

Jos aika-asteikko ei ole näytöllä, sinun on suoritettava komento W indow → Ti m Eline(Ikkuna → Taidetaulu)

Flashin avulla voit luoda elokuvan piirtämällä jokainen ruutu erikseen, aivan kuten sarjakuvapiirtäjät tekivät vanhaan aikaan. Tämä animaatio on ns kuva kuvalta. On olemassa toinen animaatiotyyppi, jolloin luodaan vain tietyn fragmentin ensimmäinen ja viimeinen kehys, ja ohjelma suorittaa kaikki välikehykset itse. Tämän tyyppistä animaatiota kutsutaan automaattinen (tween animaatio).

Flash tukee seuraavia animaatiotyyppejä:

ü Liikeanimaatiot. Voit käyttää liikesäätimiä asettaaksesi kohteen ominaisuudet, kuten sijainnin ja alfaläpinäkyvyyden, yhdessä kehyksessä ja sitten taas toisessa kehyksessä. Flash interpoloi sitten ominaisuusarvot kehyksille määritettyjen kehysten välillä. Motion Tweens on hyödyllinen, kun animaatio koostuu jatkuvasta liikkeestä tai kohteen muuntamisesta. Motion Tween näkyy aikajanalla jatkuvana kehysalueena, joka voidaan valita oletuksena yhdeksi objektiksi.

ü Klassinen animaatio. Klassinen animaatio on samanlainen kuin motion Tweens, mutta sen luominen on monimutkaisempaa. Klassisen animaation avulla voit luoda animoituja tehosteita, joita ei voida saavuttaa käyttämällä animoituja kehysalueita.

ü Käänteiskinematiikka asentoja. Käänteiskinematiikka-asennot antavat sinun venyttää ja kiertää muotoobjekteja ja yhdistää hahmojen ryhmiä siirtääksesi niitä samanaikaisesti luonnollisen liikkeen aikaansaamiseksi. Voit sijoittaa muotoobjektin tai siihen liittyvät ilmentymät eri tavoin erillisiin kehyksiin, ja Flash interpoloi paikat välikehyksissä.

ü Lomakeanimaatio. Kun animoit muodon, muoto piirretään erilliseen kehykseen aikajanalle ja toiseen kehykseen tätä muotoa muutetaan tai piirretään uusi muoto. Flash sitten interpoloi muodot kahden kehyksen osalta luoden animaation yhdestä muodosta virtaavasta toiseen.

ü Stop-motion-animaatio. Tämän animaatiotekniikan avulla voit määrittää eri objektit kullekin aikajanan kehykselle. Tätä tekniikkaa käytetään tehosteen luomiseen, joka saa vaikutelman siltä, ​​että elokuvan otoksia toistetaan nopeasti. Tämä tekniikka on hyödyllinen luotaessa monimutkaisia ​​animaatioita, joissa kunkin kehyksen graafisten elementtien on oltava erilaisia.

Animaatioiden tunnistaminen aikajanalta

Flash erottaa animaation kehys ruudulta -animaatiosta aikajanalla näyttämällä eri ilmaisimia jokaisessa sisältökehyksessä.

Seuraavat kehyksen sisällön ilmaisimet näkyvät aikajanalla:

ü Sinisellä taustalla varustetut kehykset ilmaisevat liikeanimaatiota. Musta piste ensimmäisessä kehyksessä tarkoittaa, että animaatioalueelle on määritetty kohdeobjekti. Mustat vinoneliöt osoittavat viimeisen kehyksen ja muut ominaisuuden avainkehykset. Ominaisuuden avainkehykset ovat kehyksiä, jotka sisältävät käyttäjän nimenomaisesti määrittämiä muutoksia. Voit valita näytettävien ominaisuuden avainkehysten tyypin napsauttamalla hiiren kakkospainikkeella animaatioaluetta ja valitsemalla pikavalikosta Näytä avainkehykset → Tyyppi. Oletusarvoisesti Flash näyttää kaiken tyyppiset ominaisuuden avainkehykset. Kaikki muut alueen kehykset sisältävät interpoloituja arvoja, jotka liittyvät kohdeobjektin animaatioominaisuuksiin.

ü Vihreällä taustalla varustettujen kehysten valikoima ilmaisee käänteisen kinematiikka (IK) asettelukerroksen käyttöä. Posetasot sisältävät IK-langattomia kehyksiä ja asentoja. Kaikki asennot on merkitty aikajanalle mustilla timanteilla. Salama interpoloi kehysten paikat kehyksissä asentojen välillä.

ü Pisteviiva tarkoittaa, että klassinen Tween on rikki tai epätäydellinen, esimerkiksi viimeinen näppäinkehys puuttuu.

ü Musta piste osoittaa erillisen näppäinkehyksen. Vaaleanharmaiden kehysten sisältö yksittäisen avainkehyksen jälkeen pysyy täsmälleen samana, muuttumattomana. Nämä kehykset sisältävät pystysuoran mustan viivan ja tyhjän suorakulmion alueen viimeisessä kehyksessä.

Esimerkki 1. Objektin liikkeen animointi

1. Piirrä jokin objekti, esimerkiksi suorakulmio, kehyksen nurkkaan.

Aikajanan ensimmäinen kehys on muuttunut - siihen on ilmestynyt paksu musta piste. Tämä on merkki siitä, että kehyksestä on tullut avain. Avainkehyksessä järjestelmä kaappaa kohteen kaikkine ominaisuuksineen. Vain avainkehyksessä voit muokata objektin ominaisuuksia.

2. Napsauta tätä kehystä hiiren kakkospainikkeella ja valitse komento avautuvasta pikavalikosta Luo klassinen Tween.

3. Esineen ympärille ilmestyi sininen kehys, jonka keskellä oli ympyrä ristillä.

4. Piirretty esine on muuttunut ns. symboliksi.

Alku- ja loppuavainkehysten välissä sijaitsevat kehykset näkyvät harmaina. Avainkehysten väliin tulee kiinteä nuoli.

6. Viimeisessä avainkehyksessä (se tulee olla valittuna - korostettu mustalla), käytä valintatyökalua (osoitin) siirtääksesi kohteen uuteen paikkaan, esimerkiksi kehyksen toiseen kulmaan.

Kohteen liikkeen kuvaus on valmis. Meidän on tarkistettava, toimiko kaikki oikein. Poista kohteen valinta napsauttamalla sen rajojen ulkopuolella. Paina Enter-näppäintä - kohde alkaa liikkua.

Muuttaaksesi kohteen liikkeen nopeutta, sinun on siirrettävä viimeistä näppäinkehystä: nopeuttaaksesi liikettä - vasemmalle (vähentää liikkeelle varattua aikaa), hidastaaksesi - oikealle (pidentääksesi aikaväliä liikkeen aikana joita kohteen ominaisuuksissa tapahtuu).

Voit siirtää avainkehystä seuraavasti:

ü valitse taso, jolla objekti sijaitsee;

ü siirrä hiiren osoitin näppäinkehyksen päälle ja pidä Ctrl-näppäintä painettuna (kohdistin muuttuu kaksipäiseksi nuoleksi);

ü Paina hiiren vasenta painiketta ja siirrä kehystä vapauttamatta sitä.

Esimerkki 2: Animoi objektin koon muuttaminen

1. Piirrä objekti, esimerkiksi suorakulmio, ja käytä siihen yllä kuvattuja animaatiosääntöjä:

ü luo animaatio ensimmäisessä avainkehyksessä - Luo Motion Tween;

ü animaation viimeisessä avainkehyksessä – Aseta avainkehys → Zoomaa.

2. Valitse viimeinen avainkehys ja muuta objektin kokoa 1,5 - 2 kertaa Free Transform Tool -työkalulla.

3. Paina Enter-näppäintä.

Esimerkki 3: Animoi objektin värinmuutos

1. Luo uusi tiedosto, piirrä objekti ja sovella siihen klassisen liikkeen animaation luomisen sääntöjä.

2. Kun olet viimeisessä avainkehyksessä, valitse kohde, ts. napsauta sitä hiiren vasemmalla painikkeella valintatyökalun ollessa aktiivinen

Väritehoste-kenttä tulee näkyviin Ominaisuudet-paneeliin.

Esimerkki 4: Objektin läpinäkyvyyden animointi

1. Luo uusi tiedosto, piirrä objekti ja sovella siihen liikeanimaatioiden luomisen sääntöjä.

2. Kun olet viimeisessä avainkehyksessä, valitse objekti.

Väritehoste-kenttä tulee näkyviin Ominaisuudet-paneeliin.

Jos valitset avattavasta luettelosta vaihtoehdon Alfa (Läpinäkyvyys), näkyviin tulee lisäkenttä, jossa voit määrittää läpinäkyvyyden arvon prosentteina (100 % on täysin läpinäkymätön väri, 0 % on täysin läpinäkyvä).

Torstai 9. lokakuuta 2014 13:07 + lainatakseni kirjaa

Monet teistä, jotka työskentelevät flash-asemien parissa, osaavat tehdä klassista liikeanimaatiota. Tämä asettaa kohteen tiettyyn kohtaan ensimmäisessä avainkehyksessä ja siirtää sen sitten toiseen avainpisteeseen. Aikajanalla näiden avainpisteiden väliin luodaan tietty määrä yksinkertaisia ​​välikehyksiä.
Animaatioobjekti liikkuu avainpisteestä toiseen tiukasti suoraviivaisesti.

Kuinka saada animaatioobjekti liikkumaan tiettyä polkua pitkin. Tätä varten tämä liikerata on ensinnäkin tietysti määritettävä. Toiseksi, sido objektimme tähän lentoradalle. Tällaista lentorataa salamassa kutsutaan oppaaksi.

Ja niin, katsotaanpa yksityiskohtaisemmin, kuinka luodaan kohteen liike tietyllä liikeradalla. Elävöimme syksyn lehtiä.
Luodaan tätä varten uusi Flash-dokumentti Action Script 3
Tiedosto - Luo

Luo seuraavaksi päätyökentän aikajanalle (muokkauskehys 1) 2 tasoa
1. Tausta
2. Lehdet
Päätyötilan aikajana (muokkauskehys 1) näyttää tältä.

Tallenna luotu projekti jollain nimellä, esimerkiksi "Falling Leaf"

Tuomme kaikki syksyn taustalla olevat kuvat ja tekoälytiedoston ”Leaf” Ohjelmakirjastoon, jonka voi ladata alla olevasta liitteestä

Liite:

Tiedosto - Tuo - Tuo kirjastoon

Lataamisen jälkeen kirjasto sisältää seuraavat tiedostot

Vedä taustakuva "Nuoli"-työkalulla "Tausta"-kerrokselle päätyökentässä Muokkaa kehystä 1 kirjastosta ja muuta työkentän kokoa kuvan koon mukaiseksi tai muuta kuvan kokoa. kuva työkentän kokoon.

Kun olet napsauttanut "OK" valintaikkunassa uuden symbolin luomiseksi, siirryt "Sheet" -symbolien muokkausikkunaan. Nimeä aikajanan taso 1 uudelleen "animaatioarkkiksi"
Lisää kirjastosta "Nuoli"-työkalun avulla graafinen symboli "Sheet" "Sheet"-symbolin työkenttään.

Napsauta aikajanalla "Animation Sheet" -tasolla kehystä 140 ja avaa kontekstivalikko valitsemalla "Insert Keyframe".

Välikehykset ilmestyivät kehysten 1 ja 140 väliin. Napsauta nyt mitä tahansa kehystä ensimmäisen ja sadanneljäskymmenennen välillä ja valitse näkyviin tulevasta kontekstivalikosta kohta "Luo klassinen liikeanimaatio". Tämän jälkeen tällainen animaatio luodaan automaattisesti.

Emme kosketa työtilaan lisättyä lehtiä toistaiseksi, vaan jatkamme työskentelyä aikajanalla.
Napsauta aikajanalla animaatiomme 140. (viimeinen ja avain) kehystä ja avaa kontekstivalikko valitsemalla myös kohta "Luo klassinen liiketween". Tällä tavalla sisällytämme viimeiset 140 avainkehystä luomaan klassiseen Tweeniin.

Nyt on aika luoda lentorata, jota pitkin "Falling Leaf" -objektimme lentää.
Voit tehdä tämän napsauttamalla "Animaatiotaulukko" -tasoa ja avaamalla pikavalikon valitsemalla "Lisää klassinen animaatioopas".

Tämän jälkeen näemme, että aikajanalle on ilmestynyt uusi kerros - "Opas" ja "Animaatioarkki" -taso on "alisteinen" tälle tasolle.

Nyt "Opas"-tasolle luotu objektin liikerata on opas "Animation Sheet" -kerroksen toimintoon (liikkeeseen), eli kaikkeen "Animaatiossa" luotuun klassiseen liikeanimaatioon. Sheet" -taso esiintyy "Animation Sheet" -tasolla kuvattua lentorataa pitkin. Guide".
"Opas"-taso on työtaso, eikä mitään siihen sijoitettua grafiikkaa näytetä flash-videota julkaistaessa.
Joten luodaan (piirretään) "Opas"-kerrokseen jonkinlainen liikerata syksyn lehtien putoamiseen ylhäältä alas.
Piirrä liikerata käyttämällä "Pencil"-työkalua "Pynä-tilassa anti-aliasing" -tilassa ja valitsemalla "Opas"-kerroksen ja sen ensimmäisen kehyksen, piirrä kaareva viiva vaaditulle liikeradalle.

Kun apuviiva on luotu, siirry "Leaf Animation" -tasolle, valitse ensimmäinen avainkehys ja ala luomaan klassista liikeanimaatiota putoavalle lehdelle. Voit tehdä tämän asettamalla lehti nuolityökalulla piirtämämme lentoradan alkuun. Tässä tapauksessa meidän lehtimme rekisteröintipisteen (meissä tapauksessa rekisteröintipiste on keskellä) täytyy olla!!! sijaitsee ohjauspolun linjalla.

Napsauta samalla uudelleen "Animation Sheet" -kerroksen ensimmäistä kehystä ja varmista, että se on valittuna. Avaa nyt "Ominaisuudet"-välilehti ja etsi sieltä "Animaatio"-osio. Valitse valintaruudut kuvan osoittamalla tavalla.

Napsauta "Leaf Animation" -tasolla 140. (viimeistä) avainkehystä ja aseta nuolityökalulla syksyn lehtimme piirretyn polun loppuun. Tällöin myös lehtigrafiikkaobjektin kohdistuspisteen tulee sijaita liikeradan linjalla.
Tai jos "Ohjaan" napsauttaminen toimii ilman ongelmia, niin kun napsautat animaation viimeistä kehystä, lehti siirtyy automaattisesti oppaan loppuun.

Napsauta sen jälkeen uudelleen kehystä 140 varmistaaksesi, että se on valittu ja avaamalla "Animaatio"-osiossa "Ominaisuudet" -välilehti, valitse myös kuvan osoittamat valintaruudut.

Napsauta uudelleen mitä tahansa "Leaf Animation" -kerroksen kehystä, esimerkiksi kehystä 40, ja varmista, että lehtimme liikkuu tiukasti piirrettyä polkua pitkin.

Jos kaikki on kunnossa, "Falling Leaf" -animaatio annettua lentorataa pitkin on luotu ja voit palata päätyökohtaukseen - editointikehykseen 1.
Kun olet muokkauskehyksessä 1, valitse "lehdet" -taso ja vedä nuolityökalulla "Leaf" -video kirjastosta sen päälle asettamalla se taustakuvan yläosaan.

Käytä "Leaf"-videossa "Shadow"-suodatinta seuraavilla parametreilla. Haluan muistuttaa, että "Suodattimet"-osio löytyy "Ominaisuudet"-välilehdeltä.

Pitämällä Shift+Ctrl-näppäimiä painettuna voit monistaa ”Leaf”-videon ja saada useita putoavia lehtiä. Voit käyttää Free Transform Tool -työkalua muuttaaksesi Leaf-videon kokoa ja kiertääksesi sitä, jotta lehdet eivät putoa täsmälleen samalla tavalla.

Pidämme Ctrl+Enter-näppäimiä painettuna, katsomme tuloksena olevan flash-videon. Jos kaikki sopii sinulle, tallenna flash-asema projektiksi FLA-muodossa
Tiedosto - Tallenna
Flash-videota viedään myöhempää julkaisua varten
Tiedosto - Vie - Vie video

Millainen on sarjakuva, kun ei ole toimintaa? Mitä tulee sarjakuvasta, joka ei kerro tarinaa? Olet luultavasti nähnyt, kuinka studion taiteilijat piirtävät luonnoksia elävästä mallista. Tällaiset tunnit ovat erittäin hyödyllisiä ymmärtämään anatomiaa ja sitä, kuinka lihakset käyttäytyvät liikkeessä. Tällaisen liikkeen välityksen erityispiirteet eivät kuitenkaan anna täydellistä selkeyttä! Se rajoittuu todellisen elämän toistamiseen, ei sen enempää. Animaatiossa liike ja toiminta kuvataan täysin eri tavalla. Siksi tieto kehon piirtämisestä oikein ei riitä. Erityisen tärkeää on hallita tekniikoita, jotka "elvyttävät" muodon. Juuri tästä puhumme tällä kurssilla!

Mikä on tärkeää tietää

Kun taiteilija työstää hahmoa, joka joutuu tiettyyn tilanteeseen, on tärkeää, että hän luo ensin toimintaa. Jokaisen kohtauksen, johon asetat hahmosi, pitäisi auttaa katsojaa näkemään tarkoitus, joka motivoi häntä toimimaan. Katso motiivit, tunteet, taidot (tai niiden puute) ja persoonallisuus kokonaisuutena. Tämä tavoite on saavutettava myös ilman vuoropuhelua. Tässä piirustuksilla on etu: voimme leikkiä kehonkielellä ja puhaltaa tunteita äärimmilleen. Sinun ei tarvitse jakaa rahaa näyttelijöihin, studioon tai muihin kuluihin. Paperia ja kynää riittää. Mielikuvituksella ei ole rajaa!

Saavuttaaksesi nämä tulokset animaatiossa, sinun on pyrittävä kahteen asiaan:

• Yksinkertaisuus;
• Rytmi.

Vähitellen ymmärrämme, mikä rooli kullakin on maalatun kohtauksen koostumuksessa.

1. Liikekäyrä

"Liikekäyrä" on kuvitteellinen polku, jota pitkin hahmosi keho liikkuu. Sille on ominaista yksinkertaisuus ja intensiivisyys. Tämä loistava tekniikka auttaa sinua saavuttamaan haluamasi tavoitteen piirustuksia suunnitellessasi. Sen avulla voit luoda dramaattisen vaikutelman. Pidä tämä mielessä, kun seuraavan kerran luonnostelet hahmoja toiminnassa.

Liikekäyrän tulee olla tasainen ja suunnattu niin, että meille on selvää, mitä kukin hahmo aikoo tehdä.

Huomaa, kuinka oudolta muotoilu näyttää monimutkaisten liikekäyrien perusteella.

Esimerkki liikekäyrän virheellisestä käytöstä on tapaus, jossa viiva ei sovi kontekstiin halutulla tavalla.

Sarjakuvassa näemme täydellisen esimerkin yksinkertaisuudesta ja rytmistä. Liikekäyrä antaa taiteilijalle mahdollisuuden tehostaa kohtaustensa tehoa. Harkitse käyrää ennen kuin alat piirtää hahmojen mittasuhteita. Vakuutan teille, että lopullinen piirustus liikkeellä on enemmän kuin tyydyttävä.

Ymmärtääksemme tarkalleen, mitkä tekniikat ja menetelmät auttavat hengittämään elämää sarjakuvahahmoille, meidän on tutustuttava teoreettisiin periaatteisiin, joihin nämä tekniikat perustuvat.

2. 12 animaation perusperiaatetta

Vuonna 1981 kaksi Disneyn suurimmista animaattoreista (Frank Thomas ja Ollie Johnson) kirjoitti kirjan The Illusion of Life. He esittelivät yleisölle "12 animaation peruskäsitettä", joita studio on käyttänyt 1930-luvulta lähtien yrittäessään luoda mahdollisimman realistista animaatiota. Vaikka nämä konseptit kehitettiin käytettäväksi perinteisessä animaatiossa, ne pysyvät samoina nykyään - jopa digitaalisissa projekteissa.

Peruskäsitteet ovat seuraavat:

• Squash ja venytä
• Valmistautuminen tai ennakointi (Ennakointi)
• Lavastus
• Suoraan eteenpäin toimintaa ja poseeraa poseeraamaan
• Inertia ja päällekkäinen toiminta
• Hidasta sisään ja hidasta
• Kaari
• Toissijainen toiminta
• Ajoitus
• Liioittelu
• Lopullinen piirustus (kiinteä piirustus)
• Vetovoima (valitus)

Tavoitteeni ei ole hukuttaa sinua kaikilla animaatiotekniikoilla, joten keskitytään tärkeimpiin ja yritetään ymmärtää, kuinka ne voivat elävöittää "tylsää" suunnittelua.

Puristus ja venyttely

Tämä on tärkein, ellei tärkein tekniikka, jota meidän on käytettävä luodessamme hahmon liikedynamiikkaa. Koko konsepti perustuu hahmon tai esineen mittasuhteiden puristamiseen ja venyttämiseen liikkeen mukaan. Tämän tekniikan avulla voimme lisätä painoa ja sujuvuutta liikkeeseen. Katso, kuinka sitä sovelletaan objektiin:

Huomaa pomppivan pallon fysiikka: kun se kiihtyy alaspäin, sen muoto venyy. Kun pallo osuu maahan, se venytetään vaakasuoraan (mikä korostaa painovoiman vetovoimaa).

Yllä oleva esimerkki havainnollistaa tätä tekniikkaa täydellisesti. On epätodennäköistä, että tosielämässä näet pallon pomppiessaan tällä tavalla muotoaan, mutta animaatiossa se toimii loistavasti!

Esimerkki tämän tekniikan soveltamisesta kasvojen ilmeisiin: Huomaa, että kallon yläosan muoto ei muutu ja vain alaleuka ulottuu alaspäin.


Samaa tekniikkaa sovelletaan toimintaan. Näet heti, että hahmolla on raskas kuorma. Huomaa, että koko vartalon alaosa on puristettu, kun taas yläpuoli venytetään.

Hämmästyttävää, eikö? Tämä tekniikka vie meidät seuraavaan aiheeseen:

Liioittelu

Tässä ei ole paljon sanottavaa, koska periaate on itsestään selvä. Liioitellut eleet ja kehon asennot luovat dramaattisen vaikutelman - tämä on animaation pakollinen sääntö. Kuvittele, mitä tapahtuu, kun olemme yllättyneitä tai peloissamme - kehomme reagoi spontaanisti yllätyksestä. Saman pitäisi tapahtua sarjakuvapiirroksen kanssa, mutta paljon selvemmällä tuloksella!

Huomaa, kuinka hahmon silmät ponnahtavat ulos kuopastaan ​​ja hänen ruumiinsa näyttää jäätyneeltä. Tämä on liioiteltu esitys luonnollisesta reaktiosta, joka voidaan havaita elämässä.

Disney-studion sääntöjen mukaan tämän tekniikan on heijastettava elämää uskottavalla tavalla, mutta äärimmäisemmässä muodossa. Liioittelemiseen liittyy muutoksia hahmon fyysisissa ominaisuuksissa tai kohtauksen elementissä, jossa ne esiintyvät. Muista kuitenkin, että sinun on ymmärrettävä selvästi, millaista liikettä kuvaat tällä tekniikalla, jotta et johda katsojaa harhaan.

Liioittelua: Kiinnitä huomiota hahmon liikeradoihin. Ne auttavat korostamaan voiman kohdistamista, joilla hän yrittää nostaa kuormaa. Tämä vakuuttaa katsojan ehdottomasti siitä, että pallo on erittäin painava!

Valmistautuminen tai ennakointi

Valmistautuminen tai ennakointi on tekniikka, jota käytetään valmistamaan katsoja tapahtumaan, joka on tapahtumassa. Sitä käytetään valmistelemaan liikettä tai esineen, hahmon jne. esiintymistä, niin sanottua alustavaa energiasarjaa, joka usein edeltää huippukohtaa.

Klassinen esimerkki valmistautumisesta: hahmo on juoksemassa ja poistumassa lavalta!

Teoreettisesti valmistautuminen syntyy välittömästä liikkeestä, jota samanaikaisesti vastustaa liike vastakkaiseen suuntaan. Animaatiossa tämä tarkoittaa suurimmaksi osaksi valmistautumista varsinaiseen toimintaan ja paluuta syklin loppuun saattamiseen.

Huomaa, kuinka lisäämme toimintaa yllä olevaan animaatioon: alussa on lyhyt liikkeen ennakointi, joka toimii sitten liikkeelle sysäyksenä. Sitten tarkkailemme, kuinka keho palaa liikkeestä lepotilaan.

Setup on animaatiossa käytetty tekniikka, joka saa katsojan odottamaan kohtauksen tuottamaa vaikutusta - olipa se sitten staattista tai animoitua. Yritä harjoituksena löytää muita esimerkkejä, joissa tätä tekniikkaa käytetään.

Kohdistus ja painotus

Animaatiossa kutsumme "kohdistaminen" sitä edeltävä vaikutus "aksentti". Molemmat ovat välttämättömiä, jotta yllätyksen ilmaisu erottuu. Ne suoritetaan seuraavan algoritmin mukaan:

• Hahmo näkee jotain hämmästyttävää;
• Ennakointi syntyy (pää putoaa nopeasti);
• "Korostuksen" hetki tapahtuu, pää nousee ylös.
• Hahmo palaa alkuperäiseen tilaansa.

Katsotaan kuinka tämä algoritmi toimii.

Vaihe 1

Aloitamme piirtämällä hahmon, jolla on iloinen tai luonnollinen ilme:

Vaihe 2

Hahmo näkee jotain hämmästyttävää ja hetkeä ennakoiden laskee päänsä alas ja sulkee silmänsä. Tämä liike lisää vaikutelmaa, että hän näkee jotain uskomatonta!

Vaihe 3

Vaihe 4

Hahmo rauhoittuu ja palaa alkuperäiseen tilaan.

Tämän prosessin aikana animaattorit käyttävät tekniikkaa nimeltä ajoitus kohtaus, jossa välivaiheita lisätään tasaisen siirtymisen luomiseksi kehysten välillä.

Tässä näemme "purista ja venytä" -tekniikan käytön, joka lisää liikkuvuutta ja vauhtia liikkeelle. Tosielämässä kallomme ainoa liikkuva osa on alaleuka, joka avautuu ja sulkeutuu. Mutta animaatiossa kaikki voi venyä - jopa pää!

Palataan "ajoitukseen" hieman myöhemmin.

Hidas sisääntulo ja hidas poistuminen

On aivan luonnollista, että kun valmistaudumme tekemään äkillistä liikettä tai suorittamaan mitä tahansa vaivaa vaativaa toimintaa, kehomme tarvitsee tietyn ajan keskittyäkseen tähän toimintaan tarvittavan energian. Tuloksena on hetkellinen kiihtyvyys (tai jatkuvasti tasainen liikkeestä riippuen). Tämä saa animoidun hahmon näyttämään uskottavalta, ja avainkehysten ja -vaiheiden määrä vaihtelee taajuuden mukaan - liioiteltu kuva siitä, mitä tosielämässä tapahtuu.

Kun haluamme korostaa tiettyä liikettä animaatiossa, sijoitamme enemmän kehyksiä kyseisen liikkeen alkuun ja loppuun - mutta myös vähemmän vaiheita niiden väliin. Tämä luo hitaan sisääntulon ja hitaan poistumisen. Tätä periaatetta käytetään laajalti animaatiossa, kun haluamme piirtää hahmon liikkeen kaukaisten kehon asentojen välillä - esimerkiksi hyppäämällä ylös.

Neuvoja: Jos olet web-suunnittelija ja työskentelet siirtymien kanssa luodaksesi animaatioita verkkosivuston sivuille, olet todennäköisesti törmännyt käsitteeseen "ajoitus", johon toimintoa käytetään Siirtyminen CSS3:ssa. Tämä ominaisuus käyttää Smooth In ja Smooth Out, muiden parametrien ohella, kuvaamaan nopeuskäyrää animaatiossa. Samoin, jos työskentelet After Effectsissä, huomaat sen todennäköisesti valikossa Keyframe Assistant komennot "Smoothly smoothly", "Smooth entry" ja "Smooth exit". Jossain tapauksessa, jos olet käyttänyt näitä vaihtoehtoja, se tarkoittaa, että käytät jo kuuluisaa animaatioperiaatetta projekteissasi!

Vetovoima

Vetovoimaa voidaan kuvata sanoilla "karismaattinen" tai "persoonallinen vetovoima", jotka taiteilija varustaa hahmoillaan. Ei ole väliä onko hahmo positiivinen vai negatiivinen, sankari vai konna, mies vai nainen - tärkeintä on, että katsoja voi samaistua heihin. Fyysiset ominaisuudet vaikuttavat myös hahmon käyttäytymiseen ja persoonallisuuteen. Siksi, kun hahmo tekee toiminnan tai ilmaisee asenteensa johonkin, meidän on tärkeää pohtia, kuinka hänen fyysiset, sosiaaliset tai kulttuuriset ominaisuudet sopivat yhteen tämän käyttäytymisen/asenteen kanssa.

Katso, kuinka yllä oleva piirros heijastaa kunkin hahmon vetovoimaa. Tiettyjen piirteiden korostamiseen riittävät pienet yksityiskohdat, esimerkiksi naisen siluetti tai hovimestarin pitkänomainen kasvot ja jännittynyt, mutta aina tyylikäs asento. Tärkeintä tässä on ymmärtää kunkin ominaisuuden luonne, kun lisäät ne kohtauksiin.

Tarkkaile, mitä liikkeitä ja toimia kukin hahmo tekee paljastaakseen itsensä katsojalle. Käyttäytyvätkö he kuin aistillinen nainen? Miten varas voi? Kuten huijari? Miten hovimestari voi? Miten tarjoilija voi? Miten stylisti voi? Mikä erityisiä Mitkä piirteet erottavat tämän hahmon? Mitä vaatteita heillä on yllään? Meidän on jatkuvasti tarkkailtava ihmisten käyttäytymisen vivahteita tosielämässä, jotta voimme käyttää näitä yksityiskohtia hyödyksemme.

Käydään nopeasti läpi jokainen jäljellä olevista periaatteista yleiskäsityksen saavuttamiseksi:

Lavastus

Lavastus on luotu ohjaamaan yleisön huomio kehyksen tärkeään osaan. Tuotannossa voidaan käyttää lisäskenaarioita tai -objekteja. Pohjimmiltaan tämä tekniikka on välttämätön, jotta huomio kiinnitetään tärkeimpään ja poistetaan kaikki merkityksettömät yksityiskohdat. Tätä käsitettä käytetään paljon sarjakuvissa. Väriä, valoa ja kamerakulmaa käytetään keskittämään katsojan huomio tärkeimpiin yksityiskohtiin.

Lisäsin auton runkoon korostaakseni tapahtuman merkitystä. Nyt meillä on selkeä konteksti ja kaikki tulee selväksi!

Toiminnan kautta ja asennosta poseeraukseen

"Action-through" tarkoittaa yksityiskohtaista kuvakäsikirjoitusta animaatiokohtauksesta alusta loppuun. "Pose to pose" tarkoittaa vain avainkehysten piirtämistä, joiden välisiä aukkoja täydennetään myöhemmin vaiheilla. Mielenkiintoista on, että ensimmäistä tekniikkaa käytetään vain 2D-animaatiossa. Mutta Pose to Pose -tekniikkaa käytetään edelleen elokuvien kuvakäsikirjoituksessa ja 3D-animaatiossa.

Inertia ja päällekkäisyys

Inertialla tarkoitetaan hahmon yksittäisten kehon osien liikkeen jatkumista koko kehon liikkeestä johtuen. Esimerkiksi jotkut kehon osat jatkavat liikkumista huolimatta siitä, että hahmo on yhtäkkiä pysähtynyt. "Päällekkäisyys" on tekniikka, jonka ansiosta jotkut kehon osat liikkuvat tietyllä viiveellä pääosasta. Esimerkiksi vartalo, raajat tai hiukset liikkuvat eri aikavälillä kuin pää. Yhdistämällä nämä kaksi tekniikkaa voit luoda realistisempia animaatioita.

Huomaa kuinka hiukset ja T-paita liikkuvat eri nopeuksilla liikettä seuraten.

Kaari

Kun hahmon liike seuraa tiettyä polkua, kutsumme sitä "kaareksi". Kuvittele orkesterin kapellimestarin käsien sykliset liikkeet tai pikaluistelijan tai korkeushypyn suorittavan olympiaurheilijan liikesarja. Jokainen niistä tekee monia liikkeitä, jotka sulautuvat sulavien peräkkäisten elementtien ketjuun. Jos jossain vaiheessa katkaiset tämän ketjun ja pakotat hahmosi tekemään jotain, mikä ei sovi siihen, animaatiosi näyttää oudolta.

Taustatoiminto

Taustatoiminto lisätään kehyksen päätoimintoon parantamaan tehostetta, jonka haluat luoda. Kuvittele hahmo kävelemässä kadulla eikä kiinnitä huomiota siihen, mitä ympärillään tapahtuu. Samaan aikaan autot kiihtyvät hänen ohitseen korostaakseen vaaraa. Tai kuvittele epäilyttävä ilme köydenkävelijan kasvoilla. Nämä ovat esimerkkejä kehyksen taustatoimista, jotka korostavat sen merkitystä.

Ajoitus

"Ajoitus" tarkoittaa tietyn toiminnon muodostavien piirustusten lukumäärän laskemista. Esimerkiksi hitaasti tai vaikeasti liikkuva esine tai hahmo on yleensä raskas hahmo. Ajoitus sanelee ruutujen ja vaiheiden määrän, jotka sinun on piirrettävä, jotta kohtaus välittyy uskottavalla tavalla. Sinun on tehtävä sama piirtääksesi vaalean kohteen.

Ajoitus on erittäin tärkeä käsite animaatiossa, ja sitä käytetään laajasti hahmojen ja heidän toimiensa luomiseen.

Lopullinen renderöinti

Lopullinen piirustus viittaa paperilla olevien piirustusten tarkkuuteen. Piirustuksissa on oltava painoa ja tilavuutta, jotta ne voidaan nähdä ja tulkita oikein. Samanaikaisesti emme puhu yksityiskohtaisesta piirroksesta tehdäksemme piirustuksesta realistisen. Puhumme siitä, kuinka esität teoreettisen tietosi piirtämisestä yleisölle. Muotoilun perusteet hallinnut taiteilija osaa luoda piirustuksiinsa illuusion volyymista, jopa 2D-luonnoksessa. Tämä on todenperäisyyden illuusion taidetta.

Jotkin animaatiotyylit vaativat äärimmäistä realismia esineiden, vaatteiden ja muiden esineiden kuvauksessa, jotta kohtaus voidaan esittää katsojalle. Tämä voi olla esimerkiksi tietty historiallinen ajanjakso, joka on kuvattava pienintä yksityiskohtaa myöten. Tästä syystä piirtämisen ja ihmisen anatomian teoreettisten ja käytännön perusteiden tuntemus on korvaamaton.

Tuts+ -alustalla on useita eri kirjoittajien kirjoittamia artikkeleita ja kursseja, jotka auttavat sinua syventymään piirtämisen perusteisiin. Siellä voit käydä läpi erilaisia ​​piirustustyylejä ja tulla täydelliseksi taiteilijaksi.

3. Peräkkäiset liikkeet ja kävelysyklit

Warner Brosin animaattori Ken Harrisin mukaan "kävely on ensimmäinen asia, joka opitaan." Animaatiossa vaikein tehtävä on oppia saamaan sarjakuvahahmo kävelemään juuri haluamallasi tavalla. On olemassa useita tapoja, ja ne vaihtelevat kohtauksen koon, monimutkaisuuden, kontekstin ja intensiteetin mukaan.

Kummallista kyllä, kävely ei ole muuta kuin yritys tukea itseäsi pystyasennossa. Toisin sanoen yritämme välttää putoamista maahan! Kuvittele vauvaa, joka yrittää seistä pystyssä... nojautumalla eteenpäin, hän voi ottaa refleksiivisen askeleen.

Aikuiset kävelevät luottavaisesti eivätkä yleensä ota äkillisiä askelia. Itse asiassa nostamme tuskin jalkojamme maasta. Liikkeemme pidetään välttämättömänä, päätavoitteena on siirtää kehoa eteenpäin.

Animaatiossa kaikki on toisin. Hahmon kävely voi kertoa koko tarinan. Siksi käytämme liioittelua ja ajoitusta halutun tuloksen saavuttamiseksi.

Analysoidaan yksinkertaistettua prosessia alla olevassa kuvassa:

Esimerkki yksinkertaisesta kävelysyklistä: vartalo nousee hieman ylöspäin siirtovaiheet.

Huomaa, että kädet liikkuvat vastapäätä jalkoja; ja kun vartalo nousee swing-vaiheessa, toinen jalka on suorassa.

Nyt täytämme aukot lisävaiheilla ja suoritamme animaation pääkävelysyklin:

Erilaisia ​​kävelyä ja juoksua

Kuten mainitsin, animaatiossa (ja elämässä) on erilaisia ​​kävelyretkiä, joiden avulla voidaan välittää hahmojen haluttuja tunteita ja toiveita. Eri mallit kertovat tämän:

Kuuluisia animaatiomalleja: Nämä luotiin Preston Blairin kirjan Cartoon Animation perusteella. Olen varma, että tunnet nämä kuvat eri sarjakuvista.

Esimerkki kävely askel: Vartalo liikkuu ylös ja alas koko ajan.

Erot nelijalkaisten eläinten kävelyssä

Nelijalkaisten eläinten liikkuminen on monimutkaisempi aihe, koska sinun on seurattava etu- ja takajalkojen liikettä. Liikkumisen sujuvuus vaikeuttaa työtäsi, mutta tosielämän liikkeistä kannattaa ottaa opiksi.

Sarjakuvaeläimen kävely on yksinkertaistettu tulkinta siitä, mitä todellisessa eläinmaailmassa tapahtuu. Lihakset ja nivelet ovat eri asemissa kehon liikkeen vaiheesta riippuen:

Katso ylhäältä, kuinka etu- ja takajalat käyttäytyvät siirtovaiheet runko: pää laskee hieman takajalan liikkuessa eteenpäin. Päinvastoin tapahtuu etutassun heilahtelun aikana.

Animaatioissa on muitakin eläinten askeleita, jotka seuraavat omaa rytmiään. Katsotaanpa kahta niistä alla:

Harjoittele. Yritä löytää liikeradat yllä olevista kuvista. Huomaa myös, että laukka on loistava esimerkki puristuksen ja venytyksen käytöstä.

Esimerkki animoidusta laukkaasta. Etutassut käynnistävät liikkeen ja antavat tarvittavan impulssin.

Kävely- tai juoksusyklin realistinen renderöinti riippuu useista tekijöistä, kuten painosta, pituudesta, tarkoituksesta... Tärkeintä tässä on tarkkailla näitä liikkeitä tosielämän esimerkkien perusteella.

Piirtäminen kävely ja juoksu on melko monimutkainen aihe, joka ansaitsee erillisen vain sille omistetun kurssin. Joillakin eläimillä, kuten hevosilla, on eroja anatomiassa, minkä vuoksi niiden jalat liikkuvat eri tavalla. Tsekkaa minun "Korkaeläimet" -osio, siellä on lisätietoja. Jos haluat syventää hevosen liikkeitä, tutustu tähän Monika Zagrobelnayan kirjaan.

Laittamalla kaikki yhteen

Ennen kuin päätämme, olen luonut animaatiosarjan, joka yhdistää esimerkkejä useista edellä käsitellyistä tekniikoista. Osaatko sanoa kumpi on käytössä?

Loppu!

Perinteisen animaation roolista 2000-luvun taiteessa keskustellaan nykyään aktiivisesti. Nykyaikaiset animaatiostudiot, kuten Pixar tai Dreamworks, käyttävät edelleen vähintään 90 % yllä kuvatuista tekniikoista. Kyky herättää piirustus eloon - olipa se sitten pin-up-kuvia, sarjakuvia tai animaatioita - on kaunis asia. Jos saamme lapsen uskomaan, että eläin voi puhua ja käyttäytyä kuin ihminen, se on hämmästyttävää. Kun katsojan tunteet heräävät, ei sanat voi ilmaista tunteita, joita taiteilija kokee sillä hetkellä.

Carlos Gomes Cabral

Olen tuote 80-luvun hulluudesta ja asun Rio de Janeirossa (Brasilia). Olen pitänyt taiteista, sarjakuvista ja musiikista lapsesta asti, omistauduin useisiin projekteihin samanaikaisesti ja inhoan paikallaan istumista. IT-alan kandidaatin tutkinnon jälkeen työskentelen tällä hetkellä teknologian liikkuvuusyrityksessä Olen myös rakastunut liikegrafiikkaan, HTML5:een, web-suunnitteluun ja UX-trendeihin. Löydät minut Twitteristä (@cgcabral).