- - Erstellen Sie Webanimationen und Interaktionsdesigns in HTML 5 mit Adobe Edge

Erstellen Sie Webanimationen und Interaktionsdesigns in HTML 5 mit Adobe Edge

Die neuesten Webstandards, HTML5 und CSS3 inDurch die Verwendung von JavaScript konnte der Zeit- und Arbeitsaufwand für die Erstellung von Websites mit zahlreichen Grafiken, Texten und Animationen erheblich reduziert werden. Mit den Funktionen von HTML5 müssen Sie keinen Code zum Einbetten von Multimedia-Inhalten mehr manuell schreiben, während CSS3 die Flexibilität, Robustheit und Benutzerfreundlichkeit Ihrer Web-Oberflächenelemente erhöht. Wenn Sie nach einem Webdesign-Tool gesucht haben, mit dem Sie die neuesten Webstandards optimal nutzen können, ohne manuell Code für jedes Benutzeroberflächenelement eingeben zu müssen, müssen Sie das Tool neu starten Adobe Edge ist wahrscheinlich genau das, was Sie brauchen.

Adobe Edge wurde speziell für entwickeltGrafik-, Web- und Interaktionsdesigner, die häufig Probleme mit der Erstellung von Webbewegungen und animierten Inhalten unter Verwendung von HTML5-, CSS3- und JavaScript-Webstandards haben. Grundsätzlich handelt es sich um ein Web-Motion- und Interaktionsdesign-Tool zum Erstellen von animierten Inhalten mit HTML5, CSS3 und JavaScript. Es enthält alle grundlegenden Tools zum Erstellen, Bearbeiten, Optimieren und Entwerfen der Web-UI-Elemente, bietet jedoch einen intuitiven Animationschoreografen, mit dem Sie auf einfache Weise animierte Inhalte auf Ihrer Webseite erstellen und anpassen können. Darüber hinaus werden Sie nicht dazu gezwungen, ein neues Projekt von Grund auf neu zu starten. Sie können Ihre HTML-Datei darin importieren, um neue UI-Kompositionen einzubeziehen und mit vorhandenen UI-Elementen wie Tabelle, Textstilen, Bildschattierungen, Position, Schriftart, Containerausrichtung und mehr.

Die Hauptschnittstelle ist in 3 Abschnitte unterteilt. Die linke Seitenleiste enthält ausgewählte UI-Element-Kompositionswerkzeuge, die rechte Seitenleiste enthält alle wesentlichen Listen von Web-UI-Elementen, einschließlich Schatteneffekten, Bildern und Text, während der untere Abschnitt den Timeline-Editor zum Choreografieren von Animationen enthält.

Kantenhauptleitung 2

Im Bereich Elemente können Sie ausgewählte Elemente anzeigen / ausblendenElement und sperren Sie es, um eine weitere Bearbeitung zu verhindern. Wenn Sie ein Element im Hauptbildschirm auswählen, wird es sofort im Bereich "Elemente" hervorgehoben, sodass es leichter ausgeblendet oder gesperrt werden kann. Wenn Sie den Mauszeiger über ein Element bewegen, das in Elements aufgeführt ist, werden Klasseninitialen mit Namen angezeigt, sodass Sie es in der CSS-Datei leicht identifizieren können.

Hauptelemente

Das Eigenschaftenfenster auf der linken Seite zeigtKompositionswerkzeuge für das ausgewählte Oberflächenelement Ihrer Webseite. Nach der Auswahl können Sie die Größe der Position, die Deckkraft, die Schriftfamilie, die Größe und die Textstile ändern, den Transformationsursprung, die Bilddrehung usw. festlegen.

Kante 3

Mit dem Zeitleisten-Editor können Sie die Zeitleiste anzeigenjedes animierten Elements. Wenn Sie mit einer großen CSS-Datei arbeiten, klicken Sie auf die Filterschaltfläche, um nur animierte Elemente im Bereich "Elemente" anzuzeigen und ihre Positionen, Farben, Größe usw. schnell zu bearbeiten. Unten links im Bereich befindet sich die Zoomschaltfläche zum Vergrößern der Zeitleiste zur Überprüfung der zugewiesenen Zeit und des Übergangseffekts aller animierten Elemente.

animierte Elemente

Abgesehen von der Erstellung browserübergreifender kompatibelAnimierte Inhalte für alle gängigen Webbrowser, einschließlich Firefox, Chrome, Internet Explorer 9, und mit diesem Tool erstellte Webinhalte können auch auf iOS- und Android-Plattformen problemlos verwendet werden. Laut offizieller Community befindet sich Edge Preview in der aktiven Entwicklung und wird in Kürze mit zahlreichen Funktionen aktualisiert. Adobe Edge funktioniert unter Windows Vista und Windows 7.

Laden Sie Adobe Edge herunter

Bemerkungen