Animație de mișcare în Adobe Flash de-a lungul unui ghid (ghid). Schema lecției „animație în mișcare” Cum să creați o animație în mișcare

Vom lua această pisică drept personaj. Va urmări să apară mouse-ul în cadru și va da din coadă.

Personajul este format din următoarele obiecte situate pe diferite straturi:

Animația ochilor pentru aceasta este deja gata într-un simbol separat. Acum suntem interesați de animația cozii. Astfel, putem extinde în siguranță animația pe ele la numărul necesar de cadre, de exemplu, 20 ( utilizați f5) și blocați straturile de care nu avem nevoie, astfel încât să nu stea în cale.

Acum coada. Pe primul cadru avem prima pozitie a cozii, pe 10 vom face a doua pozitie. Pur și simplu am reflectat coada de la stânga la dreapta - Modificare – Transformare – Întoarce de la stânga la dreapta.

Pe stratul „Coada” din cadrul 5, creați un cadru cheie gol. Pentru a face acest lucru, faceți clic pe el cu butonul stâng al mouse-ului și apăsați F6. Apoi, faceți clic pe Ștergere pentru a șterge tot conținutul. Aici vom avea linii de viteză. Pentru comoditate, porniți „ Structura multistrat„sau cum se numește „coaja de ceapă”, reglați intervalul dintre cele două stări ale cozii noastre.

Pe cel de-al cincilea cadru, folosiți o pensulă pentru a desena linii de viteză, ținând cont că acestea vor fi mai realiste în culoarea obiectului în sine, ei bine, al nostru este negru, puteți adăuga puțin gri pentru varietate. Faceți liniile astfel încât să nu depășească limitele obiectului.

Acum trebuie să-l facem mai realist. Pentru a face acest lucru, vom seta mai întâi o mică animație a formei pentru coadă. Luați cadrul 3 ca cadru cheie, schimbați forma cozii pisicii și înclinați-o ușor spre dreapta. Apoi faceți clic dreapta pe primul cadru și adăugați animație de formă.

Acum să facem același lucru pentru a doua stare a cozii. Pe cadrul 13, creați un cadru cheie (F6). Mergeți la cadrul 10, schimbați puțin coada și înclinați-o spre stânga. Apoi pentru cadrul 10 creați animație de formă.

Acum să edităm puțin cadrele. Să le eliminăm pe cele inutile. Pentru a face mișcarea mai naturală. Și să repetăm ​​cadrele în ordine inversă.

Când creați o animație de mișcare, puteți determina mișcarea unui obiect de-a lungul unei anumite traiectorii - de-a lungul unei linii drepte, de-a lungul unei curbe întrerupte constând din segmente de linie dreaptă și de-a lungul unei linii curbe netede.

Animație de mișcare în linie dreaptă

Exemplul 1:
Vezi Exemplul 2

Să creăm un avion care se mișcă în linie dreaptă.

În cadrul de editare, inserați o imagine a unui avion în partea stângă a scenei. O imagine vectorială a unui avion poate fi creată în Adobe Flash (vezi Desen) sau puteți importa o imagine creată în lateral (în format .png cu fundal transparent).

Evidențiați avionul din scenă. În meniul contextual al aeronavei, selectați Convertiți în simbol(Conversia la Sumbol). Selectați tipul grafic al simbolului.

În meniul contextual al imaginii, selectați Creați o animație în mișcare(Creează Motion Tween). Programul creează automat 24 de cadre pentru modificări fluide.
Mutați imaginea în partea dreaptă scene.
Puteți ajusta durata animației și multe altele - vezi. Lucrați cu personalul .

A fost creată o animație a avionului care se mișcă în linie dreaptă și poate fi vizualizată făcând clic pe tasta Enter.

Din acest exemplu putem trage următoarele concluzii:

Lungimea oricărei noi intervale de interpolare care este creată automat de program este implicită la viteza de animație setată. Dacă viteza de animație este selectată la 24 de cadre pe secundă, atunci în mod implicit va fi creată o zonă de schimbare de 24 de cadre (1 sec de animație). Dacă viteza este de 30 fps. - zona de modificare implicită va fi de 30 de cadre.

Pentru ca programul să creeze un fade, obiectul introdus în scenă trebuie convertit într-un simbol. În acest caz, obiectul poate fi orice - un desen vectorial creat în Adobe Flash, text, o imagine raster importată etc. Dacă încercați să creați o schimbare lină pe un non-simbol, programul vă va cere să convertiți element la un simbol ().

Numai un caracter poate fi interpolat la un moment dat. Dacă încercați să aplicați o modificare la un strat cu mai multe obiecte, programul vă va solicita să convertiți simbolurile grafice într-un singur simbol.

Fade poate fi folosit pentru a redimensiona/a mări, a schimba culorile și a aplica filtre.

Notă: Fade pentru efectele de filtru se aplică numai simbolurilor clip și butoanelor, nu și simbolurilor grafice.

Note:
1. Când creați animație clasică în mișcare, procedura este diferită - vezi. Crearea de interpolari clasice de mișcare .
2. Crearea mișcării obiectelor în timpul animației cadru cu cadru - vezi Animație în timp
3. În exemplul nostru, avionul se deplasa în interiorul scenei. Dar poziția inițială a avionului (sau a altui obiect) poate fi în afara scenei, în timp ce avionul poate apărea „din culise” (dreapta, stânga, sus, dedesubt). În același mod, el poate dispărea de pe scenă „în culise”. În principiu, atât poziția inițială, cât și cea finală a unui obiect pot fi în afara scenei, adică. obiectul sare „din culise”, își execută trucurile pe scenă și dispare din nou „în culise”.

Animații de mișcare curbă

Există mai multe moduri de a crea mișcarea unui obiect de-a lungul unei curbe:



Metoda 2
Introduceți un pătrat roșu în scenă
Creați o interpolare de mișcare a pătratului (consultați Crearea unei interpolari de mișcare)
Drept urmare, pătratul nostru și calea lui de mișcare vor apărea pe scenă (sub forma unei linii cu markere).

Puteți ajusta calea de mișcare, influențând nu calea în sine, ci obiectul (așa cum se arată în animația de mai jos):



Folosirea acestei metode este simplă: faceți clic pe un cadru selectat din Timeline (pentru noi sunt cadrele 10, 20 și 30) și mutați obiectul în jurul scenei în mod corespunzător (fără a afecta curba traseului) Programul creează automat cadre cheie în cadrele selectate.

Crearea propriei trasee de conducere

1. Introduceți un desen al unui avion în scenă.

2. Convertiți desenul avionului într-un simbol grafic
3. Creați un nou strat numit „Cale”, pe care cu un creion () desenăm traiectoria avionului. Linia traseului nu trebuie închisă.

4. Dacă este necesar, neteziți linia traseului folosind instrumentul „Smooth” () din partea de jos Bare de instrumente .

5. Selectați calea creată și copiați-o în clipboard. După aceasta, calea în sine poate fi ștearsă.

6. Reveniți la stratul plan. Selectați avionul de pe scenă și selectați " Creați o animație în mișcare„(Creează Motion Tween).

7. Selectați avionul de pe scenă, în meniul Editare selectați „Paste” sau „Paste in Place”.
La imaginea aeronavei este adăugată o imagine a căii de zbor.

8. Pentru a vizualiza, plasați glisorul roșu pe primul cadru, faceți clic pe tasta Enter.


Editarea unui traseu de mișcare

Puteți transforma traseul de mișcare în același mod ca și orice alt obiect grafic.

Selecta instrument de transformare gratuită(Transformare gratuită) pe bara de instrumente și faceți clic pe calea mișcării.
În jurul căii de mișcare apar markeri de transformare.

Puteți scala sau roti traseul de mișcare. Puteți crea curbura traseului folosind instrumentele de selecție și Convertiți punctul de ancorare(Convertire punct de ancorare) - acest instrument este ascuns sub instrumentul Pen.

Faceți clic pe punctul de pornire și mutați mânerul de pornire a selecției, care controlează curbura traseului.

3 Pentru a corecta calea, selectați instrumentul Subselectare din bara de instrumente.
4 Faceți clic și trageți mânerul pentru a edita curba traseului.
Notă: Calea de mișcare poate fi, de asemenea, controlată direct cu Instrumentul de selecție ().
Selectați Instrumentul de selecție () și mutați-l aproape de calea mișcării. O pictogramă curbă apare lângă cursor, indicând că puteți edita calea. Faceți clic și trageți traseul de mișcare pentru a schimba curbura.

Puteți selecta un obiect, faceți clic dreapta pe el și selectați din meniu Creați o animație în mișcare. După aceasta, mutați glisorul de-a lungul cronologiei și mutați sincron obiectul de-a lungul curbei create.

Nota:
Dacă, cu mâna tremurândă, ați desenat o cale prea stângace și, în același timp, ați alocat prea puține cadre pentru a vă deplasa pe această cale, atunci programul nu va putea finaliza sarcina și nu va putea repeta toate curbele. cale.
În acest caz, va apărea un anunț:
„Curba trebuie simplificată pentru a se potrivi cu numărul de cadre disponibile în interpolarea actuală a mișcării. Vă rugăm să alegeți una dintre următoarele metode”
Sau: „Curba trebuie simplificată pentru a se potrivi cu numărul de cadre disponibile în interpolarea curentă. Vă rugăm să selectați unul dintre următoarele metode...” și sunt oferite două opțiuni, prima dintre acestea fiind simplificarea traseului.

Vezi suplimentar:
Crearea propriei trasee de animație


Inversarea sensului de mers

Pentru a face un obiect să se miște de la punctul final la punctul de început, în meniul contextual al obiectului, selectați Traiectorie ( Calea de mișcare ) - Traiectorie inversă(Cale inversă).

Vezi și:

Orientarea obiectului în mișcare

Uneori, orientarea unui obiect care se deplasează de-a lungul unei căi este importantă.
În exemplul nostru, avionul trebuie să se miște nu numai de-a lungul traiectoriei, ci și să se întoarcă simultan, astfel încât nasul său să fie în direcția mișcării.

1 Faceți clic pe stratul de interpolare a mișcării de pe cronologia. În exemplul nostru, acesta este stratul „avion”.

2. Selectați calea de mișcare folosind instrumentul de selecție ()

3. Poziționați corect obiectul în raport cu traseul de mișcare în 1 și ultimele cadre animaţie.

4. B Inspector de proprietate selecta Orientarea traseului(Orientați spre cale) în opțiunea cale.

Editorul introduce cadrele exterioare pentru a se roti de-a lungul schimbării line în mișcare, astfel încât nasul aeronavei să fie orientat de-a lungul căii de mișcare.

Programul adaugă automat cadre cheie, rotind planul de-a lungul traiectoriei sale.

Cronologia va arăta astfel:

Notă: Pentru ca opțiunea de orientare să funcționeze corect, aeronava în poziția de pornire trebuie să fie setată corect, adică. nasul său ar trebui să fie îndreptat de-a lungul căii de mișcare.
Pentru a face acest lucru folosește instrument de transformare gratuită, rotiți planul pentru a-l poziționa corect.

În Flash este foarte ușor să creezi o animație a unui obiect de-a lungul unei traiectorii. Ce este necesar pentru asta:

1.Desenați un obiect pentru animație – o minge roz. Salvați-l într-un simbol (Selectați – F8)

2. Trebuie să desenăm traiectoria de-a lungul căreia se va mișca mingea. Pentru a face acest lucru, faceți clic pe stratul bile și adăugați un nou strat de ghidare ( Adăugați ghid de mișcare clasică):

Strat pe cronologia Ghid arată ca un arc desenat cu o linie punctată:

3. Creați o animație de minge în 2 cadre făcând clic dreapta pe primul cadru - Creați interpolare clasică. În al doilea cadru mutam mingea spre dreapta

Fără o traiectorie (după cum vedem, nu există grafică în stratul Ghid, este gol) - animația arată ca o simplă mișcare a unui obiect de la stânga la dreapta

4.Pe un strat Ghid Utilizați un creion pentru a desena o linie ondulată. Aceasta va fi calea pentru animația noastră:

Poziția de pornire:

Poziția finală:

Important: Pentru ca mingea să-și „prindă” traiectoria, punctul ei de transformare (cercul din centru) trebuie să coincidă complet cu capetele liniei de traiectorie atât în ​​primul cadru, cât și în cel final. În caz contrar, obiectul va ignora prezența unei traiectorii și se va deplasa în linie dreaptă de la stânga la dreapta. Prin urmare, merită corectată fie poziția obiectului, fie forma liniei traiectoriei.

Cum se creează animație în mișcare în Photoshop?

În această lecție vom învăța creați o animație în mișcare simplă obiect în Photoshop.

Să creăm document nou 200 x 200 pixeli cu un fundal transparent. Pentru a crea un document nou, selectați elementele de meniu „Fișier” - „Nou”, setați lățimea și înălțimea acestuia și un fundal transparent. Pe bara de instrumente, selectați instrumentul „Penie”, acordați-i un diametru principal de 15 pixeli și orice culoare. Acum cu ajutorul a acestui instrument Să desenăm o traiectorie de-a lungul căreia obiectul nostru se va mișca.

Apoi, să creăm un nou strat.

Folosind instrumentul „Brush”, vom desena o insectă în același mod, reducând puțin dimensiunea pensulei și schimbându-i culoarea.

Acum ar trebui să schimbați poziția insectei astfel încât să corespundă direcției de mișcare a acesteia. Pentru a face acest lucru, selectați elementele de meniu „Editare” - „Transformare” - „Rotire”.

Să creăm un duplicat al stratului de insecte. Pentru a face acest lucru, faceți clic dreapta pe strat și selectați „Duplicare strat”. Să dăm stratului rezultat un nume arbitrar. Apoi, să schimbăm ușor poziția insectei aplicând din nou „Transform” - „Rotire” la stratul rezultat.

Acum vom repeta următorii pași: crearea unui duplicat al stratului anterior și schimbarea poziția insectei noastre, astfel încât să se „miște” înainte de-a lungul traiectoriei sale. Vom repeta aceste acțiuni de cât mai multe ori până la umplerea întregii traiectorii de mișcare.

Când întreaga traiectorie este „umplută”, vom trece la crearea animației. Pentru a face acest lucru, selectați „Fereastră” - „Animation”.

Fereastra Animație care apare în prezent conține un cadru.

Să facem toate straturile, cu excepția stratului cu traiectoria și a stratului cu insecta în poziția inițială, invizibile. Pentru a face un strat vizibil sau invizibil, trebuie să faceți clic pe „ochiul” situat în fața stratului în paleta de straturi. În mod implicit, toate straturile sunt vizibile.

Apoi, atunci când creați fiecare nou cadru de animație, trebuie să faceți vizibil noul strat, dezactivați mai întâi vizibilitatea celui precedent. Aceste acțiuni ar trebui efectuate până când întreaga cale a fost finalizată.

Acum selectați toate cadrele disponibile ținând mai întâi apăsată tasta „Ctrl”. Să setăm timpul de întârziere pentru fiecare cadru la 0,2 secunde și să facem stratul de cale invizibil.

Animația în mișcare este gata. Acum să salvăm imaginea animată rezultată. Pentru a face acest lucru, selectați elementele de meniu „Fișier” - „Salvare pentru web” și dați fișierului orice nume.

(0)
1. Animație text simplă 1:48 1 4216
2. Text iridescent 2:44 0 5845
3. Imagini intermitente 1:51 0 2523
4. Faruri aprinse 2:26 0 4261
5. Animație de ploaie 2:12 0 2116
6. Zăpadă care căde 2:33 0 5354

Î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, mai ales în secțiuni precum imitaţie fenomene fizice lumea realăși calcule 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. Pur și simplu își poate schimba forma exterioară. În anii 90 (înfricoșător 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).

La crearea acestui 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 ați văzut de multe ori o cameră în care nu există 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, veți simți din nou ca și cum vă uitaț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 conduc 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 zbura 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.

Este timpul să oferim o definiție mai generală a cadrului. 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:

  • poza peisaj din care ai luat-o 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ă retelelor. Ș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 dvs. începe să devină mai mare și regulile devin din ce în ce mai complexe, atunci computerul trebuie să cheltuiască din ce în ce mai multe resurse procesând 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 dvs. (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 software față de animația cadru cu cadru, despre care vom discuta acum, merge mult mai departe decât dimensiunea fișierului. Este deja fapt stabilit, Ce 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 răi? 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ă începerea videoclipului, ora din zi, luna și anul vor fi determinate și o scenă va fi construită pe baza acestor date, de exemplu, dimineata de iarna, după-amiaza de vară sau seara 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 un sentiment complet 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 ulterioar mini-curs gratuit „Noțiunile de bază ale animației în Actionscript 3.0”».

În următoarele lecții 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.


Top