Adobe Edge Creative Cloud-Apps

• April 25, 2024

HTML5, JavaScript und CSS3 sind fast so beliebt wie Flash, um interaktive Animationen für das Web, Tablets und Telefone zu erstellen. Adobe^R. Edge Animate und die anderen Edge-Apps sind sehr benutzerfreundliche Software mit vielen Voreinstellungen, die Ihnen die Arbeit erleichtern.

Timeline-Animationen sind nach wie vor die beliebteste Methode zum Animieren. Adobe hat sie mit den neuen Edge Animate-Bewegungspfaden vereinfacht, die Bewegungen in der realen Welt nachahmen können und über eine integrierte Beschleunigung verfügen. Sie können ganz einfach Animationen entlang der Timeline hinzufügen, indem Sie die Pin-Schaltfläche verwenden, um der Timeline Animationsmarkierungen hinzuzufügen, oder indem Sie Objekte auf der Bühne per Drag & Drop positionieren, die Edge Animate automatisch in Bewegungspfade konvertiert. Sie können sogar die Schaltfläche Aufzeichnen verwenden, mit der Sie Änderungen an den Objekten auf der Bühne aufzeichnen und diese Änderungen in Keyframe-Animationen konvertieren. Edge verfügt außerdem über eine eigene Version des Bedienfelds „Aktionen“, die übersichtlich ist und für jede Aktion eine eigene Registerkarte im Bedienfeld enthält. Das Testen Ihrer Animationen ist mit einer Kombination aus Adobe Edge und dem Google Chrome-Browser ganz einfach.

Wenn Sie mit Flash-Animationen vertraut sind, werden Sie feststellen, dass das Hinzufügen von Interaktivität in Edge dem Flash-Workflow insofern ähnelt, als Sie verschachtelte Zeitleisten für jedes Animationselement verwenden und vorinstallierte Codefragmente für die häufigsten Interaktionen und Animationen anwenden können. Diese Codefragmente verarbeiten sowohl Wiedergabeanimationen wie Wiedergabe, Pause, Wiederaufnahme und Stopp als auch Hot-Bereiche für die grundlegenden Schaltflächenaktionen wie Klicken, Schweben und sogar Hyperlinks. Um diesen Codefragmenten benutzerdefinierten Code hinzuzufügen, können Sie direkt in das Bedienfeld Aktionen eingeben. Natürlich können Sie im Bedienfeld Aktionen Ihr eigenes HTML5, JavaScript und CSS3 von Hand codieren. Da diese Art der Web- und Animationsprogrammierung häufig auf externen JavaScript-Bibliotheken basiert, können Sie sogar Links zu diesen externen Quellen hinzufügen.

Animation ist nur ein Teil dessen, was Sie mit der Edge-Gruppe von Apps tun können. Einer der wichtigsten Aspekte des Webdesigns ist die Erstellung einer Website, die für alle Arten von Bildschirmen vom Desktop bis zum Mobiltelefon ansprechend oder flexibel ist. Dies geschieht mit Medienabfragen und fließenden, prozentualen Rasterlayouts, die beide Teil der Tools in Edge Reflow sind. Edge Reflow ist eine WYSIWYG-Arbeitsumgebung, die den Code für Ihr Projekt generiert. Dieser Code ist für die neuesten Webstandards auf dem neuesten Stand, insbesondere für WebKit, das zunehmend von Webseiten bis hin zu E-Book-Readern unterstützt wird.

Das Erstellen eines Layouts in Edge Reflow ist so einfach wie das Zeichnen von HTML-Div-Containern mit dem Box-Tool auf dem Raster. Durch die absolute Positionierung dieser Divs können sie die Größe oder Transformation nach Bedarf für jede Bildschirmgröße ändern. Wie funktioniert das? Das Geheimnis sind Medienabfragen, die Sie im Medienabfrage-Manager anpassen können, indem Sie die minimalen und maximalen Parameter für drei oder mehr Bildschirmauflösungen festlegen. Diese Parameter bestimmen, wann das Design für die nächste Bildschirmgröße nach oben oder unten transformiert wird. Ich mag die farbcodierten visuellen Markierungen für jede Bildschirmgröße am oberen Rand des Arbeitsbereichs, mit denen Sie visualisieren können, wann diese Änderungen auftreten werden.

Eine der zeitsparendsten Edge-Funktionen besteht darin, wie Sie Ihre benutzerdefinierten CSS3-Stile problemlos über mehrere Projekte hinweg wiederverwenden und so konsistente Stile beibehalten können. Dadurch wird die Aktualisierung fast automatisch. Adobe hat dies mit dem Edge Reflow Styling-Bedienfeld zu einem Teil Ihres Workflows gemacht. Damit die Dinge übersichtlich bleiben, hat jeder Stil, wie z. B. Hintergründe oder Rahmen, einen eigenen Abschnitt. Über diese Registerkarten können Sie die Farbe und andere Parameter sowie die Hierarchie der Ebenen direkt steuern. Diese benutzerdefinierten Stile werden automatisch in CSS-Stilregeln konvertiert, die dann zur Wiederverwendung kopiert / eingefügt werden können.

In der Vergangenheit mussten Sie zur Vorschau Ihrer Webseite die Änderungen speichern, zu einem Webbrowser wechseln und die Seite aktualisieren. Adobe hat die Anzahl dieser Schritte mithilfe einer Kombination aus Edge Inspect und dem Chrome-Browser reduziert. Jetzt können Sie eine Vorschau anzeigen, wie Ihr Projekt auf mehreren Geräten vom Desktop über das Tablet bis zum Mobiltelefon angezeigt wird. Eine Funktion, die mir sehr gefällt, ist die Möglichkeit, einen Screenshot dieser Vorschau zu erstellen, um sie per E-Mail an Kunden und Teammitglieder zu senden oder in der Creative Cloud für die Zusammenarbeit zu verwenden.

Für diejenigen unter uns, die immer noch gerne mit Rohcode arbeiten, bietet Adobe Edge Code. Das Codefenster ist mit nur wenigen Steuerelementen auf der linken Seite übersichtlich und Edge Code lässt sich in Google Chrome integrieren, um Ihnen eine Live-Vorschau zu bieten. Wenn Ihr Code lang und unhandlich wird, können Sie mithilfe der Schnellbearbeitungsfunktion, mit der alle an ein Element angehängten Stile in einem Überlagerungsfenster aufgelistet werden, einen Drilldown zur einzelnen Elementebene durchführen. Da die Edge-Apps Teil der Creative Cloud sind, können Sie die Schriftarten Adobe Edge Web Fonts, Google Web Fonts und Typekit direkt in Edge Code verwenden. Edge Code generiert das Header-Skript-Tag, das die externe Schriftart abruft.

Da HTML5, JavaScript und CSS3 aufgrund der Beliebtheit mobiler Geräte ältere Animationstechniken schnell ersetzen, sind diese integrierten Edge-Apps sowie ihre Integration mit den anderen Adobe-Apps die nächste Generation des Workflows für das Design und die Entwicklung mehrerer Geräte.

Offenlegung: Ich wurde für diesen Artikel nicht finanziell entschädigt. Adobe hat für diese Überprüfung eine Creative Cloud-Mitgliedschaft bereitgestellt.Die Meinungen sind aufgrund meiner Erfahrung völlig meine eigenen.

Copyright 2018 Adobe Systems Incorporated. Alle Rechte vorbehalten. Screenshots von Adobe-Produkten mit Genehmigung von Adobe Systems Incorporated. Adobe, Photoshop, Photoshop-Album, Photoshop-Elemente, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere-Elemente, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst und Flash Paper ist / sind entweder [eine] eingetragene Marke (n) oder eine Marke (n) von Adobe Systems Incorporated in den USA und / oder anderen Ländern.

Video-Anleitungen: Building a Mobile App with Adobe Creative Cloud | Adobe Creative Cloud (April 2024).