În Tips & Tricks

Crearea de conținut interactiv cu Adobe Edge Animate

Adobe Edge Animate

Adobe Edge Animate este o aplicație dezvoltată de către Adobe Systems, lansată la mijlocul lui 2012 sub numele inițial de Adobe Edge, care permite crearea de animații complexe şi conţinut interactiv folosind HTML5, CSS3 și JavaScript.

Scurtă istorie

  • Primul preview Adobe Edge lansat în august 2011, via Adobe Labs, a beneficiat de circa 50,000 de download-uri în primele 24 de ore.
  • În septembrie 2012, versiunea inițială de Adobe Edge s-a transformat în Adobe Edge Animate și, între timp, sub egida Adobe Edge Tools & Services au fost dezvoltate și alte produse.
  • În februarie 2013 a fost lansată și ultima versiune stabilă a ceea ce se vede acum în Adobe Edge Animate.

Cui îi este adresată?

Adobe Edge este adresată mai ales web designerilor, permiţându-le să energizeze cu animații conținutul proiectelor HTML sau al bannerelor web. Printre principalele avantaje pe care le aduce pentru designeri se numără următoarele:

  • Interfață intuitivă, asemănătoare cu cea a altor softuri Adobe pentru editare video sau animații;
Interfață Adobe Edge
  • Timeline de editare ce oferă control cât mai exact în redarea efectului de mișcare al graficii;
Adobe Edge Timeline
  • Posibilitatea de a importa grafică, vectorială sau raster, generată extern;
  • Posibilitatea de a lucra în timeline cu simboluri;
  • Posibilitatea de a crea și controla animațiile fără a avea cunoștințe de programare;
  • Posibilitatea de a încorpora Web Fonts foarte simplu;
  • Posibilitatea de a stiliza și anima elemente utilizând gradienți;
  • Posibilitatea de a adăuga efecte prin intermediul filtrelor CSS precum: blur, grayscale, sepia, brightness, contrast, hue-rotate, invert sau saturate;
  • Posibilitatea de a alege și încorpora fonturi din serviciul Edge Web Fonts.

În ciuda aparentelor asemănări cu Flash, aplicația Adobe Edge este diferită. De exemplu, în locul formatului ActionScript, animațiile create în Edge sunt codate în JavaScript. Animația rulează pe toate browserele moderne pentru desktop (Firefox, Chrome, Safari, Internet Explorer 9) și pe majoritatea browserelor mobile.

Animație

De vreme ce Edge se înțelege nativ cu HTML, designerii pot deschide pagini HTML și le pot anima. Codul de animație generat de către Edge este stocat într-un fișier separat, drept urmare, modificările nu afectează integritatea paginii.

Interactivitate cu Edge

1. Actions

Acțiunile sunt baza interactivității în Edge. O acțiune poate fi atașată la scenă, elemente și triggere.

2.Triggers

Acestea definesc un moment în timp căruia îi poate fi atașată o acțiune.

3. Labels

Definesc o animație în timeline care poate fi apelată printr-o acțiune.

Adobe Edge Animate poate fi descărcat de pe Creative Cloud, iar animațiile create funcționează atât pe Windows, cât și pe Mac OS. De asemenea, cu ajutorul acestuia pot fi create compoziții responsive, ce se pot adapta la diferite ecrane și rezoluții, precum tablete sau smartphone-uri.

Dacă sunteţi curioşi să vedeţi ce s-a făcut până acum, vedeţi câteva exemple de proiecte realizate cu Edge aici.

[Articolul inițial a fost scris pe 24 iulie 2012 și actualizat pe 30 aprilie 2013]