În această lecție ne vom uita la ce înseamnă să animați mișcarea unui obiect de-a lungul unui traseu de ghidare dat (ghid). Să creăm un obiect condiționat și să desenăm o cale pentru el de-a lungul pe care va trece.

Creați un nou document ActionScript 3.0

Ca de obicei, creați un nou document „Action Script 3.0”. În bara de instrumente din dreapta, selectați „Instrument dreptunghi” și plasați-l pe scenă.

Transformăm obiectul rezultat într-un simbol selectându-l cu „Instrumentul de selecție” și apăsând butonul din dreapta al mouse-ului.

Acum, în panoul „cronologie”, trebuie să selectați al cincizecelea cadru și să îl faceți cel cheie. Faceți clic pe butonul din dreapta al mouse-ului și apelați meniul contextual, unde selectăm „Insert Keyframe”.

Să creăm un ghid, o cale de-a lungul căreia obiectul se va mișca. Pentru a face acest lucru, faceți clic dreapta pe strat și selectați „Add Classic Motion Guide” în meniul contextual care apare.

Ar trebui să ajungeți cu două straturi ca acesta:

Acum trebuie să desenați pe stratul „Ghid” calea pe care se va mișca obiectul. Folosind instrumentul Creion, care se află în panoul din dreapta, desenați un ghid.

Dacă calea desenată se dovedește a fi puțin neuniformă, atunci poate fi netezită folosind Instrumentul Smooth, care, ca un creion, este situat în panoul din dreapta. Mai întâi, folosind Instrumentul de selecție, faceți dublu clic pe ghid și apoi faceți clic pe Instrumentul Smooth.

Plasați un obiect pentru a crea animație în mișcare

Acum să plasăm obiectul nostru pe calea desenată. Pentru a face acest lucru, stați pe primul cadru al stratului, luați obiectul folosind „Instrumentul de selecție” și mutați-l la marginea din stânga a liniei, se va „lipi” de el sau, mai degrabă, punctul de ancorare al obiectului. se va alătura ghidului.

Același lucru trebuie făcut pentru cel de-al cincizecilea cadru, luați obiectul și plasați-l pe marginea dreaptă a liniei.

Acum trebuie să creați cadre intermediare, astfel încât programul însuși plasează obiectul acolo unde este necesar în fiecare cadru. Pentru a face acest lucru, pur și simplu selectați orice cadru din mijloc de pe stratul în care se află obiectul și faceți clic dreapta, selectați „Creare Classic Tween”.

Ca rezultat, ar trebui să obținem două astfel de straturi:

Începem animația mișcării obiectului

Să vedem ce s-a întâmplat. Să trecem la lucrul principal meniul de sus„Fișier -> Publicare previzualizare -> Flash” sau apăsați ctrl+enter de pe tastatură. Pentru a vizualiza direct în program, apăsați tasta Enter.

Să facem obiectul să se „întoarcă” în timp ce merge de-a lungul căii. Pentru a face acest lucru, selectați primul cadru de pe stratul în care se află obiectul și rotiți-l puțin folosind Instrumentul de transformare gratuită, care se află în panoul din dreapta.

Acum, în proprietățile obiectului, fiind pe primul cadru, selectați „Orientați spre cale”.

Selectați al cincizecea cadru de pe stratul în care se află obiectul și, la fel ca în primul cadru, rotiți-l puțin.

Pentru a vedea ce s-a întâmplat, apăsați ctrl+enter.

După cum am menționat deja, cadrele pot fi simple și cheie. Următoarele opțiuni pentru implementarea lor sunt posibile în Flash.

Animație în mișcare– în cadre cheie se desenează începutul și sfârșitul mișcării, în cadrele simple se face o trecere treptată de la o fază cheie la alta. În mod implicit, comanda corespunzătoare creează automat mișcare liniară și uniformă pentru tot ceea ce este conținut în stratul dintre două cadre cheie. În versiunile mai vechi, Macromedia Flash, comanda era Creați interpolare de mișcare. În versiunile noi, Adobe Flash, trebuie să utilizați comanda Creați o interpolare clasică de mișcare.

De asemenea, sunt posibile modificări ale culorii și transparenței, precum și rotația obiectelor. Aceste tipuri de animație nu diferă fundamental de mișcare - în ambele cazuri, proprietățile stratului se modifică.

Dar există și alte tipuri speciale de mișcare.

1. Mișcarea de-a lungul unei traiectorii.În versiunile mai vechi, pentru a seta mișcarea neliniară, a fost necesar să se creeze un nou strat special deasupra stratului cu obiectul în mișcare. În acest strat, a fost trasată o traiectorie de mișcare folosind orice metodă (linie dreaptă curbă, linie Bezier, creion). Apoi, folosind anumite manipulări, obiectul a fost legat de traiectorie.

În Adobe Flash nu trebuie să creați un strat special, dar trebuie să utilizați comanda Creați o animație în mișcare.Traiectoria a devenit mai ușor de desenat poate fi completată cu o serie de efecte (de exemplu, rotație). În același timp, poate fi ușor invizibil.

2. Mișcare cu accelerare/decelerare. Pentru a crea o mișcare neuniformă pe o filă Proprietăți exista un motor uşurarea. Acest parametru poate varia de la -100 la +100. O valoare negativă corespunde unei creșteri a vitezei spre finalul mișcării, o valoare pozitivă – o decelerare spre finalul mișcării.

Pentru a proiecta începutul și sfârșitul mișcării, trebuie să creați încă 1 sau 2 cadre cheie în intervalul de timp și să faceți o accelerare la început și o decelerare la sfârșit. Este mai bine să setați valorile limită: ±100 valorile intermediare sunt de obicei ineficiente. Și pentru viteze și accelerații mari, este necesară animația cadru cu cadru.

Animație stop motion– este format doar din cadre cheie, fiecare cadru este creat manual. Evident, acest tip de animație are sens de introdus dacă acțiunea este foarte dinamică și variată.

Pentru a mări timpul de afișare a cadrelor, puteți introduce 1-3 cadre simple între cadrele cheie, copiend cheia anterioară. În acest caz, animația va rămâne în continuare cadru cu cadru, doar timpul de expunere al cadru va crește.

În sfârșit, cu ajutorul animației cadru cu cadru, puteți face mișcări speciale mult mai precise: cu accelerații/decelerații mari, pe o traiectorie complexă etc.

Animație de formular– are loc o tranziție treptată a unei figuri de o formă într-o figură de altă formă. În același timp, dimensiunea, locația și culoarea se pot schimba.

Dar există multe restricții cu privire la animația formularului. Nu merge:

· cu grafică raster;

· cu text;

· cu grupuri de obiecte – obiectele grupate nu pot fi deformate;

· cu cleme – doar un obiect static poate fi deformat.

Animația formularului este implementată în același mod ca și animația în mișcare, doar într-o fereastră Proprietăți → Tween trebuie sa alegi nu Moțiuni, A Formă(în versiuni noi - Creați o animație de formular). Culoarea cadrelor cu animație de formă este verde.

În animația de formulare, punctele indicii joacă un rol important. Ele sunt plasate în cadrele cheie de început și de sfârșit. Ele sunt desemnate prin litere ale alfabetului latin: a, b, c, dși așa mai departe. Pot exista un total de 26 de puncte indicii, până la z. Literele sunt plasate în sensul acelor de ceasornic.

Semnificația punctelor indicii este că locația indicată de punct (de exemplu, o) în cadrul cheie warp inițial, ar trebui să ajungă în locația indicată de același punct ( o) la cadrul cheie final. Și dacă în cadrul final punctele sunt plasate în alte locuri, atunci deformarea va lua o altă cale. Fazele intermediare pot fi complet diferite, inclusiv cele nedorite.

În general, animația de formular este un proces capricios. Pentru ca deformarea să se desfășoare conform intenției, este adesea nevoie de mult timp. În plus, se întâmplă că necesită resurse de calcul mari, iar computerul poate îngheța. Acest tip de animație are sens să fie folosit atunci când animația în mișcare nu duce în mod clar la rezultate bune. Și animația cadru cu cadru va necesita prea multă muncă.

Lecția 4. Crearea animației

Macromedia Flash MX 2004 oferă mai multe modalități de a crea secvențe de animație:

Efecte de animație - programul în sine creează o secvență de cadre care simulează un anumit efect în raport cu un anumit obiect;

Animație cadru cu cadru - utilizatorul creează fiecare cadru al viitoarei animații;

Animație interpolată automată, sau animație de transformare, - utilizatorul setează cadrele de început și de sfârșit, iar programul însuși creează cadre intermediare pe baza interpolării software.

Efecte de animație

Flash MX 2004 include efecte de animație predefinite (efecte de cronologie) care vă permit să creați animații complexe cu un număr minim de pași. Puteți utiliza funcția Efecte cronologice la următoarele obiecte:

Obiecte grafice, inclusiv forme, obiecte grupate și simboluri grafice;

Imagini raster;

Când adăugați efecte de animație unui obiect, Flash creează automat un strat adecvat și toate transformările de mișcare și formă necesare pentru acel efect sunt implementate în acel strat. Noul strat primește automat același nume ca efectul.

De exemplu, să creăm un efect de „explozie” pe text. Pentru a face acest lucru, tastați o anumită expresie sau cuvânt (Fig. 1), selectați-l folosind instrumentul Săgeată și executați comanda Inserare => Efecte cronologie => Efecte => Explodare.

Orez. 1. Obiect text selectat

Ca rezultat, va apărea un panou cu același nume (Fig. 2), oferind posibilitatea de a configura o serie de parametri de efect.

Orez. 2. Explodare panou

Prezența unei ferestre de previzualizare vă permite să analizați diferite variații de efecte fără a părăsi panoul Exploda. După ce ați selectat opțiunile necesare, faceți clic pe butonul Bineși veți obține ceva ca această animație.

Efecte similare pot fi aplicate unei imagini raster. Să luăm în considerare un exemplu cu dispariția lină a unei imagini raster. Importul unui bitmap în scenă folosind o comandă File => Import => Import to stage(Fig. 3) și aplicați efectul Blur la comandă Inserare => Efecte cronologie => Efecte => Estompare clip video.

Orez. 3. Bitmap importat în scenă

Pentru a edita un efect de animație, selectați obiectul asociat efectului pe scenă și în fereastra care apare Proprietăți faceți clic pe butonul Edita(Fig. 4) - ca urmare, va apărea un panou Estompa.

Orez. 4. Buton Edita situat în partea de jos a panoului Proprietăți

În panou Estompa puteți modifica din nou parametrii efectului și puteți salva noile setări (Fig. 5).

Orez. 5. Panoul Estompa vă permite să modificați setările pentru efecte

Animație stop motion

Să luăm în considerare cel mai simplu exemplu- bucata de hârtie se deplasează dintr-un punct de pe ecran în altul cu rotire în jurul axei sale.

Orez. 6. Primul cadru cheie al animației

Să desenăm o frunză de arțar, de exemplu, așa cum se arată în Fig. 6, - cadru corespunzător pe panou Cronologie va deveni gri și va apărea un punct în interiorul acestuia, indicând faptul că acesta este un cadru cheie. Un cadru cheie este un cadru în care conținutul este plasat sau modificat.

Orez. 7. Creați al doilea cadru trăgând și transformând primul

Apoi faceți clic dreapta pe cadrul adiacent și introduceți un alt cadru cheie folosind comanda Inserați un cadru cheie. Ca rezultat, o copie a frunzei va apărea în acest cadru; mutați-l în jos (folosind instrumentul Săgeată) și rotiți-l folosind comanda Modificare => Transformare => Transformare gratuită(Fig. 7).

Să repetăm ​​procedura astfel încât în ​​al 6-lea cadru foaia să-și ocupe poziția finală (Fig. 8).

Orez. 8. Ultimul cadru de animație

Acordați atenție panoului Proprietăți(Fig. 8) - tipul de obiect este indicat în partea stângă. În fiecare cadru, frunza este un obiect de tip Formă(form), alte tipuri de obiecte vor fi discutate puțin mai târziu.

Pentru a exporta un film ca fișier SEF (formatul nativ Macromedia pentru filme Flash), rulați comanda Fișier => Export => Export film. Ca rezultat, obținem următorul film leave1.fla). Puteți vizualiza filmul rezultat fără a părăsi programul Flash prin comandă Control => Testează filmul

. Mai mult, pentru a vedea cât spațiu este ocupat de cadrele individuale ale filmului, ar trebui să rulați comanda. Ca rezultat, vom vedea că fiecare dintre cele șase cadre ocupă aproximativ 600 KB (Fig. 9). Astfel, dimensiunea întregului film este de 3686 de octeți. Orez. 9. Vizionarea unui film în

Profil de lățime de bandă

Pentru a evalua dacă este mult sau puțin, luați în considerare modul în care un film similar poate fi realizat folosind animația automată sau animația de transformare a mișcării.

Animație automată

Orez. 10. Obiectul se transformă automat într-un simbol grafic Să vedem cum poți face aceeași animație și să obții un fișier rezultat mai compact. Selectați frunza desenată pe ecran cu instrumentul Săgeată și executați comanda Inserare => Cronologie => Creare interpolare de mișcare Proprietăți, ca urmare, prospectul va fi plasat într-un cadru, iar în panou va apărea un mesaj că obiectul selectat are proprietăți(Fig. 10). Aceasta înseamnă că obiectul animat este convertit automat într-un simbol grafic. Acum nu mai este posibil să-l editați în mod arbitrar cu instrumentul Săgeată ca obiect de tip Shape. Utilizarea simbolurilor este un concept important în Flash. Odată creat un simbol, acesta poate fi folosit de mai multe ori într-un film fără a mări dimensiunea fișierului rezultat. Simbolurile sunt împărțite în simboluri grafice, simboluri butoane și simboluri clipuri video. În această lecție ne vom uita la un simbol grafic și vom reveni la alte tipuri de simboluri mai târziu. Fiecare simbol nou

devine imediat parte a bibliotecii documentului curent (Fig. 11).

Orez. 11. Fiecare simbol nou devine parte a bibliotecii Dacă executați comanda Fereastra => Biblioteca , apoi vă puteți asigura că un simbol a apărut în bibliotecă și i se atribuie implicit numele Tween 1. Pentru a atribui un alt nume unui simbol, faceți dublu clic pe nume și înlocuiți-l cu cel dorit. După ce am format simbolul grafic, să trecem la ultimul cadru al animației noastre (fie al 15-lea cadru) și să introducem un cadru cheie (folosind comanda Inserare Cadru cheie ). În acest cadru va apărea o copie a simbolului, pe care o vom muta și roti în jurul axei sale (folosind comanda Modificați Transformare => Transformare liberă ), ca în exemplul anterior. După cum se poate observa din fig. 12, toate cadrele dintre două cadre cheie sunt colorate în albastru și o săgeată se întinde de la primul cadru cheie la ultimul, ceea ce indică crearea animației.

Motion Tween ), ca în exemplul anterior. După cum se poate observa din fig. 12, toate cadrele dintre două cadre cheie sunt colorate în albastru și o săgeată se întinde de la primul cadru cheie la ultimul, ceea ce indică crearea animației

Orez. 12. O săgeată pe un fundal albastru indică crearea animației Prin executarea comenzii Control => Testează filmul

, obținem informațiile prezentate în Fig. 13.

Orez. 13. Vizionarea unui film în modul Bandwidth Profiler

În ciuda faptului că în acest exemplu avem 15 mai degrabă decât șase cadre, ca în cel precedent, iar animația este mai netedă, dimensiunea fișierului rezultat este mai mică - doar 900 de octeți. După cum se poate observa din diagramă (Fig. 13), informațiile despre obiect sunt stocate numai în primul cadru, iar în fiecare cadru nou este necesar să rețineți doar noile poziții ale foii. Aceasta durează în medie doar 20 de octeți. Pentru a ilustra caderea unei foi cu rotatie in jurul planului foii, repetam exemplul anterior, doar la modificarea ultimului cadru cheie adaugam comanda Modificare => Transformare => Flip

Orizontală. Drept urmare, obținem următorul film. Acum să ne uităm la un exemplu când o frunză se apropie de privitor. Pentru a face acest lucru, în cadrul final, în loc de oglindire () vom mări dimensiunea foii. Pentru a evita senzația de încetinire atunci când un obiect se apropie de privitor, viteza de mișcare a acestuia trebuie mărită. Pentru a obține acest efect, trebuie să faceți clic pe primul cadru și să consultați secțiunea Uşuraîn panou Proprietăți.

Valorile pozitive ale parametrului Ease determină încetinirea mișcării, în timp ce valorile negative determină accelerarea mișcării. Să alegem accelerația maximă a obiectului.

Orez. 14. Selectați accelerația maximă a obiectului Ease = –100 Pentru a face acest lucru, setați valoarea parametrului Uşura

egal cu –100 (Fig. 14). Rezultatul este un film. Rețineți că primul cadru poate fi plasat și în spatele scenei, apoi vom obține un film în care frunza va zbura în cadru și se va deplasa către privitor. Puteți simula rotația unei foi în jurul unui centru de simetrie deplasat. Sper că cititorul însuși va putea experimenta, făcând mai dificilă modificarea cadrului final și schimbând astfel natura mișcării foii.

Din exemplele prezentate, este evident că animația automată în mișcare este eficientă atunci când transformarea unui obiect în timpul mișcării acestuia este specificată prin funcții simple (rotire, scalare etc.). Dacă este necesar să animați mișcări complexe (de exemplu, mișcarea mâinii unui personaj de desene animate), atunci animația de transformare a mișcării nu este aplicabilă. Fiecare cadru trebuie desenat manual, adică se folosește animația cadru cu cadru, constând dintr-un set de cadre cheie. Astfel, animația cadru cu cadru este cea mai versatilă, dar în același timp cea mai laborioasă tip de animație, în plus, creează cele mai „grele” fișiere. Ori de câte ori este posibil să înlocuiți animația cadru cu cadru cu animație automată, aceasta este de preferat. Să ne uităm la o serie de exemple care vă permit să utilizați animația automată în mișcare atunci când simulați un zbor.

Mișcarea pe o traiectorie dată Flash vă permite să setați mișcarea unui obiect pe o anumită cale. Pentru a seta această traiectorie, executați comanda.

Inserare => Cronologie => Ghid de mișcare Drept urmare, deasupra stratului curent va apărea un strat special, care implicit va avea numele.

Stratul de ghidare 1

Să facem clic pe stratul de traiectorie și să folosim instrumentul creion pentru a desena o linie de-a lungul căreia intenționăm să mutăm foaia (Fig. 15).

Orez. 15. Exemplu de specificare a unei traiectorii de mișcare Proprietăți Acum să trecem la primul cadru (click pe el cu mouse-ul) și în panoul care apare bifați caseta Snap

(setează modul de legare la traiectoria mișcării) - fig. 16. bifați caseta Orez. 16. Parametru

După ce bifați caseta bifați caseta, centrul foii se va alinia cu traiectoria de mișcare. Folosind instrumentul Săgeată, puteți muta frunza de-a lungul traseului de mișcare, dar dacă încercați să rupeți foaia de pe traseu și să o așezați lângă ea, aceasta va fi trasă înapoi și „lipi” din nou de calea mișcării (Fig. 17).

Orez. 17. Obiectul pare să se lipească de traiectoria mișcării cu centrul său

Mergeți la ultimul cadru și legați în mod similar foaia de punctul final al căii de mișcare. Pentru a da volum filmului, adăugați transformare Flip orizontal, - ca rezultat obținem filmul .

Când o foaie se mișcă de-a lungul unei traiectorii, nu contează pentru noi cum va fi rotită în direcția mișcării. Dar dacă stabilim în mod similar calea de zbor a unei păsări, atunci în unele părți ale curbei se dovedește că pasărea zboară prima coadă.

Evident, dacă vrem să animam zborul unui avion sau al unei păsări, atunci avem nevoie de ea pentru a mișca nasul înainte în orice moment. În Flash, acest tip de mișcare este foarte ușor de setat (Fig. 18).

Orez. 18. Dacă bifați caseta Orientați spre Cale, pasărea va zbura cu capul întâi

Caseta de selectare necesară Orientați spre Cale, iar mișcarea păsării se va schimba într-una complet familiară (sursa pentru acest videoclip este zborul unei păsări.fla).

Orez. 19. Adăugarea unui fundal cu o singură culoare

Dacă doriți să adăugați un fundal cu o singură culoare, faceți clic pe fundal și în panoul care apare Proprietăți(Fig. 19) în câmp Fundal selectați culoarea de fundal dorită.

Dacă vrem să adăugăm imagine de fundal, vom avea nevoie de un strat separat pentru asta. În principiu, Flash oferă posibilitatea de a crea un sistem de straturi similar celor folosite în animația clasică, în care fundalul și diferitele obiecte în mișcare sunt desenate fiecare pe propriul strat de transparență.

Prin plasarea imaginii de fundal și a fiecărui obiect animat pe propriul strat, este mult mai ușor să obțineți controlul asupra acestora. Deci, pentru a adăuga o imagine de fundal, să creăm un nou strat pentru aceasta. Pentru a face acest lucru, faceți clic dreapta pe stratul prezentat în Fig. 19 este desemnat ca strat 1, iar în meniul derulant selectați linia Inserare strat. În stratul adăugat trageți soarele. Pentru a nu ne confunda cu numerele stratului, să dăm stratului numele „fond”. Pentru a face acest lucru, faceți clic pe numele curent și introduceți numele dorit (Fig. 20).

Orez. 20. Creați un obiect de fundal staționar pe un nou strat

După cum se poate observa din fig. 20, pasărea se află în spatele soarelui, ceea ce este contrar bunului simț. Pentru a schimba straturile, trebuie doar să utilizați modul de glisare și plasare pentru a trage în jos stratul numit „fond.

Să edităm obiectele filmului (astfel încât pasărea să se rotească pe fundalul soarelui, să schimbăm traiectoria zborului său și să schimbăm raportul dintre dimensiunile soarelui și pasărea) și să obținem următorul videoclip.

Orez. 21. Pentru a anima norul, creați un strat separat

Acum să adăugăm obiecte în mișcare la animația noastră, de exemplu un nor. Pentru nor, creați un nou strat și setați animația de transformare a mișcării pe el. Pentru ca norul să zboare în scenă, îl vom poziționa așa cum se arată în Fig. 21. Ca rezultat, obținem următorul film (sursa pentru acest film este în fișierul atașat

În prima lecție a mini-cursului de bază „Fundamentals of Animation in Actionscript 3.0” veți afla despre:

1. Ce este animația
2. Cum să realizați iluzia mișcării folosind cadre
3. Despre posibilitățile de animație cadru cu cadru
4. Despre caracteristicile și avantajele animației software

Adobe Flash este în esență un fel de mașină de animație. Deja în primele sale versiuni, el l-a creat folosind conceptul Tween. Se compune din următoarele:

• pe linia temporală sunt create două cadre cheie cu conținut diferit (se schimbă pozițiile obiectelor, forma, culoarea acestora etc.);
• Flash creează toate cadrele intermediare (de tranziție) în mod independent (Fig. 1).

Iată cum arată în Adobe Flash CS6.

Dar această lecție și cursul în general nu sunt doar despre Tween, ci despre un limbaj puternic care este încorporat în Flash și se numește ActionScript. Studiind-o, vei învăța o mulțime de lucruri utile și practice, în special în secțiuni precum imitarea fenomenelor fizice din lumea reală și a calculelor matematice. Evident, astfel de cunoștințe vă vor oferi control complet atunci când creați aplicații interactive, ceva ce nu ai putea realiza niciodată cu Tween singur.

Dar înainte de a intra în tehnicile, tehnicile și formulele specifice care vă vor ajuta să animați obiecte folosind ActionScript, să aruncăm o privire mai atentă asupra ideii de animație, a unor tehnici de bază, a modului în care sunt utilizate și a modului de realizare. este mai interesant și, cel mai important, dinamic.

Ce este animația?

Deci, ce este mai exact animația? Definiția acestui concept poate fi găsită în multe dicționare. Iată, de exemplu, una dintre ele, pe care o oferă Wikipedia:

Tradus în limba de zi cu zi animația înseamnă mișcare. Dacă extindem oarecum această definiție, putem spune că animația este o schimbare în timp. Acest lucru este valabil mai ales pentru modificările vizuale (vizibile). Mișcarea este o schimbare a poziției în timp. La un moment dat obiectul se afla într-un loc, iar un minut mai târziu în altul. Teoretic, el s-a aflat și în puncte intermediare între început și sfârșit pe măsură ce timpul trece.

Dar un obiect nu trebuie să-și schimbe poziția pentru a fi considerat animat. Îl poate schimba pe al lui formă exterioară. În anii 90 (îngrozitor de spus, secolul trecut!) au fost populare programe de calculator care a făcut morphing.

De exemplu, ai două poze: o fată și un tigru. Programul creează o tranziție/animație lină între ele (morphing).

Pentru a crea acest videoclip flash a fost folosit programul Sqirlz Morph 2.1.

Când se transformă, un obiect își poate schimba și dimensiunea sau locația. De exemplu, în acest fel puteți crea iluzia unui copac în creștere, a unei mingi care se învârte sau a unei schimbări de culoare într-un obiect.

Legarea animației de timp este un concept important.

Fără mișcare sau schimbare vizibilă, nu există animație și, prin urmare, nu există nici un sentiment de timp pentru privitor!

Probabil că ați văzut de multe ori o fotografie în care nu există nicio mișcare, de exemplu, o cameră goală sau un peisaj urban.

Într-o astfel de situație, este dificil să spui ce este în fața ta: o fotografie obișnuită sau un videoclip. În timp ce privești, observi brusc mici modificări ale cadrului: mișcare ușoară, o schimbare a fluxului de lumină sau o schimbare în umbră. Chiar și astfel de mici schimbări îți comunică în mod clar acest lucru timpul trece iar dacă vei continua să urmărești, poate că se va schimba altceva. Dacă nu există nicio schimbare în următoarea perioadă de timp, vei simți din nou că te uiți la o fotografie. Prin urmare, absența timpului în cadru înseamnă că imaginea va rămâne neschimbată.

Toate cele de mai sus ne aduc la o concluzie foarte importantă: animația, mișcarea ne trezește interesul vizual.

Toată lumea își amintește pictura lui Leonardo da Vinci „Mona Lisa” - o capodopera a picturii, una dintre cele mai faimoase picturi din istoria artei mondiale.

Se poate presupune cu un grad ridicat de probabilitate că persoană obișnuită se va plictisi după doar câteva minute de inspecție și foarte curând începe să caute următorul obiect de „studiat”. Dar, începe să-i arăți cel mai recent blockbuster de la Hollywood și nu va observa cum vor trece câteva ore. Aceasta este puterea animației!

Cum să creați iluzia mișcării în animația stop-motion

Să revenim pentru o secundă la definiția animației pe care am introdus-o mai sus:

Animația este o tehnică de creare a iluziei imaginilor în mișcare (mișcarea și/sau schimbarea formei obiectelor - morphing) folosind o succesiune de imagini statice (cadre) care se înlocuiesc între ele cu o anumită frecvență.

Autorii unor astfel de definiții sunt nevoiți să introducă în ele cuvântul iluzie. Se întâmplă adesea ca doar iluzia mișcării să existe în acele tipuri de artă sau media pe care le întâlnim în viață. Prin urmare, acesta este momentul să introduceți conceptul de personal.

În teorie, toate tipurile de animație vizuală folosesc cadre - o secvență de imagini sau fotografii afișate rapid spectatorului pentru a simula mișcarea sau schimbarea.

Ceea ce vezi pe un ecran de computer, televizor sau într-un cinematograf se bazează pe cadre. Totul a început cu primele filme de animație, în care imaginile individuale erau desenate pe foi de film transparent, și primele filme, în care aceeași tehnică a fost folosită pentru a afișa o serie de fotografii.

Conceptul este simplu: vi se arată o secvență de imagini, una după alta, care sunt ușor diferite unele de altele, iar creierul dvs. le conectează într-o singură imagine în mișcare.

Atunci de ce ar trebui să o numim iluzia mișcării?

Dacă vezi o fată mergând pe stradă pe ecranul monitorului tău, asta nu este mișcare? Desigur, aceasta este doar o imagine a unei fete și nu un obiect real, dar nu acesta este motivul principal pentru care considerăm o astfel de mișcare o iluzie.

Îți amintești când vorbeam despre un obiect care la un moment dat se află într-un loc și un minut mai târziu în altul? În același timp, am spus că se mișcă în spațiu real. Numai acest tip de mișcare îl putem numi real. Obiectele se deplasează în spațiu fără probleme și nu brusc, așa cum se întâmplă în toate tipurile de animație cadru cu cadru. În ele, obiectul nu se mișcă dintr-un loc în altul; el dispare și apoi apare în altă parte în următoarea fotografie. Cu cât se mișcă mai repede, cu atât astfel de sărituri sunt mai lungi.

Dacă ți-aș arăta o fotografie cu o fată într-un loc, iar câteva secunde mai târziu o altă fotografie cu aceeași fată, dar într-un loc diferit, atunci ai spune că acestea sunt două fotografii, și nu o animație.

Dacă ți-aș arăta câteva fotografii cu ea în mișcare, ai spune totuși că aceasta este doar o serie de fotografii.

Dacă ți-aș arăta o serie de fotografii destul de repede, nu s-ar schimba faptul că sunt încă fotografii, dar ai începe să le percepi diferit.

Creierul tău ar începe să-i vadă ca pe o fată în mișcare. De fapt, o astfel de reprezentare nu este diferită de primele două fotografii, adică. nu există o mișcare reală în ele, dar la un moment dat creierul renunță și cumpără această iluzie. Desigur, acest efect a fost foarte bine studiat în industria producției de film.

În urma cercetărilor, s-a constatat că la viteza de afișare 24 de cadre pe secundă, privitorul le percepe ca pe o singură imagine în mișcare. Dacă o arăți mai încet, imaginea începe să „sare” iritant și iluzia mișcării este distrusă. Dacă accelerați până la 50 de cadre pe secundă, atunci acest lucru nu va adăuga realism imaginii (deși în animația software, atunci când privitorul interacționează cu imaginea, răspunsul va fi mai rapid, iar mișcarea obiectelor la viteze mari va fi mai „lină”. ”).

Conceptul de cadru face posibile trei lucruri:

• depozitare
• transmitere
• și arată

Evident, nu poți stoca, transfera și apoi arăta o fată adevărată mergând pe stradă, dar poți stoca imaginea/fotografia ei sau o serie de ele, apoi le poți transfera și arăta. În acest fel, aveți posibilitatea de a reda animații aproape oricând, oriunde, atâta timp cât aveți acces la fotografiile salvate și posibilitatea de a le afișa.

E timpul să dăruiești mai mult definiție generală cadru. Până acum, când vorbim despre asta, ne referim la o fotografie, poză sau desen. Acum să numărăm astfel: un cadru este o înregistrare a unui sistem la un anumit moment în timp.

Acest sistem ar putea fi:

• o fotografie de peisaj pe care ai făcut-o de la propria fereastră;
• o colecție de obiecte virtuale (o înregistrare, în acest caz, ar fi formele, dimensiunile, culorile, locațiile lor etc. la un anumit moment în timp. Astfel, filmul dvs. s-ar transforma dintr-o serie de imagini într-o serie de înregistrări de descrierile imaginilor În loc să arate doar o imagine, computerul preia o astfel de descriere, creează o imagine din ea și apoi o arată);
• cadre care conțin programe specifice.

Programare bloc

Deoarece computerul poate calcula din mers, puteți face fără o listă lungă de descrieri pentru cadre. Puteți simplifica totul descriind doar primul cadru și stabilind reguli pentru crearea tuturor cadrelor ulterioare. Acum computerul nu numai că creează o imagine din descriere, ci:

• mai întâi creează o descriere,
• apoi generează o imagine pe baza acestei descrieri
• iar la sfârșit arată această imagine.

Imaginează-ți cât spațiu ai putea economisi folosind această abordare! Imaginile ocupă întotdeauna o cantitate decentă de spațiu pe disc și lățime de bandă a rețelei. Și 24 de imagini pe secundă pot deveni pur și simplu prea greu de suportat. Dacă puteți reduce totul la o singură descriere și definiție a regulilor, aveți posibilitatea de a reduce dimensiunea fișierului de sute de ori.

De 90 de ori din 100, chiar și cel mai mare program cu reguli privind modul în care obiectele ar trebui să se miște și să interacționeze ocupă mai puțin spațiu decât o fotografie de dimensiune medie. Prin urmare, unul dintre primele efecte care s-a remarcat atunci când se studiază animația software este acesta economic în ceea ce privește dimensiunea fișierului.

Cu siguranță există un compromis. Dacă sistemul dumneavoastră începe să crească și regulile devin din ce în ce mai complexe, atunci computerul trebuie să cheltuiască din ce în ce mai multe resurse pentru a procesa fiecare scenă ulterioară și apoi, de asemenea, o perioadă semnificativă de timp pentru a le afișa pe ecran.

Dacă încercați să mențineți o anumită rată de cadre, uneori nu lasă timp procesorului (milisecunde) să „digere” totul. Prin urmare, dacă computerul nu poate reda scena la timp, calitatea redării (frecvența cadrelor) va avea de suferit. Pe de altă parte, animației obișnuite bazate pe imagini îi pasă puțin de ceea ce este în scenă și de cât de complexă este imaginea. Arată doar următoarea imagine la timp și atât.

Beneficiile animației software

Următorul avantaj al animației programului față de animația stop-motion despre care vom discuta acum merge mult mai departe. dimensiune simplă fişier. Este deja un fapt stabilit că animația software în majoritatea cazurilor este folosită tocmai ca dinamică.

Probabil că ați vizionat filmul Terminator 2: Judgment Day. La sfârșitul filmului, de fiecare dată când Terminator dispare în oală cu fraza „Mă întorc”. O face în cinematografe, la televizor și pe DVD. Chiar și apăsând butonul „Stop” sau „Pauză”, nu îl puteți opri. Și asta pentru că un film obișnuit nu este altceva decât o secvență de imagini. La sfârșitul acestui film, ei (imaginile) îl arată pe Terminator dispărând în infern și asta este tot ce pot face.

Acum să trecem de la Terminator la un site flash obișnuit. La sfârșitul anilor 90, când Flash câștiga rapid popularitate, doar leneșii nu doreau să-și folosească capacitățile pe site-ul lor:

• forme în mișcare, apariție și dispariție;
• muzica de acompaniament;
• o chemare bruscă pentru ceva;
• un punct emergent de lumină sau umbră.

Pe atunci, astfel de lucruri erau noi, așa că am vrut să exclam: „Cool!” Pentru a fi corect, nu toate aceste site-uri au fost cu adevărat cool. Privind azi înapoi la ceea ce am văzut atunci, pot spune că doar două sau trei dintre ele îmi rămân cu adevărat în memorie.

Durata animației pe ele nu a fost mai mare de un minut. Acest lucru a fost suficient pentru ca eu să le privesc de trei ori la rând. Au fost rele? Nu, doar că după mai multe vizionări atenția a slăbit, pentru că nu mai era nimic de urmărit, ca într-un film despre Terminator. Și aici putem vorbi despre un anumit paradox - în filmele de acest gen, animația nu se schimbă, fiecare cadru, de la primul până la ultimul, este prestabilit.

Să revenim la animația software. Nu trebuie să fie dinamic. Puteți crea un obiect și utiliza cod pentru a-l localiza în scenă și apoi îl puteți face să se miște de-a lungul lui. Într-o astfel de situație, de fiecare dată când se rulează un astfel de clip, se va rula același cod, provocând aceeași mișcare. Și, evident, nu există nicio dinamică aici.

Ce se întâmplă dacă luați același obiect și, folosind un cod, determinați aleatoriu locația acestui obiect, direcția mișcării și viteza lui? Într-o astfel de situație, după ce începem videoclipul de fiecare dată, vom vedea ceva diferit de cel precedent.

Dar există o a treia opțiune. După pornirea videoclipului, se va determina ora din zi, luna și anul și pe baza acestor date se va construi o scenă, de exemplu, o dimineață de iarnă, o după-amiază de vară sau o seară de septembrie?

Și iată-l pe al patrulea. În timpul filmului, privitorul, folosind mouse-ul sau tastatura, ar putea schimba anumiți factori după bunul plac? Acest lucru i-ar permite să interacționeze cu obiectele din scenă. Un astfel de film ar fi departe de ceea ce suntem obișnuiți să vedem, nu? Ar fi chiar posibil să-l salvez pe Terminator!

Realitatea virtuală

Este posibil ca Cel mai interesant aspect al animației dinamice este aplicarea legilor matematicii și fizicii din lumea reală la obiectele create în ea.. Nu numai că poți face ca un astfel de obiect să se miște într-o direcție aleatorie, dar poți și simula efectul gravitației asupra lui. Ca urmare, va începe să cadă. Când căderea se termină, va lovi pământul și va reveni, dar la o înălțime care nu este egală cu cea de la care a început să cadă. În cele din urmă, va înceta să sară și va rămâne întins pe „pământ”.

După aceasta, puteți permite utilizatorului să interacționeze cu acesta:

• „Apucă-l” cu mouse-ul
• sau mutați folosind tastatura.

Odată ce utilizatorul începe să interacționeze cu acesta în acest fel, va avea sentimentul deplin că este un obiect fizic real.

Puteți vedea asta pentru dvs. jucând cu mingea roșie de mai jos.

Prin crearea unei astfel de animații, îl faceți pe utilizator să simtă că nu doar urmărește cadrele în mișcare, ci că el se află într-un spațiu creat de tine. Cât timp va fi acolo? Da, atâta timp cât este interesat. Cu cât îi oferiți mai multe oportunități de a interacționa, cu atât va rămâne mai mult acolo și apoi va reveni de multe ori.

Rezultate

În această lecție introductivă am discutat despre:

• elementele de bază ale animației;
• diferențele dintre animația cadru cu cadru și programul;
• principalele avantaje ale animației dinamice.

Acestea sunt conceptuale cunoștințe de bază, pe baza căreia se va construi tot materialul ulterior mini-curs gratuit „Noțiunile de bază ale animației în Actionscript 3.0”».

În lecțiile următoare voi vorbi despre câteva instrumente pe care le poți folosi în munca ta. Cea mai evidentă utilizare a tuturor informațiilor care vor fi discutate în acest curs este crearea de jocuri. Este clar că acestea necesită cea mai mare interacțiune cu utilizatorul, acolo unde i se cere să rezolve anumite probleme și să atingă obiectivele stabilite.

Dar informațiile din acest curs pot fi folosite cu succes pentru dvs munca profesională ca web designer. De exemplu, pentru a crea un meniu interesant pe un site web, banner publicitar sau aplicații (programe) pentru sistemul de învățământ.

Ce tip de animație vă interesează mai mult personal? Scrieți despre asta lăsând un comentariu mai jos. De asemenea, dacă aveți întrebări în timp ce studiați această lecție, nu ezitați să întrebați, le voi răspunde cu plăcere.

Ne vedem la următoarea lecție!

Vă rugăm să activați JavaScript pentru a vizualiza comentariile.

Buna ziua, dragi cititori. În articolul său Am vorbit despre utilizarea liniilor de viteză, cu care poți crea iluzia unui obiect care se mișcă cu accelerație. Tot in articol a fost demonstrată o tehnică utilizând animație standard în mișcare și o umplere cu gradient în timpul apariției obiectului. Dacă nu vă amintiți sau nu ați citit aceste articole, vă sfătuiesc să le citiți. Astăzi vreau să continui subiectul animației în mișcare în Adobe Flash și să arăt nu mișcarea liniară a obiectelor, cum era cazul anterior, ci mișcarea de-a lungul unei traiectorii.

În primul rând, voi demonstra cum funcționează această tehnică folosind un exemplu simplu.

Creați un document nou cu dimensiune 600 pe 200 pixeli. Numiți-i First_animate. Culoare de fundal albastru sau orice alta. Pentru cei care nu-și amintesc, mai întâi trebuie să creați un nou document Action Script 3.0. (Fișier - Ctrl nou + N).Și apoi în panoul de proprietăți (Ctrl + F3) setați dimensiunea ferestrei de lucru și culoarea de fundal.

Redenumiți primul strat în „ Obiect". Creați un oval pe el ( O). Fără a deselecta obiectul. apăsați tasta F8și atribuiți-l ca simbol. Nume obiect1.

Creați un al doilea strat deasupra „ Obiect", numește-o" Traiectorie". Pe acest strat, trageți traiectoria mingii cu un creion.

Faceți clic dreapta pe stratul " Traiectorie" și selectați " Ghid". O pictogramă ciocan va apărea în stânga. Acum trageți stratul "Obiect" sub strat" Traiectorie„, în acest fel îi veți conecta unul cu celălalt.

Acum să revenim la zona de lucru. Plasați obiectul nostru la începutul traseului. Creați cadre cheie pentru strat "Obiect"și strat "Traiectorie" pe cadrul 30. Pune mingea la capătul căii. (Versiunea demo include o vedere wireframe a stratului "Obiect").

Acum faceți clic dreapta pe primul cadru al stratului " Obiect" și selectați " Creați o interpolare clasică de mișcare". După aceasta, putem testa animația noastră ( ctrl + Enter).

Acum, să vedem ce putem face cu aceste cunoștințe. Permiteți-mi să vă dau un alt exemplu simplu. Să presupunem. că trebuie să desenăm un zmeu. care zboară pe cer.

Să creăm un nou document de dimensiune 600 pe 200 px. Umpleți-l cu un gradient de la albastru la galben. Pentru a face acest lucru, să creăm un strat la început, pe care îl vom numi „ Fundal„, desenați un dreptunghi pe întreaga dimensiune a zonei de lucru (adică 600 pe 200 pixeli) și umpleți-l cu un gradient. Am scris deja în articol cum să lucrez cu gradienți.

Faceți clic pe „Inserare - Creare simbol (ctrl + F8)”. Setează un nume zmeu. Desenați un zmeu. Acest lucru nu este greu de făcut, arată ca un romb.

Pentru a noastră zmeu părea realist. Să definim mișcarea acestuia în simbolul însuși zmeu. Acesta va fi zmeul care se va legăna în sus și în jos și panglicile în curs de dezvoltare. Vom face balansarea în detrimentul , panglicile de dezvoltare în detrimentul . Să ne ocupăm mai întâi de panglici. Animația lor va fi similară cu animația de contur a formei (panglicile, apropo, sunt desenate cu instrumentul Perieși sunt potrivite pentru această manipulare), despre care am scris în articol