Im letzten Video habe ich mein Boot mit dem Farbverlauf-Werkzeug aufgepeppt.
In diesem Video zeige ich, wie ich in Photoshop einen Blitz erstelle, über Creative Cloud-Bibliotheken in Animate importiere und mithilfe von Farbeffekten in mein Projekt einbinde.
Los geht’s.
Ich beginne in Animate.
Ich möchte einen Blitz für einen Film erstellen.
Dazu muss ich wissen, welche Größe er haben muss.
Ich sehe jetzt nach, wie groß die Bühne für meinen Film ist.
Ich wähle „Modifizieren“ (Modify), „Dokument“ (Document) oder drücke Befehl/Strg+J.
Die Bühnengröße (Stage size) beträgt 640 x 480.
Ich muss darauf achten, dass der von mir erstellte Blitz mindestens so groß wie die Bühne ist.
Ich klicke auf „OK“.
Jetzt wechsle ich zu Photoshop und öffne eine neue Datei mit „Datei > Neu“ (File > New).
Ich führe ein paar einfache Schritte aus.
Ich lege eine Breite (Width) von 700 und eine Höhe (Height) von 500 fest.
Dann klicke ich auf „OK“.
Zur Erinnerung: Die Datei muss zumindest ein bisschen größer als die Bühne sein.
Hier lege ich nun die Standardfarben fest.
Ich klicke hierauf oder drücke die D-Taste und lege Schwarz und Weiß als Standardfarben für Vordergrund und Hintergrund (Default Foreground and Background Colors) fest.
Ich rufe das Verlauf-Werkzeug (Gradient Tool) per Klick oder mit der G-Taste auf, um einen Schwarz-Weiß-Verlauf zu erstellen.
Ich kann hier klicken, um mich zu vergewissern.
Hier steht „Schwarz, Weiß“ (Black, White).
Und hier ist der Schwarz-Weiß-Verlauf.
Ich klicke auf „OK“.
Jetzt ziehe ich einen Verlauf von links nach rechts.
Dann gehe ich zum Menü mit den Filtern: „Filter“, „Renderfilter“ (Render), „Differenz-Wolken“ (Difference Clouds).
Dann wähle ich „Bild“ (Image), „Korrekturen“ (Adjustments), „Umkehren“ (Invert) oder drücke Befehl/Strg+I.
Dann wähle ich „Bild“ (Image), „Korrekturen“ (Adjustments), „Tonwertkorrektur“ (Levels) oder drücke Befehl/Strg+L.
Im Bedienfeld „Tonwertkorrektur“ (Levels) klicke ich auf das kleine Dreieck für Grau und ziehe es weit nach rechts.
Aber nicht ganz nach rechts – ich schiebe es wieder etwas zurück.
Man sieht einen Blitz und einige Wolken.
Das sieht schon ganz gut aus.
Wenn es mir nicht gefällt, kann ich diese Schritte einfach wiederholen.
Wie bei einem echten Blitz entsteht jedes Mal ein anderes, organisches Ergebnis.
Ich klicke auf „OK“.
Ich drücke Befehl/Strg+U oder wähle „Bild“ (Image), „Korrekturen“ (Adjustments), „Farbton/Sättigung“ (Hue/Saturation).
Ich aktiviere das Kontrollkästchen „Färben“ (Colorize) und wähle einen Blauton, der zum Himmel passt.
So ungefähr.
Ich klicke auf „OK“.
Der Blitz ist jetzt fertig.
Als Nächstes möchte ich den Blitz in Animate laden.
Dazu könnte ich „Datei > Exportieren > Für Web speichern (Legacy)“ (File > Export > Save for Web (Legacy)) wählen, meine Datei speichern und sie dann in Animate importieren, indem ich zur Datei navigiere und sie öffne usw.
Alles ziemlich umständlich.
Besser und schneller geht es mit der Creative Cloud-Bibliothek.
In Photoshop wähle ich „Fenster > Bibliotheken“ (Window > Libraries).
Die Creative Cloud-Bibliothek wird geöffnet.
Ich habe bereits eine Bibliothek namens „Animate CC“.
Andernfalls könnte ich einfach eine neue Bibliothek erstellen, indem ich in diesem Menü „Neue Bibliothek erstellen“ (Create New Library) wähle.
Es ist ziemlich einfach, Elemente in die Bibliothek aufzunehmen.
Ich kann die gewünschte Ebene direkt in die Bibliothek ziehen.
Schon ist sie mit meinen Creative Cloud-Bibliotheken synchronisiert.
Oder ich aktiviere das Verschieben-Werkzeug (Move Tool) und ziehe das Element von der Bühne direkt in die Bibliothek.
In beiden Fällen habe ich jetzt mehrere Blitze für meinen Film zur Verfügung.
Wenn es zu viele sind und ich einige löschen möchte, klicke ich auf ein überflüssiges Element und dann auf den Papierkorb.
Das Schöne ist: Ich kann jetzt zu Animate wechseln und in Animate über „Fenster“ (Window) meine Creative Cloud-Bibliotheken (CC Libraries) öffnen.
Alles, was ich in meiner Bibliothek speichere, steht in sämtlichen Adobe Creative Cloud-Programmen zur Verfügung.
Das ist wunderbar.
Ich klicke auf meinen Blitz und ziehe ihn einfach auf die Bühne.
Daraufhin wird dieses Import-Dialogfeld geöffnet.
Ich werde gefragt, ob ich ein abgeflachtes Bitmap-Bild (Flattened bitmap image) importieren möchte. – Möchte ich.
Wenn ich dieses Kontrollkästchen aktiviere, kann ich das Element in einem Symbol platzieren.
Ich aktiviere es und klicke dann auf „Importieren“ (Import).
Sehr schön.
Jetzt befindet sich der Blitz auf der Bühne innerhalb eines Movieclip-Symbols.
Außerdem ist eine neue Ebene namens „Hintergrund“ (Background) hinzugekommen.
Sie heißt „Hintergrund“ (Background), weil die Ebene in Photoshop „Hintergrund“ hieß, als ich sie in die Creative Cloud-Bibliothek gezogen habe.
Das möchte ich ändern.
Ich doppelklicke auf den Namen und gebe „Lightning“ ein.
Diese Ebene ziehe ich unter „boat“ und über „Sky“.
Wenn ich das tue, wird die Ebene entlang eines Pfads geführt.
Sie wird eingerückt und ist jetzt Teil der geführten Ebene (Guide).
Das möchte ich nicht.
Im Kontextmenü wähle ich „Eigenschaften“ (Properties).
Hier ändere ich die Einstellung „Führungsebene“ (Guided) in „Normal“.
Dann klicke ich auf „OK“.
Jetzt ist die Ebene nicht mehr eingerückt und einfach eine normale Ebene.
Das gleiche Ergebnis hätte ich erzielt, wenn ich die Ebene unter „Sky“ gezogen hätte und „Sky“ dann unter „Lightning“.
So wäre auch eine normale Ebene entstanden.
Als Nächstes klicke ich auf den Blitz und öffne das Bedienfeld „Ausrichten“ (Align) oder drücke Befehl/Strg+K.
Das Kontrollkästchen „An Bühne ausrichten“ (Align to stage) muss aktiviert sein.
Ich richte den Blitz horizontal und vertikal an der Bühne aus.
Jetzt wechsle ich zur Bibliothek (Library).
Beim Importieren dieses Elements aus der Creative Cloud-Bibliothek wurde auch ein Ordner namens „Hintergrund.psd Element“ (Background.psd Asset) erstellt.
Hier ist die Bitmap „Hintergrund“ (Background).
Und hier ist das neue Symbol „Hintergrund“ (Background), das ich ebenfalls in „Lightning“ umbenenne, damit klar ist, was was ist.
Jetzt kann ich den Blitzeffekt erstellen.
Zuerst verschiebe ich diesen ersten Keyframe.
Ich ziehe den Blitz nach rechts, sodass er erst nach etwa 45 Frames oder 2 Sekunden beginnt.
Bei Frame 1 habe ich jetzt einen leeren Frame.
Wenn ich auf der Zeitleiste (Timeline) ungefähr bis zu Frame 45 scrubbe, schlägt der Blitz ein.
Jetzt möchte ich den Lichtblitz hinzufügen.
Auf den Blitz soll ein weißer Lichtblitz folgen.
Etwa drei Frames später öffne ich das Kontextmenü und wähle „Schlüsselbild einfügen“ (Insert Keyframe).
Ich klicke auf die Instanz auf der Bühne, wodurch die Eigenschaften (Properties) aktualisiert werden.
Jetzt sehe ich die Farbeffekte (Color Effects).
Für „Farbton“ (Tint) lege ich ein 100%iges Weiß fest.
Hier ist der Farbton-Effekt zu sehen.
Ich kann einen Farbton und einen Prozentsatz festlegen.
Farbeffekte sollten sparsam verwendet werden, denn viele davon funktionieren bei einer Canvas-Datei nicht.
Ich kann aber Weiß und Alpha-Transparenz verwenden.
Hier ist also das Weiß.
Dieses Weiß soll ebenfalls zwei Frames lang zu sehen sein.
Beim dritten Frame füge ich einen Keyframe hinzu.
Dieses Mal verwende ich nicht das Kontextmenü, sondern klicke auf das Icon „Schlüsselbild einfügen“ (Insert Keyframe).
Schon ist ein Keyframe erstellt.
Ich klicke auf den Keyframe.
Statt auf die Instanz auf der Bühne zu klicken, navigiere ich zu „Objekt“ (Object) im Bedienfeld „Eigenschaften“ (Properties).
„Farbton“ (Tint) ändere ich in „Ohne“ (None), damit der Blitz wieder zu sehen ist.
Ich habe also den Blitz, den weißen Lichtblitz und dann wieder einen Blitz.
Der Blitz soll etwas organischer aussehen.
Ich möchte aber keinen neuen Blitz erstellen und dann als Bitmap importieren.
Ich kann aber den vorhandenen Blitz vielleicht einfach transformieren.
Ich mache einen Rechts- bzw.
Ctrl-Klick darauf und wähle „Transformieren > Horizontal spiegeln“ (Transform > Flip Horizontally).
Jetzt sieht der Blitz anders aus.
Direkt im nächsten Frame füge ich einen weiteren Keyframe hinzu, sodass ein etwas anderes Timing entsteht.
Ich füge also einen Keyframe ein und ändere im Bedienfeld „Objekt“ (Object) den Farbton (Tint) zurück in Weiß.
Jetzt habe ich zwei Frames lang den Blitz, zwei Frames mit dem weißen Lichtblitz, gefolgt von einem Frame mit Blitz und einem Frame mit weißem Lichtblitz.
Hier wähle ich im Kontextmenü „Leeres Schlüsselbild einfügen“ (Insert Blank Keyframe).
Werfen wir einen Blick darauf.
Ich klicke auf „Abspielen“ (Play), und der Film wird wiedergegeben.
Sieht wie ein richtiges Gewitter aus.
Jetzt möchte ich noch einen Lichtblitz hinzufügen.
Dieser kann vielleicht etwas länger anhalten.
Es soll zwei Mal blitzen, gefolgt von einer Pause.
Und dann, ungefähr hier, füge ich einen Keyframe ein.
Dafür kann ich die bereits vorhandenen Keyframes nutzen.
Ich wähle diese beiden Frames aus, den Blitz und das Weiß.
Jetzt sind alle vier Frames ausgewählt.
Ich halte die Wahl- bzw.
Alt-Taste gedrückt, klicke auf den Blitz und ziehe ihn ungefähr bis zu Frame 75.
Auch dieser Blitz soll anders aussehen.
Ich klicke also auf den Blitz.
Im Kontextmenü auf der Bühne wähle ich „Transformieren“ (Transform) und „Vertikal spiegeln“ (Flip Vertical).
Jetzt sieht es so aus, als hätte ich drei verschiedene Blitze.
Hier habe ich den ersten, hier den zweiten, der anders aussieht, und hier nun den dritten.
Ich spiele den Clip ab.
Schön.
Ich möchte, dass dieser Blitz einen Frame länger dauert, damit es natürlicher wirkt.
Dieser Blitz dauert zwei Frames, dann kommt hier der zweite Blitz, der nur einen Frame dauert.
Dieser hier könnte dann drei Frames lang sein.
Wenn ich den Cursor hier oben auf der Zeitleiste (Timeline) platziere und dann die F5-Taste drücke, wird ein Frame eingefügt.
Jetzt dauert der Blitz drei Frames.
Danach folgt ein weißer Lichtblitz.
Ich sehe es mir wieder an.
Perfekt.
Blitze sind immer unterschiedlich.
Manchmal sind sie länger am Himmel zu sehen, manchmal nur kurz.
Die Blitze wirken also sehr natürlich.
Eine Änderung steht nun noch aus.
Ich möchte, dass der Himmel dunkler wird, bevor der Blitz einschlägt.
Zu diesem Zweck klicke ich auf den Himmel hier im Hintergrund.
Wenn ich auf die Bühne klicke, sehe ich, dass dies immer noch eine Bitmap ist.
Ich wandle sie in ein Symbol um.
Für meine Auswahl auf der Bühne wähle ich „Modifizieren“ (Modify), „In Symbol konvertieren“ (Convert to Symbol).
Ich nenne dieses Element „Sky“.
Wenn ich auf „OK“ klicke, wird angezeigt, dass der Name „Sky“ schon vergeben ist.
Ich setze daher einen Bindestrich hinter das Wort.
Eines dieser Elemente ist der Himmel als Bitmap, das andere der Himmel als Symbol.
Ich klicke auf „OK“.
Da der Himmel jetzt ein Symbol ist, kann ich Farbeffekte (Color Effects) verwenden.
Ungefähr eine Sekunde vor dem Blitz klicke ich hier und füge einen Keyframe hinzu – wieder mit dem Button „Schlüsselbild einfügen“ (Insert Keyframe).
Nur ein Klick, und schon ist ein Keyframe erstellt.
Ich bewege mich weiter auf der Zeitleiste (Timeline).
Ungefähr an diesem Punkt hier füge ich einen weiteren Keyframe hinzu.
Dazwischen öffne ich das Kontextmenü und wähle „Klassisches Tween erstellen“ (Create Classic Tween).
Auf jeden Fall möchte ich den Farbton (Tint) ändern.
Ich möchte den Farbton ändern, sodass er dunkelgrau wird, und vielleicht die Deckkraft verringern.
Das Problem ist, dass dies bei einer Canvas-Datei nicht funktioniert.
Ich kenne aber einen Workaround: Ich wähle hier „Alpha“ aus.
So verringere ich die Deckkraft des Himmels.
In diesem Fall wird der Himmel dadurch heller.
Das ist nicht der gewünschte Effekt.
Wenn ich aber die Sichtbarkeit des Himmels deaktiviere, wird der weiße Hintergrund sichtbar.
Diesen Hintergrund möchte ich nun abdunkeln.
Ich wähle „Modifizieren > Dokument“ (Modify > Document) und ändere die Bühnenfarbe (Stage color) in einen dunklen Grauton.
Dann klicke ich auf „OK“.
Wenn ich den Himmel jetzt wieder sichtbar mache, sehe ich, wie die Alpha-Transparenz abnimmt, der Himmel verblasst und der dunkelgraue Hintergrund sichtbar wird.
Ich wähle einen noch dunkleren Farbton aus.
Sieht gut aus.
Ich habe jetzt also den Himmel, der dunkler wird.
Es sieht aus, als würden Wolken aufziehen, dann blitzt es.
Danach wiederholt sich der Effekt.
Es blitzt wieder.
Ungefähr an dieser Stelle soll die Sonne wieder zum Vorschein kommen.
Bei ausgewählter Ebene „Sky“ füge ich einen Keyframe hinzu.
Etwas später auf der Zeitleiste (Timeline) füge ich einen weiteren Keyframe ein.
Dazwischen öffne ich das Kontextmenü und wähle „Klassisches Tween erstellen“ (Create Classic Tween).
Für den zweiten Keyframe wähle ich im Bedienfeld „Objekt“ (Object) statt „Alpha“ die Option „Ohne“ (None).
Jetzt ist der Tag erst sonnig, dann düster, dann blitzt es zwei Mal.
Ich teste jetzt den Film, um mir das Ergebnis anzusehen.
Houston, wir haben ein Problem: Von den weißen Lichtblitzen war nichts zu sehen.
Das liegt am erwähnten Problem mit Farbeffekten bei HTML5-Canvas-Dateien.
Als Workaround kann ich die Bibliothek (Library) öffnen und den Blitz duplizieren.
Ich nenne die Kopie „lightning copy“.
Dieses Symbol im Bedienfeld „Eigenschaften“ (Properties) tausche ich gegen die Kopie des Blitzes.
Auch hier klicke ich und tausche das Blitz-Symbol gegen die Kopie.
Dann klicke ich ein letztes Mal hier auf die Bühne und tausche das Symbol gegen die Kopie des Blitzes.
Jetzt drücke ich Befehl/Strg+Eingabetaste Das war’s.
Die Verwendung von zwei verschiedenen Instanzen hat das Problem gelöst.
Im nächsten Video kommt Sound hinzu.
Bis zum nächsten Mal!
