Introducerea Adobe Edge

Edge este cel mai recent instrument de design pentru a atinge Adobe Labs. Acesta permite designerilor să aducă conținut animat pe site-uri web, utilizând standarde web precum HTML5, JavaScript și CSS3.

În timpul acestei introduceri vom face cunoștință cu interfața, vom examina cronologia și vom aplica o animație unui proiect real.


1. Interfața utilizatorului

Vom începe să cunoaștem interfața aplicației.


2. Animație

În acest program rapid, vom verifica cronologia și vom anima.


3. Noțiuni de bază Real

În timpul celui de-al treilea exercițiu, vom lua ceea ce am învățat în cele două videoclipuri anterioare și îl vom face real.


producție

Ce anume generează Adobe Edge în ceea ce privește fișierele și codul? Ei bine, un mic proiect Edge creează un dosar care arată cam așa:

Puteți vedea clar fișierul proiectului Edge plus tot conținutul de implementare. Există un fișier html cu fișierele sale css și js însoțitoare, apoi o întreagă încărcătură de active, inclusiv jQuery, unele instrumente js și importurile pe care le-ați făcut în proiect.

În ceea ce privește codul generat, verificați sursa pentru html de bază. Nu poate fi mai simplu!

    Test          

Conținutul este adăugat tuturor la scenă prin fișierul javascript și manipulat ulterior.

 conținutul: dom: [id: 'Rectangle1', tip: 'rect', rect: [88,82,119,106], umple: [rgba (192,192,192,1) ), Id: 'Image1', tip: 'imagine', rect: [0,0,755,600], umpleți: ['rgba (0,0,0,0) ',' id: 'Text1', tip: 'text', rect: [155,77,0,0], text: "bit of text" Arial Black, Gadget, sans serif ", [24," "]," rgba (0,0,0,1) "," normal "," none " ,