Die Benutzeroberfläche von Animate – Tutorial zu Adobe Animate

Als Nächstes wollen wir mal einen Blick auf die Arbeitsumgebung von Animate werfen. Dazu klicke ich hier auf die Schaltfläche "Neu erstellen" und in dem Dialog hier wähle ich jetzt einfach mal unter Figurenanimation Standard aus. Wie gesagt, wichtig ist, dass hier "HTML5 Canvas" ausgewählt ist, und jetzt klicke ich auf Erstellen. Hier haben wir jetzt unser Dokument. Wir sehen hier oben wird es noch "Unbenannt" genannt, in Klammern Canvas. Wenn ich es speichere, ändert sich natürlich hier der Titel, aber es wird weiterhin Canvas in Klammern dahinter stehen. Das sagt uns einfach, dass wir hier gerade im HTML5-Bereich sind. Wenn wir ein neues Dokument für ActionScript erstellt hätten, dann würde hier nicht in Klammern Canvas stehen, dann hätte man tatsächlich ein ActionScript, also Flash-Player-basiertes Format, und das wird ja heutzutage eher selten verwendet oder gar nicht mehr oder höchstens mal für Filmanimationen, von daher sollte man da unbedingt darauf achten, dass hier Canvas steht. Wenn man die Dateien nachher nämlich auch exportiert, dann exportiert man HTML- und JavaScript-Dateien und nicht eine einzige Flash-Datei, eine SWF-Datei, die im Flash-Player läuft. Ja, aber werfen wir nun einen Blick auf die Arbeitsoberfläche. Erst mal haben wir auf der linken Seite die Werkzeuge, die Palette mache ich mal etwas größer, damit wir die Werkzeuge hier auch alle sehen können. Und die Werkzeugpalette hier auf der linken Seite, die lässt sich auch anpassen. Wir haben hier diese drei Punkte und wenn ich darauf klicke, dann sehe ich alle Werkzeuge, die man noch so verwenden kann. Wir sehen, z.B. sind diese beiden Werkzeuge hier mit einem Warnhinweis versehen. Das liegt daran, dass diese beiden im Canvas-Modus, also unter HTML5, nicht unterstützt werden. Dass die 3D-Umgebung, dass man 2D-Objekte im 3D-Modus bewegen kann, das geht wie gesagt unter HTML5 nicht, dazu müssten wir zu ActionScript wechseln und daher sind diese hier, wie man sieht, ausgegraut mit dem Warnhinweis. Aber wir haben noch andere Werkzeuge und wenn uns hier ein Werkzeug wichtig ist, wie z.B. sagen wir mal das Bone-Werkzeug, dann kann man das einfach anfassen und hier hinziehen, wo man es gerne hätte. Wir sehen, es gibt natürlich auch Werkzeuge unterhalb von Werkzeugen, wenn ich hier nämlich die Maus gedrückt halte, dann sehe ich ein Unterwerkzeug. Auch das kann ich mir erstellen, indem ich ein Werkzeug auf das andere Werkzeug draufziehe. Man sieht dann keinen Strich, sondern eine Umrandung, und wenn ich jetzt loslasse, dann haben wir an der Stelle ein Werkzeug in der Unterauswahl erstellt. Diese erkennt man immer an diesem klitzekleinen Pfeil hier, daran sieht man, wenn ich jetzt die Maus einen Moment gedrückt halte, dann kann ich noch ein weiteres Werkzeug auswählen. Ja, so können wir uns also unsere Werkzeugpalette hier anpassen, wir können auch noch über diesen Strich hier, über diesen Balken, die Werkzeuge unterteilen, wie man das hier sieht, dass man einmal die Auswahlwerkzeuge hat, dass man einmal alle Werkzeug zum Thema Farben hat z.B. oder Ähnliches. Ja, und so kann man das auf die eigenen Bedürfnisse anpassen, das finde ich wunderbar, weil jeder benutzt andere Werkzeuge oder favorisiert hier andere Tools und somit kann man Werkzeuge, die man selten oder gar nicht benutzt, einfach entfernen, dann sind die ja auch nicht im Weg, weil es gibt nichts Lästigeres, als wenn man hier eine Werkzeugpalette mit 50 Werkzeugen hat und man muss jedes Mal sein Werkzeug suchen. Das erst mal so zur Werkzeugpalette. Hier unten haben wir die Zeitleiste. Die kann man auch hier vergrößern und verkleinern. Je nachdem, wie viele Ebenen man darin hat, macht es natürlich Sinn, die zu vergrößern. Hierin wird man sehr viel Zeit verbringen, wenn man später animiert. Wir sehen hier die Bilder, die angezeigt werden. Wir sehen hier die Zeit, bei welcher Sekunde wir gerade sind, wir sehen hier die ausgewählte Rate für die Bilder pro Sekunde. Auf der rechten Seite haben wir die Eigenschaftenpalette. Diese ist kontextsensitiv, d.h., wenn man irgendwas ausgewählt hat, ein Werkzeug z.B. oder halt ein Element auf der Bühne, dann passt sich diese Eigenschaftenpalette entsprechend an. Ich kann übrigens hier die Leinwand, weil die jetzt nicht ganz hier in den Ausschnitt reinpasst, per Doppelklick auf die Hand automatisch verkleinern, sodass sie auf die Größe gebracht wird, dass wir sie jetzt hier komplett angezeigt bekommen. Mit einem Doppelklick auf die Lupe sehe ich sie in 100 %, ein Doppelklick auf die Hand verkleinert sie entsprechend. Das ist auf jeden Fall schon mal sehr praktisch. Das ist also die Leinwand bzw. Bühne oder auch Canvas und alles, was wir hier ausgewählt haben, haben wir dann auf der rechten Seite als Eigenschaft angezeigt. Und diese Eigenschaften unterteilen sich auch noch mal in die Eigenschaften fürs Werkzeug, also, je nachdem, welches Werkzeug man gerade ausgewählt hat, für das Objekt, wenn man gerade ein Objekt ausgewählt hat, für das Bild, d.h. wenn man gerade auf der Zeitleiste irgendwohin geklickt hat, hier sieht man das. Ich klicke hier auf das Bild in der Zeitleiste, dann ändert sich das hier, und fürs Dokument. D.h., wenn ich hier ins Graue reinklicke z.B., dann springt er hier in die Eigenschaften vom Dokument und dann sehe ich hier die Eigenschaften des Dokumentes, also in dem Fall die Breite und Höhe, die Anzahl der Bilder pro Sekunde, die Bühnenfarbe usw. Diese Palette ist auf jeden Fall sehr, sehr wichtig, auch hier in Zusammenhang mit der Zeitleiste wird man sehr viele Einstellungen vornehmen. Eine andere wichtige Palette ist noch die Bibliothek. Hierin befinden sich später alle Elemente, die wir so animieren wollen. In dem Fall sind das Symbole. Ja, und somit kann man dann auch hingehen, wenn man einen großen Monitor hat, z.B. beide Paletten nebeneinander setzen, indem man das so rauszieht. Dann werden die Paletten nebeneinander angezeigt und dann habe ich hier einmal die Eigenschaften und rechts die Bibliothek und kann somit praktischerweise immer sehen, was sich in der Bibliothek befindet, Objekte aus der Bibliothek in die Bühne reinziehen usw. Jetzt habe ich hier nicht den Platz, deswegen docke ich das wieder aneinander. So, ich ziehe das einfach aufeinander und dann sehen wir hier, dass wir die Reihenfolge auch noch mal ändern können. Wir sehen jetzt hier die Eigenschaften-Bibliothek und auch noch mal Elemente, auf die man Zugriff hat. Ja, und so kann man also die Paletten hier anordnen. Auf der rechten Seite sehen wir hier noch viele kleine Icons. Darunter befinden sich noch mal weitere Paletten, wie z.B. die Palette für die Farbe, für Farbfelder oder z.B. hier fürs Transformieren. Je nachdem, wie häufig man natürlich diese ganzen Paletten hier benötigt, kann man diese auch losdocken und hiermit andocken, um diese dann zu verwenden, was natürlich auch immer davon abhängig ist, wie groß der Monitor ist. Wenn man eine Palette verwendet, wenn ich jetzt z.B. diese Palette rausziehe und die jetzt geschlossen habe, dann verschwindet sie ja hier in der Liste. Ich komme mal wieder da ran, indem ich auf Fenster gehe und dann z.B. hier wieder Transformieren auswähle, da ist die Palette wieder. Jetzt kann ich sie anfassen und wieder hier in der Seite eindocken, wo ich sie gerne hätte. Es besteht auch die Möglichkeit, das so einzustellen, dass sich Paletten automatisch wieder schließen. Wenn ich z.B. mit dieser Palette hier arbeite und zur Seite klicke, dann verschwindet sie wieder. Wenn ich aber hier einen Rechtsklick mache, dann kann ich auswählen, dass diese nicht mehr automatisch ein- und ausgeblendet wird. Und wenn ich jetzt zur Seite klicke, sehen wir, die Palette bleibt immer geöffnet. Das Ganze kann ich natürlich auch wieder aktivieren. Wenn ich jetzt zur Seite klicke, dann schließt sich die Palette wieder. Ist natürlich auch ganz praktisch, ich werde das Ganze jetzt wieder etwas verkleinern, ja, und wenn man diese Paletten jetzt alle auf die eigenen Bedürfnisse angepasst hat und die Werkzeuge und die Leisten, dann kann man diese auch abspeichern als eigenen Arbeitsbereich. Wie wir sehen können, gibt es schon ein paar voreingestellte Arbeitsbereiche wir können aber hier jetzt hingehen, dem Arbeitsbereich einen Namen geben, ich nenne das einfach mal "Neu", und abspeichern. Und somit habe ich in Zukunft hier jetzt "Neu" zur Auswahl oder ich kann wechseln auf, nehmen wir mal Animator z.B., dann sieht die Palette anders aus. Oder ich gehe wieder zurück zu "Neu", dann sind wir wieder da, wo wir gerade eben waren. Ich würde unbedingt empfehlen, den Arbeitsplatz auf die eigenen Bedürfnisse anzupassen – hier sehen wir z.B. ist er noch ein bisschen klein, hier wird der Button abgeschnitten – und diesen Arbeitsbereich dann abzuspeichern, um möglichst effizient zu arbeiten.