Nachdem ich nun den Blitz-Effekt hinzugefügt habe, möchte ich das Ganze noch mit Sound abrunden.
Los geht’s.
Ich beginne in der Bibliothek (Library).
Hier wird es langsam unübersichtlich mit den vielen verschiedenen Elementen.
Ich kann sie organisieren, indem ich einen neuen Ordner hinzufüge per Klick auf dieses Symbol.
Ich nenne diesen Ordner „Lightning Assets“.
In den neuen Ordner kann ich nun diesen Ordner verschieben.
Er enthält die ursprüngliche PSD-Datei.
Ich verschiebe auch die Bitmap „lightning“ und die Kopie des Blitzes in den Ordner.
Nun füge ich einen weiteren Ordner hinzu namens „SOUND“.
In meiner Bibliothek soll alles ordentlich sein.
Momentan ist ein Ordner ganz oben und einer weiter unten.
Hier kann ein Unterstrich helfen.
Der Ordner heißt dann „_SOUND“ und rutscht ganz nach oben.
Genauso verfahre ich mit dem Ordner „Lightning Assets“.
Ich stelle einen Unterstrich voran, drücke die Eingabetaste – und voilà, jetzt habe ich eine geordnete Bibliothek mit den Ordnern ganz oben.
Ich kann verschiedene Arten von Sounds in Animate importieren – Sound-Dateien von Adobe, WAV-Dateien, AIF-Dateien, MP3-Dateien und andere Formate.
Das sind aber schon die gängigsten und meistgenutzten.
Ich möchte also jetzt den Sound importieren.
Dafür wähle ich „Datei“ (File), „Importieren“ (Import).
Zur Wahl stehen „In Bühne importieren“ (Import to Stage) und „In Bibliothek importieren“ (Import to Library).
Für den Sound sollte ich aber vorher eine neue Ebene hinzufügen.
Es gibt keine spezielle Ebene und keinen speziellen Bereich für Sound in Animate.
Daher erstellt man am besten eine neue Ebene (New Layer) für jedes Sound-Element – als wäre es jeweils ein neuer Audiokanal.
Ich klicke hier und gebe „Waves“ ein.
Das ist der erste Sound, den ich importieren werde.
Ich wähle den ersten Keyframe aus.
Nun wähle ich „Datei“ (File), „Importieren“ (Import), „In Bühne importieren“ (Import to Stage).
Beim Import in die Bühne wird der Sound automatisch auch in die Bibliothek (Library) aufgenommen.
Ich doppelklicke auf die Datei „Waves.mp3“.
Jetzt sehe ich die Wellenform beim ersten Keyframe auf der Zeitleiste (Timeline).
Und ich sehe die Datei in der Bibliothek (Library).
Ich klicke auf „Waves.mp3“ und ziehe die Datei in den Ordner „_SOUND“.
Jetzt ist der Wellen-Sound zu hören.
Schön.
Ich klicke auf den Wellen-Sound oder den ersten Keyframe und wechsle zum Bedienfeld „Eigenschaften“ (Properties).
Im Bedienfeld „Eigenschaften“ (Properties) gibt es einen Abschnitt für Sound.
Ich hätte also auch den Keyframe auswählen und dann hier im Dropdown-Menü „Waves.mp3“ wählen können.
In Animate gibt es zwei Sound-Arten: Ereignis (Event) und Stream.
Ereignis-Sounds müssen komplett heruntergeladen sein, bevor sie abgespielt werden können.
Dann spielen sie vollständig, bis sie angehalten werden – entweder durch ein ActionScript oder weil der Sound endet.
Stream-Sounds können leider nicht für Canvas-Projekte verwendet werden.
Stream-Sounds werden abgespielt, sobald die Daten für den ersten Frame heruntergeladen wurden.
Dann wird jeder Frame exakt mit der Zeitleiste (Timeline) synchronisiert.
Wenn der nächste Frame folgt, wird der entsprechende Sound-Abschnitt wiedergegeben und so weiter.
Alle Sounds werden auf die verschiedenen Frames verteilt.
Leider kann man bei HTML5-Canvas-Projekten nur Ereignis-Sounds verwenden, damit nach dem Export kein Plug-in nötig ist.
In diesem Fall habe ich nur eine Option.
Sie heißt „Ereignis“ (Event).
Der Sound wird beim ersten Keyframe geladen und dann komplett abgespielt.
Ich könnte auch festlegen, dass der Sound wiederholt werden soll.
Für „Wiederholen“ (Repeat) ist „x 1“ eingerichtet.
Das genügt, denke ich.
Die Wellen erstrecken sich über etwa 130 Frames, also fast die ganze Animation.
Wäre die Animation länger, könnte ich stattdessen den Sound mehrmals wiederholen oder sogar als Schleife (Loop) abspielen lassen.
In diesem Fall soll der Sound aber nur einmal wiederholt werden.
Ich gehe zurück zur Bibliothek (Library).
Jetzt möchte ich den Blitz hinzufügen und importieren.
Er soll aber nicht in die Zeitleiste (Timeline) importiert werden, weil ich ihn an den drei Stellen platzieren möchte, an denen es blitzt.
Ich möchte ihn nur in die Bibliothek (Library) importieren.
In die Zeitleiste (Timeline) importiere ich ihn dann nach Bedarf.
Dieses Mal wähle ich „Datei“ (File), „Importieren“ (Import) und drücke nicht Befehl/Strg+R für „In Bühne importieren“ (Import to Stage), sondern wähle „In Bibliothek importieren“ (Import to Library).
Ich wähle „Lightning.mp3“ aus und doppelklicke darauf, um die Datei in meine Bibliothek (Library) zu importieren.
Ich ziehe ihn in den Ordner „_SOUND“.
So bleibt alles übersichtlich.
Jetzt sehe ich mir auf der Zeitleiste (Timeline) an, wo es blitzt.
Etwa hier.
Ich füge eine neue Ebene hinzu und nenne sie „Lightning“.
Dann füge ich ungefähr hier einen Keyframe hinzu.
Ich klicke dazu auf „Schlüsselbild einfügen“ (Insert Keyframe).
Den Keyframe wähle ich per Klick aus.
Im Bedienfeld „Eigenschaften“ (Properties) unter „Bild“ (Frame) gibt es den Abschnitt „Sound“.
Im Dropdown-Menü werden alle Sounds aufgeführt, die sich derzeit in der Bibliothek (Library) befinden.
Es sind nur „Lightning.mp3“ und „Waves.mp3“.
Ich wähle „Lightning.mp3“ aus.
Jetzt wiederhole ich diesen Schritt.
Ich füge eine neue Ebene hinzu, scrubbe auf der Zeitleiste (Timeline) zum nächsten Blitz – hier – und füge wieder bei ausgewählter Ebene einen Keyframe hinzu.
Ich doppelklicke.
Ich nenne die Ebene „Lightning“.
Und noch einmal: Ich wähle den Keyframe per Klick aus.
Im Bedienfeld „Eigenschaften“ (Properties) wähle ich wieder „Lightning.mp3“ aus.
Jetzt fehlt noch eine Instanz des Blitzes.
Sie ist ungefähr hier bei Frame 66.
Ich könnte alternativ auch die Ebene duplizieren.
Ich öffne das Kontextmenü und wähle „Ebenen duplizieren“ (Duplicate Layers).
Jetzt habe ich hier eine Kopie der Ebene „Lightning“.
Diese ziehe ich zu Frame 66.
Ich klicke einmal auf den Keyframe und lasse die Maustaste dann los.
Jetzt klicke ich wieder, halte die Taste gedrückt und ziehe.
Der Sound soll etwa bei Frame 66 beginnen.
So.
Hier am Ende ist ein überschüssiger Teil, wo der Sound die Zeitleiste (Timeline) überschreitet.
Ich kann einfach klicken und ziehen, um diese kleinen Ebenen hier auszuwählen.
Dann öffne ich das Kontextmenü und wähle „Bilder entfernen“ (Remove Frames).
Oder ich drücke Umschalt+F5.
Die Zeitleiste ist ganz schön voll geworden.
Ich habe drei Ebenen mit dem Sound „Lightning“ und eine für „Waves“.
Diese kann ich auch mit einem neuen Ordner organisieren.
Ich klicke auf „Neuer Ordner“ (New Folder).
Ich nenne ihn „AUDIO“.
Er könnte auch „Sound“ heißen.
Ich ziehe ihn nach oben.
Jetzt klicke ich auf „Lightning“ und bei gedrückter Umschalttaste auf „Waves“.
Ich ziehe sie in diesen Ordner hinein.
Jetzt kann ich den Ordnerinhalt ausblenden.
Viel übersichtlicher!
Ich drücke Befehl/Strg+Eingabetaste, um den Film zu testen.
Klingt super!
Das war’s schon.
Ich hoffe, dir hat dieses Tutorial zum Thema Sound gefallen.
Bis zum nächsten Mal!
