Aus dem Kurs: Adobe Animate Grundkurs

Videos importieren

Nun wollen wir uns anschauen, wie man in ein Animate-Projekt ein Video integrieren kann. Dazu würde man hier normalerweise über Datei und Importieren gehen und dann hier Video importieren. Das ist aber leider ausgegraut. Das liegt daran, dass dieser Video-Import nur über die Flesh-Umgebung funktioniert, d.h., wenn man auf ActionScript wechselt. In der HTML5-Umgebung gibt es diese Funktion leider nicht. Da müssen wir einen kleinen Umweg einschlagen. Wir gehen dazu über das Hauptmenü Fenster und dann Komponenten. Die Komponenten finden wir hier ganz unten. Dabei geht eine neue Palette auf. Und hier haben wir auch schon unter Benutzeroberfläche die Kategorie Video, und hier befindet sich die Video-Komponente. Und diese Komponente, die können wir uns jetzt einfach per Drag-and-Drop in unser Animate-Projekt hineinziehen. Daraufhin können wir jetzt auch schon dieses Komponenten- Fenster wiederschließen. Ja, jetzt können wir auch hingehen und diese Video-Komponente auf die Größe unseres Fensters hier oder unserer Bühne anpassen, so dass das hier komplett ausfüllt. Ja, sagen wir mal, so passt das. Ja und jetzt, wo wir die Komponente ausgewählt haben mit dem normalen Auswahl-Werkzeug, können wir ganz rechts auf die Komponenten-Parameter klicken und in den Komponenten-Parametern haben wir jetzt diverse Einstellungen. Das erste Mal ist die Angabe der Quelle, also wo befindet sich eigentlich das Video. Das ist hier jetzt nur die Komponente, und da hinein wird das Video geladen, d.h., ich muss hier auf den Stift klicken und dann kann ich in diesem Fenster hier den Pfad angeben zu der Originalvideo-Detei. Dazu kann ich hier auf den Ordner klicken, dann das entsprechende Video auswählen. Hier ist unsere MP4-Datei. Ich klicke auf Öffnen, bestätige das mit OK, dann muss man eine Sekunde warten, weil die Metadaten ausgelesen werden, d.h., die Breite, die Höhe und die Länge des Videos z.B. Und dann ist das Video jetzt hier in die Komponente geladen, wir sehen es hier, aber wir haben hier noch keine Vorschau. Die Vorschau wird erst im Browser generiert. Ja, jetzt können wir hier noch festlegen, ob automatisch abgespielt werden soll. Das kann vielleicht schon mal Leute erschrecken, wenn Sie auf eine Webseite kommen. Da läuft direkt das Video mit Ton los. Den Ton kann man natürlich deaktivieren. Außerdem was vielleicht auch für die eine oder andere Problem ist, ist das Datenvolume, wenn man jetzt ein eingeschränktes Datenvolume auf seinem Handy z.B. hat. Man kommt auf eine Webseite und hat direkt X-Videos geladen, dann ist gegebenenfalls das Datenvolume schnell aufgebraucht. Ja, die Steuerelemente, d.h., der Player, der hier unten eingeblendet wird, also Play, Pause, Lautstärke usw., das soll eingeblendet werden oder nicht, kann man über diesen Haken festlegen. Stummgeschaltet, ja, das möchte ich vielleicht, dass das Video ohne Ton abläuft, wobei unser Video eher keinen Ton hat. Dann Schleife, soll das Video im Loop laufen oder nicht. Hier haben wir eine Auswahl für das Posterbild, d.h., ein Platzhalter an der Stelle, wo das Video nachher geladen wird, da könnte man eine Szene aus dem Bild hinterlegen z.B., und vorausladen, also der Preloader. Will man einen Preloader haben oder nicht, das hat auch wieder was mit dem Datenvolume zu tun. Ja und wenn man hier in den Komponenten alles so weit eingestellt hat, dann kann man diese auch schließen. Ja und dann wollen wir das Video natürlich im Browser testen, ob es auch funktioniert. Dazu drücken wir Cmd beziehungsweise Strg+Return. Ja und dann wird der Browser geöffnet, und darin läuft das Video ab. Bei Mouseover wird der Player eingeblendet. Hier sehen wir also, wie weit das Video schon läuft. Wir sehen, dass es im Loop läuft. Wir sehen hier eine Zeitangabe, wir haben hier an der Stelle die Möglichkeit, die Lautstärke zu definieren. Und wir können das Video maximieren, dass es halt in voller Größe angezeigt wird. Ja, wir haben also gesehen, dass es ein paar Schritte sind, um ein Video in Animate zu integrieren. Schön wäre es natürlich, es würde ganz einfach über den Dialog Datei > Importieren funktionieren. Stattdessen müssen wir es halt über die Komponenten lösen und dann die entsprechenden Komponentenparameter. Es sind ein paar Fensterchen mehr, die dann aufgehen, aber im Endeffekt kommen wir zum gleichen Ergebnis, haben unser Video eingebettet und können dieses uns im Browser daraufhin anschauen.

Inhalt