Animații cu Adobe Edge Animate

Utilizatorii de pe web se așteaptă să găsească modele spectaculoase și să aprecieze animațiile care contribuie la aceste modele, atât timp cât nu pierd timp sau influențează negativ navigarea pe pagină.
Animațiile bine realizate concentrează atenția asupra detaliilor importante, pot arăta cum funcționează o aplicație și ajută navigarea dacă îndeplinesc cerința anterioară, unde multe dintre aceste animații au fost realizate cu Flash iar dacă aveau calitatea necesară, erau bine primiți de către utilizator.
Dar vremurile s-au schimbat și la fel cum tehnologiile au evoluat și modul de a face animații, acolo intervine Adobe Edge Animate, un instrument care ne permite să creăm animații cu HTML5, CSS3 și JavaScript fără a fi nevoie de cunoștințe de programare.
Cele de mai sus pot părea puțin complicate, cum este posibil să am un instrument care să mă ajute să creez animații în aceste tehnologii, fără cunoștințe de programare? Nu este atât de complicat pe cât pare, dar mai întâi trebuie să cunoaștem instrumentul și că trebuie să lucrăm cu el, pentru asta îl vom rula și vom fi primiți de ecranul de pornire care ar trebui să arate astfel:

MARI

În partea dreaptă putem vedea câteva linkuri pentru a afla cum să faceți unele animații cu instrumentul și în partea dreaptă linkuri pentru a deschide un fișier sau a-l crea. Să facem clic pe link Creaza nou și vom fi duși la spațiul de lucru al instrumentului, deocamdată nu ne vom face griji pentru asta, dar vom salva proiectul nostru pentru a putea examina structura creată de instrument, să vedem cum arată structura noastră:

MARI

Dacă suntem familiarizați cu dezvoltarea aplicațiilor web, putem vedea câteva fișiere cu extensii cunoscute, să vedem funcția fiecăreia dintre acestea în cadrul unui proiect de Edge Animate:
.Un fișierAcest fișier este utilizat de instrument pentru a urmări proiectul nostru.
Fișier .HtmlAcest fișier descrie o pagină web care utilizează cod HTML, precum și restul paginilor de pe Internet.
.Js fișierAceste fișiere conțin cod JavaScript pentru proiectul nostru, care definește o etapă goală pentru animația noastră și îndeplinește alte sarcini necesare în proiectele de Edge Animate.
La fel ca aceste fișiere, în dosar edge_include avem două fișiere JavaScript suplimentare, care sunt biblioteci pentru proiectul nostru și sunt menționate în cadrul nostru HTML iar funcția sa este de a efectua acțiunea mișcării ca atare.
Odată ce am văzut cum este structurat proiectul nostru, este timpul să cunoaștem zonele spațiului nostru de lucru, mai întâi să vedem cum arată:

MARI

Fiecare panou este identificat după nume, unde Elemente, Proprietăți (editați) si Cronologie Au instrumente și widget-uri pentru a crea animații. Cel mai mare panou este cunoscut sub numele de etapa o Etapă și acolo construim animația, să aruncăm o privire mai atentă la fiecare dintre elementele din spațiul nostru de lucru:
EtapăAici sunt afișate și animate grafica și textul proiectului, are limite în aranjament și ne permite să ascundem elemente sau să le poziționăm în el. În plus, atunci când salvăm proiectul nostru Anima are grijă să salveze textul și grafica ca pagină HTML.
ElementeElementele sunt obiecte pe care le adăugăm scenei noastre și ca urmare apar pe pagina noastră web finală, unde aceste elemente pot fi ilustrații, fotografii sau chiar text.
Proprietăți (editați)Elementele au proprietăți care le pot afecta poziția și chiar aspectul pe scenă și le putem gestiona folosind panoul de Proprietăți (editați).
CronologieNe permite să ținem o evidență a elementelor și a proprietăților lor pe tot parcursul proiectului nostru.
BibliotecăAici putem păstra o evidență a resurselor pe care le importăm în proiect și oferim acces ușor la simbolurile în care credem Anima.
InstrumenteAcestea apar în partea de sus a spațiului de lucru. Le folosim pentru a crea, selecta și modifica elemente pe scenă, nu sunt multe, dar am fi surprinși să știm cât de mult putem face cu ele.
Deoarece știm cum este distribuit instrumentul nostru și suntem familiarizați cu conceptele din acesta, ne putem aventura să creăm prima noastră animație.
Pentru a crea prima noastră animație, vom experimenta puțin tranzițiile dintr-o anumită imagine, să vedem pașii de urmat:
1- Vom crea un nou proiect cu opțiunea fișier nou în cazul în care am închis în care lucrăm pentru a înțelege structura și elementele din cadrul instrumentului. Când începem un proiect, etapa noastră este goală, putem schimba acest lucru în proprietățile lui etapă în partea stângă a ecranului, pentru aceasta apăsăm caseta albă și alegem o culoare preferată de noi sau în cazul în care avem o culoare în notație hexazecimală o putem include așa cum vedem în următoarea imagine:

MARI

2- În cazul acestui tutorial am ales o culoare închisă, astfel încât imaginea pe care o vom include în etapă a scoate in evidenta. Acum, pentru a include o imagine la care mergem Arhiva și selectăm a importa, va fi afișat exploratorul de fișiere și selectăm imaginea pentru a include:

MARI

Este important ca în proprietățile scenariului nostru să avem depășirea u revărsare în ascuns din moment ce al nostru etapă prezintă o mică parte din tot HTML-ul nostru, deci dacă nu dorim să vedem elemente în afara scenei, este important să avem această valoare pentru acea proprietate. De asemenea, putem schimba numele elementelor noastre în secțiunea Proprietăți (editați), în acest fel îi putem identifica mai bine în proiectul nostru.
3- Acum mergem la noi Cronologie și verificăm dacă contorul de redare este la 0:00 pentru a începe cu animația noastră. Aici intervine partea interesantă și aici trebuie să acordăm o atenție maximă, mai întâi trebuie să verificăm dacă modul cadru cheie apasă la fel de mult ca și modul de tranziție automată, pe care îl putem vedea în următoarea imagine:

Pentru a realiza animațiile noastre trebuie să folosim funcționalitatea Comutați pinul care este activat în butonul de lângă modul de tranziție automatăLa activarea acestui buton activăm cadrele sau tranziția și acesta trebuie să fie însoțit de contorul galben, deoarece astfel putem face o tranziție de atâtea secunde până când ne mutăm Pinul la același nivel cu al doilea contor.
4- Să ne îndeplinim prima tranziție să apăsăm butonul Comutați pinul și vom lua al doilea contor și îl vom muta 200 de secunde, după aceasta, ne mutăm imaginea în partea de jos a ecranului, să vedem cum arată:

MARI

După cum putem vedea partea evidențiată cu albastru în Cronologie reprezintă tranziția pe care o putem previzualiza dacă apăsăm tasta spațiu. Vedem atunci că este destul de ușor să facem o tranziție, dar dacă vrem să facem o a doua tranziție sau mai multe dintre acestea? Pentru aceasta trebuie să ne mutăm Pin spre al doilea contor, în acest fel indicăm să Anima că închidem procesul primei tranziții și putem începe unul nou.
5- Vom face o a doua tranziție unde de data aceasta vom reduce opacitatea imaginii noastre, pentru aceasta ne selectăm imaginea micșorând opacitatea acesteia la 46% și, așa cum am menționat, mutăm Pin pe al doilea contor și repetați pașii de la punctul 4, să vedem:

MARI

6- În cele din urmă vom face un a treia tranziție pentru a finaliza animația noastră. După cum știm deja, mutăm al doilea contor câteva secunde, ne tragem imaginea în diagonală spre stânga și închidem tranziția mutând Pin despre al doilea contor:

MARI

7- Ne salvăm munca și apăsăm tasta spațiu pentru a vizualiza animația, dacă încă nu suntem mulțumiți, putem trece prin tranzițiile reprezentate de culoarea albastră în Cronologie și modificăm valorile sau dacă dorim tipul de tranziție.
Întrucât suntem mulțumiți de munca noastră, este timpul să realizăm ultimul pas, și anume să îl afișăm pentru vizualizare într-un browser, care este obiectivul pentru care lucrăm.
Există două moduri de a ne vizualiza munca, prima și cea mai simplă se pot face din instrument, pentru aceasta mergem la fila Arhiva și selectăm Previzualizare în browser, care va deschide imediat animația în browserul nostru web implicit:

Al doilea este ceva mai complicat dacă nu avem experiență în dezvoltarea web, adică să luăm fișierele și să facem o integrare cu aplicația noastră web. Este important să fiți foarte atenți atunci când faceți acest lucru și să includeți toate fișierele generate de Anima în caz contrar, animația nu va funcționa.
Cu aceasta am terminat acest tutorial, unde am putea ști cum funcționează Adobe Edge Animate, văzând cele mai importante caracteristici ale sale și realizând prima noastră animație în câteva minute fără a fi nevoie de o singură linie de cod, generând-o cu HTML5 Da JavaScript pentru implementare în orice aplicație web.