Beispiel: Animationen-Mustermappe (Flash Professional)

Dieses Beispiel soll Ihnen einen ersten Eindruck vermitteln, wie einzelne ActionScript-Codefragmente zu einer vollständigen Anwendung zusammengefügt werden können. Die Animationen-Mustermappe dient als Beispiel, um zu veranschaulichen, wie Sie einer vorhandenen linearen Animation einige kleinere interaktive Elemente hinzufügen können. Beispielsweise können Sie eine Animation, die für einen Kunden erstellt wurde, in eine Online-Mustermappe einbinden. Das interaktive Verhalten, das der Animation hinzugefügt werden soll, wird mit zwei Schaltflächen realisiert, auf die Benutzer klicken können: eine zum Starten der Animation und eine zum Navigieren zu einer separaten URL (z. B. zum Menü der Mustermappe oder zur Homepage des Autors).

Das Erstellen dieser Animation kann in die folgenden Hauptabschnitte unterteilt werden:

  1. Vorbereiten der FLA-Datei für das Einfügen von ActionScript und interaktiven Elementen

  2. Erstellen und Hinzufügen der Schaltflächen

  3. Programmieren des ActionScript-Codes

  4. Testen der Anwendung.

Vorbereiten für das Hinzufügen interaktiver Elemente

Bevor der Animation interaktive Elemente hinzugefügt werden können, sollte die FLA-Datei entsprechend vorbereitet werden, indem Platz zum Hinzufügen der zusätzlichen Inhalte geschaffen wird. Dazu muss Platz auf der Bühne geschaffen werden, damit die Schaltflächen platziert werden können. Weiterhin muss „Platz“ in der FLA-Datei verfügbar gemacht werden, damit unterschiedliche Elemente separat aufbewahrt werden können.

So richten Sie die FLA-Datei für das Hinzufügen interaktiver Elemente ein:

  1. Erstellen Sie eine FLA-Datei mit einer einfachen Animation, wie ein einzelnes Bewegungs-Tween oder Form-Tween. Wenn bereits eine FLA-Datei mit der Animation vorhanden ist, die im Projekt gezeigt werden soll, öffnen Sie diese Datei und speichern Sie sie unter einem neuen Namen.

  2. Bestimmen Sie, an welcher Stelle auf dem Bildschirm die beiden Schaltflächen angezeigt werden sollen. Eine Schaltfläche dient zum Starten der Animation, die andere ist ein Hyperlink zur Mustermappe oder Homepage des Autors. Schaffen Sie hierzu bei Bedarf auf der Bühne etwas Platz für diese neuen Inhalte. Wenn die Animation noch keinen Startbildschirm enthält, können Sie diesen im ersten Bild erstellen. In diesem Fall ist es sinnvoll, die Animation so zu verschieben, dass sie erst bei Bild 2 oder einem späteren Bild beginnt.

  3. Fügen Sie über den anderen Ebenen in der Zeitleiste eine neue Ebene hinzu und geben Sie ihr den Namen buttons . Auf dieser Ebene fügen Sie die Schaltflächen hinzu.

  4. Fügen Sie über der Ebene „buttons“ eine neue Ebene ein und nennen Sie sie actions . Auf dieser Ebene wird der Anwendung ActionScript-Code hinzugefügt.

Erstellen und Hinzufügen von Schaltflächen

Im nächsten Schritt erstellen und positionieren Sie die Schaltflächen, die das Kernstück der interaktiven Anwendung bilden.

So erstellen Sie Schaltflächen und fügen sie der FLA-Datei hinzu:

  1. Erstellen Sie auf der Ebene „buttons“ mithilfe der Zeichenwerkzeuge die grafische Darstellung der ersten Schaltfläche („Wiedergabe“). Zeichnen Sie beispielsweise ein horizontales Oval und platzieren Sie darauf Text.

  2. Markieren Sie mit dem Auswahlwerkzeug alle Grafikelemente der einzelnen Schaltfläche.

  3. Wählen Sie im Hauptmenü die Optionen „Modifizieren“ > „In Symbol konvertieren“ aus.

  4. Wählen Sie im angezeigten Dialogfeld als Symboltyp „Button“ aus, weisen Sie dem Symbol einen Namen zu und klicken Sie auf „OK“.

  5. Weisen Sie der markierten Schaltfläche im Eigenschafteninspektor den Instanznamen playButton zu.

  6. Wiederholen Sie die Schritte 1 bis 5, um die Schaltfläche zu erstellen, mit der Benutzer zur Homepage des Autors weitergeleitet werden. Geben Sie dieser Schaltfläche den Namen homeButton .

Programmieren des Codes

Der ActionScript-Code für diese Anwendung kann funktionell in drei Abschnitte unterteilt werden, die jedoch alle an derselben Stelle eingefügt werden. Der Code führt die drei folgenden Aktionen aus:

  • Anhalten des Abspielkopfs, sobald die SWF-Datei geladen wird (beim Erreichen von Bild 1)

  • Überwachen eines Ereignisses (das Klicken des Benutzers auf die Wiedergabeschaltfläche), um daraufhin die Wiedergabe der SWF-Datei zu starten

  • Überwachen eines Ereignisses (das Klicken des Benutzers auf die Homepageschaltfläche), um daraufhin im Browser die entsprechende URL zu öffnen

So erstellen Sie Code, um den Abspielkopf beim Erreichen von Bild 1 anzuhalten:

  1. Wählen Sie das Schlüsselbild in Bild 1 der Ebene „actions“ aus.

  2. Wählen Sie im Hauptmenü die Optionen „Fenster“ > „Aktionen“ aus, um das Bedienfeld „Aktionen“ zu öffnen.

  3. Geben Sie im Bedienfeld „Skript“ den folgenden Code ein:

    stop();

So erstellen Sie Code zum Starten der Animation beim Klicken auf die Wiedergabeschaltfläche:

  1. Fügen Sie am Ende des in den vorangegangenen Schritten eingegebenen Codes zwei leere Zeilen ein.

  2. Geben Sie am Ende des Skripts den folgenden Code ein:

    function startMovie(event:MouseEvent):void 
    { 
        this.play(); 
    }

    Mit diesem Code wird die Funktion startMovie() definiert. Beim Aufrufen von startMovie() wird die Wiedergabe der Hauptzeitleiste gestartet.

  3. Geben Sie in der Zeile nach dem im vorangegangenen Schritt eingefügten Code die folgende Codezeile ein:

    playButton.addEventListener(MouseEvent.CLICK, startMovie);

    Mit dieser Codezeile wird die startMovie() -Funktion als Listener für das click -Ereignis von playButton registriert. Das bedeutet, dass bei jedem Klicken auf die Schaltfläche playButton die startMovie() -Funktion aufgerufen wird.

So erstellen Sie den Code zum Öffnen einer URL im Browser beim Klicken auf die Homepageschaltfläche:

  1. Fügen Sie am Ende des in den vorangegangenen Schritten eingegebenen Codes zwei leere Zeilen ein.

  2. Geben Sie am Ende des Skripts den folgenden Code ein:

    function gotoAuthorPage(event:MouseEvent):void 
    { 
        var targetURL:URLRequest = new URLRequest("http://example.com/"); 
        navigateToURL(targetURL); 
    }

    Mit diesem Code wird die Funktion gotoAuthorPage() definiert. Diese Funktion erstellt zunächst eine URLRequest-Instanz, die die URL http://example.com/ darstellt. Anschließend übergibt sie diese URL an die Funktion navigateToURL() , wodurch diese URL im Browser des Benutzers geöffnet wird.

  3. Geben Sie in der Zeile nach dem im vorangegangenen Schritt eingefügten Code die folgende Codezeile ein:

    homeButton.addEventListener(MouseEvent.CLICK, gotoAuthorPage);

    Mit dieser Codezeile wird die gotoAuthorPage() -Funktion als Listener für das click -Ereignis von homeButton registriert. Das bedeutet, dass bei jedem Klicken auf die Schaltfläche homeButton die gotoAuthorPage() -Funktion aufgerufen wird.

Testen der Anwendung

Die Anwendung ist nun voll funktionsfähig. Testen Sie sie nun, um sich davon zu überzeugen.

So testen Sie die Anwendung:

  1. Wählen Sie im Hauptmenü die Optionen „Steuerung“ > „Film testen“ aus. Flash Professional erstellt die SWF-Datei und öffnet sie in einem Flash Player-Fenster.

  2. Klicken Sie auf beide Schaltflächen, um sich zu vergewissern, dass sie wie erwartet funktionieren.

  3. Wenn dies nicht der Fall sein sollte, überprüfen Sie folgende Punkte:

    • Ist beiden Schaltflächen jeweils ein eigener Instanzname zugeordnet?

    • Werden diese Namen in den Aufrufen der addEventListener() -Methode als Instanznamen der Schaltflächen verwendet?

    • Werden in den Aufrufen der addEventListener() -Methode die richtigen Ereignisnamen verwendet?

    • Ist für jede der Funktionen der korrekte Parameter angegeben? (Beide Methoden erfordern einen einzelnen Parameter mit dem MouseEvent-Datentyp.)

    Bei diesen und den meisten anderen Fehlern wird eine Fehlermeldung angezeigt. Die Fehlermeldung wird entweder angezeigt, wenn Sie den Befehl „Film testen“ wählen, oder wenn Sie beim Testen des Projekts auf die Schaltfläche klicken. Die Kompilierfehler werden im entsprechenden Bedienfeld aufgelistet (dies sind die Fehler, die auftreten, wenn Sie zum ersten Mal „Film testen“ auswählen). Laufzeitfehler werden im Bedienfeld „Ausgabe“ angezeigt. Diese Fehler treten bei der Wiedergabe des Inhalts auf, beispielsweise wenn Sie auf eine Schaltfläche klicken.