Share
Edge ist das neueste Entwurfstool für Adobe Labs. Designer können animierte Inhalte mithilfe von Webstandards wie HTML5, JavaScript und CSS3 in Websites einbinden.
In dieser Einführung werden wir uns mit der Benutzeroberfläche vertraut machen, die Zeitleiste untersuchen und ein reales Projekt animieren.
Zunächst lernen wir die Anwendungsschnittstelle kennen.
In diesem kurzen Screencast schauen wir uns die Zeitleiste an und werden animiert.
In dieser dritten Übung werden wir das, was wir in den beiden vorherigen Videos gelernt haben, in die Realität umsetzen.
Was genau erzeugt Adobe Edge in Bezug auf Dateien und Code? Nun, ein kleines Edge-Projekt erzeugt einen Ordner, der ungefähr so aussieht:
Sie können die Edge-Projektdatei sowie den gesamten Bereitstellungsinhalt deutlich sehen. Es gibt eine HTML-Datei mit den dazugehörigen Dateien css und js, dann eine ganze Menge von Assets, einschließlich jQuery, einige Js-Tools und alle Importe, die Sie im Projekt vorgenommen haben.
In Bezug auf den generierten Code checken Sie den Quellcode für das Basis-HTML aus. Einfacher geht es nicht!
Prüfung
Der Inhalt wird durch die Javascript-Datei zur Bühne hinzugefügt und anschließend bearbeitet.
Inhalt: dom: [id: 'Rectangle1', Typ: 'rect', rect: [88,82,119,106], füllen: ['rgba (192,192,192,1)'], Strich: [0, "rgba (0, 0,0,1) "," none "],, id: 'Image1', Typ: 'image', rect: [0,0,755,600], füllen: ['rgba (0,0,0,0) ',' images / Image.png '],, id:' Text1 ', Typ:' text ', rect: [155,77,0,0], Text: "Textstück", Schriftart: [" Arial Black, Gadget, Sans-Serif ", [24," "]," rgba (0,0,0,1) "," normal "," none "," "],,], symbolInstances: []
Accentsconagua