Einfachen interaktiven Content designen.
Viele Dokumentenarten in Animate unterstützen Interaktivität, die per Code definiert wird. Im folgenden Video erfährst du, wie du in einem HTML5-Canvas-Dokument Content interaktiv machen kannst.
Veröffentlicht am
Viele Dokumenttypen in Adobe Animate unterstützen die Einbindung von Interaktivität per Code.
Wir sehen uns heute einige Wege an, um Content mit HTML5 Canvas Interaktivität zu verleihen.
Hier habe ich ein Animate-Dokument mit zwei Ebenen: eine Hintergrundebene mit der Textur „Grassy“ (Gras) und die Ebene „LadyBug“ (Marienkäfer).
Auf der Ladybug-Ebene befindet sich die Movieclip-Instanz „LadyBug“.
Um diesen Inhalt interaktiv zu machen, gebe ich der LadyBug-Instanz einen Namen im Bedienfeld „Eigenschaften“ (Properties).
Nennen wir sie einfach „bug“ (Käfer).
Gut.
Die Instanz „LadyBug“ hat nun den Instanznamen „bug“.
Damit können wir in JavaScript auf diese Instanz verweisen.
Um Code zur Einbindung von Interaktivität hinzuzufügen, öffne ich das Bedienfeld „Aktionen“.
Ich wähle „Fenster“ (Window) und „Aktionen“ (Actions).
Bis jetzt gibt es hier gar keinen Code.
Eine einfache Methode, Code zu einem JavaScript-Dokument hinzuzufügen, ist die Option „Mit Ass. hinzufü...“
(Add using wizard).
Der Assistent unterstützt typische Aktionen, die in Dokumente eingefügt werden können.
Für die Aktion „Drehen“ beispielsweise wähle ich „Rotate the Object“ (Objekt drehen) und dann das Objekt, auf das diese Aktion angewendet werden soll.
Weil wir der Movieclip-Instanz „LadyBug“ den Instanznamen „bug“ gegeben haben, zeigt Animate diesen automatisch hier an.
Ich wähle ihn aus und klicke auf „Weiter“ (Next).
Als Letztes muss ich einen Auslöser auswählen.
Es gibt hier mehrere Ereignisse, die meisten mausbasiert.
Ich wähle „On Mouse Click“ (Bei Mausklick) für das Auslöseereignis-Objekt „bug“ und dann „Hinzufügen“ (Finish and add).
Auf diese Weise wird etwas Code zu dem Inhalt hinzugefügt.
Hier sieht man einige Kommentare.
Ich wähle sie aus und entferne sie, weil wir sie nicht brauchen.
Dieser Code ändert bei jedem Klick auf den Käfer die Drehung um den Wert 30.
Das war nicht ganz das Ziel.
Man könnte den Marienkäfer immer zum Cursor blicken lassen, wenn er über die Bühne bewegt wird.
Dazu muss man Mouse-Over auf der Bühne aktivieren.
Ich füge in Zeile 1 den entsprechenden Code ein, also stage.enableMouseOver, und gebe den Wert 30 an.
Das aktiviert die Mouse-Over-Erkennung auf der Bühne.
Als Reaktion darauf verwende ich eine ähnliche Funktion wie diese.
Ich lösche die aktuelle Funktion und füge eine neue Funktion ein, mit der ein Stage-Mouse-Move-Ereignis mit unserer Bühne (Stage) verknüpft wird.
Es folgt die Radianten-Berechnung, basierend auf dem Ereignis sowie den Y- und X-Koordinaten (localY, localX).
Dann werden die Gradwerte (Degrees) von den Radianten abgeleitet und auf die Eigenschaft „bug.rotation“ angewendet.
Testen wir das einmal.
Ich wähle „Steuerung“ (Control), „Testen“ (Test).
Hier ist der kleine, nur leicht animierte Käfer.
Sobald der Cursor auf der Bühne erscheint, folgt der Käfer ihm automatisch in jede Richtung, in die er bewegt wird – aufgrund des eben erstellten Codes.
Die Programmiermöglichkeiten in Adobe Animate reichen von einfach bis sehr komplex – je nach Bedarf.
Zusammenfassung:
Mit dem Aktionsassistenten Interaktivität hinzufügen
Sprecher
