Ce poți găti din calmar: rapid și gustos

În această lecție ne vom uita la ce înseamnă să animați mișcarea unui obiect de-a lungul unei anumite căi de ghidare (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, creăm document nou„Scriptul de acțiune 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ă obțineți 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 al cincizecea 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. Accesați meniul principal 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.

Î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 linia temporală 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.

Animația interpolată în mișcare poate fi aplicată și instanțelor, grupurilor sau blocurilor de text, iar Flash acceptă calcularea cadrelor interpolare pe măsură ce obiectele se deplasează, redimensionează, se rotesc și se rotesc. În plus, puteți schimba culoarea instanțelor de obiect sau a textului aplicând o schimbare a culorii gradient sau schimbând transparența acestora. Pentru a face astfel de modificări într-un grup sau bloc de text, acestea trebuie mai întâi convertite în caractere cu comanda Inserare > Conversie în simbol

(Inserare > Conversie în simbol). În acest caz, obiectul care este convertit devine o instanță a acestui simbol.

Creați cadre cheie de început și de sfârșit și setați cadrul de început la Mișcare în lista derulantă Tweening(Calcul) pe panou Cadru(Cadru).
Creați un cadru cheie inițial, apoi executați comanda Inserare > Creare interpolare de mișcare(Insert > Calculate Motion) și mutați obiectul într-o nouă poziție în scenă. Acest lucru va face ca Flash să creeze automat cadrul cheie final.

Orez. 4.10. Rezultatul calculării cadrelor de animație intermediare

Ori de câte ori poziția cadrelor cheie se modifică sau conținutul acestora, Flash calculează automat cadrele intermediare.

Să ne uităm la secvența acțiunilor la crearea animației în mișcare prin setarea parametrilor pe panou Cadru(Cadru):

Selectați numele stratului pentru a-l face actual și selectați unul dintre cadrele cheie ale stratului unde ar trebui să înceapă animația.
Creăm o instanță, un grup sau un bloc de text pe desktop sau tragem o instanță a unui simbol din fereastra bibliotecii. Obiectul desenat trebuie transformat într-un simbol.
Creăm un cadru cheie final care determină lungimea secvenței de cadre.
Pentru a modifica instanța, grupul sau blocul de text din ultimul cadru, puteți face următoarele: mutați-l într-o nouă poziție, modificați dimensiunea, unghiul de rotație sau de înclinare sau modificați culoarea instanței sau a textului.
Executați comanda Fereastra > Panouri > Cadru(Fereastră > Panouri > Cadru) pentru a deschide panoul Cadru. În lista derulantă Tweening(Calcul) selectați valoarea Mişcare(Circulaţie).
Când redimensionați un obiect, bifați caseta Scară(Mărire).
Sens uşurarea(Netezimea) este setată în intervalul de la -100 la 100, determinând astfel rata de schimbare în timp. Valorile negative corespund unor modificări lente la început și schimbări rapide la sfârșit. Pozitiv - rapid la început și încetinește spre sfârșitul animației. În mod implicit, viteza este constantă. Ajustarea se face folosind un glisor care se deschide făcând clic pe săgeată.
Rotația poate fi setată selectând o valoare din lista derulantă Roti(Întoarce-te). În mod implicit, nu există rotație. Valoarea CW corespunde rotației în sensul acelor de ceasornic, iar CCW - în sens invers acelor de ceasornic, indicând numărul necesar de rotații. Această rotație va fi adăugată la rotația obiectului specificată la pasul 4.
Caseta de selectare Orientați spre Cale
Caseta de selectare Sincroniza
Snap(Snap) fixează instanța animată la aceasta.

Orez. 4.11. Selectarea opțiunilor de animație în mișcare

Să luăm în considerare succesiunea de acțiuni atunci când creăm animație prin comandă Creați interpolare de mișcare(Calculați mișcarea):

Selectați un cadru cheie gol și desenați un obiect pe desktop sau trageți o instanță a unui simbol pe acesta din fereastra bibliotecii.
Executați comanda Inserare > Creare interpolare de mișcare(Inserare > Calculare mișcare). Obiectul prezentat în primul pas va fi convertit automat într-un simbol, care se numește tweenl. Obiectele ulterioare vor fi numite tween2, tween3 etc.
Faceți clic pe cadrul unde ar trebui să se termine animația și executați comanda Inserare > Cadru(Inserare > Cadru).
Mutați un obiect, o instanță sau un bloc de text în poziția dorită.
Îi schimbăm dimensiunea și unghiul de rotație dacă este necesar. După toate modificările, deselectați obiectul. La sfârșitul secvenței de cadre, apare automat un cadru cheie. Selectați cadrul cheie final al secvenței și executați comanda Fereastra > Panouri > Cadru Cadru(Fereastră > Panouri > Cadru). Pe panoul care se deschide Valoarea (cadru) ar trebui să apară automat(Circulaţie).
Mişcare Dacă dimensiunea a fost modificată, bifați caseta Scară
Sens uşurarea(Mărire).

(Netezimea) este setată în intervalul de la -100 la 100, determinând rata de schimbare în timp. Valorile negative corespund unor modificări lente la început și schimbări rapide la sfârșit. Pozitiv - rapid la început și încetinește spre sfârșitul animației. În mod implicit, viteza este constantă. Ajustarea se face cu ajutorul unui glisor care se deschide făcând clic pe săgeată. Rotația este setată prin selectarea unei valori din lista derulantă Roti(Întoarce-te). Valoarea implicită este
Caseta de selectare Orientați spre Cale Auto
(Automat) determinat prin rotirea obiectului la pasul 4. Valoarea CW corespunde rotației în sensul acelor de ceasornic, iar CCW corespunde rotației în sens invers acelor de ceasornic, indicând numărul necesar de rotații. Această rotație va fi adăugată la rotația specificată la pasul 4. (Orientarea către traiectorie) este setată dacă este specificată o traiectorie curbă de mișcare. Caseta de selectare
Sincroniza Snap(Synchronize) vă permite să sincronizați numărul de cadre de animație cu numărul de instanțe grafice, dacă acestea sunt diferite.

Pentru o anumită traiectorie de mișcare, steagul

(Snap) fixează instanța animată la aceasta.

Lucrare de laborator nr 2 Informaţii A anima un obiect înseamnă a-l face să-și schimbe ușor proprietățile. Starea unui obiect se caracterizează prin dimensiunea, culoarea, poziția în spațiu, forma acestuia. La crearea

La crearea animației, trebuie luat în considerare și timpul. O scară de timp este folosită pentru a ține evidența timpului . Fiecare celulă a scalei corespunde unei unități abstracte de timp. Acesta nu este un minut sau o secundă - acestea sunt cadre. Acesta este un moment în timp care corespunde unui instantaneu al stării obiectelor.

Dacă scala de timp nu este pe ecran, atunci trebuie să rulați comanda W indow → Ti m eline(Fereastra → Panou de desen)

Flash vă permite să creați un film desenând fiecare cadru individual, așa cum făceau caricaturiștii pe vremuri. Această animație se numește cadru cu cadru. Există un alt tip de animație, când sunt create doar cadrele inițiale și finale ale unui anumit fragment, iar programul completează el însuși toate cadrele intermediare. Acest tip de animație se numește automat (animație interpolată).

Flash acceptă următoarele tipuri de animație:

ü Animații în mișcare. Puteți utiliza comenzile de interpolare a mișcării pentru a seta proprietățile obiectului, cum ar fi poziția și transparența alfa, într-un cadru și apoi din nou într-un alt cadru. Flash interpolează apoi valorile proprietăților pentru cadre între cadrele specificate. Interpolarile de mișcare sunt utile atunci când animația constă în mișcarea continuă sau transformarea unui obiect. Interpolarea mișcării apare în cronologie ca o gamă continuă de cadre, care pot fi selectate implicit ca un singur obiect.

ü Animație clasică. Animația clasică este similară cu interpolarile de mișcare, dar este mai complex de creat. Animația clasică vă permite să creați unele efecte animate care nu pot fi realizate folosind intervale de cadre animate.

ü Poze de cinematică inversă. Pozele cinematice inverse vă permit să întindeți și să rotiți obiectele de formă și să conectați grupuri de instanțe de caractere pentru a le muta simultan pentru o mișcare naturală. Puteți plasa un obiect de formă sau instanțe asociate în moduri diferite pe cadre separate, iar Flash va interpola pozițiile din cadrele intermediare.

ü Animație de formular. Când animați o formă, o formă este desenată într-un cadru separat de pe cronologia, iar într-un alt cadru acea formă este schimbată sau este desenată o nouă formă. Flash interpolează apoi formele pentru cadrele interpolare, creând o animație a unei forme care curge în alta.

ü Animație stop-motion. Această tehnică de animație vă permite să specificați diferite obiecte pentru fiecare cadru al cronologiei. Această tehnică este folosită pentru a crea un efect care face să pară ca și cum cadrele dintr-un film sunt redate rapid. Această tehnică este utilă atunci când se creează animații complexe în care elementele grafice ale fiecărui cadru trebuie să fie diferite.

Identificarea animațiilor pe cronologia

Flash diferențiază animația între animația cadru cu cadru în cronologie, afișând indicatori diferiți la fiecare cadru de conținut.

Următorii indicatori de conținut al cadrului apar pe cronologie:

ü O serie de cadre cu fundal albastru indică animație în mișcare. Un punct negru în primul cadru înseamnă că domeniul de animație are un obiect țintă alocat. Roamele negre indică ultimul cadru și alte cadre cheie de proprietate. Cadrele cheie ale proprietății sunt cadre care conțin modificări definite în mod explicit de utilizator. Puteți alege tipul de cadre cheie de proprietate de afișat făcând clic dreapta pe intervalul de animație și alegând Afișare cadre cheie → Tip din meniul contextual. În mod implicit, Flash afișează toate tipurile de cadre cheie de proprietate. Toate celelalte cadre din interval conțin valori interpolate legate de proprietățile de animație ale obiectului țintă.

ü O serie de cadre cu un fundal verde indică utilizarea unui strat de poziție cinematică inversă (IK). Straturile de poziție conțin IK wireframes și ipostaze. Toate pozițiile sunt marcate pe cronologia cu diamante negre. Flash interpolează pozițiile wireframe în cadre între ipostaze.

ü O linie punctată înseamnă că interpolarea clasică este întreruptă sau incompletă, cum ar fi lipsa ultimului cadru cheie.

ü Un punct negru înseamnă un cadru cheie separat. Conținutul cadrelor gri deschis după cadrul cheie individual rămâne exact același, neschimbat. Aceste cadre conțin o linie neagră verticală și un dreptunghi gol în ultimul cadru al intervalului.

Exemplul 1. Animarea mișcării unui obiect

1. Desenați un obiect, de exemplu, un dreptunghi, în colțul cadrului.

Primul cadru al cronologiei s-a schimbat - în el a apărut un punct negru gros. Acesta este un semn că cadrul a devenit cheie. Într-un cadru cheie, sistemul captează obiectul împreună cu toate proprietățile sale. Numai într-un cadru cheie puteți edita proprietățile obiectului.

2. Faceți clic dreapta pe acest cadru și selectați comanda din meniul contextual care se deschide Creați interpolare clasică.

3. În jurul obiectului apare un cadru albastru, iar în centrul acestuia se află un cerc cu o cruce.

4. Obiectul desenat s-a transformat într-un așa-numit simbol.

Cadrele situate între cadrele cheie de început și de sfârșit sunt gri. Între cadrele cheie apare o săgeată solidă.

6. În ultimul cadru cheie (ar trebui să fie selectat - evidențiat cu negru), utilizați Instrumentul de selecție (Pointer) pentru a muta obiectul într-o nouă poziție, de exemplu, într-un alt colț al cadrului.

Descrierea mișcării obiectului este finalizată. Trebuie să verificăm dacă totul a funcționat corect. Deselectați un obiect făcând clic în afara limitelor acestuia. Apăsați tasta Enter - obiectul începe să se miște.

Pentru a schimba viteza de mișcare a unui obiect, trebuie să mutați cadrul cheie final: pentru a accelera mișcarea - spre stânga (scăderea timpului alocat mișcării), pentru a încetini - spre dreapta (mărește intervalul de timp în timpul care apar modificări ale caracteristicilor obiectului).

Pentru a muta un cadru cheie, trebuie să faceți următoarele:

ü selectați stratul pe care se află obiectul;

ü treceți cursorul mouse-ului peste cadrul cheie și țineți apăsată tasta Ctrl (cursorul se va transforma într-o săgeată cu două capete);

ü apăsați butonul stâng al mouse-ului și, fără a-l elibera, mutați cadrul.

Exemplul 2: redimensionarea obiectului animat

1. Desenați un obiect, de exemplu, un dreptunghi și aplicați-i regulile de animație prezentate mai sus:

ü creați animație în primul cadru cheie – Creați interpolare de mișcare;

ü în ultimul cadru cheie al animației – Inserați cadru cheie →Mărire.

2. Selectați ultimul cadru cheie și redimensionați obiectul de 1,5 - 2 ori folosind Instrumentul de transformare gratuită.

3. Apăsaţi tasta Enter.

Exemplul 3: Animați schimbarea culorii unui obiect

1. Creați un fișier nou, desenați un obiect și aplicați-i regulile pentru crearea animației clasice în mișcare.

2. Fiind în cadrul cheie final, selectați obiectul, adică. faceți clic stânga pe el cu Instrumentul de selecție activ

Un câmp Efect de culoare apare în panoul Proprietăți.

Exemplul 4: Animarea transparenței unui obiect

1. Creați un fișier nou, desenați un obiect și aplicați-i regulile pentru crearea animației în mișcare.

2. În timp ce vă aflați în cadrul cheie final, selectați obiectul.

Un câmp Efect de culoare apare în panoul Proprietăți.

Dacă selectați opțiunea Alpha (Transparență) din lista derulantă, va apărea un câmp suplimentar în care puteți seta valoarea transparenței ca procent (100% este o culoare complet opaca; 0% este complet transparent).

Salutare dragi cititori. În articolul său Am vorbit despre utilizarea liniilor de viteză, cu ajutorul cărora 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 programul Adobe Flash și nu arată mișcarea liniară a obiectelor, așa cum a fost 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. Așezați 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 face zmeul nostru să pară 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 , dezvoltarea panglici î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