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.
Vom începe să cunoaștem interfața aplicației.
În acest program rapid, vom verifica cronologia și vom anima.
Î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.
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 " ,