Articolul acesta este de fapt o continuare a celui intitulat “Animaţie cu masina unor gansteri“, în sensul că, de data aceasta vom adăuga decorul dar vom interveni şi asupra animaţiei maşinii. Vom trata cazul în care maşina vine cu viteză şi incetineşte pe parcurs ce se apropie de semafor, pentru ca într-un târziu să oprească la semafor.

Înainte de a începe vreau să fac un scurt remeber al articolui iniţial:

  • articolul cuprinde două animaţii realizate la 24fps şi cu lungimea de 24 de frame-uri fiecare.
  • animaţia 1 prezintă deplasarea maşinii într-un mod normal.
  • animaţia 2 prezintă deplasarea maşinii într-un mod mai alert.
  • fiecare animaţie reprezintă un loop, adică poate fi rulată la nesfârşit, începutul şi sfârşitul fiind identice.

Să revenim la articolul curent … Ceea ce ne propunem în acest articol, care de fapt este scris în două părţi, este să adăugam decorul pentru ambele cazuri şi să realizăm o animaţie diferită de fiecare dată:

  • Cazul 1 - decorul va fi static iar maşina va fi elementul animat. Vom refolosi animatia 1 însă vom mai completa această animaţie cu partea în care maşina se opreşte la semafor.
  • Cazul 2 - maşina va fi statică iar decorul se va deplasa într-un loop. Vom refolosi animatia 2 iar de data aceasta nu vom mai interveni asupra animaţiei maşinii.

Aşadar, sa continuăm cu Cazul 1, deplasarea masinii intr-un mod normal; decorul - static, maşina - animaţie

Aşa cum se observă si din titlu, în acest caz decorul este static iar maşina este elementul animat.

Cu decorul treaba stă destul de simplu, tot ce trebuie să fac este doar să-l desenez şi gata.

Legat de maşină, ceea ce urmărim de fapt este iluzia de apropiere a maşinii prin scalarea proporţională ascendentă a acesteia.

Decorul este creat cu ajutorul aşa numitului punct de fuga (Vanishing Point). Punctul de fugă este de fapt un punct ce se stabileşte pe linia orizontului şi cu ajutorul căruia stabilesc perspectiva trasând linii convergente şi nu paralele.

background-steps

Aşadar, să vă explic în câteva rânduri modul (etapele) în care am desenat decorul:

  1. trasez drumul, alcătuit din şosea şi trotuarele laterale, cele două linii din mijloc reprezentând şoseaua.
  2. stabilesc înălţimea clădirilor aflate la marginea drumului; fiecare linie (de culoare verde) ce converge din punctul de fugă va delimita înălţimea unei clădiri; 6 linii înseamnă de fapt 6 clădiri.
  3. trasez linii verticale şi orizontale (liniile negre) astfel încât acestea să intersecteze liniile convergente delimitând astfel feţele clădirilor.
  4. renunţ la liniile ajutătoare create în etapa 2 şi păstrez doar conturul celor 6 clădiri.
  5. adaug 4 copaci în decor, înălţimea lor stabilindu-se între cele două linii albastre ale şoselei şi încă două linii ce le trasez tot din punctul de fugă.
  6. renunţ la liniile ajutătoare create în etapa anterioară şi adaug în planul îndepărtat, planul ce se ridică deasupra liniei orizontului, silueta unor cladiri (forma neclară a unor cladiri situate la mare distanţă).
  7. adaug culorile clădirilor şi trotoarelor; de observat este faptul că decorul nu conţine contur şi asta din ideea de a nu atrage mult atenţia privitorului dar şi de a nu da impresia de “decor încărcat”.
  8. finalizarea decorului prin adăugarea cerului şi a şoselei.

Imaginea finală obţinută este următoarea :)

background-final

Ceea ce ne propunem să facem în continuare este de a anima ce-l de-al doilea element din scenă, şi anume maşina. Vrem ca masina gansterilor să vină cu viteză şi să încetinească pentru ca mai apoi să se oprească la semafor (linia alba).

Animaţia maşinii este realizată la un frame rate de 24fps şi are o lungime totală de 85 de frame-uri (3.5 secunde), fiind structurată în patru secvenţe:

  • secvenţa I - secvenţa de deplasare a maşinii din puntul A în punctul B, situată între frame-urile 1 - 70 (keyframe1 - keyframe2).
  • secvenţa II - secvenţa de frânare - şoferul apasă pedala de frână, drept urmare maşina se lasă puţin în jos; secvenţa este situată între frame-urile 70 - 73 (keyframe2 - keyframe3).
  • secvenţa III - secvenţa de stat în frână - pedala de frână rămâne apăsată în tot acest interval, drept urmare maşina îşi menţine poziţia de la frame-ul 73; secvenţa este situată între frame-urile 73-78 (keyframe4 - keyframe 5).
  • secvenţa IV - secvenţa de eliberare a frânei - pedala de frână este eliberată iar maşina revine la poziţia de la frame-ul 70; secvenţa se desfăşoară puţin mai lent decât secvenţa 2 şi este situată între frame-urile 78 - 85 (keyframe5 - keyframe6).

timeline

Trebuie specificat faptul că existenţa secvenţelor II, III şi IV se justifică prin dorinţa de a întări senzaţia de frânare la stop. Acest lucru îl obţin printr-un trick, adică printr-o subtilă deplasare pe verticală a caroseriei (roţiile rămânând nemişcate) şi a pasagerilor. Reuşesc astfel să dau senzaţia că pasagerii îşi apleacă trupurile în faţă la momentul frânării.

Analizând timeline-ul putem trage următoarele concluzii:

  • Peg-ul ce conţine elementele decorului intitulat “background-P” nu conţine nici un keyframe, deci avem un decor static.
  • Peg-ul “car-passangers-P” reprezintă de fapt ansamblul masină-pasageri şi acestui Peg i-am ataşat operaţile de scalare şi translaţie (vezi mai jos cum arată graficele din Function Editor) pentru a crea impresia de apropiere.
  • Pe parcursul primelor 70 de frame-uri avem de fapt animatia 1, realizată în articolul intitulat “Animaţia cu maşina unor gansteri”. Animaţia din acel articol a fost realizată la un frame rate de 24fps şi având o lungimea de 24 frame-uri. În momentul de faţă animaţia este repetată de 3 ori de la frame-ul 1 până la frame-ul 70, acesta fiind intervalul de timp în care maşina se găseşte în mişcare.

function-editor

După cum se poate observa şi din graficele de la Function Editor, am aplicat două seturi de operaţii asupra ansamblului maşină-pasageri şi anume:

  • scalare, pentru crea impresia de apropiere.
  • deplasare, atât pe verticală cât şi pe orizontală, pentru a menţine maşina poziţionată pe banda din mijloc.

Acestea fiind spuse, haideţi să privim rezultatul primei animaţii.

Get Adobe Flash player

1 Stea2 Stele3 Stele4 Stele5 Stele (17 voturi, media: 5.00 din 5)
Loading ... Loading ...
Share