öffentlich
Redaktion Druckversion

Flash: Actionscript 3.0

Schnelleinstieg in die ActionScript 3.0-Programmierung

Zeitleiste steuern

Flash-Film "Zeitleiste" (Im PDF bitte diesen Direktlink aufrufen)

Hauptzeitleiste

Wir ergänzen nun die Interaktivität mit einer Steuerung der Hauptzeitleiste aus einem MovieClip heraus:

Aufgabe:

Speichern Sie zunächst Ihre Datei unter neuem Namen ab. Legen Sie auf der Hauptzeitleiste in einem geringen Abstand auf der Script-Ebene ein weiteres leeres Schlüsselbild an. Das wird die Sprungmarke. Nennen Sie den Frame/das Bild im Eigenschafteninspektor "seite2".

Zeitleiste vorbereiten

An dieser Stelle sollte das Menü entfernt sein (leeres Schlüsselbild) und anstatt der Figur der Hinweis "Seite 2" erscheinen (neues Schlüsselbild).

Setzen Sie in Bild 1 unter allen Aktionen den stop();-Befehl. Somit stoppt der Film zunächst bei Bild 1. Zu dem Bild "seite2" soll erst gesprungen werden, wenn der Anwender auf die entsprechende Schaltfläche klickt.

Ziel ist nun, innerhalb des Menüs eine Schaltfläche zu aktivieren, die veranlasst, dass auf der Hauptzeitleiste von Bild 1 zu Bild "seite2" gesprungen wird.

In den bisherigen Übungen haben wir die Schaltfläche innerhalb des Movieclips von der Hauptzeitleiste aus programmiert. Damit haben wir von "außen nach innen" programmiert - und das ist die empfehlenswerte Vorgehensweise. Denn damit haben Sie gewährleistet, dass Sie den Code übersichtlich und griffbereit zentral an einer Stelle verwalten können. Das leere Schlüsselbild mit den Aktionen darin wird zu einer "Schaltzentrale".

Es ist jedoch auch möglich, von "innen nach außen" zu programmieren. Wir werden dies nun in der Praxis einmal durchgehen, damit Sie auch verstehen, wie Sie umgekehrt navigieren können.

Zeitleiste Movieclip

Aufgabe:

Wechseln Sie in den Bearbeitungsmodus vom MovieClip "Menu". Legen Sie eine weitere Schaltfläche an, die dem Anwender "Seite2" zur Auswahl anbietet. Vergeben Sie für den Instanznamen seite2_btn und legen Sie auf der Zeitleiste eine Ebene für das nun einzugebende Script an.

Zeitleiste im Symbol MC Menu

Aufgabe:

Schreiben Sie nun für die Schaltfläche "seite2_btn" einen EventListener, der auf das Mausereignis "CLICK" hört. Die Funktion nennen Sie "zuSeite2".

Die entsprechende Funktion:

function zuSeite2(e:MouseEvent):void {
MovieClip(root).gotoAndStop("seite2");
}

Pfadangaben

root

Das aus älterem ActionScript bekannte _root als absolute Adresse für die Hauptzeitleiste - egal von welchem Punkt aus - gibt es nicht mehr. Die folgende Lösung erreicht jedoch von jedem Objekt aus die Hauptzeitleiste, die ja auch ein Movieclip ist.

Beispiel:

Ein Movieclip auf der Hauptzeitleiste als Zielobjekt:

MovieClip(root).mein_mc.visible=false;

parent

Wenn Sie nur in einer Tiefe arbeiten, wie unserem Fall, würde auch die Ansprache per

MovieClip(parent).gotoAndStop("seite2");

funktionieren. Mit "parent" wird die Zeitleiste eines übergeordneten Movieclips angesprochen. parent.parent wären dann so etwas wie die "Großeltern" - also die übergeordnete Zeitleiste der übergeordneten Zeitleiste usw.

Testen Sie den Film!

this

Das Schlüsselwort "this", das Sie vielleicht aus älteren Versionen kennen, bezieht sich nur noch auf die jeweilige Umgebung (Zeitleiste/Objekt), in der es aktuell verwendet wird. Sie sollten streng genommen also schreiben:

MovieClip(this.parent).gotoAndStop("seite2");

Das Schlüsselwort "this" spricht nicht mehr ein Objekt selbst an; in diesem Fall verwenden Sie evt.currentTarget, das Sie schon kennen, oder den Befehl evt.target - auf den ich noch konkreter eingehen werde.

getChildByName

Wenn Sie von einem untergeordneten MovieClip aus einen Clip in einem übergeordneten Clip anvisieren, der nicht auf der Hauptzeitleiste liegt, dann müssen Sie es so schreiben:

parent.getChildByName("meinziel_mc").visible=false;

Es gibt kein Schlüsselwort für "Kindzeitleiste" oder ähnliches. Wenn Sie eine Zeitleiste innerhalb eines Clips ansteuern wollen - also von außen nach innen gehen - dann erreichen Sie diese Zeitleiste immer über den jeweiligen Instanznamen.gotoAndStop("Bildname");

Dabei können Sie beliebig viele Instanzen voranstellen.

Zeitleistenbefehle

Welche Befehle für die Zeitleiste gibt es?

Methoden der ZeitleistensteuerungDa die Zeitleiste ebenfalls ein MovieClip-Objekt ist, finden Sie die entsprechenden Steuerungsmethoden wie immer unter flash.display/movieClip/Methoden.

  • gotoAndPlay(Bildnummer);

  • gotoAndStop(Bildnummer);

Anstatt "Bildnummer" verwende ich lieber einen konkreten Bildnamen - so wie in unserer Übung. Das ist einfacher zu handhaben. Denn sollten Sie Bilder auf der Zeitleiste verschieben, funktioniert das Script dennoch immer noch einwandfrei.

Bei der Verwendung von Bildnamen als Ziel müssen Sie diese in Anführungszeichen setzen.

  • nextFrame();

  • prevFrame();

Bei diesen Befehlen springen Sie ein Bild vor, respektive zurück auf der Zeitleiste und der Abspielknopf bleibt dort stehen.

  • stop();

Der Abspielknopf hält an, wenn er auf ein Bild trifft, das diesen Befehl enthält.

  • play();

Der Abspielknopf spielt weiter, wenn er auf ein Bild trifft, das diesen Befehl enthält.

Aufgabe:

Veröffentlichen Sie den SWF-Film und die HTML-Datei und speichern Sie die beiden Dateien in Ihrem Übungsordner ab.

Mitglied werden, Vorteile nutzen!

  • Sie können alles lesen und herunterladen: Beiträge, PDF-Dateien und Zusatzdateien (Checklisten, Vorlagen, Musterbriefe, Excel-Rechner u.v.a.m.)
  • Unsere Autoren beantworten Ihre Fragen

Inhalt

Über die Autorin:

arbeitet seit 1999 als Web- und Flash-Designerin. Das Spezialgebiet der zertifizierten Animatorin sind die Konzeption und Entwicklung interaktiver Designs. Dazu gehört ein tiefes Verständnis dafür, was "unter der Haube" passiert. Schließlich macht die Programmierung ca. 50 Prozent ihrer Arbeit aus. Faszinierend findet Sonja Vieten dabei gerade die Verbindung von Design und interaktiver Programmierung.

Newsletter abonnieren