Animationen mit Adobe Edge Animate

Benutzer im Web erwarten spektakuläre Designs und schätzen Animationen, die zu diesen Designs beitragen, solange sie keine Zeit verschwenden oder die Seitennavigation negativ beeinflussen.
Gut gemachte Animationen lenken die Aufmerksamkeit auf wichtige Details, können zeigen, wie eine Anwendung funktioniert und helfen bei der Navigation, wenn sie die vorherige Anforderung erfüllen, mit der viele dieser Animationen erstellt wurden Blinken und wenn sie die nötige Qualität aufwiesen, kamen sie beim User gut an.
Aber die Zeiten haben sich geändert und so wie sich die Technologien auch die Art und Weise weiterentwickelt haben, Animationen zu erstellen, kommt es hier ins Spiel Adobe Edge Animate, ein Tool, mit dem wir Animationen erstellen können HTML5, CSS3 und JavaScript ohne Programmierkenntnisse.
Das Obige mag etwas kompliziert klingen, wie ist es möglich, ein Tool zu haben, das mir hilft, Animationen in diesen Technologien zu erstellen, ohne Programmierkenntnisse? Es ist nicht so kompliziert, wie es scheint, aber zuerst müssen wir das Tool kennen und damit arbeiten, dafür werden wir es ausführen und wir werden vom Startbildschirm empfangen, der so aussehen sollte:

VERGRÖSSERN

Auf der rechten Seite sehen wir einige Links, um zu erfahren, wie Sie mit dem Tool einige Animationen erstellen, und auf der rechten Seite Links zum Öffnen oder Erstellen einer Datei. Lass uns auf den Link klicken Erstelle neu und wir werden zum Arbeitsbereich des Werkzeugs weitergeleitet, vorerst werden wir uns darüber keine Sorgen machen, aber wir werden unser Projekt speichern, um die vom Werkzeug erstellte Struktur untersuchen zu können. Schauen wir uns an, wie unsere Struktur aussieht:

VERGRÖSSERN

Wenn wir uns mit der Entwicklung von Webanwendungen auskennen, können wir einige Dateien mit bekannten Erweiterungen sehen, sehen wir uns die Funktion jeder dieser in einem Projekt von . an Edge-Animation:
.Eine DateiDiese Datei wird vom Tool verwendet, um unser Projekt zu verfolgen.
.HTML-DateiDiese Datei beschreibt eine Webseite, die Code verwendet HTML, sowie die restlichen Seiten im Internet.
.Js-DateiDiese Dateien enthalten Code JavaScript für unser Projekt, das eine leere Bühne für unsere Animation definiert und andere notwendige Aufgaben in den Projekten von Edge-Animation.
Neben diesen Dateien im Ordner edge_includes Wir haben zwei Dateien JavaScript zusätzliche, die Bibliotheken für unser Projekt sind und innerhalb unserer referenziert werden HTML und seine Funktion besteht darin, die Aktion der Bewegung als solche auszuführen.
Sobald wir gesehen haben, wie unser Projekt aufgebaut ist, ist es an der Zeit, die Bereiche unseres Arbeitsbereichs zu kennen. Schauen wir uns zuerst an, wie es aussieht:

VERGRÖSSERN

Jedes Panel ist namentlich gekennzeichnet, wobei die Elemente, Eigenschaften (Bearbeiten) und das Zeitleiste Sie verfügen über Tools und Widgets zum Erstellen von Animationen. Das größte Panel ist als Bühne o bekannt Bühne und dort erstellen wir die Animation. Schauen wir uns jedes der Elemente in unserem Arbeitsbereich genauer an:
BühneHier werden Grafiken und Texte des Projekts angezeigt und animiert, es hat Grenzen in der Anordnung und erlaubt uns, Elemente auszublenden oder darin zu platzieren. Zusätzlich wenn wir unser Projekt speichern Animieren kümmert sich um das Speichern von Text und Grafiken als HTML-Seite.
ElementeDie Elemente sind Objekte, die wir unserer Bühne hinzufügen und die als Ergebnis auf unserer endgültigen Webseite erscheinen, wo diese Elemente Illustrationen, Fotos oder sogar Text sein können.
Eigenschaften (Bearbeiten)Die Elemente haben Eigenschaften, die ihre Position und sogar ihr Aussehen auf der Bühne beeinflussen können, und wir können sie über das Bedienfeld von . verwalten Eigenschaften (Bearbeiten).
ZeitleisteEs ermöglicht uns, die Elemente und ihre Eigenschaften während des gesamten Projektverlaufs zu dokumentieren.
BibliothekHier können wir die Ressourcen, die wir in das Projekt importieren, dokumentieren und einen einfachen Zugriff auf die Symbole ermöglichen, an die wir glauben Animieren.
WerkzeugeSie werden oben im Arbeitsbereich angezeigt. Wir verwenden sie, um Elemente auf der Bühne zu erstellen, auszuwählen und zu ändern, es gibt nicht viele, aber wir wären überrascht, wie viel wir damit machen können.
Da wir wissen, wie unser Tool verbreitet wird und wir mit den Konzepten darin vertraut sind, können wir es wagen, unsere erste Animation zu erstellen.
Um unsere erste Animation zu erstellen, experimentieren wir ein wenig mit den Übergängen in einem bestimmten Bild. Sehen wir uns die folgenden Schritte an:
1- Wir werden ein neues Projekt mit der Option Neue Datei erstellen, falls wir es geschlossen haben, in dem wir daran arbeiten, die Struktur und die Elemente innerhalb des Tools zu verstehen. Wenn wir ein Projekt starten, ist unsere Bühne leer, wir können dies in den Eigenschaften von . ändern Bühne Auf der linken Seite des Bildschirms drücken wir dazu auf das weiße Feld und wählen eine Farbe unserer Wahl oder, falls wir eine Farbe in hexadezimaler Schreibweise haben, können wir sie wie in der folgenden Abbildung sehen:

VERGRÖSSERN

2- Im Fall dieses Tutorials haben wir eine dunkle Farbe gewählt, damit das Bild, das wir in das aufnehmen werden Bühne Markieren. Um nun ein Bild einzufügen, gehen wir zu Archiv und wir wählen aus importieren, der Datei-Explorer wird angezeigt und wir wählen das einzuschließende Bild aus:

VERGRÖSSERN

Wichtig ist, dass wir in den Eigenschaften unseres Szenarios den Überlauf u . haben Überlauf In versteckt seit unserer Bühne Es stellt einen kleinen Teil unseres gesamten HTML-Codes dar. Wenn wir also keine Elemente außerhalb der Bühne sehen möchten, ist es wichtig, diesen Wert für diese Eigenschaft zu haben. Wir können auch den Namen unserer Elemente im Abschnitt von . ändern Eigenschaften (Bearbeiten), so können wir sie in unserem Projekt besser identifizieren.
3- Jetzt gehen wir zu unserem Zeitleiste und wir überprüfen, ob der Wiedergabezähler auf steht 0:00 um mit unserer Animation zu beginnen. Hier kommt der interessante Teil ins Spiel und hier müssen wir maximale Aufmerksamkeit schenken, zuerst müssen wir überprüfen, ob die Keyframe-Modus drängt ebenso wie die automatischer Übergangsmodus, die wir im folgenden Bild sehen können:

Um unsere Animationen zu erstellen, müssen wir die Funktionalität von Pin umschalten die in der Schaltfläche neben dem aktiviert ist automatischer ÜbergangsmodusBeim Aktivieren dieser Schaltfläche aktivieren wir die Frames oder den Übergang und müssen vom gelben Zähler begleitet werden, da wir so einen Übergang von so vielen Sekunden machen können, bis wir unseren Pin auf die gleiche Ebene wie den zweiten Zähler bringen.
4- Zur Durchführung unserer erster Übergang lass uns den Knopf drücken Pin umschalten und wir werden den zweiten Zähler nehmen und ihn verschieben 200 Sekunden, danach verschieben wir unser Bild an den unteren Rand unseres Bildschirms, mal sehen, wie es aussieht:

VERGRÖSSERN

Wie wir den blau hervorgehobenen Teil im Zeitleiste stellt den Übergang dar, den wir in der Vorschau anzeigen können, wenn wir die Leertaste drücken. Wir sehen dann, dass es ziemlich einfach ist, einen Übergang zu machen, aber was ist, wenn wir einen zweiten Übergang oder mehr davon machen wollen? Dafür müssen wir unsere Stift zum zweiten Zähler, so zeigen wir an Animieren dass wir den Prozess des ersten Übergangs abschließen und einen neuen beginnen können.
5- Wir machen a zweiter Übergang wo wir dieses Mal die Deckkraft unseres Bildes verringern werden, wählen wir dazu unser Bild aus, indem wir seine Deckkraft auf 46% verringern und wie bereits erwähnt verschieben wir die Stift am zweiten Zähler und wiederholen Sie die Schritte von Punkt 4, mal sehen:

VERGRÖSSERN

6- Endlich machen wir a dritter Übergang um unsere Animation zu vervollständigen. Wie wir bereits wissen, verschieben wir unseren zweiten Zähler ein paar Sekunden, ziehen unser Bild schräg nach links und schließen den Übergang durch Verschieben des Stift zum zweiten Zähler:

VERGRÖSSERN

7- Wir speichern unsere Arbeit und drücken die Leertaste, um unsere Animation anzuzeigen. Wenn wir immer noch nicht zufrieden sind, können wir die Übergänge durchlaufen, die durch die blaue Farbe in unserem angezeigt werden Zeitleiste und wir ändern die Werte oder wenn wir die Art des Übergangs wünschen.
Da wir mit unserer Arbeit zufrieden sind, ist es an der Zeit, den letzten Schritt durchzuführen, und zwar die Anzeige zur Ansicht in einem Browser, für das wir arbeiten.
Es gibt zwei Möglichkeiten, unsere Arbeit anzuzeigen, die erste und die einfachste kann über das Tool erfolgen. Dazu gehen wir auf die Registerkarte Archiv und wir wählen aus Vorschau im Browser, wodurch die Animation sofort in unserem Standard-Webbrowser geöffnet wird:

Das zweite ist etwas komplizierter, wenn wir keine Erfahrung in der Webentwicklung haben, dh die Dateien nehmen und eine Integration mit unserer Webanwendung vornehmen. Es ist wichtig, dabei sehr vorsichtig zu sein und alle Dateien einzubeziehen, die von Animieren andernfalls funktioniert die Animation nicht.
Damit haben wir dieses Tutorial abgeschlossen, in dem wir wissen konnten, wie es funktioniert Adobe Edge Animate, sehen seine wichtigsten Eigenschaften und erstellen unsere erste Animation in wenigen Minuten, ohne dass eine einzige Codezeile erforderlich ist, und generieren Sie sie mit HTML5 Ja JavaScript zur Implementierung in eine beliebige Webanwendung.