Hinzufügen von grundlegender Interaktivität

Suchen
Hinweis:

Lektionsübersicht

Inhalt dieser Lektion:

  • Grundlegendes zu Interaktivität
  • Arbeiten mit der Syntax von JavaScript
  • Verstehen der Beziehung zwischen JavaScript, jQuery und der Edge Animate-API
  • Unterscheiden von Auslösern, Ereignissen und Aktionen
  • Hinzufügen von Auslösern zur Zeitleiste
  • Einfügen von Beschriftungen
  • Erstellen von Aktionen als Reaktionen auf Ereignisse
  • Steuern des Verhaltens des Abspielkopfs auf der Zeitleiste
  • Anzeigen und Bearbeiten von Skripts mit dem Code-Bedienfeld
  • Verwenden von Kommentaren zum Kommentieren von Code
  • Ausblenden und Anzeigen von Elementen, um visuelles Feedback für Schaltflächen zu integrieren
  • Steuern von animierten Elementen
  • Anpassen des Mauszeigers

Das Durcharbeiten dieser Lektion dauert ca. zwei Stunden. Bevor Sie beginnen, laden Sie den Inhalt von Lektion 05 herunter.

Lassen Sie die Betrachter Ihre Komposition erkunden und aktive Teilnehmer werden. Fügen Sie mit den integrierten Codefragmenten und intuitiven Bedienfeldern von Adobe Edge Animate Aktionen hinzu, um attraktive, benutzergesteuerte interaktive Benutzeroberflächen zu erstellen.

Erste Schritte

Betrachten Sie zunächst den Reiseführer, den Sie gestalten werden, während Sie das Erstellen interaktiver Projekte in Adobe Edge Animate erlernen.

  1. Doppelklicken Sie im Ordner „Lesson05/05End“ auf die Datei „05End.html“, um die Komposition in einem Browser abzuspielen.

    Das Projekt ist eine interaktive Fotogalerie mit Bildern aus Myanmar. Die Betrachter können die kurze Diashow automatisch abspielen und von Anfang an wiederholen lassen. Oder sie können auf der linken Seite der Bühne auf ein beliebiges Miniaturbild klicken, um direkt zu dem entsprechenden Bild zu wechseln. Bewegen Sie den Mauszeiger über die dreieckige Schaltfläche im oberen Bereich, um eine Beschriftung einzublenden.

    In dieser Lektion erstellen Sie interaktive Schaltflächen, die durch Bewegen der Maus über die Schaltfläche hervorgehoben werden, und Sie erlernen das Integrieren des Codes, der Edge Animate anweist, wo der Abspielkopf auf der Zeitleiste positioniert werden soll, um die entsprechende Animation oder das entsprechende Bild an dieser Stelle anzuzeigen.

  2. Schließen Sie die Datei „05End.html“ und beenden Sie den Browser.

  3. Doppelklicken Sie im Ordner „Lesson05/05Start“ auf die Datei „05Start Edge Animate“, um die erste Projektdatei in Edge Animate zu öffnen.

    Die Datei enthält alle Elemente, die sich bereits auf der Bühne befinden, und die Übergänge zwischen den einzelnen Bildern auf der Zeitleiste. Die Bühne weist bereits die richtige Größe auf. In dieser Lektion machen Sie aus der linearen Animation eine interaktive Animation.

  4. Wählen Sie Datei > Speichern unter. Nennen Sie die Datei 05_workingcopy und speichern Sie sie im Ordner „05Start“. Durch das Speichern einer Arbeitskopie stellen Sie sicher, dass die ursprüngliche Startdatei verfügbar ist, falls Sie von vorn beginnen möchten.

Interaktive Kompositionen

Interaktive Kompositionen ändern sich entsprechend den Aktionen des Betrachters. Wenn der Betrachter z. B. auf eine Schaltfläche klickt, kann eine andere Grafik mit weiteren Informationen angezeigt werden. Interaktionen können einfach sein, wie z. B. das Klicken auf eine Schaltfläche. Sie können auch komplexer sein und unterschiedliche Arten von Interaktionen mit demselben Element umfassen. Beispielsweise sind das Zeigen mit dem Mauszeiger auf eine Schaltfläche, das Klicken auf die Schaltfläche und das Entfernen des Mauszeigers von der Schaltfläche drei unterschiedliche Ereignisse, die jeweils unterschiedliche visuelle Änderungen auf der Bühne verursachen.

In Edge Animate erreichen Sie Interaktivität mithilfe von JavaScript. JavaScript ist ein beliebtes und standardmäßiges Skript für Webbrowser. JavaScript wird in Browsern für Desktops sowie für Geräte wie Tablets und Mobiltelefone ausgeführt.

Wenn Sie überhaupt nichts über JavaScript wissen oder keine Kenntnisse über das Schreiben von Code haben, brauchen Sie sich keine Sorgen zu machen. Adobe Edge Animate bietet eine einfache Benutzeroberfläche, um Kompositionen JavaScript hinzuzufügen und allgemeine Interaktivitätsfunktionen zu integrieren. Sobald Sie mit der Syntax von JavaScript besser vertraut sind, können Sie sich gründlicher mit der Materie befassen und die Interaktivität anpassen.

In dieser Lektion erlernen Sie das Erstellen von nicht linearer Navigation. Dies bedeutet, dass die Animation nicht geradewegs vom Anfang bis zum Ende wiedergegeben und dann beendet werden muss. Sie fügen Code hinzu, der ausgelöst wird, wenn der Abspielkopf einen bestimmten Zeitpunkt erreicht.

Sie fügen außerdem Code hinzu, mit dem der Abspielkopf zu verschiedenen Abschnitten der Zeitleiste verschoben wird, um bestimmte Elemente anzuzeigen. Sie lernen zudem, wie Sie erreichen, dass Elemente auf der Bühne auf unterschiedliche Interaktionen mit dem Mauszeiger reagieren.

Grundlegendes zu JavaScript

JavaScript ist die Skriptsprache, mit der einer Webseite zusätzliche Funktionalität hinzugefügt wird. Viele der allgemeinen Benutzeroberflächenelemente auf Websites, z. B. Pulldownmenüs, Kontrollkästchen oder Suchfelder, werden mit JavaScript erstellt. In Edge Animate wird JavaScript auch für Interaktivität sowie für Animationen und weitere Effekte verwendet.

JavaScript-Dateien und ihr Speicherort

Auch wenn Sie der Komposition keine Interaktivität hinzufügen, erfordert das Projekt JavaScript. Der JavaScript-Code befindet sich in mehreren eigenen Textdokumenten mit der Dateierweiterung „.js“. Betrachten Sie die Dateien, die mit der Edge Animate-Komposition „05_workingcopy“ verknüpft sind. Der Ordner „edge_includes“ enthält vier JavaScript-Dateien:

  • edge.0.1.6.min.js
  • jquery-1.7.1.min.js
  • jquery.easing.1.3.js
  • json2_min.js

Diese Dateien enthalten den grundlegenden Code, der für jede Edge Animate-Komposition erforderlich ist. Es sind außerdem zusätzliche spezielle JavaScript-Dateien für das Projekt vorhanden. Diese Dateien befinden sich außerhalb des Ordners „edge_includes“ und sie werden automatisch mit dem Edge Animate-Dateinamen benannt. Die Namen dieser Dateien lauten wie folgt:

  • 05_workingcopy_edge.js
  • 05_workingcopy_edgeActions.js
  • 05_workingcopy_edgePreload.js

Beim ersten Starten des Edge Animate-Projekts im Webbrowser wird der JavaScript-Code geladen, damit beim Wiedergeben des Projekts sämtliche Funktionalität verfügbar ist. Sämtlicher Code ist in Form von Funktionen organisiert, in denen Befehle als Gruppen zusammengefasst sind. Da jede Funktion einen eindeutigen Namen aufweist, können Sie die Befehle auslösen, indem Sie einfach auf den Namen der Funktion verweisen. Programmierer bezeichnen dies als „Aufrufen“ einer Funktion (durch den Browser).

jQuery und die Edge Animate-API

Mit JavaScript lassen sich sämtliche Details einer Webseite steuern. Es ist leistungsstark, jedoch häufig schwerfällig und kompliziert. Deshalb bieten jQuery und die Edge Animate-API eine hilfreiche Ergänzung. jQuery ist eine Open-Source-JavaScript-Bibliothek, die eine einfache Möglichkeit bietet, Elemente in einem Browser auszuwählen, zu steuern und zu animieren. jQuery ist keine weitere Programmiersprache, sondern lediglich eine Reihe wohlformulierter JavaScript-Funktionen. Wenn Sie sich die JavaScript-Dateien im Ordner „edge_includes“ noch einmal ansehen, werden Sie feststellen, dass zwei dieser Dateien tatsächlich Dateien für jQuery sind.

Edge Animate bietet gemeinsam mit jQuery zusätzliche Funktionen, die speziell für Ihre Zwecke erstellt wurden. Die Bibliothek der JavaScript-Funktionen von Edge Animate bildet die Edge Animate-API (Application Programming Interface).

Sie können JavaScript, jQuery und die Edge Animate-API als unterschiedliche Steuerungsebenen betrachten. Die Edge Animate-API ist die oberste und vordergründigste Steuerungsebene, jQuery ist die mittlere Ebene und das Kern-JavaScript ist die unterste Ebene. Dies lässt sich am Beispiel der Steuerung eines Autos veranschaulichen. Die Edge Animate-API stellt die Steuerungsmöglichkeiten dar, die dem Fahrer zur Verfügung stehen: das Lenkrad, die Feststellbremse oder das Gaspedal. Mit ihnen können Sie den Wagen steuern, ohne viel über die inneren Mechanismen zu wissen. Sie werden aus einer Kombination von Hebeln, Armaturen und Wellen geschaffen, damit sich das Fahrzeug einfach und bequem steuern lässt. Diese Hebel, Armaturen und Wellen stellen die jQuery-Steuerungsebene dar. Auf der differenziertesten Ebene befindet sich JavaScript, das mit den einzelnen Muttern, Schrauben und Zahnrädern vergleichbar ist.

So wie sich ein Auto viel einfacher mit dem Lenkrad und Gaspedal steuern lässt, erleichtert Ihnen die Edge Animate-API das Steuern einer Edge Animate-Komposition. Jedoch hindert Sie in beiden Fällen nichts daran, die Steuerungen auf den unteren Ebenen zu modifizieren, um die Benutzererfahrung stärker anzupassen. Sie können Code in jQuery und JavaScript schreiben, um eigene Interaktivität zu erzeugen. Sie müssen lediglich ein kompetenter Mechaniker sein bzw. sich mit JavaScript auskennen!

In dieser Lektion lernen Sie zunächst, wie Sie mit der Edge Animate-API Interaktivität hinzufügen. Wenn Sie dann später mit der Materie besser vertraut sind, steigen Sie tiefer in das Thema ein und fügen jQuery-Code ein, um differenziertere Effekte zu erzielen.

Auslöser, Ereignisse und Aktionen

Bei Edge Animate werden Aktionen, Auslöser und Ereignisse verwendet, um JavaScript in die Komposition einzubinden.

Aktionen sind alle Schritte, die Edge Animate ausführen kann. Da das gesamte Potenzial von JavaScript genutzt werden kann, sind zahlreiche Aktionen möglich. Aktionen können vom Laden eines Hyperlinks oder dem Ändern einer bestimmten visuellen Eigenschaft eines Elements auf der Bühne bis zum Speichern einer Information in einer Variablen für den späteren Abruf reichen.

Auslöser sind Aktionen, die entlang der Zeitleiste angeordnet sind. Wenn der Abspielkopf den Auslöser erreicht, werden die Aktionen ausgeführt. Verwenden Sie Auslöser, wenn Code durch die Animation und nicht durch Aktionen des Benutzers synchronisiert werden soll.

Ereignisse bezeichnen Geschehnisse in einer Komposition, auf die Edge Animate mit einer Aktion reagieren kann. Ereignisse werden in der Regel vom Benutzer generiert, z. B. durch das Klicken mit der Maustaste, das Drücken einer Taste oder das Neigen eines Mobilgeräts. Ereignisse können jedoch auch automatisch eintreten. Beispielsweise gilt der Zeitpunkt, zu dem die Komposition bereit ist (wenn alle Elemente und Codebibliotheken heruntergeladen wurden), als Ereignis. Ereignisse sind immer mit Aktionen verknüpft. Wenn ein Ereignis eintritt, wird eine Aktion – oder eine Reihe von Aktionen – ausgeführt.

Auslöser auf der Zeitleiste

Auslöser sind die einfachste Möglichkeit, der Edge Animate-Komposition Code hinzuzufügen. Auslöser werden automatisch ausgeführt, wenn sie vom Abspielkopf auf der Zeitleiste erreicht werden. Auf der Zeitleiste können sich mehrere Auslöser befinden. Das minimale Zeitintervall zwischen Auslösern ist 1/1000 Sekunde. In der Praxis ist ein so geringer Abstand zwischen der Ausführung von Aktionen jedoch niemals erforderlich oder wünschenswert.

Erstellen einer Schleife

Für die Diashow von Myanmar fügen Sie einen Auslöser am Ende der Zeitleiste ein, damit der Abspielkopf automatisch an den Anfang zurückkehrt, und erstellen auf diese Weise eine Schleife.

  1. Klicken Sie unter der Zeitleiste auf die Schaltfläche Zeitleistengröße anpassen.

    Die gesamte Diashowanimation wird im verfügbaren Raum des Bedienfelds Zeitleiste angezeigt.

  2. Verschieben Sie den Abspielkopf an das Ende der Diashow, auf 0:10 Sekunden.

  3. Klicken Sie im Zeitleiste-Bedienfeld über der Zeile Aktionen auf die Schaltfläche Auslöser einfügen. Sie können auch Zeitleiste > Auslöser einfügen wählen oder Strg+T (Windows) bzw. Befehl+T (Mac OS) drücken.

    Auf der Zeitleiste wird an der Position von 0:10 Sekunden ein Symbol in Form einer Raute in geschweiften Klammern angezeigt. Das Symbol stellt einen Auslöser dar.

    Es werden ein Bedienfeld mit einem großen weißen Texteingabefeld und eine Spalte mit Optionen für Codefragmente auf der rechten Seite angezeigt. Der Titel des Bedienfelds lautet „Auslöser bei 10000 ms“ und gibt die Position des Auslösers bei 10.000 Millisekunden bzw. 10 Sekunden an.

  4. Wählen Sie den Inhalt das aktuellen Skripts aus.

    Das aktuelle Skript // Hier Code einfügen wird als Kommentar bezeichnet. Kommentare beginnen immer mit zwei Schrägstrichen und beschreiben den Code. Kommentare werden nicht als Code ausgeführt und erhöhen die Dateigröße der Komposition nicht wesentlich.

  5. Wählen Sie im Menü der Codefragmente auf der rechten Seite des Bedienfelds die Option Abspielen von.

    Im Bedienfeld wird neuer Code angezeigt, der den vorhandenen Kommentar ersetzt. Der neue Code verfügt über eigene Kommentare, die seine Funktion beschreiben. Der Code sym.play(1000);, verschiebt den Abspielkopf an einen bestimmten Zeitpunkt auf der Zeitleiste und startet die Wiedergabe.

  6. Ersetzen Sie im Code den in Klammern eingeschlossenen Wert 1000 durch 0.

    Die Zahl zwischen den Klammern im Befehl play() stellt die Zeit dar, zu der der Abspielkopf verschoben wird. Da der Abspielkopf an den Anfang der Zeitleiste, d. h. auf 0:00 Sekunden, verschoben werden soll, geben Sie in den Klammern des Befehls play() den Wert 0 ein.

  7. Schließen Sie das Bedienfeld und zeigen Sie in einem Browser das Projekt in der Vorschau an, indem Sie Strg+Eingabe (Windows) oder Befehl+Return (Mac OS) drücken.

    Die Diashow wird vollständig abgespielt und wiederholt, wenn beim Zeitpunkt von 10 Sekunden das Ende erreicht wird.

    Hinweis:

    Die Zahl zwischen den Klammern im Befehl „play()“ wird als Argument bezeichnet. Das Argument liefert dem Befehl zusätzliche Informationen, um seine Präzision zu erhöhen. In diesem Fall liefert es dem Befehl die Information über den Zeitpunkt in Millisekunden, zu dem die Wiedergabe gestartet werden soll. Befehle können mehrere Argumente aufweisen und diese werden durch Kommas getrennt. Wenn Sie weitere Befehle kennenlernen, erfahren Sie auch, welche Argumente sie erfordern.

Bearbeiten von Auslösern

Das Skript für die Auslöser lässt sich einfach bearbeiten. Das Bedienfeld, das beim Hinzufügen des Auslösers angezeigt wurde, ist immer verfügbar, um Elemente zu ändern, hinzuzufügen oder zu löschen.

  • Um einen Auslöser zu bearbeiten, doppelklicken Sie auf der Zeitleiste auf das Auslösersymbol.
  • Das Skriptbedienfeld wird geöffnet und zeigt den Auslöser an. Sie können das Argument ändern, den Code löschen oder mit den Codefragmentoptionen auf der rechten Seite des Bedienfelds neuen Code hinzufügen.
  • Um einen Auslöser zu verschieben, klicken Sie auf der Zeitleiste auf das Auslösersymbol und ziehen Sie es an eine neue Position.
  • Der Auslöser wird an eine andere Position verschoben, sodass die Aktionen ausgeführt werden, wenn der Abspielkopf einen neuen Zeitpunkt erreicht.
  • Um einen Auslöser zu löschen, wählen Sie auf der Zeitleiste den Auslöser aus und drücken Sie die Entf-Taste.

Der Auslöser wird von der Zeitleiste entfernt.

Hinweis:

Ansichtsoptionen des Skriptbedienfelds: Das Skriptbedienfeld, das beim Hinzufügen eines Auslösers geöffnet wird, enthält mehrere Optionen, die das Anzeigen des Codes erleichtern. Das Optionsmenü oben rechts bietet drei Einstellungen, die steuern, was angezeigt wird.

  • Zeilennummern anzeigen zeigt fortlaufende Nummern neben jeder Codezeile an, damit Sie und andere Entwickler, die das Skript gemeinsam verwenden, Code genau lokalisieren können.
  • Schriftgrad steuert die Größe (Klein, Mittel oder Groß) des Texts im Skript. Die Standardoption lautet Klein.
  • Codefragmentkommentare einschließen fügt dem Code, den Sie über die Codefragmentoptionen auf der rechten Seite des Bedienfelds hinzufügen, automatisch Kommentare hinzu.

Zusätzlich zu diesen Anzeigeoptionen können Sie auf den vertikalen Rahmen klicken, der den weißen Skriptbereich vom Menü der Codefragmente trennt, um das Menü auszublenden, damit mehr Raum für den Code zur Verfügung steht. Klicken Sie erneut auf die Trennlinie, um das Menü einzublenden.

Beachten der Syntax

Betrachten wir jetzt den Code, den Sie im Auslöser hinzugefügt haben, etwas genauer, um die Syntax von JavaScript, d. h. das Zusammenwirken von Wörtern und Interpunktion, kennenzulernen. Die Syntax ist die Grammatik einer Programmiersprache.

Wenn Sie mit Programmcode oder Skripts nicht vertraut sind, ist es möglicherweise schwierig für Sie, den von Edge Animate eingefügten JavaScipt-Code zu entschlüsseln. Sobald Sie jedoch die grundlegende Syntax verstehen, können Sie ein Skript leichter interpretieren.

Der Code im Auslöser bei 10.000 Millisekunden wird wie folgt angezeigt:

sym.play(0);

  • Das erste Wort in der Anweisung lautet „sym“. Wenn sich die Anweisung in der Hauptzeitleiste befindet, stellt das Wort „sym“ die gesamte Edge Animate-Komposition dar. Edge Animate-beruht auf dem Konzept der Symbole und das grundlegende Symbol bzw. Stammsymbol ist die Edge Animate-Bühne. Dieses Stammsymbol enthält alle Elemente und Animationen in der Edge Animate-Komposition – alles, was sich auf der Bühne oder Zeitleiste befindet. Wenn in JavaScript eine Aktion ausgeführt werden soll, identifizieren Sie zunächst das Objekt, das Sie steuern möchten. Da Sie in diesem Fall die Zeitleiste der Edge Animate-Komposition beeinflussen möchten, beginnt das Skript mit dem Wort „sym“.
  • Der Punkt-Operator (.) bietet Zugriff auf verschiedene Befehle für das Objekt, das Sie identifiziert haben (in diesem Fall „sym“). Bei Objekten kann es sich um Animationen, Text oder abstrakte Konzepte, z. B. das Datum oder bestimmte Daten, handeln. Objekte verfügen über Eigenschaften, die sie beschreiben, und Methoden, bei denen es sich um die Aktionen handelt, die Objekte ausführen können. In dem Auslöser lautet die Methode für das sym-Objekt „play()“. Das Objekt und seine Methode werden durch den Punkt getrennt.
  • Wie in der deutschen Sprache muss auch in JavaScript für jede öffnende Klammer eine schließende Klammer vorhanden sein. Was geöffnet wird, muss auch geschlossen werden. Alle Methoden enthalten Klammern. Die Methode „play()“ verfügt über eine öffnende und schließende Klammer.
  • Jede Methode kann unterschiedliche Argumente, die zusätzliche Informationen liefern, zwischen den Klammern aufweisen. Die play()-Methode erfordert ein einzelnes Argument, das Edge Animate anweist, zu welchem Zeitpunkt (in Millisekunden) die Wiedergabe gestartet werden soll. Methoden können mehrere Argumente aufweisen und diese werden durch Kommas getrennt.
  • Manche Argumente erfordern eine Zahl, manche möglicherweise einen Namen und andere eventuell das Wort „true“ oder „false“. Verwenden Sie immer einzelne oder doppelte Anführungszeichen, wenn Sie den Namen einer Datei oder URL eingeben. Anführungszeichen unterscheiden einen Zeichenfolgenwert, der eine Sequenz von Zeichen darstellt, von anderen Arten von Werten.
  • Sie können Kommentare hinzufügen, die Ihnen oder anderen Personen erläutern, was unterschiedliche Teile des Skripts bewirken. Um einen Kommentar für eine einzelne Zeile hinzuzufügen, beginnen Sie ihn mit zwei Schrägstrichen (//). Beginnen Sie einen Kommentar für mehrere Zeilen mit /* und beenden Sie ihn mit */. Kommentare werden von JavaScript ignoriert und haben keinerlei Auswirkungen auf den Code.
  • In JavaScript gibt das Semikolon am Ende der Zeile das Ende einer vollständigen Anweisung und das Ende einer Codezeile an. Ein Semikolon entspricht einem Punkt in einem Satz.

Eine einzelne Codezeile enthält also eine Menge an Informationen! Sie müssen jedoch mit der Syntax vertraut werden, um den Platz hinter dem Lenkrad zu verlassen und einen Blick unter die Motorhaube zu werfen.

Ereignisse und Aktionen

Sie haben inzwischen verstanden, wie Edge Animate mithilfe von Auslösern automatisch JavaScript ausführt, wenn der Abspielkopf einen bestimmten Punkt auf der Zeitleiste erreicht. Sie haben am Ende der Animation einen Auslöser hinzugefügt, um eine Schleife zu erstellen. Die anderen beiden Möglichkeiten zum Hinzufügen von JavaScript in Edge Animate sind Ereignisse und Aktionen.

Ereignisse bezeichnen Geschehnisse in Edge Animate, die von Edge Animate erkannt werden können, um darauf zu reagieren. Sie geben Aktionen als Reaktionen auf erkannte Ereignisses an.

Es ist hilfreich, Interaktionen als Ereignisse und Aktionen aufzufassen. Wenn Sie auf eine Menüschaltfläche klicken (Ereignis), werden möglicherweise weitere Optionen eingeblendet (Aktion). Wenn Sie die Maus über eine Schaltfläche bewegen (Ereignis), wird möglicherweise ein dreieckiges Wiedergabesymbol auf ihr angezeigt (Aktion). Im nächsten Abschnitt fügen Sie der Bühne Miniaturbilder hinzu. Wenn der Benutzer auf die einzelnen Miniaturbilder klickt (Ereignis), wird der Abspielkopf zu einer neuen Position auf der Zeitleiste verschoben (Aktion), um ein bestimmtes Bild der Reisediashow anzuzeigen.

Erstellen der Schaltflächen

Eine Schaltfläche ist ein einfaches visuelles Element, mit dem der Benutzer interagieren kann. Normalerweise klickt der Benutzer auf eine Schaltfläche, jedoch sind viele weitere Typen von Interaktionen möglich. Hierzu zählen beispielsweise Rollover, Doppelklicks und Rollouts. Edge Animate bietet zudem spezielle Ereignisse für Mobilgeräte, z. B. Berührung.

Sie beginnen mit dem einfachsten und häufigsten Ereignis, dem einzelnen Mausklick.

Hinzufügen der Miniaturbilder

Der Bildordner enthält kleine, beschnittene Bilder der größeren Myanmar-Bilder.

  1. Blenden Sie im Bibliothek-Bedienfeld im Ordner Assets den Bildordner ein.

  2. Ziehen Sie die Datei „button1_gray.jpg“ aus dem Bibliothek-Bedienfeld auf die Bühne.

    In den Bedienfeldern Bühne, Zeitleiste und Elemente wird ein Graustufen-Miniaturbild eines Fischers angezeigt.

  3. Positionieren Sie das Miniaturbild so, dass sich seine linke obere Ecke in der linken oberen Ecke der Bühne befindet. Die Koordinaten sollten X=0, Y=0 lauten.

  4. Ziehen Sie die Datei „button2_gray.jpg“ aus dem Bibliothek-Bedienfeld auf die Bühne und positionieren Sie sie direkt unter dem ersten Miniaturbild. Sie können die intelligenten Hilfslinien verwenden, um die Bilder automatisch einrasten zu lassen. Die Koordinaten sollten X=0, Y=80 lauten.

    Auf der linken Seite der Bühne befinden sich zwei Graustufen-Miniaturbilder, eines über dem anderen.

  5. Ziehen Sie die drei restlichen Graustufen-Miniaturbilder aus dem Bibliothek-Bedienfeld auf die Bühne und positionieren Sie jedes Miniaturbild unter dem jeweils vorherigen Miniaturbild.

    Auf der linken Seite der Bühne sollten insgesamt fünf Miniaturbilder untereinander angeordnet sein.

Hinzufügen der Ereignisse

Jedes Element auf der Bühne kann über eigene Ereignisse und Aktionen verfügen. Fügen Sie aus der äußersten linken Spalte des Zeitleiste- oder Elemente-Bedienfelds Code für einzelne Elemente ein. Die Schaltfläche Aktionen öffnen wird durch geschweifte Klammern angegeben.

  1. Klicken Sie im Zeitleiste- oder Elemente-Bedienfeld auf die Schaltfläche Aktionen öffnen für das erste Miniaturbildelement „button1_gray“.

    Das Skriptbedienfeld für „button1_gray“ wird geöffnet.

    Ein Menü mit Optionen wird automatisch geöffnet, in dem die Ereignisse angezeigt werden, die für das Element „button1_gray“ möglich sind.

  2. Wählen Sie die erste Option: „click“.

    Im oberen Bereich des Bedienfelds in Edge Animate wird die Registerkarte „click“ mit einem leeren Skriptbedienfeld und verfügbaren Codefragmenten auf der rechten Seite hinzugefügt.

    Hinweis:

    Wenn Sie demselben Element weitere Ereignisse hinzufügen, werden im oberen Bereich des Skriptbedienfelds zusätzliche Registerkarten hinzugefügt.

    Hinweis:

    Um ein Ereignis (und sämtlichen diesem zugeordneten Code) zu löschen, wählen Sie die Registerkarte für das Ereignis und klicken Sie in der linken oberen Ecke des Skriptbedienfelds auf die Schaltfläche mit dem Minuszeichen (Minus).

Hinzufügen von Aktionen

Für jedes Ereignis muss eine zugehörige Aktion bzw. Reaktion auf das Ereignis vorhanden sein.

  1. Setzen Sie den Cursor auf die zweite Zeile des Skriptbedienfelds (unter der ersten Zeile mit Kommentaren) und wählen Sie die Option Anhalten bei.

    Der Code zum Anhalten des Abspielkopfs an einer bestimmten Position auf der Zeitleiste wird in Edge Animate hinzugefügt.

  2. Ersetzen Sie die Zahl 1000 innerhalb der Klammern der stop()-Methode durch 0.

    Die stop()-Methode erfordert eine Zahl in Millisekunden für den Punkt auf der Zeitleiste, an dem die Wiedergabe angehalten wird. Da das erste Graustufen-Miniaturbild den Fischer darstellt, soll der Abspielkopf bei 0:00 Sekunden angehalten werden. Dies ist der Zeitpunkt, zu dem auf der Bühne das vollständige Bild des Fischers angezeigt wird.

    Hinweis:

    Sie können für die stop()-Methode von „button1_gray“ im Grunde genommen jeden Wert zwischen 0 und 1500 verwenden, da das Bild des Fischers bis zum Zeitpunkt von 1,5 Sekunden auf der Zeitleiste bleibt. Es ist jedoch einfacher und erleichtert eine konsistente Vorgehensweise, die Zeit zu wählen, zu der das Bild erstmals angezeigt wird.

  3. Schließen Sie das Skriptbedienfeld.

    Das Symbol „Aktionen öffnen“ für das Element „button1_gray“ wird ausgefüllt dargestellt, um anzuzeigen, dass derzeit ein Skript mit diesem Element verknüpft ist.

  4. Zeigen Sie eine Vorschau der Edge Animate-Komposition in einem Browser an, indem Sie Datei > Vorschau im Browser wählen oder Strg+Eingabe (Windows) bzw. Befehl+Return (Mac OS) drücken.

  5. Klicken Sie zu einem beliebigen Zeitpunkt während der Diashow auf das erste Graustufen-Miniaturbild.

    Die Diashow wird angehalten und zeigt das Bild der Fischer an.

Abschließen der Interaktivität

Nachdem Sie die Interaktivität für die erste Schaltfläche abgeschlossen haben, fügen Sie den restlichen Elementen die gleiche Funktionalität hinzu.

  1. Klicken Sie im Zeitleiste- oder Elemente-Bedienfeld auf die Schaltfläche Aktionen öffnen für das zweite Miniaturbildelement „button2_gray“.

    Das Skriptbedienfeld für „button2_gray“ wird geöffnet.

  2. Klicken Sie in der linken oberen Ecke auf die Schaltfläche mit dem Pluszeichen (+).

    Ein Menü mit Optionen wird geöffnet, in dem die Ereignisse angezeigt werden, die für das Element „button2_gray“ möglich sind.

  3. Wählen Sie die erste Option: „click“.

    Im oberen Bereich des Bedienfelds in Edge Animate wird die Registerkarte „click“ mit einem leeren Skriptbedienfeld und verfügbaren Codefragmenten auf der rechten Seite hinzugefügt.

  4. Setzen Sie den Cursor auf die zweite Zeile des Skriptbedienfelds (unter der ersten Zeile mit Kommentaren) und wählen Sie die Option Anhalten bei.

    Der JavaScript-Code zum Anhalten des Abspielkopfs an einer bestimmten Position auf der Zeitleiste wird in Edge Animate hinzugefügt.

  5. Ersetzen Sie die Zahl 1000 innerhalb der Klammern der stop()-Methode durch 2000.

    Die stop()-Methode erfordert eine Zahl in Millisekunden für den Punkt auf der Zeitleiste, an dem die Wiedergabe angehalten wird. Da das zweite Graustufen-Miniaturbild die Statuen darstellt, soll der Abspielkopf bei 0:02 Sekunden angehalten werden. Dies ist der Zeitpunkt, zu dem auf der Bühne das vollständige Bild der Statuen angezeigt wird.

  6. Fügen Sie allen weiteren Graustufen-Miniaturbildern ähnliche click-Ereignisse mit der Option „Anhalten bei“ hinzu. Ändern Sie die Argumente für jede stop()-Methode wie folgt, damit der Abspielkopf zu unterschiedlichen Zeiten angehalten und auf der Bühne ein jeweils größeres Bild angezeigt wird:

    • Das Argument der stop()-Methode für „button1_gray“ sollte 0 Millisekunden lauten.
    • Das Argument der stop()-Methode für „button2_gray“ sollte 2000 Millisekunden lauten.
    • Das Argument der stop()-Methode für „button3_gray“ sollte 4000 Millisekunden lauten.
    • Das Argument der stop()-Methode für „button4_gray“ sollte 6000 Millisekunden lauten.
    • Das Argument der stop()-Methode für „button5_gray“ sollte 8000 Millisekunden lauten.

Navigieren im Code-Bedienfeld

Die Reisediashow ist jetzt interaktiv und Benutzer können durch Klicken jedes der Bilder anzeigen. Der Code scheint jedoch über viele unterschiedliche Elemente verstreut zu sein. Wie können Sie den gesamten Code der Edge Animate-Komposition zusammen anzeigen? Die Antwort liefert das Code-Bedienfeld, das Sie öffnen, indem Sie Fenster > Code wählen oder Strg+E (Windows) bzw. Befehl+E (Mac OS) drücken.

Anzeigen des Codes

Im Code-Bedienfeld wird der gesamte Code der Edge Animate-Komposition angezeigt – sowohl der Code, der für jedes Projekt automatisch generiert wird, als auch der Code, den Sie selbst einfügen.

  1. Wählen Sie Fenster > Code oder drücken Sie Strg+E (Windows) bzw. Befehl+E (Mac OS).

    Das Code-Bedienfeld wird geöffnet. Das Code-Bedienfeld ähnelt den anderen Skriptbedienfeldern für Auslöser, Ereignisse und Aktionen.

  2. Klicken Sie ganz rechts im Bedienfeld auf die Schaltfläche Vollständiger Code, um zwischen dem Modus Vollständiger Code und dem Modus Nicht vollständiger Code zu wechseln.

    Im Modus Vollständiger Code wird der gesamte Code der JavaScript-Datei für die Edge Animate-Komposition angezeigt. Scrollen Sie nach unten, um das Skript für alle Miniaturbildelemente sowie den Auslöser anzuzeigen. Der Code, der dies darstellt, befindet sich in der Datei „05_workingcopy_edgeActions.js“.

    Im Modus Nicht vollständiger Code können Sie auf der linken Seite des Bedienfelds den Code für die einzelnen Elemente oder Auslöser auf der Bühne auswählen. Es ist außerdem eine Option zum Anzeigen des Codes für den Preloader vorhanden. Diese ist derzeit deaktiviert, da Sie noch keinen Preloader hinzugefügt haben. In späteren Lektionen erfahren Sie, wie Sie einen Preloader hinzufügen.

  3. Klicken Sie im Modus Nicht vollständiger Code in der Zeile mit dem Element Bühne auf die Schaltfläche mit dem Pluszeichen (+).

    Ein hierarchisches Menü wird angezeigt, mit dem Sie der Zeitleiste, der Bühne oder einem beliebigen Element auf der Bühne ein Ereignis hinzufügen können.

  4. Wenn Sie ein Ereignis oder einen Auslöser im Code-Bedienfeld löschen möchten, klicken Sie mit der rechten Maustaste auf das Ereignis bzw. den Auslöser und wählen Sie Aktion löschen.

  5. Wenn Sie im Modus Vollständiger Code oder Nicht vollständiger Code dem Skript etwas hinzufügen oder das Skript bearbeiten, werden diese Änderungen in der Komposition gespeichert.

    Hinweis:

    Behandeln von Codefehlern

    Mithilfe der bereitgestellten Codefragmente lässt sich Code relativ einfach hinzufügen, da das Skript bereits ordnungsgemäß formatiert ist. Sie müssen lediglich die Schlüsselwerte ersetzen. Jedoch schleichen sich immer Fehler oder Tippfehler ein und jeder Entwickler, ob Neuling oder Experte, muss sich mit dem Behandeln von Codefehlern befassen.

    Edge Animate macht Sie sofort auf Codefehler aufmerksam, sodass sie diese leicht finden und korrigieren können. Wenn ein beliebiger Teil des Codes einen Syntaxfehler enthält, wird in der linken unteren Ecke des Code-Bedienfelds in Edge Animate eine Fehlermeldung angezeigt. Falls Sie zum Beispiel die schließende Klammer der stop()-Methode versehentlich löschen, teilt Ihnen die Fehleranzeige mit, wo der Fehler auftritt. Zusätzlich wird neben der betreffenden Codezeile ein roter Punkt angezeigt.

    Die Fehlerbenachrichtigung wird auch in der rechten unteren Ecke der Bühne angezeigt.

    Hinweis:

    Klicken Sie auf das Pfeilsymbol nach der Fehlerbeschreibung, um direkt zu der Quelle des Fehlers im Code-Bedienfeld zu wechseln und den Fehler zu beheben. Die Optionen Alle und Code in der Fehleranzeige legen fest, ob alle Fehler (einschließlich Warnungen zu Features, die mit verschiedenen Geräten nicht kompatibel sind, z. B. Textschattierung in IE9) oder nur Codefehler angezeigt werden.

Erstellen von Beschriftungen

Wenn der Benutzer in Edge Animate auf die einzelnen Miniaturbilder klickt, wird der Abspielkopf entsprechend dem Argument in der stop()-Methode an einen neuen Zeitpunkt auf der Zeitleiste verschoben. Nehmen wir jedoch an, der Kunde, der Sie mit dem Entwickeln dieser Diashow beauftragt hat, möchte, dass die gesamte Sequenz etwas langsamer abgespielt wird. Diese Aufgabe lässt sich einfach erfüllen, da Sie alle Elemente auf der Zeitleiste auswählen und alle Schlüsselbilder und Animationen nach vorne verschieben können, um die Gesamtdauer zu verlängern. Dies bewirkt jedoch, dass sich die Zeitpunkte, zu denen jedes Bild auf der Bühne angezeigt wird, ändern, sodass Sie alle Millisekundenwerte in den stop()-Methoden ändern müssen.

Mit einem anderen Ansatz können Sie Zeit und Mühe sparen. Statt fester Millisekundenwerte in den stop()-Methoden können Sie Beschriftungen verwenden, die auf Punkte auf der Zeitleiste verweisen. Beschriftungen können mit der Animation bewegt werden, sodass sie durch Erhöhen oder Verringern der Dauer der Animation entsprechend verschoben werden.

Hinzufügen von Beschriftungen

Beschriftungen werden im Zeitleiste-Bedienfeld unter den Zeitmarkierungen und direkt über der Ebene Aktionen angezeigt.

  1. Verschieben Sie den Abspielkopf zu 0:00 Sekunden.

    Das Bild des Fischers wird bei 0:00 Sekunden angezeigt.

  2. Klicken Sie auf die Schaltfläche Beschriftung einfügen oder drücken Sie Strg+L (Windows) bzw. Befehl+L (Mac OS).

    Auf der Zeitleiste wird eine Beschriftung mit dem Namen Label 1 angezeigt.

  3. Benennen Sie die Beschriftung in fishermen um und drücken Sie die Eingabetaste, um die Textbearbeitung der Beschriftung zu beenden.

    Die Beschriftung „fishermen“ ist jetzt 0:00 Sekunden zugeordnet.

  4. Fügen Sie der Zeitleiste vier weitere Beschriftungen hinzu und markieren Sie den Anfangszeitpunkt, zu dem ein Bild auf der Bühne angezeigt wird.

    • Fügen Sie bei 0:02 Sekunden die Beschriftung statues ein.
    • Fügen Sie bei 0:04 Sekunden die Beschriftung houses ein.
    • Fügen Sie bei 0:06 Sekunden die Beschriftung monk ein.
    • Fügen Sie bei 0:08 Sekunden die Beschriftung women ein.

Bearbeiten von Beschriftungen

Es gibt mehrere Möglichkeiten zum Bearbeiten von Beschriftungen, nachdem Sie sie eingefügt und benannt haben:

  • Um eine Beschriftung umzubenennen, doppelklicken Sie auf der Zeitleiste auf den Beschriftungsnamen.
  • Um eine Beschriftung zu verschieben, klicken Sie auf der Zeitleiste auf die Beschriftung und ziehen Sie sie an eine neue Position.
  • Um eine Beschriftung zu löschen, wählen Sie auf der Zeitleiste die Beschriftung aus, um sie hervorzuheben, und drücken Sie die Entf-Taste.
  • Um eine Beschriftung auszuschneiden, zu kopieren oder einzufügen, klicken Sie mit der rechten Maustaste auf die Beschriftung und wählen Sie die gewünschte Option oder verwenden Sie die Standard-Tastaturbefehle für Ausschneiden (Strg/Befehl+X), Kopieren (Strg/Befehl+C) bzw. Einfügen (Strg/Befehl+V).

Ändern der Verweise auf die Zeitleiste

Da die Zeitleiste jetzt Beschriftungen enthält, können Sie die Verweise im JavaScript-Code ändern.

  1. Wählen Sie Fenster > Code oder drücken Sie Strg+E (Windows) bzw. Befehl+E (Mac OS).

    Das Code-Bedienfeld wird geöffnet.

  2. Sofern noch nicht ausgewählt, klicken Sie auf die Schaltfläche Vollständiger Code, um das Bedienfeld im Modus Vollständiger Code anzuzeigen.

    Der gesamte Code für die Miniaturbildereignisse und -aktionen wird in dem einzelnen Skriptbedienfeld angezeigt.

  3. Ersetzen Sie alle Millisekundenwerte in den stop()-Methoden durch die Beschriftungen. Die folgenden Codezeilen müssen geändert werden:

    • Ändern Sie sym.stop(0); in sym.stop("fishermen");
    • Ändern Sie sym.stop(1500); in sym.stop("statues");
    • Ändern Sie sym.stop(3500); in sym.stop("houses");
    • Ändern Sie sym.stop(5500); in sym.stop("monk");
    • Ändern Sie sym.stop(7500); in sym.stop("women");
    Hinweis:

    Schließen Sie die Beschriftungsnamen in gerade Anführungszeichen ein. Die Anführungszeichen sind erforderlich, damit die Namen in JavaScript als Zeichenfolge (und nicht als Variable) identifiziert werden. Gerade Anführungszeichen und typografische Anführungszeichen sind in HTML und JavaScript unterschiedliche Zeichen, die nicht austauschbar sind.

  4. Zeigen Sie eine Vorschau der Edge Animate-Komposition in einem Browser an, indem Sie Datei > Vorschau im Browser wählen oder Strg+Eingabe (Windows) bzw. Befehl+Return (Mac OS) drücken.

  5. Klicken Sie zu einem beliebigen Zeitpunkt während der Diashow auf die Miniaturbilder.

    Die Diashow wird angehalten und zeigt das ausgewählte Bild an.

  6. Kehren Sie zu Edge Animate zurück und wählen Sie alle Elemente auf der Zeitleiste aus, indem Sie Auswählen > Alles auswählen wählen oder Strg+A (Windows) bzw. Befehl+A (Mac OS) drücken. Stellen Sie sicher, dass keines der Elemente gesperrt ist.

  7. Klicken Sie auf der Zeitleiste auf das letzte Schlüsselbild des letzten animierten Elements und ziehen Sie es. Ziehen Sie das Schlüsselbild nach links, um die Gesamtdauer der Diashow zu verringern.

    Wenn Sie die Dauer für alle animierten Elemente verringern, werden die Beschriftungen proportional verschoben. Dabei wird die Kennzeichnung der auf der Bühne angezeigten Elemente beibehalten. Setzen Sie die Gesamtzeit der Komposition auf 0:10 Sekunden zurück.

Hinzufügen von visuellem Feedback

Die meisten interaktiven Elemente im Web bieten visuelles Feedback. Dies ist wichtig, damit der Benutzer erkennt, dass das betreffende Element interaktiv ist. Beispielsweise ändert sich die Farbe eines einfachen Hyperlinks auf einer Webseite, wenn Sie die Maus über ihn bewegen. Eine Schaltfläche wird hervorgehoben, wenn Sie die Maus über sie bewegen, und wird möglicherweise als gedrückt angezeigt, wenn Sie auf sie klicken.

Sie können diese Interaktionen in Edge Animate mit einer Kombination von Ereignissen und Aktionen erstellen. Sie fügen im Folgenden den Miniaturbildern diese Ereignisse und Aktionen hinzu, um visuelles Feedback zu erzeugen.

Hinzufügen der Mouseover-Miniaturbilder

Sie sollten sich zunächst fragen, welchen visuellen Effekt Sie wünschen, wenn ein Benutzer die Maus über die Miniaturbilder bewegt. In diesem Projekt legen Sie fest, dass die Graustufen-Miniaturbilder farbig werden und der Bereich um die Rahmen hervorgehoben wird. Zunächst müssen die farbigen Versionen der Miniaturbilder auf die Bühne gebracht werden.

  1. Der Bildordner im Ordner Assets des Bedienfelds Bibliothek enthält Farbversionen jedes der fünf Miniaturbilder. Diese Versionen werden durch „_color“ am Ende des Dateinamens angegeben.

  2. Ziehen Sie „button1_color.jpg“ aus der Bibliothek auf die Bühne.

  3. Verwenden Sie die intelligenten Hilfslinien, um das Element „button1_color“ in der linken oberen Ecke genau über seiner Graustufenversion zu positionieren. Seine Position sollte X=0, Y=0 lauten.

  4. Ziehen Sie alle vier weiteren Farbversionen der Miniaturbilder auf die Bühne und positionieren Sie sie direkt über ihren Graustufenversionen. Alle farbigen Miniaturbilder sollten sich oben auf dem Stapel der Bilder im Elemente-Bedienfeld befinden.

    Alle Graustufen- und Farbversionen der Miniaturbilder weisen genau die gleichen Abmessungen auf.

Ausblenden der Mouseover-Miniaturbilder

Da die Farbversion nur angezeigt werden soll, wenn der Mauszeiger über das Miniaturbild bewegt wird, müssen die farbigen Miniaturbilder zunächst ausgeblendet werden. Sie können die Elemente ausblenden, indem Sie ihre Eigenschaft Anzeigen in Aus ändern.

  1. Verschieben Sie den Abspielkopf zu 0:00 Sekunden.

  2. Halten Sie die Umschalttaste gedrückt und wählen Sie alle farbigen Miniaturbildelemente aus.

  3. Ändern Sie im Eigenschaften-Bedienfeld die Eigenschaft Anzeigen von Ein in Aus.

    Auf der Zeitleiste in Edge Animate wird bei 0:00 Sekunden ein neues Schlüsselbild für alle ausgewählten Elemente eingefügt und die ausgewählten Elemente werden nicht mehr auf der Bühne angezeigt.

Einfügen des mouseover-Ereignisses

Jedes Graustufen-Miniaturbild enthält ein click-Ereignis. Sie müssen jedes dieser Elemente bearbeiten, um ein mouseover-Ereignis zu integrieren. Ein mouseover-Ereignis erfolgt, wenn der Benutzer den Mauszeiger über das ausgewählte Element bewegt. Wenn das mouseover-Ereignis eintritt, werden die farbigen Miniaturbilder angezeigt.

  1. Klicken Sie im Zeitleiste- oder Elemente-Bedienfeld auf die Schaltfläche Aktionen öffnen für das erste Miniaturbildelement „button1_gray“.

    Das Skriptbedienfeld für „button1_gray“ wird geöffnet. Das aktuelle click-Ereignis und die aktuellen Aktionen werden angezeigt.

  2. Klicken Sie in der linken oberen Ecke auf die Schaltfläche mit dem Pluszeichen (+) und wählen Sie „mouseover“.

    Die Registerkarte „mouseover“ wird in Edge Animate hinzugefügt.

  3. Setzen Sie den Cursor auf die zweite Zeile des Skriptbedienfelds (unter der ersten Zeile mit Kommentaren) und wählen Sie die Option Element anzeigen.

    Der JavaScript-Code zum Anzeigen eines Elements wird in Edge Animate hinzugefügt. Der hervorgehobene Teil des Codes ist der Name des Elements, das angezeigt werden soll.

  4. Ersetzen Sie den hervorgehobenen Code durch button1_color. Stellen Sie sicher, dass die doppelten geraden Anführungszeichen um den Elementnamen erhalten bleiben.

    Die vollständige Anweisung wird wie folgt angezeigt:

    sym.$("button1_color").show();

    Das Dollarzeichen und die Klammern sind jQuery-Syntax und diese weisen den Browser an, was ausgewählt werden soll. In dieser Anweisung ist das Element „button1_color“ in der aktuellen Edge Animate-Komposition ausgewählt und die show()-Methode wird ausgeführt.

  5. Zeigen Sie eine Vorschau der Edge Animate-Komposition in einem Browser an, indem Sie Datei > Vorschau im Browser wählen oder Strg+Eingabe (Windows) bzw. Befehl+Return (Mac OS) drücken. Bewegen Sie die Maus über das erste Graustufen-Miniaturbild.

    Sobald der Mauszeiger über das Graustufen-Miniaturbild bewegt wird, wird die Farbversion angezeigt. Da sich die Farbversion über der Graustufenversion befindet, wird nur das farbige Bild angezeigt.

  6. Kehren Sie zu Edge Animate zurück und fügen Sie mit der Aktion Element anzeigen das mouseover-Ereignis in die vier restlichen Graustufen-Miniaturbild-Schaltflächen ein. Stellen Sie sicher, dass Sie den hervorgehobenen Teil des Codes durch die richtige farbige Version des Miniaturbilds ersetzen.

Einfügen des mouseout-Ereignisses

Beim Anzeigen des Edge Animate-Projekts in der Vorschau werden Sie feststellen, dass die Miniaturbilder farbig dargestellt werden, wenn Sie die Maus über sie bewegen, und die farbige Darstellung erhalten bleibt, nachdem Sie die Maus von ihnen wegbewegt haben. Damit die Miniaturbilder wieder in der Graustufenversion dargestellt werden, müssen Sie ein weiteres Ereignis hinzufügen: das mouseout-Ereignis.

Das mouseout-Ereignis erfolgt, wenn der Cursor von einem Element wegbewegt wird. Sie fügen das mouseout-Ereignis den farbigen Miniaturbildern (nicht den Graustufen-Miniaturbildern) hinzu und verknüpfen das Ereignis mit einem Befehl zum Ausblenden der farbigen Version. Als Ergebnis wird die farbige Version ausgeblendet, sodass die Graustufenversion wieder angezeigt wird.

  1. Klicken Sie im Zeitleiste- oder Elemente-Bedienfeld auf die Schaltfläche Aktionen öffnen für das Miniaturbildelement „button1_color“. Das Element ist derzeit auf der Bühne ausgeblendet, Sie können ihm jedoch Skript hinzufügen.

    Das Skriptbedienfeld für „button1_color“ wird geöffnet.

  2. Wählen Sie im angezeigten Popupmenü als Ereignis „mouseout“.

    Die Registerkarte „mouseout“ wird in Edge Animate hinzugefügt.

  3. Setzen Sie den Cursor auf die zweite Zeile des Skriptbedienfelds (unter der ersten Zeile mit Kommentaren) und wählen Sie die Option Element ausblenden.

    Der JavaScript-Code zum Anzeigen eines Elements wird in Edge Animate hinzugefügt. Der hervorgehobene Teil des Codes ist der Name des Elements, das angezeigt werden soll.

  4. Ersetzen Sie den hervorgehobenen Code durch button1_color. Stellen Sie sicher, dass die doppelten geraden Anführungszeichen um den Elementnamen erhalten bleiben.

    Die vollständige Anweisung wird wie folgt angezeigt:

    sym.$("button1_color").hide();

    Beachten Sie die Gemeinsamkeiten zwischen den Aktionen für das mouseout-Ereignis und dem vorherigen Skript für das mouseover-Ereignis.

  5. Zeigen Sie eine Vorschau der Edge Animate-Komposition in einem Browser an, indem Sie Datei > Vorschau im Browser wählen oder Strg+Eingabe (Windows) bzw. Befehl+Return (Mac OS) drücken. Bewegen Sie die Maus über das erste Graustufen-Miniaturbild.

    Sobald der Mauszeiger über das Graustufen-Miniaturbild bewegt wird, wird es farbig angezeigt. Wenn Sie den Mauszeiger vom Bild wegbewegen, wird die Schaltfläche wieder in der Graustufenversion angezeigt.

  6. Kehren Sie zu Edge Animate zurück und fügen Sie mit der Aktion Element ausblenden das mouseout-Ereignis in die vier restlichen farbigen Miniaturbild-Schaltflächen ein. Stellen Sie sicher, dass Sie den hervorgehobenen Teil des Codes durch die richtige farbige Version des Miniaturbilds ersetzen.

Bearbeiten des click-Ereignisses

Damit alle Ereignisse und Aktionen zusammenwirken, ist ein letzter Schritt erforderlich. Sie haben möglicherweise bemerkt, dass der Abspielkopf nicht wie gewünscht bewegt wird, wenn Sie auf die Schaltflächen klicken. Die Ursache dieses Problems ist, dass die farbigen Miniaturbilder ihre Entsprechungen in der Graustufenversion überlappen, durch die kein click-Ereignis ausgelöst wird. Als letzten Schritt müssen Sie das click-Ereignis von den Graustufen-Miniaturbildern entfernen und sie stattdessen den farbigen Miniaturbildern hinzufügen.

  1. Klicken Sie im Zeitleiste- oder Elemente-Bedienfeld für jedes der Graustufen-Miniaturbildelemente auf die Schaltfläche Aktionen öffnen.

  2. Wählen Sie im Skriptbedienfeld die Ereignisregisterkarte „click“ und klicken Sie auf die Schaltfläche mit dem Minuszeichen (-).

    Das click-Ereignis und alle zugehörigen Aktionen werden in Edge Animate gelöscht.

  3. Klicken Sie im Zeitleiste- oder Elemente-Bedienfeld für jedes der farbigen Miniaturbildelemente auf die Schaltfläche Aktionen öffnen.

  4. Klicken Sie in der linken oberen Ecke auf die Schaltfläche mit dem Pluszeichen (+) und wählen Sie als Ereignis „click“.

    Die Ereignisregisterkarte „click“ wird in Edge Animate hinzugefügt.

  5. Wählen Sie die Option Anhalten bei und ersetzen Sie wie bereits zuvor das Millisekundenargument durch die entsprechende Beschriftung auf der Zeitleiste.

  6. Zeigen Sie eine Vorschau der Edge Animate-Komposition in einem Browser an, indem Sie Datei > Vorschau im Browser wählen oder Strg+Eingabe (Windows) bzw. Befehl+Return (Mac OS) drücken.

    Die Schaltflächen sind vollständig. Wenn Sie die Maus über sie bewegen, werden sie farbig dargestellt. Wenn Sie die Maus von ihnen wegbewegen, werden sie wieder in der Graustufenversion dargestellt, und wenn Sie auf sie klicken, wird das entsprechende Bild aus der Diashow in Edge Animate angezeigt.

    Hinweis:

    Durchführen globaler Bearbeitungsschritte mithilfe des Code-Bedienfelds: Das Durchführen globaler Bearbeitungsschritte, wie Sie von Ihnen in dieser Aufgabe vorgenommen wurden, z. B. das Löschen aller click-Ereignisse aus einem Satz von Elementen, kann beschwerlich sein, da jedes Element ausgewählt und geändert werden muss. Sie können jedoch durch Verwendung des Bedienfelds Code viel Zeit sparen, wenn Sie beim Auswählen und Bearbeiten von Code sorgfältig vorgehen.

    Öffnen Sie das Code-Bedienfeld, indem Sie Fenster > Code wählen oder Strg+E (Windows) bzw. Befehl+E (Mac OS) drücken, und wählen Sie den Modus Vollständiger Code. Überprüfen Sie den Code sämtlicher click-Ereignisse („click“) für alle gewünschten Elemente. Löschen Sie alles, was mit den Anweisungen beginnt, die das click-Ereignis enthalten, und mit //Edge binding end endet.

    Hinweis:

    Ereignisse für die Maus und für Geräte mit Touchscreen: In der folgenden Liste werden die verfügbaren Ereignisse erläutert, die Sie für die Interaktion mit der Maus oder mit einer Berührung den Elementen zuordnen können. Für die meisten Benutzer reichen das click-Ereignis und das touchstart-Ereignis für alle Projekte aus.

    • click: ein Ereignis, das eintritt, wenn die Maustaste gedrückt und losgelassen wird.
    • dblclick: ein Ereignis, das eintritt, wenn die Maustaste zweimal kurz hintereinander gedrückt und losgelassen wird.
    • mouseover: ein Ereignis, das eintritt, wenn der Mauszeiger über ein Element bewegt wird.
    • mousedown: ein Ereignis, das eintritt, wenn die Maustaste gedrückt wird.
    • mousemove: ein Ereignis, das immer eintritt, wenn der Mauszeiger in einem Element bewegt wird.
    • mouseup: ein Ereignis, das eintritt, wenn die Maustaste losgelassen wird.
    • mouseout: ein Ereignis, das eintritt, wenn der Mauszeiger von einem Element wegbewegt wird.
    • touchstart: ein Ereignis für Touchscreengeräte, das eintritt, wenn ein Benutzer ein Element berührt.
    • touchmove: ein Ereignis für Touchscreengeräte, das eintritt, wenn der Benutzer ein Element berührt und einen Finger über das Element zieht.
    • touchend: ein Ereignis für Touchscreengeräte, das eintritt, wenn der Benutzer die Berührung eines Elements beendet.

    Weitere Benutzerereignisse, z. B. das Drücken von Tasten auf der Tastatur, sind ebenfalls verfügbar, jedoch nicht für einzelne Elemente. Tastendruckereignisse sind dem Element Bühne zugeordnet. Dieses Ereignis und andere Arten von Ereignissen werden in der nächsten Lektion erläutert.

Anpassen des Mauszeigers

Sie können nicht nur visuelles Feedback bereitstellen, indem sich die Darstellung der Schaltfläche ändert, wenn der Benutzer mit ihr interagiert, sondern auch die Darstellung des Cursors selbst ändern. Häufig ändert sich der standardmäßige pfeilförmige Cursor in einem Desktop- oder Laptopbrowser in eine Hand (auch als Zeigefinger bezeichnet), wenn er sich über einem interaktiven Element oder einem Hyperlink befindet. Sie können die Darstellung des Cursors in einen Zeigefinger ändern oder unter Dutzenden anderer Cursortypen einen Typ auswählen.

Verwenden des Zeigefingers

Im Eigenschaften-Bedienfeld wird die Darstellung des Cursors gesteuert und Sie können dort für jedes Element ein benutzerdefiniertes Symbol auswählen.

  1. Legen Sie im Zeitleiste-Bedienfeld die Eigenschaft Anzeigen für die fünf farbigen Miniaturbildelemente vorübergehend auf Ein fest.

    Durch Aktivieren der Eigenschaft Anzeigen können Sie die Elemente auf der Bühne auswählen.

  2. Wählen Sie alle fünf farbigen Miniaturbildelemente aus, von „button1_color“ bis „button5_color“.

  3. Klicken Sie im Eigenschaften-Bedienfeld auf die Option Cursor und wählen Sie das Zeigefingersymbol.

  4. Legen Sie die Eigenschaft Anzeigen für die fünf farbigen Miniaturbildelemente wieder auf Aus fest.

    Die farbigen Miniaturbildelemente werden wieder ausgeblendet.

  5. Zeigen Sie eine Vorschau der Edge Animate-Komposition in einem Browser an, indem Sie Datei > Vorschau im Browser wählen oder Strg+Eingabe (Windows) bzw. Befehl+Return (Mac OS) drücken.

    Der Zeigefinger wird immer angezeigt, wenn Sie die Maus über die Schaltflächen bewegen oder auf die Schaltflächen klicken.

    Hinweis:

    Sie können die Darstellung des Cursors nur für jedes Element, jedoch nicht für jedes Ereignis eines Elements ändern.

Steuern von animierten Elementen

Sie haben bisher JavaScript hinzugefügt, mit dem das Verhalten des Abspielkopfs und das Ausblenden oder Anzeigen bestimmter Elemente gesteuert wurden. Sie können auch Code zum Steuern der Wiedergabe von animierten Symbolen hinzufügen.

Wie Sie in der vorherigen Lektion gelernt haben, sind Symbole eigenständige Objekte, die Sie erstellen und die eine eigene interne Animation aufweisen können. Sie können mit JavaScript die Symbolanimationen steuern, um differenziertere Interaktionen zu erzeugen. Beispielsweise können Sie eine Schaltfläche erstellen, mit der die effektvolle Animation des Ausbreitens oder Schließens einer Karte gesteuert wird. Oder Sie können eine Schaltfläche erstellen, mit der das animierte Anzeigen oder Ausblenden eines Felds mit weiteren Informationen gesteuert wird. Die Karte und das Feld mit weiteren Informationen sind dann Symbole mit eigenständigem Verhalten auf der Hauptzeitleiste.

Für die interaktive Reisediashow fügen Sie im oberen Bereich der Bühne eine Schaltfläche hinzu, die elegant animiert wird, um Informationen über die Bilder und Myanmar anzuzeigen, wenn die Maus über sie bewegt wird.

Hinzufügen der Schaltfläche und des animierten Symbols

Die Schaltfläche und das animierte Symbol wurden bereits für Sie erstellt und stehen in der Bibliothek zur Verwendung bereit.

  1. Blenden Sie im Bibliothek-Bedienfeld den Abschnitt „Symbole“ ein und ziehen Sie das Symbol „moreinfo“ auf die Bühne. Positionieren Sie das Symbol „moreinfo“ bei X=200, Y=0.

    Das Symbol „moreinfo“ wird in den Bedienfeldern Elemente und Zeitleiste angezeigt. Die kurzen Wiedergabepfeilspitzen auf der Zeitleiste zeigen an, wie lange die Animation im Symbol ausgeführt wird (Dauer von einer Sekunde).

  2. Klicken Sie auf der Zeitleiste auf die Wiedergabeoptionen für das Element „moreinfo“ und wählen Sie Anhalten.

    Die interne Symbolanimation wird nicht auf der Hauptzeitleiste abgespielt.

  3. Doppelklicken Sie auf der Bühne auf das Symbol „moreinfo“ und drücken Sie die Leertaste, um die Animation im Symbol anzuzeigen.

    Das Symbol besteht aus zwei kurzen Animationen. Das lange horizontale graue Rechteck wird eingeblendet und gleichzeitig wird der Beschnittrahmen für einen Informationstext eingeblendet, um diesen Text anzuzeigen.

  4. Klicken Sie oben auf der Bühne auf die Schaltfläche Bühne, um das Symbol zu schließen.

  5. Ziehen Sie das Bild „triangle.png“ aus dem Ordner Assets im Bibliothek-Bedienfeld auf die Bühne. Positionieren Sie das Dreieckselement bei X=484, Y=3 oder verwenden Sie die intelligenten Hilfslinien, um das Element mittig über dem Element „moreinfo“ anzuordnen.

Wiedergeben eine Symbolanimation

Das Symbol wird derzeit bei 0 Sekunden angehalten. Sie fügen der Dreiecksschaltfläche ein mouseover-Ereignis hinzu, das die Wiedergabe des Symbols auslöst.

  1. Klicken Sie im Zeitleiste- oder Elemente-Bedienfeld auf die Schaltfläche Aktionen öffnen für das Element „triangle“.

    Das Skriptbedienfeld für „triangle“ wird geöffnet.

  2. Wählen Sie als Ereignis „mouseover“ aus.

    Die Ereignisregisterkarte „mouseover“ wird in Edge Animate hinzugefügt.

  3. Wählen Sie die Option Symbol abrufen.

    Der JavaScript-Code zum Auswählen eines bestimmten Symbols auf der Bühne wird in Edge Animate hinzugefügt. Der hervorgehobene Teil des Codes ist der Name des Symbols, das ausgewählt werden soll.

  4. Ersetzen Sie den hervorgehobenen Code durch moreinfo, damit dieser dem Element moreinfo auf der Bühne entspricht. Stellen Sie sicher, dass die doppelten geraden Anführungszeichen um den Elementnamen erhalten bleiben.

    Die vollständige Anweisung wird wie folgt angezeigt:

    var mySymbolObject = sym.getSymbol("moreinfo");

    Durch den ersten Teil der Anweisung, var mySymbolObject, wird eine Variable für den Verweis auf das Symbol erstellt, sodass Sie es steuern können.

  5. Wählen Sie in der nächsten Zeile im Skriptbedienfeld die Option Abspielen.

    Eine Anweisung zum Abspielen des sym-Objekts bzw. der Hauptzeitleiste wird in Edge Animate hinzugefügt. Es soll jedoch die Animation des Symbols und nicht die Animation auf der Hauptzeitleiste abgespielt werden.

  6. Ersetzen Sie sym durch die Variable mySymbolObject, die auf das Symbol verweist.

    Die nächste Anweisung wird wie folgt angezeigt:

    mySymbolObject.play();

    Hinweis:

    Sie können die beiden Anweisungen wie folgt in einer Zeile zusammenfassen: sym.getSymbol("moreinfo").play();

Zurücksetzen der Symbolanimation

Sie fügen jetzt ein mouseout-Ereignis für das Element „triangle“ hinzu, um zum Zurücksetzen der Animation den Abspielkopf zurück zu 0 Sekunden zu verschieben.

  1. Klicken Sie im Zeitleiste- oder Elemente-Bedienfeld auf die Schaltfläche Aktionen öffnen für das Element „triangle“.

    Das Skriptbedienfeld für die Schaltfläche „moreinfo“ wird geöffnet.

  2. Klicken Sie in der linken oberen Ecke auf das Pluszeichen (+) und wählen Sie als Ereignis mouseout.

    Die Ereignisregisterkarte „mouseout“ wird in Edge Animate hinzugefügt.

  3. Wählen Sie die Option Symbol abrufen und ersetzen Sie den hervorgehobenen Code durch moreinfo.

    Die vollständige Anweisung wird wie folgt angezeigt:

    var mySymbolObject = sym.getSymbol("moreinfo");

  4. Wählen Sie in der nächsten Zeile im Skriptbedienfeld die Option Anhalten bei.

    Eine Anweisung zum Anhalten des sym-Objekts bzw. der Hauptzeitleiste wird in Edge Animate hinzugefügt. Es soll jedoch die Animation des Symbols und nicht die Animation auf der Hauptzeitleiste angehalten werden.

  5. Ersetzen Sie „sym“ durch die Variable mySymbolObject, die auf das Symbol verweist. Ersetzen Sie das Standardargument 1000 Millisekunden durch 0.

    Die nächste Anweisung wird wie folgt angezeigt:

    mySymbolObject.stop(0);

  6. Zeigen Sie eine Vorschau der Edge Animate-Komposition in einem Browser an, indem Sie Datei > Vorschau im Browser wählen oder Strg+Eingabe (Windows) bzw. Befehl+Return (Mac OS) drücken.

    Wenn Sie die Maus über die Dreiecksschaltfläche im oberen Bereich der Bühne bewegen, wird die Animation des Symbols „moreinfo“ abgespielt und das Textfeld mit dem zugehörigen Text wird angezeigt. Wenn Sie die Maus von der Schaltfläche wegbewegen, werden das Textfeld und der Text ausgeblendet.

Verwenden von jQuery-Effekten

Die Edge Animate-API bietet ein ausgewogenes Verhältnis von Leistung, Flexibilität und Benutzerfreundlichkeit, um Interaktivität in Designs und Animationen zu integrieren. Das Einfügen von Skript durch Klicken auf eine Schaltfläche im Skriptbedienfeld ist ein (fast immer) kinderleichtes Verfahren. Sie können Ihre Aufgabe jedoch häufig durch das Einfügen von jQuery in die Skripts erleichtern. Wie Sie in dieser Lektion gelernt haben, ist jQuery eine JavaScript-Bibliothek, die speziell entwickelt wurde, um das Auswählen von Elementen auf einer Webseite sowie das Erstellen von Animationen und Übergängen zu erleichtern. Es gibt viele jQuery-Methoden zum Animieren von Elementen, z. B. Fade-in und Fade-out oder Slide-in und Slide-out. Da Edge Animate vollständig kompatibel mit JavaScript und jQuery ist, können Sie diese Methoden immer verwenden, wenn Sie dies für sinnvoll erachten. Betrachten wir eine bestimmte jQuery-Methode, fadeToggle(). Die fadeToggle()-Methode animiert die Transparenz eines Elements, indem sie diese abhängig vom aktuellen Status des Elements erhöht oder verringert. Wenn das Element transparent ist, wird es undurchsichtig. Wenn das Element undurchsichtig ist, wird es transparent.

  1. Fügen Sie in einer neuen Edge Animate-Komposition auf der Bühne ein kleines Rechteck und ein Bild hinzu. Benennen Sie das Rechteck mit Rectangle und das Bild mit Image.

  2. Klicken Sie im Zeitleiste- oder Elemente-Bedienfeld auf die Schaltfläche Aktionen öffnen für das Element Rectangle.

  3. Wählen Sie als Ereignis „click“ aus.

  4. Fügen Sie für das click-Ereignis die folgende Anweisung hinzu: sym.$("Image").fadeToggle()

  5. Und das war es schon! Zeigen Sie die Vorschau der Komposition in einem Browser an.

    Wenn Sie auf das Rechteck klicken, wird das Bild mithilfe von jQuery ausgewählt und die fadeToggle()-Methode wird in Edge Animate ausgeführt. Das Bild wird durch Klicken abwechselnd transparent bzw. nicht transparent. jQuery erstellt automatisch zwei umgekehrte Animationen, ohne dass Sie manuell Symbole, Schlüsselbilder oder Mechanismen zum Speichern des Status des Bildes erstellen müssen. jQuery ist eine leistungsstarke Ergänzung Ihres Toolkits für Designer/Entwickler. Sie können die Datei „05JQuery.an“ im Ordner „05End_JQuery“ öffnen, um das abgeschlossene Beispiel anzuzeigen.

Prüfung

Prüfungsfragen

  1. Was ist der Unterschied zwischen Aktionen, Auslösern und Ereignissen und wie werden sie zum Erzeugen von Interaktivität in Adobe Edge Animate verwendet?
  2. Welche Beziehung besteht zwischen der Edge Animate-API, jQuery und JavaScript?
  3. Wie erstellen Sie eine Schaltfläche?
  4. Warum sollten Sie eine Beschriftung verwenden und wo befinden sich Beschriftungen?
  5. Was ist das Code-Bedienfeld und worin unterscheidet es sich von den Bedienfeldern für Aktionen und Auslöser?
  6. Was bedeutet in der Edge Animate-API der Code „sym“ und wie verwenden Sie ihn?

Prüfungsantworten

  1. Aktionen, Auslöser und Ereignisse sind JavaScript-Code, mit dem Sie in Edge Animate Interaktivität erzeugen. Aktionen sind Befehle zum Ausführen von Vorgängen in Edge Animate, z. B. das Ausblenden oder Anzeigen eines Elements oder das Laden eines Hyperlinks. Auslöser sind Aktionen, die auf der Zeitleiste eingefügt werden, damit sie zu einem bestimmten Zeitpunkt ausgeführt werden. Ereignisse bezeichnen Geschehnisse in einer Komposition, auf die Edge Animate mit Aktionen reagieren kann.
  2. Edge Animate verwendet zum Steuern von Animationen und Interaktivität JavaScript. JavaScript ist die Standardskriptsprache für Webbrowser. jQuery ist eine Bibliothek wohlformulierter JavaScript-Funktionen, die das Auswählen und Animieren von Elementen auf einer Webseite erleichtern. Die Edge Animate-API bietet zusätzliche Funktionen (auf Basis von JavaScript und jQuery) zum Steuern von Elementen in der Komposition.
  3. Eine Schaltfläche ist ein visuelles Element, mit dem der Benutzer interagieren kann. Sie können eine Schaltfläche erstellen, indem Sie auf der Bühne ein Element erstellen und dann im Zeitleiste- oder Elemente-Bedienfeld auf die Schaltfläche Aktionen öffnen klicken, um ein Ereignis hinzuzufügen. Fügen Sie auf der daraufhin geöffneten Ereignisregisterkarte Aktionen ein, die ausgelöst werden sollen, wenn das Ereignis eintritt.
  4. Beschriftungen befinden sich im oberen Bereich der Zeitleiste. Sie geben bestimmte Zeitpunkte an, sodass Sie im JavaScript-Code auf Beschriftungsnamen statt auf feste Millisekundenwerte verweisen können.
  5. Im Code-Bedienfeld, das Sie durch Drücken von Strg+E (Windows) bzw. Befehl+E (Mac OS) öffnen, können Sie sämtlichen JavaScript-Code für die aktuelle Edge Animate-Komposition anzeigen. In ihm werden außerdem alle Codefehler und ihre Position im Skript angezeigt. In Bedienfeldern zum Hinzufügen von Auslösern, Ereignissen und Aktionen wird hingegen nur der Code für das entsprechende Element oder den entsprechenden Zeitpunkt angezeigt.  
  6. Das Wort „sym“ stellt die gesamte Edge Animate-Komposition dar, wenn sich die Anweisung auf der Hauptzeitleiste befindet. Edge Animate-beruht auf dem Konzept der Symbole und das grundlegende Symbol bzw. Stammsymbol ist die Edge Animate-Bühne. Dieses Stammsymbol enthält alle Elemente und Animationen in der Edge Animate-Komposition – alles, was sich auf der Bühne oder Zeitleiste befindet. Wenn in JavaScript eine Aktion ausgeführt werden soll, identifizieren Sie zunächst das Objekt, das Sie steuern möchten. Wenn Sie die Zeitleiste der Edge Animate-Komposition beeinflussen möchten, beginnt das Skript mit dem Wort „sym“.
Adobe-Logo

Bei Ihrem Konto anmelden

Hilfreiche Links

Alle Ihre Abos anzeigen Abos verwalten

Rechtliche Hinweise    |    Online-Datenschutzrichtlinie