Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Creative Cloud im Überblick

HTML-Inhalte mit Edge Animate entwickeln

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Edge Animate erstellt animierte, interaktive HTML-Inhalte auf Basis von JavaScript. Mobile Endgeräte unterstützen die darin entwickelten Elemente ebenfalls.
06:51

Transkript

Edge Animate ist ein Programm, mit dem Sie Animationen erstellen können. Diese Animationen sind gedacht für Webseiten und die Idee ist es, HTML Elemente auf Basis von JavaScript zu animieren. Das heißt, das Ganze ist internetseitentauglich für Browser aber auch für Smartphones und Tablets, die beispielsweise kein Flash unterstützen. Erzeugen wir als allererstes mal ein solches leeres, neues HTML Dokument, speichern das Ganze mal ab. Hier vielleicht auf dem Desktop. Speichern. Wir haben hier jetzt unseren Dokumentarbeitsbereich, weiter unten eine Zeitleiste, ein Eigenschaften Fenster. Ich sehe die HTML Elemente, die momentan noch leer sind und eine Bibliothek. Und in diese Bibliothek möchte ich als Allererstes ein paar Bilder importieren. Machen wir das mal hier von meiner Festplatte. Da haben wir einige JPEG vorbereitet und da wählen wir einfach mal drei Bilder aus. Die öffnen wir und die tauchen jetzt hier entsprechend in meiner Bibliothek auf. Hier kann man auch Symbole erstellen, Schriftarten, Webschriftarten anlegen, Hier beispielsweise aus den Adobe Edge WebFonts kann ich mir jetzt hier eine Schriftart auswählen, und kann die hier für meine Animationen benutzen. Nehmen wir beispielsweise mal die bigshot-one, sagen Schriftart hinzufügen und die taucht jetzt in meiner Liste auf. Ebenso lassen sich auch Audio- und Videodateien laden. Wir wollen jetzt unser Bild einmal hier auf der Bühne platzieren und das Ganze ein bisschen animieren. Wirt wollen mal, damit wir alles sehen, von der Bühne ein bisschen rauszoomen, und so passt das Bild jetzt ganz gut da rein. Wir sehen jetzt hier, das Bild taucht in unserer HTML Struktur auf und auch gleichzeitig hier in unserer Zeitleiste. Wir wollen jetzt, dass dieses Bild hier reinanimiert wird. Dafür hat man hier so einen Pin, und hier kann ich jetzt diesen Pin entsprechend setzen, und sagen, ob ich das Bild rein- oder rausanimieren möchte, Das heißt, zu Beginn ist das Bild jetzt hier draußen und zu dem Pin bewegt es sich jetzt sozusagen hin. Das können wir jetzt hier sehen, wenn ich in dem Fall meine Animation abspiele. Das ist linear noch ein bisschen langweilig. Deswegen wähle ich die Animation jetzt an, und sage hier dass ich ganz gerne ein Abbremsen haben möchte. Hier gibt es auch verschiedene Funktionen, wie das passieren kann. Vielleicht hier so elastisch, oder über einen Bounce Wir nehmen mal hier so eine einfache, kubische Animation und mit der läuft das Ganze dann eben durch so ein Abbremsverhalten. Ich speichere das und schaue mir das mal im Browser an. Drücke dazu STRG Return. Und hier sieht man im Prinzip schon die ganze Animation. Soweit ist es ja noch gar nicht so schwierig. Wir wollen jetzt hier noch ein bisschen Text hinzufügen. Dazu machen wir als Allererstes mal die Bühne ein bisschen breiter. Wir können entweder hier eine feste Breite in Pixel angeben oder wenn ich das hier umstelle, dann in Prozent. Das heißt, ich kann hier eine Browserbreite definieren und kann zum Beispiel sagen: mein Browser hier 700 Pixel oder so, kann ich natürlich jetzt hier auch anpassen und die Bühne kann jetzt hier einen Prozentwert davon einnehmen. Nehmen wir mal einen statischen Wert von 750 Pixeln. und so habe ich jetzt noch Platz für meinen Text. Geben wir hier den Text einfach ein. Image01 ist jetzt mal die Bildunterschrift, und da ich ja schon ein Webfont hinzugefügt habe, taucht der jetzt hier auch gleich auf. Den kann ich jetzt hier aus der Liste entsprechend auswählen. Wählen wir noch eine entsprechende Farbe aus. Hier habe ich einen kleinen Farbmischer, nehmen wir ein dunkles Grün, fügen das jetzt hier entsprechend hinzu, und ich möchte vielleicht auch noch einen Hintergrund haben für meine Seite. Nehmen wir also hier noch mal ein Rechteck. Das Rechteck soll, wie schon gesagt, in den Hintergrund, also ganz nach unten gelegt werden. Das machen wir mal kurz in den Elementen. Und da kann ich jetzt beispielsweise hier Farben aber auch Verläufe auswählen. Das heißt, ich nehme mal hier einen Verlauf von einem sehr hellen Grün. Hier unten ist es ja dunkel. Den oberen Verlauf gleich als eher helles Grün angelegt. Ungefähr so etwas. Das könnte ganz gut dazu passen. Schauen wir uns das Ganze noch mal im Browser an. Gehen wir auf Datei, Vorschau im Browser, Hier sieht man jetzt entsprechend meine Animation. Das Angenehme ist, dass ich nicht nur auf diese Art und Weise mit Edge Animate Animationen erstellen kann sondern ich kann auch ganze bestehende Webseiten öffnen. Wenn wir hier mal alles schließen, öffne ich mal einfach eine Webseite hier, die ich bereits erstellt habe, und bisher ist es ein statisches HTML Dokument. Wir sehen jetzt auch hier index.html. Und aus dieser Seite möchte ich einfach bestimmte Elemente animieren. Die kann man jetzt hier auch anwählen. Beispielsweise sehen wir jetzt hier in unserer HTML Struktur gibt es hier ein Bild. Ich werde mal schauen, welches das ist. Das ist jetzt hier genau das Logo. Das möchte ich gerne einblenden. Also sagen wir hier: wir wollen für das Logo die Sichtbarkeit animieren. Wir fangen hier bei 0% Sichtbarkeit an, damit blenden wir es aus, erzeugen hier einen KeyFrame, und wenn wir jetzt ein bisschen weiter gehen hier, sagen wir zu einer Sekunde. Dann möchte ich diesen Eigenschaftswert auf 100% anpassen und hier wird jetzt mein Logo im Prinzip eingeblendet. Wenn das fertig ist, kann ich hier unten weitere Elemente anpassen. Das heißt, wir haben hier zum Beispiel einen Text den möchte ich jetzt ein bisschen bewegen. Dafür wählen wir die Überschrift an und können jetzt ebenfalls sagen: wir fangen an hier beispielsweise mit einer Y-Position gehen wir jetzt ein Stück nach oben, erzeugen hier wieder einen KeyFrame, indem wir auf das kleine Symbol dafür klicken, und nach einer Sekunde soll es dann ein wenig nach unten sich bewegt haben. Wir können das mal in der Vorschau abspielen. Gehen wir dazu einfach auf Vorschau im Browser. Und wir sehen jetzt hier wird etwas eingeblendet. Ich muss mich beeilen. Da unten wird es entsprechend jetzt animiert. Auf die Art und Weise kann man also sehr einfach hier kleine Animationen in eine Webseite einfügen. Da gibt es dann hier verschiedene Funktionen, die ich animieren kann wie beispielsweise die Skalierung oder Drehung von Elementen, genauso wie die Sichtbarkeit und hier gibt es viele Eigenschaften wie Beschneiden oder andere Cursoroptionen und vieles mehr. Mit Edge Animate kann ich auf die Art und Weise schnell mal kleine Animationen zu einer Webseite, auch zu einer bestehenden Webseite hinzufügen, und Javascript kann ich hier natürlich auch hinzufügen. Das heißt, bestimmte Aktionen kann ich hier durchführen,. Wenn man jetzt auf ein Objekt klickt, könnte ich sagen: wenn man mit einer Maus einen Klick auf das Objekt macht, dann möchte ich gerne einen Link in einem neuen Fenster öffnen und hier gebe ich dann die entsprechende URL an. Auch das können wir uns ja schnell nochmal in der Vorschau ansehen. Unser Logo wird eingeblendet, hier unten der Text bewegt und wenn ich drauf klicke, sieht man: wir kommen entsprechend zu einer neuen Webseite. Da hilft dieser kleine JavaScript Editor, der hier entsprechend eingebaut ist. Für diese Aktionen hier habe ich schon ein paar Codefragmente, die ich entsprechend benutzen kann.

Creative Cloud im Überblick

Lernen Sie Adobes Creative Cloud und all ihre Applikationen kennen. Sven Brencher zeigt, was hinter CC und den Applikationen für Web, Design, Fotografie und Publishing steckt.

7 Std. 24 min (55 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Mit dem Creative Cloud Update vom Oktober 2014 wurde Adobe Kuler umbenannt in Adobe Color.

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!