Adobe Stock-Grafiken mit Animate zum Leben erwecken.
Durchsuche die Adobe Stock-Sammlung nach passenden Vektorgrafiken, ohne Animate zu verlassen. Versetze deine Grafiken in Bewegung, und exportiere die fertige Animation in mehreren Formaten.
Veröffentlicht am
Mit Adobe Animate CC – vorher Flash Professional – haben Sie Zugriff auf Millionen Stock-Fotos, Bilder und Grafiken, die Sie für Animationen in verschiedenen Formaten verwenden können.
Ich erstelle ein neues HTML5 Canvas-Dokument.
Über das Bedienfeld „CC Libraries“ kann ich auf Adobe Stock zugreifen.
In Adobe Stock suche ich nach einem Asset für meine Animation.
Ich kann die Suche direkt in Animate CC über das Bedienfeld „CC Libraries“ starten und die Assets gleich in die gewünschte Bibliothek herunterladen.
Ich suche nach „underwater ocean sea deep arctic water“ (Unterwasser Ozean Meer tief Arktis Wasser) und erhalte eine Auswahl verschiedener Stock-Bilder.
Wie Sie sehen, sind alle mit einem Wasserzeichen versehen.
Dieses Bild habe ich bereits lizenziert.
Das wird durch dieses Häkchen angezeigt.
Um eines dieser Bilder zu lizenzieren, kann ich eine Vorschau des Bildes herunterladen und in meinem Dokument verwenden und dann, wenn es mir gefällt, direkt über das Bedienfeld „CC Libraries“ lizenzieren, indem ich auf dieses Symbol klicke.
Als Nächstes lösche ich den Text im Suchfeld, weil ich das gewünschte Bild schon habe.
Das Bild möchte ich in meinem Dokument verwenden, daher wähle ich im Kontextmenü den entsprechenden Befehl (Use in document).
Hier ist nun mein Bitmap-Bild.
Im Moment ist es viel größer als die Bühne.
Die Größe will ich anpassen.
Meine Bühne ist 550 x 400.
Ich muss lediglich diese Werte eingeben, um das Bitmap-Bild an die Bühne anzupassen.
Ich werde diese Ebene in „Ocean“ (Ozean) umbenennen und sperren.
Dann erstelle ich eine neue Ebene direkt darüber.
Zurück in Adobe Stock starte ich einen weiteren Suchlauf mit den Suchbegriffen „dolphin porpoise blue cartoon“ (Delfin Schweinswal blau Zeichentrick).
Daraufhin werden wieder verschiedene Assets angezeigt.
Dabei handelt es sich überwiegend um Vektorgrafiken.
Genau das suche ich, denn Vektorgrafiken ermöglichen die einfache Bearbeitung und Animation bestimmter Asset-Bereiche.
Und sie lassen sich beliebig skalieren, ohne zu verpixeln.
Ich kann wieder eine Bitmap-Vorschau speichern oder die Grafik direkt von hier aus lizenzieren.
Ich habe bereits ein Bild lizenziert, das wir verwenden können – es ist hier in dieser Bibliothek.
Ich muss nur einen Rechtsklick machen und angeben, dass ich es in meinem Dokument verwenden möchte (Use in document).
Da es sich um eine Vektorgrafik handelt, muss ich festlegen, wie die Vektorgrafik in Animate CC importiert werden soll.
Ich möchte die editierbaren Pfade behalten (Maintain editable paths and effects), und ich will die Grafik als einzelne Animate-Ebene (Single Animate layer) importieren.
Dann wähle ich „OK“.
Hier ist mein Delfin.
Beachten Sie, dass nicht lizenzierte Vektorgrafiken mit einem weißen statt transparenten Hintergrund gerendert werden.
Sobald Sie das Bild jedoch lizenzieren, erhalten Sie eine vollständige Vektorgrafik mit transparentem Hintergrund.
Ich nenne diese Ebene „Dolphin“ (Delfin).
Als Nächstes passe ich die Größe mit dem Werkzeug „Frei transformieren“ an.
Nachdem ich das Tool ausgewählt habe, kann ich an den Griffpunkten ziehen und die Grafik verkleinern.
Wenn Sie eine Vektorgrafik auf diese Weise transformieren, halten Sie die Umschalttaste gedrückt, um die Proportionen des Delfins zu bewahren, damit er nicht gestaucht oder gedehnt wirkt.
Ich verkleinere ihn noch ein bisschen.
Dann klicke ich erneut auf das Auswahlwerkzeug, stelle sicher, dass das Bild ausgewählt ist und wähle „Modifizieren“ > „In Symbol konvertieren“ (Modify > Convert to Symbol).
Die Erstellung eines Movieclip-Symbols macht die Animation einer komplexen Vektorgrafik wie dieser ganz einfach.
Ich gebe den Namen „Dolphin“ (Delfin) ein und klicke auf „OK“.
Nun erweitere ich den Bildbereich bis zu Bild 80.
Ich klicke und ziehe über beide Ebenen bei Bild 80, um beide auszuwählen.
Dann wähle ich „Einfügen“ > „Zeitleiste“ > „Bild“ (Insert > Timeline > Frame).
Dadurch wird der Bildbereich bis zu Bild 80 erweitert.
Die Ozean-Ebene wird nicht animiert, daher lasse ich sie gesperrt.
Mit der rechten Maustaste klicke ich auf die Delfin-Ebene und wähle „Bewegungs-Tween erstellen“ (Create Motion Tween).
Bei Bild 1 platziere ich den Delfin außerhalb der Bühne.
Bei Bild 40 soll er ungefähr hier sein.
Beachten Sie diesen praktischen Bewegungspfad.
Wenn ich den Cursor über diesen Pfad führe, wird er in einen Cursor zur Bearbeitung von Formen umgewandelt.
Das erkenne ich an diesem kleinen Bogen.
Damit klicke ich auf den Bewegungspfad und passe ihn per Ziehen an.
Ich kann den Pfad entlang dieser Seiten beliebig verschieben.
Ich gehe nun zu Bild 80 über und verschiebe den Delfin außerhalb des Fensters.
Wie vorhin kann ich durch Klicken und Ziehen den Bewegungspfad anpassen.
Ich kann den Pfad noch weiter anpassen, wenn ich will.
In der Vorschau kann ich sehen, dass der Delfin ins Bild kommt, einen Kreis macht und dann wieder verschwindet.
Ich möchte jedoch noch einige Korrekturen vornehmen, indem ich „An Pfad ausrichten“ (Orient to path) wähle, während der Bewegungs-Tween noch ausgewählt ist.
Jetzt macht der Delfin einen kleinen Salto, bevor er wieder verschwindet.
Ich kann eine Vorschau anzeigen, indem ich zu Bild 1 zurückkehre und die Wiedergabe an dieser Stelle starte.
Um das Ganze für Canvas zu veröffentlichen, muss ich nur „Steuerung“ > „Testen“ (Control > Test) wählen.
Und so sieht das Ergebnis aus.
Beachten Sie: Alle Schritte in diesem Video, darunter die Integration von Adobe Stock-Assets, die Animation dieser Assets und schließlich der Export als HTML5 Canvas-Dokument wurden direkt in Animate CC durchgeführt.
Beitrag Von
