Osnove animacije: Kako narisati gibanje in akcijo. Načini ustvarjanja gibanja v Flashu

Lekcija 4. Ustvarjanje animacije

Macromedia Flash MX 2004 ponuja več načinov za ustvarjanje animacijskih sekvenc:

Učinki animacije - program sam ustvari zaporedje okvirjev, ki simulira določen učinek glede na določen predmet;

Animacija okvir za okvirjem - uporabnik ustvari vsak okvir prihodnje animacije;

Samodejna tweened animacija ali transformacijska animacija - uporabnik določi začetni in končni okvir, program pa sam ustvari vmesne okvirje na podlagi programske interpolacije.

Učinki animacije

Flash MX 2004 vključuje vnaprej izdelane animacijske učinke (učinke časovne premice), ki vam omogočajo ustvarjanje kompleksnih animacij z minimalna količina dejanja. Uporabite lahko funkcijo Učinki časovnice na naslednje objekte:

Grafični predmeti, vključno z oblikami, združenimi predmeti in grafičnimi simboli;

Rasterske slike;

Ko predmetu dodate animacijske učinke, Flash samodejno ustvari ustrezno plast in vse transformacije gibanja in oblike, potrebne za ta učinek, so implementirane v tej plasti. Nova plast samodejno dobi isto ime kot učinek.

Na primer, ustvarimo učinek "eksplozije" na besedilu. To storite tako, da vnesete frazo ali besedo (slika 1), jo izberete s puščičnim orodjem in izvedete ukaz Vstavi => Učinki časovne osi => Učinki => Eksplodirajo.

riž. 1. Izbrani besedilni predmet

Posledično se prikaže plošča z istim imenom (slika 2), ki omogoča konfiguracijo številnih parametrov učinka.

riž. 2. Eksplozivna plošča

Prisotnost okna za predogled vam omogoča analizo različnih različic učinkov, ne da bi zapustili ploščo Eksplodirati. Ko izberete zahtevane možnosti, kliknite gumb OK in dobili boste nekaj podobnega tej animaciji.

Podobne učinke je mogoče uporabiti za rastrsko sliko. Oglejmo si primer z gladkim izginotjem rastrske slike. Uvoz bitne slike v sceno z uporabo ukaza File => Import => Import to stage(slika 3) in na ukaz uporabite učinek zameglitve Vstavi => Učinki časovne osi => Učinki => Zameglitev video posnetek.

riž. 3. Bitna slika, uvožena v sceno

Če želite urediti učinek animacije, na odru izberite predmet, povezan z učinkom, in v oknu, ki se prikaže Lastnosti kliknite gumb Uredi(Slika 4) - kot rezultat se prikaže plošča Zameglitev.

riž. 4. Gumb Uredi ki se nahaja na dnu plošče Lastnosti

V plošči Zameglitev lahko znova spremenite parametre učinka in shranite nove nastavitve (slika 5).

riž. 5. Plošča Zameglitev omogoča spreminjanje nastavitev učinkov

Stop motion animacija

Razmislimo najpreprostejši primer- kos papirja se premika od ene točke na zaslonu do druge z vrtenjem okoli svoje osi.

riž. 6. Prva ključna sličica animacije

Narišimo na primer javorjev list, kot je prikazano na sl. 6, - ustrezen okvir na plošči Časovnica bo postal siv in v njem se bo pojavila pika, kar pomeni, da je to ključni okvir. Ključni okvir je okvir, v katerega je postavljena ali spremenjena vsebina.

riž. 7. Ustvarite drugi okvir tako, da povlečete in preoblikujete prvega

Nato z desno miškino tipko kliknite sosednji okvir in z ukazom vstavite drug ključni okvir Vstavi ključni okvir. Posledično se bo v tem okvirju pojavila kopija lista; premaknite navzdol (z orodjem puščica) in zavrtite z ukazom Modify => Transform => Free Transform(slika 7).

Postopek ponovimo tako, da v 6. okvirju list zavzame končno pozicijo (slika 8).

riž. 8. Zadnji okvir animacije

Bodite pozorni na ploščo Lastnosti(Slika 8) - tip predmeta je označen na levi strani. V vsakem okvirju je list predmet vrste oblika(obrazec), o drugih vrstah predmetov bomo govorili nekoliko kasneje.

Če želite izvoziti film kot datoteko SEF (izvorni format Macromedia za filme Flash), zaženite ukaz Datoteka => Izvozi => Izvozi film. Kot rezultat dobimo naslednji film leave1.fla). Nastali film si lahko ogledate, ne da bi zapustili program Flash z ukazom Control => Test Movie

. Poleg tega, če želite videti, koliko prostora zasedajo posamezne sličice filma, morate zagnati ukaz. Posledično bomo videli, da vsak od šestih okvirjev zaseda približno 600 KB (slika 9). Tako je velikost celotnega filma 3686 bajtov. riž. 9. Gledanje filma v

Profiler pasovne širine

Če želite oceniti, ali je to veliko ali malo, razmislite, kako je mogoče narediti podoben film z avtomatsko animacijo ali animacijo transformacije gibanja.

riž. 10. Objekt se samodejno spremeni v grafični simbol

Poglejmo, kako lahko naredite isto animacijo in dobite bolj kompaktno končno datoteko. Z orodjem Arrow izberite narisan list na zaslonu in izvedite ukaz Vstavi => Časovnica => Ustvari Motion Tween, posledično bo letak postavljen v okvir in v ploščo Lastnosti prikaže se sporočilo, da ima izbrani predmet lastnosti Grafični(slika 10). To pomeni, da se animirani objekt samodejno pretvori v grafični simbol. Zdaj ga ni več mogoče poljubno urejati z orodjem Arrow kot objekt tipa Shape. Uporaba simbolov je pomemben koncept v Flashu. Ko je simbol ustvarjen, ga je mogoče večkrat uporabiti v filmu, ne da bi povečali velikost nastale datoteke. Simboli so razdeljeni na grafične simbole, simbole gumbov in simbole filmskih posnetkov. IN to lekcijo

Oglejmo si grafični simbol in se pozneje vrnimo k drugim vrstam simbolov. Vsak nov simbol takoj postane del knjižnice trenutnega dokumenta (slika 11).

riž. 11. Vsak nov simbol postane del knjižnice Če zaženete ukaz Okno => Knjižnica , potem se lahko prepričate, da se je simbol pojavil v knjižnici in mu je privzeto dodeljeno ime Tween 1. Če želite simbolu dodeliti drugo ime, dvokliknite ime in ga zamenjajte z želenim. Ko smo oblikovali grafični simbol, pojdimo na zadnji okvir naše animacije (naj bo to 15. okvir) in vstavimo ključni okvir (z ukazom Insert Ključni okvir ). V tem okvirju se bo pojavila kopija simbola, ki jo bomo premikali in vrteli okoli svoje osi (z ukazom Modify Transform=>Free Transform ), kot v prejšnjem primeru. Kot je razvidno iz sl. 12 so vsi okvirji med dvema ključnima okvirjema obarvani modro in puščica se razteza od prvega ključnega okvira do zadnjega, kar označuje ustvarjanje animacije.

Motion Tween ), kot v prejšnjem primeru. Kot je razvidno iz sl. 12 so vsi okvirji med dvema ključnima okvirjema obarvani modro in puščica se razteza od prvega ključnega okvira do zadnjega, kar označuje ustvarjanje animacije

riž. 12. Puščica na modrem ozadju označuje ustvarjanje animacije Z izvedbo ukaza Control => Test Movie

, dobimo informacije, predstavljene na sl. 13.

riž. 13. Gledanje filma v načinu Bandwidth Profiler

Za ponazoritev padanja ponjave z rotacijo okoli ravnine ponjave ponovimo prejšnji primer, le pri spreminjanju zadnjega ključnega okvirja dodamo ukaz Modify => Transform => Flip Vodoravno.

Kot rezultat dobimo naslednji film. Zdaj pa poglejmo primer, ko se list približa gledalcu. Če želite to narediti, v končnem okvirju namesto zrcaljenja ( Obrni vodoravno ) bomo povečali velikost lista. Da bi se izognili občutku upočasnitve, ko se predmet približuje gledalcu, je treba povečati hitrost njegovega gibanja. Če želite doseči ta učinek, morate klikniti na prvi okvir in se obrniti na razdelek Enostavnost Lastnosti v plošči

.

Pozitivne vrednosti za parameter Ease povzročijo upočasnitev gibanja, medtem ko negativne vrednosti povzročijo pospešitev gibanja. Izberimo največji pospešek predmeta. riž. 14. Izberite največji pospešek predmeta Ease = –100Če želite to narediti, nastavite vrednost parametra

Enostavnost

enako –100 (slika 14). Rezultat je film. Upoštevajte, da lahko prvi okvir postavite tudi za oder, takrat bomo dobili film, v katerem bo list priletel v okvir in se pomaknil proti gledalcu. Lahko simulirate vrtenje lista okoli premaknjenega središča simetrije. Upam, da bo bralec sam lahko eksperimentiral, s čimer bo težje spreminjal končni okvir in s tem spremenil naravo gibanja lista.

Iz predstavljenih primerov je razvidno, da je avtomatska animacija gibanja učinkovita, ko je transformacija predmeta med njegovim premikanjem podana s preprostimi funkcijami (rotacija, skaliranje itd.). Če je treba animirati zapletene gibe (na primer gibanje roke risanega junaka), potem animacija transformacije gibanja ni uporabna. Vsak okvir je treba narisati ročno, to pomeni, da se uporablja animacija okvir za okvirjem, sestavljena iz niza ključnih okvirjev. Tako je animacija po sličicah najbolj vsestranska, a hkrati tudi najbolj delovno intenzivna vrsta animacije, poleg tega ustvarja najbolj "težke" datoteke. Če je mogoče animacijo po sličicah zamenjati s samodejno animacijo, je to bolje. Oglejmo si številne primere, ki vam omogočajo uporabo samodejne animacije gibanja pri simulaciji leta. Gibanje po določeni poti.

Flash vam omogoča nastavitev gibanja predmeta po dani poti. Če želite nastaviti to trajektorijo, zaženite ukaz Insert => Timeline => Motion Guide.

Kliknimo na plast trajektorije in s svinčnikom narišimo črto, po kateri nameravamo premikati list (slika 15).

riž. 15. Primer podajanja trajektorije gibanja

Zdaj pa pojdimo na prvi okvir (kliknite nanj z miško) in na ploščo, ki se prikaže Lastnosti potrdite polje Snap(nastavi način vezave na trajektorijo gibanja) - sl. 16.

riž. 16. Parameter Snap nastavi način zapenjanja na trajektorijo gibanja

Ko potrdite polje Snap, bo sredina lista poravnana s tirnico gibanja. Z orodjem Puščica lahko premikate list po poti gibanja, če pa poskusite list odtrgati s poti in ga položiti zraven, se bo potegnil nazaj in se spet »prilepil« na pot gibanja (sl. 17).

riž. 17. Zdi se, da se predmet s svojim središčem drži tirnice gibanja

Pojdite na zadnji okvir in podobno privežite list na končno točko poti gibanja. Če želite filmu dati volumen, dodajte transformacijo Obrni vodoravno, - kot rezultat dobimo film .

Ko se list premika po trajektoriji, nam ni pomembno, kako se bo vrtel v smeri gibanja. Če pa podobno nastavimo pot leta ptice, se na nekaterih delih krivulje izkaže, da ptica leti najprej z repom.

Očitno je, da če želimo animirati let letala ali ptice, potrebujemo, da ves čas premika nos naprej. V Flashu je to vrsto gibanja zelo enostavno nastaviti (slika 18).

riž. 18. Če potrdite polje Orient na pot, bo ptica letela z glavo naprej

Zahtevano potrditveno polje Orient na pot, ptičje gibanje pa se bo spremenilo v povsem znano (vir za ta video je let ptice.fla).

riž. 19. Dodajanje enobarvnega ozadja

Če želite dodati enobarvno ozadje, kliknite ozadje in na plošči, ki se prikaže Lastnosti(slika 19) na polju Ozadje izberite želeno barvo ozadja.

Če želimo dodati sliko za ozadje, bomo za to potrebovali ločen sloj. Flash načeloma ponuja možnost ustvarjanja sistema plasti, podobnega tistim, ki se uporabljajo v klasični animaciji, pri kateri so ozadje in različni premikajoči se objekti narisani vsak na svoji plasti prosojnosti.

Če sliko ozadja in vsak animirani predmet postavite na svojo plast, je veliko lažje pridobiti nadzor nad njimi. Torej, da bi dodali sliko za ozadje, ustvarimo novo plast zanjo. Če želite to narediti, z desno miškino tipko kliknite plast, prikazano na sl. 19 je označen kot sloj 1 in v spustnem meniju izberite vrstico Vstavi sloj. V dodani plasti narišite sonce. Da se ne bi zmedli pri številkah plasti, dajmo plasti ime "ozadje". To storite tako, da kliknete trenutno ime in vnesete zahtevano ime (slika 20).

riž. 20. Na novi plasti ustvarite stacionarni predmet ozadja

Kot je razvidno iz sl. 20, je ptica za soncem, kar je v nasprotju z zdravo pametjo. Če želite zamenjati plasti, uporabite način povleci in spusti, da plast z imenom »ozadje« povlečete navzdol.

Uredimo objekte filma (tako da ptica kroži na ozadju sonca, spremeni trajektorijo leta in spremeni razmerje velikosti sonca in ptice) in dobimo naslednji video.

riž. 21. Če želite animirati oblak, ustvarite ločen sloj

Zdaj pa naši animaciji dodamo premikajoče se predmete, na primer oblak. Za oblak ustvarite nov sloj in nanj nastavite animacijo transformacije gibanja. Da bo oblak priletel v sceno, ga bomo postavili, kot je prikazano na sl. 21. Kot rezultat dobimo naslednji film (vir za ta film je v priloženi datoteki

V tej lekciji si bomo ogledali, kaj je animacija gibanja predmeta po dani vodilni poti (vodniku). Ustvarimo pogojni predmet in mu narišemo pot, po kateri bo šel.

Ustvarite nov dokument ActionScript 3.0

Kot običajno ustvarite nov dokument »Action Script 3.0«. V desni orodni vrstici izberite »Orodje za pravokotnik« in ga postavite na oder.

Nastali predmet pretvorimo v simbol tako, da ga izberemo z “Orodjem za izbiro” in pritisnemo desni gumb miške.

Zdaj morate na plošči »časovnica« izbrati petdeseti okvir in ga narediti za ključnega. Kliknite desni gumb miške in pokličite kontekstni meni, kjer izberemo "Vstavi ključni okvir".

Ustvarimo vodilo, pot, po kateri se bo objekt premikal. Če želite to narediti, z desno miškino tipko kliknite plast in v kontekstnem meniju, ki se prikaže, izberite »Dodaj klasični vodnik za gibanje«.

Na koncu bi morali imeti dve plasti, kot je ta:

Zdaj morate na sloj "Guide" narisati pot, po kateri se bo predmet premikal. Z orodjem Pencil Tool, ki se nahaja na desni plošči, narišite vodilo.

Če se narisana pot izkaže za nekoliko neenakomerno, jo lahko zgladite z orodjem Smooth Tool, ki se kot svinčnik nahaja na desni plošči. Najprej z orodjem za izbiro dvokliknite vodilo in nato kliknite orodje za gladkost.

Postavite predmet, da ustvarite animacijo gibanja

Zdaj pa postavimo naš predmet na narisano pot. Če želite to narediti, se postavite na prvi okvir plasti, vzemite predmet z "Orodjem za izbiro" in ga premaknite na levi rob črte, "prilepil" se bo nanj ali bolje rečeno na sidrišče predmeta se bo pridružil vodniku.

Enako je treba storiti za petdeseti okvir, vzemite predmet in ga postavite na desni rob črte.

Zdaj morate ustvariti vmesne okvirje, tako da program sam postavi predmet, kjer je potreben v vsakem okvirju. Če želite to narediti, preprosto izberite kateri koli srednji okvir na sloju, kjer se nahaja predmet, in kliknite z desno miškino tipko ter izberite »Ustvari klasičen Tween«.

Kot rezultat bi morali dobiti dve takšni plasti:

Zaženemo animacijo gibanja predmeta

Poglejmo, kaj se je zgodilo. Pojdite v glavni zgornji meni »Datoteka -> Predogled objave -> Flash« ali pritisnite ctrl+enter na tipkovnici. Za ogled neposredno v programu pritisnite tipko enter.

Naredimo, da se predmet "obrne", ko teče po poti. Če želite to narediti, izberite prvi okvir na plasti, kjer se nahaja predmet, in ga nekoliko zavrtite z orodjem Free Transform Tool, ki se nahaja na desni plošči.

Zdaj v lastnostih predmeta, ko ste na prvem okvirju, izberite »Orient to path«.

Izberite petdeseti okvir na sloju, kjer se nahaja predmet, in ga tako kot v prvem okvirju malo zavrtite.

Če želite videti, kaj se je zgodilo, pritisnite ctrl+enter.

Vse delo pri ustvarjanju filma poteka s ploščo Timeline, katere slika je podana spodaj. Plošča Timeline je razdeljena na dva dela z navpično črto, ki jo lahko premikate z miško. Desna stran plošče je tako imenovana "črta okvirja" - črta, na kateri so simboli okvirja, ki so videti kot majhni pravokotniki. Vsebina okvirjev so statične slike, ki se sčasoma spreminjajo in se pojavljajo na delovnem polju. Oštevilčenje okvirjev je prikazano na vrhu vrstice.

Pod črto okvirja je "vrstica stanja". Ključni okvirji so okvirji, ki vsebujejo statične slike, ki med animacijo »oživijo«. Tipka povzroči, da se na desni strani ključnega okvira pojavi podvojen okvir. Podvojeni okvir- to je okvir, ki nima svoje vsebine, ampak vsebuje le povezavo do vsebine ključnega okvira levo od njega. Ustvarjanje podvojenega okvirja olajša delo na animaciji in odpravi potrebo po risanju iste zgodbe v sosednjih okvirih.

Na črti okvirja je prazna ključna sličica označena z votlim krogom; če vsebuje grafični objekt, je označena s črnim krogom. Zadnji okvir v verigi podvojenih okvirjev je označen z belim pravokotnikom.

— glavno orodje pri delu z animacijo v Flashu. Prikazuje informacije o slojih, kateri okvirji so ključni okvirji in katere ustvari Flash. S pomočjo časovnice lahko razumete, kateri okvirji vsebujejo dejanja ali oznake. Omogoča premikanje ključnih okvirjev in celotnih delov animacije.

1. Glavne značilnosti časovnice:
2. Če želite plast narediti aktivno, jo morate izbrati. Na aktivni plasti lahko samo rišete in urejate. Aktivna plast je označena na časovnici, ikona svinčnika pa označuje, da jo je mogoče urejati (3. plast).
3. Vsebina plasti, ki so na vrhu časovnice, se prikaže na vrhu vsebine plasti pod njimi. Če želite zamenjati plasti, morate ime plasti povleči na želeno mesto na časovnici.
4. Če želite ustvariti novo plast, izberite položaj na časovnici za novo plast in kliknite gumb »Dodaj plast«.
5. Če želite izbrisati plast, jo preprosto povlecite v koš.
6. Če želite preimenovati plast, jo dvokliknite na časovni premici.

Ko ustvarjate večplastno sliko, uporabite kontrolnike plasti. Če kliknete stolpec pod sliko gradu, boste zaklenili kakršno koli urejanje, v stolpcu pod sliko očesa pa bo plast postala nevidna. Spodaj je primer animacijskega videa, v katerem je različno ozadje (pokrajina) z ustreznim besedilnim blokom postavljeno v različne plasti s premikom 25 sličic. Pokrajino dobimo s polnjenjem ozadja

Merilo okvirjev je polje, kjer lahko dodajate in odstranjujete preproste in ključne okvirje. Če pokličete kontekstni meni (desni gumb miške) na katerem koli okvirju, boste videli seznam dejanj, ki jih je mogoče izvesti. Na lestvici so prikazani podatki o okvirih, ki so ključni (taki okvirji so označeni s črnimi krogi), vsebujejo dejanja (črka »a« nad krogom) ali oznako (rdeča zastavica, ki ji sledi ime oznake). O vrsti okvirja govori tudi barva. siva- to so okvirji, ki natančno ponavljajo ključni okvir.

Modrikasta ali zelenkasta osvetlitev ozadja pomeni, da je okvirje ustvaril Flash. In končno, bel ali "prazen" črtast prostor kaže, da v teh okvirih ni ničesar. Gumbi za nadzor senc - to so gumbi, ki vam omogočajo, da prikažete sosednje okvirje kot skozi pavs papir, da vidite razliko med prejšnjimi in naslednjimi okvirji. Globino takšnega prikaza lahko nastavite na obeh straneh markerja. Animacija je sestavljena iz zaporedja sličic. Okvir je lahko ročno sestavljen ali ustvarjen s Flashom. To velja za okvirje ene plasti. Ker so prizori Flash običajno sestavljeni iz več plasti, lahko nastali "večplastni" okvirji vsebujejo tako ustvarjene kot "domače" plasti.

IN računalniška animacija:

1. Obstaja koncept - ključni okvirji. Njihovo ime govori samo zase. To so okvirji, ki jih Flash med postopkom animacije ne more spremeniti. Vi nastavite te ključne sličice, Flash pa zgradi vmesne sličice med njimi. Obstajata dve vrsti vmesnih okvirjev - okvirji, zgrajeni na podlagi spreminjanja geometrije (shape tweening) ali okvirji, zgrajeni na podlagi spreminjajočih se znakov (motion tweening). In, seveda, okvirji so lahko prazni, tj. ne vsebujejo ničesar. Simboli so eden ključnih pojmov v Flashu. Simbol je lahko najpreprostejši geometrijski primitiv ali njuna kombinacija ali celotna animacija (film). To omogoča uporabo simbolov kot zmogljivega mehanizma za ustvarjanje abstrakcij v Flashu.
2. Gumb. Flash ima tip simbola, posebej prilagojen za funkcije gumbov. Ima 4 okvirje: Up, Over, Down, Hit, ki vsebujejo naslednja stanja gumbov:
   • Zadetek je običajno stanje gumba, ki vsebuje povezavo, ki jo je uporabnik že obiskal.
3. Animacija (filmski posnetek). To je najbolj "polnopravna" vrsta simbola. Vsebuje lahko poljubno število okvirjev. Znak te vrste je mogoče obravnavati kot filmski objekt v ActionScriptu (vgrajenem jeziku Flash).

Simbole je mogoče ustvariti "od začetka" (Vstavi->Nov simbol, Ctrl+F8) ali z uporabo trenutne izbire, ki jo postavite neposredno v simbol (Vstavi->Pretvori v simbol, F8). Druga tehnika se uporablja veliko pogosteje kot prva, ker Simbola vam ni treba več postavljati in spreminjati na želeno velikost.

Obstajata dva bistveno različna načina za animiranje nečesa v Macromedia Flash:

1. Vsak okvir narišite sami, pri čemer uporabite Flash samo za pomikanje po okvirjih.
2. Naj Flash samodejno izračuna vmesne sličice.

Animacija po korakih (sličica za sličico).

To je animacija, ki je v celoti sestavljena iz ključnih sličic. Tisti. Sami določite tako vsebino okvirja kot njegovo "trajanje" (tj. koliko takih statičnih okvirjev bo slika zasedla). Preden narišete naslednji okvir, morate vstaviti prazen ključni okvir ( ), če želite dobiti kopijo okvirja ključa, kliknite

in nato uredite nastalo kopijo. Ko želite za osnovo uporabiti že pripravljene slike, lahko to storite na naslednji način - Datoteka, Uvoz ... Na časovni premici je animacija okvir za okvirjem videti takole:

1. Prednosti te metode vključujejo:
2. Stop motion animacija vam v nekem smislu daje več nadzora nad animacijo in če ste izkušen animator, jo lahko uporabite sebi v prid.
3. To je edini način za organizacijo menjave popolnoma neodvisnih slik - diaprojekcije (na primer ustvarjanje navadne pasice z uporabo Flasha).

In vse ostalo, kar izhaja iz možnosti ročnega risanja vsakega okvirja.

1. Slabosti vključujejo naslednje:
2. Stop-motion animacijo je težko spreminjati. Še posebej, če ne gre za diskreten niz slik, temveč za sorodno animacijo. Vse okvirje je treba spremeniti.

Animacija okvir za okvirjem zavzame precej veliko prostora, saj je treba shraniti informacije o vsakem okvirju.

• Osnovno poslovanje z osebjem: .
• Vstavite prazen ključni okvir - Vstavi -> Prazen ključni okvir, .
• Počisti ključni okvir - Vstavi -> Počisti ključni okvir, +.
• Vstavite običajni okvir - Vstavite okvir, .
• Izbriši okvir - Vstavi -> Odstrani okvirje, +.

Osnovne operacije z valjčkom:

• Oglejte si video - Nadzor, Testni film.
• Spreminjanje višine in širine videa – Spremeni, Film.
• Pretvarjanje filma Flash v dokument HTML Datoteka, Nastavitev objave, zavihek HTML.
• Ogled dokumenta HTML – Datoteka, Predogled objave.

Ustvarimo večplastni film z animacijo po korakih "Življenje rože". 1. sloj - okvir, 2. sloj - lonec, 3. sloj - roža. 3. plast lahko predstavljamo kot tri plasti: list, steblo, socvetje.

Lonček in okvir sta vedno pred našimi očmi, cvet pa v 25 ključnih okvirih uspe rasti in oveneti.

V sloju »roža« je vsak okvir drugačen od prejšnjega, vendar lahko spremenite stanje rože po enem okvirju.

Videoposnetek je objavljen z uporabo File->Publish Setting. Na zavihku Formati so izbrane možnosti objave, lahko jih izberete več, na ustreznih zavihkih nastavite parametre za izbrano možnost objave, nato pa kliknete gumb Objavi. V tem primeru se ustvarjene datoteke shranijo v isto mapo kot izvirna datoteka s pripono .fla.

• V našem primeru je bila za objavo izbrana možnost Gif-animirana datoteka, kot v vseh naslednjih primerih.
• Poskusite sami dokončati drugo nalogo z uporabo spodnjega algoritma. To bo ustvarilo animacijo premikajočega se avtomobila:
• ustvarite plast "Pokrajina";
• poženite ukaz File/Import in uvozite sliko pokrajine ali ustvarite »asfaltno« ozadje;
• Izberite 30. okvir na ravnilu in pritisnite F5. ustvarite verigo podvojenih okvirjev za pokrajino;
• ustvarite novo plast "Samodejno";
• V prvi ključni okvir narišimo avto brez koles;
• Združimo narisan avto in s pritiskom na F8 ustvarimo vzorec knjižnice - avtomobilski posnetek;
• premaknite avto, izberite drugi okvir in pritisnite F6;
• premikali bomo avto in ustvarjali nove ključne okvirje, dokler avtomobil ne izgine izven delovnega polja;
• ustvarite novo plast in jo poimenujte "Wheel1";
• V prvi okvir narišimo kolo in iz njega ustvarimo vzorec knjižnice: wheel;
• Ustvarimo nov ključni okvir in premaknimo kolo v njem za premaknjenim avtomobilom itd. v vseh drugih okvirih obračanje kolesa pod majhnim kotom;
• zaklenite plast "Wheel1" in kopirajte celotno nastalo zaporedje okvirjev v medpomnilnik;
• Za zanko pogleda kliknite +.

Kot drugo neodvisno nalogo lahko predlagate ustvarjanje animacije po korakih »Zažiganje vžigalice«:

V Flashu sta na voljo dve možnosti za konstruiranje vmesnih slik - motion tweening (gradnja animacije na podlagi spreminjanja znakov) in shape tweening (gradnja animacije na podlagi spreminjanja oblik). Te metode so bistveno drugačne.

Animacija gibanja

Pri tej metodi animacije se določi začetni položaj, barva, velikost, orientacija in končni parametri, program pa sam izvede to gibanje.

S to metodo animacije Flash samodejno zgradi vmesne sličice med ključnimi sličicami, ki jih določite. To pomeni, da narišete predmet, nato na drugem okvirju naredite spremembe, o katerih bomo govorili spodaj, in prosite Flash, da izračuna okvirje, ki ležijo med tema dvema ključnima okvirjema. Opravi svoje delo in dobite gladko animacijo. +Hitrost in gladkost animacije sta odvisni od števila sličic, dodeljenih za gibanje, in hitrosti Flash filma (filma). Hitrost filma lahko spremenite na naslednji način: Modify->Movie…,

— tam parameter Frame Rate nastavi število sličic na sekundo. Za kakovostno animacijo mora biti hitrost vsaj 25-30 sličic na sekundo.

Gladkost in trajanje sta določena s številom sličic, dodeljenih za animacijo (njen fragment).

1. Oglejmo si animacijo s konstrukcijo vmesnih sličic (tweened motion). To je najpogosteje uporabljena tehnika animacije v Flashu. V tem primeru animacija temelji na modifikaciji likov, tj. objekt animacije je simbol. Tako kot pri animaciji s spreminjanjem oblike potrebujemo za vsak predmet v določenem trenutku eno plast. Na tej plasti mora biti en simbol, s katerim se bodo zgodile vse spremembe.
2. Pri uporabi Motion Tweening se spremenijo naslednji parametri:
3. velikost (sorazmerna in nesorazmerna - višina in širina ločeno);
4. naklon;
5. lokacija;;
6. kot vrtenja;

Motion tweening lahko omogočite na več načinov (in na žalost samo en način, da ga onemogočite). Če želite omogočiti tweening gibanja, morate narediti začetni okvir svojega prehoda aktiven, nato kliknite z desno miškino tipko in v kontekstnem meniju izberite Ustvari motion tween (enako lahko storite z izbiro Vstavi->Ustvari motion tween). Univerzalen način za vklop/izklop gibanja med gibanjem je uporaba plošče Frame, pri kateri v polju Tweening izberete Gibanje. Tam lahko nadzirate parametre animacije:

• Easing - inverzno eksponentno pospeševanje, deluje popolnoma enako kot pri tweeningu oblike.
• Rotate vam omogoča nadzor vrtenja. Auto - Flash samodejno poskuša določiti število obratov. CW (v smeri urinega kazalca, v smeri urinega kazalca) in CCW (v nasprotni smeri urinega kazalca).
• V tem primeru je zraven v polju na desni možnost vnosa števila vrtljajev. Uporabite lahko samo celoštevilske vrednosti. Vrtenje lahko izklopite tako, da izberete Brez.

Usmeri na pot - zavrti simbol glede na smerno črto. Snap prilepi simbol na ta vodnik.

V primerih, ko število sličic glavne scene ni večkratnik števila sličic znakov, potrditveno polje Sinhroniziraj omogoča sinhronizacijo obeh animacij. Imenujejo se plasti, ki vsebujejo krivuljo, po kateri naj se predmet premika vodilne plasti

(vodilni sloji) (tj. vsebujejo trajektorijo predmeta). Če želite dodati vodilni sloj, morate izbrati sloj, na katerem se nahaja vaš simbol; nato z desno miškino tipko kliknite in v kontekstnem meniju izberite Dodaj vodnik. V tem primeru izvirna plast postane vodena plast. To ni edini način za ustvarjanje vodilne plasti.

Vsako plast lahko naredite kot vodilo, tako da to določite v njegovih lastnostih, ali pa ga vodite tako, da z miško povlečete želeno plast, tako da je pod vodilom.

Nato vse sledi znanemu scenariju - ključni okvirji, omogočite tweening gibanja ... Če želite, da se predmet vrti glede na trajektorijo in ne samo premika vzdolž nje, morate na plošči Okvir omogočiti potrditveno polje Orient to path .

Motion tween vam omogoča uporabo različnih barvnih učinkov na celotnem simbolu. Ta funkcija ni na voljo pri spreminjanju oblik.

Če želite uporabiti učinek na simbol, morate izbrati ta simbol in na plošči z učinki (Windows -> Paneli -> Učinki) izbrati želeni učinek, nastaviti svetlost, barvni premik, odtenek.

• Ustvarite svoj zelo preprost primer animacije žoge, ki se premika v krogu, z uporabo spodnjega algoritma:
• Narišimo krog v prvi okvir in ga napolnimo z radialnim gradientnim polnilom;
• združi risbo;
• izberite ga z orodjem Transformer in premaknite središče vrtenja na določeno razdaljo; pojdimo na okvir 30, kliknite
• , tj. naredimo kopijo prvega okvirja;
• Vrnimo se k prvemu okvirju in odprimo ploščo Properties ter na seznamu Tween izberimo Motion;

na dodatnem seznamu Rotate izberite prisilno vrtenje v smeri urinega kazalca (CW) ali nasprotni smeri urinega kazalca (CCW).

• Naslednji primer je nekoliko bolj zapleten - ustvarjanje animacije gibanja besedilnih črk:
• Z orodjem Besedilo ustvarite besedilni blok;
• izberite zapisano besedo in jo razdelite na ločene črke (Modifi/Break Apart);
• ločimo črke v ločene plasti Modify/Distribute to Layers;
• pretvorite vsako črko v vsaki plasti v risbo, ponovite ukaz Modifi/Break Apart. Izberite vsako črko in jo združite; ;
• na črti okvirja, na neki razdalji, bomo ustvarili kopije prvega okvirja, kliknite
• Za posamezno črko bomo izmenično izbrali prve okvirje, jih premaknili izven delovnega območja, spremenili proporce črke, središče vrtenja itd.;
• Na plošči Properties na seznamu Tween izberite Motion. Na dodatnem seznamu Rotate izberite eno rotacijo v smeri urinega kazalca; + .

Oglejmo si animacijo v vidnem polju

V procesu animacije oblike lahko risba razpade na več neodvisnih fragmentov, od katerih se bo vsak postopoma spremenil v nekaj nepričakovanega. Ali, nasprotno, več neodvisnih slik, ki se nahajajo na delovnem polju, med postopkom animacije postopoma spreminjajo svoj videz (velikost, barva, oblika), postanejo del ene slike.

Na primer, potrebujete kvadrat, da se gladko spremeni v krog, ali silhueto zajca, da se gladko prelije v silhueto volka. V teh primerih se uporablja spreminjanje oblike. +Kot običajno nastavite dva ključna okvira na določeni razdalji drug od drugega. Ta možnost animacije ima strogo omejitev: animacija mora zasedati ločen sloj in biti ena narisana figura (ne sme biti nobenih skupin ali simbolov).

Ko sta dva ključna okvira, morate prvega narediti aktivnega (samo pojdite nanj) in ga izberite na plošči Okvir (Windows->Plošča->Okvir,

• ) na seznamu Tweening vrstico Shape.
• Okvirji na časovni premici morajo postati zeleni in puščica se mora raztezati od prvega okvirja do drugega.
  • Rezultat je serija vmesnih okvirjev, ki bodo odražali prehod od prve figure do druge.
  • Ko uporabljate prilagajanje oblike, morate nastaviti dva parametra:

Popuščanje določa inverzno eksponentno pospeševanje. Vrednost tega parametra se lahko spreminja od - 100 do + 100. To pomeni, da če nastavite negativno popuščanje, bo gibanje potekalo s pozitivnim pospeškom, hitrost se bo povečala. Nasprotno, če je popuščanje pozitivno, se bo animacija upočasnila;

Parameter Blend določa algoritem prehoda:

Možnosti prehoda iz ene oblike v drugo je lahko veliko, zato lahko animacija v manjši meri ubere tisto pot, ki vam ustreza. Tudi preoblikovanje tako preproste geometrijske figure, kot je pravokotnik, ki se nahaja navpično, v isti pravokotnik, ki se nahaja vodoravno, se lahko zgodi na različne načine. Na primer, med postopkom takšne preobrazbe lahko figura postane v obliki ovala ali celo kroga. Če želite nadzorovati proces animacije, morate poskusiti poenostaviti animacijo tako, da risbe razdelite na več neodvisnih fragmentov, ki se nahajajo v različnih plasteh, vendar hkrati sodelujejo v animaciji. Bolj usklajena tehnika je uporaba oznak oblik, o katerih smo razpravljali zgoraj.

Če morate onemogočiti prilagajanje oblik, na plošči Okvir izberite Tweening: Brez.

Pri uporabi medsebojnega prilagajanja oblik je mogoče spremeniti naslednje parametre oblike:

• oblika;
• velikost (sorazmerna in nesorazmerna - višina in širina ločeno);
• velikost (poljubna razmerja);
• barva;
• kot vrtenja.

Spodaj je primer te metode animacije »pretvorbe« slona v ovco in nazaj.

Poskusite ustvariti svojo animacijo v obliki "pretvorbe" kače v orla in nazaj:

Vodilna plast in plast poti

Pogosto je med postopkom animacije potrebno, da se predmet premika ne v ravni črti, ampak po dani poti. V tem primeru se animacija ustvari na običajen način, pot pa se nariše v ločeni plasti. Sloj poti lahko podpira več različnih animacij, vsako na svojem sloju, vendar morajo biti vsi ti animacijski sloji pod slojem poti. Za risanje poti lahko uporabite različna orodja: svinčnik, čopič, pero, elipso ali pravokotnik.

Če želite premikajoči se predmet povezati s to trajektorijo, morate ta element preprosto premakniti na trajektorijo v začetnih in končnih ključnih sličicah animacije.

• V tem primeru bi morali na plošči Properties prilagoditi parametre animacije tako, da je potrditveno polje Snap vklopljeno. Če želite to narediti, morate najprej izbrati prvi ključni okvir animacije, prav tako je koristno izbrati ukaz Pogled/Pripni na predmete.
• Na primer, ustvarimo video »Butterfly Flight over a Flower« z uporabo spodnjega algoritma:
• uvozite risbo rože v prvo plast; v prvi ključni okvir druge plasti narišite metulja (metulja lahko dobite tako, da vektorizirate njegovo rastrsko fotografijo Modify/Trace Bitmap);
• izberite metulja, kliknite z ustvarjanjem vzorca knjižnice;
• v njej bomo metulja premaknili na drugo stran delovnega polja;
• izberite 60. okvir in kliknite , ustvarjanje verige podvojenih okvirjev;
• Izberite prvi okvir in na plošči Properties na seznamu Tween izberite Motion;
• izberite plast animacije in v kontekstnem meniju izberite ukaz Add Motion Guide;
• Na delovnem polju te plasti narišimo krivuljo za gibanje metulja, katerega začetek in konec sta v bližini;
• izberite prvi ključni okvir animacije in postavite metulja na en konec poti;
• nato izberite drug ključni okvir animacije in postavite metulja na drugi konec poti;
• Izberite prvi ključni okvir animacije, odprite ploščo Lastnosti in vklopite potrditveno polje Orient to Path;
• Ustvarimo učinek mahanja s krili metulja med letenjem. Odprimo vzorec knjižnice + ;
• dvakrat kliknite na sliko metulja v oknu za ogled;
• Ustvarimo nov ključni okvir, na primer tretji, tako da bo gibanje metuljevih kril naravno;
• v novem ključnem okvirju najprej dvignite eno krilo metulja in nato drugo;
• Vrnimo se na glavno sceno in začnimo gledati.

Maska plast in plast maske

Ta plast je zasnovana tako, da prekrije in naredi neviden del slike, ki se nahaja neposredno pod njo. Če maska ​​plasti ne vsebuje nobene slike, potem popolnoma prekrije (maskira) plast, ki se nahaja spodaj in je povezana z njo, kar se imenuje maskirana plast. Če je nekaj narisano v maski plasti, potem vsako polnilo te risbe postane prosojni del plasti.

Če animirate sliko, ustvarjeno v maski plasti, se bo prozorni del maske premikal po zaslonu. Maska plasti lahko prikrije več plasti. Običajno plast lahko naredite maskirno tako, da spremenite njen položaj v skladu plasti. Z miško preprosto povlecite običajno plast pod masko plasti.

• Animacija je v tem primeru lahko dveh vrst. Ali animacija predmetov, ki se nahajajo na maskiranih slojih. Ali animacija slike, ki se nahaja na maski plasti.
• Primer ustvarjanja učinka besedila, ki se postopoma pojavlja na zaslonu črko za črko. Za to uporabimo animacijo gibanja slike, ki se nahaja v maski plasti, z uporabo naslednjega algoritma: v prvi okvir sloja vstavite blok statičnega besedila in napišite besedo;
• izberite 40. okvir in kliknite
• , s čimer določimo dolžino bodoče animacije;
• Ko ostanete v maski plasti, izberite 40. okvir in kliknite ;
• ostanejo v 40. okvirju, z orodjem Transformer raztegnejo narisani pravokotnik tako, da pokriva celotno besedo;
• Izberite 1. okvir in odprite ploščo Lastnosti, izberite Gibanje;
• Začnimo z animacijo.

Spodaj je animirana datoteka GIF, ki uporablja animacijo oblike črk besedila »Srečno novo leto«, nato pa se besedilo, ki se pojavi, »izbriše« z uporabo maske plasti, pravokotnika s prelivom, tako da učinek dobimo "mavrične" črke. Ozadje je fragment rastrske grafike.

Naslednji primer prikazuje besedo, ki »raste« iz točke, kjer je uvožena rastrska grafika uporabljena kot maskirana plast, v sloju maske pa je ustvarjena animacija, v kateri beseda raste iz točke, nato pa se spet skrči.

Ta primer uporablja tudi animacijo oblike.

Ustvarjanje gumbov

• Gumb je posebna vrsta simbola, zasnovanega za odziv na dejanja uporabnika, na primer pritisk samega gumba, njegovega dvojnika na tipkovnici ali aktivnega območja v filmu.
• Časovnica gumba vsebuje naslednje štiri okvirje:
• Gor — normalno stanje gumba;
• Čez — ko je kazalec miške nad gumbom;

Dol — ko je kazalec nad gumbom in je pritisnjen gumb miške;

Zadetek je normalno stanje za gumb, ki vsebuje povezavo, ki jo je uporabnik že obiskal;

1. Če morate ustvariti več enakih gumbov, je v tem primeru dovolj, da ustvarite samo eno predlogo gumba. Nato nanj nanesite potrebne napise, spremenite barvo ali velikost.
2. Če mora gumb vsebovati animirane predmete, morate vnaprej ustvariti simbole filmskega izrezka in jih nato preprosto postaviti v ustrezen okvir gumba.
3. Glavne vrste dejanj:
4. Pojdi na — prehod na določeno sceno ali okvir;
5. Predvajaj—zažene ustavljen film;
6. Stop — ustavite film;
7. Preklopi visoko kakovost — preklopi kakovost prikaza filma (način glajenja);
8. Spot All Sounds - izklopite zvok;
9. Pridobi URL - gre na navedeni naslov;
10. FC Command - prenos predvajanja filma v druge aplikacije;
11. Load/Unload Movie - najenostavnejši način uporabe tega ukaza je prenos filma z navedenega naslova;
12. Tell Target - izberite film za nadaljnje upravljanje (nastavitev cilja);
13. Če je okvir naložen - izvedite ukaz, če je določen okvir naložen;
14. Če — preveri resnico;
15. Loop - cikel;
16. Duplicate/Remove Movie Clip - ustvarjanje ali brisanje primerka posnetka;
17. Povlecite filmski posnetek - omogoči način vlečenja posnetka;
18. Trace — prikaže sporočila, ko so dejanja izvedena;
19. Komentar - komentarji;

Algoritem za ustvarjanje gumba (alg1):

• ustvarite praznino za gumb;
• z orodjem izberite gumb in ga pretvorite v simbol (Vstavi\Pretvori v simbol…). Določite ime (na primer, vendar), izberite vrsto gumba;
• pojdite v način urejanja simbolov z dvojnim klikom na sliko simbola »Gumb«;
• pojdite na zgornji okvir na časovnici, vstavite prazen Insert\Keyframe, uredite gumb tako, da spremenite njegovo barvo;
• pojdite na spodnji okvir, vstavite prazen Insert\Keyframe, uredite gumb tako, da spremenite njegovo barvo;
• pojdite na okvir Hit, vstavite prazen okvir Insert\Keyframe, uredite gumb;
• zapustite način urejanja znakov (v zgornjem levem kotu filma pojdite na Scene1).

Algoritem za ustvarjanje gumba za obisk določene spletne strani:

• createButton(alg1);
• nastavite dejanje, za to izberite Okno\Dejanja. V spustnem meniju Osnovna dejanja izberite dejanje Pridobi URL tako, da dvokliknete nanj v oknu na levi plošči. S klikom na izbrano dejanje v desnem oknu določite njegove parametre (na primer URL: http:\\www.ya.ru);
• preizkusite nastali posnetek Control\Test Movie.

Algoritem za ustvarjanje gumba za zaustavitev posnetka:

• createButton(alg1);
• dodajte novo plast;
• ustvarite animacijo v njem;
• zgradite sliko v njej (na primer krog);
• pretvori sliko v simbol (Insert\Convert to Symbol...);
• Izberite okvir 30 v obeh slojih in vstavite ključni okvir Insert\Keyframe;
• premaknite sliko simbola v okviru 30 na drugo mesto;
• vrnite se 1 okvir nazaj in izberite Insert\Create Motion Tween;
• Izberite plast s sliko gumba in nastavite dejanje na Okno\Dejanja. Izberite dejanje Ustavi;
• Oglejte si nastali posnetek Control\Play.

Kot primer ustvarimo gumb z vgrajeno animacijo z uporabo spodnjega algoritma:

• pritisnite bližnjico na tipkovnici + , ustvarite nov primer tipa Button in nastavite ime knopka;
• Kliknite V redu in preusmerjeni boste v urejevalnik vzorcev;
• v prvi okvir (Gor) na delovnem polju narišite oval in ga napolnite z radialnim gradientnim polnilom;
• trikrat pritisnite tipko , to bo kopiralo vsebino prvega okvirja v vse ostale;
• izberite drugi okvir (Nad) in rahlo povečajte sliko gumba v njem, jo ​​obrobite z rumenim obrisom;
• uvozite animacijsko datoteko iz knjižnice (na primer oseba, ki teče, ali kateri koli drug posnetek);
• Postavimo ta posnetek na sliko gumba, poravnajmo vse lestvice;
• izberite tretji okvir (Dol) in rahlo zmanjšajte sliko gumba v njem;
• vrnimo se na glavni oder, odpremo knjižnico + , če je zaprt, ekstrahirajte ustvarjeni gumb.

Ta objekt je objavljen v načinu HTML s povezavo do ustrezne datoteke swf.

Skriptiranje z ActionScript

Ustvarimo gumbe, ki upravljajo diaprojekcijo:

• pripraviti več rastrskih slik (prosojnic);
• uvoz njihovega novega filma;
• na podlagi vsakega od njih bomo ustvarili knjižnične vzorce ( ) tip Gumb, ustvarjanje vzorca bomo odstranili sliko iz delovnega polja;
• Pokličimo prvi sloj filma Gumbi, izberemo prvi okvir in vanj postavimo ustvarjene gumbe, da ne motijo ​​gledanja;
• ustvarite plast za namestitev diapozitivov s slikami;
• vanj s pomočjo ključa ustvarite prazne ključne sličice, kolikor je diapozitivov;
• izberite prvi prazen ključni okvir in vanj postavite diapozitiv knjižnice ( +- odprtje knjižnice);
• Temu okvirju priložimo skripto. To storite tako, da ostanete v prvem okvirju, odprete ploščo Dejanja in z dvojnim klikom miške iz mape Dejanja/Kontrola filma prikličete skript Stop(), ki prekine ogled diapozitivov med čakanjem na uporabniški ukaz;
• Zadnji dve točki algoritma ponovimo za preostale prazne ključne okvirje;
• Imenujmo okvir s prvim vstavljenim diapozitivom začetek in zadnjim koncem (imena so nastavljena na plošči Lastnosti, kot oznaka okvirja);
• Vrnimo se k sloju z gumbi, kjer se nahajajo sličice naših diapozitivov;
• Vsakemu gumbu bomo priložili skripto, ki pošlje program v okvir, kjer se nahaja ustrezen diapozitiv;
• Če želite to narediti, izberite gumb in uporabite ploščo z dejanji, da vnesete naslednji skript:

Vklop (sprostitev) (

PojdiInUstavi(k); — številka v oklepaju označuje številko ustreznega okvirja.

• V prvi okvir sloja z gumbi lahko postavite tudi gumbe za alternativno izbiro diapozitivov. V našem primeru so to »Začetek«, »Naprej«, »Nazaj« in »Konec«;
• Izberimo prvi alternativni gumb (Začetek) in nanj povežimo skript:

Vklop (pritisnite) (

GotoAndStop("začetek)";

• Naslednji skript bomo priložili gumbu za nazaj (Prejšnji):

Vklop (pritisnite) (

Root.prevFrame();

• Naslednji skript bomo priložili gumbu Naprej:

Vklop (pritisnite) (

Root.nextFrame();

• Naslednji skript bomo priložili gumbu Konec, ki določa prehod na zadnji okvir:

Vklop (pritisnite) (

GotoAndStop("konec");

Spodaj je rezultat našega dela:

Pri ustvarjanju animacij z uporabo ActionScripta se pogosto uporablja zanka treh sličic. V prvi okvir (priprava) so zapisani začetni podatki, v drugi okvir so postavljeni elementi telesa zanke, v tretji okvir pa ukaz za vrnitev na drugi okvir gotoAndPlay (2); Delovanje zanke s tremi okvirji je izmenično ogledovanje okvirjev, ki sodelujejo v zanki, dokler ni izpolnjen pogoj za izhod iz zanke.

Oglejmo si uporabo cikla treh sličic na primeru ustvarjanja gibanja maske. Naš film bo sestavljen iz treh plasti:

• V prvi sloj uvozimo rastrsko sliko, ki jo bomo poimenovali Masked. Na njegovi podlagi bomo izdelali vzorec knjižnice tipa “posnetek”. Odstranimo ga iz delovnega območja in postavimo primerek tega posnetka na delovno področje.
• Na plošči Lastnosti ga poimenujmo Masked.
• V drugo plast bomo postavili primerek posnetka, ki je maska ​​originalne oblike. Ime druge plasti in ime tega primerka bo Maska.
• V tretji plasti, ki jo bomo imenovali Akcije, bomo ustvarili cikel s tremi sličicami.
• V prvem okvirju uporabimo metodo setMask objekta MovieClip, ki vam omogoča maskiranje katerega koli posnetka z drugim posnetkom, ki se nahaja na drugi plasti. Oblika metode:

<маскируемый клип>.setMask(<клип-маска>)

• Odprimo ploščo z dejanji in privežimo enovrstični skript Masked.setMask (maska);
• Z uporabo lastnosti (Priperties) objekta MovieClip bomo drugemu praznemu ključnemu kadru dodali rotacijo maske Mask._rotation += 2; Dodate lahko tudi spremembe dimenzij in koordinat maske.
• Na primer maska._x -= 1; maska._y += 1; maska._height -= 1; maska._width += 1;

Na tretji okvir bomo pripeli običajni skript gotoAndPlay (2);

Vsakič, ko dostopate do drugega okvirja, se posnetek maske obrne za 2°. Pred očmi uporabnika se vrti okno v obliki posnetka maske, skozi katerega je viden del posnetka maske.

Naučimo se nadzirati barvo primerka izrezka knjižnice. Ustvarimo film, v katerem se na ozadju vzhajajočega sonca zvezde vrtijo v različnih smereh in spreminjajo svojo barvo.

<имя экземпляра объекта Color>Primerek predmeta Color je ustvarjen s konstruktorjem v ActionScriptu in ima naslednjo obliko:<имя экземпляра клипа>)

• = nova barva (
• Izberimo prvi ključni okvir in vanj uvozimo rastrsko sliko vzhajajočega sonca.
• Združimo drugo plast in v prvi okvir narišimo tri poljubne zvezde.
• Izbrali jih bomo enega za drugim in ustvarili posnetke pod imeni Star, Star1, Star2.
• Vsakemu vzorcu bomo priložili svojo skripto. Razlika v skriptih je v tem, da je vsakemu primerku posnetka dodeljena drugačna začetna barva, drugačen kot vrtenja in tudi različni pogoji za spreminjanje trenutne barve v stavkih if.
• Posredovanje barve primerku izrezka, na primer za Star1, se izvede z uporabo vrstice, kot je ta, v skriptu Star1Color.setTransform(colorTransform);
• Posnetke s scenarijem bomo izbrali enega za drugim, kliknite in ustvarite nove posnetke, na primer z imeni ClipStar, ClipStar1, ClipStar2.
• V delovnem prostoru lahko prikažete več vzorcev vsakega posnetka.
• Spodaj je podan primer skripta za Star1:

OnClipEvent(load) (

Star1Color = nova barva (to);

ColorTransform = (rb:0, gb:255, bb:255);

G = 255;

B = 255;

korak = 5;

OnClipEvent(enterFrame)(

G -= korak;

ColorTransform.gb = g;

Če (r >=0 && b == 255 && g == 0) (

R += korak;

ColorTransform.rb = r;

Če (g == 0 && r == 255 && b

B -= korak;

ColorTransform.bb = b;

Če (b == 0 && r == 255 && g >=0) (

G += korak ;

ColorTransform.gb = g;

Če (g == 255 && b == 0 && r

R = korak;

ColorTransform.rb = r;

Če (r == 0 && g == 255 && b>=0) (

B += korak;

ColorTransform.bb = b;

Star1Color.setTransform(colorTransform);

This._rotation -= 3;

Gumbi in meniji so eden najpomembnejših delov spletnega mesta ali katere koli druge aplikacije, kjer je pomembna interaktivnost. Ustvarimo meni Flash.

• Narišimo gumb z imenom "Primeri".
• Pritisnemo tipko in ustvarite vzorec knjižnice tipa Button, imenovan primery.
• Pojdimo v način urejanja in spremenimo polnilo gumba in barvo besedila za stanja Over in Down, v vsakega od teh okvirjev pridemo s pritiskom na tipko .
• V okvirju Hit, ki se ne bo odražal v načinu animacije, bomo izbrisali sliko gumba in narisali zapolnjen pravokotnik, nekoliko večji od gumba.
• Pretvorimo besedilo "Primeri" v knjižnični simbol tipa Graphic. Če želite to narediti, pojdite na stanje gumba Gor, izberite besedilo in pritisnite tipko . Imenujmo vzorec knjižnice "primeri". Tako smo v simbol gumba ugnezdili simbol druge vrste - grafični.
• Ponovimo zgornji postopek za stanja gumbov Over in Down ter ustvarimo vzorce knjižnic "examples1" in "examples2" vrste Graphic.
• Z desno miškino tipko kliknite vzorec osnovne knjižnice in izberite podvajanje. Shranimo izvod pod imenom novice. To bo predloga knjižnice za prihodnji gumb Novice.
• Podobno dobimo podvojene vzorce »examples«, »examples1« in »examples2«. Imenujmo jih »novice«, »novice1« in »novice2«.
• Uredimo vsebino prejetih vzorcev, tako da besedilo »primeri« spremenimo v besedilo »novice« v ustreznih barvah.
• Vstopimo v način urejanja knjižničnih vzorčnih novic. Izberimo stanje gumba Gor in v knjižnici je vzorec "primeri".
• Poglejmo ploščo Lastnosti. Kliknite gumb Zamenjaj in v pogovornem oknu, ki se odpre, izberite vzorec »novice« in kliknite V redu. Na ta način bomo spremenili ime »Primeri« za stanje gumba Gor v ime »Novice«.
• Ponovimo podobne korake za drugi dve stanji vzorčnega gumba knjižnice novic. V tem primeru zamenjamo »examples1« z »news1«, »examples2« pa z »news2«.
• Rezultat takšnih manipulacij so popolnoma enaki gumbi, vendar z različnimi imeni.
• Vzemimo kopijo gumba "Novice" iz knjižnice na delovno polje.
• Na podoben način dobimo tretji gumb - »Stiki«.
• Vklopite ploščo Poravnaj. Izberimo vse tri gumbe in jim izberimo želeno lokacijo, na primer na isti ravni z enakimi medsebojnimi razdaljami.

Odprimo ploščo z dejanji in vsakemu gumbu priložimo skript, ki določa, katera spletna stran se bo naložila, ko jo kliknemo z miško. Določite lahko tudi, v katero okno se bo izbrana stran naložila, na primer v trenutno okno brskalnika (_self), v novo okno (_blank) itd. Na prvi gumb bomo priložili naslednji skript:

• na (izdaja) (getURL("1.html", "_self");)

Preostalim gumbom, ki kažejo na ustrezne spletne strani, bomo priložili skripte. V spodnjem meniju Flash povezovanje spletnih strani ni izvedeno zaradi lažjega ogleda strani. Zadeva:

Animacija gibanja v Flashu. Vrsta lekcije

: Lekcija-projekt z elementi ustvarjalnega dela.

Cilj: Izobraževalni vidik - razvoj ustvarjalnost dijakov skozi aktiv domiselno razmišljanje

, razvijanje sposobnosti dela z računalniki in informacijami za razširitev znanja. Razvojni vidik

– kreativno uporabo znanja s področja dvodimenzionalne računalniške grafike. Cilji lekcije:

Učence seznani z vrstami animacije. Razviti sposobnost ustvarjanja preproste animacije v Flashu.

- Oblike organiziranja izobraževalnih in kognitivnih dejavnosti študentov: posameznika

- – vsak študent ustvari individualni projekt fragmenta pravljice "Kolobok"; skupina - individualni projekti študentov omogočajo izvedbo skupinskega projekta pravljice "Kolobok". Delo za prihodnost - predvajanje pravljic predšolskim otrokom in osnovna šola

v sklopu razvoja družbenokulturnega centra na šoli.

1. Načrt lekcije:
2. Organizacija lekcije.
3. Spoznajte klasifikacijo animacij v Flashu (hevristični pogovor).
4. Posodobitev znanja o ustvarjanju ročno narisanih objektov v sistemu.
5. Prikaz ustvarjanja preproste animacije.
6. Praktično delo študentov za računalnikom.
7. Povzetek lekcije.
8. domača naloga.

NAPREDEK POUKA

1. Organizacija lekcije

Učitelj preveri pripravljenost učencev na pouk.

2. Izjava problema lekcije

Oglejmo si nekaj predmetov in ugotovimo, kateri so vam ljubši. Katere so vam najbolj všeč in zakaj?

Ogled nekaterih spletnih strani, predstavitvenih diapozitivov z in brez animacije.

Med pogovorom ugotovimo, da so lepše spletne strani in predstavitveni diapozitivi z animacijo.

Kako ustvariti animacijo je tema današnje lekcije ( Dodatek 1).

3. Pridobite informacije o klasifikaciji animacij v Flashu(hevristični pogovor z demonstracijo. Dodatek 1)

Glavni namen sistema v Flashu je "oživljanje" ročno narisanih slik.

Ko boste obvladali osnovne tehnike dela v sistemu, boste lahko:

Ustvarite učinkovito predstavitev ali program usposabljanja;
- naredite spletno stran ali dodajte "živi pridih" dizajnu vaše strani, tj. izdelava oglasnih spletnih video posnetkov (pasic);
- ustvariti risanko;
- programirajte svojo prvo igro.

Preden začnemo kar koli delati v praksi, si poglejmo osnovne pojme v animaciji: okvir(okvirji), ključni okvir, plast(plasti) in časovnica(časovnica), znaki ( simboli) (Dodatek 1).

Animacija- je spreminjanje lastnosti predmeta skozi čas (Animacija je proces spreminjanja velikosti, položaja, barve ali oblike predmeta skozi čas).

Okvir. Vsi filmi so sestavljeni iz okvirjev (okvirov). Vsak okvir vsebuje eno statično sliko. Iluzija gibanja je ustvarjena s subtilnimi spremembami vzorcev od enega kadra do drugega. Okvir je lahko ročno sestavljen ali ustvarjen s Flashom

Ključni okvir– okvir, ki je na voljo za obdelavo (prikazan kot črn krog, če vsebuje sliko, in bel, če slike ni). Posnetek, v katerem filmski ustvarjalec izvede prehod animirane slike.

plast - to je filmski blok, sestavljen iz posameznih slik, animacije s svojo časovnico .

Časovnica – polje, ki prikazuje informacije o slojih, kateri okvirji so ključni okvirji in katere ustvari Flash.

Animacija v Flashu, z vidika ustvarjanja, lahko ločimo naslednje podvrste: okvir za okvirjem animacija, samodejno (transformacijski) animacija in animacija na podlagi scenarija. Vsaka vrsta animacije ima svoje prednosti in slabosti ter področja uporabe.

Stop motion animacija je v celoti sestavljen iz ključnih sličic, vsebino sličic pa ustvarite sami. To spominja na proces ustvarjanja risank, ko je vsak okvir narisan na ločenem listu in če imate v risanki 5000 sličic, boste morali v skladu s tem narisati 5000 risb. (pokaži papirno diaprojekcijo). noter Flash to je seveda veliko lažje narediti kot na papirju, vendar je še vedno težko delo, poleg tega pa je velikost datoteke za animacijo okvir za okvirjem velika. V Flashu se animacija okvir za okvirjem uporablja v primerih, ko težave ni mogoče rešiti na druge načine.

V transformacijski animaciji glavno delo med ustvarjanjem opravlja Flash, ki vam omogoča, da dobite preprosto animacijo. Samodejna animacija (t. i. tweened animacija), pri kateri avtor ustvari samo prvi in ​​zadnji okvir animacije, Flash pa samodejno ustvari vse vmesne okvirje.

Animacija na podlagi scenarija. Skript je opis obnašanja predmeta v izvornem jeziku Flash, imenovanem ActionScript.

Z vidika načina konstrukcije delimo animacijo na gibalna animacija in animacija spremembe oblike. Animacija gibanja se izvaja na primerkih predmeta in vam omogoča, da ga premaknete, spremenite merilo, transformirate, dodate prosojnost in uporabite barvo; Pri tem ostane oblika predmeta nespremenjena. Shape Animation deluje neposredno z risbami in vam omogoča spreminjanje ene risbe v drugo, medtem ko spreminjate njen položaj, velikost in barvo.

Animacija obrazca

Danes se bomo seznanili s principi ustvarjanja animacije oblik.

Za razliko od animacije gibanja animacija oblik deluje samo s primitivi, to je oblikami, ustvarjenimi z orodji za risanje. Tako kot pri animaciji gibanja tudi v eni plasti ne sme biti več kot ena animirana oblika.

Animacija gibanja

Ustvarjanje gibalne animacije se od animacije sličica za sličico razlikuje po tem, da nam ni treba ročno ustvariti vsake sličice, dovolj je, da ustvarimo prvo sličico animacije in zadnjo, program bo samodejno zapolnil vse vmesne sličice. Upoštevati morate, da je animacija gibanja uporabna samo za simbole in na eni plasti ne sme biti več kot en animirani simbol.

Z drugimi besedami, Preden začnete ustvarjati svojo "risanko", se morate odločiti o izbiri mehanizma za njeno izvedbo.

4. Posodobitev znanja o izdelavi ročno narisanih objektov v sistemu.

Ugotovite, kako lahko ustvarite predmet, izberete barvo ozadja in barvo obrisa oblike, izberete predmet, kjer se nahajajo lastnosti predmeta ( z demonstracijo na interaktivni tabli).

5. Prikaz ustvarjanja preprostega algoritma izvajanja.

6. Praktično delo študentov za računalnikom

Ustvarjanje mini projekta, ki temelji na pravljici "Kolobok".

Komentar za učitelja. Vsak študent dobi praktično delo ustvariti ločen delček pravljice. Priporočljivo je, da vnaprej izgovorite pravljico "Kolobok" in zvočno datoteko razdelite na ločene prizore, da študentom med delom pokažete trajanje animacije.

Praktično delo na temo "Najenostavnejša animacija gibanja v Flashu"

Možnost – 1

telovadba . Slika1.jpg) po poti se kotali žemlja in slišijo se besede:

Žemljica je ležala tam, ležala tam in se nato skotalila od okna do klopi, od klopi do tal, po tleh do vrat, skočila čez prag - in naprej po poti.

Zvok traja 9 sekund. 13 sličic – 1 sekunda. Ves ta čas (117 sličic) animirajte sliko in izvozite fragment filma v katalog D:/Uporabnik/_ pod imenom pobeg.avi

Izvedbeni algoritem

1. Odprite program Flash MX 2004 (D:/SCHOOL/Flash MX 2004/*.exe).
2. Z orodno vrstico na delovnem prostoru ustvarite kolobok iz pravljice.
3. Dodajte sliko za ozadje:

- Z izbiro ukaza ustvarite novo plast Vstavi – Časovnica – Sloj(pojdite na drugo plast s klikom na ime plasti).
- Uvozite sliko ozadja File – Import – Import to stage.(Izberite sliko iz kataloga D:/FOTO/Kolobok/Slika1.jpg).
- Z orodjem Free Transform spremenite velikost slike, da se prilega okvirju.

Možnost – 2

telovadba . Ustvarite delček pravljice »Kolobok«, kjer se na sliki v ozadju (D:/FOTO/Kolobok/Image2.jpg) medenjak kotali po poti proti zajcu in sliši se naslednje besede:

Žemlja se kotali in sreča jo zajec:

- Ne jej me, kosa, zapel ti bom pesem.

Možnost – 3

telovadba . Ustvarite delček pravljice "Kolobok", kjer na sliki v ozadju (D:/FOTO/Kolobok/Image3.jpg) medenjak beži pred zajcem in se slišijo naslednje besede: In žemlja se je skotalila naprej - videl jo je le zajec.

Možnost – 4

telovadba . Ustvarite delček pravljice "Kolobok", kjer je slika v ozadju (D:/FOTO/Kolobok/ Slika4.jpg) žemlja se skotali po poti proti volku in ob tem se slišijo naslednje besede:

Žemlja se kotali po poti v gozdu in sreča jo zajec:

- Kolobok, Kolobok! pojedel te bom!
- Ne jej me, sivi volk, zapel ti bom pesem.

Možnost - 5

telovadba . Ustvarite delček pravljice "Kolobok", kjer je slika v ozadju (D:/FOTO/Kolobok/ Slika5.jpg) žemlja beži pred volkom in slišijo se naslednje besede:

Možnost - 6

telovadba . Ustvarite delček pravljice "Kolobok", kjer je slika v ozadju (D:/FOTO/Kolobok/ Slika6.jpg) medved se kotali po poti in slišijo se naslednje besede:

Žemlja se kotali po gozdu, sreča jo medved:

- Kolobok, Kolobok! pojedel te bom!
- No, kje me lahko, klobuka, poješ!

Možnost - 7

telovadba . Ustvarite delček pravljice "Kolobok", kjer je slika v ozadju (D:/FOTO/Kolobok/ Slika7.jpg) žemlja beži pred medvedom in slišijo se naslednje besede:

In žemlja se je spet skotalila – medved je samo gledal za njo.

Možnost - 8

telovadba . Ustvarite delček pravljice "Kolobok", kjer je slika v ozadju (D:/FOTO/Kolobok/ Slika8.jpg) žemlja se skotali po stezi proti lisici in ob tem se slišijo naslednje besede:

Žemlja se kotali in sreča jo lisica:

- Živjo, žemljica! Zapoj mi pesem!

Medenjak je začel peti svojo pesem, Alice je poslušala in se priplazila bliže.

Možnost - 9

telovadba . Ustvarite delček pravljice "Kolobok", kjer je slika v ozadju (D:/FOTO/Kolobok/ Slika9.jpg) žemlja skoči lisici na nos in zasliši se naslednje besede:

Lepa pesem! - je rekla lisica - Ja, stara sem - ne slišim dobro. Usedi se na moj mezinec in zapoj še enkrat.

Možnost - 10

telovadba . Ustvarite delček pravljice "Kolobok", kjer je slika v ozadju (D:/FOTO/Kolobok/ Slika10.jpg) lisica je pojedla žemljo in slišijo se naslednje besede:

Kolobok je skočil lisici na nos in zapel:

- Žemljica sem, žemljica!..
Alice - ah! - in pojedel.

7. Povzetek lekcije

Kakšna je risanka, ko ni akcije? Kaj bo z risanko, ki ne pripoveduje zgodbe? Verjetno ste že videli, kako umetniki v studiu rišejo skice po živem modelu. Takšne vaje so zelo uporabne za razumevanje anatomije in kako se mišice obnašajo med gibanjem. Vendar pa posebnosti prenosa takšnega gibanja ne zagotavljajo popolne jasnosti! Omejeno je na predvajanje resnično življenje, nič več. Gibanje in aktivnost sta v animaciji prikazana povsem drugače. Zato znanje o tem, kako pravilno narisati telo, ni dovolj. Še posebej pomembno je obvladati tehnike, ki bodo "oživile" formo. Prav o tem bomo govorili na tem tečaju!

Kaj je pomembno vedeti

Ko umetnik dela lik, ki se znajde v določeni situaciji, je zanj pomembno, da najprej ustvari akcijo. Katera koli scena, v katero postavite svoj lik, bi morala pomagati gledalcu videti namen, ki ga motivira za ukrepanje. Oglejte si motive, občutke, spretnosti (ali pomanjkanje le-teh) in osebnost kot celoto. Ta cilj je treba doseči tudi ob popolni odsotnosti dialoga. Tu ima risba prednost: lahko se igramo z govorico telesa in čustva napihnemo do skrajnosti. Ne bo vam treba plačati za igralce, studio ali druge stroške. Dovolj papirja in svinčnika. Domišljija ni omejena!

Če želite doseči te rezultate v animaciji, si morate prizadevati za dve stvari:

• Preprostost;
• ritem.

Postopoma bomo razumeli, kakšno vlogo ima vsak od njih v kompoziciji naslikanega prizora.

1. Krivulja gibanja

"Krivulja gibanja" je namišljena pot, po kateri se premika telo vašega lika. Odlikujeta jo preprostost in intenzivnost. Ta briljantna tehnika vam bo pomagala doseči želeni cilj pri načrtovanju vaših risb. Z njim boste lahko ustvarili dramatičen učinek. Imejte to v mislih, ko boste naslednjič skicirali like v akciji.

Krivulja gibanja mora biti gladka in mora imeti smer, tako da nam je očitno, kaj namerava posamezni lik narediti.

Opazite, kako nenavadno izgleda dizajn, ki temelji na kompleksnih krivuljah gibanja.

Primer nepravilne uporabe krivulje gibanja - črta ne sodi v kontekst na pravi način.

V risanki vidimo popoln primer preprostosti in ritma. Krivulja gibanja daje umetniku možnost, da poveča učinek svojih prizorov. Upoštevajte krivuljo, preden sploh začnete risati razmerja likov. Zagotavljam vam, da vas bo končna risba z gibanjem več kot zadovoljila.

Da bi natančno razumeli, katere tehnike in metode bodo pomagale vdihniti življenje risanim junakom, se moramo seznaniti s teoretičnimi načeli, na katerih te tehnike temeljijo.

2. 12 osnovnih principov animacije

Leta 1981 sta dva največja Disneyjeva animatorja (Frank Thomas in Ollie Johnson) napisala knjigo The Illusion of Life. Občinstvu sta predstavila "12 osnovnih konceptov animacije", ki jih studio uporablja že od tridesetih let prejšnjega stoletja, da bi ustvaril čim bolj realistično animacijo. Čeprav so bili ti koncepti razviti za uporabo v tradicionalni animaciji, ostajajo enaki še danes – tudi v digitalnih projektih.

Osnovni koncepti so naslednji:

• Squash in stretch
• Priprava ali predvidevanje (Anticipacija)
• Uprizoritev
• Akcija naravnost naprej in poza za pozo
• Vztrajnost in prekrivajoče se delovanje
• Počasi in počasi izstopajte
• Arh
• Sekundarno dejanje
• Časovna razporeditev
• Pretiravanje
• Končna risba (polna risba)
• Privlačnost (pritožba)

Moj cilj ni, da bi vas zasul s celotnim naborom tehnik animacije, zato se osredotočimo na najpomembnejše in poskusimo razumeti, kako lahko poživijo "dolgočasen" dizajn.

Stiskanje in raztezanje

To je glavna, če ne celo najpomembnejša tehnika, ki jo moramo uporabiti pri ustvarjanju gibalne dinamike likov. Celoten koncept se zmanjša na stiskanje in raztezanje proporcev lika ali predmeta glede na gibanje. Ta tehnika nam omogoča, da gibu dodamo težo in tekočnost. Oglejte si, kako se uporablja za predmet:

Bodite pozorni na fiziko odbijajoče se žoge: ko pospeši navzdol, se njena oblika raztegne. Ko žoga udari ob tla, se vodoravno raztegne (kar poudari silo gravitacijske privlačnosti).

Zgornji primer odlično ilustrira to tehniko. Malo verjetno je, da boste v resničnem življenju videli tako deformirano žogo, ko se odbije, toda v animaciji deluje odlično!

Primer, kako se ta tehnika uporablja za obrazno mimiko: Opazite, da se oblika vrha lobanje ne spremeni in samo spodnja čeljust sega navzdol.


Ista tehnika se uporablja za dejanja. Takoj lahko vidite, da lik nosi težko breme. Upoštevajte, da je celotna spodnja polovica telesa stisnjena, medtem ko je zgornja polovica raztegnjena.

Neverjetno, kajne? Ta tehnika nas pripelje do naslednje teme:

Pretiravanje

Tukaj ni kaj dosti povedati, saj je načelo samo po sebi očitno. Pretirane kretnje in položaji telesa ustvarjajo dramatičen učinek - to je obvezno pravilo animacije. Predstavljajte si, kaj se zgodi, ko smo presenečeni ali prestrašeni – naše telo se na presenečenje odzove spontano. Enako bi se moralo zgoditi z risani vzorec, vendar z veliko bolj izrazitim rezultatom!

Opazite, kako liku oči izskočijo iz jamic in zdi se, da je njegovo telo zamrznjeno. To je pretirana predstavitev naravne reakcije, ki jo lahko opazimo v življenju.

Po pravilih studia Disney mora ta tehnika verodostojno odražati življenje, vendar v bolj skrajni obliki. Pretiravanje pomeni spremembe v telesne lastnosti lik ali element prizora, v katerem se nahaja. Vendar ne pozabite, da je pomembno, da jasno razumete, kakšno gibanje ponazarjate s to tehniko, da ne zavedete gledalca.

Pretiravanje: bodite pozorni na poti lika. Pomagajo poudariti točko uporabe sile, s katero poskuša dvigniti breme. To bo gledalca zagotovo prepričalo, da je žoga izjemno težka!

Priprava ali pričakovanje

Priprava ali predvidevanje je tehnika, ki se uporablja za pripravo gledalca na dejanje, ki se bo kmalu zgodilo. Uporablja se za pripravo gibanja ali videza predmeta, lika ipd., tako imenovani predhodni nabor energije, ki je pogosto pred vrhuncem.

Klasičen primer priprave: lik bo pobegnil in zapustil oder!

Teoretično priprava nastane iz trenutnega gibanja, ki se mu hkrati zoperstavi gibanje v nasprotni smeri. V animaciji to večinoma vključuje pripravo na dejansko dejanje in vrnitev za dokončanje cikla.

Opazite, kako dodamo akcijo v zgornji animaciji: na začetku je kratko predvidevanje gibanja, ki nato služi kot spodbuda za gibanje. Nato opazujemo, kako se telo vrača iz gibanja v stanje mirovanja.

Postavitev je tehnika, ki se uporablja v animaciji, da gledalec pričakuje učinek, ki ga bo proizvedel prizor - pa naj bo statičen ali animiran. Za vajo poskusite poiskati druge primere uporabe te tehnike.

Ciljanje in poudarjanje

V animaciji kličemo "ciljanje" učinek, ki je pred njim "naglas". Oboje je potrebno, da izraz presenečenja izstopa. Izvajajo se po naslednjem algoritmu:

• Lik vidi nekaj neverjetnega;
• Pojavi se pričakovanje (glava hitro pade);
• Nastopi trenutek "poudarka", glava se dvigne.
• Lik se vrne v prvotno stanje.

Poglejmo, kako deluje ta algoritem.

1. korak

Začnemo z risanjem lika z veselim ali naravnim izrazom:

2. korak

Lik vidi nekaj neverjetnega in v pričakovanju trenutka spusti glavo navzdol in zapre oči. To gibanje poveča vtis, da vidi nekaj neverjetnega!

3. korak

4. korak

Lik se umiri in vrne v prvotno stanje.

Med tem procesom animatorji uporabljajo tehniko, imenovano čas prizor, v katerem so dodane vmesne faze za ustvarjanje gladkega prehoda med sličicami.

Tukaj vidimo uporabo tehnike "stisni in raztegni", ki gibanju doda mobilnost in zagon. V resničnem življenju je edini gibljivi del naše lobanje spodnja čeljust, ki se odpira in zapira. A v animaciji se da vse raztegniti – tudi glava!

K "tempiranju" se bomo vrnili malo kasneje.

Počasen vstop in počasen izstop

Povsem naravno je, da ko se pripravljamo na nenaden gib ali dejanje, ki zahteva napor, naše telo potrebuje določen čas, da koncentrira energijo, potrebno za to dejanje. Rezultat je trenutni pospešek (ali stalno enakomeren, odvisno od gibanja). Zaradi tega je animirani lik videti verjeten, število ključnih sličic in faz pa se spreminja glede na frekvenco – bolj pretirana slika dogajanja v resničnem življenju.

Ko želimo poudariti določeno gibanje v animaciji, postavimo več sličic na začetek in konec tega gibanja – vendar vključimo tudi manj faz vmes. To ustvarja počasen vstop in počasen izstop. Ta princip se pogosto uporablja v animaciji, ko želimo narisati gibanje lika med oddaljenimi položaji telesa – na primer skok.

Nasvet:Če ste spletni oblikovalec in delate s prehodi za ustvarjanje animacij na spletnih straneh, ste verjetno naleteli na koncept "časovnega usklajevanja", za katerega se uporablja funkcija Prehod v CSS3. Ta funkcija med drugimi parametri uporablja Smooth In in Smooth Out za opis krivulje hitrosti v animaciji. Podobno, če delate v After Effects, ste verjetno opazili v meniju Pomočnik za ključne okvirje ukazi »Gladno gladko«, »Miren vstop« in »Gladen izstop«. V enem ali drugem primeru, če ste uporabili te možnosti, to pomeni, da v svojih projektih že uporabljate slavni princip animacije!

Privlačnost

Privlačnost lahko opišemo z besedama »karizmatičnost« ali »osebna privlačnost«, ki ju umetnik podari svojim likom. Ni pomembno, ali je lik pozitiven ali negativen, junak ali zlobnež, moški ali ženska - najpomembneje je, da se gledalec lahko poistoveti z njim. Fizične lastnosti vplivajo tudi na vedenje in osebnost lika. Zato, ko lik ukrepa ali izrazi odnos do nečesa, je pomembno, da razmišljamo o tem, kako se bodo njegove telesne, socialne ali kulturne lastnosti uskladile s tem vedenjem/odnosom.

Oglejte si, kako zgornja risba posebej odraža privlačnost vsakega lika. Za poudarjanje določenih lastnosti so dovolj majhni detajli, na primer ženska silhueta ali podolgovat obraz butlerja in napeta, a vedno elegantna poza. Pri tem je pomembno razumeti naravo vsake značilnosti, ko jo dodajate svojim prizorom.

Opazujte, katere posebne gibe in dejanja naredi vsak lik, da se razkrije gledalcu. Se bodo obnašale kot čutne ženske? Kako je tat? Kot prevarant? Kako je s strežajem? Kako je kaj natakar? Kako je stilistka? Katera specifična Katere značilnosti odlikujejo ta lik? Kakšna oblačila nosijo? Nenehno moramo opazovati nianse vedenja ljudi v resničnem življenju, da lahko te podrobnosti uporabimo sebi v prid.

Na hitro pojdimo skozi vsako od preostalih načel, da dosežemo splošno razumevanje:

Uprizoritev

Uprizoritev je ustvarjena tako, da usmeri pozornost občinstva na pomembno komponento v kadru. V produkciji se lahko uporabijo dodatni scenariji ali predmeti. V bistvu je ta tehnika potrebna, da usmerimo pozornost na najpomembnejše in odstranimo vse nepomembne podrobnosti. Ta koncept se veliko uporablja v stripih. Barva, svetloba in kot kamere se uporabljajo za usmeritev gledalčeve pozornosti na najpomembnejše podrobnosti.

Avto sem dodal v okvir, da bi poudaril pomen dogajanja. Zdaj imamo jasen kontekst in vse postane jasno!

Skozi akcijo in pozo do poze

»Action-through« pomeni podrobno zgodbo animacije od začetka do konca. "Poza do poze" se nanaša le na risanje ključnih okvirjev, vrzeli med katerimi bodo kasneje dopolnjene s fazami. Zanimivo je, da se prva tehnika uporablja samo v 2D animaciji. Toda tehnika Pose to Pose se še vedno uporablja v filmski zgodbi in 3D animaciji.

Vztrajnost in prekrivanje

Inercija se nanaša na nadaljevanje gibanja posameznih delov telesa lika zaradi gibanja celotnega telesa. Na primer, nekateri deli telesa se še naprej premikajo kljub dejstvu, da se je lik nenadoma ustavil. "Prekrivanje" je tehnika, zaradi katere se nekateri deli telesa premikajo z določeno zamudo od glavnega. Na primer, telo, okončine ali lasje se premikajo v drugačnem časovnem intervalu kot glava. Kombinacija teh dveh tehnik vam omogoča ustvarjanje bolj realističnih animacij.

Opazite, kako se premikajo lasje in majica pri različnih hitrostih, ki sledi gibanju.

Arh

Ko gibanje lika sledi določeni poti, temu rečemo "lok". Predstavljajte si ciklične gibe rok dirigenta orkestra ali zaporedje gibov hitrostnega drsalca ali olimpijskega športnika, ki izvaja skok v višino. Vsak od njih naredi veliko gibov, ki se združijo v verigo gladkih zaporednih elementov. Če na kateri koli točki prekinete to verigo in prisilite svojega lika, da naredi nekaj, kar vanjo ne sodi, bo vaša animacija videti čudna.

Dejanje v ozadju

Dejanje v ozadju je dodano glavnemu dejanju v okvirju, da izboljša učinek, ki ga želite ustvariti. Predstavljajte si lika, ki hodi po ulici in ni pozoren na to, kar se dogaja okoli njega. Hkrati mimo njega drvijo avtomobili, da bi poudarili nevarnost. Ali pa si predstavljajte izraz dvoma na obrazu vrvohodca. To so primeri dejanj v ozadju okvirja, ki poudarjajo njegov pomen.

Časovna razporeditev

"Časovno merjenje" pomeni izračun števila risb, ki sestavljajo določeno dejanje. Na primer, predmet ali lik, ki se premika počasi ali s težavo, je običajno težak lik. Čas narekuje število sličic in faz, ki jih morate narisati, da prizor prenesete verodostojno. Enako boste morali storiti za risanje pljuč predmet.

Časovna razporeditev je izjemno pomemben koncept v animaciji in se pogosto uporablja za ustvarjanje likov in njihovih dejanj.

Končno upodabljanje

Končna risba se nanaša na natančnost risb na papirju. Risbe morajo imeti težo in prostornino, da jih lahko vidimo in pravilno interpretiramo. Vendar tukaj ne govorimo o podrobna risba da bo risba realistična. Govorimo o tem, kako svoje teoretično znanje risanja predstavljate javnosti. Umetnik, ki je obvladal osnove oblikovanja, lahko ustvari iluzijo volumna v svojih risbah, tudi v 2D skici. To je umetnost iluzije verodostojnosti.

Nekateri slogi animacije zahtevajo izjemen realizem pri upodobitvah predmetov, oblačil in drugih predmetov, da bi gledalcu predstavili prizor. Na primer, to je lahko določeno zgodovinsko obdobje, ki bi ga bilo treba prikazati prej najmanjše podrobnosti. Zato je poznavanje teoretičnih in praktičnih osnov risanja in človeške anatomije nenadomestljivo.

Platforma Tuts+ ima več člankov in tečajev, ki so jih napisali različni avtorji in vam bodo pomagali poglobiti se v osnove risanja. Tam lahko greš skozi različne sloge risanja in postaneš popoln umetnik.

3. Zaporedni gibi in cikli hoje

Po mnenju Kena Harrisa, animatorja pri Warner Bros., je "hoja prva stvar, ki se jo je treba naučiti." Nauči se siliti risani lik hoditi točno tako, kot potrebujete, je najtežja naloga v animaciji. Načinov je več, razlikujejo pa se glede na velikost, kompleksnost, kontekst in intenzivnost scene.

Zanimivo je, da hoja ni nič drugega kot poskus podpore v pokončnem položaju. Z drugimi besedami, poskušamo se izogniti padcu na tla! Predstavljajte si dojenčka, ki poskuša stati pokonci... s nagibanjem naprej lahko naredi refleksni korak.

Odrasli hodijo samozavestno in praviloma ne delajo nenadnih korakov. Pravzaprav komaj dvignemo noge od tal. Naši gibi so omejeni na minimum, glavni cilj je premikanje telesa naprej.

V animaciji je vse drugače. Hoja lika lahko pove celotno zgodbo. Zato bomo za dosego želenega rezultata uporabili tehnike pretiravanja in časovni razpored.

Analizirajmo poenostavljeni postopek na spodnji sliki:

Primer preprostega cikla hoje: telo se nekoliko dvigne navzgor stopnje prenosa.

Opazite, da se roke premikajo nasproti nog; in ko se telo dvigne v fazi zamaha, je ena noga zravnana.

Zdaj zapolnimo vrzeli z dodatnimi fazami in zaključimo glavni cikel hoje v animaciji:

Različne vrste hoje in teka

Kot sem že omenil, so v animaciji (in v življenju) različni sprehodi in z njimi je mogoče posredovati želene občutke in želje likov. To sporočajo različne predloge:

Znani vzorci animacije: Ti so bili ustvarjeni na podlagi knjige Cartoon Animation avtorja Prestona Blaira. Prepričan sem, da poznate te slike iz različnih risank.

Primer pohodni korak: Telo se ves čas premika gor in dol.

Razlike v hoji štirinožcev

Gibanje štirinožcev je bolj zapletena tema, saj morate spremljati gibanje sprednjih in zadnjih nog. Gladkost vam bo otežila delo, vendar se je vredno učiti iz resničnih primerov gibanja.

Hoja živali iz risanke je poenostavljena interpretacija dogajanja v resničnem živalskem svetu. Mišice in sklepi zavzemajo različne položaje glede na fazo gibanja telesa:

Poglejte zgoraj, kako se obnašajo sprednje in zadnje noge stopnje prenosa telo: glava se rahlo spusti, ko se zadnja noga premakne naprej. Nasprotno se zgodi med zamahom sprednje tace.

V animaciji obstajajo tudi druge vrste živalske hoje, ki sledijo svojemu ritmu. Spodaj si oglejmo dva izmed njih:

telovadba. Poskusite najti trajektorije gibanja na zgornjih slikah. Upoštevajte tudi, da je galop sijajen primer uporabe stiskanja in raztezanja.

Primer animiranega galopa. Sprednje tace sprožijo gibanje in zagotovijo potreben impulz.

Realistično upodabljanje cikla hoje ali teka je odvisno od več dejavnikov, kot so teža, višina, namen ... Najpomembnejše pri tem je opazovanje teh gibov na podlagi resnični primeri iz življenja.

Risanje hoje in teka je precej zapletena tema, ki si zasluži ločen tečaj, namenjen samo njej. Nekatere živali, kot so konji, imajo razlike v anatomiji, zaradi česar se njihove noge drugače premikajo. Oglejte si rubriko "Kopitarji" v mojem, tam bo več podrobnosti. Če želite globlje pogledati v gibanje konj, si oglejte to knjigo Monike Zagrobelnaya.

Vse skupaj

Preden zaključimo, sem ustvaril zaporedje animacij, ki združuje primere več zgoraj obravnavanih tehnik. Ali lahko poveste, kateri se uporablja?

Konec!

O vlogi tradicionalne animacije v umetnosti 21. stoletja se danes aktivno razpravlja. Sodobni studii za animacijo, kot sta Pixar ali Dreamworks, še vedno uporabljajo vsaj 90 % zgoraj opisanih tehnik. Sposobnost oživiti risbo – bodisi s pomočjo pin-upov, stripov ali animacije – je čudovita stvar. Če lahko otroka prepričamo, da lahko žival govori in se obnaša kot človek, je to neverjetno. Ko se v gledalcu prebudijo čustva, nobena beseda ne more izraziti občutkov, ki jih umetnik v tistem trenutku doživlja.

Carlos Gomes Cabral

Sem izdelek iz norosti 80-ih, živim v mestu Rio de Janeiro (Brazilija). Že od otroštva imam rad umetnost, stripe in glasbo, posvečal sem se več projektom hkrati in sovražim sedenje pri miru. Z diplomo iz informatike trenutno delam v podjetju za tehnološko mobilnost . Zaljubljen sem tudi v gibljivo grafiko, HTML5, spletno oblikovanje in trende UX. Najdete me na Twitterju (@cgcabral).