HTML5-Komponenten verwenden.
Gestalte in Adobe Animate Kompositionen mit HTML5 DOM-Komponenten.
Veröffentlicht am
Bei der Arbeit mit HTML5 Canvas-Dokumenten können wir auf zahlreiche Komponenten für diese Plattform zurückgreifen.
Das geht über das Bedienfeld „Komponenten“ (Components).
Um darauf zuzugreifen, wähle ich „Fenster“ (Window), „Komponenten“ (Components).
Das Bedienfeld „Komponenten“ (Components) enthält die Ordner „Benutzeroberfläche“ (User Interface), „Video“ und „jQuery-Oberfläche“ (jQuery UI).
Ich blende die Video-Komponenten ein.
Es gibt hier nur die Komponente „Video“.
Ich ziehe eine Komponenteninstanz auf die Bühne, um dann ihre Eigenschaften zu ändern.
Die Video-Komponenteninstanz ist ausgewählt, und ich ändere Position und Größe.
Für die X-Position gebe ich 681,00 ein, für die Y-Position 50,00.
Die Breite ändere ich in 550,00 und die Höhe in ca.
309,00.
Die Video-Komponenteninstanz bedeckt nun vollständig die Werbetafel im Hintergrund.
Jetzt brauchen wir eine Videodatei, die in der Komponenteninstanz abgespielt werden soll.
Diese MP4-Datei eignet sich gut für diesen Zweck.
Für die Wiedergabe der Datei in der Video-Komponenteninstanz muss die Instanz auf der Bühne ausgewählt sein.
Im Bedienfeld „Eigenschaften“ (Properties) siehst du die Schaltfläche „Parameter anzeigen“ (Show Parameters).
Es gibt sie für alle HTML5 Canvas-Komponenten auf der Bühne und zeigt einige Eigenschaften.
Ein Klick öffnet das Bedienfeld „Komponentenparameter“ (Component Parameters) mit den Optionen „Automatisch abspielen“ (autoplay), „Steuerelemente“ (controls), „Stummgeschaltet“ (muted) und „Schleife“ (loop).
Ich deaktiviere „Steuerelemente“ (controls), lasse aber „Automatisch abspielen“ (autoplay) aktiv.
Ich aktiviere „Stummgeschaltet“ (mute), auch wenn diese Datei gar keine Tonspur hat.
Ich aktiviere „Schleife“ (loop).
Der wichtigste Parameter ist „Quelle“ (source).
Das soll die MP4-Datei sein.
Ich klicke auf das Symbol „Bearbeiten“ (Edit) und suche die Quelle.
Hier ist die Datei „HippoVideo.mp4“ von vorher.
„Öffnen“ (Open).
Jetzt steht der Verweis auf das Video.
Ich deaktiviere „An Quelldimensionen anpassen“ (Match source dimensions), damit die eben eingegebenen Maße erhalten bleiben.
Ich wähle „OK“.
Gut.
Um die Animation zu testen, wähle ich „Steuerung“ (Control), „Testen“ (Test).
Hier ist die vollständig gerenderte Animation mit dem Video, das in Endlosschleife auf der Reklamewand abgespielt wird.
Zusammenfassung:
DOM-basierte Komponenten in HTML5-Kompositionen verwenden
Komponente „Video“ verwenden
Sprecher
